/* =========================================================================== GenkiCars, design system Brand: black, with #22c55e as the one accent. The logo keeps its own official colours. Built mobile-first; no framework, no external requests. =========================================================================== */ :root {
  /* --- brand ------------------------------------------------------------ */
  --green:        #22c55e;
  --green-dark:   #16a34a;
  --green-darker: #15803d;
  --green-tint:   #f0fdf4;
  --on-green:     #0a0a0a;   /* text on the green: white fails contrast */
  --link:         #15803d;   /* green that reads on white */
  --green-ring:   rgba(34,197,94,.28);

  --ink:          #121212;   /* page text */
  --ink-2:        #3f4448;   /* secondary text */
  --ink-3:        #6b7378;   /* muted / labels */
  --logo-ink:     #231f20;   /* brand black, used for chrome */

  /* --- surfaces --------------------------------------------------------- */
  --bg:           #ffffff;
  --bg-soft:      #f6f7f8;
  --bg-sunken:    #eef0f2;
  --line:         #e3e6e9;
  --line-strong:  #d0d5da;

  /* --- status ----------------------------------------------------------- */
  --sold:         #b0221f;
  --sold-bg:      #fdeceb;
  /* "Caution" tone (restricted, warnings). Named amber for history, but a deep
     slate on a cool grey: no yellow anywhere, it sits with the green and black. */
  --amber:        #334155;
  --amber-bg:     #f1f5f9;

  /* --- type ------------------------------------------------------------- */
  --font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Tahoma, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* --- shape ------------------------------------------------------------ */
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(16,20,24,.06), 0 3px 10px rgba(16,20,24,.06);
  --shadow-md: 0 1px 2px rgba(16,20,24,.06), 0 4px 12px rgba(16,20,24,.07), 0 14px 32px rgba(16,20,24,.07);
  --shadow:    0 1px 2px rgba(16,20,24,.05), 0 6px 16px rgba(16,20,24,.07), 0 18px 40px rgba(16,20,24,.06);
  --shadow-lg: 0 2px 4px rgba(16,20,24,.06), 0 16px 36px rgba(16,20,24,.12), 0 36px 80px rgba(16,20,24,.14);
  --shadow-green: 0 6px 18px rgba(34,197,94,.32), 0 1px 0 rgba(255,255,255,.35) inset;

  /* Every contained block on the page shares this width, including the hero,
     which is a contained card rather than a full-bleed band. */
  --container: 1290px;
  --gutter: 24px;
  --header-h: 76px;
}
/* --------------------------------------------------------------------------- Base --------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: #fff; }
/* Page to page, the browser cross-fades instead of flashing white (Chrome,
   Edge, Safari 18.2+; other browsers change page as before). The header and
   the tab bar are named, so they hold still while the content changes. */
@view-transition { navigation: auto; }
.site-header { view-transition-name: gk-header; }
.app-tabs { view-transition-name: gk-tabs; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
/* Lets height:auto be animated, needed for the FAQ accordion. Ignored by browsers that don't support it, which then open instantly. */ :root { interpolate-size: allow-keywords; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.18; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
h1 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem); }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.1rem); }
h3 { font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); }
p { margin: 0 0 1em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--green-ring);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.section--soft { background: var(--bg-soft); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Parked ABOVE the page, never to the side: on an Arabic (right-to-left) page
   left: -9999px is scrollable, which made every page ~10,000px wide on phones. */
.skip-link {
  position: absolute; inset-inline-start: 0; top: 0; z-index: 200;
  transform: translateY(-120%);
  background: var(--green); color: var(--on-green); padding: .75rem 1.25rem; border-end-end-radius: var(--r);
}
.skip-link:focus { transform: none; }
/* --------------------------------------------------------------------------- Buttons --------------------------------------------------------------------------- */ .btn {
  --btn-bg: var(--green);
  --btn-fg: var(--on-green);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.5rem;
  background: var(--btn-bg); color: var(--btn-fg);
  background-image: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0));
  box-shadow: var(--btn-shadow, var(--shadow-green));
  border: 1px solid transparent; border-radius: var(--r-pill);
  font: inherit; font-weight: 600; line-height: 1;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease, transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}
.btn:hover { --btn-bg: var(--green-dark); text-decoration: none; transform: translateY(-1px); box-shadow: 0 10px 26px rgba(34,197,94,.38), 0 1px 0 rgba(255,255,255,.3) inset; }
.btn:active { transform: translateY(0); --btn-bg: var(--green-darker); }
/* A long label ("Ask for a car shipped to the United Arab Emirates") wraps on a
   phone instead of pushing the page sideways. */
@media (max-width: 480px) { .btn { white-space: normal; text-align: center; line-height: 1.3; max-width: 100%; } }
.btn--dark { --btn-bg: var(--logo-ink); --btn-fg: #fff; --btn-shadow: 0 6px 18px rgba(0,0,0,.22); }
.btn--dark:hover { --btn-bg: #000; }
.btn--ghost { --btn-bg: #fff; --btn-fg: var(--ink); --btn-shadow: var(--shadow-sm); background-image: none; border-color: var(--line); }
.btn--ghost:hover { --btn-bg: #fff; --btn-fg: var(--ink); border-color: var(--line-strong); box-shadow: var(--shadow); }
.btn--on-dark { --btn-bg: #fff; --btn-fg: var(--logo-ink); --btn-shadow: 0 6px 18px rgba(0,0,0,.25); background-image: none; }
.btn--on-dark:hover { --btn-bg: #f1f1f1; --btn-fg: var(--logo-ink); box-shadow: 0 10px 26px rgba(0,0,0,.3); }
/* Outlined button on a dark background. Fills white on hover so the label flips to black, as a class, not an inline style, so :hover can win. */ .btn--ghost-on-dark {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-shadow: none; background-image: none;
  border-color: rgba(255,255,255,.34);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .12s ease;
}
.btn--ghost-on-dark:hover {
  --btn-bg: #fff;
  --btn-fg: var(--logo-ink);
  border-color: #fff;
  box-shadow: none;
}
.btn--sm { padding: .55rem 1rem; font-size: .875rem; }
.btn--lg { padding: 1rem 2rem; font-size: 1.05rem; }
.btn--block { display: flex; width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
/* --------------------------------------------------------------------------- Badges --------------------------------------------------------------------------- */ .badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .28rem .6rem;
  border-radius: var(--r-pill);
  font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  background: var(--bg-sunken); color: var(--ink-2); white-space: nowrap;
}
.badge--green { background: var(--green-tint); color: var(--green-darker); }
.badge--solid { background: var(--green); color: var(--on-green); }
.badge--sold { background: var(--sold-bg); color: var(--sold); }
.badge--dark { background: var(--logo-ink); color: #fff; }
.badge--amber { background: var(--amber-bg); color: var(--amber); }
/* --------------------------------------------------------------------------- Top bar, secondary links above the header. Hidden on small screens, where its links move into the mobile menu instead. --------------------------------------------------------------------------- */ .topbar {
  display: none;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  font-size: .82rem;
}
@media (min-width: 780px) { .topbar { display: block; } }
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 40px;
}
.topbar__nav { display: flex; align-items: center; gap: .25rem; }
.topbar__nav a {
  padding: .3rem .7rem; border-radius: var(--r-sm);
  color: var(--ink-3); font-weight: 500;
  transition: color .15s ease, background-color .15s ease;
}
.topbar__nav a:hover { color: var(--ink); background: var(--bg-soft); text-decoration: none; }
.topbar__nav a[aria-current="page"] { color: var(--ink); }
.topbar__aside { display: flex; align-items: center; gap: 1rem; }
.topbar__mail { color: var(--ink-3); }
.topbar__mail:hover { color: var(--ink); text-decoration: none; }
/* "Register as a car dealer": black pill, white car icon (Papicons, printed in the
   markup) and white text (Lay, 2026-11-02). */
.topbar__dealer {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .32rem .9rem; border-radius: var(--r-pill);
  background: #0a0a0a; color: #fff; font-weight: 600;
  transition: background-color .18s ease, transform .18s ease;
}
.topbar__dealer .dealer-btn__icon, .mobile-nav__dealer .dealer-btn__icon { flex: 0 0 auto; color: #fff; }
.topbar__dealer:hover { background: #262626; color: #fff; text-decoration: none; transform: translateY(-1px); }
/* "Are you an exporter?" in English, then Japanese, then English again. Both
   labels sit in the same grid cell, so the button is as wide as the longer one
   and never changes size. One keyframe set drives both; the Japanese label runs
   half a cycle behind, so one rises out as the other rises in. */
.xfade { display: inline-grid; }
.xfade > span {
  grid-area: 1 / 1; text-align: center; white-space: nowrap;
  animation: xfade 7s cubic-bezier(.4, 0, .2, 1) -.5s infinite;
}
.xfade > span:lang(ja) {
  animation-delay: -4s;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo, "Noto Sans JP", sans-serif;
}
a:hover > .xfade > span, a:focus-visible > .xfade > span { animation-play-state: paused; }
.mobile-nav__dealer .xfade > span { text-align: start; }   /* menu links line up on the left */
/* Opacity and movement only: a blur here is redrawn on every frame inside the
   blurred sticky header, which made scrolling stutter on phones. */
.xfade > span { will-change: opacity, transform; }
@keyframes xfade {
  0%       { opacity: 0; transform: translateY(.6em); }
  7%, 43%  { opacity: 1; transform: none; }
  50%, 100% { opacity: 0; transform: translateY(-.6em); }
}
@media (prefers-reduced-motion: reduce) {
  .xfade > span { animation: none; }
  .xfade > span:lang(ja) { visibility: hidden; }
}
/* --------------------------------------------------------------------------- Header --------------------------------------------------------------------------- */ .site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(16,20,24,.02), 0 8px 24px rgba(16,20,24,.06);
}
.site-header__inner {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: var(--header-h);
}
.site-logo { display: flex; align-items: center; flex: 0 0 auto; }
.site-logo img { height: 30px; width: auto; }
.site-nav { display: none; margin-inline-start: auto; }
@media (min-width: 1000px) { .site-nav { display: flex; align-items: center; gap: .25rem; } }
.site-nav a {
  display: inline-block; padding: .55rem .85rem;
  color: var(--ink-2); font-weight: 500; font-size: .95rem;
  border-radius: var(--r-sm);
  transition: color .15s ease, background-color .15s ease;
}
.site-nav a:hover { color: var(--ink); background: var(--bg-soft); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.site-nav a[aria-current="page"]::after {
  content: ""; display: block; height: 2px; margin-top: 4px;
  background: var(--green); border-radius: 2px;
}
.header-actions { display: flex; align-items: center; gap: .6rem; margin-inline-start: auto; }
@media (min-width: 1000px) { .header-actions { margin-inline-start: 0; } }
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0;
  background: transparent; border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); color: var(--ink); cursor: pointer;
}
@media (min-width: 1000px) { .nav-toggle { display: none; } }
.nav-toggle span { display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor;
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.mobile-nav { display: none; background: var(--bg); border-top: 1px solid var(--line); }
.mobile-nav.is-open { display: block; }
@media (min-width: 1000px) { .mobile-nav.mobile-nav.is-open { display: none; } }
.mobile-nav a {
  display: block; padding: .85rem var(--gutter);
  color: var(--ink); font-weight: 500;
  border-bottom: 1px solid var(--line);
}
.mobile-nav a:hover { background: var(--bg-soft); color: var(--ink); text-decoration: none; }
/* --------------------------------------------------------------------------- Hero, full-bleed band. The background spans the viewport; the copy inside still aligns to the 1290px container like every other block. --------------------------------------------------------------------------- */ .hero {
  position: relative;
  background: var(--logo-ink);
  color: #fff;
  padding-block: clamp(3rem, 7vw, 6rem);
  overflow: hidden;
  isolation: isolate;
}
/* Soft brand glow, plus a faint grid so the flat black has some depth. */ .hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(52% 76% at 82% 22%, rgba(34,197,94,.26), transparent 64%),
    radial-gradient(40% 60% at 8% 90%, rgba(34,197,94,.10), transparent 70%);
  pointer-events: none;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .35;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(70% 70% at 50% 40%, #000 30%, transparent 100%);
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 1; max-width: 46rem; }
.hero h1 {
  color: #fff; margin-bottom: .7rem;
  font-size: clamp(2rem, 1.1rem + 3.4vw, 3.5rem);
  letter-spacing: -.035em; line-height: 1.06;
}
.hero p { color: rgba(255,255,255,.76); font-size: clamp(1rem, .95rem + .3vw, 1.15rem); max-width: 54ch; }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-bottom: 1.1rem; padding: .35rem .8rem;
  background: rgba(34,197,94,.14); border: 1px solid rgba(34,197,94,.3);
  border-radius: var(--r-pill);
  color: #7fd389; font-weight: 600; font-size: .78rem;
  letter-spacing: .06em; text-transform: uppercase;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.9rem; }
/* Secondary path out of the hero, a sentence, not a competing button. */ .hero__alt { margin: 1.1rem 0 0; color: rgba(255,255,255,.6); font-size: .95rem; }
.hero__alt a {
  color: #fff; font-weight: 600;
  text-decoration: underline; text-decoration-color: rgba(34,197,94,.7);
  text-underline-offset: 3px;
  transition: color .18s ease, text-decoration-color .18s ease;
}
.hero__alt a:hover { color: var(--green); text-decoration-color: var(--green); }
/* --------------------------------------------------------------------------- Vehicle card --------------------------------------------------------------------------- */ .car-grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
}
.car-card {
  display: flex; flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .18s ease, transform .18s ease;
}
.car-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-3px); }
.car-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--bg-sunken); overflow: hidden; }
.car-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.car-card:hover .car-card__media img { transform: scale(1.04); }
.car-card__flags { position: absolute; top: .6rem; left: .6rem; display: flex; flex-wrap: wrap; gap: .35rem; z-index: 2; }
.car-card__count {
  position: absolute; right: .6rem; bottom: .6rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .25rem .55rem; border-radius: var(--r-pill);
  background: rgba(18,18,18,.72); color: #fff; font-size: .75rem; font-weight: 600;
  backdrop-filter: blur(4px);
}
/* Sold cars stay visible but visually retired. */ .car-card--sold .car-card__media img { filter: grayscale(1); opacity: .62; }
.car-card__body { display: flex; flex-direction: column; flex: 1; padding: 1rem 1.1rem 1.1rem; }
.car-card__title { font-size: 1.02rem; font-weight: 700; line-height: 1.35; margin: 0 0 .5rem; }
.car-card__title a { color: var(--ink); }
.car-card__title a:hover { color: var(--green-dark); text-decoration: none; }
.car-card__specs {
  display: flex; flex-wrap: wrap; gap: .3rem .85rem;
  margin: 0 0 .9rem; padding: 0; list-style: none;
  color: var(--ink-3); font-size: .84rem;
}
.car-card__specs li { display: inline-flex; align-items: center; gap: .3rem; }
.car-card__foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
  margin-top: auto; padding-top: .85rem; border-top: 1px solid var(--line);
}
.car-card__price { font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.car-card__price del { font-size: .82rem; font-weight: 500; color: var(--ink-3); margin-right: .4rem; }
.car-card__link { font-size: .85rem; font-weight: 600; color: var(--green-dark); }
/* --------------------------------------------------------------------------- Inventory layout --------------------------------------------------------------------------- */ .inventory { display: grid; gap: 1.75rem; align-items: start; }
@media (min-width: 960px) { .inventory { grid-template-columns: 276px minmax(0, 1fr); } }
.filters {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.1rem;
}
@media (min-width: 960px) { .filters { position: sticky; top: calc(var(--header-h) + 1rem); max-height: calc(100vh - var(--header-h) - 2rem); overflow-y: auto; } }
.filters__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .9rem; }
.filters__head h2 { font-size: 1rem; margin: 0; }
.filter-group { border-top: 1px solid var(--line); padding-block: .85rem; }
.filter-group:first-of-type { border-top: 0; padding-top: 0; }
.filter-group > summary {
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 600; font-size: .9rem; cursor: pointer; list-style: none;
}
.filter-group > summary::-webkit-details-marker { display: none; }
.filter-group > summary::after { content: "+"; color: var(--ink-3); font-weight: 400; font-size: 1.1rem; }
.filter-group[open] > summary::after { content: "−"; }
.filter-group__body { padding-top: .75rem; max-height: 260px; overflow-y: auto; }
.check {
  display: flex; align-items: center; gap: .55rem;
  padding: .3rem 0; font-size: .88rem; color: var(--ink-2); cursor: pointer;
}
.check:hover { color: var(--ink); }
.check input { accent-color: var(--green); width: 16px; height: 16px; flex: 0 0 auto; }
.check__count { margin-left: auto; color: var(--ink-3); font-size: .78rem; font-variant-numeric: tabular-nums; }
.inventory__bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
  margin-bottom: 1.25rem;
}
.inventory__count { color: var(--ink-2); font-size: .92rem; }
.inventory__count strong { color: var(--ink); }
.inventory__sort { margin-left: auto; display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--ink-3); }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .5rem .3rem .7rem;
  background: var(--green-tint); color: var(--green-darker);
  border-radius: var(--r-pill); font-size: .82rem; font-weight: 600;
}
.chip a { color: inherit; font-size: 1rem; line-height: 1; opacity: .65; }
.chip a:hover { opacity: 1; text-decoration: none; }
.empty-state {
  text-align: center; padding: 3.5rem 1.5rem;
  background: var(--bg-soft); border: 1px dashed var(--line-strong); border-radius: var(--r-lg);
}
.empty-state h2 { font-size: 1.25rem; }
.empty-state p { color: var(--ink-3); max-width: 46ch; margin-inline: auto; }
/* --------------------------------------------------------------------------- Forms --------------------------------------------------------------------------- */ .field { margin-bottom: 1rem; }
.field > label { display: block; margin-bottom: .35rem; font-size: .875rem; font-weight: 600; color: var(--ink-2); }
.field__hint { display: block; margin-top: .3rem; font-size: .8rem; color: var(--ink-3); }
.input, .select, .textarea {
  width: 100%; padding: .7rem .85rem;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r);
  font: inherit; font-size: .95rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-ring);
}
.textarea { min-height: 130px; resize: vertical; }
.select {
  appearance: none; padding-right: 2.25rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.5607 10.1964C20.1464 9.61062 20.1464 8.66109 19.5607 8.07531C18.9749 7.48965 18.0253 7.48957 17.4396 8.07531L12.1359 13.379L6.83312 8.07531C6.2474 7.48959 5.29783 7.48972 4.71203 8.07531C4.12624 8.6611 4.12624 9.61062 4.71203 10.1964L11.0753 16.5607C11.6611 17.1464 12.6116 17.1464 13.1974 16.5607L19.5607 10.1964Z' fill='%236b7378'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center; background-size: 11px;
}
.select--sm { width: auto; padding: .45rem 2rem .45rem .7rem; font-size: .88rem; }
.field-row { display: grid; gap: .75rem; grid-template-columns: 1fr 1fr; }
.form-note { font-size: .82rem; color: var(--ink-3); }
.form-error { color: var(--sold); font-size: .85rem; margin-top: .3rem; }
.alert { padding: .9rem 1.1rem; border-radius: var(--r); font-size: .92rem; margin-bottom: 1.25rem; }
.alert--ok { background: var(--green-tint); color: var(--green-darker); }
.alert--warn { background: var(--amber-bg); color: var(--amber); }
.alert--err { background: var(--sold-bg); color: var(--sold); }
/* --------------------------------------------------------------------------- Pagination --------------------------------------------------------------------------- */ .pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin-top: 2.5rem; }
.pagination a, .pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding-inline: .7rem;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--ink-2); font-size: .9rem; font-weight: 600;
}
.pagination a:hover { border-color: var(--green); color: var(--green-dark); text-decoration: none; }
.pagination [aria-current="page"] { background: var(--green); border-color: var(--green); color: var(--on-green); }
.pagination .is-gap { border: 0; min-width: 20px; color: var(--ink-3); }
/* --------------------------------------------------------------------------- Footer --------------------------------------------------------------------------- */ .site-footer { background: var(--bg); color: var(--ink-3); border-top: 1px solid var(--line); padding-block: 3rem 1.5rem; margin-top: 4rem; }
.site-footer a { color: var(--ink-2); }
.site-footer a:hover { color: var(--ink); }
.site-footer h3 { color: var(--ink); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .9rem; }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: .5rem; font-size: .9rem; }
.footer-logo { height: 17px; margin-bottom: 1rem; }   /* 50% of the old 34px (Lay, 2026-11-02) */
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between;
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: .82rem;
}
/* --------------------------------------------------------------------------- Utilities --------------------------------------------------------------------------- */ .stack > * + * { margin-top: 1rem; }
.muted { color: var(--ink-3); }
.tabular { font-variant-numeric: tabular-nums; }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }.mb-0 { margin-bottom: 0; }
.section-head { margin-bottom: 1.75rem; }
.section-head p { color: var(--ink-3); margin: 0; }
.section-head--row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* --------------------------------------------------------------------------- Breadcrumb --------------------------------------------------------------------------- */ .breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  padding-block: 1rem; font-size: .85rem; color: var(--ink-3);
}
.breadcrumb a { color: var(--ink-3); }
.breadcrumb a:hover { color: var(--green-dark); }
/* --------------------------------------------------------------------------- Hero search --------------------------------------------------------------------------- */ .hero-search { display: flex; gap: .6rem; margin-top: 1.75rem; max-width: 520px; }
.hero-search .input {
  background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: #fff;
  /* Background and text colour change on focus, so they have to be transitioned
     too. The base .input rule only animates border and shadow. */
  transition: background-color .25s ease, color .25s ease,
              border-color .25s ease, box-shadow .25s ease;
}
.hero-search .input::placeholder { color: rgba(255,255,255,.55); transition: color .25s ease; }
.hero-search .input:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); }
.hero-search .input:focus { background: #fff; color: var(--ink); border-color: var(--green); }
.hero-search .input:focus::placeholder { color: var(--ink-3); }
/* --------------------------------------------------------------------------- Trust strip --------------------------------------------------------------------------- */ .trust { background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.trust__inner {
  display: grid; gap: 1rem 1.5rem; padding-block: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.trust__item { display: flex; flex-direction: column; gap: .1rem; }
.trust__item strong { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.trust__item span { font-size: .86rem; color: var(--ink-3); }
/* --------------------------------------------------------------------------- Steps --------------------------------------------------------------------------- */ .steps {
  display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.step {
  position: relative; padding: 1.5rem 1.25rem 1.25rem;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.step__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; margin-bottom: .85rem;
  background: var(--green); color: var(--on-green);
  border-radius: var(--r-pill); font-weight: 800; font-size: .95rem;
}
.step h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.step p { margin: 0; font-size: .92rem; color: var(--ink-2); }
/* --------------------------------------------------------------------------- Make tiles --------------------------------------------------------------------------- */ /* There are 10 makes. 10 divides evenly by 5 and by 2 only, so those are the two column counts used, any other breakpoint leaves a stranded final row. */ .make-grid { display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .make-grid { grid-template-columns: repeat(5, 1fr); } }
.make-tile {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .95rem 1.1rem;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r);
  font-weight: 600;
  transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.make-tile:hover { border-color: var(--green); background: var(--green-tint); text-decoration: none; transform: translateY(-2px); }
.make-tile__count { color: var(--ink-3); font-size: .85rem; font-weight: 500; }
/* --------------------------------------------------------------------------- Tool cards --------------------------------------------------------------------------- */ .tool-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.tool-card {
  display: block; padding: 1.4rem;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: border-color .15s ease, box-shadow .18s ease, transform .18s ease;
}
.tool-card:hover { border-color: var(--green); box-shadow: var(--shadow); transform: translateY(-2px); text-decoration: none; }
.tool-card h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.tool-card p { margin: 0; font-size: .9rem; color: var(--ink-3); }
/* --------------------------------------------------------------------------- Post cards --------------------------------------------------------------------------- */ .post-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.post-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: border-color .15s ease, box-shadow .18s ease, transform .18s ease;
}
.post-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-3px); }
.post-card__media { display: block; aspect-ratio: 16 / 9; background: var(--bg-sunken); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { padding: 1.1rem; }
.post-card__body h3 { font-size: 1.02rem; line-height: 1.35; margin-bottom: .45rem; }
.post-card__body h3 a { color: var(--ink); }
.post-card__body h3 a:hover { color: var(--green-dark); text-decoration: none; }
.post-card__body p { margin: 0; font-size: .89rem; color: var(--ink-3); }
.post-card__meta { display: flex; gap: .6rem; font-size: .78rem; color: var(--ink-3); margin-bottom: .5rem; }
/* --------------------------------------------------------------------------- CTA band --------------------------------------------------------------------------- */ .cta-band {
  background: var(--logo-ink); color: #fff;
  padding-block: clamp(2.5rem, 5vw, 4rem); text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.75); max-width: 52ch; margin-inline: auto; margin-bottom: 1.75rem; }
/* --------------------------------------------------------------------------- Vehicle detail --------------------------------------------------------------------------- */ .vehicle { display: grid; gap: 1.75rem; align-items: start; padding-bottom: 3rem; }
@media (min-width: 900px) {
  .vehicle { grid-template-columns: minmax(0, 1fr) 360px; }
.vehicle__gallery { grid-column: 1; grid-row: 1; }
.vehicle__buy { grid-column: 2; grid-row: 1 / span 2; }
.vehicle__main { grid-column: 1; grid-row: 2; }
}
.gallery { margin: 0; }
.gallery__main {
  position: relative; aspect-ratio: 3 / 2; overflow: hidden;
  background: var(--bg-sunken); border-radius: var(--r-lg);
}
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.gallery__ribbon {
  position: absolute; top: 1rem; left: 1rem; z-index: 2;
  padding: .4rem .9rem; border-radius: var(--r-pill);
  background: var(--sold); color: #fff;
  font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.gallery__thumbs {
  display: flex; gap: .5rem; margin-top: .6rem;
  overflow-x: auto; padding-bottom: .4rem; scrollbar-width: thin;
}
.gallery__thumb {
  flex: 0 0 auto; width: 92px; aspect-ratio: 4 / 3;
  padding: 0; overflow: hidden; cursor: pointer;
  background: var(--bg-sunken);
  border: 2px solid transparent; border-radius: var(--r-sm);
  transition: border-color .15s ease, opacity .15s ease;
  opacity: .68;
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb:hover { opacity: 1; }
.gallery__thumb.is-active { border-color: var(--green); opacity: 1; }
/* --- buy box --- */ .buybox {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.4rem;
  box-shadow: var(--shadow-sm);
}
@media (min-width: 900px) { .buybox { position: sticky; top: calc(var(--header-h) + 1rem); } }
.buybox__flags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .85rem; }
.buybox__title { font-size: 1.3rem; line-height: 1.3; margin-bottom: .6rem; }
.buybox__price { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; margin: 0 0 .2rem; }
.buybox__price del { display: block; font-size: .95rem; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.buybox__price-note { font-size: .8rem; color: var(--ink-3); margin-bottom: 1.1rem; }
.buybox__stock { margin: .9rem 0 0; font-size: .8rem; color: var(--ink-3); text-align: center; }
.buybox__quick {
  display: grid; grid-template-columns: 1fr 1fr; gap: .1rem;
  margin: 0 0 1.25rem; padding: .85rem 0;
  border-block: 1px solid var(--line);
}
.buybox__quick div { padding: .3rem 0; }
.buybox__quick dt { font-size: .76rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.buybox__quick dd { margin: 0; font-size: .95rem; font-weight: 600; }
/* --- sections --- */ .vehicle-section { padding-top: 2rem; }
.vehicle-section > h2 { font-size: 1.3rem; margin-bottom: 1rem; }
.spec-grid {
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
}
.spec {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .8rem 1.1rem; border-bottom: 1px solid var(--line);
}
.spec dt { font-size: .85rem; color: var(--ink-3); }
.spec dd { margin: 0; font-size: .92rem; font-weight: 600; text-align: right; }
.import-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.import-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: .45rem;
  padding: 1rem; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg-soft);
}
.import-card, .is-ok { border-color: var(--green); background: var(--green-tint); }
.import-card__country { font-weight: 700; font-size: .95rem; }
.import-card__rule { font-size: .78rem; color: var(--ink-3); }
.feature-list {
  display: grid; gap: .4rem 1.25rem; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.feature-list li {
  position: relative; padding-left: 1.4rem; font-size: .92rem; color: var(--ink-2);
}
.feature-list li::before {
  content: ""; position: absolute; left: 0; top: .48em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
}
.enquiry { }
.enquiry__about { font-size: .95rem; margin-bottom: .2rem; }
/* --------------------------------------------------------------------------- Article / long-form body --------------------------------------------------------------------------- */ .prose { max-width: none; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 2em; font-size: 1.5rem; }
.prose h3 { margin-top: 1.6em; font-size: 1.2rem; }
.prose img { border-radius: var(--r); margin-block: 1.5em; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: .4em; }
.prose blockquote {
  margin-inline: 0; padding: .6em 1.2em;
  border-left: 3px solid var(--green); background: var(--bg-soft);
  border-radius: 0 var(--r) var(--r) 0; color: var(--ink-2);
}
.prose table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.prose th, .prose td { padding: .6rem .8rem; border: 1px solid var(--line); text-align: left; }
.prose th { background: var(--bg-soft); font-weight: 700; }
.prose a { text-decoration: underline; text-underline-offset: 2px; }
/* --------------------------------------------------------------------------- Hero highlight. The original H1 opens with a coloured phrase. --------------------------------------------------------------------------- */ .hero h1 .hl { color: var(--green); }
/* --------------------------------------------------------------------------- FAQ accordion, animated open/close. A <details> cannot transition height on its own, because the content is not rendered while closed. ::details-content plus interpolate-size (declared on :root) makes height:auto animatable; browsers without it simply open instantly, which is the correct fallback. --------------------------------------------------------------------------- */ .faq-list {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg);
}
.faq-item + .faq-item { border-top: 1px solid var(--line); }
.faq-item > summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.05rem 1.25rem;
  font-weight: 600; font-size: 1rem; line-height: 1.45;
  cursor: pointer; list-style: none;
  transition: background-color .25s ease, color .2s ease;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { background: var(--bg-soft); color: var(--green-darker); }
.faq-item[open] > summary { background: var(--bg-soft); }
/* Plus sign built from two bars so it can rotate into a minus smoothly. */ .faq-item > summary::after {
  content: "";
  flex: 0 0 auto;
  position: relative;
  width: 16px; height: 16px; margin-top: .28rem;
  background:
    linear-gradient(var(--green-dark), var(--green-dark)) center / 100% 2px no-repeat,
    linear-gradient(var(--green-dark), var(--green-dark)) center / 2px 100% no-repeat;
  transition: transform .32s cubic-bezier(.4, 0.2, 1);
}
/* Rotating 90deg hides the vertical bar behind the horizontal one: + becomes −. */ .faq-item[open] > summary::after {
  transform: rotate(90deg);
  background:
    linear-gradient(var(--green-dark), var(--green-dark)) center / 100% 2px no-repeat,
    linear-gradient(transparent, transparent) center / 2px 100% no-repeat;
}
.faq-item::details-content {
  block-size: 0;
  overflow: hidden;
  opacity: 0;
  transition: block-size .34s cubic-bezier(.4, 0.2, 1),
              opacity .28s ease,
              content-visibility .34s allow-discrete;
}
.faq-item[open]::details-content { block-size: auto; opacity: 1; }
.faq-item__body {
  padding: 0 1.25rem 1.25rem;
  color: var(--ink-2); font-size: .95rem; line-height: 1.7;
}
.faq-item__body > *:first-child { margin-top: 0; }
.faq-item__body > *:last-child { margin-bottom: 0; }
/* --------------------------------------------------------------------------- Footer copyright, original wording, external links kept --------------------------------------------------------------------------- */ .footer-copyright a { color: var(--ink-2); text-decoration: none; text-underline-offset: 2px; }
.footer-copyright a:hover { color: var(--ink); text-decoration: underline; }   /* like the other footer links (was white on white) */
.article-head { padding-block: 1rem 2rem; }
.article-head h1 { margin-bottom: .5rem; }
.article-meta { display: flex; flex-wrap: wrap; gap: .75rem; font-size: .85rem; color: var(--ink-3); }
.article-hero { margin-bottom: 2rem; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16/9; background: var(--bg-sunken); }
.article-hero img { width: 100%; height: 100%; object-fit: cover; }
/* =========================================================================== DEALER AREA =========================================================================== */ /* --- sub-navigation bar --------------------------------------------------- */ .dealer-bar { background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.dealer-bar__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: .75rem;
}
.dealer-bar__who { display: flex; align-items: center; gap: .65rem; font-size: .92rem; }
.dealer-bar__logo { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--bg-sunken); }
.dealer-bar__who span { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.dealer-nav { display: flex; flex-wrap: wrap; gap: .25rem; }
.dealer-nav a {
  padding: .45rem .8rem; border-radius: var(--r-pill);
  color: var(--ink-2); font-size: .9rem; font-weight: 500;
  transition: background-color .18s ease, color .18s ease;
}
.dealer-nav a:hover { background: var(--bg-sunken); color: var(--ink); text-decoration: none; }
.dealer-nav a[aria-current="page"] { background: var(--green); color: var(--on-green); }
.dealer-nav__out { color: var(--ink-3) !important; }
/* --- auth cards ----------------------------------------------------------- */ .auth-card {
  max-width: 460px; margin-inline: auto; padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--shadow);
}
.auth-card--wide { max-width: 720px; }
.auth-card h1 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); }
.auth-card__alt { margin: 1.25rem 0 0; font-size: .9rem; color: var(--ink-3); text-align: center; }
/* --- stat tiles ----------------------------------------------------------- */ .d-stats { display: grid; gap: .85rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .d-stats { grid-template-columns: repeat(4, 1fr); } }
.d-stat {
  display: flex; flex-direction: column; gap: .15rem;
  padding: 1.1rem 1.25rem;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg);
  color: var(--ink-3); text-decoration: none;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.d-stat:hover { border-color: var(--green); transform: translateY(-2px); box-shadow: var(--shadow-sm); text-decoration: none; }
.d-stat__n { font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; color: var(--ink); line-height: 1.05; }
.d-stat__l { font-size: .85rem; }
.d-stat.is-hot { border-color: var(--green); background: var(--green-tint); }
.d-stat.is-hot .d-stat__n { color: var(--green-darker); }
/* --- filters + chips ------------------------------------------------------ */ .d-filters {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.5rem;
}
.d-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.d-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .42rem .85rem; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--bg);
  color: var(--ink-2); font-size: .88rem; font-weight: 600;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
.d-chip:hover { border-color: var(--line-strong); text-decoration: none; }
.d-chip.is-on { background: var(--logo-ink); border-color: var(--logo-ink); color: #fff; }
.d-chip__n { font-weight: 500; opacity: .7; font-variant-numeric: tabular-nums; }
.d-search { display: flex; gap: .5rem; max-width: 380px; flex: 1 1 240px; }
/* --- listing rows --------------------------------------------------------- */ .d-cars { display: grid; gap: .85rem; }
.d-car {
  display: grid; gap: 1rem; align-items: center;
  grid-template-columns: 110px minmax(0, 1fr);
  padding: .85rem;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.d-car:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
@media (min-width: 900px) { .d-car { grid-template-columns: 110px minmax(0, 1fr) auto; } }
.d-car__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; background: var(--bg-sunken); }
.d-car__media img { width: 100%; height: 100%; object-fit: cover; }
.d-car__nophoto {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: .72rem; font-weight: 600; color: var(--ink-3); background: var(--bg-sunken);
}
.d-car__title { font-size: 1rem; margin: 0 0 .3rem; }
.d-car__title a { color: var(--ink); }
.d-car__title a:hover { color: var(--green-dark); text-decoration: none; }
.d-car__meta {
  display: flex; flex-wrap: wrap; gap: .25rem .8rem;
  margin: 0 0 .4rem; padding: 0; list-style: none;
  color: var(--ink-3); font-size: .84rem;
}
.d-car__price { margin: 0; font-weight: 800; letter-spacing: -.02em; }
.d-car__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; grid-column: 1 / -1; }
@media (min-width: 900px) { .d-car__actions { grid-column: auto; justify-content: flex-end; } }
.d-car__del {
  padding: .45rem .7rem; border: 0; background: none; cursor: pointer;
  color: var(--sold); font: inherit; font-size: .85rem; border-radius: var(--r-sm);
}
.d-car__del:hover { background: var(--sold-bg); }
.d-car__note { grid-column: 1 / -1; font-size: .84rem; min-height: 0; }
/* --- inline feedback ------------------------------------------------------ */
.form-message, .d-car__note { transition: opacity .2s ease; }
.is-ok { color: var(--green-darker); }
.is-err { color: var(--sold); }
.is-busy { color: var(--ink-3); }
/* --- panels + forms ------------------------------------------------------- */ .d-form { }
.d-panel {
  padding: 1.4rem; margin-bottom: 1.25rem;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.d-panel > h2 { font-size: 1.05rem; margin-bottom: 1rem; }
.d-panel--fold > summary { cursor: pointer; list-style: none; }
.d-panel--fold > summary::-webkit-details-marker { display: none; }
.d-panel--fold > summary h2 { display: inline; }
.d-panel--fold > summary::after { content: " +"; color: var(--green-dark); font-weight: 700; }
.d-panel--fold[open] > summary::after { content: " −"; }
.d-panel--fold[open] > summary { margin-bottom: 1rem; }
.d-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.d-logo-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.d-logo { width: 76px; height: 76px; border-radius: var(--r); object-fit: cover; background: var(--bg-sunken); }
/* --- uploader ------------------------------------------------------------- */ .up-drop {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: 2rem 1rem; margin-bottom: .85rem;
  border: 2px dashed var(--line-strong); border-radius: var(--r-lg);
  background: var(--bg-soft); cursor: pointer; text-align: center;
  transition: border-color .18s ease, background-color .18s ease;
}
.up-drop:hover, .up-drop.is-over { border-color: var(--green); background: var(--green-tint); }
.up-drop__icon {
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 50%; background: var(--green); color: var(--on-green); font-size: 1.4rem; font-weight: 300;
}
.up-drop__text { font-size: .95rem; }
.up-drop__hint { font-size: .8rem; color: var(--ink-3); }
.up-bar { height: 4px; border-radius: 2px; background: var(--bg-sunken); overflow: hidden; }
.up-bar__fill { display: block; height: 100%; width: 0; background: var(--green); transition: width .25s ease; }
.up-status { min-height: 1.2em; font-size: .85rem; margin: .4rem 0 0; }
[data-uploader], .is-busy .up-drop { opacity: .6; pointer-events: none; }
/* --- photo gallery manager ------------------------------------------------ */ .gal {
  display: grid; gap: .6rem; margin: 1rem 0 .5rem; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.gal__item {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden; cursor: grab;
  background: var(--bg-sunken); border: 1px solid var(--line); border-radius: var(--r);
  transition: opacity .2s ease, transform .2s ease;
}
.gal__item:active { cursor: grabbing; }
.gal__item.is-dragging { opacity: .4; }
.gal__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal__main {
  position: absolute; left: .35rem; bottom: .35rem;
  padding: .16rem .45rem; border-radius: var(--r-sm);
  background: var(--green); color: var(--on-green);
  font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.gal__del {
  position: absolute; top: .3rem; right: .3rem; width: 24px; height: 24px;
  padding: 0; line-height: 1; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(0,0,0,.6); color: #fff; font-size: 1rem;
}
.gal__del:hover { background: var(--sold); }
/* --- enquiries ------------------------------------------------------------ */ .enq-list { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--bg); }
.enq + .enq { border-top: 1px solid var(--line); }
.enq > summary {
  display: grid; gap: .25rem 1rem; align-items: baseline;
  grid-template-columns: 1fr auto;
  padding: 1rem 1.25rem; cursor: pointer; list-style: none;
  transition: background-color .18s ease;
}
@media (min-width: 760px) { .enq > summary { grid-template-columns: 1fr 1fr auto; } }
.enq > summary::-webkit-details-marker { display: none; }
.enq > summary:hover { background: var(--bg-soft); }
.enq.is-unread > summary { background: var(--green-tint); }
.enq__who { display: flex; align-items: center; gap: .5rem; }
.enq__car { color: var(--ink-2); font-size: .9rem; }
.enq__when { font-size: .85rem; }
.enq__body { padding: 0 1.25rem 1.25rem; }
.enq__meta { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin: 0 0 1rem; }
.enq__meta dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.enq__meta dd { margin: 0; font-size: .95rem; }
.enq__msg {
  padding: .9rem 1.1rem; margin-bottom: 1rem;
  background: var(--bg-soft); border-radius: var(--r); color: var(--ink-2);
}
/* --- public dealer profile + directory ------------------------------------ */ .dp-head { display: grid; gap: 1.25rem; align-items: start; grid-template-columns: 1fr; }
@media (min-width: 700px) { .dp-head { grid-template-columns: 96px minmax(0, 1fr); } }
.dp-logo { width: 96px; height: 96px; border-radius: var(--r-lg); object-fit: cover; background: var(--bg-sunken); }
.dp-head h1 { margin: .5rem 0 .4rem; }
.dp-facts {
  display: flex; flex-wrap: wrap; gap: .3rem 1.25rem;
  margin: 0 0 .9rem; padding: 0; list-style: none;
  color: var(--ink-3); font-size: .92rem;
}
.dp-bio { max-width: 62ch; color: var(--ink-2); }
.dp-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.dealer-grid { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.dealer-card {
  display: flex; align-items: center; gap: .9rem; padding: 1rem;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg);
  color: var(--ink);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.dealer-card:hover { border-color: var(--green); transform: translateY(-2px); box-shadow: var(--shadow-sm); text-decoration: none; }
.dealer-card__logo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--bg-sunken); flex: 0 0 auto; }
.dealer-card__body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.dealer-card__name { font-size: 1rem; }
.dealer-card__count { color: var(--green-dark); font-size: .85rem; font-weight: 600; }
/* --- header dealer button ------------------------------------------------- */ .btn--dealer {
  --btn-bg: transparent;
  --btn-fg: rgba(255,255,255,.9);
  --btn-shadow: none; background-image: none;
  border-color: rgba(255,255,255,.28);
}
.btn--dealer:hover { --btn-bg: #fff; --btn-fg: var(--logo-ink); border-color: #fff; box-shadow: none; }
.btn--dealer svg { flex: 0 0 auto; }
/* Below the nav breakpoint the header would get crowded; the mobile menu
   carries the dealer link instead. */
@media (max-width: 620px) { .btn--dealer { display: none; } }
.mobile-nav__dealer {
  display: inline-flex !important; align-items: center; gap: .5rem; width: max-content;
  margin-block: .4rem; padding: .55rem 1rem !important; border-radius: var(--r-pill);
  background: #0a0a0a; color: #fff !important; font-weight: 700 !important;
}
/* --- homepage dealer call to action --------------------------------------- */ .dealer-cta {
  display: grid; gap: 1.75rem; align-items: center;
  grid-template-columns: 1fr;
  padding: clamp(1.75rem, 4vw, 3rem);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
}
@media (min-width: 900px) { .dealer-cta { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 3rem; } }
.dealer-cta__eyebrow {
  display: inline-block; margin-bottom: .75rem;
  color: var(--green-darker); font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.dealer-cta__body h2 { font-size: clamp(1.4rem, 1.15rem + 1.1vw, 2rem); margin-bottom: .6rem; }
.dealer-cta__body > p { color: var(--ink-2); max-width: 56ch; }
.dealer-cta__points {
  display: grid; gap: .45rem; margin: 1.1rem 0 1.6rem; padding: 0; list-style: none;
}
.dealer-cta__points li {
  position: relative; padding-left: 1.6rem;
  color: var(--ink-2); font-size: .93rem;
}
.dealer-cta__points li::before {
  content: ""; position: absolute; left: 0; top: .35em;
  width: 1rem; height: 1rem; border-radius: 50%;
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.9531 3.99225C19.48 3.9335 20.0214 4.09638 20.4492 4.43854C20.8769 4.78081 21.1545 5.27298 21.2129 5.79987C21.2716 6.32695 21.1064 6.84596 20.7617 7.24908C20.5953 7.44382 20.4282 7.63931 20.2617 7.83405C17.2647 11.3402 14.2675 14.8465 11.2705 18.3526C11.1041 18.5473 10.937 18.7428 10.7705 18.9376C10.52 19.23 10.1569 19.4123 9.76758 19.4493C9.50945 19.4735 9.25416 19.4313 9.02344 19.3311C8.84537 19.272 8.67957 19.1816 8.53906 19.0606C8.45329 18.9866 8.36702 18.9129 8.28125 18.8389C6.73535 17.5051 5.18946 16.1708 3.64356 14.837C3.55775 14.7629 3.47155 14.6884 3.38574 14.6143C2.98278 14.2673 2.74666 13.7828 2.74707 13.252C2.7467 12.7223 2.98292 12.1892 3.38574 11.7862C3.78869 11.3833 4.32181 11.1482 4.85156 11.1485C5.38243 11.148 5.86681 11.3832 6.21387 11.7862C6.28792 11.872 6.36247 11.9582 6.43652 12.044C7.4622 13.2328 8.48806 14.4216 9.51367 15.6104C12.0681 12.1955 14.6234 8.78117 17.1777 5.36627C17.3311 5.16129 17.4844 4.95602 17.6377 4.75104C17.9553 4.32607 18.426 4.05079 18.9531 3.99225Z' fill='%23fff'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.dealer-cta__actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.dealer-cta__aside {
  display: flex; flex-direction: column; gap: .3rem; align-items: flex-start;
  padding: 1.4rem;
  background: var(--logo-ink); color: #fff;
  border-radius: var(--r-lg);
}
.dealer-cta__stat { font-size: 2.6rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--green); }
.dealer-cta__statlabel { color: rgba(255,255,255,.75); font-size: .9rem; }
.dealer-cta__link { margin-top: .6rem; color: #fff; font-weight: 600; font-size: .9rem; }
.dealer-cta__link:hover { color: var(--green); text-decoration: none; }
/* --- listing card: who is selling it -------------------------------------- */ .car-card__dealer {
  display: flex; align-items: center; gap: .4rem;
  margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--line);
  font-size: .8rem; color: var(--ink-3);
}
.car-card__dealer img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }

/* Signed-in exporter: credits and plan in the top bar and the phone menu */
.exp-chip { display: inline-flex; align-items: center; gap: .6rem; padding: 4px 6px 4px 4px; border-radius: var(--r-pill);
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); color: var(--ink); font-size: .82rem; text-decoration: none; white-space: nowrap; }
.exp-chip:hover { text-decoration: none; box-shadow: var(--shadow-md); }
.exp-chip__credits { padding: 3px 10px; border-radius: var(--r-pill); background: var(--green-tint); color: var(--green-darker); }
.exp-chip__credits strong { font-size: .9rem; }
.exp-chip__plan { color: var(--ink-2); padding-right: 6px; }
.mobile-nav__exp { padding: 10px 0 4px; }
.mobile-nav__exp .exp-chip { white-space: normal; }
/* ---- /legal-notice/ (特定商取引法に基づく表記): label | answer ----------- */
.legal-notice { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; }
.legal-notice th, .legal-notice td { text-align: start; vertical-align: top; padding: .9rem .6rem; border-bottom: 1px solid var(--line); }
.legal-notice th { width: 32%; font-weight: 600; }
.legal-notice th span { display: block; font-weight: 400; font-size: .82rem; color: var(--ink-3); margin-top: .15rem; }
.legal-notice td ul { margin: .4rem 0; }
@media (max-width: 640px) {
  .legal-notice th, .legal-notice td { display: block; width: auto; padding-inline: 0; }
  .legal-notice th { border-bottom: 0; padding-bottom: .2rem; }
}