/* ==========================================================================
   Autotori – tyylit

   Ilme: vaalea, ilmava markkinapaikka AutoScout24:n muotokielellä. Valkoinen
   yläpalkki, kirkas toimintosininen, keltainen brändiaksentti ja väljä
   tietoasettelu. Reilut pyöristykset (8–24 px), pillerinapit, hiusviivareunat
   ja kevyet varjot – syvyys tulee reunoista, ei varjoista.

   Sisältö:
     1. Design-tokenit (värit, tumma tila, typografia, välit, varjot)
     2. Perusasetukset
     3. Painikkeet, merkinnät ja pinnat
     4. Lomakekentät
     5. Ylapalkki, alapalkki ja ponnahdukset
     6. Modaali
     7. Hakunäkymä (suodattimet, tuloslista, autokortti)
     8. Ilmoitussivu
     9. Myynti-ilmoituslomake
    10. Tarjoukset, listarivit ja kauppiaspaneeli
    11. Luurangot, tyhjät tilat ja animaatiot
    12. Responsiivisuus
    13. Kuvakatselin
    14. Vertailu
    15. Myyjät ja sisältösivut
    16. Lista- ja ruudukkonäkymä
    17. Etusivu
    18. Keskustelu myyjän kanssa

   Sääntö: komponentit käyttävät vain semanttisia tokeneita (--pinta, --teksti,
   --korostus …), eivät koskaan raakoja värikoodeja.
   ========================================================================== */

/* ==========================================================================
   0. KIRJASIMET

   Molemmat ovat muuttuvia (variable) fontteja, joten yksi tiedosto kattaa koko
   painoalueen. Tiedostot ovat paikallisia (`fontit/`) – sovellus ei tee
   ulkoisia verkkopyyntöjä. Lisenssit: `fontit/LAHTEET.md`.
   ========================================================================== */
@font-face {
  font-family: "Space Grotesk";
  src: url("../fontit/space-grotesk-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../fontit/space-grotesk-latin-ext.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  src: url("../fontit/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("../fontit/inter-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   1. DESIGN-TOKENIT
   ========================================================================== */
:root {
  /* Oletuksena teema seuraa järjestelmän asetusta. `color-scheme` ohjaa sekä
     natiivit kontrollit (pudotusvalikot, vierityspalkit) että alempana
     olevat `light-dark()`-arvot. */
  color-scheme: light dark;

  /* --- Väripaletti ------------------------------------------------------
     Pääväri on #ff5c33. Se saa valkoista vasten vain 3,07:1, joten sitä
     EI käytetä tekstinä eikä valkoisen tekstin taustana. Väri esiintyy
     täytettynä pintana tumman tekstin kanssa (5,69:1), ja teksti- ja
     linkkikäyttöön on tummennettu sävy (4,56:1).

     Jokainen alias määritellään kerran: `light-dark(vaalea, tumma)` valitsee
     arvon `color-scheme`-arvon perusteella. Kaikki parit on mitattu ja
     ylittävät 4,5:1. */

  --tausta:        light-dark(#fbfaf9, #12100e);
  --pinta:         light-dark(#ffffff, #1b1815);
  --pinta-himmea:  light-dark(#f2efec, #241f1b);
  --pinta-tumma:   light-dark(#1c1917, #0b0a09);   /* alapalkki, karuselli */
  --pinta-lasi:    light-dark(rgba(255, 255, 255, .9), rgba(27, 24, 21, .9));
  --reuna:         light-dark(#e4dfda, #332c27);
  --reuna-vahva:   light-dark(#cbc3bb, #453c35);

  --teksti:        light-dark(#1c1917, #eae6e2);
  /* Pehmeämpi leipäteksti pitkiin lukukohtiin (tekniset tiedot, varustelu,
     kuvaus). Täysi musta oli niissä turhan voimakas. Kontrasti 11,2:1
     valkoisella ja 10,7:1 tummalla pinnalla, eli reilusti AA-rajan yli. */
  --teksti-pehmea: light-dark(#3f3a36, #cfc8c2);
  --teksti-himmea: light-dark(#726a63, #a39a92);
  --teksti-kaanteinen: #ffffff;
  --teksti-tummalla: #a39a92;             /* teksti --pinta-tumma-pinnalla */

  --brandi:        light-dark(#1c1917, #eae6e2);   /* logon etuosa */

  /* Luettava brändisävy: linkit, kuvakkeet, fokus, aktiiviset tilat. */
  --korostus:       light-dark(#d93c0d, #ff7452);
  --korostus-toinen: light-dark(#b8300a, #ff9d82);
  --korostus-pinta: light-dark(#fff1ec, rgba(255, 116, 82, .16));

  /* Täyteväri: brändiväri sellaisenaan valkoisella tekstillä. Kontrasti on
     3,07:1 eli alle WCAG AA:n 4,5:1 – valinta on tietoinen ja visuaalinen.
     Jos raja halutaan täyttää, tummenna täyteväri arvoon #d93c0d, jolloin
     valkoinen teksti saa 4,56:1. */
  --cta: #ff5c33;
  --cta-hover:  light-dark(#f04a1f, #ff7452);
  --cta-teksti: #ffffff;
  --hinta: var(--teksti);                 /* hinnat: koko ja paino kantavat */

  --onnistui:       light-dark(#15803d, #4ade80);
  --onnistui-pinta: light-dark(#dcfce7, rgba(34, 197, 94, .18));
  /* Virhe on tarkoituksella syvä ja vähemmän oranssi, jottei se sekoitu
     brändiväriin. */
  --virhe:          light-dark(#b3261e, #f87171);
  --virhe-pinta:    light-dark(#fdecea, rgba(239, 68, 68, .18));
  --varoitus:       light-dark(#a16207, #fbbf24);
  --varoitus-pinta: light-dark(#fef6dc, rgba(161, 98, 7, .24));
  /* Toinen sävy: petrooli täydentää oranssia eikä kilpaile sen kanssa.
     Käytössä informatiivisissa merkinnöissä. */
  --kauppias:       light-dark(#0e7490, #38bdf8);
  --kauppias-pinta: light-dark(#e0f5fb, rgba(56, 189, 248, .18));
  --vastatarjous:       var(--kauppias);
  --vastatarjous-pinta: var(--kauppias-pinta);
  --varattu:        light-dark(#a16207, #fbbf24);
  --varattu-pinta:  light-dark(#fef6dc, rgba(161, 98, 7, .2));

  --fokus: var(--korostus);
  --fokus-halo:  light-dark(#ffd9cd, rgba(255, 116, 82, .35));
  --luuranko-a:  light-dark(#f2efec, #241f1b);
  --luuranko-b:  light-dark(#e4dfda, #332c27);
  --peite:       light-dark(rgba(28, 25, 23, .5), rgba(0, 0, 0, .72));

  /* --- Typografia ---------------------------------------------------- */
  --fontti: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fontti-otsikko: "Space Grotesk", var(--fontti);

  --koko-xs: .75rem;      /* 12 */
  --koko-s: .875rem;      /* 14 */
  --koko-m: 1rem;         /* 16 */
  --koko-l: 1.25rem;      /* 20 */
  --koko-xl: 1.5rem;      /* 24 */
  --koko-2xl: 1.75rem;    /* 28 */
  --koko-3xl: clamp(2rem, 1.6rem + 1.5vw, 2.5rem);
  --koko-hinta: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);

  --paino-normaali: 400;
  --paino-puolilihava: 600;
  --paino-lihava: 700;
  --paino-musta: 700;

  /* --- Välit (4 px -ruudukko) ---------------------------------------- */
  --vali-1: 4px;
  --vali-2: 8px;
  --vali-3: 12px;
  --vali-4: 16px;
  --vali-5: 20px;
  --vali-6: 24px;
  --vali-8: 32px;
  --vali-10: 40px;
  --vali-12: 56px;

  /* --- Muoto ja syvyys ----------------------------------------------- */
  --r-s: 3px;        /* merkinnät ja pienet pinnat */
  --r-m: 4px;        /* napit, syötekentät, kuvaruudut */
  --r-l: 6px;        /* kortit ja paneelit */
  --r-xl: 8px;       /* modaali ja isot lohkot */
  /* Vain aidosti pyöreille elementeille: kuvakenapit, tunnukset, laskurit,
     liu'un kahvat ja kytkimet. Suorakulmaiset pinnat käyttävät yllä olevaa
     asteikkoa. */
  --r-pill: 999px;

  /* Kevyet varjot: syvyys tulee reunoista. Tummassa teemassa varjo on
     voimakkaampi, koska pinnat erottuvat muuten heikosti. */
  --varjo-1: 0 1px 2px light-dark(rgba(0, 0, 0, .06), rgba(0, 0, 0, .5));
  --varjo-2: 0 4px 16px light-dark(rgba(0, 0, 0, .08), rgba(0, 0, 0, .5));
  --varjo-3: 0 8px 24px light-dark(rgba(0, 0, 0, .12), rgba(0, 0, 0, .6));
  --varjo-4: 0 24px 48px light-dark(rgba(0, 0, 0, .2), rgba(0, 0, 0, .7));

  /* --- Liike ---------------------------------------------------------- */
  --kayra: cubic-bezier(.2, .8, .3, 1);
  --nopea: 120ms var(--kayra);
  --perus: 180ms var(--kayra);
  --hidas: 280ms var(--kayra);

  /* --- Mitat ---------------------------------------------------------- */
  --ylapalkki-rivi: 72px;       /* varsinaisen yläpalkkirivin korkeus */
  --demokaista: 50px;
  /* Sticky-elementtien yläreuna: palkki + demokaista. */
  --ylapalkki-korkeus: calc(var(--ylapalkki-rivi) + var(--demokaista));
  --leveys-max: 1320px;
  --sivupalkki: 272px;
}

/* --- Teeman valinta ----------------------------------------------------
   Tokenit tulevat `light-dark()`-funktiosta, joten teeman vaihtoon riittää
   `color-scheme`. Ilman `data-teema`-attribuuttia seurataan järjestelmää.
   Attribuutin asettaa teemanappi (`main.js`). */
:root[data-teema="vaalea"] { color-scheme: light; }
:root[data-teema="tumma"]  { color-scheme: dark; }

/* ==========================================================================
   2. PERUSASETUKSET
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fontti);
  font-size: var(--koko-m);
  line-height: 1.5;
  color: var(--teksti);
  background: var(--tausta);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--vali-2);
  font-family: var(--fontti-otsikko);
  font-weight: var(--paino-lihava);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--teksti);
}
h1 { font-size: var(--koko-3xl); }
h2 { font-size: var(--koko-2xl); }
h3 { font-size: var(--koko-xl); }
h4 { font-size: var(--koko-l); }
p { margin: 0 0 var(--vali-4); }

a { color: var(--korostus); text-decoration: none; transition: color var(--nopea); }
a:hover { color: var(--korostus-toinen); text-decoration: underline; text-underline-offset: 3px; }

img { max-width: 100%; display: block; }
table { border-collapse: collapse; }

:focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: 2px;
  border-radius: var(--r-s);
  box-shadow: 0 0 0 3px var(--fokus-halo);
}
/* Vierityspalkin nuppi pysyy hillittynä */
::selection { background: var(--korostus-pinta); color: var(--teksti); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--reuna-vahva); border-radius: var(--r-s);
  border: 3px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--teksti-himmea); background-clip: content-box; }

.sisalto:focus { outline: none; }
.sisalto {
  max-width: var(--leveys-max);
  margin: 0 auto;
  padding: var(--vali-10) var(--vali-6) var(--vali-12);
  min-height: 62vh;
}

/* Ohita-linkki näkyy vasta kun se saa fokuksen näppäimistöltä. */
.ohita-linkki {
  position: absolute; left: var(--vali-4); top: -100px; z-index: 100;
  padding: 12px 20px;
  border-radius: var(--r-m);
  background: var(--korostus);
  color: #fff;
  font-weight: var(--paino-puolilihava);
  transition: top var(--nopea);
}
.ohita-linkki:focus { top: var(--vali-3); color: #fff; text-decoration: none; }

.piilotettu { display: none !important; }
.vain-ruudunlukijalle {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ==========================================================================
   3. PAINIKKEET, MERKINNÄT JA PINNAT
   ========================================================================== */
.nappi {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--vali-2);
  min-height: 44px;
  padding: 10px 24px;
  border: 1px solid transparent;
  border-radius: var(--r-m);
  background: var(--cta);
  color: var(--cta-teksti);
  font: inherit;
  font-size: var(--koko-s);
  font-weight: var(--paino-puolilihava);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--nopea), transform var(--nopea),
              border-color var(--nopea), color var(--nopea), opacity var(--nopea);
}
.nappi:hover { background: var(--cta-hover); color: var(--cta-teksti); text-decoration: none; }
.nappi:active { transform: translateY(1px); }
.nappi[disabled], .nappi[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* Ensisijainen nappi on jo täyteväriä, joten cta-variantti eroaa vain
   painollaan. */
.nappi--cta { font-weight: var(--paino-lihava); }

.nappi--reunus {
  background: var(--pinta);
  color: var(--korostus);
  border-color: var(--korostus);
}
.nappi--reunus:hover { background: var(--korostus-pinta); color: var(--korostus-toinen); border-color: var(--korostus-toinen); }

.nappi--vaarallinen { background: var(--pinta); color: var(--virhe); border-color: var(--virhe); }
.nappi--vaarallinen:hover { background: var(--virhe); color: #fff; border-color: var(--virhe); }

.nappi--pieni { min-height: 34px; padding: 6px 14px; font-size: var(--koko-xs); }
.nappi--levea { width: 100%; }

/* Paljas nappi: ikoni ja teksti ilman laatikkoa. Kohdealue säilyy silti
   kosketuskelpoisena, koska korkeus tulee .nappi-säännöstä. */
.nappi--paljas {
  padding: 6px 0; border-color: transparent;
  background: none; color: var(--korostus);
}
.nappi--paljas:hover { background: none; color: var(--korostus-toinen); border-color: transparent; }

.kuvakenappi {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--r-pill);
  background: transparent;
  border: 0;
  color: var(--teksti-himmea);
  font: inherit;
  cursor: pointer;
  transition: background var(--nopea), color var(--nopea);
}
.kuvakenappi:hover {
  background: var(--pinta-himmea);
  color: var(--teksti); text-decoration: none;
}

.merkki {
  position: absolute; top: 2px; right: 2px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--korostus);
  color: #fff;
  font-size: 11px; font-weight: var(--paino-lihava); font-variant-numeric: tabular-nums;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--pinta);
}
.merkki--punainen { background: var(--virhe); color: #fff; }
.merkki[hidden] { display: none; }

.merkkilappu {
  display: inline-flex; align-items: center; gap: var(--vali-1);
  padding: 4px 12px;
  border-radius: var(--r-s);
  background: var(--pinta-himmea);
  color: var(--teksti-himmea);
  font-size: var(--koko-xs);
  font-weight: var(--paino-puolilihava);
  line-height: 1.6;
  white-space: nowrap;
}
.merkkilappu--kauppias { background: var(--kauppias-pinta); color: var(--kauppias); }
.merkkilappu--odottaa { background: var(--varoitus-pinta); color: var(--varoitus); }
.merkkilappu--hyvaksytty { background: var(--onnistui-pinta); color: var(--onnistui); }
.merkkilappu--hylatty { background: var(--virhe-pinta); color: var(--virhe); }
.merkkilappu--vastatarjous { background: var(--vastatarjous-pinta); color: var(--vastatarjous); }
.merkkilappu--peruttu { background: var(--pinta-himmea); color: var(--teksti-himmea); }
.merkkilappu--varattu { background: var(--varattu-pinta); color: var(--varattu); }
.merkkilappu--myyty { background: var(--pinta-himmea); color: var(--teksti-himmea); }

.kortti {
  background: var(--pinta);
  border: 1px solid var(--reuna);
  border-radius: var(--r-l);
}

.paneeli {
  background: var(--pinta);
  border: 1px solid var(--reuna);
  border-radius: var(--r-l);
  padding: var(--vali-6);
  margin-bottom: var(--vali-6);
}

.virhelaatikko,
.huomiolaatikko {
  display: flex; gap: var(--vali-3); align-items: flex-start;
  padding: var(--vali-4);
  border-radius: var(--r-m);
  font-size: var(--koko-m);
  margin-bottom: var(--vali-4);
  border: 1px solid transparent;
  border-left-width: 4px;
}
.virhelaatikko { background: var(--virhe-pinta); color: var(--virhe); border-left-color: var(--virhe); }
.huomiolaatikko { background: var(--varoitus-pinta); color: var(--varoitus); border-left-color: var(--varoitus); }

.sivuotsikko {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--vali-4); margin-bottom: var(--vali-6); flex-wrap: wrap;
}
.sivuotsikko h1 { margin: 0; }

.murupolku { margin-bottom: var(--vali-4); }
.osio { margin-bottom: var(--vali-10); }
.osio > h3 { display: flex; align-items: center; gap: var(--vali-3); margin-bottom: var(--vali-4); }
.osio > h3::after {
  content: ""; flex: 1; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--reuna), transparent);
}

/* ==========================================================================
   4. LOMAKEKENTÄT
   ========================================================================== */
.kentta { margin-bottom: var(--vali-5); }
.kentta__otsikko {
  display: block;
  font-size: var(--koko-s);
  font-weight: var(--paino-puolilihava);
  margin-bottom: var(--vali-2);
}
.kentta__pakollinen { color: var(--virhe); }
.kentta__ohje { font-size: var(--koko-xs); color: var(--teksti-himmea); margin: var(--vali-1) 0 0; }
.kentta__virhe {
  font-size: var(--koko-xs); color: var(--virhe);
  margin: var(--vali-1) 0 0; font-weight: var(--paino-puolilihava);
}

input[type="text"], input[type="number"], input[type="tel"], input[type="email"],
input[type="search"], input[type="file"], select, textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--reuna-vahva);
  border-radius: var(--r-m);
  background: var(--pinta);
  color: var(--teksti);
  font: inherit;
  font-size: var(--koko-m);
  transition: border-color var(--nopea), box-shadow var(--nopea), background var(--nopea);
}
input::placeholder, textarea::placeholder { color: var(--teksti-himmea); }
input[type="number"] { font-variant-numeric: tabular-nums; }

select {
  appearance: none;
  padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 2px), calc(100% - 13px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

input:hover, select:hover, textarea:hover { border-color: var(--teksti-himmea); }
input:focus, select:focus, textarea:focus {
  border-color: var(--korostus);
  box-shadow: 0 0 0 3px var(--fokus-halo);
  outline: none;
}
textarea { min-height: 128px; resize: vertical; line-height: 1.6; }

input[type="file"] {
  padding: 12px 16px;
  background: var(--pinta-himmea);
  border-style: dashed;
  cursor: pointer;
}
input[type="file"]::file-selector-button {
  margin-right: var(--vali-3);
  padding: 8px 16px;
  border: 0; border-radius: var(--r-m);
  background: var(--korostus);
  color: #fff;
  font: inherit; font-size: var(--koko-xs); font-weight: var(--paino-puolilihava);
  cursor: pointer;
}

/* Virhetila: punainen reuna ja apuvirke, ei punaista taustaa. */
.kentta--virheellinen input,
.kentta--virheellinen select,
.kentta--virheellinen textarea { border-color: var(--virhe); }

.valintaruudut { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: var(--vali-1); }
.valintaruutu, .kytkin {
  display: flex; align-items: center; gap: var(--vali-3);
  padding: 8px 12px;
  border-radius: var(--r-s);
  font-size: var(--koko-m);
  cursor: pointer;
  transition: background var(--nopea), color var(--nopea);
}
.valintaruutu:hover, .kytkin:hover { background: var(--korostus-pinta); color: var(--korostus); }
.valintaruutu input {
  width: 20px; height: 20px; margin: 0; flex: none;
  border-radius: var(--vali-1);
  accent-color: var(--korostus); cursor: pointer;
}

/* Kytkin on liukukytkin: piilotettu valintaruutu + pillerimuotoinen kisko. */
.kytkin {
  border: 1px solid var(--reuna);
  background: var(--pinta);
  font-weight: var(--paino-puolilihava);
  border-radius: var(--r-m);
  padding: 12px 16px;
}
.kytkin:hover { background: var(--korostus-pinta); color: var(--teksti); }
.kytkin input {
  appearance: none; -webkit-appearance: none;
  position: relative;
  width: 44px; height: 24px; margin: 0; flex: none;
  border: 0; border-radius: var(--r-pill);
  background: var(--reuna-vahva);
  cursor: pointer;
  transition: background var(--perus);
}
.kytkin input::after {
  content: "";
  position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px;
  border-radius: var(--r-pill);
  background: #fff;
  box-shadow: var(--varjo-1);
  transition: transform var(--perus);
}
.kytkin input:checked { background: var(--korostus); }
.kytkin input:checked::after { transform: translateX(20px); }

.kenttarivi { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--vali-4); }

/* ==========================================================================
   5. YLAPALKKI, ALAPALKKI JA PONNAHDUKSET
   ========================================================================== */
.ylapalkki {
  position: sticky; top: 0; z-index: 40;
  background: var(--pinta);
  border-bottom: 1px solid var(--reuna);
  color: var(--teksti);
  transition: box-shadow var(--perus);
}
.ylapalkki--vieritetty { box-shadow: var(--varjo-2); }

.ylapalkki__sisalto {
  max-width: var(--leveys-max); margin: 0 auto;
  min-height: var(--ylapalkki-rivi);
  /* Kolme saraketta: logo ja toiminnot vievät oman leveytensä, navigaatio
     keskitetään niiden väliin jäävään tilaan. Yhtä leveät reunasarakkeet
     (`1fr auto 1fr`) keskittäisivät navigaation täsmällisesti, mutta pakottaisi
     palkin kahdelle riville rooleissa joissa valikossa on viisi kohtaa.
     Referenssisivusto asettuu samoin: sielläkin navigaatio on hieman
     keskilinjan vasemmalla puolella, koska oikean reunan napit ovat logoa
     leveämmät. */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--vali-3);
  padding: var(--vali-3) var(--vali-4);
}

/* Sanamerkki: etuosa tekstin väriä, jälkiosa toimintaväriä, koko sana
   alleviivattuna. Ei taustalaatikkoa. */
.logo {
  flex: none;
  font-family: var(--fontti-otsikko);
  font-size: var(--koko-l);
  font-weight: var(--paino-lihava);
  letter-spacing: -.03em;
  color: var(--brandi);
  text-decoration: underline;
  text-decoration-color: var(--brandi);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.logo:hover { color: var(--brandi); text-decoration: underline; }
.logo span { color: var(--korostus); }

/* Navigaatio on keskitetty ja jokainen linkki on pilleri ikoneineen. */
.paavalikko {
  display: flex; gap: var(--vali-1);
  flex-wrap: wrap; justify-content: center;
}
.paavalikko a {
  /* Tiivis pehmuste ja väli: valikossa on rooleista riippuen jopa seitsemän
     kohtaa, ja palkki saa mennä kahdelle riville vasta mobiilissa. */
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 10px;
  border-radius: var(--r-s);
  color: var(--teksti-himmea);
  font-size: var(--koko-s);
  font-weight: var(--paino-puolilihava);
  white-space: nowrap;
  transition: color var(--nopea), background var(--nopea);
}
.paavalikko a:hover { background: var(--pinta-himmea); color: var(--teksti); text-decoration: none; }
.paavalikko a[aria-current="page"] { background: var(--korostus-pinta); color: var(--korostus); }
.paavalikko .ikoni { flex: none; }

.ylapalkki__toiminnot {
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--vali-2); flex-wrap: wrap;
}

/* Ohut pystyviiva erottaa asetukset toiminnoista. */
.ylapalkki__erotin {
  width: 1px; height: 24px;
  margin: 0 var(--vali-1);
  background: var(--reuna);
}

/* Demokaista: vaimennettu, matala rivi varsinaisen yläpalkin alla. */
.demopalkki {
  background: var(--pinta-himmea);
  border-bottom: 1px solid var(--reuna);
}
.demopalkki__sisalto {
  max-width: var(--leveys-max); margin: 0 auto;
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--vali-2); flex-wrap: wrap;
  padding: 6px var(--vali-6);
}
.demopalkki__merkki {
  margin-right: var(--vali-1);
  font-size: 10px;
  font-weight: var(--paino-lihava);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--teksti-himmea);
}
.demopalkki select {
  min-height: 30px;
  padding: 4px 30px 4px 10px;
  font-size: var(--koko-xs);
  background-position: calc(100% - 14px) calc(50% + 2px), calc(100% - 9px) calc(50% + 2px);
}

.valitsin { display: flex; align-items: center; }
.valitsin__otsikko {
  font-size: 10px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--teksti-himmea); font-weight: var(--paino-lihava);
}
.valitsin select {
  width: auto; min-height: 36px;
  padding: 6px 32px 6px 12px;
  font-size: var(--koko-xs);
  font-weight: var(--paino-puolilihava);
  border-radius: var(--r-s);
  background-position: calc(100% - 16px) calc(50% + 2px), calc(100% - 11px) calc(50% + 2px);
}

.alapalkki {
  margin-top: var(--vali-12);
  background: var(--pinta-tumma);
  color: var(--teksti-tummalla);
}
.alapalkki a { color: #fff; }
.alapalkki__sisalto {
  max-width: var(--leveys-max); margin: 0 auto;
  padding: var(--vali-10) var(--vali-6);
  font-size: var(--koko-s);
}
.alapalkki p { margin: 0; }

.ilmoitusalue {
  position: fixed; right: var(--vali-5); bottom: var(--vali-5); z-index: 80;
  display: flex; flex-direction: column; gap: var(--vali-2);
  max-width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}
.ponnahdus {
  padding: 14px 18px;
  border-radius: var(--r-m);
  background: var(--pinta-tumma);
  color: #fff;
  font-size: var(--koko-m);
  font-weight: var(--paino-puolilihava);
  box-shadow: var(--varjo-4);
  border-left: 4px solid var(--korostus);
  animation: ponnahdus-sisaan 240ms var(--kayra);
}
.ponnahdus--onnistui { border-left-color: var(--onnistui); }
.ponnahdus--virhe { border-left-color: var(--virhe); }
@keyframes ponnahdus-sisaan {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to { opacity: 1; transform: none; }
}

/* ==========================================================================
   6. MODAALI
   ========================================================================== */
.modaali-tausta {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  padding: var(--vali-5);
  background: var(--peite);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: haivyta 160ms var(--kayra);
}
@keyframes haivyta { from { opacity: 0; } to { opacity: 1; } }

.modaali {
  width: min(580px, 100%);
  max-height: min(88vh, 900px);
  overflow: auto;
  background: var(--pinta);
  border: 1px solid var(--reuna);
  border-radius: var(--r-xl);
  box-shadow: var(--varjo-4);
  animation: modaali-nousee 220ms var(--kayra);
}
@keyframes modaali-nousee {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to { opacity: 1; transform: none; }
}
.modaali__otsikko {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: var(--vali-4);
  padding: var(--vali-5) var(--vali-6);
  background: var(--pinta);
  border-bottom: 1px solid var(--reuna);
}
.modaali__otsikko h3 { margin: 0; font-size: var(--koko-l); }
.modaali__sulje {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 0; border-radius: var(--r-pill);
  background: var(--pinta-himmea);
  color: var(--teksti-himmea);
  font-size: 19px; line-height: 1; cursor: pointer;
  transition: background var(--nopea), color var(--nopea);
}
.modaali__sulje:hover { background: var(--reuna-vahva); color: var(--teksti); }
.modaali__runko { padding: var(--vali-6); }
.modaali__runko .kentta:last-child { margin-bottom: 0; }
.modaali__toiminnot {
  position: sticky; bottom: 0;
  display: flex; justify-content: flex-end; gap: var(--vali-3);
  padding: var(--vali-4) var(--vali-6);
  background: var(--pinta-himmea);
  border-top: 1px solid var(--reuna);
}

/* ==========================================================================
   7. HAKUNÄKYMÄ
   ========================================================================== */
.haku-asettelu {
  display: grid;
  grid-template-columns: var(--sivupalkki) minmax(0, 1fr);
  gap: var(--vali-6);
  align-items: start;
}

/* --- Suodatinpaneeli --------------------------------------------------- */
.suodatinpaneeli {
  position: sticky;
  top: calc(var(--ylapalkki-korkeus) + var(--vali-4));
  max-height: calc(100vh - var(--ylapalkki-korkeus) - var(--vali-8));
  overflow-y: auto;
  padding: var(--vali-4);
  background: var(--pinta);
  border: 1px solid var(--reuna);
  border-radius: var(--r-l);
  scrollbar-gutter: stable;
}
.suodatinpaneeli__otsikko {
  display: flex; align-items: center; justify-content: space-between; gap: var(--vali-2);
  padding-bottom: var(--vali-3);
  margin-bottom: 0;
  border-bottom: 1px solid var(--reuna);
}
.suodatinpaneeli__otsikko h2 {
  display: flex; align-items: center; gap: var(--vali-2);
  margin: 0;
  font-size: var(--koko-m);
}
/* Tyhjennä on tekstilinkki, ei nappi – painikkeita on paneelissa vain yksi. */
.suodatinpaneeli__otsikko .nappi {
  min-height: 0; padding: 0; border: 0; border-radius: 0;
  background: none;
  color: var(--korostus);
  font-size: var(--koko-s);
  font-weight: var(--paino-puolilihava);
}
.suodatinpaneeli__otsikko .nappi:hover { background: none; color: var(--korostus-toinen); text-decoration: underline; }
.suodatin-laskuri {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 7px;
  border-radius: var(--r-pill);
  background: var(--korostus);
  color: #fff;
  font-size: var(--koko-xs); font-weight: var(--paino-lihava);
}

.suodatin { padding: var(--vali-3) 0 0; }
.suodatin__otsikko {
  display: block;
  margin-bottom: var(--vali-1);
  font-size: var(--koko-s);
  font-weight: var(--paino-puolilihava);
  color: var(--teksti);
}
/* Paneelin kentät ovat sivun oletuskenttiä matalampia: suodattimia on paljon
   ja ne on saatava kerralla näkyviin. */
.suodatinpaneeli input,
.suodatinpaneeli select { min-height: 38px; padding: 6px 12px; }
.suodatinpaneeli select { padding-right: 32px; }
.suodatin__vali { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--vali-2); }
.suodatin__vali span { color: var(--teksti-himmea); }

/* --- Kahden kahvan liukusäädin ------------------------------------------
   Kaksi range-kenttää on aseteltu päällekkäin samalle radalle. Radat ovat
   läpinäkyviä ja itse rata piirretään säiliön taustaan, jotta valittu väli
   voidaan korostaa (--liuku-alku … --liuku-loppu). */
.liuku { padding: var(--vali-1) 2px 0; }
.liuku__radat {
  position: relative;
  height: 20px;
}
.liuku__radat::before,
.liuku__radat::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 50%;
  height: 4px; margin-top: -2px;
  border-radius: var(--r-pill);
  /* Rata piirtyy sisällön päälle (::after on viimeinen lapsi), joten se ei saa
     ottaa vastaan osoitintapahtumia – muuten kahvoihin ei pääse käsiksi
     valitun välin kohdalla. */
  pointer-events: none;
}
.liuku__radat::before { background: var(--reuna); }
.liuku__radat::after {
  left: var(--liuku-alku, 0%);
  right: calc(100% - var(--liuku-loppu, 100%));
  background: var(--korostus);
}
.liuku input[type="range"] {
  position: absolute; inset: 0;
  width: 100%; min-height: 0; height: 20px;
  margin: 0; padding: 0;
  background: none; border: 0; border-radius: 0;
  appearance: none; -webkit-appearance: none;
  /* Rata ei ota klikkauksia vastaan, jotta alempi kenttä ei peitä ylempää;
     vain kahvat ovat osoitettavia. */
  pointer-events: none;
}
.liuku input[type="range"]:hover { border: 0; }
/* Kun kahvat ovat lähellä toisiaan, ylempi kenttä peittäisi alemman kahvan.
   `data-paalla` nostaa sen kentän, jonka kahvaa ollaan tarttumassa. */
.liuku input[type="range"][data-paalla="true"] { z-index: 2; }
.liuku input[type="range"] { z-index: 1; }
.liuku input[type="range"]:focus { box-shadow: none; outline: none; }
.liuku input[type="range"]::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px;
  border: 2px solid var(--korostus);
  border-radius: var(--r-pill);
  background: var(--pinta);
  box-shadow: var(--varjo-1);
  cursor: pointer;
  pointer-events: auto;
}
.liuku input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px;
  border: 2px solid var(--korostus);
  border-radius: var(--r-pill);
  background: var(--pinta);
  cursor: pointer;
  pointer-events: auto;
}
.liuku input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--fokus-halo); }
.liuku input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--fokus-halo); }
.liuku__arvot {
  display: flex; justify-content: space-between; gap: var(--vali-2);
  margin-top: var(--vali-1);
  font-size: var(--koko-s);
  color: var(--teksti-himmea);
  font-variant-numeric: tabular-nums;
}
.suodatin__valinnat {
  display: flex; flex-direction: column;
  max-height: 190px; overflow-y: auto;
}
.suodatin__valinnat .valintaruutu { padding: 3px 6px; font-size: var(--koko-s); gap: var(--vali-2); }
.suodatin__valinnat .valintaruutu input { width: 17px; height: 17px; }

/* "Lisää suodattimia" kokoaa harvemmin käytetyt suodattimet pois tieltä. */
.suodatin-lisaa {
  margin-top: var(--vali-3);
  border-top: 1px solid var(--reuna);
}
.suodatin-lisaa > summary {
  display: flex; align-items: center; gap: var(--vali-2);
  padding: var(--vali-3) 0 0;
  color: var(--korostus);
  font-size: var(--koko-s);
  font-weight: var(--paino-puolilihava);
  cursor: pointer;
  list-style: none;
}
.suodatin-lisaa > summary::-webkit-details-marker { display: none; }
.suodatin-lisaa > summary .ikoni { transition: transform var(--perus); }
.suodatin-lisaa[open] > summary .ikoni { transform: rotate(90deg); }

.suodatinpaneeli__etsi { margin-top: var(--vali-4); }
.suodatinpaneeli__toiminnot { display: none; }   /* vain mobiilissa */

/* --- Hakupalkki ja tulosrivi ------------------------------------------ */
/* --- Hakusivun hakurivi ------------------------------------------------- */
.hakurivi {
  position: relative;
  display: flex; align-items: center;
  margin-bottom: var(--vali-4);
}
.hakurivi .ikoni {
  position: absolute; left: var(--vali-4);
  color: var(--teksti-himmea);
  pointer-events: none;
}
.hakurivi input[type="search"] {
  min-height: 48px;
  padding-left: 46px;
}

/* --- Tallennetut haut --------------------------------------------------- */
.tallennetut {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--vali-2);
  margin-bottom: var(--vali-5);
}
.tallennetut[hidden] { display: none; }
.tallennetut__otsikko {
  font-size: var(--koko-s);
  font-weight: var(--paino-puolilihava);
  color: var(--teksti-himmea);
}

.tulosrivi {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--vali-4); margin-bottom: var(--vali-5); flex-wrap: wrap;
}
.tulosrivi__maara { font-size: var(--koko-m); color: var(--teksti-himmea); }
.tulosrivi__maara strong {
  color: var(--teksti); font-size: var(--koko-l);
  font-weight: var(--paino-lihava); font-variant-numeric: tabular-nums;
}
.tulosrivi__ohjaimet { display: flex; align-items: center; gap: var(--vali-3); flex-wrap: wrap; }
.tulosrivi__ohjaimet select { width: auto; min-width: 190px; }
.suodatin-avaus { display: none; }

/* 240 px:n vähimmäisleveys mahtuu kolmena sarakkeena tulospalstalle myös
   suodatinpalkin kanssa; 288 px riitti vain kahteen. */
.autolista { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--vali-5); }
.lisaa-rivi { display: flex; justify-content: center; margin: var(--vali-10) 0 0; }

/* --- Autokortti -------------------------------------------------------- */
.autokortti {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--pinta);
  border: 1px solid var(--reuna);
  border-radius: var(--r-l);
  overflow: hidden;
  transition: box-shadow var(--perus), border-color var(--perus);
}
.autokortti:hover {
  box-shadow: var(--varjo-2);
  border-color: var(--reuna-vahva);
}
.autokortti__linkki { display: flex; flex-direction: column; flex: 1; color: inherit; }
.autokortti__linkki:hover { text-decoration: none; color: inherit; }

.autokortti__kuva { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--pinta-himmea); }
.autokortti__kuva img { width: 100%; height: 100%; object-fit: cover; transition: transform 420ms var(--kayra); }
.autokortti:hover .autokortti__kuva img { transform: scale(1.04); }

.autokortti__merkinnat {
  position: absolute; top: var(--vali-3); left: var(--vali-3); z-index: 2;
  display: flex; gap: var(--vali-1); flex-wrap: wrap;
}
/* Kuvan päällä merkinnät tarvitsevat läpinäkymättömän pohjan, jotta teksti
   erottuu myös värikkäästä kuvasta (erityisesti tummassa tilassa). */
.autokortti__merkinnat .merkkilappu { background-color: var(--pinta); box-shadow: var(--varjo-2); }

.autokortti__suosikki {
  position: absolute; top: var(--vali-3); right: var(--vali-3); z-index: 3;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 0; border-radius: var(--r-pill);
  /* Nappi kelluu kuvan päällä: pohja on kiinteä valkoinen molemmissa
     teemoissa, joten myös kuvakkeen väri on kiinteä. */
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(6px);
  color: #676767;
  cursor: pointer;
  box-shadow: var(--varjo-1);
  transition: transform var(--nopea), color var(--nopea), background var(--nopea);
}
.autokortti__suosikki .ikoni { width: 20px; height: 20px; }
/* Suosikki täyttyy vasta valittuna – muuten se on pelkkä ääriviiva. */
.autokortti__suosikki[aria-pressed="true"] .ikoni { fill: currentColor; }
.autokortti__suosikki:hover { transform: scale(1.08); color: var(--virhe); background: #fff; }
.autokortti__suosikki[aria-pressed="true"] { color: var(--virhe); }
.autokortti__suosikki[aria-pressed="true"] .ikoni { animation: syke 340ms var(--kayra); fill: currentColor; }
@keyframes syke {
  0% { transform: scale(1); }
  45% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* Rivit ovat lyhyitä, joten ne pidetään lähellä toisiaan: väljä pystyrytmi
   venytti kortin korkeaksi ilman että mikään erottui paremmin. */
.autokortti__sisalto {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1;
  padding: var(--vali-4);
}
.autokortti__nimi {
  margin: 0;
  font-family: var(--fontti-otsikko);
  font-size: var(--koko-m);
  font-weight: var(--paino-lihava);
  letter-spacing: -.01em;
  /* Otsikko saa venyä kahdelle riville, mutta ei enempää: kolmas rivi
     rikkoisi korttien tasakorkuisuuden ruudukossa. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.autokortti__tarkenne {
  margin: 0; font-size: var(--koko-s); color: var(--teksti-himmea);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Metatiedot ovat ikoni + arvo -pareja, jotka rivittyvät tarpeen mukaan. */
.autokortti__tiedot {
  display: flex; flex-wrap: wrap; gap: 2px var(--vali-3);
  margin-top: var(--vali-2);
}
.meta {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--koko-s);
  color: var(--teksti-himmea);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.meta .ikoni { flex: none; color: var(--teksti-himmea); opacity: .85; }
.autokortti__sijainti { margin-top: 0; }

.autokortti__hinta {
  margin-top: auto;
  padding-top: var(--vali-3);
  border-top: 1px solid var(--reuna);
  font-family: var(--fontti-otsikko);
  font-size: var(--koko-l);
  font-weight: var(--paino-lihava);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  color: var(--hinta);
}
.autokortti__alarivi {
  display: flex; align-items: center; justify-content: space-between; gap: var(--vali-2);
  padding-top: var(--vali-1);
  font-size: var(--koko-xs);
  color: var(--teksti-himmea);
}

/* --- Näkymävalinta (lista / ruudukko) ---------------------------------- */
.nakymavalinta {
  display: inline-flex; gap: var(--vali-1);
  padding: var(--vali-1);
  border: 1px solid var(--reuna);
  border-radius: var(--r-s);
  background: var(--pinta-himmea);
}
.nakymavalinta__nappi {
  padding: 8px 18px;
  border: 0; border-radius: var(--r-s);
  background: transparent;
  color: var(--teksti-himmea);
  font: inherit; font-size: var(--koko-s); font-weight: var(--paino-puolilihava);
  cursor: pointer;
  transition: background var(--nopea), color var(--nopea);
}
.nakymavalinta__nappi:hover { color: var(--teksti); }
.nakymavalinta__nappi[aria-pressed="true"] { background: var(--pinta); color: var(--korostus); box-shadow: var(--varjo-1); }

/* --- Tuloslista (oletusnäkymä) ----------------------------------------- */
.autolista[data-nakyma="lista"] { display: flex; flex-direction: column; gap: var(--vali-4); }

.tulosrivi-kortti {
  position: relative;
  background: var(--pinta);
  border: 1px solid var(--reuna);
  border-radius: var(--r-l);
  overflow: hidden;
  transition: border-color var(--perus), box-shadow var(--perus);
}
.tulosrivi-kortti:hover { border-color: var(--reuna-vahva); box-shadow: var(--varjo-2); }
.tulosrivi-kortti__linkki {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 208px;
  gap: var(--vali-6);
  color: inherit;
  align-items: stretch;
}
.tulosrivi-kortti__linkki:hover { text-decoration: none; color: inherit; }

.tulosrivi-kortti__kuva {
  position: relative;
  min-height: 156px;
  background: var(--pinta-himmea);
  overflow: hidden;
}
.tulosrivi-kortti__kuva img { width: 100%; height: 100%; object-fit: cover; }

.tulosrivi-kortti__tiedot {
  display: flex; flex-direction: column; gap: var(--vali-2);
  padding: var(--vali-5) 0;
  min-width: 0;
}
.tulosrivi-kortti__tiedot .autokortti__nimi { font-size: var(--koko-l); }
.tulosrivi-kortti__alarivi {
  display: flex; gap: var(--vali-4); flex-wrap: wrap;
  margin-top: auto;
  font-size: var(--koko-xs);
  color: var(--teksti-himmea);
}
.tulosrivi-kortti__hinta-alue {
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: var(--vali-2);
  padding: var(--vali-5) var(--vali-6) var(--vali-5) var(--vali-6);
  border-left: 1px solid var(--reuna);
  text-align: right;
}
.tulosrivi-kortti__hinta-alue .autokortti__hinta {
  margin: 0; padding: 0;
  font-size: var(--koko-xl);
}
.tulosrivi-kortti .autokortti__suosikki {
  top: var(--vali-2); right: var(--vali-2); left: auto;
  width: 36px; height: 36px;
  background: var(--pinta);
  border: 1px solid var(--reuna);
  box-shadow: none;
}

/* ==========================================================================
   8. ILMOITUSSIVU
   ========================================================================== */
.ilmoitus-asettelu {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 356px;
  gap: var(--vali-6);
  align-items: start;
}

.karuselli {
  position: relative;
  margin-bottom: var(--vali-6);
  background: var(--pinta-tumma);
  border-radius: var(--r-l);
  overflow: hidden;
}
.karuselli__kuva { height: clamp(280px, 44vh, 480px); }
.karuselli__kuva img { width: 100%; height: 100%; object-fit: cover; }

.karuselli__nuoli {
  position: absolute; top: 38%;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 0; border-radius: var(--r-pill);
  /* Kuten suosikkinappi: kiinteä valkoinen pohja kuvan päällä. */
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(6px);
  color: #333333;
  font-size: 21px; font-weight: var(--paino-lihava);
  cursor: pointer;
  box-shadow: var(--varjo-2);
  opacity: 0;
  transform: translateY(-50%) scale(.94);
  transition: opacity var(--perus), transform var(--perus), color var(--nopea);
}
.karuselli:hover .karuselli__nuoli,
.karuselli__nuoli:focus-visible { opacity: 1; transform: translateY(-50%) scale(1); }
.karuselli__nuoli:hover { color: var(--korostus); }
.karuselli__nuoli--edellinen { left: var(--vali-4); }
.karuselli__nuoli--seuraava { right: var(--vali-4); }
@media (hover: none) { .karuselli__nuoli { opacity: 1; transform: translateY(-50%); } }

.karuselli__laskuri {
  position: absolute; top: var(--vali-4); right: var(--vali-4);
  padding: 5px 12px;
  border-radius: var(--r-s);
  background: rgba(0, 0, 0, .68);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: var(--koko-xs);
  font-weight: var(--paino-puolilihava);
  font-variant-numeric: tabular-nums;
}
.karuselli__pikkukuvat {
  display: flex; gap: var(--vali-2);
  padding: var(--vali-3);
  background: rgba(255, 255, 255, .06);
  overflow-x: auto;
}
.karuselli__pikkukuva {
  flex: none;
  width: 88px; height: 64px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--r-s);
  box-sizing: border-box;
  overflow: hidden;
  background: none;
  cursor: pointer;
  opacity: .6;
  transition: opacity var(--nopea), border-color var(--nopea), transform var(--nopea);
}
.karuselli__pikkukuva img { width: 100%; height: 100%; object-fit: cover; }
.karuselli__pikkukuva:hover { opacity: 1; transform: translateY(-2px); }
.karuselli__pikkukuva[aria-current="true"] { opacity: 1; border-color: var(--korostus); }

.ilmoitus-otsikko {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--vali-5); flex-wrap: wrap;
}
.ilmoitus-otsikko h1 { margin-bottom: var(--vali-1); font-size: var(--koko-2xl); }
.ilmoitus-hinta {
  font-family: var(--fontti-otsikko);
  font-size: var(--koko-hinta);
  font-weight: var(--paino-lihava);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  color: var(--hinta);
  white-space: nowrap;
}

.tietoruudukko {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--vali-5) var(--vali-8);
  align-items: start;
}
.tietolohko { min-width: 0; }
/* Väliotsikko on samaa leipätekstifonttia kuin arvot, vain lihavoituna:
   oma otsikkofontti ja alleviivaus kilpailivat sisällön kanssa. */
.tietolohko__otsikko {
  margin: 0 0 var(--vali-4);
  font-size: var(--koko-m);
  font-weight: var(--paino-puolilihava);
  color: var(--teksti);
}
.tietolohko .varustelista { columns: 1; }

/* Nimi–arvo-parit ilman raitoja, viivoja ja korostuksia: erottelu tulee
   väristä ja lihavuudesta, jolloin pitkäkin lista pysyy rauhallisena. */
.tietotaulukko { width: 100%; font-size: var(--koko-m); }
.tietotaulukko th, .tietotaulukko td {
  text-align: left;
  vertical-align: top;
  padding: 0 var(--vali-3) var(--vali-4) 0;
}
.tietotaulukko td { padding-right: 0; }
.tietotaulukko th { width: 44%; color: var(--teksti-himmea); font-weight: var(--paino-normaali); }
.tietotaulukko td {
  font-weight: var(--paino-normaali); font-variant-numeric: tabular-nums;
  color: var(--teksti-pehmea);
}
.tietotaulukko tr:last-child th, .tietotaulukko tr:last-child td { padding-bottom: 0; }

.varustelista { columns: 2; column-gap: var(--vali-8); margin: 0; padding: 0; list-style: none; font-size: var(--koko-m); }
.varustelista li {
  position: relative; padding: 5px 0 5px 24px; break-inside: avoid;
  color: var(--teksti-pehmea);
}
.varustelista li::before {
  content: "";
  position: absolute; left: 0; top: 10px;
  width: 16px; height: 16px;
  border-radius: var(--r-pill);
  background: var(--onnistui-pinta)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a7410' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / 9px 9px no-repeat;
}
.kuvausteksti {
  margin: 0; white-space: pre-wrap; font-size: var(--koko-m); line-height: 1.7;
  color: var(--teksti-pehmea);
}

.myyjalaatikko h3 { font-size: var(--koko-l); }
.myyjalaatikko__ylarivi { display: flex; align-items: center; gap: var(--vali-4); margin-bottom: var(--vali-5); }
.myyjalaatikko__nimi { font-size: var(--koko-l); font-weight: var(--paino-lihava); }
.myyjalaatikko__logo {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: var(--r-pill);
  background: var(--korostus);
  color: #fff;
  font-size: var(--koko-l);
  font-weight: var(--paino-lihava);
}
.puhelinnumero {
  margin: var(--vali-3) 0 0;
  padding: var(--vali-4);
  border-radius: var(--r-m);
  background: var(--pinta-himmea);
  color: var(--teksti);
  font-size: var(--koko-l);
  font-weight: var(--paino-lihava);
  letter-spacing: .04em;
  text-align: center;
}

/* ==========================================================================
   9. MYYNTI-ILMOITUSLOMAKE
   ========================================================================== */
.vaihepalkki,
.edistymispalkki,
#myy-lomake { max-width: 920px; margin-left: auto; margin-right: auto; }

#myy-lomake {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--vali-5);
  align-items: start;
}
#myy-lomake > h3,
#myy-lomake > .virhelaatikko,
#myy-lomake > .lomake-toiminnot,
#myy-lomake > .kentta:has(textarea),
#myy-lomake > .kentta:has(.valintaruudut),
#myy-lomake > .kentta:has(.kytkin),
#myy-lomake > .kentta:has(input[type="file"]) { grid-column: 1 / -1; }

.vaihepalkki { display: flex; gap: var(--vali-3); margin-bottom: var(--vali-4); }
.vaihe {
  display: flex; align-items: center; gap: var(--vali-3);
  flex: 1;
  padding: var(--vali-3) var(--vali-4);
  border: 1px solid var(--reuna);
  border-radius: var(--r-m);
  background: var(--pinta);
  color: var(--teksti-himmea);
  font-size: var(--koko-s);
  font-weight: var(--paino-puolilihava);
  transition: all var(--perus);
}
.vaihe__numero {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: none;
  border-radius: var(--r-pill);
  background: var(--pinta-himmea);
  color: var(--teksti-himmea);
  font-size: var(--koko-xs);
  font-weight: var(--paino-lihava);
  margin: 0;
}
.vaihe--aktiivinen {
  border-color: var(--korostus);
  background: var(--korostus-pinta);
  color: var(--teksti);
}
.vaihe--aktiivinen .vaihe__numero { background: var(--korostus); color: #fff; }
.vaihe--valmis { border-color: var(--onnistui); color: var(--onnistui); }
.vaihe--valmis .vaihe__numero { background: var(--onnistui-pinta); color: var(--onnistui); }

.edistymispalkki {
  height: 6px;
  margin-bottom: var(--vali-6);
  border-radius: var(--r-s);
  background: var(--reuna);
  overflow: hidden;
}
.edistymispalkki__taytto { height: 100%; background: var(--korostus); transition: width var(--hidas); }

.lomake-toiminnot {
  display: flex; justify-content: space-between; gap: var(--vali-3);
  margin-top: var(--vali-6);
  padding-top: var(--vali-5);
  border-top: 1px solid var(--reuna);
}

.kuvaruudukko { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: var(--vali-3); margin-top: var(--vali-3); }
.kuvaruudukko:empty { display: none; }
.kuvaruutu {
  position: relative; aspect-ratio: 4 / 3;
  border: 1px solid var(--reuna); border-radius: var(--r-m); overflow: hidden;
}
.kuvaruutu img { width: 100%; height: 100%; object-fit: cover; }
.kuvaruutu__poista {
  position: absolute; top: 6px; right: 6px;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border: 0; border-radius: var(--r-pill);
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(4px);
  color: #fff; font-size: 14px; line-height: 1; cursor: pointer;
  transition: background var(--nopea);
}
.kuvaruutu__poista:hover { background: var(--virhe); }

/* ==========================================================================
   10. TARJOUKSET, LISTARIVIT JA KAUPPIASPANEELI
   ========================================================================== */
.tarjouskortti { padding: var(--vali-6); margin-bottom: var(--vali-4); transition: box-shadow var(--perus); }
.tarjouskortti:hover { box-shadow: var(--varjo-2); }
.tarjouskortti--uusi { border-color: var(--korostus); }
.tarjouskortti__ylarivi {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--vali-4); flex-wrap: wrap;
}
.tarjouskortti__summa {
  font-family: var(--fontti-otsikko);
  font-size: var(--koko-xl);
  font-weight: var(--paino-lihava);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  color: var(--hinta);
}
.tarjouskortti__meta {
  display: flex; gap: var(--vali-5); flex-wrap: wrap;
  margin-top: var(--vali-3);
  font-size: var(--koko-xs);
  color: var(--teksti-himmea);
}
.tarjouskortti__viesti {
  margin: var(--vali-3) 0 0;
  padding: var(--vali-3) var(--vali-4);
  border-radius: var(--r-m);
  border-left: 4px solid var(--reuna-vahva);
  background: var(--pinta-himmea);
  font-size: var(--koko-m);
  white-space: pre-wrap;
}
.tarjouskortti__vastatarjous {
  border-left-color: var(--korostus);
  background: var(--vastatarjous-pinta);
  color: var(--teksti);
}
.tarjouskortti__toiminnot { display: flex; gap: var(--vali-2); flex-wrap: wrap; margin-top: var(--vali-4); }

.autorivi {
  display: flex; align-items: center; gap: var(--vali-5);
  padding: var(--vali-5);
  margin-bottom: var(--vali-4);
  transition: box-shadow var(--perus), border-color var(--perus);
}
.autorivi:hover { box-shadow: var(--varjo-2); border-color: var(--reuna-vahva); }
.autorivi__kuva {
  flex: none; width: 144px; height: 102px;
  border-radius: var(--r-m); overflow: hidden; background: var(--pinta-himmea);
}
.autorivi__kuva img { width: 100%; height: 100%; object-fit: cover; }
.autorivi__tiedot { flex: 1; min-width: 0; }
.autorivi__nimi {
  display: flex; align-items: center; gap: var(--vali-2); flex-wrap: wrap;
  font-size: var(--koko-l); font-weight: var(--paino-lihava); letter-spacing: -.012em;
}
.autorivi__nimi a { color: inherit; }
.autorivi__meta { margin: var(--vali-1) 0 0; font-size: var(--koko-s); color: var(--teksti-himmea); }
.autorivi__toiminnot { display: flex; flex-direction: column; align-items: flex-end; gap: var(--vali-2); }
.autorivi__toiminnot select { width: auto; min-width: 140px; min-height: 40px; font-size: var(--koko-xs); }

.valilehdet {
  display: flex; gap: var(--vali-1); flex-wrap: wrap;
  margin-bottom: var(--vali-6);
  padding: var(--vali-1);
  background: var(--pinta-himmea);
  border: 1px solid var(--reuna);
  border-radius: var(--r-s);
}
.valilehti {
  padding: 10px 20px;
  border: 0; border-radius: var(--r-s);
  background: transparent;
  color: var(--teksti-himmea);
  font: inherit; font-size: var(--koko-s); font-weight: var(--paino-puolilihava);
  cursor: pointer;
  transition: background var(--nopea), color var(--nopea), box-shadow var(--nopea);
}
.valilehti:hover { color: var(--teksti); }
.valilehti[aria-selected="true"] { background: var(--pinta); color: var(--korostus); box-shadow: var(--varjo-1); }

.tilastoruudukko { display: grid; grid-template-columns: repeat(auto-fit, minmax(208px, 1fr)); gap: var(--vali-4); }
.tilastokortti { position: relative; padding: var(--vali-6); overflow: hidden; text-align: left; }
.tilastokortti::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--korostus); }
.tilastokortti__luku {
  font-family: var(--fontti-otsikko);
  font-size: var(--koko-2xl);
  font-weight: var(--paino-lihava);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--hinta);
}
.tilastokortti__otsikko { margin-top: var(--vali-2); font-size: var(--koko-s); color: var(--teksti-himmea); }

/* ==========================================================================
   11. LUURANGOT, TYHJÄT TILAT JA LATAUS
   ========================================================================== */
.luuranko { position: relative; overflow: hidden; background: var(--luuranko-a); border-radius: var(--r-s); }
.luurankokortti__sisalto .luuranko:last-child { border-radius: var(--r-s); }
.luuranko::after {
  content: "";
  position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--luuranko-b), transparent);
  animation: kimallus 1.4s infinite;
}
@keyframes kimallus { 100% { transform: translateX(100%); } }

.luurankokortti { border: 1px solid var(--reuna); border-radius: var(--r-l); background: var(--pinta); overflow: hidden; }
.luurankokortti__kuva { aspect-ratio: 4 / 3; border-radius: 0; }
.luurankokortti__sisalto { display: flex; flex-direction: column; gap: var(--vali-3); padding: var(--vali-5); }
.luurankorivi { height: 14px; }
.luurankorivi--otsikko { height: 18px; width: 68%; }
.luurankorivi--lyhyt { width: 42%; }
.luurankorivi--hinta { height: 24px; width: 52%; margin-top: var(--vali-2); }

.latausviesti {
  display: flex; align-items: center; justify-content: center; gap: var(--vali-3);
  padding: var(--vali-12) var(--vali-5);
  color: var(--teksti-himmea);
}
.latausviesti::before {
  content: "";
  width: 20px; height: 20px;
  border: 2px solid var(--reuna-vahva);
  border-top-color: var(--korostus);
  border-radius: var(--r-pill);
  animation: pyori .7s linear infinite;
}
@keyframes pyori { to { transform: rotate(360deg); } }

.tyhja-tila {
  display: flex; flex-direction: column; align-items: center; gap: var(--vali-3);
  padding: var(--vali-12) var(--vali-6);
  background: var(--pinta);
  border: 1px solid var(--reuna);
  border-radius: var(--r-l);
  text-align: center;
  color: var(--teksti-himmea);
}
.autolista > .tyhja-tila { grid-column: 1 / -1; }
.tyhja-tila h3 { margin: 0; color: var(--teksti); font-size: var(--koko-l); }
.tyhja-tila p { margin: 0; max-width: 42ch; }
.tyhja-tila__kuva {
  display: flex; align-items: center; justify-content: center;
  width: 72px; height: 72px;
  margin-bottom: var(--vali-2);
  border-radius: var(--r-pill);
  background: var(--korostus-pinta);
  color: var(--korostus);
}
.tyhja-tila__kuva svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tyhja-tila .nappi { margin-top: var(--vali-2); }

.autokortti--ilmestyy { animation: kortti-sisaan 320ms var(--kayra) backwards; }
@keyframes kortti-sisaan {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ==========================================================================
   12. RESPONSIIVISUUS
   ========================================================================== */
@media (max-width: 1180px) {
  .ilmoitus-asettelu { grid-template-columns: minmax(0, 1fr) 316px; }
  .haku-asettelu { grid-template-columns: 224px minmax(0, 1fr); }
}

@media (max-width: 1024px) {
  .ilmoitus-asettelu { grid-template-columns: 1fr; }
  /* Palstat menevät allekkain. Huutokaupassa sivupalsta nousee heti otsikon
     alle, jottei huutaminen jää teknisten tietojen ja kuvauksen taakse. */
  .ilmoitus-asettelu--huuto .ilmoitus-sivupalsta { order: -1; }
  .myyjalaatikko { position: static; }
  .tulosrivi-kortti__linkki { grid-template-columns: 208px minmax(0, 1fr) 176px; gap: var(--vali-5); }
}

@media (max-width: 900px) {
  .tietoruudukko { grid-template-columns: 1fr; }
}

/* Yläpalkin rivitys erikseen: navigaatio siirtyy omalle rivilleen jo ennen
   varsinaista mobiilitaitosta, koska valikossa voi olla viisi kohtaa. */
@media (max-width: 1200px) {
  .ylapalkki__sisalto {
    display: flex; flex-wrap: wrap;
    gap: var(--vali-2);
    padding: var(--vali-2) var(--vali-6);
  }
  .paavalikko {
    order: 3; width: 100%;
    overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start;
    padding-bottom: 2px;
  }
  .paavalikko a { white-space: nowrap; padding: 8px 12px; }
  .ylapalkki__toiminnot { flex: 1; gap: var(--vali-1); }
  .ylapalkki__erotin { display: none; }
}

@media (max-width: 860px) {
  .sisalto { padding: var(--vali-6) var(--vali-4) var(--vali-10); }
  .hakupalkki { padding: var(--vali-4); }
  .haku-asettelu { grid-template-columns: 1fr; }
  .suodatin-avaus { display: inline-flex; }
  /* Mobiilissa suodattimet avautuvat alhaalta koko ruudun paneelina, jonka
     alalaidassa on kiinteä "Näytä tulokset" -nappi. */
  .suodatinpaneeli {
    position: fixed; inset: auto 0 0 0; z-index: 70;
    max-height: 88vh;
    padding: var(--vali-5) var(--vali-4) 0;
    border: 0;
    border-top: 1px solid var(--reuna);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    box-shadow: var(--varjo-4);
    animation: paneeli-nousee 220ms var(--kayra);
  }
  .suodatinpaneeli[data-auki="false"] { display: none; }
  .suodatinpaneeli__toiminnot {
    display: block;
    position: sticky; bottom: 0;
    margin: var(--vali-4) calc(var(--vali-4) * -1) 0;
    padding: var(--vali-3) var(--vali-4);
    background: var(--pinta);
    border-top: 1px solid var(--reuna);
  }
  @keyframes paneeli-nousee {
    from { transform: translateY(100%); }
    to { transform: none; }
  }
  /* Kapealla näytöllä navigaatio siirtyy omalle rivilleen ja vierii
     vaakasuunnassa; ruudukko puretaan. */
  .ylapalkki__sisalto {
    display: flex; flex-wrap: wrap;
    gap: var(--vali-3);
    padding: var(--vali-3) var(--vali-4);
  }
  .paavalikko {
    order: 3; width: 100%;
    overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start;
    padding-bottom: 2px;
  }
  .paavalikko a { white-space: nowrap; }
  .ylapalkki__toiminnot { flex: 1; gap: var(--vali-1); }
  .ylapalkki__erotin { display: none; }
  /* Yläpalkki on sticky myös kapealla näytöllä, joten rivien väli pidetään
     tiukkana heti kun navigaatio siirtyy omalle rivilleen. Toimintoja ei
     piiloteta – ne vain rivittyvät tiiviimmin. */
  .paavalikko a { padding: 8px 12px; }
  .demopalkki__sisalto { padding: 5px var(--vali-4); }
  .varustelista { columns: 1; }
  .autorivi { flex-wrap: wrap; }
  .autorivi__kuva { width: 112px; height: 82px; }
  .tulosrivi-kortti__linkki { grid-template-columns: 168px minmax(0, 1fr); gap: var(--vali-4); }
  .tulosrivi-kortti__hinta-alue {
    grid-column: 1 / -1;
    flex-direction: row; align-items: center; justify-content: space-between;
    border-left: 0; border-top: 1px solid var(--reuna);
    padding: var(--vali-4);
    text-align: left;
  }
  .tulosrivi-kortti__tiedot { padding: var(--vali-4) var(--vali-4) var(--vali-4) 0; }
  /* Toimintonapit rivittyvät: niitä on ilmoituksella neljä (tila, nosto,
     muokkaus, poisto) eivätkä ne mahdu kapealle näytölle yhdelle riville. */
  .autorivi__toiminnot {
    flex-direction: row; flex-wrap: wrap;
    width: 100%; justify-content: flex-start;
  }
  .autorivi__toiminnot select { flex: 1 1 100%; min-width: 0; }
  .vaihepalkki { flex-direction: column; }
  #myy-lomake { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  :root { --ylapalkki-rivi: 64px; }
  /* Demokaistan valitsimet jakavat yhden rivin sen sijaan että rivittyisivät. */
  .demopalkki__sisalto { flex-wrap: nowrap; padding: 5px var(--vali-4); }
  .demopalkki .valitsin { flex: 1; min-width: 0; }
  .demopalkki select { width: 100%; }
  .autolista { grid-template-columns: 1fr; }
  .ylapalkki__toiminnot { width: 100%; justify-content: space-between; }
  /* Pystysuunnassa flex-basis koskisi korkeutta, joten hakukenttä nollataan. */
  .hakupalkki { flex-direction: column; }
  .hakupalkki input[type="search"],
  .hakupalkki select, .hakupalkki input[type="number"] { flex: 0 0 auto; width: 100%; }
  .autorivi__kuva { width: 100%; height: 164px; }
  .tulosrivi-kortti__linkki { grid-template-columns: 1fr; }
  .tulosrivi-kortti__kuva { aspect-ratio: 16 / 10; }
  .tulosrivi-kortti__tiedot { padding: var(--vali-4); }
  .ilmoitusalue { right: var(--vali-3); left: var(--vali-3); bottom: var(--vali-3); max-width: none; }
  .lomake-toiminnot { flex-direction: column-reverse; }
  .lomake-toiminnot > * { width: 100%; }
  .modaali__toiminnot { flex-direction: column-reverse; }
  .modaali__toiminnot > * { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .autokortti__suosikki:hover { transform: none; }
  .kytkin input:checked::after { transform: translateX(20px); }
}

/* ==========================================================================
   13. KUVAKATSELIN

   Koko ruudun kuvakatselin ilmoitussivun karusellista. Zoom toteutetaan
   `transform: scale()`-muunnoksella, jolloin selain ei lataa kuvaa uudelleen
   eikä layout muutu.
   ========================================================================== */
.katselin {
  position: fixed; inset: 0; z-index: 90;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "ylapalkki ylapalkki ylapalkki"
    "edellinen kuva seuraava"
    "pikkukuvat pikkukuvat pikkukuvat";
  background: rgba(0, 0, 0, .92);
  animation: haivyta 160ms var(--kayra);
}
/* Sivu ei saa vierittyä katselimen alla. */
body.modaali-auki { overflow: hidden; }

.katselin__ylapalkki {
  grid-area: ylapalkki;
  display: flex; align-items: center; gap: var(--vali-4);
  padding: var(--vali-3) var(--vali-4);
  color: #fff;
}
.katselin__otsikko {
  flex: 1; min-width: 0;
  font-family: var(--fontti-otsikko);
  font-weight: var(--paino-lihava);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.katselin__laskuri,
.katselin__zoom {
  font-size: var(--koko-s);
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, .72);
  min-width: 4ch; text-align: center;
}
.katselin__toiminnot { display: flex; align-items: center; gap: var(--vali-2); }
.katselin__nappi {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 0; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font: inherit; font-size: var(--koko-l); line-height: 1;
  cursor: pointer;
  transition: background var(--nopea);
}
.katselin__nappi:hover { background: rgba(255, 255, 255, .24); }

.katselin__kuva {
  grid-area: kuva;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  cursor: zoom-in;
  touch-action: none;
}
.katselin__kuva[data-zoomattu="true"] { cursor: grab; }
.katselin__kuva[data-zoomattu="true"]:active { cursor: grabbing; }
.katselin__kuva img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  transform-origin: center;
  transition: transform var(--perus);
  user-select: none; -webkit-user-drag: none;
}

.katselin__nuoli {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  margin: 0 var(--vali-3);
  border: 0; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 28px; line-height: 1;
  cursor: pointer;
  transition: background var(--nopea);
}
.katselin__nuoli:hover { background: rgba(255, 255, 255, .24); }
.katselin__nuoli--edellinen { grid-area: edellinen; }
.katselin__nuoli--seuraava { grid-area: seuraava; }

.katselin__pikkukuvat {
  grid-area: pikkukuvat;
  display: flex; gap: var(--vali-2); justify-content: center;
  padding: var(--vali-4);
  overflow-x: auto;
}
.katselin__pikkukuva {
  flex: none;
  width: 88px; height: 64px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--r-s);
  overflow: hidden;
  background: none;
  cursor: pointer;
  opacity: .55;
  box-sizing: border-box;
  transition: opacity var(--nopea), border-color var(--nopea);
}
.katselin__pikkukuva img { width: 100%; height: 100%; object-fit: cover; }
.katselin__pikkukuva:hover { opacity: 1; }
.katselin__pikkukuva[aria-current="true"] { opacity: 1; border-color: #fff; }

/* Yhden kuvan ilmoituksessa navigointia ei tarvita. */
.katselin[data-yksi-kuva] .katselin__nuoli,
.katselin[data-yksi-kuva] .katselin__pikkukuvat { display: none; }

/* Karusellin kuva on nappi: suurennusvihje näkyy hoverissa. */
.karuselli__kuva {
  display: block; width: 100%;
  padding: 0; border: 0;
  background: none;
  cursor: zoom-in;
}
.karuselli__suurenna {
  position: absolute; left: var(--vali-4); bottom: var(--vali-4); z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, .62);
  color: #fff;
  font-size: var(--koko-xs);
  font-weight: var(--paino-puolilihava);
  opacity: 0;
  transition: opacity var(--perus);
}
.karuselli:hover .karuselli__suurenna,
.karuselli__kuva:focus-visible .karuselli__suurenna { opacity: 1; }
@media (hover: none) { .karuselli__suurenna { opacity: 1; } }

@media (max-width: 560px) {
  .katselin__nuoli { width: 44px; height: 44px; margin: 0 var(--vali-1); font-size: 22px; }
  .katselin__pikkukuvat { padding: var(--vali-2); }
  .katselin__pikkukuva { width: 64px; height: 48px; }
  .katselin__otsikko { font-size: var(--koko-s); }
}

.tulosrivi__ohjaimet .nappi { gap: 6px; }

/* ==========================================================================
   14. VERTAILU
   ========================================================================== */
.autokortti__napit {
  position: absolute; top: var(--vali-3); right: var(--vali-3); z-index: 3;
  display: flex; flex-direction: column; gap: var(--vali-2);
}
.autokortti__napit .autokortti__suosikki { position: static; }
.tulosrivi-kortti .autokortti__napit { top: var(--vali-2); right: var(--vali-2); }
.autokortti__vertaa[aria-pressed="true"] { color: var(--korostus); }
.autokortti__vertaa[aria-pressed="true"] .ikoni { fill: none; }

/* Kelluva palkki, joka kertoo montako autoa on vertailussa. */
.vertailupalkki {
  position: fixed; left: 50%; bottom: var(--vali-5); z-index: 60;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--vali-3);
  padding: var(--vali-3) var(--vali-4);
  border-radius: var(--r-s);
  background: var(--pinta-tumma);
  color: #fff;
  box-shadow: var(--varjo-4);
}
.vertailupalkki[hidden] { display: none; }
.vertailupalkki__maara {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 26px; padding: 0 8px;
  border-radius: var(--r-s);
  background: rgba(255, 255, 255, .16);
  font-size: var(--koko-s); font-weight: var(--paino-lihava);
  font-variant-numeric: tabular-nums;
}
.vertailupalkki__teksti { font-size: var(--koko-s); font-weight: var(--paino-puolilihava); }
.vertailupalkki .nappi--reunus {
  background: transparent; color: #fff; border-color: rgba(255, 255, 255, .32);
}
.vertailupalkki .nappi--reunus:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* Vertailutaulukko */
.vertaa__ohje { color: var(--teksti-himmea); }
.vertaa-kaari { overflow-x: auto; }
.vertaa {
  width: 100%;
  border-collapse: collapse;
  background: var(--pinta);
  border: 1px solid var(--reuna);
  border-radius: var(--r-l);
  overflow: hidden;
}
.vertaa th, .vertaa td {
  padding: var(--vali-3) var(--vali-4);
  text-align: left;
  border-bottom: 1px solid var(--reuna);
  vertical-align: top;
}
.vertaa thead th { border-bottom: 1px solid var(--reuna-vahva); }
.vertaa tbody th { width: 220px; color: var(--teksti-himmea); font-weight: var(--paino-normaali); }
.vertaa td { font-weight: var(--paino-puolilihava); font-variant-numeric: tabular-nums; }
.vertaa__ryhma th {
  background: var(--pinta-himmea);
  font-family: var(--fontti-otsikko);
  font-weight: var(--paino-lihava);
  color: var(--teksti);
}
/* Erot ovat vertailun koko pointti, joten ne korostetaan. */
.vertaa__eroaa td { background: var(--korostus-pinta); }
.vertaa__auto { display: flex; flex-direction: column; gap: var(--vali-2); min-width: 180px; }
.vertaa__auto img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r-m);
  background: var(--pinta-himmea);
}
.vertaa__nimi {
  display: block; margin-top: var(--vali-2);
  font-family: var(--fontti-otsikko);
  font-weight: var(--paino-lihava);
}
.vertaa__hinta {
  font-family: var(--fontti-otsikko);
  font-size: var(--koko-l);
  font-weight: var(--paino-lihava);
}

@media (max-width: 560px) {
  .vertailupalkki { left: var(--vali-3); right: var(--vali-3); transform: none; justify-content: center; }
  .vertaa tbody th { width: 140px; }
}

/* --- Kuvien järjestys ilmoituslomakkeella ------------------------------- */
.kuvaruutu--paakuva { outline: 2px solid var(--korostus); outline-offset: -2px; }
.kuvaruutu__merkki {
  position: absolute; left: 6px; top: 6px; z-index: 2;
  padding: 3px 9px;
  border-radius: var(--r-s);
  background: var(--korostus);
  color: #fff;
  font-size: var(--koko-xs);
  font-weight: var(--paino-puolilihava);
}
.kuvaruutu__jarjestys {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; justify-content: center; gap: 4px;
  padding: 6px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .55));
  opacity: 0;
  transition: opacity var(--perus);
}
.kuvaruutu:hover .kuvaruutu__jarjestys,
.kuvaruutu:focus-within .kuvaruutu__jarjestys { opacity: 1; }
@media (hover: none) { .kuvaruutu__jarjestys { opacity: 1; } }
.kuvaruutu__jarjestys button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border: 0; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .92);
  color: #333333;
  font: inherit; font-size: 16px; line-height: 1;
  cursor: pointer;
}
.kuvaruutu__jarjestys button:disabled { opacity: .35; cursor: not-allowed; }
.kuvaruutu__jarjestys button:hover:not(:disabled) { background: #fff; }

/* --- Viestiketju tarjouskortissa ---------------------------------------- */
.viestiketju {
  margin-top: var(--vali-4);
  padding-top: var(--vali-3);
  border-top: 1px solid var(--reuna);
}
.viestiketju__otsikko {
  display: block; margin-bottom: var(--vali-2);
  font-size: var(--koko-xs);
  font-weight: var(--paino-lihava);
  color: var(--teksti-himmea);
}
.viesti {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--vali-2);
  align-items: baseline;
  padding: var(--vali-2) var(--vali-3);
  margin-bottom: var(--vali-2);
  border-radius: var(--r-m);
  background: var(--pinta-himmea);
  font-size: var(--koko-s);
}
/* Myyjän ja kauppiaan viestit erotellaan reunaviivan värillä, ei asettelulla:
   ketju pysyy luettavana myös kapealla näytöllä. */
.viesti--myyja { border-left: 3px solid var(--korostus); }
.viesti--kauppias { border-left: 3px solid var(--kauppias); }
.viesti__lahettaja { font-weight: var(--paino-lihava); white-space: nowrap; }
.viesti__teksti { white-space: pre-wrap; }
.viesti__aika { color: var(--teksti-himmea); font-size: var(--koko-xs); white-space: nowrap; }

/* --- Ilmoituksen elinkaari ---------------------------------------------- */
.autorivi__luku { color: var(--teksti-himmea); }
.autorivi__luku strong { color: var(--teksti); font-variant-numeric: tabular-nums; }

/* Kielivalitsin on kapea: näyttää vain kielikoodin. */
.valitsin--kieli select { min-width: 62px; }

/* ==========================================================================
   15. MYYJÄT JA SISÄLTÖSIVUT
   ========================================================================== */

/* --- Myyjäsivun otsikko ------------------------------------------------- */
.myyjasivu {
  display: flex; align-items: center; gap: var(--vali-5); flex-wrap: wrap;
  padding: var(--vali-6);
  margin-bottom: var(--vali-6);
  background: var(--pinta);
  border: 1px solid var(--reuna);
  border-radius: var(--r-l);
}
.myyjasivu__tunnus,
.myyjakortti__tunnus {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px;
  border-radius: var(--r-pill);
  background: var(--korostus);
  color: #fff;
  font-family: var(--fontti-otsikko);
  font-size: var(--koko-xl);
  font-weight: var(--paino-lihava);
}
.myyjasivu__tiedot { flex: 1; min-width: 0; }
.myyjasivu__tiedot h1 { margin-bottom: var(--vali-2); font-size: var(--koko-2xl); }
.myyjasivu__meta { display: flex; align-items: center; gap: var(--vali-3); flex-wrap: wrap; margin: 0; }
.myyjasivu__luvut { display: flex; gap: var(--vali-8); margin: 0; }
.myyjasivu__luvut dt { font-size: var(--koko-s); color: var(--teksti-himmea); }
.myyjasivu__luvut dd {
  margin: 2px 0 0;
  font-family: var(--fontti-otsikko);
  font-size: var(--koko-l);
  font-weight: var(--paino-lihava);
  font-variant-numeric: tabular-nums;
}

/* --- Myyjähakemisto ----------------------------------------------------- */
.hakupalkki-rivi {
  display: flex; gap: var(--vali-3); flex-wrap: wrap; align-items: center;
  margin-bottom: var(--vali-6);
}
.hakurivi--kapea { flex: 1 1 320px; max-width: 460px; }
.hakurivi--kapea input[type="search"] { width: 100%; }
.hakupalkki-rivi select { width: auto; min-width: 200px; }

.myyjalista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--vali-4);
}
.myyjakortti {
  display: flex; align-items: center; gap: var(--vali-4);
  padding: var(--vali-5);
  background: var(--pinta);
  border: 1px solid var(--reuna);
  border-radius: var(--r-l);
  color: inherit;
  transition: box-shadow var(--perus), border-color var(--perus);
}
.myyjakortti:hover {
  box-shadow: var(--varjo-2);
  border-color: var(--reuna-vahva);
  text-decoration: none; color: inherit;
}
.myyjakortti__tunnus { width: 52px; height: 52px; font-size: var(--koko-l); }
.myyjakortti__sisalto { display: flex; flex-direction: column; gap: var(--vali-2); min-width: 0; }
.myyjakortti__nimi {
  font-family: var(--fontti-otsikko);
  font-size: var(--koko-m);
  font-weight: var(--paino-lihava);
}
.myyjakortti__meta { display: flex; align-items: center; gap: var(--vali-2); flex-wrap: wrap; }
.myyjakortti__luvut { font-size: var(--koko-s); color: var(--teksti-himmea); }
.myyjakortti__luvut strong { color: var(--teksti); font-variant-numeric: tabular-nums; }

/* --- Sisältösivut ------------------------------------------------------- */
.sisaltosivu {
  max-width: 68ch;
  padding: var(--vali-8);
  background: var(--pinta);
  border: 1px solid var(--reuna);
  border-radius: var(--r-l);
}
.sisaltosivu h1 { font-size: var(--koko-2xl); }
.sisaltosivu h2 { margin-top: var(--vali-8); font-size: var(--koko-l); }
.sisaltosivu__ingressi { font-size: var(--koko-l); color: var(--teksti-himmea); }
.sisaltosivu p { line-height: 1.7; }
.sisaltosivu__toiminto { margin-top: var(--vali-8); }
.sisaltolista { margin: 0 0 var(--vali-4); padding-left: var(--vali-5); line-height: 1.7; }
.sisaltolista li { margin-bottom: var(--vali-2); }

.ukk {
  border-bottom: 1px solid var(--reuna);
}
.ukk > summary {
  padding: var(--vali-4) 0;
  font-weight: var(--paino-puolilihava);
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--vali-3);
}
.ukk > summary::-webkit-details-marker { display: none; }
.ukk > summary::after { content: "+"; color: var(--korostus); font-size: var(--koko-l); }
.ukk[open] > summary::after { content: "\2212"; }
.ukk > p { margin: 0 0 var(--vali-4); color: var(--teksti-himmea); }

.yhteysrivi {
  display: flex; gap: var(--vali-4); flex-wrap: wrap;
  padding: var(--vali-3) 0;
  border-bottom: 1px solid var(--reuna);
}
.yhteysrivi__otsikko { min-width: 140px; color: var(--teksti-himmea); }
.yhteysrivi__arvo { font-weight: var(--paino-puolilihava); }

/* --- Alapalkin linkkisarakkeet ------------------------------------------ */
.alapalkki__sarakkeet {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--vali-6);
  margin-bottom: var(--vali-6);
}
.alapalkki__sarake h2 {
  margin: 0 0 var(--vali-3);
  font-family: var(--fontti);
  font-size: var(--koko-xs);
  font-weight: var(--paino-lihava);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #fff;
}
.alapalkki__sarake ul { margin: 0; padding: 0; list-style: none; }
.alapalkki__sarake li { margin-bottom: var(--vali-2); }
.alapalkki__sarake a { color: var(--teksti-tummalla); font-size: var(--koko-s); }
.alapalkki__sarake a:hover { color: #fff; }
.alapalkki__oikeudet {
  margin: 0;
  padding-top: var(--vali-5);
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: var(--koko-xs);
}

/* ==========================================================================
   16. LISTA- JA RUUDUKKONÄKYMÄ MUISSA NÄKYMISSÄ

   Sama sisältö esitetään joko riveinä tai ruudukkona pelkällä säiliön
   `data-nakyma`-attribuutilla, joten renderöijät pysyvät ennallaan.
   ========================================================================== */
.listasailio { display: flex; flex-direction: column; gap: var(--vali-4); }
.listasailio[data-nakyma="ruudukko"] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--vali-4);
  align-items: start;
}
/* Tarjouskortit ovat kapeampia: niissä on vähemmän vaakasuuntaista sisältöä. */
.listasailio--tiivis[data-nakyma="ruudukko"] {
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
}

/* Säiliö hoitaa välit, joten korttien omat alamarginaalit poistetaan. */
.listasailio .autorivi,
.listasailio .tarjouskortti { margin-bottom: 0; }

/* Ruudukossa autorivi kääntyy pystysuuntaiseksi kortiksi. */
.listasailio[data-nakyma="ruudukko"] .autorivi {
  flex-direction: column;
  align-items: stretch;
  gap: var(--vali-4);
  height: 100%;
}
.listasailio[data-nakyma="ruudukko"] .autorivi__kuva {
  width: 100%; height: auto;
  aspect-ratio: 4 / 3;
}
.listasailio[data-nakyma="ruudukko"] .autorivi__tiedot { flex: 1; }
.listasailio[data-nakyma="ruudukko"] .autorivi__toiminnot {
  flex-direction: row; flex-wrap: wrap;
  align-items: center; justify-content: flex-start;
  width: 100%;
}
.listasailio[data-nakyma="ruudukko"] .autorivi__toiminnot select { flex: 1 1 100%; min-width: 0; }
.listasailio[data-nakyma="ruudukko"] .autorivi__toiminnot .nappi { flex: 1 1 auto; }

/* Ruudukossa tarjouskortin ylärivi kääntyy allekkain, jottei summa puristu. */
.listasailio[data-nakyma="ruudukko"] .tarjouskortti__ylarivi { flex-direction: column; gap: var(--vali-2); }
.listasailio[data-nakyma="ruudukko"] .tarjouskortti__ylarivi > div:last-child { text-align: left !important; }

/* Otsikkorivi, jolla on määrä vasemmalla ja kytkin oikealla. */
.listaotsikko {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--vali-4); flex-wrap: wrap;
  margin-bottom: var(--vali-4);
}
.listaotsikko .tulosrivi__maara { margin: 0; }

@media (max-width: 560px) {
  .listasailio[data-nakyma="ruudukko"],
  .listasailio--tiivis[data-nakyma="ruudukko"] { grid-template-columns: 1fr; }
}

/* ==========================================================================
   17. ETUSIVU
   ========================================================================== */

/* --- Haku ja näyteikkuna -------------------------------------------------
   Kaksipalstainen aloitus referenssin tapaan: vasemmalla hakukone, oikealla
   näyteikkuna uusimmista autoista. */
.etuhaku {
  display: grid;
  /* Hakupalsta on hakusivun sivupalkkia leveämpi: siinä ei ole
     tulosten viemää tilapainetta. */
  grid-template-columns: 320px minmax(0, 1fr);
  gap: var(--vali-6);
  align-items: start;
  margin-bottom: var(--vali-12);
}

.etuhaku__paneeli {
  padding: var(--vali-4);
  background: var(--pinta);
  border: 1px solid var(--reuna);
  border-radius: var(--r-l);
}
/* Paneeli on jo lomakkeen sisällä, joten sen oma kehys jää pois. */
.etuhaku__paneeli .suodatinpaneeli {
  position: static;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: 0;
}
.etuhaku__paneeli .suodatinpaneeli__otsikko { display: none; }
/* Ylin suodatin on heti otsikon alla, joten sen oma yläväli jää pois. */
.etuhaku__paneeli .suodatin:first-of-type { padding-top: 0; }

.palstaotsikko {
  margin-bottom: var(--vali-3);
  font-family: var(--fontti);
  font-size: var(--koko-xs);
  font-weight: var(--paino-lihava);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--teksti-himmea);
}

.etuhaku__toiminnot {
  margin-top: var(--vali-4);
  padding-top: var(--vali-4);
  border-top: 1px solid var(--reuna);
}
.etuhaku__linkki {
  display: flex; align-items: center; justify-content: center; gap: var(--vali-2);
  margin-top: var(--vali-3);
  font-size: var(--koko-s);
  font-weight: var(--paino-puolilihava);
}

.nayteikkuna__otsikko {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--vali-4);
  margin-bottom: var(--vali-3);
}
.nayteikkuna__otsikko .palstaotsikko { margin: 0; }
.nayteikkuna__otsikko a {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--koko-xs);
  font-weight: var(--paino-lihava);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.nayteikkuna {
  display: grid;
  /* Kolme saraketta kiinteästi, jotta kuvat ovat riittävän isoja. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--vali-3);
}
/* Kortin tiedot ovat kuvan päällä: samaan tilaan mahtuu enemmän autoja kuin
   hakutuloskorteilla, ja kuva pysyy pääosassa. */
.nayteikkunakortti {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-m);
  background: var(--pinta-himmea);
  color: #fff;
}
.nayteikkunakortti img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 420ms var(--kayra);
}
.nayteikkunakortti:hover img { transform: scale(1.04); }
.nayteikkunakortti:hover { text-decoration: none; color: #fff; }
/* Tiedot läpikuultavalla nauhalla, joka ulottuu kortin reunasta reunaan.
   Teksti pysyy luettavana myös vaalean kuvan päällä. */
.nayteikkunakortti__tiedot {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
  padding: 7px 10px;
  background: rgba(0, 0, 0, .58);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.nayteikkunakortti__nimi {
  font-weight: var(--paino-lihava);
  font-size: var(--koko-s);
  line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nayteikkunakortti__rivi {
  display: flex; align-items: baseline; gap: var(--vali-2); flex-wrap: wrap;
  line-height: 1.25;
}
.nayteikkunakortti__hinta {
  font-family: var(--fontti-otsikko);
  font-weight: var(--paino-lihava);
  font-size: var(--koko-m);
  font-variant-numeric: tabular-nums;
}
.nayteikkunakortti__meta {
  font-size: var(--koko-xs);
  color: rgba(255, 255, 255, .78);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .etuhaku { grid-template-columns: 1fr; }
}

/* --- Nauhat (ilmoita ilmaiseksi, autoliikkeille) ------------------------- */
.etunauha {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--vali-6); flex-wrap: wrap;
  padding: var(--vali-8);
  margin-bottom: var(--vali-10);
  background: var(--pinta);
  border: 1px solid var(--reuna);
  border-radius: var(--r-l);
}
.etunauha--tumma {
  background: var(--pinta-tumma);
  border-color: transparent;
  color: #fff;
}
.etunauha--tumma h2 { color: #fff; }
.etunauha--tumma p { color: var(--teksti-tummalla); }
/* Huutokauppanauha erottuu korostusvärillä ilman että se kilpailee tumman
   autoliikenauhan kanssa sivun lopussa. */
.etunauha--huutokauppa {
  background: var(--korostus-pinta);
  border-color: var(--korostus);
}
.etunauha__napit { display: flex; flex-wrap: wrap; gap: var(--vali-3); }
.etunauha__teksti { max-width: 62ch; }
.etunauha__teksti h2 { margin-bottom: var(--vali-2); font-size: var(--koko-xl); }
.etunauha__teksti p { margin: 0; color: var(--teksti-himmea); }
.etunauha__silma {
  display: block; margin-bottom: var(--vali-2);
  font-size: var(--koko-xs);
  font-weight: var(--paino-lihava);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--korostus);
}

/* --- Osiot -------------------------------------------------------------- */
.etuosio { margin-bottom: var(--vali-12); }
.etuosio > h2 { font-size: var(--koko-2xl); }
.etuosio__silma {
  display: block; margin-bottom: var(--vali-2);
  font-size: var(--koko-xs);
  font-weight: var(--paino-lihava);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--korostus);
}
.etuosio__kuvaus {
  max-width: 60ch;
  font-size: var(--koko-l);
  color: var(--teksti-himmea);
}
.etuosio__otsikkorivi {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--vali-4); flex-wrap: wrap;
  margin-bottom: var(--vali-5);
}
.etuosio__otsikkorivi h2 { margin: 0; }

/* --- Nostot ------------------------------------------------------------- */
.nostoruudukko {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--vali-4);
  margin-top: var(--vali-6);
}
.nosto {
  padding: var(--vali-6);
  background: var(--pinta);
  border: 1px solid var(--reuna);
  border-radius: var(--r-l);
}
.nosto__kuvake {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  margin-bottom: var(--vali-4);
  border-radius: var(--r-m);
  background: var(--korostus);
  color: #fff;
}
.nosto h3 { font-size: var(--koko-m); }
.nosto p { margin: 0; color: var(--teksti-himmea); }

/* --- Korimalli- ja merkkilinkit ----------------------------------------- */
.ruutulinkit {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--vali-3);
}
.ruutulinkki {
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--pinta);
  border: 1px solid var(--reuna);
  border-radius: var(--r-m);
  color: var(--teksti);
  font-weight: var(--paino-puolilihava);
  transition: border-color var(--nopea), background var(--nopea);
}
.ruutulinkki:hover {
  border-color: var(--korostus);
  text-decoration: none; color: var(--korostus);
}
/* Kuvan tausta on aina vaalea, koska valokuvan oma tausta on vaalea: näin
   rajaus ei näy reunana myöskään tummassa teemassa. */
.ruutulinkki__kuva {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: #f0eeec;
}
.ruutulinkki__rivi {
  display: flex; align-items: center; justify-content: space-between; gap: var(--vali-3);
  padding: var(--vali-3) var(--vali-4);
}
.ruutulinkki__maara { color: var(--teksti-himmea); font-variant-numeric: tabular-nums; }
.ruutulinkki:hover .ruutulinkki__maara { color: inherit; }

.merkkilinkit { display: flex; flex-wrap: wrap; gap: var(--vali-2); }
.merkkilinkki {
  display: inline-flex; align-items: center; gap: var(--vali-2);
  padding: 10px 18px;
  border: 1px solid var(--reuna);
  border-radius: var(--r-s);
  background: var(--pinta);
  color: var(--teksti);
  font-weight: var(--paino-puolilihava);
}
.merkkilinkki:hover {
  border-color: var(--korostus); background: var(--korostus-pinta);
  color: var(--korostus); text-decoration: none;
}
.merkkilinkki__maara {
  font-size: var(--koko-xs);
  color: var(--teksti-himmea);
  font-variant-numeric: tabular-nums;
}
.merkkilinkki:hover .merkkilinkki__maara { color: inherit; }

.etukysymykset { max-width: 68ch; }

@media (max-width: 560px) {
  .nayteikkuna { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .etunauha { padding: var(--vali-6); }
}

/* --- Ilmoitussivun toiminnot hintaosiossa ------------------------------- */
/* --- Myyjän yhteystiedot ja karttaruutu ------------------------------- */
.myyjatiedot {
  display: flex; flex-direction: column; gap: var(--vali-4);
  margin: var(--vali-4) 0;
  padding-top: var(--vali-4);
  border-top: 1px solid var(--reuna);
}

/* Otsikko ja arvo samalla rivillä, rivit tiiviisti peräkkäin: yhteystiedot
   ovat lyhyitä eikä väljä pystylista tuo niihin mitään. */
.myyjatiedot__lista { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.myyjatiedot__lista > div {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--vali-2);
}
.myyjatiedot__lista dt {
  flex: none;
  font-size: var(--koko-xs); color: var(--teksti-himmea);
  text-transform: uppercase; letter-spacing: .04em;
}
.myyjatiedot__lista dd { margin: 0; font-size: 0.9rem; overflow-wrap: anywhere; }

/* Kartta on paikallisesti piirretty kaavio, ei laattapalvelu: värit tulevat
   tokeneista, joten ruutu seuraa teemaa. */
.kartta { display: flex; flex-direction: column; gap: var(--vali-2); }
.kartta__kuva {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--reuna); border-radius: var(--r-m);
}
.kartta__maa { fill: var(--pinta-himmea); }
.kartta__kortteli rect { fill: var(--reuna); }
.kartta__katu path { stroke: var(--pinta); stroke-width: 9; fill: none; }
.kartta__katu .kartta__katu--pieni { stroke-width: 5; }
.kartta__nasta path { fill: var(--cta); }
.kartta__varjo { fill: rgba(0, 0, 0, .18); }
.kartta__nastaReika { fill: var(--pinta); }
.kartta__linkki { font-size: 0.9rem; }

.myyjasivu__yhteys .myyjatiedot { border-top: 0; padding-top: 0; margin: 0; }
@media (min-width: 720px) {
  /* Myyjäsivulla on tilaa: tiedot vasemmalle, kartta oikealle. */
  .myyjasivu__yhteys .myyjatiedot {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
    gap: var(--vali-6); align-items: start;
  }
}

/* Kapselit vasemmalle, toimintonapit oikeaan reunaan samalle riville.
   Kapeassa näkymässä napit kääntyvät kapseleiden alle. */
.ilmoitus-rivi {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--vali-3);
  margin-top: var(--vali-3);
}
.ilmoitus-rivi .pikatiedot { margin-top: 0; }
.ilmoitus-rivi .ilmoitus-toiminnot { margin: 0 0 0 auto; }

/* Ilmoituksen pikatiedot kapseleina hinnan alla. */
.pikatiedot {
  display: flex; flex-wrap: wrap; gap: var(--vali-2);
  margin-top: var(--vali-3);
}

.pikatieto {
  display: inline-flex; align-items: center; gap: var(--vali-2);
  padding: 5px var(--vali-3);
  border: 1px solid var(--reuna); border-radius: var(--r-pill);
  background: var(--pinta-himmea);
  font-size: 0.85rem; color: var(--teksti);
  white-space: nowrap;
}

.pikatieto .ikoni { color: var(--teksti-himmea); flex: none; }

.ilmoitus-toiminnot { display: flex; flex-wrap: wrap; gap: var(--vali-4); }
.ilmoitus-toiminnot .nappi { gap: var(--vali-2); }
/* Valittuna nappi näyttää tilansa täytetyllä kuvakkeella ja korostusvärillä. */
/* Valittu tila näkyy täytetystä ikonista, ei laatikosta. */
.ilmoitus-toiminnot .nappi[aria-pressed="true"] .ikoni { fill: currentColor; }

/* ==========================================================================
   18. KESKUSTELU MYYJÄN KANSSA
   ========================================================================== */
.keskustelu { display: flex; flex-direction: column; gap: var(--vali-4); }

.keskustelu__viestit {
  display: flex; flex-direction: column; gap: var(--vali-3);
  min-height: 260px;
  max-height: 46vh;
  overflow-y: auto;
  padding: var(--vali-4);
  background: var(--pinta-himmea);
  border: 1px solid var(--reuna);
  border-radius: var(--r-l);
}

.kupla { display: flex; align-items: flex-start; gap: var(--vali-3); max-width: 88%; }
/* Oma viesti tulee oikeaan reunaan ja tunnus viestin toiselle puolelle. */
.kupla--oma { align-self: flex-end; flex-direction: row-reverse; }

.kupla__tunnus {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--r-pill);
  background: var(--korostus-pinta);
  color: var(--korostus);
  font-weight: var(--paino-lihava);
  font-size: var(--koko-s);
}
.kupla--oma .kupla__tunnus { background: var(--cta); color: var(--cta-teksti); }

.kupla__sisalto {
  display: flex; flex-direction: column; gap: 3px;
  padding: var(--vali-3) var(--vali-4);
  background: var(--pinta);
  border: 1px solid var(--reuna);
  border-radius: var(--r-l);
}
.kupla__teksti { white-space: pre-wrap; }
.kupla__aika { font-size: var(--koko-xs); color: var(--teksti-himmea); }

.keskustelu__syote { display: flex; align-items: center; gap: var(--vali-2); }
.keskustelu__syote input { min-height: 48px; }
.keskustelu__laheta {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border: 0; border-radius: var(--r-m);
  background: var(--cta);
  color: var(--cta-teksti);
  cursor: pointer;
  transition: background var(--nopea);
}
.keskustelu__laheta:hover { background: var(--cta-hover); }

/* ==========================================================================
   19. HUUTOKAUPPA
   ==========================================================================
   Huutolaatikko korvaa ilmoitussivun hintalohkon kun myyntitapa on
   huutokauppa. Aikalaskureita on myös korteissa ja omien huutojen listassa,
   joten laskurin tyylit ovat komponenttikohtaisia eivätkä sidottuja
   laatikkoon. */

/* --- Aikalaskuri --------------------------------------------------------
   Tasalevyiset numerot estävät leveyden nykimisen sekunnin vaihtuessa. */
.aikalaskuri {
  display: inline-flex; align-items: baseline; gap: var(--vali-1);
  font-size: var(--koko-s);
  font-variant-numeric: tabular-nums;
  color: var(--teksti-pehmea);
  white-space: nowrap;
}
.aikalaskuri__etuliite { color: var(--teksti-himmea); }
.aikalaskuri__arvo { font-weight: var(--paino-puolilihava); }
.aikalaskuri--kiire { color: var(--varoitus); }
.aikalaskuri--kiire .aikalaskuri__etuliite { color: inherit; }
.aikalaskuri--paattynyt { color: var(--teksti-himmea); }

/* --- Merkinnät ---------------------------------------------------------- */
.merkkilappu--huutokauppa { background: var(--kauppias-pinta); color: var(--kauppias); }
.merkkilappu--kaynnissa { background: var(--onnistui-pinta); color: var(--onnistui); }
.merkkilappu--tuleva { background: var(--pinta-himmea); color: var(--teksti-himmea); }
.merkkilappu--jatkoaika { background: var(--varoitus-pinta); color: var(--varoitus); }
.merkkilappu--ei-kauppaa { background: var(--pinta-himmea); color: var(--teksti-himmea); }

/* --- Huutoalue sivupalstassa --------------------------------------------- */
/* Huutolaatikko ja huutohistoria ovat ilmoitussivun oikeassa palstassa kahtena
   erillisenä korttina, myyjätietojen yläpuolella. */
.ilmoitus-sivupalsta {
  display: grid;
  gap: var(--vali-4);
  align-content: start;
}
.huutoalue {
  display: grid;
  gap: var(--vali-4);
  align-items: start;
}
/* Kortit vastaavat omista väleistään ruudukon sisällä. */
.huutoalue .huutolaatikko,
.huutoalue .osio { margin-bottom: 0; }

/* --- Huutolaatikko ------------------------------------------------------ */
.huutolaatikko {
  margin-bottom: var(--vali-4);
  padding: var(--vali-5);
  background: var(--pinta);
  border: 1px solid var(--korostus);
  border-radius: var(--r-l);
  box-shadow: var(--varjo-1);
}
.huutolaatikko__ylarivi {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--vali-3); flex-wrap: wrap;
  margin-bottom: var(--vali-3);
}
.huutolaatikko__otsikko {
  margin: 0;
  font-size: var(--koko-s);
  color: var(--teksti-himmea);
}
.huutolaatikko__hinta {
  margin: 0;
  font-family: var(--fontti-otsikko);
  font-size: var(--koko-hinta);
  font-weight: var(--paino-lihava);
  line-height: 1.1;
  color: var(--hinta);
}
.huutolaatikko__huudot {
  margin: var(--vali-1) 0 0;
  font-size: var(--koko-s);
  color: var(--teksti-himmea);
}
.huutolaatikko__pohja {
  margin: var(--vali-3) 0 0;
  font-size: var(--koko-s);
  color: var(--teksti-himmea);
}
.huutolaatikko__pohja--ok { color: var(--onnistui); }
.huutolaatikko__pohja--kesken { color: var(--varoitus); }

.huutolaatikko__oma {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--vali-2);
  margin: var(--vali-4) 0 0;
  padding: var(--vali-2) var(--vali-3);
  border-radius: var(--r-m);
  font-size: var(--koko-s);
  font-weight: var(--paino-puolilihava);
}
.huutolaatikko__oma--johdat { background: var(--onnistui-pinta); color: var(--onnistui); }
.huutolaatikko__oma--ylihuudettu { background: var(--virhe-pinta); color: var(--virhe); }
.huutolaatikko__maksimi { font-weight: var(--paino-normaali); color: var(--teksti-pehmea); }

.huutolaatikko__ohje {
  margin: var(--vali-4) 0 0;
  font-size: var(--koko-s);
  color: var(--teksti-himmea);
}
.huutolaatikko__lomake { margin-top: var(--vali-4); }
.huutolaatikko__napit { display: flex; flex-wrap: wrap; gap: var(--vali-2); }
.huutolaatikko__napit .nappi { flex: 1 1 160px; justify-content: center; }

.huutolaatikko__tulos {
  margin: var(--vali-4) 0 0;
  padding: var(--vali-3);
  border-radius: var(--r-m);
  background: var(--pinta-himmea);
  color: var(--teksti-pehmea);
  font-size: var(--koko-s);
}
.huutolaatikko__tulos--voitto {
  background: var(--onnistui-pinta);
  color: var(--onnistui);
  font-weight: var(--paino-puolilihava);
}

/* --- Huutohistoria ------------------------------------------------------ */
.huutohistoria { margin: 0; padding: 0; list-style: none; }
.huutohistoria__tyhja { margin: 0; color: var(--teksti-himmea); }
.huutorivi {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: var(--vali-3);
  padding: var(--vali-2) 0;
  border-bottom: 1px solid var(--reuna);
  font-size: var(--koko-s);
}
.huutorivi:last-child { border-bottom: 0; }
.huutorivi__huutaja { color: var(--teksti-pehmea); }
.huutorivi__merkki { color: var(--teksti-himmea); font-size: var(--koko-xs); }
.huutorivi__summa { font-weight: var(--paino-puolilihava); font-variant-numeric: tabular-nums; }
.huutorivi__aika { color: var(--teksti-himmea); font-size: var(--koko-xs); }
.huutorivi--oma .huutorivi__huutaja { color: var(--korostus); font-weight: var(--paino-puolilihava); }
.huutorivi--automaatti { color: var(--teksti-himmea); }

/* --- Kortin huutokauppatila --------------------------------------------- */
.autokortti--huuto .autokortti__hinta { margin-bottom: var(--vali-1); }
.autokortti--huuto .aikalaskuri { display: flex; }

/* --- Omat huudot -------------------------------------------------------- */
.omahuuto__tilanne {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--vali-3);
  margin-top: var(--vali-1);
  font-size: var(--koko-s);
}
.huutotilanne { font-weight: var(--paino-puolilihava); color: var(--teksti-pehmea); }
.huutotilanne--johdat { color: var(--onnistui); }
.huutotilanne--ylihuudettu { color: var(--virhe); }

/* --- Sivuotsikon kuvaus ------------------------------------------------- */
.sivuotsikko__kuvaus {
  margin: var(--vali-1) 0 0;
  color: var(--teksti-himmea);
  font-size: var(--koko-s);
}

@media (max-width: 560px) {
  .huutolaatikko { padding: var(--vali-4); }
  .huutorivi { grid-template-columns: 1fr auto; }
  /* Kapealla ruudulla aika siirtyy huutajan alle omalle rivilleen. */
  .huutorivi__aika { grid-column: 1; grid-row: 2; }
}

/* Sivuotsikon toimintonapit omalla rivillään kapealla ruudulla. */
.sivuotsikko__toiminnot {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--vali-2);
}