/* ============================================================
   charms.ee — „kihiline kleeps”
   Disainikeel: paks kontuur + kihiline kõva vari, nagu mitme-
   värviline prinditud märk. Kirjad: Unbounded (pealkirjad) +
   IBM Plex Sans (sisu). Soe paberitaust õrnade prindikihi-
   joontega.
   ============================================================ */

:root{
  --paber:#f5efe3;
  --paber-tume:#ebe2cf;
  --valge:#fffdf7;
  --tint:#22252b;
  --punane:#d92b1c;
  --punane-tume:#b31f12;
  --sinine:#2b6cb0;
  --kollane:#e8a91c;
  --roheline:#2f7d4f;
  --hall:#5f5949;                 /* oli #6d6657 = 4,97:1 paberil; nyyd >= 5,5:1 */
  --joon:2px solid var(--tint);
  --vari:5px 6px 0 var(--tint);
  --vari-suur:9px 11px 0 var(--tint);
  --nurk:14px;
  --kiri-pea:"Unbounded", "Arial Black", sans-serif;
  --kiri-sisu:"IBM Plex Sans", "Segoe UI", sans-serif;
  /* LIIKUMIS-TOKENID (2026-09): viis kestust ja kolm koverat - enne oli 31 kestust ja 5 vedrut.
     --t-1 vajutus/hover - --t-2 lyliti/kiip - --t-3 paneel/dialoog/toast - --t-4 ploki
     ilmumine/foto - --t-5 hero hajumine ja pidu. --e-hype AINULT kleepsu-peole (toast,
     tarne tais, korvi tants); koik muu --e-valja; asendi liikumine --e-sisse-valja. */
  --t-1:120ms; --t-2:200ms; --t-3:320ms; --t-4:560ms; --t-5:900ms;
  --e-valja:cubic-bezier(.2,.7,.2,1);
  --e-sisse-valja:cubic-bezier(.65,0,.35,1);
  --e-hype:cubic-bezier(.34,1.56,.64,1);
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  font:16px/1.65 var(--kiri-sisu);
  color:var(--tint);
  background:
    repeating-linear-gradient(0deg,
      transparent 0 22px,
      rgba(34,37,43,.045) 22px 23px),
    var(--paber);
}

img{max-width:100%;height:auto;display:block}
a{color:var(--punane-tume)}
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--sinine);outline-offset:2px}

main{max-width:1240px;margin:0 auto;padding:32px 20px 80px}

h1,h2,h3{font-family:var(--kiri-pea);line-height:1.2;letter-spacing:-.01em}
h1{font-size:clamp(1.9rem,4.6vw,3.2rem);font-weight:800;margin:0 0 18px}
h2{font-size:clamp(1.25rem,2.6vw,1.7rem);font-weight:700;margin:56px 0 22px;position:relative;padding-bottom:12px}
h2::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:7px;
  background:var(--punane);border-radius:4px;box-shadow:3px 3px 0 var(--tint)}
h3{font-size:1.02rem;font-weight:600;margin:0 0 6px}

/* ---------- päis ---------- */

.pais{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
  /* Täislaius: logo on alati vasakus nurgas ja menüü paremas, ka laial
     ekraanil — kitsendatud kastis triiviks logo ekraani keskele. */
  max-width:none;margin:0;padding:20px 28px;
}
.logo{
  font-family:var(--kiri-pea);font-weight:800;font-size:1.3rem;
  text-decoration:none;color:var(--tint);
  background:var(--valge);border:var(--joon);border-radius:12px;
  padding:8px 16px;box-shadow:4px 4px 0 var(--tint);
  transform:rotate(-1.5deg);display:inline-block;
  transition:transform var(--t-1) var(--e-valja), box-shadow var(--t-1) var(--e-valja);
}
.logo span{color:var(--punane)}
.logo img{display:block;height:36px;width:auto}

.pais nav{display:flex;gap:6px 14px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.pais-lingid{display:flex;gap:2px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.pais-tegevused{display:flex;gap:8px;align-items:center;flex:none}

.pais nav a{
  font-weight:600;font-size:.82rem;text-transform:uppercase;
  letter-spacing:.07em;text-decoration:none;color:var(--tint);
  padding:10px 14px;border-radius:10px;border:2px solid transparent;
  transition:color var(--t-1) var(--e-valja),background-color var(--t-1) var(--e-valja),transform var(--t-1) var(--e-valja),box-shadow var(--t-1) var(--e-valja);
}
/* Korvinupp elab samasuguses kleepsus nagu keelenupud — joonistatud korv sees. */
.pais nav a.korv-link{
  background:var(--kollane);border:2px solid var(--tint);border-radius:12px;
  box-shadow:3px 3px 0 var(--tint);position:relative;
  padding:5px 9px;display:inline-flex;align-items:center;
}
.korv-ikoon{display:block}
/* animeeritud korvinupp: video joonistab ise kleepsu-padja, ääred maha */
.korv-video{display:none}
/* Sprite-korv: sama tantsuanimatsioon PNG-kaadritena (iOS ei mängi alfa-webm-i).
   25 kaadrit reas; puhkeolekus esimene kaader, .tantsib mängib korra läbi. */
.korv-sprite{display:none}
.sprite-korv .korv-ikoon{display:none}
.korv-link.sprite-korv{background:transparent;border:none;box-shadow:none;padding:2px 4px}
.sprite-korv .korv-sprite{
  display:block;width:52px;height:52px;
  background:url(/pildid/korv-sprite.png) 0 0/1300px 52px no-repeat;
}
.sprite-korv.tantsib .korv-sprite{animation:korv-sprite var(--t-5) steps(24) forwards}
@keyframes korv-sprite{to{background-position:-1248px 0}}
.sprite-korv .korv-mark{position:absolute;top:4px;right:-2px}
#korv-ujuv.sprite-korv .korv-sprite{width:46px;height:46px;background-size:1150px 46px}
#korv-ujuv.sprite-korv.tantsib .korv-sprite{animation:korv-sprite-u var(--t-5) steps(24) forwards}
@keyframes korv-sprite-u{to{background-position:-1104px 0}}
.pais nav a.korv-link.video-korv{background:transparent;border:none;
  box-shadow:none;padding:0}
.korv-link.video-korv .korv-ikoon{display:none}
.korv-link.video-korv .korv-video{display:block;width:52px;height:52px;
  margin:-6px -2px -4px}
.pais nav a.korv-link.video-korv .korv-mark{top:4px;right:-2px}
/* Väike number korvi ülanurgas — peal, aga korvi ei peida. */
.pais nav a.korv-link .korv-mark{
  position:absolute;top:-2px;right:-6px;margin:0;
  min-width:19px;height:19px;font-size:.68rem;border-radius:10px;
}
.korv-mark{
  display:inline-grid;place-items:center;margin-left:7px;
  min-width:22px;height:22px;padding:0 5px;border-radius:11px;
  background:var(--punane);color:#fff;font-size:.72rem;font-weight:700;
  border:2px solid var(--tint);
}
.keeled{display:flex;gap:4px;margin-left:4px}
.keel{
  font-family:var(--kiri-pea);font-weight:700;font-size:.72rem;
  text-decoration:none;color:var(--tint);
  background:var(--valge);border:var(--joon);border-radius:8px;
  padding:5px 9px;box-shadow:2px 2px 0 var(--tint);
  transition:transform var(--t-1) var(--e-valja), box-shadow var(--t-1) var(--e-valja);
}
.keel.aktiivne{background:var(--tint);color:var(--valge)}/* Aktiivne keel peab ka hoverdades tume jääma — muidu võtab üldine nupu
   hover-taust võimust ja hele tekst kaob heleda tausta sisse ära. */
.keel.aktiivne:focus, .keel.aktiivne:focus-visible, .keel.aktiivne:active{background:var(--tint);color:var(--valge)}
/* Kogus ilmub alles siis, kui lendav müts kohale jõuab. */
/* Number on kogu aeg näha (peidetud algusseis jättis korvi hetkeks tühjaks);
   mütsi saabudes teeb ta vaid rõõmsa hüppe. */
.korv-link.hyples .korv-mark{animation:mark-saabub var(--t-4) cubic-bezier(.2,1.5,.4,1) 1.7s}
@keyframes mark-saabub{
  0%{transform:scale(1)}
  55%{transform:scale(1.5) rotate(-8deg)}
  100%{transform:scale(1)}
}

.toast{
  position:fixed;right:20px;bottom:20px;z-index:60;
  display:flex;gap:12px;align-items:center;max-width:320px;
  background:var(--valge);border:var(--joon);border-radius:14px;
  box-shadow:6px 7px 0 var(--tint);padding:14px 16px;
  animation:toast-sisse var(--t-3) cubic-bezier(.2,1.4,.4,1) backwards;
}
.toast-ikoon{font-size:1.6rem}
.toast a{font-weight:700}
.toast-sulge{
  background:none;border:none;box-shadow:none;color:var(--hall);
  font-size:1.3rem;padding:2px 6px;line-height:1;cursor:pointer;
}.toast-sulge:active{transform:none;box-shadow:none;color:var(--tint)}
.toast.kaob{animation:toast-valja var(--t-4) var(--e-valja) forwards}
@keyframes toast-sisse{from{opacity:0;transform:translateY(24px) rotate(2deg)}}
@keyframes toast-valja{to{opacity:0;transform:translateY(16px)}}

.lendav-tapp{
  position:fixed;z-index:61;line-height:0;
  /* Aeglane lend ja läbipaistvus alles päris lõpus — kasutaja peab jõudma
     ÄRA TUNDA, mis korvi lendab (müts vs charmi embleem). */
  transition:transform 2.6s cubic-bezier(.42,.02,.38,1), opacity var(--t-3) var(--e-valja) 2.3s;
  pointer-events:none;filter:drop-shadow(4px 5px 0 rgba(34,37,43,.3));
}
/* Ümmargusel logo-märgil oli kõva nihkes vari nagu teine hall ketas taga —
   ümaral kujul loeb see mustuse, mitte sügavusena. */
.lendav-tapp.umar{filter:drop-shadow(0 3px 5px rgba(34,37,43,.22))}
/* Kujunduste teemafiltrid (nt „Lastele", „Lemmikloomale") otsingu all. */
.disainisildid{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 4px}
.siltnupp{
  padding:5px 12px;border-radius:999px;border:var(--joon);background:#fff;
  color:var(--tint);   /* üldine button-stiil andis VALGE teksti valgel taustal! */
  font-family:var(--kiri-pea);font-weight:700;font-size:.78rem;cursor:pointer;
  box-shadow:2px 2px 0 var(--tint);
}
.siltnupp.valitud{background:var(--tint);color:#fff}
@media (max-width:640px){
  .disainisildid{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;margin-right:-4px}
  .siltnupp{flex:0 0 auto}
}

/* Kogusemärk lendab tootega kaasa — nii on näha, MITU tükki teele läks. */
.lendav-tapp .lennumark{
  position:absolute;top:-6px;right:-6px;margin:0;line-height:1;
  font-size:.82rem;min-width:26px;height:26px;border-radius:13px;
  box-shadow:0 2px 4px rgba(34,37,43,.28);
}
/* Korvi number kasvab alles siis, kui lend kohale jõuab — väike hüpe kinnitab. */
.korv-mark.kasvab{animation:mark-kasvab var(--t-4) var(--e-valja)}
@keyframes mark-kasvab{
  0%{transform:scale(1)}35%{transform:scale(1.45)}70%{transform:scale(.92)}100%{transform:scale(1)}
}

/* ---------- kangelane ---------- */

.kangelane{
  display:grid;grid-template-columns:1.05fr .95fr;gap:44px;
  align-items:center;padding:36px 0 30px;
}
.kangelane h1 .rohk{color:var(--punane);
  text-shadow:3px 3px 0 rgba(34,37,43,.16)}
.kangelane p{font-size:1.06rem;max-width:46ch;color:#3d4048}

/* Hero on nahtav ESIMESEL kaadril: sisseanimatsioonid maha (LCP + viie sekundi test:
   esimene pilt, mida kylastaja naeb, peab olema valmis, mitte hajuv). */

@keyframes ilmub{from{opacity:0;transform:translateY(16px)}}
@keyframes ilmub-foto{from{opacity:0;transform:rotate(5deg) translateY(20px)}}

/* Portree-hero: 520 lai oleks ~690 kõrge ja matab teksti — 430 hoiab tasakaalu. */
.foto{position:relative;transform:rotate(2deg);max-width:430px;justify-self:center}
.foto img{
  border:8px solid var(--valge);outline:var(--joon);
  border-radius:var(--nurk);box-shadow:var(--vari-suur);
}
/* Hero-slaidid: pildid üksteise peal, aktiivne hajub sisse. Kõrgus tuleb
   esimesest pildist (voolus), ülejäänud on absoluutsed — raam ei hüppa.
   Raam (valge äär + vari) elab KONTEINERIL, mitte pildil — pilt suumib
   raami SEES ja äär püsib paigal. */
.hero-slaidid{
  position:relative;line-height:0;overflow:hidden;
  border:8px solid var(--valge);outline:var(--joon);
  border-radius:var(--nurk);box-shadow:var(--vari-suur);
}
.hero-slaidid img{
  width:100%;height:auto;opacity:0;transition:opacity var(--t-5) var(--e-valja);
  border:none;outline:none;border-radius:0;box-shadow:none;
  transform-origin:50% 26%;             /* müts on kaadri ülakolmandikus */
}
.hero-slaidid img:not(:first-child){position:absolute;inset:0;height:100%;object-fit:cover}
.hero-slaidid img.aktiivne{opacity:1}
/* Ken Burns: slaid algab kaugelt ja suumib slaidi jooksul rahulikult mütsi
   peale. Kestus = slaidivahetus + hajumisvaru, et suum ei "hüppaks" lõpus. */
@media (prefers-reduced-motion: no-preference){
  .hero-slaidid img.aktiivne{animation:hero-suum var(--suumaeg,7.4s) linear forwards}
}
@keyframes hero-suum{from{transform:scale(1)}to{transform:scale(var(--suum,1.14))}}
.foto .silt{
  position:absolute;top:-16px;right:-10px;
  font-family:var(--kiri-pea);font-weight:600;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.05em;
  background:var(--kollane);border:var(--joon);border-radius:10px;
  padding:7px 12px;box-shadow:3px 4px 0 var(--tint);
  transform:rotate(4deg);
}

.teed{display:flex;gap:16px;flex-wrap:wrap;margin-top:26px}

/* ---------- nupud ---------- */

.nupp{
  display:inline-block;font-family:var(--kiri-sisu);font-weight:700;
  font-size:.95rem;text-decoration:none;cursor:pointer;
  padding:14px 26px;border-radius:12px;border:var(--joon);
  box-shadow:4px 5px 0 var(--tint);
  transition:transform var(--t-1) var(--e-valja), box-shadow var(--t-1) var(--e-valja), background-position var(--t-3) var(--e-valja);
}
.nupp-taidetud{
  background:linear-gradient(110deg, var(--punane) 0 42%, var(--roheline) 58% 100%);
  background-size:260% 100%;background-position:0% 0;color:#fff;
}
.nupp-tyhi{
  background:linear-gradient(110deg, var(--valge) 0 42%, var(--roheline) 58% 100%);
  background-size:260% 100%;background-position:0% 0;color:var(--tint);
}
.nupp:active{transform:translate(2px,3px);box-shadow:1px 2px 0 var(--tint)}

button{
  font:700 .95rem var(--kiri-sisu);cursor:pointer;color:#fff;
  padding:14px 26px;border-radius:12px;border:var(--joon);
  background:linear-gradient(110deg, var(--punane) 0 42%, var(--roheline) 58% 100%);
  background-size:260% 100%;background-position:0% 0;
  box-shadow:4px 5px 0 var(--tint);
  transition:transform var(--t-1) var(--e-valja), box-shadow var(--t-1) var(--e-valja), background-position var(--t-3) var(--e-valja);
}
button:active{transform:translate(2px,3px);box-shadow:1px 2px 0 var(--tint)}

/* ---------- kaardid / ruudustik ---------- */

.ruudustik{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:26px}

.kaart{
  background:var(--valge);border:var(--joon);border-radius:var(--nurk);
  overflow:hidden;box-shadow:var(--vari);
  transition:transform var(--t-1) var(--e-valja), box-shadow var(--t-1) var(--e-valja);
}
.ruudustik .kaart:nth-child(odd){transform:rotate(-.6deg)}
.ruudustik .kaart:nth-child(even){transform:rotate(.6deg)}
.ruudustik .kaart{animation:ilmub var(--t-4) var(--e-valja) backwards}
.ruudustik .kaart:nth-child(2){animation-delay:.07s}
.ruudustik .kaart:nth-child(3){animation-delay:.14s}
.ruudustik .kaart:nth-child(4){animation-delay:.21s}
.ruudustik .kaart:nth-child(5){animation-delay:.28s}
.ruudustik .kaart:nth-child(n+6){animation-delay:.34s}
.kaart img{width:100%;aspect-ratio:4/3;object-fit:cover;border-bottom:var(--joon)}
.kaart-sisu{padding:16px 18px 18px}
/* Kaardi nupp on ALATI allservas, sama joone peal naabritega — teksti pikkus
   ei tohi nuppu üles-alla lükata. Kaart venib rea kõrgeimaga sama pikaks. */
.ruudustik .kaart,.wizard .kaart{display:flex;flex-direction:column}
.ruudustik .kaart-sisu,.wizard .kaart-sisu{flex:1;display:flex;flex-direction:column}
.ruudustik .kaart-sisu > :last-child,
.wizard .kaart-sisu > :last-child{margin-top:auto;margin-bottom:0}
.kaardi-nupurida{padding-top:10px}
.kaart p{margin:0;color:var(--hall);font-size:.9rem}
.hind{font-family:var(--kiri-pea);font-weight:700;color:var(--tint);
  font-size:1.05rem;margin-top:8px !important}

/* ---------- sammud (kuidas tellimine käib) ---------- */

.sammud{
  list-style:none;counter-reset:samm;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
}
.sammud li{
  counter-increment:samm;position:relative;
  background:var(--valge);border:var(--joon);border-radius:var(--nurk);
  box-shadow:var(--vari);padding:54px 20px 20px;font-size:.95rem;
}
.sammud li::before{
  content:counter(samm);
  position:absolute;top:-16px;left:16px;
  font-family:var(--kiri-pea);font-weight:800;font-size:1.1rem;
  width:44px;height:44px;display:grid;place-items:center;
  background:var(--sinine);color:#fff;border:var(--joon);
  border-radius:50%;box-shadow:3px 3px 0 var(--tint);
}
.sammud li:nth-child(2)::before{background:var(--kollane);color:var(--tint)}
.sammud li:nth-child(3)::before{background:var(--punane)}

/* ---------- vormid ---------- */

form.vorm{max-width:600px;display:grid;gap:18px;
  background:var(--valge);border:var(--joon);border-radius:var(--nurk);
  box-shadow:var(--vari);padding:26px 24px;margin-top:8px}
label{font-weight:600;font-size:.88rem;display:block;margin-bottom:5px}
input,textarea,select{
  width:100%;padding:12px 14px;font:inherit;color:var(--tint);
  background:var(--paber);border:var(--joon);border-radius:10px;
  transition:box-shadow var(--t-1) var(--e-valja), background var(--t-1) var(--e-valja);
}
input:not([type=radio]):not([type=checkbox]):focus,textarea:focus,select:focus{
  background:#fff;box-shadow:3px 3px 0 var(--punane);outline:none}
textarea{min-height:130px;resize:vertical}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--punane);transform:scale(1.25);margin-right:6px}
input[type=file]{background:transparent;border:2px dashed var(--tint);cursor:pointer}

/* ---------- teated ---------- */

.teade{
  padding:14px 18px;border:var(--joon);border-radius:12px;
  box-shadow:4px 4px 0 var(--tint);margin:0 0 20px;font-weight:600;
}
.teade-ok{background:#dff2e4;border-color:var(--roheline);
  box-shadow:4px 4px 0 var(--roheline)}
.teade-viga{background:#fdeae7;border-color:var(--punane-tume);
  box-shadow:4px 4px 0 var(--punane-tume)}

/* ---------- tabelid (ostukorv) ---------- */

table{background:var(--valge);border:var(--joon);border-radius:var(--nurk);
  box-shadow:var(--vari);border-collapse:separate;border-spacing:0;
  overflow:hidden;width:100%}
table td{padding:12px 14px !important;border-bottom:1px solid var(--paber-tume)}
table tr:last-child td{border-bottom:none}

.kustuta-nupp{
  background:none;border:none;box-shadow:none;padding:8px;
  color:var(--punane-tume);cursor:pointer;border-radius:8px;
  display:inline-grid;place-items:center;
}
.kustuta-nupp:active{transform:scale(.9);box-shadow:none}

/* ---------- jalus ---------- */

.jalus{
  background:var(--tint);color:var(--paber);
  border-top:6px solid var(--punane);
  margin-top:64px;padding:36px 20px 42px;text-align:center;
  font-size:.9rem;
}
.jalus p{margin:6px 0;max-width:1100px;margin-left:auto;margin-right:auto}
.jalus a{color:var(--kollane)}

/* ---------- kujundaja ---------- */

.kujundaja-kest{display:grid;grid-template-columns:215px 1fr;gap:28px;align-items:start;margin-top:10px}

.kategooriad{display:grid;gap:10px;position:sticky;top:16px}
.kategooria{
  display:block;text-decoration:none;color:var(--tint);font-weight:600;
  font-size:.88rem;background:var(--valge);border:var(--joon);
  border-radius:12px;padding:12px 14px;box-shadow:3px 3px 0 var(--tint);
  transition:transform var(--t-1) var(--e-valja), box-shadow var(--t-1) var(--e-valja);
}
/* Mudelinupul on hind kohe näha — nii ei pea eraldi tootelehele minema. */
.kategooria{display:flex;align-items:center;justify-content:space-between;gap:10px}
.kategooria-hind{font-weight:800;font-size:.82rem;opacity:.75;white-space:nowrap}
.kategooria.aktiivne .kategooria-hind{opacity:1}
.kategooria.aktiivne{background:var(--tint);color:var(--paber);box-shadow:3px 3px 0 var(--punane)}

.kategooriad-rida{position:static;display:flex;flex-wrap:wrap;gap:10px;margin:0 0 26px}

.kujundaja-paigutus{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:30px;align-items:start}
.kujundaja-paigutus > *,.valikud-veerg > *{min-width:0}
.kirjeldus{margin:0;font-size:.92rem;color:#3d4048;border-bottom:1px solid var(--paber-tume);padding-bottom:14px}

.eelvaade svg{display:block;width:100%;height:auto;padding:6%}

.kylgvaade{margin:16px 0 0}
.kylgvaade img{
  border:var(--joon);border-radius:var(--nurk);box-shadow:4px 5px 0 var(--tint);
  background:#fff;max-width:290px;
}
.kylgvaade figcaption{font-size:.78rem;color:var(--hall);margin-top:6px}

.pisipildid{display:flex;gap:14px;margin-top:16px}
/* kuni värvi pole valitud, pole pisipilte — siis ei riputa ka vihjelauset */
.pisipildid:not(:has(.pisi:not([hidden]))){display:none}
.pisipildid:not(:has(.pisi:not([hidden]))) + .vihje{display:none}
.pisi{
  width:132px;height:132px;padding:0;overflow:hidden;cursor:pointer;
  background:#fff;border:var(--joon);border-radius:12px;
  box-shadow:4px 4px 0 var(--tint);
  transition:transform var(--t-1) var(--e-valja), box-shadow var(--t-1) var(--e-valja);
}
.pisi img{width:100%;height:100%;object-fit:cover}
.pisi:active{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--tint)}

.eelvaade{position:relative;background:var(--valge);border:var(--joon);
  border-radius:var(--nurk);box-shadow:var(--vari);overflow:hidden}
.eelvaade img{width:100%;height:auto;transition:opacity var(--t-1) var(--e-valja)}
/* Suur tootepilt püsib alati samas kastis: külgfotod on püstised ja
   venitaksid muidu eelvaate hüppeliselt kõrgeks. */
#mytsipilt,#fotopilt{aspect-ratio:10/7;height:auto;object-fit:contain;background:#fff}

.rivet{
  position:absolute;transform:translate(-50%,-50%);
  width:16px;height:16px;padding:0;border-radius:50%;
  background:rgba(255,255,255,.55);border:2px dashed var(--tint);
  box-shadow:none;cursor:pointer;
  transition:background var(--t-1) var(--e-valja), transform var(--t-1) var(--e-valja);
}
/* valimata avad vilguvad aeg-ajalt, et klõpsatavus silma jääks */
.rivet:not(.valitud){animation:rivet-vilgub 4.5s var(--e-valja) 3 .8s}
@keyframes rivet-vilgub{
  0%,86%,94%,100%{background:rgba(255,255,255,.55);transform:translate(-50%,-50%) scale(1)}
  88%,96%{background:var(--kollane);transform:translate(-50%,-50%) scale(1.28)}
}
.rivet.valitud{
  background:var(--tint);border-style:solid;
  box-shadow:0 0 0 1.5px var(--valge), 0 0 0 3px var(--tint);
}
/* Valitud kinnitus näeb välja nagu päris rivet: kaheksaharuline pilu, mille
   vahelt embleemi nupp läbi surutakse. Joonistatud SVG-na, mitte tähemärgina —
   ✳ värvis iOS roheliseks emojiks ja ükski font ei anna õiget kuju. */
.rivet.valitud{display:grid;place-items:center}
.rivet.valitud::after{
  content:"";display:block;width:100%;height:100%;
  background:no-repeat center/72% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23e8e4da' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M12 12V2.4M12 12v9.6M12 12H2.4M12 12h9.6M12 12 5.2 5.2M12 12l6.8 6.8M12 12l6.8-6.8M12 12l-6.8 6.8'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='3.1' fill='%23e8e4da'/%3E%3C/svg%3E");
}
/* Valimata ava: sama kuju kahvatult, et oleks näha, mis sinna tuleb. */
.rivet:not(.valitud){display:grid;place-items:center}
.rivet:not(.valitud)::after{
  content:"";display:block;width:100%;height:100%;opacity:.42;
  background:no-repeat center/64% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%2322252b' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M12 12V2.4M12 12v9.6M12 12H2.4M12 12h9.6M12 12 5.2 5.2M12 12l6.8 6.8M12 12l6.8-6.8M12 12l-6.8 6.8'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='2.8' fill='%2322252b'/%3E%3C/svg%3E");
}

.valikud-veerg{display:grid;gap:18px;align-content:start;background:var(--valge);
  border:var(--joon);border-radius:var(--nurk);box-shadow:var(--vari);padding:22px 20px}
.valikud-veerg fieldset{border:none;margin:0;padding:0}
.valikud-veerg legend{font-weight:700;font-size:.9rem;margin-bottom:8px;padding:0}

.kangad{display:flex;gap:10px;flex-wrap:wrap}
.kangas{position:relative;cursor:pointer}
.kangas input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.kangas span{
  display:block;width:40px;height:40px;border-radius:50%;
  border:var(--joon);box-shadow:2px 2px 0 var(--tint);
  transition:transform var(--t-1) var(--e-valja);
}
.kangas input:checked + span{
  box-shadow:0 0 0 3px var(--valge), 0 0 0 5px var(--punane), 2px 2px 0 5px var(--tint)}
.kangas input:focus-visible + span{outline:3px solid var(--sinine);outline-offset:2px}
.kangas-oliiv span{background:#5c6650}
.kangas-must span{background:#26262a}
.kangas-tumesinine span{background:#2c3e5e}
.kangas-punane span{background:#8e3a2e}
.kangas-roosa span{background:#b98a99}
.kangas-liiv span{background:#a8a08c}

.rivetivalik label{display:inline-flex;align-items:center;gap:4px;
  font-weight:400;margin-right:14px}
.vihje{margin:8px 0 0;font-size:.8rem;color:var(--hall)}
.kokku{font-size:1.2rem}

@media(max-width:860px){
  .kujundaja-kest{grid-template-columns:1fr;gap:18px}
  /* Mudeleid on vähe — need mahuvad ridadele ära. Külgsuunas kerimine
     tähendaks, et osa valikuid jääb märkamatuks ja tekib inetu kerimisriba. */
  /* padding jätab ruumi hover-nihkele — muidu lõikub nupu ülaserv ära */
  .kategooriad{position:static;display:flex;flex-wrap:wrap;gap:8px;padding:3px 0 3px 3px}
  .kategooria{flex:0 1 auto;font-size:.8rem;padding:10px 12px;min-width:0}
  .kategooria-hind{font-size:.78rem}
  .kujundaja-paigutus{grid-template-columns:minmax(0,1fr)}
  /* puutega seadmes veidi suurem, et pihta saaks — aga mitte mütsi peal latakas */
  .rivet{width:22px;height:22px}
}

/* ---------- kohandumine ---------- */

@media(max-width:900px){
  .kangelane{grid-template-columns:1fr;gap:34px;padding-top:20px}
  .foto{max-width:440px;margin:0 auto}
  .sammud{grid-template-columns:1fr;gap:30px}
  .sammud li{padding-top:48px}
}
@media(max-width:560px){
  main{padding:22px 16px 60px}
  /* Kompaktne mobiilipäis: esimesel real logo vasakul ning korv ja keeled
     paremal, teisel real menüülingid — kokku kaks tihedat rida. */
  .pais{display:grid;grid-template-columns:auto 1fr;align-items:center;
    gap:4px 8px;padding:8px 12px}
  .logo{grid-column:1;grid-row:1}
  .logo img{height:48px;width:48px}
  .pais nav{display:contents}
  .pais-tegevused{grid-column:2;grid-row:1;display:flex;justify-content:flex-end;gap:6px}
  .pais-lingid{grid-column:1 / -1;grid-row:2;display:flex;flex-wrap:wrap;
    justify-content:center;gap:0}
  .pais nav a{font-size:.68rem;padding:6px 7px;letter-spacing:.03em}
  .keeled{margin-left:2px;gap:3px}
  .keel{padding:6px 9px;font-size:.72rem}
  .korv-link.video-korv .korv-video{width:42px;height:42px;margin:-4px -1px -3px}
  .pais nav a.korv-link{padding:4px 7px}
  .korv-ikoon{width:30px;height:28px}
  .teed .nupp{flex:1 1 100%;text-align:center}
  .ruudustik{grid-template-columns:1fr 1fr;gap:16px}
  .kaart-sisu{padding:12px}
  form.vorm{padding:20px 16px}
  /* leivapuru kitsal ekraanil: tihe ÜKS rida. Jooksva lehe mummu peidame —
     pealkiri on niikuinii kohe leivapuru all, topelt pole vaja. */
  .rada{font-size:.7rem;gap:3px;margin-bottom:14px;flex-wrap:nowrap;overflow:hidden;
    padding:2px}   /* varu, et aktiivne nupp ei lõikuks servast */
  .rada a,.rada > span{padding:3px 8px;border-width:1.5px;white-space:nowrap}
  /* jooksva lehe mumm kahaneb kolme punktiga — pealkiri on niikuinii all */
  .rada > span:not(.tagasi-nupp){max-width:96px;overflow:hidden;
    text-overflow:ellipsis;min-width:0}
  .rada a:first-child::before{content:""}
  .tagasi-nupp{padding:3px 9px;flex:none}
}
/* laiad tabelid kerivad kitsal ekraanil oma kasti sees, mitte üle lehe */
@media(max-width:700px){
  main table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* ostukorv: tabeli read muutuvad kaartideks — nimi ja valikud vasakul,
     summa paremal, kogusenupud all. Inline-stiilide vastu on vaja !important. */
  main table.korvitabel{display:block;overflow:visible}
  .korvitabel tbody{display:block}
  .korvitabel tr{display:grid;grid-template-columns:1fr auto;align-items:start;
    gap:6px 14px;padding:12px 14px;border-bottom:1px solid #e6e3dc}
  .korvitabel td{display:block;border:none;padding:0 !important;
    text-align:left !important;white-space:normal !important}
  .korvitabel td:nth-child(1){grid-column:1;grid-row:1}
  .korvitabel td:nth-child(2){grid-column:1;grid-row:2;white-space:nowrap !important;align-self:center}
  .korvitabel td:nth-child(3){grid-column:2;grid-row:1;font-weight:700}
  .korvitabel td:nth-child(4){grid-column:2;grid-row:2;justify-self:end;align-self:center}
  .korvitabel tr.korvi-kokku{display:flex;justify-content:space-between;
    align-items:center;font-size:1.05rem}
  .korvitabel tr.korvi-kokku td:last-child{display:none}
}
@media(max-width:400px){
  .ruudustik{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}


.jalus-logo{margin:0 auto 16px;display:block;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))}
.logo-graffiti{background:none;border:none;padding:0;box-shadow:none}
.logo-graffiti img{height:52px;width:auto;
  filter:drop-shadow(2px 3px 0 rgba(34,37,43,.25));
  transition:transform var(--t-1) var(--e-valja)}

/* ---------- reklaamlint ---------- */
.lint{
  /* täislaius: murra main'i (1240px) kastist välja, muidu jääb laial ekraanil lühikeseks */
  width:100vw;margin:64px 0 8px;margin-left:calc(50% - 50vw);transform:rotate(-1.2deg);
  background:var(--tint);border-top:3px solid var(--tint);
  border-bottom:3px solid var(--tint);overflow:hidden;
  box-shadow:0 5px 0 rgba(34,37,43,.25);
}
.lint-sisu{
  display:inline-flex;white-space:nowrap;
  animation:lint-liigub 22s linear infinite;
}
.lint-sisu span{
  font-family:var(--kiri-pea);font-weight:700;font-size:1rem;
  color:var(--kollane);padding:12px 0;letter-spacing:.12em;
}
@keyframes lint-liigub{to{transform:translateX(-50%)}}
/* kitsal ekraanil on sama teekond füüsiliselt lühem — sama kestusega kihutaks
   tekst silme eest mööda. Aeglustame. */
@media(max-width:700px){.lint-sisu{animation-duration:38s}}

/* ---------- kerimisega ilmumine ---------- */
.paljastu{opacity:0;transform:translateY(20px);
  transition:opacity var(--t-4) var(--e-valja), transform var(--t-4) var(--e-valja)}
.paljastu.nahtav{opacity:1;transform:none}

body{overflow-x:hidden}
/* ülekerimise ala (iOS "kummiefekt") sama paberitooni, mitte must */
html{background:var(--paber)}


/* ---------- embleemi kujundaja ---------- */
.embleem-lava{display:grid;place-items:center;background:var(--valge);
  border:var(--joon);border-radius:var(--nurk);box-shadow:var(--vari);
  padding:40px 20px 18px;text-align:center}
.embleem{
  position:relative;display:grid;place-items:center;overflow:hidden;
  width:250px;height:250px;border-radius:50%;
  background:var(--paber);border:6px solid var(--tint);
  box-shadow:8px 9px 0 var(--tint), inset 0 0 0 6px var(--valge);
  transition:width var(--t-2) var(--e-valja), height var(--t-2) var(--e-valja);
}
.embleem[data-suurus="45"]{width:225px;height:225px}
.embleem #embleem-tekst{
  font-family:var(--kiri-pea);font-weight:800;font-size:1.35rem;
  letter-spacing:.02em;padding:0 18px;word-break:break-word;z-index:2;
}
.embleem #embleem-logo{position:absolute;inset:12%;width:76%;height:76%;
  object-fit:contain;z-index:1}
.embleem-laik{display:none;position:absolute;inset:0;z-index:3;
  clip-path:var(--kuju);pointer-events:none;
  background:
    radial-gradient(ellipse 62% 48% at 32% 24%, rgba(255,255,255,.68) 0%, rgba(255,255,255,.2) 46%, rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 95% 62% at 62% 106%, rgba(34,37,43,.16) 0%, rgba(34,37,43,0) 58%)}
.embleem.laigiga .embleem-laik{display:block}
/* kontuuri ja teegikuju puhul joonistab kumeruse canvas ise */
.embleem[data-kuju="kontuur"] .embleem-laik,
.embleem[data-kuju="mask"] .embleem-laik{display:none !important}
.embleem.laigiga{box-shadow:8px 9px 0 var(--tint), inset 0 0 0 6px var(--valge),
  inset -6px -10px 18px rgba(34,37,43,.18)}

/* ---------- embleemi kujud ---------- */
/* NB: see plokk kadus kunagi kogemata ära ja on ajaloost taastatud —
   ilma selleta on eelvaade lihtsalt kandiline kast. */
.embleem-kest{filter:drop-shadow(6px 7px 0 rgba(34,37,43,.85))}
.embleem-lava .embleem{
  width:270px;height:270px;border:none;border-radius:0;box-shadow:none;
  background:none;clip-path:none;display:block;position:relative;
  transition:transform var(--t-2) var(--e-valja);
}
.embleem .kere{position:absolute;inset:0;background:var(--tint);clip-path:var(--kuju);z-index:1}
.embleem[data-kuju="ring"]{--kuju:circle(49.5% at 50% 50%)}
.embleem[data-kuju="padi"]{--kuju:inset(3% round 26%)}
.embleem[data-kuju="kilp"]{--kuju:polygon(50% 1%, 96% 9%, 90% 60%, 50% 99%, 10% 60%, 4% 9%)}
.embleem[data-kuju="kuusnurk"]{--kuju:polygon(25% 4%, 75% 4%, 98% 50%, 75% 96%, 25% 96%, 2% 50%)}
.embleem[data-kuju="syda"]{--kuju:path('M170,325 C82,246 11,187 11,114 C11,57 55,21 100,21 C133,21 158,40 170,65 C182,40 207,21 240,21 C285,21 329,57 329,114 C329,187 258,246 170,325 Z')}
.embleem-sisu{
  position:absolute;inset:0;clip-path:var(--kuju);background:var(--paber);
  transform:scale(var(--aarise-skaala, .93));display:grid;place-items:center;overflow:hidden;
}
/* kinnitused: ava (pusaripats, nöör käib läbi) ja aas (võtmehoidja) —
   embleemi sees, seega keerlevad/suumivad kujundusega kaasa */
.kinnitus{position:absolute;pointer-events:none;
  transition:left var(--t-2) var(--e-valja), top var(--t-2) var(--e-valja), transform var(--t-2) var(--e-valja)}
.kinnitus-ava{
  left:50%;top:9%;transform:translateX(-50%);z-index:3;
  width:26px;height:26px;border-radius:50%;
  background:var(--valge);border:5px solid var(--tint);
  box-shadow:inset 0 2px 4px rgba(34,37,43,.35);
}
.kinnitus-aas{
  left:50%;top:-41px;transform:translateX(-50%);z-index:2;
  width:46px;height:46px;border-radius:50%;
  border:10px solid var(--tint);
  background:transparent;
}
.kinnitus-aas.nurgas{left:11%;top:-32px;transform:rotate(-24deg)}
.kinnitus-ava.nurgas{left:16%;top:11%;transform:none}
.embleem[data-kuju="kontuur"]{--kuju:none;background:none}
.embleem[data-kuju="kontuur"] .embleem-sisu{clip-path:none;background:none;transform:none}
.embleem-sisu #embleem-tekst{position:relative;z-index:2}
.embleem.pildiga .embleem-sisu #embleem-logo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.embleem[data-kuju="kontuur"].pildiga .embleem-sisu #embleem-logo{object-fit:contain}

/* ---------- Meist: tehtud tööd ---------- */
.tegemised{display:grid;gap:26px;max-width:760px}
.tegemine{display:grid;grid-template-columns:220px 1fr;gap:20px;align-items:start;
  background:var(--valge);border:var(--joon);border-radius:var(--nurk);
  box-shadow:var(--vari);padding:18px}
.tegemine img{border-radius:10px;border:var(--joon)}
.tegemine h3{margin-top:2px}
@media(max-width:640px){.tegemine{grid-template-columns:1fr}}

.galerii-kaart{margin:0}
.galerii-kaart img{aspect-ratio:1;object-fit:cover}
.galerii-kaart figcaption{font-size:.85rem;font-weight:600}
.kingi-rida{display:flex;align-items:center;gap:12px}
.kingi-rida img{width:64px;height:64px;border-radius:50%;border:var(--joon);
  box-shadow:3px 3px 0 var(--tint);object-fit:cover}

/* ---------- tooteleht ---------- */
.toote-link{color:var(--tint);text-decoration:none}
.toote-paigutus{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:start}
.toote-pilt img{width:100%;border:var(--joon);border-radius:var(--nurk);
  box-shadow:var(--vari-suur);background:#fff}
.akordion{display:grid;gap:10px;margin-top:10px}
.akordion details{background:var(--paber);border:var(--joon);border-radius:12px;
  box-shadow:3px 3px 0 var(--tint);overflow:hidden}
.akordion summary{cursor:pointer;font-weight:700;padding:13px 16px;list-style:none;
  display:flex;justify-content:space-between;align-items:center}
.akordion summary::after{content:"+";font-family:var(--kiri-pea);font-size:1.1rem;
  transition:transform var(--t-2) var(--e-valja)}
.akordion details[open] summary::after{transform:rotate(45deg)}
.akordion details p{margin:0;padding:0 16px 14px;font-size:.92rem}
@media(max-width:860px){.toote-paigutus{grid-template-columns:1fr}}


/* päise logo kui ümar märk */
.logo-badge{background:none;border:none;padding:0;border-radius:50%;
  box-shadow:none}
.logo-badge img{height:clamp(64px,6.2vw,108px);width:clamp(64px,6.2vw,108px);border-radius:50%;
  border:2px solid var(--tint);box-shadow:3px 3px 0 var(--tint);
  background:#fff;transition:transform var(--t-1) var(--e-valja), box-shadow var(--t-1) var(--e-valja)}


/* ---------- sammude flip-kaardid ---------- */
[hidden]{display:none !important}
.rivetivalik label{white-space:nowrap}

.embleem.pildiga #embleem-logo{inset:0;width:100%;height:100%;object-fit:cover}
.embleem.pildiga #embleem-tekst{color:#fff;text-shadow:0 0 8px rgba(0,0,0,.6)}


/* ---------- toonipalett ---------- */
.toonipesad{display:flex;gap:10px;margin:8px 0}
.toonipesa{
  width:44px;height:44px;border-radius:50%;border:var(--joon);
  box-shadow:2px 2px 0 var(--tint);color:#fff;font-weight:800;
  font-family:var(--kiri-pea);font-size:.85rem;padding:0;cursor:pointer;
  text-shadow:0 1px 3px rgba(0,0,0,.7);
}
.toonipesa.aktiivne{outline:3px solid var(--punane);outline-offset:2px;transform:scale(1.1)}
.toonipalett{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.toon{
  width:30px;height:30px;border-radius:50%;border:2px solid var(--tint);
  box-shadow:1px 1px 0 var(--tint);padding:0;cursor:pointer;
}
.embleem{transition:transform var(--t-1) var(--e-valja)}

/* ---------- rada ja ülesse-nupp ---------- */
.rada{font-size:.82rem;margin-bottom:20px;color:var(--hall);
  display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.rada a{display:inline-block;text-decoration:none;font-weight:600;color:var(--tint);
  background:var(--valge);border:1.5px solid var(--paber-tume);border-radius:999px;
  padding:4px 11px;transition:color var(--t-1) var(--e-valja),background-color var(--t-1) var(--e-valja),transform var(--t-1) var(--e-valja),box-shadow var(--t-1) var(--e-valja)}
.rada a:first-child::before{content:"⌂ ";opacity:.7}/* Hover-tõste AINULT hiirega seadmetel: puutel jäi :hover "kleepuma" ja
   nihutatud nupp kadus .rada overflow:hidden'i taha (kasutaja telefoni-viga). */
.rada a:active{background:var(--kollane);transform:none;box-shadow:none}
.rada > span{font-weight:800;color:var(--tint);background:var(--kollane);
  border:1.5px solid var(--tint);border-radius:999px;padding:4px 11px}
.tagasi-nupp{margin-left:auto;font-weight:700}
.ylesse{
  position:fixed;right:20px;bottom:86px;z-index:55;
  width:48px;height:48px;border-radius:50%;font-size:1.2rem;
  padding:0;display:grid;place-items:center;
  background:var(--kollane);color:var(--tint);
}

/* "toonita" valik: ruuduline taust punase kriipsuga */
.toon-tyhi{
  background:
    linear-gradient(45deg, transparent 44%, var(--punane) 44% 56%, transparent 56%),
    repeating-conic-gradient(#d9d4c7 0% 25%, #fffdf7 0% 50%) 0 0/10px 10px;
}

/* kontuurirežiimis pole puhkeolekus varju — vari tekib keerutades (JS) */
.embleem-kest{transition:filter var(--t-2) var(--e-valja);overflow:visible}
.embleem-kest:has(.embleem[data-kuju="kontuur"]){filter:none}
.embleem-lava{overflow:visible}
.toonipesa-pluss{background:var(--valge);color:var(--tint);font-size:1.3rem;border-style:dashed}
.fondirida{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}
input[type=range]{width:100%;padding:0;border:none;accent-color:var(--punane);background:transparent}
input[type=range]:focus{box-shadow:none;background:transparent}

/* pusaripatsi riputusaas */

.kogus-nupp{padding:4px 10px;font-size:1rem;border-radius:8px;box-shadow:2px 2px 0 var(--tint)}

/* ---------- kujuteek ---------- */
.kujuteek-kast{margin-top:10px;background:var(--paber);border:var(--joon);
  border-radius:12px;box-shadow:3px 3px 0 var(--tint)}
.kujuteek-kast summary{cursor:pointer;font-weight:700;font-size:.88rem;
  padding:10px 14px;list-style:none}
.kujuteek{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;padding:0 12px 12px}
.teegikuju{position:relative;cursor:pointer;background:#fff;border:2px solid var(--tint);
  border-radius:10px;aspect-ratio:1;display:grid;place-items:center;padding:6px}
.teegikuju input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.teegikuju img{width:100%;height:100%;object-fit:contain;
  filter:brightness(0) saturate(100%)}
.teegikuju:has(input:checked){outline:3px solid var(--punane);outline-offset:1px}
.embleem[data-kuju="mask"]{--kuju:none;background:none}
.embleem[data-kuju="mask"] .embleem-sisu{clip-path:none;background:none;transform:none}
@media(max-width:560px){.kujuteek{grid-template-columns:repeat(4,1fr)}}

/* ---------- kassa ---------- */
.kassa-paigutus{display:grid;grid-template-columns:1fr 380px;gap:30px;align-items:start}
.kokkuvote{background:var(--valge);border:var(--joon);border-radius:var(--nurk);
  box-shadow:var(--vari);padding:20px 22px;position:sticky;top:16px}
.kokkuvote-rida{display:flex;justify-content:space-between;gap:14px;
  min-width:0;
  padding:9px 0;border-bottom:1px solid var(--paber-tume);font-size:.92rem}
.kokkuvote-rida small{color:var(--hall)}
.kokkuvote-kokku{border-bottom:none;font-size:1.1rem;padding-top:14px}
@media(max-width:860px){.kassa-paigutus{grid-template-columns:1fr}
  .kokkuvote{position:static;order:-1}}

/* tasuta tarne edenemisriba */
.tarne-riba{background:var(--paber);border:var(--joon);border-radius:12px;
  box-shadow:3px 3px 0 var(--tint);padding:12px 16px;margin-bottom:20px}
.tarne-riba p{margin:0 0 8px;font-size:.92rem}
.tarne-raja{height:12px;background:var(--paber-tume);border:2px solid var(--tint);
  border-radius:7px;overflow:hidden}
.tarne-raja span{display:block;height:100%;background:var(--roheline);
  transition:width var(--t-3) var(--e-valja)}

.embleem[data-kuju="kontuur"] .kere,
.embleem[data-kuju="mask"] .kere{clip-path:none;background:none !important}

/* vana ringi-klipp maha: kinnitused ulatuvad kehast välja */
.embleem-lava .embleem{overflow:visible !important;border-radius:0 !important;box-shadow:none !important;border:none !important}


/* suurem eelvaate lava: kleepub kerimisel, märk suurem */
.embleem-lava{position:sticky;top:16px;min-height:540px;align-content:center}
.embleem-lava .embleem{width:340px;height:340px}
.embleem-sisu #embleem-tekst{font-size:1.7rem}
@media(max-width:860px){
  .embleem-lava{position:relative;top:0;min-height:0}
  .embleem-lava .embleem{width:270px;height:270px}
}

/* kinnitusdialoog */
.dialoog{
  border:var(--joon);border-radius:var(--nurk);box-shadow:8px 9px 0 var(--tint);
  background:var(--valge);padding:24px 26px;max-width:340px;
}
.dialoog::backdrop{background:rgba(34,37,43,.45)}

/* poe wizard */
.wizard{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:24px}
.wizard-kaart{text-decoration:none;color:var(--tint)}
.wizard-kaart .kaart-sisu p{min-height:66px}
.wizard-kaart .nupp{display:block;text-align:center;margin-top:10px;font-size:.88rem;padding:11px 14px}
@media(max-width:1100px){.wizard{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.wizard{grid-template-columns:1fr}}
.wizard-kaart img{aspect-ratio:sqrt(2);object-fit:cover}


/* mõõdusilt eelvaate nurgas — kalle ei kata */
.moot-silt{
  position:absolute;left:14px;top:12px;z-index:6;
  font-family:var(--kiri-pea);font-weight:600;font-size:.72rem;
  background:var(--kollane);border:var(--joon);border-radius:9px;
  padding:5px 10px;box-shadow:2px 2px 0 var(--tint);pointer-events:none;
}


/* südame path väiksele lavale (mobiil, 270px) */
@media(max-width:860px){
  .embleem[data-kuju="syda"]{--kuju:path('M135,258 C65,195 9,149 9,91 C9,45 44,17 80,17 C106,17 126,32 135,52 C144,32 164,17 190,17 C226,17 261,45 261,91 C261,149 205,195 135,258 Z')}
}

/* kinnituse asukoht kuju järgi — aas/ava peab istuma kuju tipul */
.embleem[data-kuju="padi"] .kinnitus-aas{top:-32px}
.embleem[data-kuju="kuusnurk"] .kinnitus-aas{top:-29px}
.embleem[data-kuju="kilp"] .kinnitus-aas{top:-40px}
.embleem[data-kuju="syda"] .kinnitus-aas{left:29%;top:-22px;transform:rotate(-14deg)}
.embleem[data-kuju="padi"] .kinnitus-ava{top:11%}
.embleem[data-kuju="kuusnurk"] .kinnitus-ava{top:12%}
.embleem[data-kuju="syda"] .kinnitus-ava{left:30%;top:13%}
/* kontuuri- ja teegikuju režiimis joonistab kinnituse canvas */
.embleem[data-kuju="kontuur"] .kinnitus,
.embleem[data-kuju="mask"] .kinnitus{display:none}

.toonipesa-taust{color:var(--tint);text-shadow:none;border-style:dashed}


/* üle serva ulatuv kujundus: logo kiht klipist väljas */
.ylevool-logo{
  position:absolute;inset:-6%;width:112%;height:112%;
  object-fit:contain;z-index:3;pointer-events:auto;
}
#ylevool-rida{font-size:.88rem}


/* ---------- firmadele äri-kangelane ja sammud ---------- */
.ari-kangelane{
  display:grid;grid-template-columns:1.2fr .8fr;gap:34px;align-items:center;
  background:var(--tint);color:var(--paber);border-radius:var(--nurk);
  border:var(--joon);box-shadow:8px 10px 0 var(--kollane), 10px 12px 0 var(--tint);
  padding:36px 34px;margin-bottom:34px;
}
.ari-kangelane h1{margin:0 0 12px;color:#fff}
.ari-kangelane p{color:#cfcabd}
.ari-nfc{
  display:inline-block;background:var(--kollane);color:var(--tint) !important;
  border:var(--joon);border-radius:12px;padding:10px 16px 10px 12px;
  box-shadow:4px 4px 0 rgba(0,0,0,.55);font-weight:600;
  transform:rotate(-1deg);line-height:1.5;
}
.uus-silt{
  display:inline-block;background:var(--punane);color:#fff;
  font-family:var(--kiri-pea);font-weight:800;font-size:.68rem;
  border:2px solid var(--tint);border-radius:8px;padding:3px 8px;
  margin-right:8px;transform:rotate(-4deg);vertical-align:middle;
}
.ari-logod{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ari-logod img{border-radius:10px;border:2px solid rgba(245,239,227,.25);background:#fff}
.sammuriba{display:flex;align-items:center;gap:8px;margin:26px 0 18px}
.samm-tapp{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--kiri-pea);font-weight:800;border:var(--joon);
  background:var(--valge);color:var(--hall);box-shadow:2px 2px 0 var(--tint);
}
.samm-tapp.aktiivne{background:var(--punane);color:#fff}
.samm-joon{flex:0 0 46px;height:3px;background:var(--tint);border-radius:2px}
@media(max-width:860px){.ari-kangelane{grid-template-columns:1fr}}

.manuse-eelvaade{
  margin-top:10px;max-width:130px;max-height:130px;object-fit:contain;
  background:#fff;border:var(--joon);border-radius:10px;
  box-shadow:3px 3px 0 var(--tint);padding:6px;
}


/* kleepuv hinnariba: hind ja Lisage korvi alati nähtaval */
.hinnariba{
  position:sticky;bottom:0;z-index:7;
  background:var(--valge);
  margin:6px -20px -22px;padding:12px 20px 18px;
  border-top:var(--joon);border-radius:0 0 var(--nurk) var(--nurk);
  display:grid;gap:8px;
}
.hinnariba .kokku{margin:0}
.hinnariba button{width:100%}

/* teegikuju alusel (ilma fotota) on tekst tume ja loetav */
.embleem.alusega .embleem-sisu #embleem-tekst,
.embleem.alusega #embleem-tekst{color:var(--tint);text-shadow:none}


/* failivälja oma nupp (brauseri "Choose file" asemel) */
.fail-peidus{position:absolute !important;width:1px;height:1px;opacity:0;
  overflow:hidden;pointer-events:none;border:none !important;padding:0 !important}
.failikast{
  display:flex;align-items:center;gap:12px;width:100%;
  border:2px dashed var(--tint);border-radius:10px;padding:10px 12px;
  background:transparent;cursor:pointer;
}
.failinupp{
  display:inline-block;background:var(--valge);border:var(--joon);
  border-radius:9px;padding:8px 14px;font-weight:700;font-size:.85rem;
  box-shadow:2px 2px 0 var(--tint);cursor:pointer;white-space:nowrap;
  transition:transform var(--t-1) var(--e-valja), box-shadow var(--t-1) var(--e-valja);
}
.faili-nimi{color:var(--hall);font-size:.88rem;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}


/* hinnariba lahtised read: tükihind × kogus, soodustus, ühekordne seadistus */
.hinna-read{margin-bottom:10px;padding-bottom:10px;border-bottom:2px dashed var(--tint)}
.hinna-read p{display:flex;justify-content:space-between;gap:14px;margin:3px 0;
  font-size:.88rem;color:var(--hall)}
.hinna-read p span:last-child{white-space:nowrap;font-weight:700;color:var(--tint)}
#hr-soodus-rida span{color:var(--roheline) !important}


/* mütsi komplekti standardembleemide valik */
.disainivalik{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:8px 0 4px}
.disain{position:relative;cursor:pointer;display:block}
.disain input{position:absolute;opacity:0;pointer-events:none}
.disain img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;
  border:3px solid var(--tint);box-shadow:2px 2px 0 var(--tint);
  transition:transform var(--t-1) var(--e-valja), box-shadow var(--t-1) var(--e-valja)}
.disain input:checked + img{border-color:var(--punane);
  box-shadow:0 0 0 3px var(--punane), 3px 4px 0 var(--tint)}


/* kujunduse hinnasilt pisipildi all — pilt jääb täielikult nähtavaks */
.disain-hind{
  display:block;text-align:center;margin-top:5px;min-height:20px;
  font-family:var(--kiri-pea);font-size:.62rem;font-weight:800;
  letter-spacing:.03em;line-height:20px;pointer-events:none;
}
.disain-hind.hinnaga,.disain-hind.tasuta{
  color:#fff;border-radius:9px;padding:0 8px;width:max-content;
  margin-left:auto;margin-right:auto;
}
.disain-hind.hinnaga{background:var(--tint)}
.disain-hind.tasuta{background:var(--roheline)}


/* info-lehe sõnastik */
.sonastik{grid-template-columns:repeat(2,1fr);margin-bottom:44px}
.sonastik .kaart img{aspect-ratio:16/9;object-fit:cover}
.sonastik .kaart h3{margin:0 0 8px}
@media(max-width:700px){.sonastik{grid-template-columns:1fr}}


/* komplekti kingitus-embleemi silt: nähtav ainult valitul */
.disain .disain-hind{visibility:hidden}
.disain input:checked ~ .disain-hind{visibility:visible}
/* „Sobib juurde“ on kõrvalpakkumine, mitte peasisu — kaardid väiksemad,
   kolm kõrvuti, telefonis kaks. */
.seotud{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:18px;gap:14px}
.seotud .kaart img{aspect-ratio:4/3;object-fit:cover}
.seotud .kaart-sisu{padding:12px 14px}
.seotud .kaart-sisu h3{font-size:.95rem;margin:0 0 4px}
.seotud .kaart-sisu p{font-size:.85rem;margin:0 0 6px}
.seotud .hind{font-size:.95rem}
@media(max-width:640px){
  .seotud{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .seotud .kaart-sisu{padding:10px 12px}
  .seotud .kaart-sisu p{display:none}
}


/* komplekti/ainult-mütsi valikukaardid */
.komplektivalik{border:none;padding:0;margin:0;display:grid;gap:10px}
.komplektivalik legend{font-weight:700;margin-bottom:6px}
.valikukaart{
  display:flex;gap:12px;align-items:flex-start;cursor:pointer;
  background:var(--valge);border:var(--joon);border-radius:12px;
  padding:12px 14px;box-shadow:2px 2px 0 var(--tint);
  transition:transform var(--t-1) var(--e-valja), box-shadow var(--t-1) var(--e-valja);
}
.valikukaart:has(input:checked){border-color:var(--punane);
  box-shadow:0 0 0 2px var(--punane), 3px 4px 0 var(--tint)}
.valikukaart input{margin-top:3px;accent-color:var(--punane)}
.valikukaart-sisu{display:grid;gap:2px}
.valikukaart-sisu span{font-size:.88rem;color:var(--hall)}
.kingi-silt{
  display:inline-block;background:var(--roheline);color:#fff;font-style:normal;
  font-family:var(--kiri-pea);font-size:.62rem;font-weight:800;
  padding:1px 7px;border-radius:8px;margin-left:6px;vertical-align:middle;
}


/* kujundaja parem tulp kompaktsemaks */
#disainiplokk .disainivalik{grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:8px;margin:6px 0 2px}
#disainiplokk .disain img{border-width:2px;border-radius:9px;box-shadow:1px 1px 0 var(--tint)}
#disainiplokk .disain-hind{font-size:.52rem;min-height:15px;line-height:15px;margin-top:2px;padding:0 6px}
#kujundaja input#kogus{width:120px}

/* tootekaart ilma pildita */
.pilt-tulekul{
  display:grid;place-items:center;aspect-ratio:4/3;width:100%;
  background:repeating-linear-gradient(-45deg,var(--paber) 0 14px,var(--paber-tume) 14px 28px);
  border-bottom:var(--joon);color:var(--hall);font-size:.85rem;
  text-align:center;line-height:1.5;padding:10px;
}


/* täpsemad seaded + lohistatavad elemendid */
.lisaseaded{border:2px dashed var(--tint);border-radius:10px;padding:10px 14px;margin:4px 0}
.lisaseaded summary{cursor:pointer;font-weight:700;font-size:.9rem}
.lisaseaded > div{margin-top:10px}
.lisaseaded label{font-size:.88rem}
#embleem-logo,#embleem-tekst{cursor:move}


/* liugurid ühtse jaotusena: silt vasakul, liugur paremal, read üksteise all */
.liugurid{margin:4px 0 2px}
.liugur-rida{display:grid;grid-template-columns:128px 1fr;align-items:center;gap:12px;margin:7px 0}
.liugur-rida label{margin:0;font-size:.88rem}


/* suumi tagasi-nupp lava nurgas */
.suumi-nupp{
  position:absolute;top:14px;right:14px;z-index:9;
  background:var(--valge);border:var(--joon);border-radius:9px;
  color:var(--tint);padding:6px 11px;font-weight:700;font-size:.9rem;
  line-height:1;cursor:pointer;box-shadow:2px 2px 0 var(--tint);
}
/* suumitud olekus toimib lava luubina: suurendus jääb kaardi sisse */
.embleem-lava.suumis{overflow:hidden}


/* suur eelvaade: lava üle ekraani, märk suuremalt */
.suumi-lahtesta{right:64px}
.embleem-lava.suur{
  position:fixed;inset:4vh 8vw;z-index:60;min-height:0;
  overflow:hidden;display:grid;place-items:center;padding:24px;
  box-shadow:8px 9px 0 var(--tint), 0 0 0 100vmax rgba(34,37,43,.5);
}
.embleem-lava.suur .embleem-kest{transform:scale(1.9)}
.suur-paneel{
  grid-column:2;grid-row:1 / span 2;width:100%;height:100%;
  overflow-y:auto;overflow-x:hidden;
  background:var(--paber);border:var(--joon);border-radius:12px;
  padding:16px 18px;text-align:left;
}
.suur-paneel > *{margin-bottom:12px;min-width:0}
.suur-alaosa{
  grid-column:1;grid-row:2;width:100%;max-height:30vh;
  overflow-y:auto;overflow-x:hidden;
  background:var(--paber);border:var(--joon);border-radius:12px;
  padding:12px 16px;text-align:left;
  display:flex;flex-wrap:wrap;gap:8px 26px;align-items:flex-start;
}
.suur-alaosa > *{flex:1 1 280px;min-width:0;margin:0}
.suur-alaosa fieldset{border:none;padding:0}
.suur-alaosa *{min-width:0;max-width:100%}
.suur-alaosa label{white-space:normal}
@media(max-width:1000px){
  .embleem-lava.suur{grid-template-columns:1fr;grid-template-rows:auto;overflow:auto}
  .embleem-lava.suur .embleem-kest{transform:scale(1.05)}
  .suur-paneel{grid-column:1;grid-row:auto;height:auto}
  .suur-alaosa{grid-column:1;grid-row:auto;max-height:none}
}
body.lava-suur{overflow:hidden}
@media(max-width:860px){
  .embleem-lava.suur{inset:4vh 4vw}
  .embleem-lava.suur .embleem-kest{transform:scale(1.15)}
}


/* lohistamise vihjemull eelvaate peal */
.lohista-mull{
  position:absolute;bottom:18px;left:50%;z-index:8;
  background:var(--tint);color:#fff;font-size:.8rem;font-weight:600;
  padding:8px 14px;border-radius:20px;white-space:nowrap;
  pointer-events:none;box-shadow:3px 4px 0 rgba(34,37,43,.25);
  animation:mull-hypleb 1.6s var(--e-sisse-valja) 4;
}
@keyframes mull-hypleb{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(-6px)}
}


/* liuguril pole punast fookuseraami — väärtust näitab arv rea lõpus */
input[type=range]:focus,
input[type=range]:focus-visible{
  outline:none !important;box-shadow:none !important;
  border:none !important;background:transparent !important;
}
.liugur-rida{grid-template-columns:128px 1fr 52px}
.liugur-arv{
  font-family:var(--kiri-pea);font-weight:700;font-size:.8rem;
  color:var(--tint);text-align:right;white-space:nowrap;
}


/* kaareteksti saab piki kaart lohistada */
#kaartekst-tekst{pointer-events:auto;cursor:grab}
#kaartekst-tekst:active{cursor:grabbing}


/* valmis taustamustrid — kiht taustatooni peal */
.embleem[data-muster] .embleem-sisu::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
}
.embleem[data-muster="triibud"] .embleem-sisu::before{
  background:repeating-linear-gradient(45deg, rgba(34,37,43,.08) 0 10px, transparent 10px 22px)}
.embleem[data-muster="tapid"] .embleem-sisu::before{
  background:radial-gradient(rgba(34,37,43,.13) 2.6px, transparent 3.2px);
  background-size:24px 24px}
.embleem[data-muster="ruudud"] .embleem-sisu::before{
  background:
    repeating-linear-gradient(0deg, rgba(34,37,43,.09) 0 2px, transparent 2px 22px),
    repeating-linear-gradient(90deg, rgba(34,37,43,.09) 0 2px, transparent 2px 22px)}
.embleem[data-muster="kiired"] .embleem-sisu::before{
  background:repeating-conic-gradient(rgba(34,37,43,.08) 0 11deg, transparent 11deg 26deg)}

/* mustrivaliku kiibid */
.mustrid{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 2px}
.muster{position:relative;cursor:pointer;text-align:center}
.muster input{position:absolute;opacity:0;pointer-events:none}
.muster-ruut{
  display:block;width:46px;height:46px;border:2px solid var(--tint);
  border-radius:11px;background-color:var(--paber);box-shadow:1px 1px 0 var(--tint);
  transition:transform var(--t-1) var(--e-valja);
}
.muster input:checked ~ .muster-ruut{
  border-color:var(--punane);box-shadow:0 0 0 2px var(--punane), 2px 3px 0 var(--tint)}
.muster-nimi{font-size:.66rem;color:var(--hall);display:block;margin-top:3px}
.mr-triibud{background-image:repeating-linear-gradient(45deg, rgba(34,37,43,.14) 0 5px, transparent 5px 11px)}
.mr-tapid{background-image:radial-gradient(rgba(34,37,43,.2) 1.6px, transparent 2px);background-size:11px 11px}
.mr-ruudud{background-image:
  repeating-linear-gradient(0deg, rgba(34,37,43,.14) 0 1.5px, transparent 1.5px 11px),
  repeating-linear-gradient(90deg, rgba(34,37,43,.14) 0 1.5px, transparent 1.5px 11px)}
.mr-kiired{background-image:repeating-conic-gradient(rgba(34,37,43,.14) 0 12deg, transparent 12deg 28deg)}


/* kujundaja teavitus: mis muudatuse tõttu tühistus */
.kujundaja-teade{
  background:var(--kollane);border:var(--joon);border-radius:9px;
  padding:8px 12px;font-size:.85rem;font-weight:600;color:var(--tint);
  box-shadow:2px 2px 0 var(--tint);margin:8px 0 0;
}


/* toonipesade nähtavad nimed kiipide all */
.toonipesad{padding-bottom:18px;gap:20px}
.toonipesa{position:relative}
.toonipesa::after{
  content:attr(data-nimi);position:absolute;top:calc(100% + 5px);left:50%;
  transform:translateX(-50%);font-size:.58rem;font-weight:600;color:var(--hall);
  white-space:nowrap;max-width:54px;overflow:hidden;text-overflow:ellipsis;
  text-shadow:none;letter-spacing:0;
}


/* telefonis/kitsal ekraanil suurt vaadet ei paku — leht on niigi üheveeruline */
@media(max-width:1000px){
  #suurenda-nupp{display:none}
}


/* ---------- adminipaneel ---------- */
.admin-menyy{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  margin-bottom:26px;padding-bottom:16px;border-bottom:3px solid var(--tint);
}
.admin-menyy a{
  text-decoration:none;font-weight:700;font-size:.9rem;color:var(--tint);
  background:var(--valge);border:var(--joon);border-radius:9px;
  padding:8px 14px;box-shadow:2px 2px 0 var(--tint);
  transition:transform var(--t-1) var(--e-valja), box-shadow var(--t-1) var(--e-valja);
}
.admin-menyy .valja{margin-left:auto;background:var(--tint);color:var(--paber)}
.admin-loend{list-style:none;padding:0;margin:0}
.admin-rida{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:10px 2px;border-bottom:2px dashed var(--paber-tume);
}
.peidus-silt{
  font-style:normal;font-size:.7rem;font-weight:700;color:var(--hall);
  background:var(--paber-tume);border-radius:7px;padding:2px 7px;margin-left:6px;
}
.admin-toimingud{display:flex;gap:8px;align-items:center;flex-shrink:0}
.admin-toimingud form{display:inline;margin:0}
.nupp-mini,button.nupp-mini{
  display:inline-block;background:var(--valge);color:var(--tint);
  border:2px solid var(--tint);border-radius:8px;
  padding:6px 12px;font-size:.78rem;font-weight:700;line-height:1.2;
  text-decoration:none;cursor:pointer;box-shadow:2px 2px 0 var(--tint);
  transition:transform var(--t-1) var(--e-valja), box-shadow var(--t-1) var(--e-valja);
}
.nupp-mini.oht,button.nupp-mini.oht{background:var(--punane);color:#fff}
.admin-kaart{
  background:var(--valge);border:var(--joon);border-radius:var(--nurk);
  box-shadow:var(--vari);padding:16px 18px;margin-bottom:16px;
}
@media(max-width:640px){
  .admin-rida{flex-direction:column;align-items:flex-start;gap:8px}
}


/* admini tekstihaldus */
.tekstiplokk{
  border:var(--joon);border-radius:12px;padding:14px 16px;margin-bottom:18px;
  background:var(--valge);display:grid;gap:12px;
}
.tekstiplokk legend{font-weight:800;padding:0 6px}
.vaikimisi-tekst{font-style:italic;margin:2px 0 4px}
.tekstiplokk textarea{width:100%;min-height:60px}/* kingitus-embleemi pisipilt suureneb hiirega peale minnes.
   AINULT päris-hiirega seadmetel — puutel jääks :hover pärast koputust
   "külge" ja valitud embleem passiks suurelt teiste ees. */

/* embleemi lehe vasak veerg: eelvaade + selle all kuju/logo plokid */
.vasak-veerg{display:flex;flex-direction:column;gap:18px;min-width:0}
.vasak-veerg .embleem-lava{position:relative;top:0;min-height:0;padding:96px 24px 52px}
.lava-alaosa{display:grid;gap:16px;align-content:start}
.lava-alaosa:empty{display:none}
.lava-alaosa fieldset{margin:0}

/* kaardi nupud alati alumisel joonel, sõltumata teksti pikkusest */
.kaart{display:flex;flex-direction:column}
.kaart .kaart-sisu{display:flex;flex-direction:column;flex:1}
.kaart .kaart-sisu > *:last-child{margin-top:auto}
.sonastik .kaart-sisu > *:last-child{margin-top:0}


/* vasaku veeru plokid oma kaardil, et veerud kokku ei jookseks */
.lava-alaosa{
  background:var(--valge);border:var(--joon);border-radius:var(--nurk);
  box-shadow:var(--vari);padding:18px 20px;
}


/* riputusaas jääb märgi taha — näha on ainult väljaulatuv osa */
.embleem .kinnitus-aas{z-index:0}


/* lava-alaosa plokid: sama viimistlus mis valikute veerus, sisu ei ületa kaarti */
.lava-alaosa fieldset{border:none;margin:0;padding:0;min-inline-size:0}
.lava-alaosa legend{font-weight:700;font-size:.9rem;margin-bottom:8px;padding:0}
.lava-alaosa > div, .lava-alaosa fieldset > *{min-width:0;max-width:100%}
.lava-alaosa .failikast{box-sizing:border-box}


/* vasak ja parem veerg lõpevad samal joonel; tekstid murduvad kaardi sisse */
.kujundaja-paigutus{align-items:stretch}
.vasak-veerg .lava-alaosa{flex:1}
.lava-alaosa{padding:18px 22px;overflow:hidden}
.lava-alaosa fieldset,.lava-alaosa label,.lava-alaosa .vihje{
  max-width:100%;white-space:normal;overflow-wrap:break-word}


/* teegikuju/kontuuri režiimis klipib kuju canvas — taust ja muster ei tohi
   kandilise kihina alt läbi paista */
.embleem[data-kuju="kontuur"] .embleem-sisu,
.embleem[data-kuju="mask"] .embleem-sisu{background:transparent !important}
.embleem[data-kuju="kontuur"] .embleem-sisu::before,
.embleem[data-kuju="mask"] .embleem-sisu::before{display:none}


/* kinnituste skeem: neutraalne mütsi joonis, mille peal täpid */
.skeem{
  position:relative;max-width:300px;margin:4px 0 10px;
  background:var(--valge);border:2px dashed var(--tint);border-radius:12px;
  padding:6px;
}
.skeem img{width:100%;height:auto;display:block;opacity:.85}
.rivetiread{display:flex;flex-wrap:wrap;gap:6px 18px}/* kinnituse-täpp on ümar märgis, mitte nupp — üldine nupuvari ei tohi peale tulla
   (hiirega üle liikudes tekkis poolkuu-kujuline vari) */
.rivet, .rivet:active, .rivet:focus, .rivet:focus-visible, .rivet.valitud:active{box-shadow:none}.rivet.valitud, .rivet.valitud:active{
  box-shadow:0 0 0 2px var(--valge), 0 0 0 4px var(--tint)}
.rivet:focus-visible{outline:3px solid var(--sinine);outline-offset:3px}
.rivet:active{transform:translate(-50%,-50%) scale(.94)}


/* pikad selgitavad sildid peavad murduma (telefonis ulatus tekst üle ekraani) */
#ylevool-rida,#ylevool-rida label,label#ylevool-rida,
.rivetivalik label.pikk-silt,.lava-alaosa label,.valikud-veerg > label{
  white-space:normal;
}
#ylevool-rida{display:block;max-width:100%;overflow-wrap:break-word}
.rivetivalik label{max-width:100%}
/* kindlustus: ükski element ei tekita telefonis külgkerimist */
html{overflow-x:hidden}
.kujundaja-paigutus,.valikud-veerg,.rivetivalik{max-width:100%;min-width:0}
main{min-width:0}


/* ---------- tootesildid ---------- */
.kaardipilt{position:relative;display:block}
.sildiriba{display:flex;gap:5px;flex-wrap:wrap}
.sildiriba-pildil{position:absolute;top:10px;left:10px;z-index:3}
.sildiriba-reas{margin-bottom:8px}
.toote-silt{
  display:inline-block;font-family:var(--kiri-pea);font-weight:800;
  font-size:.62rem;letter-spacing:.04em;color:#fff;
  padding:3px 9px;border-radius:8px;border:2px solid var(--tint);
  box-shadow:2px 2px 0 var(--tint);transform:rotate(-2deg);
}
.silt-uus{background:var(--roheline)}
.silt-top{background:var(--kollane);color:var(--tint)}
.silt-kampaania{background:var(--punane)}
.silt-valjamyyk{background:var(--tint)}

/* ---------- uudised ---------- */
.postitus{max-width:70ch;margin:0 auto}
/* ---------- kujunduste valija (charmid, sajad disainid) ---------- */
.kujundusevalik{border:var(--joon) !important;border-radius:12px;padding:12px 14px !important}
.kujundusevalik legend{font-weight:800;padding:0 6px}
.kujundusevalik input[type=search]{width:100%;margin-bottom:10px}
.disainiruudustik{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  gap:8px;max-height:340px;overflow-y:auto;padding:2px}
.disainikaart{position:relative;display:grid;justify-items:center;gap:4px;
  background:#fff;border:2px solid var(--paber-tume);border-radius:10px;
  padding:8px 6px 6px;cursor:pointer;text-align:center}
.disainikaart input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.disainikaart img{width:72px;height:72px;object-fit:contain;cursor:zoom-in}
/* 🔍 kujunduse suur vaade — klõps pisipildil avab, klõps/Escape sulgeb */
.disaini-suurvaade{position:fixed;inset:0;z-index:220;background:rgba(20,20,24,.86);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  cursor:zoom-out;padding:16px}
/* Suurvaade PEAB olema suur — 560px lagi tegi telefonis margi-suuruse pildi
   (kasutaja: "avanevad nii väikselt"). Terve foto, originaalproportsioonis. */
.disaini-suurvaade img{max-width:96vw;max-height:86vh;width:auto;height:auto;
  border-radius:14px;background:#fff;box-shadow:0 10px 40px rgba(0,0,0,.5);object-fit:contain}
@media (min-width:1100px){.disaini-suurvaade img{max-width:1040px}}
.galerii-nool{
  position:fixed;top:50%;transform:translateY(-50%);z-index:221;
  width:52px;height:52px;padding:0;border:none;border-radius:50%;
  background:rgba(255,255,255,.92);color:#1c1e24;font-size:1.7rem;line-height:1;
  display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.45);
}
.galerii-nool.vasak{left:10px}
.galerii-nool.parem{right:10px}
.galerii-nool[hidden]{display:none}/* Üldine nupu-hover (translate -2,-2) ASENDAS noole translateY(-50%) —
   nool hüppas poole kõrguse võrra alla ja hiir kadus pealt (ei saanud
   vajutadagi). Hoiame tsentreerimise igas olekus paigal. */
.galerii-nool:active{transform:translateY(-50%) scale(.96);box-shadow:0 1px 6px rgba(0,0,0,.4)}
@media (max-width:640px){
  .galerii-nool:hover{transform:scale(1.08)}
  .galerii-nool:active{transform:scale(.96)}
}
@media (max-width:640px){
  .galerii-nool{width:44px;height:44px;top:auto;bottom:18px;transform:none}
  .galerii-nool.vasak{left:16px}
  .galerii-nool.parem{right:16px}
}
.disaini-suurvaade .suurvaade-nimi{color:#fff;font-weight:800;font-size:1.05rem;text-align:center}
.disain{position:relative}
.disaini-luup{position:absolute;right:4px;top:4px;border:none;display:grid;place-items:center;
  width:22px;height:22px;padding:0;background:rgba(255,255,255,.9);color:#1c1e24;
  border-radius:6px;cursor:zoom-in;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.suurvaade-sulge{position:absolute;right:14px;top:14px;border:none;display:grid;place-items:center;
  width:40px;height:40px;padding:0;background:rgba(255,255,255,.92);color:#1c1e24;
  border-radius:10px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.disaini-tyhi{width:72px;height:72px;display:grid;place-items:center;
  background:var(--paber);border-radius:8px;color:var(--hall);font-size:1.4rem}
.disaini-nimi{font-size:.72rem;font-weight:600;line-height:1.2;word-break:break-word}
.disainikaart.valitud{outline:3px solid var(--punane);outline-offset:1px;
  border-color:var(--tint)}
.disaini-stepper{display:inline-flex;align-items:center;gap:8px}
.disaini-stepper button{min-width:0;width:26px;height:26px;padding:0;
  border-radius:8px;font-size:.95rem;line-height:1;display:grid;place-items:center;
  background:var(--punane);color:#fff;box-shadow:1px 1px 0 var(--tint)}
.disaini-stepper b{min-width:18px;text-align:center;font-variant-numeric:tabular-nums}
.disainikaart.otsas{opacity:.45;cursor:not-allowed}
.disainikaart.otsas .silt-otsas{position:absolute;top:4px;right:4px;font-size:.6rem}

/* aus nappusevihje tootelehel */
.laos-vahe{margin:4px 0 0;font-size:.85rem;color:var(--punane);font-weight:600}
/* vaikne ristimüük ostukorvis */
.korvi-soovitused{margin-top:30px}
.korvi-soovitused-pealkiri{margin:0 0 10px;font-weight:800;font-size:.95rem}
.korvi-soovitused-rida{display:flex;gap:12px;flex-wrap:wrap}
.soovitus-kaart{display:flex;align-items:center;gap:10px;text-decoration:none;
  color:var(--tint);background:var(--valge);border:var(--joon);border-radius:12px;
  padding:8px 14px 8px 8px;box-shadow:3px 3px 0 var(--tint)}
.soovitus-kaart img{width:56px;height:56px;object-fit:cover;border-radius:8px;
  border:2px solid var(--tint)}
.soovitus-kaart small{color:var(--hall)}
.korvi-kavand{margin-top:6px;width:64px;height:64px;object-fit:contain;
  background:var(--valge);border:2px solid var(--tint);border-radius:10px}
/* iOS-i kuupäevaväli venib muidu oma sisemise miinimumi järgi üle raami */
.vorm input[type=date]{width:100%;min-width:0;box-sizing:border-box}

/* sooduskoodivormi ruudustik: iga lahter hoiab oma piirides ka siis, kui
   silt murdub mitmele reale (iOS-i kuupäevaväli kippus naabrile peale) */
.koodivorm{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:12px}
/* iga lahter venib rea kõrgeimaga sama pikaks; silt kasvab ÜLES ja väljad
   jäävad kõik ühele joonele — kaherealine silt ei lükka enam kasti allapoole */
.koodivorm>div{min-width:0;display:grid;grid-template-rows:1fr auto;gap:4px}
.koodivorm>div>label{align-self:end;margin-bottom:0}
.koodivorm input{width:100%;min-width:0;box-sizing:border-box}
/* ujuv mini-korv: sama kleepsu-keel, ilmub kui päise korv on silmist väljas */
.korv-ujuv{position:fixed;top:10px;right:10px;z-index:57;
  display:inline-flex;align-items:center;background:var(--kollane);
  border:2px solid var(--tint);border-radius:12px;box-shadow:3px 3px 0 var(--tint);
  padding:6px 8px}
.korv-ujuv .korv-mark{position:absolute;top:-6px;right:-7px;margin:0;
  min-width:19px;height:19px;font-size:.68rem;border-radius:10px}
/* mütsi maandumisel teeb korv väikese hüppe-keeru (ujuv JA päise SVG-korv) */
.korv-ujuv.tantsib,.pais nav a.korv-link.tantsib{
  animation:korv-tants var(--t-5) cubic-bezier(.3,1.6,.4,1)}
@keyframes korv-tants{
  0%{transform:none}
  25%{transform:translateY(6px) scale(.95)}
  55%{transform:translateY(-10px) rotate(-8deg) scale(1.12)}
  80%{transform:translateY(2px) rotate(4deg)}
  100%{transform:none}
}

/* Info lehe tööde karussell */
.karussell{display:grid;grid-template-columns:auto minmax(0,460px) auto;
  align-items:center;gap:14px;margin-top:20px}
.karussell figure{margin:0;background:var(--valge);border:var(--joon);
  border-radius:var(--nurk);box-shadow:var(--vari);overflow:hidden}
.karussell img{width:100%;aspect-ratio:1;object-fit:contain;background:#fff}
.karussell figcaption{padding:12px 16px;display:grid;gap:2px}
.karussell figcaption small{color:var(--hall)}
.kar-nool{width:46px;height:46px;min-width:0;padding:0;border-radius:50%;
  display:grid;place-items:center;background:var(--kollane);color:var(--tint);
  border:var(--joon);box-shadow:3px 3px 0 var(--tint);cursor:pointer}
@media(max-width:560px){
  .karussell{gap:8px;grid-template-columns:auto minmax(0,1fr) auto}
  .kar-nool{width:38px;height:38px}
}

/* jagamisrida aitäh-lehel */
.jaga-rida{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  margin-top:26px;font-size:.9rem}
.jaga-rida > span{font-weight:700}
.jaga-link{display:inline-block;font:inherit;font-weight:600;font-size:.85rem;
  color:var(--tint);text-decoration:none;background:var(--valge);
  border:1.5px solid var(--tint);border-radius:999px;padding:5px 13px;
  box-shadow:2px 2px 0 var(--tint);cursor:pointer;min-width:0}
.postituse-aeg{font-size:.8rem;color:var(--hall);margin:0 0 6px}
.postituse-pilt{width:100%;max-width:640px;height:auto;border:var(--joon);
  border-radius:var(--nurk);box-shadow:var(--vari);margin:14px 0 18px}
.postitus p{margin-bottom:14px}


/* ---------- hooldusleht ---------- */
.hoolduse-keha{min-height:100vh;display:grid;place-items:center;padding:24px}
.hoolduse-kest{width:100%;max-width:560px}
.hoolduse-kaart{
  background:var(--valge);border:var(--joon);border-radius:var(--nurk);
  box-shadow:var(--vari-suur);padding:34px 30px;text-align:center;
}
.hoolduse-logo{width:96px;height:96px;border-radius:50%;border:var(--joon);
  box-shadow:3px 3px 0 var(--tint);background:#fff;
  transition:transform var(--t-4) cubic-bezier(.34,1.56,.64,1),box-shadow var(--t-3) var(--e-valja)}/* Märk on ümmargune — hoverdades keerutab end korra ringi ja kerkib veidi. */
.hoolduse-logo:focus-visible{
  transform:rotate(360deg) scale(1.08);box-shadow:5px 5px 0 var(--tint);cursor:pointer}
@media (prefers-reduced-motion:reduce){
  .hoolduse-logo{transition:none}
  .hoolduse-logo:hover,.hoolduse-logo:focus-visible{transform:scale(1.04)}
}
.hoolduse-silt{
  display:inline-block;background:var(--kollane);border:var(--joon);border-radius:10px;
  padding:4px 12px;margin:12px 0 6px;font-family:var(--kiri-pea);font-weight:800;
  font-size:.7rem;letter-spacing:.06em;box-shadow:2px 3px 0 var(--tint);transform:rotate(-2deg);
}
.hoolduse-kaart h1{font-size:1.6rem;margin:6px 0 10px}
.hoolduse-kaart p{color:var(--hall)}
.hoolduse-kontakt{margin-top:18px;font-weight:700}
.taimer{margin:20px 0 6px}
.taimeri-silt{font-size:.8rem;margin-bottom:8px}
.taimeri-numbrid{display:flex;justify-content:center;gap:10px}
.taimeri-numbrid span{
  background:var(--paber);border:var(--joon);border-radius:12px;
  padding:8px 12px;min-width:64px;box-shadow:2px 3px 0 var(--tint);
}
.taimeri-numbrid b{display:block;font-family:var(--kiri-pea);font-size:1.4rem;line-height:1.1}
.taimeri-numbrid i{font-style:normal;font-size:.66rem;color:var(--hall)}
.kraana{
  width:100%;max-width:340px;height:auto;margin:20px auto 4px;display:block;
  border-radius:14px;mix-blend-mode:multiply;
  animation:kraana-holjub 5s var(--e-sisse-valja) infinite;
}
@keyframes kraana-holjub{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-9px) rotate(-.6deg)}
}
@media(prefers-reduced-motion:reduce){.kraana{animation:none}}


/* abimull adminis: väike i-ring, mille peale liikudes avaneb selgitus */
.abi{
  display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;
  background:var(--tint);color:#fff;font-size:.66rem;font-weight:800;font-style:normal;
  cursor:help;position:relative;vertical-align:middle;margin-left:5px;font-family:var(--kiri-sisu);
}
.abi-mull{
  position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);
  width:min(300px,72vw);background:var(--tint);color:var(--paber);
  font-size:.78rem;font-weight:400;line-height:1.5;text-align:left;
  padding:10px 12px;border-radius:10px;box-shadow:3px 4px 0 rgba(34,37,43,.35);
  opacity:0;visibility:hidden;transition:opacity var(--t-1) var(--e-valja);z-index:30;pointer-events:none;
}
.abi-mull::after{
  content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:7px solid transparent;border-top-color:var(--tint);
}.abi:focus .abi-mull, .abi:focus-visible .abi-mull{opacity:1;visibility:visible}
@media(max-width:640px){.abi-mull{left:0;transform:none}.abi-mull::after{left:14px;transform:none}}


/* admini sisselogimine: puhas vaade ilma poe menüü ja jaluseta */
.pais-paljas{justify-content:center;padding:26px 20px 6px}
.pais-paljas .logo-badge img{height:84px;width:84px}


/* hoolduse video: oma liikumine, seega hõljutamist ei lisata */
.kraana-video{animation:none;mix-blend-mode:normal;background:var(--paber)}


/* ---------- piltide kärpimine adminis ---------- */
.karpija{margin-top:10px;background:var(--paber);border:2px dashed var(--tint);
  border-radius:12px;padding:12px}
.karpija-lava{position:relative;display:inline-block;max-width:100%}
.karpija-lava canvas{display:block;max-width:100%;height:auto;border:var(--joon);
  border-radius:10px;cursor:grab;touch-action:none;background:#fff}
.karpija-lava canvas:active{cursor:grabbing}
.karpija-raam{position:absolute;inset:0;border-radius:10px;pointer-events:none;
  box-shadow:inset 0 0 0 2px rgba(217,43,28,.55)}
.karpija-juht{margin-top:8px;max-width:520px}
.karpija-juht label{display:grid;grid-template-columns:96px 1fr;align-items:center;
  gap:10px;font-size:.85rem;font-weight:700}

.hoolduse-meil{font-weight:700;white-space:nowrap}
.kraana-video{border-radius:14px}


/* ---------- tingimuste aken ja küpsiseteade ---------- */
/* Nupp, mis näeb välja nagu link — kasutame seal, kus vajutus avab akna,
   mitte ei vii uuele lehele. */
.tekstinupp{background:none;border:none;padding:0;font:inherit;color:var(--punane);
  text-decoration:underline;cursor:pointer;box-shadow:none}

.oigus-aken{border:2px solid var(--tint);border-radius:var(--nurk);padding:0;
  max-width:min(720px,94vw);max-height:86vh;background:var(--valge);color:var(--tint);
  box-shadow:var(--vari-suur)}
.oigus-aken::backdrop{background:rgba(34,37,43,.55)}
.oigus-aken-pais{position:sticky;top:0;display:flex;align-items:center;gap:12px;
  justify-content:space-between;background:var(--valge);border-bottom:2px solid var(--tint);
  padding:16px 22px;z-index:1}
.oigus-aken-pais h2{margin:0;font-size:1.05rem}
.oigus-aken-sisu{padding:4px 22px 22px;overflow-y:auto;max-height:calc(86vh - 64px)}
.oigus-aken-sisu h2{font-size:.98rem;margin:20px 0 6px}
.oigus-aken-sisu p,.oigus-aken-sisu li{font-size:.92rem}
.aken-sulge{border:2px solid var(--tint);background:var(--paber);border-radius:999px;
  width:34px;height:34px;font-size:1.1rem;line-height:1;cursor:pointer;flex:none;
  box-shadow:2px 2px 0 var(--tint)}

.kypsiseteade{position:fixed;left:16px;bottom:16px;z-index:60;max-width:min(420px,calc(100vw - 32px));
  background:var(--valge);border:2px solid var(--tint);border-radius:var(--nurk);
  box-shadow:var(--vari-suur);padding:16px 18px;font-size:.88rem;line-height:1.5}
.kypsiseteade p{margin:0}
.kypsis-rida{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px}
.kypsis-ikoon{width:86px;height:86px;flex:none;display:block;margin-top:-2px;border-radius:50%;object-fit:cover}
@media(max-width:520px){.kypsis-ikoon{width:64px;height:64px}}
.kypsiseteade .nupurida{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
/* Nõustumine on positiivne tegevus — roheline eristab selle punastest
   „osta“ ja „kustuta“ nuppudest. */
.nupp-roheline{background:var(--roheline);color:#fff;border-color:var(--tint)}
.nupp-kollane{background:var(--kollane);color:var(--tint);border-color:var(--tint)}
.hooldus-riba{background:var(--tint);color:#fff;font-size:.85rem;text-align:center;padding:8px 14px}
.hooldus-riba .hooldus-nupp{padding:5px 12px;font-size:.78rem;margin-left:8px;box-shadow:2px 2px 0 #000;border-radius:8px}
@media(max-width:520px){.kypsiseteade{left:8px;right:8px;bottom:8px;max-width:none}}

/* ---------- päise kohandumine (peab jääma faili lõppu) ---------- */
/* Keskmisel laiusel kitsendame linke, et menüü mahuks ikka ühele reale
   ega lükkaks kogu lehte allapoole. */
@media(max-width:1080px){
  .pais{gap:10px;padding:16px 18px}
  .pais nav a{padding:9px 9px;font-size:.78rem;letter-spacing:.04em}
}
@media(max-width:820px){
  .pais{padding:12px 14px;gap:8px}
  .pais nav a{padding:8px 7px;font-size:.74rem;letter-spacing:.02em}
  .pais-lingid{gap:0}
  /* Telefonis on ekraaniruum sisu jaoks — märk väiksemaks ja päis kokku,
     et menüü ei lükkaks lehe algust ekraanilt välja. */
  .logo-badge img{height:54px;width:54px}
  .pais nav{flex:1 1 100%;justify-content:center;gap:6px}
  .pais-lingid{justify-content:center}
}

/* ---------- avalehe sammud + videokast ---------- */
/* Kaart on tulp ja nupp surutakse alati põhja — kolm nuppu on ühel joonel,
   ükskõik kui pikk tekst kaardil on. */
.sammud li{display:flex;flex-direction:column}
.samm-play{display:flex;align-items:center;gap:8px;margin-top:auto;
  align-self:flex-start;
  background:var(--paber);border:2px solid var(--tint);border-radius:999px;
  padding:8px 14px;font:inherit;font-size:.85rem;font-weight:700;color:var(--tint);
  cursor:pointer;box-shadow:2px 2px 0 var(--tint)}
.samm-play[aria-expanded="true"]{background:var(--tint);color:var(--paber)}
.play-ikoon{display:inline-grid;place-items:center;width:22px;height:22px;flex:none;
  background:var(--punane);color:#fff;border-radius:50%;font-size:.6rem;padding-left:2px}
.samm-play[aria-expanded="true"] .play-ikoon{background:var(--kollane);color:var(--tint)}

.sammu-video{position:relative;margin:18px auto 0;background:var(--valge);
  border:var(--joon);border-radius:var(--nurk);box-shadow:var(--vari-suur);
  padding:12px;max-width:680px}
/* Video TERVENA, mitte kärbituna — cover lõikas servad maha (kasutaja viga). */
.sammu-video-sisu video,.sammu-video-sisu img{display:block;width:100%;height:auto;
  max-height:72vh;object-fit:contain;border-radius:10px;background:#000}
/* Ristike on video enda nurgas, mitte kasti taga — alati näha ja käeulatuses. */
.sammu-video .aken-sulge{position:absolute;top:22px;right:22px;z-index:2}


/* ---------- aadressiotsingu rippmenüü + akna viimistlus ---------- */
.aadressi-kast{position:relative}
.aadressi-pakkumised{position:absolute;top:100%;left:0;right:0;z-index:40;
  margin:4px 0 0;padding:0;list-style:none;background:var(--valge);
  border:2px solid var(--tint);border-radius:12px;box-shadow:var(--vari);
  max-height:260px;overflow-y:auto}
.aadressi-pakkumised li{padding:10px 14px;cursor:pointer;font-size:.92rem;
  border-bottom:1px solid var(--paber-tume)}
.aadressi-pakkumised li:last-child{border-bottom:none}.aadressi-pakkumised li.aktiivne{background:var(--kollane)}
.aadressi-pakkumised li small{display:block;color:var(--hall)}

/* Akende sulgemisnupp: nulli üldine nupustiil, mis venitas selle ovaaliks. */
/* Sulgemisnupp peab silma torkama: punane ring valge ristiga, alati sama
   kohas ka kerides (päis on kleepuv). */
.oigus-aken .aken-sulge,.sammu-video .aken-sulge{
  width:44px;height:44px;min-width:0;padding:0;border-radius:50%;
  display:grid;place-items:center;font-size:1.45rem;line-height:1;font-weight:800;
  background:var(--punane);color:#fff;border:2px solid var(--tint);
  box-shadow:2px 2px 0 var(--tint);cursor:pointer;flex:none}
/* Pika teksti lõpus ei pea üles tagasi kerima: kleepuv Sulge-nupp all paremal. */
.oigus-aken-sisu::after{content:"";display:block;height:6px}
.aken-sulge-all{position:sticky;bottom:10px;float:right;margin:0 4px 4px 0;
  display:inline-flex;align-items:center;gap:8px;padding:11px 20px;
  background:var(--tint);color:var(--paber);border:2px solid var(--tint);
  border-radius:999px;font:inherit;font-weight:800;font-size:.92rem;cursor:pointer;
  box-shadow:3px 3px 0 var(--punane)}
/* Akna sees on pealkirjade punased triibud diskreetsemad; tiitlil pole üldse. */
.oigus-aken-pais h2{padding-bottom:0}
.oigus-aken-pais h2::after{display:none}
.oigus-aken-sisu h2{padding-bottom:7px}
.oigus-aken-sisu h2::after{width:36px;height:4px}


/* ---------- laoseis ja allahindlus ---------- */
.silt-otsas{display:inline-block;background:var(--hall);color:#fff;font-weight:800;
  font-size:.72rem;letter-spacing:.08em;padding:4px 10px;border-radius:8px;
  border:2px solid var(--tint)}
.vana-hind{color:var(--hall);font-weight:400;margin-right:6px}
.soodushind{color:var(--punane)}


/* ---------- tellimuse jälgimisrada ---------- */
.jalg-rada{list-style:none;margin:20px 0 0;padding:0;max-width:520px;
  display:grid;gap:0}
.jalg-rada li{display:flex;gap:14px;align-items:flex-start;position:relative;
  padding:0 0 26px 0}
.jalg-rada li:not(:last-child)::before{content:"";position:absolute;left:17px;top:36px;
  bottom:2px;width:3px;background:var(--paber-tume);border-radius:2px}
.jalg-rada li.tehtud:not(:last-child)::before{background:var(--roheline)}
.jalg-tapp{flex:none;width:36px;height:36px;border-radius:50%;display:grid;
  place-items:center;font-weight:800;font-size:.9rem;background:var(--valge);
  border:2px solid var(--paber-tume);color:var(--hall)}
.jalg-rada li.tehtud .jalg-tapp{background:var(--roheline);border-color:var(--tint);color:#fff}
.jalg-rada li.praegune .jalg-tapp{background:var(--kollane);border-color:var(--tint);
  color:var(--tint);box-shadow:2px 2px 0 var(--tint)}
.jalg-rada li.praegune strong{font-size:1.05rem}
.jalg-rada li:not(.tehtud):not(.praegune){opacity:.55}


/* Abi-mull telefonis: hõljuv mull ei mahu kitsale ekraanile ära — selle asemel
   kinnitub selgitus ekraani alaserva täislaiuses. */
@media(max-width:640px){
  .abi-mull{position:fixed;left:10px;right:10px;bottom:10px;top:auto;
    transform:none;width:auto;z-index:80;font-size:.85rem}
  .abi-mull::after{display:none}
}

/* ---------- admini ülevaade ---------- */
.yle-kaardid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:14px;margin-top:6px}
.yle-kaart{display:grid;gap:2px;justify-items:start;text-decoration:none;
  color:var(--tint);background:var(--valge);border:var(--joon);
  border-radius:var(--nurk);box-shadow:var(--vari);padding:16px 18px}
.yle-kaart strong{font-family:var(--kiri-pea);font-size:1.7rem;line-height:1.1}
.yle-kaart span{font-weight:700;font-size:.88rem}
.yle-kaart small{font-weight:400;color:var(--hall)}
.yle-kaart.rohk{background:var(--kollane)}
.yle-kaart.hoiatus{background:#fdeceb}
/* aktiivne menüüpunkt: tead alati, mis lehel oled */
.admin-menyy a.aktiivne{background:var(--tint);color:var(--paber)}

/* ---------- tellimuste olekud ja tabid ---------- */
.olek-margis{display:inline-block;padding:3px 10px;border-radius:999px;
  font-size:.74rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  border:2px solid var(--tint);color:#fff;vertical-align:middle}
.olek-ootel{background:var(--kollane);color:var(--tint)}
.olek-makstud{background:var(--roheline)}
.olek-töös,.olek-toos{background:var(--sinine)}
.olek-saadetud{background:var(--tint)}
.olek-tühistatud,.olek-tyhistatud{background:var(--punane)}
.tellimuse-tabid{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px}
.tellimuse-tabid a{display:inline-flex;gap:7px;align-items:center;
  padding:9px 14px;border:2px solid var(--tint);border-radius:999px;
  background:var(--valge);color:var(--tint);font-weight:700;font-size:.85rem;
  text-decoration:none;box-shadow:2px 2px 0 var(--tint)}
.tellimuse-tabid a.aktiivne{background:var(--tint);color:var(--paber)}
.tellimuse-tabid .arv{display:inline-grid;place-items:center;min-width:20px;
  height:20px;padding:0 5px;border-radius:10px;background:var(--punane);
  color:#fff;font-size:.7rem;border:1.5px solid currentColor}
.tellimuse-tabid a.aktiivne .arv{border-color:var(--paber)}


/* ---------- KKK ---------- */
.kkk-rada{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 0}
.kkk-rada a{display:inline-block;padding:7px 13px;border:2px solid var(--tint);
  border-radius:999px;background:var(--valge);color:var(--tint);font-weight:700;
  font-size:.82rem;text-decoration:none;box-shadow:2px 2px 0 var(--tint)}
.kkk-rada-silt{font-weight:800;font-size:.78rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--hall);align-self:center}
/* (topelt scroll-behavior eemaldatud: kirjutas reduced-motion lahtestuse yle) */
.kkk-plokk{max-width:760px}
.kkk-kirje{background:var(--valge);border:var(--joon);border-radius:12px;
  box-shadow:var(--vari);margin:0 0 10px;overflow:hidden}
.kkk-kirje summary{cursor:pointer;font-weight:700;font-size:1rem;
  padding:14px 18px;list-style:none;display:flex;gap:10px;align-items:baseline}
.kkk-kirje summary::-webkit-details-marker{display:none}
.kkk-kirje summary::before{content:"+";flex:none;width:22px;height:22px;
  display:inline-grid;place-items:center;background:var(--kollane);
  border:2px solid var(--tint);border-radius:6px;font-size:.95rem;line-height:1;
  transform:translateY(2px);transition:transform var(--t-1) var(--e-valja)}
.kkk-kirje[open] summary::before{content:"−";transform:translateY(2px) rotate(180deg)}
.kkk-kirje[open] summary{border-bottom:1px solid var(--paber-tume)}
.kkk-vastus{padding:12px 18px 16px 50px;line-height:1.65}
@media(max-width:520px){.kkk-vastus{padding-left:18px}}


/* ---------- akordion samas keeles mis KKK kaardid ---------- */
.akordion details{background:var(--valge);border:var(--joon);border-radius:12px;
  box-shadow:var(--vari);margin:0 0 10px;overflow:hidden}
.akordion summary{cursor:pointer;font-weight:700;padding:13px 16px;list-style:none;
  display:flex;gap:10px;align-items:baseline}
.akordion summary::-webkit-details-marker{display:none}
.akordion summary::before{content:"+";flex:none;width:22px;height:22px;
  display:inline-grid;place-items:center;background:var(--kollane);
  border:2px solid var(--tint);border-radius:6px;font-size:.95rem;line-height:1;
  transform:translateY(2px)}
.akordion details[open] summary::before{content:"−"}
.akordion details[open] summary{border-bottom:1px solid var(--paber-tume)}
.akordion details > p{padding:12px 16px 14px 48px;margin:0;line-height:1.6}
@media(max-width:520px){.akordion details > p{padding-left:16px}}


/* ---------- kiibistiilis tekstilingid ---------- */
.linknupp{display:inline-block;text-decoration:none;font-weight:700;font-size:.9rem;
  color:var(--tint);background:var(--valge);border:2px solid var(--tint);
  border-radius:999px;padding:8px 16px;box-shadow:2px 2px 0 var(--tint);
  transition:color var(--t-1) var(--e-valja),background-color var(--t-1) var(--e-valja),transform var(--t-1) var(--e-valja),box-shadow var(--t-1) var(--e-valja)}


/* ---------- admini teavitused ---------- */
.admin-teavitused{background:#fff7e8;border:2px solid var(--kollane);border-radius:12px;
  margin:0 0 22px;box-shadow:var(--vari)}
.admin-teavitused summary{cursor:pointer;font-weight:800;padding:12px 16px;
  list-style:none;display:flex;gap:10px;align-items:center}
.admin-teavitused summary::-webkit-details-marker{display:none}
.admin-teavitused summary::before{content:"⚠";font-size:1.05rem}
.admin-teavitused .arv{display:inline-grid;place-items:center;min-width:22px;height:22px;
  padding:0 6px;border-radius:11px;background:var(--punane);color:#fff;
  font-size:.75rem;border:1.5px solid var(--tint)}
.admin-teavitused ul{margin:0;padding:0 16px 12px 20px}
.admin-teavitused li{margin:5px 0}
.admin-teavitused a{color:var(--tint);text-decoration:underline;
  text-decoration-color:var(--kollane);text-decoration-thickness:2px}


/* ---------- pooleli vormistamise riba ---------- */
/* Õhuke riba lehe allservas, ei kata sisu nurgas nagu varem. */
.mustandi-vidin{position:fixed;left:0;right:0;bottom:0;z-index:58;
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  background:var(--valge);border-top:3px solid var(--kollane);
  box-shadow:0 -3px 0 rgba(26,26,26,.12);
  /* iPhone'i alumine turvatsoon: muidu jääb × iOS-i enda riba alla ja
     puuted lähevad brauserile, mitte nupule */
  padding:8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
  font-size:.8rem;line-height:1.35}
.mustandi-vidin p{margin:0}
.mustandi-vidin p strong:first-child{margin-right:6px}
.vidin-nupud{display:inline-flex;align-items:center;gap:10px;flex-shrink:0}
.mustandi-vidin .nupp{padding:6px 14px;font-size:.78rem;white-space:nowrap}
/* viimased 10 s: +3 min nupp väriseb ja paisub */
.vidin-lisa.haire{animation:vidin-varin var(--t-3) linear infinite;
  background:var(--punane);color:#fff;transform:scale(1.35)}
@keyframes vidin-varin{
  0%,100%{transform:scale(1.35) rotate(0)}
  25%{transform:scale(1.4) rotate(-6deg)}
  75%{transform:scale(1.4) rotate(6deg)}
}
/* aeg täis: riba vajub alla ära */
.mustandi-vidin.lendab{animation:vidin-minema var(--t-4) ease-in forwards}
@keyframes vidin-minema{
  20%{transform:translateY(-6px)}
  100%{transform:translateY(110%);opacity:.2}
}
@media(prefers-reduced-motion:reduce){
  .vidin-lisa.haire{animation:none}
  .mustandi-vidin.lendab{animation:none;opacity:0;transition:opacity var(--t-3)}
}
.vidin-kell{color:var(--hall);font-size:.8rem}
.vidin-kell strong{color:var(--punane);font-variant-numeric:tabular-nums}
.vidin-sulge{width:28px;height:28px;
  padding:0;min-width:0;border-radius:50%;display:grid;place-items:center;
  font-size:1rem;line-height:1;font-weight:800;background:var(--punane);color:#fff;
  border:2px solid var(--tint);box-shadow:2px 2px 0 var(--tint);cursor:pointer}
.vidin-lisa{margin-left:6px;padding:2px 9px;min-width:0;font-size:.72rem;font-weight:800;
  background:var(--valge);color:var(--tint);border:1.5px solid var(--tint);
  border-radius:999px;box-shadow:none;cursor:pointer;line-height:1.4}
@media(max-width:560px){
  .mustandi-vidin{gap:8px;padding:8px 10px;font-size:.74rem}
}

/* 📸 toote lisapildid — pisipildiriba suure pildi all */
/* Pisipildid ei tohi suure pildi varju ega üksteise varju sisse joosta (omanik: „ikka ju koos asjad”):
   suure pildi vari on 8–9 px, valitud pisipildi punane raam 3 px + 2 px vahe → rida algab 24 px allpool. */
.toote-pisipildid{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px;padding:3px 4px 6px}
.toote-pisi{padding:0;border:var(--joon);border-radius:10px;overflow:hidden;background:#fff;
  cursor:pointer;width:72px;height:72px;box-shadow:2px 2px 0 var(--tint)}
.toote-pisi img{width:100%;height:100%;object-fit:cover}
.toote-pisi.valitud{outline:3px solid var(--punane);outline-offset:2px}
/* Telefonis murdus pisipildirida kahele reale ja lõikas pildid pooleks —
   nüüd on see üks servast serva libisev rida. */
/* Kerirea konteiner: nooled istuvad rea servas. */
.pisi-riba{position:relative}
.pisi-nool{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:34px;height:34px;padding:0;border-radius:50%;border:var(--joon);
  background:var(--valge);box-shadow:2px 2px 0 var(--tint);
  font-size:1rem;line-height:1;cursor:pointer;display:none;
}
.pisi-riba.keritav .pisi-nool{display:grid;place-items:center}/* yldine button:hover transform asendaks translateY(-50%) — sama viga mis galerii-noolel */
.pisi-nool:active{transform:translateY(-50%) scale(.96)}
.pisi-nool[hidden]{display:none !important}
.pisi-nool.vasak{left:-4px}
.pisi-nool.parem{right:-4px}

@media (max-width:640px){
  /* Nowrap-rea min-content oli terve rea laius (400 px) → võrgu veerg paisus
     üle ekraani ja keha lõikas parema serva ära. min-width:0 lubab kokku suruda. */
  .toote-paigutus > *,.kujundaja-kest > *,.toote-pilt > *{min-width:0}
  .toote-pisipildid{
    flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;min-width:0;
    padding:4px 4px 10px;gap:12px;margin-top:18px;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .toote-pisipildid::-webkit-scrollbar{display:none}
  .toote-pisipildid > *{flex:0 0 auto;scroll-snap-align:start}
  .toote-pisi{width:60px;height:60px}
}

/* 🎉 tasuta tarne saavutatud — rida hüppab, riba välgatab kuldselt */
@keyframes tarne-tada{
  0%{transform:scale(1)}
  18%{transform:scale(1.18) rotate(-2deg)}
  38%{transform:scale(.97) rotate(1.5deg)}
  58%{transform:scale(1.08) rotate(-1deg)}
  100%{transform:scale(1) rotate(0)}
}
.tarne-tada strong{animation:tarne-tada var(--t-4) cubic-bezier(.34,1.56,.64,1);transform-origin:left center}
@keyframes tarne-sara{
  0%{box-shadow:0 0 0 0 rgba(240,180,20,.85)}
  70%{box-shadow:0 0 0 14px rgba(240,180,20,0)}
  100%{box-shadow:0 0 0 0 rgba(240,180,20,0)}
}
.tarne-taidetud{animation:tarne-sara var(--t-5) var(--e-valja)}
@media(prefers-reduced-motion:reduce){
  .tarne-tada,.tarne-taidetud{animation:none}
}

/* 🚚 tasuta tarne — kaubik sõidab riba kohal (video 85KB, mängib korra) */
.tarne-auto{width:clamp(200px,30vw,380px);height:auto;pointer-events:none;flex:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 5%,#000 100%),
                     linear-gradient(to right,transparent 0,#000 5%,#000 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,transparent 0,#000 5%,#000 100%),
             linear-gradient(to right,transparent 0,#000 5%,#000 100%);
  mask-composite:intersect}
/* "Tarne on tasuta!" — suurem ja hüppab, kuni kaubik sõidab */
p[data-tarne-tasuta] strong{display:inline-block;font-size:clamp(1.05rem,1.9vw,1.45rem);
  color:var(--roheline);letter-spacing:-.01em}
@keyframes tarne-hyppab{
  0%,100%{transform:translateY(0) rotate(0)}
  25%{transform:translateY(-5px) rotate(-2deg)}
  50%{transform:translateY(0) rotate(0)}
  75%{transform:translateY(-2px) rotate(1.5deg)}
}
p[data-tarne-tasuta].soidab strong{animation:tarne-hyppab var(--t-5) var(--e-sisse-valja) 3}
@media(prefers-reduced-motion:reduce){p[data-tarne-tasuta].soidab strong{animation:none}}
/* "Tarne on tasuta!" + kaubik samal real */
p[data-tarne-tasuta]{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
p[data-tarne-tasuta][hidden]{display:none}
@media(prefers-reduced-motion:reduce){.tarne-auto{display:none}}

/* 📸 kujundaja: päris mütsid klientidel */
.paris-mutsid{margin-top:16px}
.paris-pealkiri{margin:0 0 8px;font-weight:700;font-size:.92rem}
.paris-rida{display:flex;gap:8px;flex-wrap:wrap}
.paris-pilt{padding:0;border:var(--joon);border-radius:10px;overflow:hidden;background:#fff;
  cursor:zoom-in;width:76px;height:76px;box-shadow:2px 2px 0 var(--tint)}
.paris-pilt img{width:100%;height:100%;object-fit:cover}

/* kujundaja tooteinfo — sama laius mis kujundaja kest */
.kujundaja-info{max-width:760px;margin-top:26px}

.toote-kirjeldus{margin:0 0 16px;font-size:.95rem;color:#3d4048}

/* 🎁 kingituse valik ostukorvis */
.kingi-kast{margin-top:22px;border:var(--joon);border-radius:12px;padding:14px 16px;
  background:var(--valge);box-shadow:3px 3px 0 var(--tint)}
.kingi-pealkiri{margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kingi-kast .disainivalik{display:flex;gap:10px;flex-wrap:wrap}
.kingi-kast .disain{position:relative;display:grid;justify-items:center;gap:4px;width:96px;
  border:2px solid var(--tint);border-radius:10px;padding:6px;cursor:pointer;background:#fff}
.kingi-kast .disain img{width:64px;height:64px;object-fit:contain}
.kingi-kast .disaini-nimi{font-size:.72rem;text-align:center;line-height:1.2;word-break:break-word}
.kingi-kast .disain input{position:absolute;opacity:0;pointer-events:none}
.kingi-kast .disain:has(input:checked){outline:3px solid var(--punane);outline-offset:1px}

/* ---------- NFC-ripatsi profiil (/r/KOOD) ---------- */
/* See leht avaneb tänaval, võõra inimese telefonis, sageli kiirustades —
   seepärast üks suur nimi, üks suur helistamisnupp ja mitte midagi muud. */
.ripats-leht{max-width:460px;margin:26px auto 40px;padding:0 4px}
.ripats-kaart{
  border:var(--joon);border-radius:18px;background:#fff;
  box-shadow:5px 5px 0 var(--tint);padding:22px 20px;text-align:center;
}
.ripats-nimi{font-size:2.1rem;margin:0 0 6px;overflow-wrap:anywhere}
.kokkuvote-rida span{min-width:0;overflow-wrap:anywhere}
.ripats-info{margin:0 0 16px;color:#3d4048}
.ripats-helista{display:block;width:100%;font-size:1.15rem;padding:16px 18px;margin:6px 0 8px}
.ripats-tel{font-family:var(--kiri-pea);font-weight:700;margin:0 0 14px}
.ripats-jalus{text-align:center;margin-top:14px;font-size:.8rem}
.ripats-vorm{text-align:left;padding:0;box-shadow:none;border:none;background:none}
.ripats-vorm label{display:block;margin-top:12px;font-weight:700}
.ripats-vorm input,.ripats-vorm textarea{width:100%}
.ripats-linnuke{
  display:flex;gap:8px;align-items:flex-start;margin-top:14px;
  font-weight:400;font-size:.86rem;line-height:1.4;
}
.ripats-linnuke input{width:auto;margin-top:3px;flex:0 0 auto}
.ripats-kustuta{margin-top:16px;padding-top:14px;border-top:var(--joon)}
/* Teine number on varuvariant — väiksem ja tagasihoidlikum kui põhinupp. */
.ripats-helista2{font-size:1rem;padding:12px 16px;margin-top:2px}

/* Ujuv mini-eelvaade kujundajas: värvi valides näed kohe, MIS mütsiks see tegi,
   ka siis kui suur pilt on ekraanilt väljas. Klõps kerib suure pildi juurde. */
#mini-eelvaade{
  position:fixed;top:10px;left:50%;transform:translate(-50%,-120%);z-index:120;
  display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;
  background:var(--valge);border:var(--joon);border-radius:14px;
  box-shadow:4px 4px 0 var(--tint);cursor:pointer;max-width:92vw;
  transition:transform var(--t-3) var(--e-valja);
}
#mini-eelvaade.nahtav{transform:translate(-50%,0)}
#mini-eelvaade img{width:64px;height:48px;object-fit:cover;border-radius:8px}
#mini-eelvaade span{font-family:var(--kiri-pea);font-weight:700;font-size:.85rem}

/* Avalehe „Miks charms.ee" kolm veergu */
.miks-veerud{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.miks-veerud h3{margin:0 0 8px;font-size:1.05rem}
.miks-veerud p{margin:0;color:#3d4048}
@media (max-width:860px){.miks-veerud{grid-template-columns:1fr;gap:18px}}

/* Abitee kujundajas: „kujundage minu eest" + kindlustunde rida */
.abi-kujundus{background:var(--paber);border:var(--joon);border-radius:12px;
  padding:10px 14px;margin:14px 0 6px}
.abi-kujundus summary{font-weight:700;cursor:pointer}
.abi-kujundus-luliti{display:flex;gap:10px;align-items:flex-start;margin:10px 0;
  font-weight:400;line-height:1.45}
.abi-kujundus-luliti input{margin-top:3px;flex:0 0 auto}
.abi-kujundus textarea{width:100%}
.kindlustunne{max-width:64ch}

/* Otsas mütsivärv: tuhm svatš punase kriipsuga, valida ei saa. */
.kangas-otsas{opacity:.45;cursor:not-allowed;position:relative}
.kangas-otsas span::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(45deg, transparent 46%, var(--punane) 46% 54%, transparent 54%);
  border-radius:inherit;
}

/* Kujunduse mõõt kaardil — väike hall rida nime all. */
.disaini-suurus{display:block;font-weight:400;color:var(--hall);font-size:.68rem;margin-top:1px}

/* Värvifilter: värviringid siltide all. */
.varvifilter{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 4px;align-items:center}
.varvifilter .silt-nimi{font-size:.72rem;font-weight:700;color:var(--hall);margin-right:2px}
.varvinupp{
  width:26px;height:26px;border-radius:50%;border:2px solid var(--tint);
  padding:0;cursor:pointer;box-shadow:1px 1px 0 var(--tint);flex:0 0 auto;
}
.varvinupp.valitud{outline:2px solid var(--punane);outline-offset:1px}
.varvinupp:active{transform:scale(.95)}
.varvinupp.koik{background:conic-gradient(#d92b1c,#e8a91c,#4a7a44,#2e5e8c,#7a4a8c,#d92b1c);
  font-size:0}

/* [hidden] peab ALATI peitma — mõni display-reegel lõi HTML-i hidden-atribuudi
   üle ja peidetud plokid jätsid lehele tühje auke (embleemikujundaja vasak veerg). */
[hidden]{display:none !important}


/* ---------- HOVER AINULT HIIREGA (2026-09) ----------
   Puutel jai :hover kleepuma (kaart tostetud, nupp vajutatud). Koik tipptaseme hover-
   reeglid on siin (hover:hover) all; JS-pool oli juba guarditud. */
@media (hover:hover){
.logo:hover{transform:rotate(0deg) translate(-1px,-1px);box-shadow:6px 6px 0 var(--tint)}
.pais nav a:hover{background:var(--kollane);border-color:var(--tint);
  box-shadow:3px 3px 0 var(--tint);transform:translate(-1px,-1px);}
.pais nav a.korv-link:hover{background:var(--kollane);border-color:var(--tint);
  box-shadow:4px 4px 0 var(--tint);transform:translate(-1px,-2px) rotate(-3deg);}
.pais nav a.korv-link.video-korv:hover{background:transparent;
  box-shadow:none;transform:translate(-1px,-2px) rotate(-3deg)}
.keel:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--tint)}
.keel.aktiivne:hover{background:var(--tint);color:var(--valge)}
.toast-sulge:hover{transform:none;box-shadow:none;color:var(--tint)}
.siltnupp:hover{background:var(--kollane)}
.nupp:hover{transform:translate(-2px,-2px);box-shadow:6px 7px 0 var(--tint);
  background-position:100% 0}
.nupp-tyhi:hover{color:#fff}
button:hover{transform:translate(-2px,-2px);box-shadow:6px 7px 0 var(--tint);
  background-position:100% 0}
.kaart:hover{transform:rotate(0deg) translate(-3px,-3px);box-shadow:8px 9px 0 var(--tint)}
.kustuta-nupp:hover{background:#fdeae7;transform:none;box-shadow:none}
.kategooria:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--tint);background:var(--kollane)}
.kategooria.aktiivne:hover{background:var(--tint)}
.toote-pisi:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--tint);border-color:var(--tint)}
.akordion summary:hover,.kkk-kirje summary:hover{background:color-mix(in srgb,var(--kollane) 35%,var(--valge))}
.linknupp:hover{background:var(--kollane);transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--tint)}
.jalus a:hover{color:var(--valge);text-decoration:underline}
.pisi:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--tint)}
.rivet:hover{background:rgba(255,255,255,.9);transform:translate(-50%,-50%) scale(1.15);animation:none}
.kangas:hover span{transform:translate(-1px,-1px)}
.logo-graffiti:hover{box-shadow:none}
.logo-graffiti:hover img{transform:rotate(-3deg) scale(1.06)}
.toote-link:hover{color:var(--punane-tume);text-decoration:underline}
.logo-badge:hover{box-shadow:none}
.logo-badge:hover img{transform:rotate(8deg) translate(-1px,-1px);
  box-shadow:4px 5px 0 var(--tint)}
.toon:hover{transform:scale(1.2)}
@media (hover:hover){.rada a:hover{border-color:var(--tint);background:var(--kollane);text-decoration:none;
    box-shadow:2px 2px 0 var(--tint);transform:translate(-1px,-1px)}}
.teegikuju:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--tint)}
.failinupp:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--tint)}
.disain:hover img{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--tint)}
.valikukaart:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--tint)}
.suumi-nupp:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--tint)}
.muster:hover .muster-ruut{transform:translate(-1px,-1px)}
.admin-menyy a:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--tint)}
.nupp-mini:hover, button.nupp-mini:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--tint)}
@media(hover:hover) and (pointer:fine){.disain:hover img{
    transform:scale(2.15);position:relative;z-index:40;
    box-shadow:0 6px 22px rgba(34,37,43,.45);
    transition:transform var(--t-1) var(--e-valja);
  }}
.rivet:hover, .rivet.valitud:hover{box-shadow:none}
.rivet.valitud:hover{box-shadow:0 0 0 2px var(--valge), 0 0 0 4px var(--tint)}
.galerii-nool:hover{transform:translateY(-50%) scale(1.08);box-shadow:0 3px 12px rgba(0,0,0,.5)}
.disainikaart:hover{border-color:var(--tint)}
.soovitus-kaart:hover{transform:translate(-1px,-2px);box-shadow:4px 4px 0 var(--tint)}
.korv-ujuv:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--tint)}
.kar-nool:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--tint)}
.jaga-link:hover{background:var(--kollane);transform:translate(-1px,-1px);
  box-shadow:3px 3px 0 var(--tint)}
.hoolduse-logo:hover{transform:rotate(360deg) scale(1.08);box-shadow:5px 5px 0 var(--tint);cursor:pointer}
.abi:hover .abi-mull{opacity:1;visibility:visible}
.tekstinupp:hover{box-shadow:none;text-decoration:none}
.aken-sulge:hover{background:var(--kollane);box-shadow:2px 2px 0 var(--tint)}
.nupp-roheline:hover{background:#276a42;color:#fff}
.nupp-kollane:hover{background:#f2b52a;color:var(--tint)}
.samm-play:hover{background:var(--kollane);box-shadow:2px 2px 0 var(--tint)}
.aadressi-pakkumised li:hover{background:var(--kollane)}
.oigus-aken .aken-sulge:hover, .sammu-video .aken-sulge:hover{background:var(--tint);color:var(--kollane);box-shadow:2px 2px 0 var(--punane);transform:none}
.aken-sulge-all:hover{background:var(--punane);color:#fff;box-shadow:3px 3px 0 var(--tint)}
.yle-kaart:hover{transform:translate(-1px,-2px);box-shadow:6px 7px 0 var(--tint)}
.kkk-rada a:hover{background:var(--kollane)}
.kkk-kirje summary:hover{background:var(--paber)}
.akordion summary:hover{background:var(--paber)}
.linknupp:hover{background:var(--kollane);transform:translate(-1px,-1px);
  box-shadow:3px 3px 0 var(--tint);text-decoration:none}
.admin-teavitused a:hover{text-decoration-color:var(--punane)}
.vidin-sulge:hover{background:var(--tint);color:var(--kollane);box-shadow:2px 2px 0 var(--punane)}
.vidin-lisa:hover{background:var(--kollane);box-shadow:none}
.pisi-nool:hover{transform:translateY(-50%) scale(1.08)}
.paris-pilt:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--tint)}
.varvinupp:hover{transform:scale(1.12);box-shadow:1px 1px 0 var(--tint)}
}

/* ---------- AVALEHE LUGU (2026-09): klops - suunad - toestus - firmadele - lemmik - kkk - lopp ---------- */
.kangelane .foto video{display:block;width:100%;height:auto;border:8px solid var(--valge);outline:var(--joon);
  border-radius:var(--nurk);box-shadow:var(--vari-suur);background:var(--paber-tume)}
.klops-paigutus{display:grid;grid-template-columns:minmax(220px,380px) 1fr;gap:32px;align-items:center}
@media(max-width:760px){.klops-paigutus{grid-template-columns:1fr}}
/* poorlev embleem: 36 kaadrit yhel WebP-lehel, kaader = taustapositsioon; lohistus keerab */
/* width:100% on kohustuslik: grid-elemendil margin:auto kahandas kasti sisu laiuseks (0 px) */
.pooris{position:relative;width:100%;max-width:380px;aspect-ratio:1;margin:0 auto;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.pooris.lohistab{cursor:grabbing}
.pooris-kaader{width:100%;height:100%;background-repeat:no-repeat;background-size:auto 100%;background-position:0 0;
  /* enne sprite'i saabumist: vaikne paberiketas samas kohas, et plokk ei hüppaks */
  border-radius:50%;background-color:var(--paber-tume);transition:background-color var(--t-4) var(--e-valja)}
.pooris.valmis .pooris-kaader{background-color:transparent}
.pooris > img{width:100%;height:auto}
.pooris-vari{position:absolute;left:16%;right:16%;bottom:3%;height:7%;border-radius:50%;background:rgba(34,37,43,.2);filter:blur(4px);z-index:-1}
.pooris-vihje{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);background:var(--tint);color:#fff;
  font-size:.76rem;font-weight:600;padding:5px 12px;border-radius:999px;white-space:nowrap;
  box-shadow:2px 3px 0 rgba(34,37,43,.25);pointer-events:none;transition:opacity var(--t-3) var(--e-valja)}
.pooris.puudutatud .pooris-vihje{opacity:0}
/* Klõpsu-plokk: vahetuvad embleemifotod (samal taustal → vahetus paistab kui üks märk teise vastu) */
.klops-vahetus{cursor:pointer}
.klops-kaader{position:absolute;inset:0;opacity:0;transform:scale(.96);transition:opacity var(--t-4) var(--e-valja),transform var(--t-4) var(--e-valja)}
.klops-kaader.aktiivne{opacity:1;transform:none}
.klops-kaader img{display:block;width:100%;height:100%;object-fit:cover;border-radius:16px}
.klops-punktid{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:8px;z-index:1}
.klops-punktid button{width:12px;height:12px;padding:0;border-radius:50%;border:2px solid var(--tint);background:var(--valge);cursor:pointer}
.klops-punktid button[aria-pressed="true"]{background:var(--kollane)}
@media(prefers-reduced-motion:reduce){.klops-kaader{transition:none}}
.mikrosammud{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:samm}
.mikrosammud li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;counter-increment:samm}
.mikrosammud li::before{content:counter(samm);font-family:var(--kiri-pea);font-weight:700;font-size:1.1rem;
  width:44px;height:44px;display:grid;place-items:center;background:var(--kollane);border:var(--joon);
  border-radius:12px;box-shadow:3px 4px 0 var(--tint);transform:rotate(-3deg)}
/* number vasakus veerus üle kahe rea; pealkiri JA lõik paremas — muidu paneb grid lõigu 44 px veergu */
.mikrosammud li::before{grid-column:1;grid-row:1 / span 2}
.mikrosammud li > strong,.mikrosammud li > p{grid-column:2;min-width:0}
.mikrosammud strong{display:block;font-family:var(--kiri-pea);font-weight:500;font-size:.98rem;margin-bottom:2px}
.mikrosammud p{margin:0;color:#3d4048}
.mikrosammud a{color:var(--punane-tume)}
.wizard .kaart{position:relative}
.hind-silt{position:absolute;top:10px;right:10px;background:var(--kollane);border:var(--joon);border-radius:8px;
  padding:3px 9px;font-family:var(--kiri-pea);font-weight:700;font-size:.7rem;letter-spacing:.04em;
  box-shadow:3px 3px 0 var(--tint);transform:rotate(3deg);z-index:2}
.toestus-paigutus{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
@media(max-width:860px){.toestus-paigutus{grid-template-columns:1fr}}
.toestus-fotod{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:6px}
.toestus-fotod a{display:block}
.toestus-fotod img{width:100%;aspect-ratio:1;object-fit:cover;border:5px solid var(--valge);outline:var(--joon);
  border-radius:12px;box-shadow:var(--vari)}
.toestus-fotod a:nth-child(odd) img{transform:rotate(-1.5deg)}
.toestus-fotod a:nth-child(even) img{transform:rotate(1.5deg)}
.toestus-punktid{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:10px}
.toestus-punktid li{padding-left:30px;position:relative}
.toestus-punktid li::before{content:"";position:absolute;left:0;top:6px;width:16px;height:16px;border:var(--joon);
  border-radius:5px;background:var(--roheline);box-shadow:2px 2px 0 var(--tint)}
.tsitaat{margin:14px 0 0;padding:14px 18px;background:var(--valge);border:var(--joon);border-radius:12px;
  box-shadow:var(--vari);font-style:italic}
.tsitaat cite{display:block;font-style:normal;font-size:.85rem;color:var(--hall);margin-top:6px}
.riba-kaart{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;background:var(--tint);
  color:var(--paber);border-radius:var(--nurk);padding:26px 30px;margin:56px 0 0;box-shadow:6px 7px 0 rgba(34,37,43,.3);transform:rotate(-.6deg)}
.riba-kaart h2{color:var(--paber);margin:0 0 8px;padding:0}
.riba-kaart h2::after{display:none}
.riba-kaart p{margin:0;max-width:60ch}
.riba-kaart .nupp{white-space:nowrap}
@media(max-width:700px){.riba-kaart{grid-template-columns:1fr;transform:none}}
.lemmik-paigutus{display:grid;grid-template-columns:minmax(160px,260px) 1fr;gap:26px;align-items:center;
  background:var(--valge);border:var(--joon);border-radius:var(--nurk);padding:22px;box-shadow:var(--vari)}
.lemmik-paigutus img{width:100%;height:auto;border-radius:10px;border:var(--joon)}
.lemmik-paigutus p{margin:0 0 14px}
@media(max-width:600px){.lemmik-paigutus{grid-template-columns:1fr}}
.kkk3 details{background:var(--valge);border:var(--joon);border-radius:12px;box-shadow:var(--vari);margin:0 0 10px;padding:0 16px}
.kkk3 summary{cursor:pointer;font-weight:600;padding:12px 0}
.kkk3 details p{margin:0 0 14px;color:#3d4048}
.lopp{text-align:center;padding:48px 20px 20px}
.lopp h2{padding:0;margin-bottom:8px}
.lopp h2::after{display:none}
.lopp p{margin:0 auto 22px;max-width:44ch;color:#3d4048}
.lopp .nupp-taidetud{font-size:1.1rem;padding:16px 30px}
.lopp .teine{display:block;margin-top:14px;font-size:.95rem}
.lint.seisab .lint-sisu{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.pooris-vihje{display:none}}
/* küpsiseteate ikoon luuakse JS-iga (pilt, siis video) — hoia koht enne laadimist */
/* skip-link: nähtav ainult klaviatuuriga fookuses */
.hyppa{position:absolute;left:12px;top:-60px;z-index:100;background:var(--tint);color:#fff;padding:8px 14px;
  border-radius:8px;font-weight:700;text-decoration:none;transition:top var(--t-1) var(--e-valja)}
.hyppa:focus{top:12px;outline:3px solid var(--kollane)}
.wizard .kaart h2{font-size:1.02rem;font-weight:600;margin:0 0 6px;padding:0}
.wizard .kaart h2::after{display:none}
.kypsis-ikoon{display:block;width:86px;height:86px;flex:none}
.kypsis-ikoon img,.kypsis-ikoon video{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
/* TELEFONI ESIMENE EKRAAN (viie sekundi test): pealkiri → toode → lause → nupud. Enne algas
   foto alles 706 px kõrguselt ja esimene ekraan oli ainult tekst. Tekstikast lahustub
   (display:contents), et pealkiri ja foto saaks järjekorda vahetada. Foto 4:3 kärpes. */
@media(max-width:700px){
  .kangelane{gap:18px}
  .kangelane > div:first-child{display:contents}
  .kangelane h1{order:1;margin-bottom:0}
  .kangelane .foto{order:2;max-width:none;width:100%;transform:none;justify-self:stretch;margin:4px 0 2px}
  .kangelane p{order:3;margin:0}
  .kangelane .teed{order:4}
  .kangelane .hero-slaidid{aspect-ratio:4/3}   /* kärbe järgib admini fookuspunkti (object-position = x/y) → embleem jääb vaatesse */
  .kangelane .hero-slaidid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .kangelane .foto video{aspect-ratio:4/3;object-fit:cover}
}


/* ---------- kavandi prompti generaator: täisekraani aken (lib/prompt.php + prompt.js) ---------- */
.prompt-ava-kast{background:var(--valge);border:var(--joon);border-radius:12px;padding:12px 14px;
  margin:12px 0 4px;box-shadow:var(--vari)}
.prompt-ava-kast p{margin:0 0 10px;font-size:.9rem;line-height:1.45}
.prompt-ava-kast .nupp{padding:11px 18px;font-size:.9rem}
.prompt-aken{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;
  margin:0;border:0;border-radius:0;padding:0;background:var(--paber);color:var(--tint);
  font-family:var(--kiri-sisu);flex-direction:column}
.prompt-aken[open]{display:flex}
.prompt-aken::backdrop{background:rgba(34,37,43,.6)}
html.prompt-lahti{overflow:hidden}
.prompt-pais{display:flex;align-items:flex-start;gap:14px;padding:14px 22px;
  border-bottom:2px solid var(--tint);background:var(--valge);flex:none}
.prompt-pais h2{margin:0;font-size:1.15rem;line-height:1.25}
.prompt-alapealkiri{margin:4px 0 0;font-size:.9rem;color:var(--hall);max-width:70ch}
.prompt-pais .aken-sulge{margin-left:auto}
.prompt-sisu{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:18px 22px 40px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,400px);gap:26px;align-items:start}
.prompt-tulemus{position:sticky;top:0;display:flex;flex-direction:column;gap:14px;min-width:0}
.prompt-vorm{min-width:0}
.prompt-vorm fieldset{border:0;padding:0;margin:0 0 18px;min-width:0}
.prompt-vorm legend,.prompt-vorm .pk-silt{font-weight:700;font-size:.95rem;margin:0 0 6px;display:block;padding:0}
.prompt-vorm input[type=text]{width:100%}
.prompt-vorm .pk-oma{margin-top:10px}
.prompt-vihje{margin:0 0 8px}
.prompt-check{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-weight:400}
.prompt-check input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--punane)}
.prompt-kiibid{display:flex;flex-wrap:wrap;gap:8px}
.pk{position:relative;max-width:100%}
.pk input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.pk span{display:inline-flex;align-items:center;gap:7px;cursor:pointer;max-width:100%;
  border:2px solid var(--tint);border-radius:999px;padding:7px 13px;background:var(--valge);
  font-weight:600;font-size:.88rem;line-height:1.2;user-select:none;box-shadow:2px 2px 0 var(--tint);
  transition:background var(--t-1) var(--e-valja),transform var(--t-1) var(--e-valja)}
.pk .pk-nimi{border:0;padding:0;background:none;box-shadow:none;display:inline}
.pk input:checked+span{background:var(--kollane)}
.pk input:focus-visible+span{outline:3px solid var(--sinine);outline-offset:2px}
.pk-tapp{width:15px;height:15px;border-radius:50%;border:1.5px solid rgba(34,37,43,.45);flex:none;display:inline-block}
.pk-mall{font-size:.86rem}
.pk-mall.aktiivne{background:var(--kollane)}
.pk-varvisoovitus{margin-top:8px}
.prompt-kaks{display:grid;gap:12px}
@media(min-width:620px){.prompt-kaks{grid-template-columns:1fr 1fr}}
.prompt-kast{background:var(--valge);border:var(--joon);border-radius:var(--nurk);padding:14px 16px;
  box-shadow:var(--vari);min-width:0}
.prompt-kast h3{margin:0 0 10px;font-size:1rem}
.prompt-kokkuvote dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 12px;font-size:.86rem}
.prompt-kokkuvote dt{color:var(--hall);font-weight:600}
.prompt-kokkuvote dd{margin:0;display:flex;align-items:center;gap:6px;overflow-wrap:anywhere}
.prompt-valjund textarea{width:100%;min-height:230px;resize:vertical;font:inherit;font-size:.84rem;line-height:1.45;
  border:2px solid var(--tint);border-radius:10px;padding:10px 12px;background:var(--paber);color:var(--tint)}
.prompt-nupud{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.prompt-nupud .nupp{padding:11px 18px;font-size:.9rem}
.prompt-nupud .nupp[disabled]{opacity:.5;cursor:not-allowed}
.prompt-olek{min-height:1.3em;font-size:.88rem;font-weight:700;margin:8px 0 0;color:var(--roheline)}
.prompt-hoiatus{font-size:.86rem;font-weight:700;color:var(--punane-tume);margin:8px 0 0}
.prompt-hoiatus:empty{display:none}
.prompt-juhend ol{padding-left:20px;margin:0;font-size:.9rem;line-height:1.45}
.prompt-juhend li{margin-bottom:8px}
.prompt-lingid{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.prompt-jalus{border-top:2px solid var(--tint);background:var(--valge);padding:12px 22px;
  display:flex;justify-content:flex-end;flex:none}
.prompt-jalus .nupp{padding:11px 20px;font-size:.9rem}
@media(max-width:900px){
  .prompt-sisu{grid-template-columns:1fr;padding:14px 16px 30px;gap:18px}
  .prompt-tulemus{position:static}
  .prompt-pais{padding:12px 14px}
  .prompt-pais h2{font-size:1rem}
  .prompt-alapealkiri{font-size:.84rem}
  .prompt-jalus{padding:10px 14px}
}
@media(hover:hover){
  .pk:hover span{background:color-mix(in srgb,var(--kollane) 35%,var(--valge));transform:translate(-1px,-1px)}
  .pk input:checked+span:hover{background:var(--kollane)}
  .pk-varvisoovitus .toon:hover{transform:translate(-1px,-1px) scale(1.08);box-shadow:2px 2px 0 var(--tint)}
  .nupp-kollane:hover{background:var(--tint);color:var(--kollane)}
}
/* prompti akna sulgemisrist: üldine button-padding venitas ringi pilliks ja peitis ✕ ära */
.prompt-pais .aken-sulge{padding:0;width:38px;height:38px;display:grid;place-items:center;font-size:1.25rem;line-height:1;font-family:var(--kiri-sisu)}
.prompt-pais h2::before,.prompt-pais h2::after{display:none}
.prompt-pais h2{padding:0;border:0}
.prompt-pais .aken-sulge{color:var(--tint)}   /* üldine button{color:#fff} tegi ✕ heledal taustal nähtamatuks */
/* prompti akna mustrikiibid: SVG-joonis kujundaja ruudu sees; 16 kiipi mahuvad ridadesse */
.prompt-vorm .mustrid{gap:8px 10px}
.prompt-vorm .muster{width:52px}
.prompt-vorm .muster-ruut{overflow:hidden;margin:0 auto}
.prompt-vorm .muster-ruut svg{display:block;width:100%;height:100%;border-radius:9px}
.prompt-vorm .muster-nimi{white-space:nowrap}
/* kompaktsem prompti vorm (omanik: "kompaktsemaks ei saa kuidagi?") + kiirvalikud tekstiväljade all */
.prompt-sisu{padding:14px 18px 32px;gap:20px}
.prompt-vorm fieldset{margin:0 0 12px}
.prompt-vorm legend,.prompt-vorm .pk-silt{font-size:.88rem;margin:0 0 4px}
.prompt-vorm input[type=text]{padding:8px 11px;font-size:.9rem}
.prompt-vihje{font-size:.76rem;margin:0 0 4px}
.prompt-kiibid{gap:6px}
.pk span{padding:5px 10px;font-size:.82rem;box-shadow:1px 1px 0 var(--tint);gap:6px}
.pk-tapp{width:13px;height:13px}
.pk-mall{font-size:.8rem;padding:5px 11px}
.prompt-vorm .muster{width:46px}
.prompt-vorm .muster-ruut{width:40px;height:40px;border-radius:9px}
.prompt-vorm .muster-nimi{font-size:.62rem}
.prompt-vorm .pk-oma{margin-top:8px}
.pk-varvisoovitus{margin-top:6px;gap:6px}
.pk-varvisoovitus .toon{width:24px;height:24px}
.pk-kiirid{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.pk-kiir,button.pk-kiir{font:600 .76rem var(--kiri-sisu);padding:4px 9px;border:1.5px solid var(--tint);border-radius:999px;
  background:var(--valge);color:var(--tint);box-shadow:none;cursor:pointer;line-height:1.2}
.prompt-kast{padding:12px 14px}
.prompt-kokkuvote dl{font-size:.82rem;gap:3px 10px}
.prompt-valjund textarea{min-height:200px;font-size:.8rem}
@media(hover:hover){.pk-kiir:hover,button.pk-kiir:hover{background:var(--kollane);transform:none;box-shadow:none}}
/* prompti nupp valikute veeru alguses: tekst ja nupp ühel real, telefonil virnas */
.prompt-ava-yleval{display:flex;align-items:center;gap:14px;margin:0 0 18px}
.prompt-ava-yleval p{margin:0;flex:1;min-width:0}
.prompt-ava-yleval .nupp{flex:none;white-space:nowrap}
@media(max-width:640px){.prompt-ava-yleval{flex-direction:column;align-items:stretch}.prompt-ava-yleval .nupp{text-align:center}}
/* prompti vorm akordionina (omanik 2026-09-23: "liiga kirju on ju"): üks osa lahti, kinnisel real valik näha */
.prompt-osa{border:2px solid var(--tint);border-radius:12px;background:var(--valge);margin:0 0 8px;box-shadow:2px 2px 0 var(--tint)}
.prompt-osa summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:9px 12px;
  font-weight:700;font-size:.9rem;user-select:none;border-radius:10px}
.prompt-osa summary::-webkit-details-marker{display:none}
.prompt-osa summary::before{content:"▸";flex:none;width:14px;color:var(--punane)}
.prompt-osa[open] summary{border-radius:10px 10px 0 0}
.prompt-osa[open] summary::before{content:"▾"}
.prompt-osa-nimi{flex:none}
.prompt-osa-seis{margin-left:auto;font-weight:500;font-size:.78rem;color:var(--hall);min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prompt-osa-seis:empty{display:none}
.prompt-osa-sisu{padding:8px 12px 10px;border-top:2px solid var(--paber-tume)}
.prompt-osa-sisu fieldset{margin:0 0 10px}
.prompt-osa-sisu fieldset:last-child,.prompt-osa-sisu .prompt-kaks:last-child{margin-bottom:0}
.prompt-vorm legend.peidus,.prompt-vorm .pk-silt.peidus{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(hover:hover){.prompt-osa summary:hover{background:color-mix(in srgb,var(--kollane) 35%,var(--valge))}}
.pk-kiir.aktiivne,button.pk-kiir.aktiivne{background:var(--kollane)}
.prompt-jatk{margin:8px 0 0;padding-top:8px;border-top:1.5px solid var(--paber-tume)}
/* prompti kaks vaadet: Kiirvalik (viisard) ja Täpsem (akordion) */
.prompt-tabid{display:flex;gap:8px;margin:0 0 6px}
.prompt-tab,button.prompt-tab{flex:1;font:700 .9rem var(--kiri-sisu);padding:9px 12px;border:2px solid var(--tint);
  border-radius:999px;background:var(--valge);color:var(--tint);box-shadow:2px 2px 0 var(--tint);cursor:pointer;line-height:1.2}
.prompt-tab[aria-selected="true"],button.prompt-tab[aria-selected="true"]{background:var(--kollane)}
.prompt-tabid-vihje{margin:0 0 12px}
.prompt-samm{display:none}
.prompt-samm.aktiivne{display:block}
.prompt-samm-pais{display:flex;align-items:baseline;gap:10px;margin:0 0 4px}
.prompt-samm-nr{font-size:.78rem;color:var(--hall);font-weight:700;flex:none}
.prompt-samm-nimi{font-size:1.05rem}
.prompt-samm-vihje{margin:0 0 10px}
.prompt-samm-vihje:empty{display:none}
.prompt-samm-nupud{display:flex;justify-content:space-between;gap:10px;margin-top:14px}
.prompt-samm-nupud .nupp{padding:10px 18px;font-size:.9rem}
.prompt-samm-nupud .nupp[disabled]{opacity:.45;cursor:not-allowed}
.prompt-samm-nupud .nupp[hidden]{display:none}
.prompt-wizard .pk span{padding:8px 13px;font-size:.88rem}
.prompt-wizard .pk-kiir,.prompt-wizard button.pk-kiir{font-size:.82rem;padding:6px 11px}
.prompt-wizard fieldset{margin:0 0 14px}
.pk-mall,button.pk-mall{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;
  border-radius:12px;padding:7px 12px;line-height:1.25}
.pk-mall-vihje{font-weight:400;font-size:.72rem;color:var(--hall)}
.prompt-wizard .pk-mall,.prompt-wizard button.pk-mall{width:calc(50% - 4px);padding:9px 12px}
@media(max-width:480px){.prompt-wizard .pk-mall,.prompt-wizard button.pk-mall{width:100%}}
.prompt-mall-seis{font-size:.8rem;color:var(--hall);margin:8px 0 0}
.prompt-mall-seis:empty{display:none}
.prompt-valmis-tekst{margin:0 0 10px;font-size:.95rem}
.pk-ikoon{display:inline-flex;flex:none;color:var(--tint)}
.pk-ikoon svg{display:block}
/* õmbluse toonid: raam + niit, ringid nagu kujundaja paletis */
.pk-omblus{margin-top:8px;padding:8px 10px;border:1.5px dashed var(--paber-tume);border-radius:10px}
.pk-toonirida{margin:2px 0 6px}
.pk-toon-silt{display:block;font-size:.82rem;font-weight:600;margin-bottom:4px}
.pk-toon{position:relative}
.pk-toon input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.pk-toon span{display:block;width:24px;height:24px;border-radius:50%;border:2px solid var(--tint);box-shadow:1px 1px 0 var(--tint);cursor:pointer}
.pk-toon input:checked+span{outline:3px solid var(--punane);outline-offset:2px}
.pk-toon input:focus-visible+span{outline:3px solid var(--sinine);outline-offset:2px}
.pk-omblus .toonipalett{gap:7px;margin-top:2px}
/* prompti akna päise skeem-eelvaade + viisardi sammunumbrid */
.prompt-eelvaade{flex:none;width:104px;margin-left:auto;text-align:center}
.prompt-eelvaade svg{width:104px;height:104px;display:block;filter:drop-shadow(2px 3px 0 var(--tint))}
.prompt-eelvaade small{display:block;font-size:.66rem;color:var(--hall);margin-top:2px}
.prompt-pais .aken-sulge{margin-left:10px}
.prompt-sammud{display:flex;gap:6px;list-style:none;padding:0;margin:0 0 10px;flex-wrap:wrap}
.prompt-samm-nupp,button.prompt-samm-nupp{width:28px;height:28px;border-radius:50%;border:2px solid var(--tint);
  background:var(--valge);color:var(--tint);font:700 .8rem var(--kiri-sisu);padding:0;line-height:1;
  box-shadow:1px 1px 0 var(--tint);cursor:pointer;display:grid;place-items:center}
.prompt-samm-nupp.aktiivne,button.prompt-samm-nupp.aktiivne{background:var(--kollane)}
.prompt-samm-nupp.tehtud,button.prompt-samm-nupp.tehtud{background:var(--tint);color:var(--valge)}
@media(max-width:900px){
  .prompt-eelvaade{width:80px}
  .prompt-eelvaade svg{width:80px;height:80px}
}
@media(hover:hover){.prompt-samm-nupp:hover,button.prompt-samm-nupp:hover{background:var(--kollane);transform:none;box-shadow:1px 1px 0 var(--tint)}}
@media(max-width:480px){.prompt-alapealkiri{display:none}}   /* telefonil päis lühem: skeem + pealkiri, alapealkiri maha */

/* ---------- taganemisõigus ja taganemisfunktsioon „Taganen lepingust” (VÕS § 56⁴) ---------- */
.jalus a.jalus-nupp{display:inline-block;margin-top:10px;padding:8px 18px;border:2px solid var(--kollane);
  border-radius:999px;color:var(--kollane);font-weight:700;font-size:.9rem;text-decoration:none;
  transition:background-color var(--t-1) var(--e-valja),color var(--t-1) var(--e-valja)}
.taganemis-kast{max-width:600px;background:var(--valge);border:var(--joon);border-radius:var(--nurk);
  box-shadow:var(--vari);padding:22px 24px;margin-top:8px}
.taganemis-kast h2{margin:0 0 12px;font-size:1.05rem}
.taganemis-kast h2 + h2,.taganemis-kast ol + h2,.taganemis-kast p + h2{margin-top:22px}
.taganemis-kast dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0 0 16px}
.taganemis-kast dt{font-weight:700;color:var(--hall);font-size:.85rem;align-self:center}
.taganemis-kast dd{margin:0;overflow-wrap:anywhere}
.taganemis-kast ol{padding-left:22px}
.taganemis-kast li{margin:0 0 8px}
.taganemis-nupud{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0}
.taganemis-teave{margin:0}
.taganemis-linnuke{font-weight:400;font-size:.88rem;display:flex;gap:9px;align-items:flex-start;margin:10px 0 0;
  padding:10px 12px;border:2px solid var(--kollane);border-radius:10px;background:#fff7e8;line-height:1.45}
.taganemis-linnuke input{margin:3px 0 0;flex:none}
.oma-kujundus{color:var(--punane-tume);font-weight:700}
.tingimused-punktid h3{margin:18px 0 8px;font-size:1rem}
.tingimused-punktid p{margin:0 0 8px}
.oigus-aken-sisu h3{font-size:.95rem;margin:16px 0 6px}
@media(max-width:480px){
  .taganemis-kast{padding:16px 14px}
  .taganemis-kast dl{grid-template-columns:1fr;gap:2px 0}
  .taganemis-kast dd{margin-bottom:8px}
}
@media(hover:hover){
  .jalus a.jalus-nupp:hover{background:var(--kollane);color:var(--tint);text-decoration:none}
}