/* Kuwait One — cars. Inherits the theme's dark ground, burgundy accent and Almarai. */
/*
 * The section owns no colours of its own. Every one of these resolves to a theme
 * token, so the light switch reaches the cars pages without a second palette to
 * keep in step. The hex after each comma is the fallback for a page that loads
 * before the mode plugin, and it is the dark value — never a light one.
 */
.cars{--c-line:var(--rule,#2e2a27);
      --c-card:var(--surface,#1b1917);
      --c-media:var(--surface-2,#221f1d);
      --c-dim:var(--ink-soft,#a49a90);
      --c-accent:var(--brand,#9d1824);
      --c-ok:#8fd0a8;--c-ok-line:#255c3c;
      --c-warn:#d8c48a;--c-warn-line:#5a4a20;
      padding-block:8px}

/* The two status colours are the only ones that cannot be a token: a badge legible
   on black is not legible on white, so light gets its own darker pair. */
:root[data-theme="light"] .cars{
      --c-ok:#0f6b3f;--c-ok-line:#a9cfba;
      --c-warn:#7a5c12;--c-warn-line:#ddc98f}
.cars-head{margin:8px 0 20px}
.cars-head h1{margin:0 0 6px;line-height:1.2}
.cars-lede{color:var(--c-dim);margin:0 0 6px;max-width:56ch}
.cars-asof{color:var(--c-dim);font-size:.85rem;margin:6px 0 0}
.cars-crumb{font-size:.85rem;color:var(--c-dim);margin-bottom:6px}
.cars-crumb a{color:var(--c-dim)}
.cars-h2{font-size:1rem;color:var(--c-dim);text-transform:uppercase;
         letter-spacing:.06em;margin:32px 0 12px}

/* the price board */
.cars-board{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:0 0 12px}
.cars-tile{display:block;background:var(--c-card);border:1px solid var(--c-line);
           border-radius:14px;padding:14px;text-decoration:none;color:inherit}
a.cars-tile:hover{border-color:var(--c-accent)}
.cars-tile__label{display:block;font-size:.75rem;color:var(--c-dim);line-height:1.35;
                  min-height:2.7em}
.cars-tile__value{display:block;font-size:1.35rem;font-weight:800;margin-top:6px;
                  font-variant-numeric:tabular-nums}
.cars-tile__sub{display:block;font-size:.8rem;color:var(--c-dim);margin-top:2px}

/* the one hand-picked card, always beside the board and never inside it */
.cars-featured{display:flex;align-items:center;justify-content:space-between;gap:12px;
   border:1px solid var(--c-line);border-radius:14px;padding:12px 14px;margin:0 0 20px;
   background:linear-gradient(180deg,color-mix(in srgb,var(--c-accent) 10%,transparent),transparent)}
.cars-featured__label{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
   color:var(--c-dim);border:1px solid var(--c-line);border-radius:999px;padding:3px 9px}
.cars-featured--paid .cars-featured__label{color:var(--c-warn);border-color:var(--c-warn-line)}
.cars-featured a{display:flex;gap:10px;align-items:baseline;text-decoration:none;color:inherit}
.cars-featured a span{color:var(--c-dim);font-variant-numeric:tabular-nums}

.cars-search input{width:100%;padding:13px 14px;border-radius:12px;
   border:1px solid var(--c-line);background:var(--c-card);color:inherit;font-size:1rem}

.cars-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));margin-top:14px}
.cars-card{display:block;background:var(--c-card);border:1px solid var(--c-line);
   border-radius:14px;padding:14px;text-decoration:none;color:inherit}
.cars-card:hover{border-color:var(--c-accent)}
.cars-card b{display:block;margin-bottom:6px}
.cars-card__price{display:block;font-variant-numeric:tabular-nums;margin-bottom:8px}
.cars-card__price em{color:var(--c-dim);font-style:normal;font-size:.85rem}

.cars-brands{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.cars-brand{display:block;padding:12px;border:1px solid var(--c-line);border-radius:12px;
   text-decoration:none;color:inherit;background:var(--c-card)}
.cars-brand span{display:block;font-size:.78rem;color:var(--c-dim);margin-top:3px}

/* coverage is a visible field, not something hidden */
.cars-badge{display:inline-block;font-size:.7rem;padding:3px 9px;border-radius:999px;
   border:1px solid var(--c-line);color:var(--c-dim)}
.cars-badge--ok{color:var(--c-ok);border-color:var(--c-ok-line)}
.cars-badge--warn{color:var(--c-warn);border-color:var(--c-warn-line)}

.cars-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cars-table{width:100%;border-collapse:collapse;margin:18px 0}
.cars-table th,.cars-table td{padding:11px 10px;border-bottom:1px solid var(--c-line);text-align:start}
.cars-table thead th{font-size:.78rem;color:var(--c-dim);text-transform:uppercase;letter-spacing:.05em}
.cars-table .num{font-variant-numeric:tabular-nums;font-weight:700}
.cars-table .date{color:var(--c-dim);font-size:.82rem;font-variant-numeric:tabular-nums}
.cars-table em{color:var(--c-dim);font-style:normal;font-size:.85rem}
/* The spec table's column headings are trim names — "X1 20i M Sport". The shared
   thead uppercasing turned the i of 20i into 20I, which is a different trim to
   anyone who reads BMW. Names keep their own case. */
.cars-specs{min-width:520px}
.cars-specs thead th{text-transform:none;letter-spacing:0;color:inherit;font-size:.82rem}

.cars-starting{font-size:1.1rem;margin:18px 0 4px}
.cars-starting b{font-size:1.7rem;font-variant-numeric:tabular-nums}
.cars-starting span{color:var(--c-dim)}
.cars-note{color:var(--c-dim);font-size:.9rem;margin:6px 0 0}
.cars-note--hard{border-inline-start:3px solid var(--c-accent);padding-inline-start:12px;
   color:inherit;margin:18px 0}
.cars-source{font-size:.82rem;color:var(--c-dim);margin-top:22px}
.cars-compare-cta{margin-top:14px}
.cars-empty{color:var(--c-dim);padding:60px 0;text-align:center}

@media (max-width:560px){
  .cars-board{grid-template-columns:repeat(2,1fr)}
  .cars-tile__value{font-size:1.15rem}
  .cars-featured{flex-direction:column;align-items:flex-start}
}

/* brochures — dealers say people come for these, so they are a first-class link */
.cars-brochure{margin:22px 0 0}
.cars-brochure a{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;
  border:1px solid var(--c-line);border-radius:12px;background:var(--c-card);
  text-decoration:none;color:inherit;font-weight:600}
.cars-brochure a:hover{border-color:var(--c-accent)}
.cars-brochure__icon{font-size:1.05em}
.cars-brochure small{display:block;color:var(--c-dim);font-size:.8rem;margin-top:7px}
.cars-card__pdf{display:inline-block;margin-inline-start:8px;font-size:.72rem;
  padding:3px 9px;border-radius:999px;border:1px solid var(--c-line);
  color:var(--c-dim);text-decoration:none}
.cars-card__pdf:hover{border-color:var(--c-accent);color:inherit}
.cars-card b a{text-decoration:none;color:inherit}
.cars-card b a:hover{color:var(--c-accent)}

/* Brands with no prices yet: present, findable, and visibly quieter. Quiet is done
   with a dashed outline and muted ink, not with opacity — a half-transparent dark
   card over a light page turns into a solid grey block with unreadable text. */
.cars-brands--quiet .cars-brand{background:transparent;border-style:dashed;
   color:var(--c-dim);padding:10px 12px}
.cars-brands--quiet .cars-brand:hover{color:inherit;border-style:solid;
   border-color:var(--c-accent)}

/* photographs. 16:9 reserved up front so a slow image never shifts the grid. */
.cars-card__media{display:block;aspect-ratio:16/9;overflow:hidden;border-radius:10px;
  background:var(--c-media);margin:-4px -4px 10px}
.cars-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.cars-hero{margin:16px 0 0}
.cars-hero img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;display:block}
.cars-hero figcaption{color:var(--c-dim);font-size:.78rem;margin-top:7px}

.cars-hero figcaption a{color:var(--c-dim)}
.cars-hero__note{display:block;margin-bottom:2px}

/* the filtered model grid — the main body of the section index */
.cars-h2__note{font-size:.72rem;color:var(--c-dim);text-transform:none;letter-spacing:0;
  font-weight:400;margin-inline-start:8px}
.cars-filters{display:flex;flex-direction:column;gap:8px;margin:0 0 14px}
.cars-filters__row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.cars-filters__label{font-size:.72rem;color:var(--c-dim);text-transform:uppercase;
  letter-spacing:.06em;margin-inline-end:4px;min-width:3.2em}
.cars-f{border:1px solid var(--c-line);background:var(--c-card);color:var(--c-dim);
  border-radius:999px;padding:6px 13px;font:inherit;font-size:.8rem;cursor:pointer}
.cars-f:hover{color:inherit;border-color:var(--c-accent)}
.cars-f.is-on{background:var(--c-accent);border-color:var(--c-accent);color:#fff}
.cars-f:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}
.cars-card[hidden]{display:none!important}
.cars-cta{display:inline-block;padding:11px 18px;border-radius:12px;
  border:1px solid var(--c-line);background:var(--c-card);text-decoration:none;color:inherit;
  font-weight:600}
.cars-cta:hover{border-color:var(--c-accent)}

/* zoomed studio shots need the box to clip them */
.cars-card__media{contain:paint}
.cars-card__media img{transform-origin:center center}

/* ---- 1.8: the unpriced fold, the facts card, similar-by-price, the compare pickers */
.cars-unpriced{margin:34px 0 8px;border:1px solid var(--c-line);border-radius:14px;background:var(--c-card)}
.cars-unpriced>summary{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;padding:16px 18px}
.cars-unpriced>summary::-webkit-details-marker{display:none}
.cars-unpriced>summary b{font-size:1rem}
.cars-unpriced>summary>span{color:var(--c-dim);font-size:.88rem}
.cars-unpriced__btn{margin-inline-start:auto;border:1px solid var(--c-line);border-radius:999px;padding:6px 14px;font-size:.82rem;color:inherit!important}
.cars-unpriced[open]>summary{border-bottom:1px solid var(--c-line)}
.cars-unpriced[open] .cars-unpriced__btn{opacity:.55}
.cars-unpriced .cars-grid{padding:16px}
.cars-card--quiet{opacity:.82}
.cars-year{color:var(--c-dim);font-weight:400;margin-inline-start:.35em}
.cars-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin:18px 0 8px;padding:0}
.cars-facts>div{background:var(--c-card);border:1px solid var(--c-line);border-radius:12px;padding:10px 12px}
.cars-facts dt{font-size:.72rem;color:var(--c-dim);text-transform:uppercase;letter-spacing:.05em;margin:0 0 3px}
.cars-facts dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums}
.cars-card__cmp{display:inline-block;margin-top:8px;font-size:.8rem;color:var(--c-dim);text-decoration:none}
.cars-card__cmp:hover{color:var(--c-accent)}
.cars-pickers{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));align-items:end;margin:8px 0 18px}
.cars-pick{display:grid;gap:6px}
.cars-pick>span{font-size:.78rem;color:var(--c-dim);text-transform:uppercase;letter-spacing:.05em}
.cars-pick select{width:100%;padding:11px 12px;border-radius:12px;border:1px solid var(--c-line);background:var(--c-card);color:inherit;font:inherit}
.cars-pick.is-off{display:none}
.cars-pick__add{align-self:end;padding:11px 14px;border-radius:12px;border:1px dashed var(--c-line);background:transparent;color:var(--c-dim);font:inherit;cursor:pointer}
.cars-pick__add:hover{color:inherit;border-color:var(--c-accent)}
.cars-cmp thead th{vertical-align:bottom}
.cars-cmp thead img{display:block;width:150px;max-width:100%;height:auto;border-radius:8px;margin-bottom:6px}
.cars-cmp td small{color:var(--c-dim)}