:root {
  --navy: #12284c; --navy-2: #1d3a6b; --oranssi: #ff8a1f; --oranssi-2: #e8760c;
  --tausta: #f7f7f8; --pinta: #fff; --teksti: #1d2433; --himmea: #5d6575; --raja: #e2e5ea;
  --vihrea: #1f7a3d; --vihrea-tausta: #e7f5ec; --punainen: #b3261e; --punainen-tausta: #fdecea;
  --keltainen-tausta: #fff6e5; --keltainen-raja: #f2c26b;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Open Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; color: var(--teksti); background: var(--tausta); line-height: 1.5; }
a { color: var(--navy-2); }
h1 { color: var(--navy); font-size: 1.8rem; line-height: 1.2; margin: .4em 0 .5em; }
h2 { color: var(--navy); font-size: 1.2rem; margin: 1.6em 0 .6em; }
.sisalto { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
main.sisalto { padding-top: 16px; padding-bottom: 48px; min-height: 60vh; }

.ylapalkki { background: var(--pinta); border-bottom: 1px solid var(--raja); }
.palkki { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; }
.logo { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.25rem; color: var(--navy); text-decoration: none; }
.logo-h { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--navy); color: var(--oranssi); }
.logo-hk { font-weight: 600; color: var(--oranssi-2); }
nav { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-weight: 600; font-size: .95rem; }
nav a { color: var(--navy); text-decoration: none; }
nav a:hover { text-decoration: underline; }
.inline { display: inline; margin: 0; }
.linkki { background: none; border: 0; padding: 0; color: var(--himmea); font: inherit; cursor: pointer; text-decoration: underline; }
.dev { background: #2b2b2b; color: #ffd27a; text-align: center; font-size: .85rem; padding: 4px 16px; }

.nappi { display: inline-block; background: var(--oranssi); color: #fff; border: 0; border-radius: 8px; padding: 11px 20px; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; text-align: center; }
.nappi:hover { background: var(--oranssi-2); }
.nappi.pieni { padding: 6px 12px; font-size: .9rem; }
.nappi.leve { display: block; width: 100%; }
.nappi.toissijainen { background: var(--pinta); color: var(--navy); border: 1px solid var(--raja); }
.nappi.toissijainen:hover { background: var(--tausta); }
nav .nappi { color: #fff; }

.ilmoitus { border-radius: 8px; padding: 10px 14px; margin: 0 0 14px; }
.ilmoitus.ok { background: var(--vihrea-tausta); color: var(--vihrea); }
.ilmoitus.virhe { background: var(--punainen-tausta); color: var(--punainen); }
.huomio { background: var(--keltainen-tausta); border: 1px solid var(--keltainen-raja); border-radius: 8px; padding: 12px 14px; margin: 12px 0; font-size: .95rem; }
.virheteksti { color: var(--punainen); font-weight: 600; }
.tyhja, .pieni-teksti, small { color: var(--himmea); }
.pieni-teksti { font-size: .88rem; }
small { display: block; font-size: .8rem; font-weight: 400; }

.esittely { background: var(--navy); color: #fff; border-radius: 12px; padding: 24px; margin-bottom: 8px; }
.esittely h1 { color: #fff; margin-top: 0; }
.esittely p { margin: 0; max-width: 60ch; color: #dfe6f3; }

.ryhmat { display: flex; gap: 8px; overflow-x: auto; padding: 16px 0 4px; margin-bottom: -8px; scrollbar-width: thin; }
.ryhma { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: var(--pinta); border: 1px solid var(--raja); color: var(--navy); font-weight: 600; font-size: .92rem; text-decoration: none; white-space: nowrap; }
.ryhma span { font-size: .78rem; font-weight: 700; color: var(--himmea); background: var(--tausta); border-radius: 999px; padding: 0 7px; }
.ryhma:hover { border-color: var(--navy-2); }
.ryhma.valittu { background: var(--navy); border-color: var(--navy); color: #fff; }
.ryhma.valittu span { background: rgba(255,255,255,.18); color: #fff; }
.ryhma.tyhjaryhma { color: var(--himmea); }
.ryhmanimi { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--oranssi-2); margin-bottom: 2px; }
.ruudukko { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.ruudukko.himmea .kortti { opacity: .75; }
.kortti { display: flex; flex-direction: column; background: var(--pinta); border-radius: 10px; overflow: hidden; text-decoration: none; color: inherit; box-shadow: 0 1px 3px rgba(18,40,76,.12); transition: box-shadow .15s; }
.kortti:hover { box-shadow: 0 4px 14px rgba(18,40,76,.18); }
.kortti-kuva { position: relative; aspect-ratio: 4 / 3; background: #e9ecf1; }
.kortti-kuva img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kortti-kuva .merkki { position: absolute; left: 8px; top: 8px; }
.kortti-teksti { padding: 10px 12px 14px; }
.kortti h3 { font-size: 1rem; margin: 0 0 6px; color: var(--navy); line-height: 1.3; }
.hinta { font-size: 1.3rem; font-weight: 800; color: var(--navy); }
.merkki { display: inline-block; font-size: .75rem; font-weight: 700; border-radius: 999px; padding: 2px 9px; }
.merkki.hl { background: var(--navy); color: #fff; }
.merkki.harr { background: #fff; color: #7a4a00; border: 1px solid var(--keltainen-raja); }

.murupolku { font-size: .85rem; color: var(--himmea); margin: 0; }
.kohde { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.galleria #paakuva { width: 100%; border-radius: 10px; background: #e9ecf1; display: block; }
.pikkukuvat { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.pikkukuva { padding: 0; border: 2px solid transparent; border-radius: 6px; background: none; cursor: pointer; }
.pikkukuva.valittu { border-color: var(--oranssi); }
.pikkukuva img { width: 72px; height: 54px; object-fit: cover; display: block; border-radius: 4px; }
.tiedot h1 { margin-top: 0; }
.myyja { display: flex; align-items: center; gap: 8px; color: var(--himmea); font-size: .92rem; }
.tarjouslaatikko { background: var(--pinta); border-radius: 10px; padding: 16px; box-shadow: 0 1px 3px rgba(18,40,76,.12); margin: 12px 0; }
.rivi { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 0; }
.iso { font-size: 1.7rem; color: var(--navy); }
.tarjouslomake { margin-top: 12px; border-top: 1px solid var(--raja); padding-top: 12px; }
.tarjouslomake label { font-weight: 600; display: block; margin-bottom: 6px; }
.syote-rivi { display: flex; gap: 8px; align-items: center; }
.syote-rivi input { flex: 1; min-width: 0; font-size: 1.2rem; padding: 9px 10px; border: 1px solid var(--raja); border-radius: 8px; }
.yksikko { font-weight: 700; color: var(--himmea); }
.kuvaus { white-space: pre-line; }
.takuu { background: var(--pinta); border-left: 4px solid var(--vihrea); border-radius: 8px; padding: 4px 14px; margin: 16px 0; font-size: .93rem; }
.takuu p { margin: 8px 0; }
.taulukko { width: 100%; border-collapse: collapse; background: var(--pinta); border-radius: 8px; overflow: hidden; font-size: .93rem; }
.taulukko th, .taulukko td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--raja); vertical-align: top; }
.taulukko th { background: #eef1f6; color: var(--navy); font-weight: 700; }
.taulukko tr.oma td { background: var(--vihrea-tausta); }
.toiminnot form { display: inline-block; margin: 0 6px 4px 0; }
.hylkays input, .maksulomake input { padding: 5px 8px; border: 1px solid var(--raja); border-radius: 6px; font: inherit; font-size: .85rem; }
.maksulomake { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
code { font-size: .8rem; word-break: break-all; }
.otsikkorivi { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.lista li { margin-bottom: 4px; }

.lomake { background: var(--pinta); border-radius: 10px; padding: 20px; max-width: 820px; box-shadow: 0 1px 3px rgba(18,40,76,.12); }
.lomake.kapea { max-width: 420px; }
.lomake label { display: block; font-weight: 600; margin-bottom: 14px; }
.lomake input:not([type=checkbox]):not([type=radio]):not([type=file]), .lomake textarea, .lomake select { display: block; width: 100%; margin-top: 4px; padding: 9px 10px; border: 1px solid var(--raja); border-radius: 8px; font: inherit; font-weight: 400; }
.lomake fieldset { border: 1px solid var(--raja); border-radius: 8px; padding: 12px 14px 4px; margin: 0 0 16px; }
.lomake fieldset[disabled] { opacity: .6; }
.lomake legend { font-weight: 700; color: var(--navy); padding: 0 6px; }
.kaksi { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.valinta { display: flex !important; gap: 8px; align-items: flex-start; font-weight: 400 !important; }
.valinnat { margin-bottom: 14px; }
.valinnat .valinta { display: inline-flex !important; margin: 0 12px 0 0; }
.napit { display: flex; gap: 10px; flex-wrap: wrap; }
.kuvavalinta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.kuvavalinta label { font-weight: 400; font-size: .85rem; margin: 0; }
.kuvavalinta img { width: 110px; height: 82px; object-fit: cover; border-radius: 6px; display: block; }

.teksti { max-width: 760px; background: var(--pinta); border-radius: 10px; padding: 8px 24px 24px; }
.teksti li { margin-bottom: 6px; }
.hyvaksynta { margin-top: 20px; }

.alapalkki { border-top: 1px solid var(--raja); background: var(--pinta); font-size: .85rem; color: var(--himmea); padding: 18px 0; }

@media (max-width: 800px) {
  .kohde { grid-template-columns: 1fr; gap: 12px; }
  .kaksi { grid-template-columns: 1fr; }
  h1 { font-size: 1.45rem; }
  .taulukko { font-size: .85rem; }
  .taulukko th, .taulukko td { padding: 6px; }
  nav { gap: 10px 14px; }
}