/* Tilit, kori ja kirjautumisikkuna. Käytetään tili.php:ssä, kori.php:ssä ja sovituksessa. */
.tili{padding:clamp(28px,5vw,64px) 0 clamp(48px,7vw,96px)}
.tili h1{font-size:clamp(28px,4.4vw,46px);margin-bottom:14px}
.tili h2{font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin:0 0 10px;color:var(--purple)}
.tili p{max-width:70ch}
.tili-osa{border-top:1px solid var(--line);padding:22px 0}
.tili-rivi{margin:0 0 10px}
.tili-isot{font-size:20px;margin:0 0 8px}
.tili-isot b{font-size:30px}
.tili-pieni{font-size:13px;color:var(--muted)}
.tili-ilmoitus{padding:12px 16px;background:#F1E8F0;border-left:4px solid var(--purple);margin:14px 0}
.tili-ilmoitus.ok{background:#E9F2EA;border-color:#2F7A3B}
.tili-ilmoitus.virhe{background:#F8E9E9;border-color:#8C1F1F}
.tili-lomake{display:grid;gap:12px;max-width:460px}
.tili-lomake label{display:grid;gap:4px;font-size:15px}
.tili-lomake label.check{display:flex;gap:10px;align-items:flex-start}
.tili-lomake input:not([type=checkbox]),.tili-lomake textarea{font:inherit;padding:10px 12px;border:1px solid #BDB8BD;background:#fff;width:100%}
.tili-lomake input[type=checkbox]{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--purple)}
.tili-viesti{margin:0;font-size:15px;color:var(--muted);min-height:1.4em}
.tili-viesti.virhe{color:#8C1F1F}
.tili-vaihto{margin:6px 0 0;font-size:15px}
.tili-linkki{background:none;border:0;padding:0;font:inherit;font-size:15px;color:var(--purple);text-decoration:underline;cursor:pointer}
.tili-linkki.vaara,.btn.vaara{color:#8C1F1F}
.btn.vaara{border-color:#8C1F1F}
.tili-esikatselu{font-size:14px;padding:8px 12px;background:#FFF6DD;border-left:4px solid #C79A00;max-width:460px}
.tili-omat{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.tili-kuva{margin:0;background:var(--grey)}
.tili-kuva img{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:#E4E1DE}
.tili-kuva figcaption{padding:8px 10px 10px;display:grid;gap:6px;font-size:14px}
.tili-kuva input{font:inherit;font-size:14px;padding:6px 8px;border:1px solid #BDB8BD;width:100%}
.tili-napit{display:flex;gap:12px;flex-wrap:wrap;align-items:baseline}
.kori-lista{display:grid;gap:18px;margin:16px 0 28px}
.kori-tuote{display:grid;grid-template-columns:minmax(120px,220px) 1fr;gap:18px;border:1px solid var(--line);padding:14px;background:#fff}
.kori-tuote img{display:block;width:100%;height:auto;background:var(--grey)}
.kori-tuote h3{margin:0 0 6px;font-size:18px}
.kori-tuote p{margin:0 0 6px}
.kori-hinta{font-weight:600}
.kori-tuote pre{white-space:pre-wrap;font:inherit;font-size:14px;background:var(--grey);padding:10px 12px;margin:6px 0 0}
@media (max-width:560px){.kori-tuote{grid-template-columns:1fr}}

/* Kirjautumisikkuna */
.tili-dialogi{width:min(94vw,460px);max-height:92vh;overflow:auto;padding:22px 22px 26px;border:0;background:#fff}
.tili-dialogi::backdrop{background:rgba(0,0,0,.6)}
.tili-dialogi h2{font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin:0 0 14px;color:var(--purple)}
.tili-sulje{position:absolute;top:8px;right:10px;border:0;background:none;font-size:28px;line-height:1;cursor:pointer;color:var(--muted)}
.tili-dialogi .small{font-size:14px;color:var(--muted);margin:0}

/* Tilipalkki sovituksessa */
.tilipalkki{margin:12px 0;padding:12px 14px;background:var(--grey);font-size:15px;display:grid;gap:8px}
.tilipalkki p{margin:0}
.tilipalkki .tili-napit{align-items:center}