/* ============================================================
   components.css — baaskomponendid (CP-01, LUKUS pärast valmimist)
   Komponendid: päis, mobiilimenüü, kleepuv riba, jalus, nupud,
   teenusekaart, enne/pärast, sektsioon.
   Värvid AINULT var(--...) kaudu — vt theme.css.
   ============================================================ */

/* ---- Nupp ---- */
.nupp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px; /* puutetsoon */
  padding: 0.625rem 1.5rem;
  border-radius: var(--raadius);
  font-family: var(--font-tekst);
  font-size: var(--tekst-baas);
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: background-color var(--yleminek), color var(--yleminek),
    border-color var(--yleminek);
}

.nupp--primaarne {
  background-color: var(--varv-aktsent);
  color: var(--varv-pohiline);
}

.nupp--primaarne:hover {
  background-color: var(--varv-aktsent-tume);
  /* Tume-tumeroheline tekst hover-kullal → WCAG AA (5.05:1; --varv-pohiline
     üksi jääks 4.07:1 tumedamal kullal, alla 4.5). 2026-07-24 kontrastiparandus. */
  color: var(--varv-pohiline-tume);
}

.nupp--sekundaarne {
  background-color: transparent;
  color: var(--varv-pohiline);
  border: 1px solid var(--varv-pohiline);
}

.nupp--sekundaarne:hover {
  background-color: var(--varv-pohiline);
  color: var(--varv-tekst-pohjal);
}

/* Tumedal taustal (nt hero foto peal) */
.nupp--sekundaarne.nupp--pohjal {
  color: var(--varv-tekst-pohjal);
  border-color: var(--varv-tekst-pohjal);
}

.nupp--sekundaarne.nupp--pohjal:hover {
  background-color: var(--varv-tekst-pohjal);
  color: var(--varv-pohiline);
}

/* ---- ÜKS BRONEERIMISKOHT (Marius, 2026-08-18) ----------------
   Varem oli "Broneeri aeg" ühes vaates kuni NELJAS kohas korraga:
   päises, hero's, sektsioonide lõpus, vidina paneelis JA hõljuv
   SalonLife'i nupp. Marius: "võtame kõik broneeringu nupud ära,
   jätame ainult hõljuva salon life".

   Alles jäävad täpselt kaks, kumbki oma ekraanil:
     desktop (≥768px) → SalonLife'i hõljuv nupp all paremal
     mobiil  (<768px) → kleepuva riba BRONEERI (.riba__broneeri)

   Peidame CSS-iga, mitte ei kustuta malle: `data-broneeri` konksud
   jäävad alles, nii et otsuse tagasipööramine on ÜKS reegel, mitte
   30 faili. display:none eemaldab need ka ligipääsupuust, seega
   ekraanilugejale ei jää duplikaate. */
[data-broneeri]:not(.riba__broneeri) {
  display: none;
}

/* Konteiner, kus broneerimisnupp oli AINUS link, jääks muidu tühjaks
   ja hoiaks oma välisvahesid alles → peidame ka selle. Kui kõrval on
   veel mõni link (nt "Vaata kogu hinnakirja"), jääb lõik alles. */
p:has([data-broneeri]):not(:has(a:not([data-broneeri]))) {
  display: none;
}

/* ---- Päis ---- */
.pais {
  position: sticky;
  top: 0;
  z-index: var(--z-pais);
  background-color: var(--varv-taust);
  border-bottom: 1px solid var(--varv-border);
}

.pais__sisu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ruum-2);
  min-height: var(--pais-korgus);
}

/* Logo kohataide (SVG-logo tuleb CP-09) */
.pais__logo {
  font-family: var(--font-pealkiri);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--varv-pohiline);
  text-decoration: none;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* "Salong" on KULDNE TEKST kreemil, seega --varv-kuld-tekst, mitte
   --varv-aktsent-tume. Viimane andis 2,75:1 ja kukkus WCAG AA-s läbi
   (Lighthouse märkis selle ainsa kontrastiveana lehel, 2026-08-18).
   Marius: kuld jääb, lillaks ei tee. Tumedam kuld annab 4,61:1. */
.pais__logo span {
  color: var(--varv-kuld-tekst);
  font-weight: 500;
}

.pais__logo:hover {
  color: var(--varv-pohiline);
}

.pais__nav ul {
  display: flex;
  align-items: center;
  gap: var(--ruum-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.pais__nav a {
  text-decoration: none;
  font-size: var(--tekst-s);
  font-weight: 500;
  color: var(--varv-tekst);
  padding: var(--ruum-1) 0;
  border-bottom: 2px solid transparent;
  transition: border-color var(--yleminek), color var(--yleminek);
}

.pais__nav a:hover,
.pais__nav a[aria-current="page"] {
  color: var(--varv-pohiline);
  border-bottom-color: var(--varv-aktsent);
}

.pais__tegevused {
  display: flex;
  align-items: center;
  gap: var(--ruum-3);
}

/* Keelevaheti (päises) */
.keelevaheti {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--tekst-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
}

.keelevaheti a {
  text-decoration: none;
  color: var(--varv-tekst-sekundaarne);
  padding: 0.375rem 0.25rem;
}

.keelevaheti a[aria-current="true"] {
  color: var(--varv-pohiline);
  border-bottom: 2px solid var(--varv-aktsent);
}

.keelevaheti__eraldaja {
  color: var(--varv-border);
}

/* Sotsiaalikoonid */
.sotsiaal {
  display: flex;
  align-items: center;
  gap: var(--ruum-1);
}

.sotsiaal a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--varv-pohiline);
}

/* Bränditoonid. KAKS klassi, mitte üks — `.jalus a` (0,1,1) on failis
   hiljem ja võidaks ühe klassi (0,1,0); `.sotsiaal .sotsiaal--ig` on
   (0,2,0) ja võidab jaluses samuti. */
.sotsiaal .sotsiaal--ig {
  color: var(--varv-instagram);
}

.sotsiaal .sotsiaal--fb {
  color: var(--varv-facebook);
}

/* Hover EI tohi bränditooni ära võtta (siis kaoks äratundmine) → muudame
   heledust, mitte värvitooni. Liikumist ei ole (Mariuse põhimõte). */
.sotsiaal a:hover {
  opacity: 0.72;
}

.sotsiaal svg {
  width: 20px;
  height: 20px;
}

/* ---- Hamburger (mobiil) ---- */
.pais__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: var(--raadius);
}

.pais__hamburger span {
  display: block;
  height: 2px;
  width: 100%;
  background-color: var(--varv-pohiline);
  border-radius: 1px;
  transition: transform var(--yleminek), opacity var(--yleminek);
}

/* Avatud olek: hamburger → X */
.pais--avatud .pais__hamburger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.pais--avatud .pais__hamburger span:nth-child(2) {
  opacity: 0;
}

.pais--avatud .pais__hamburger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---- Mobiilimenüü ---- */
/* NB! Kogu see plokk peab kehtima KOGU <1024px alal, mitte ainult
   768–1023px vahemikus. 2026-08-18 regressioon: tahvli-keelevaheti
   parandust lisades lõigati see media query pooleks ja `.pais__nav`
   reeglid jäid `min-width: 768px` sisse. Tagajärg telefonis (<768px):
   desktopi menüü renderdus päises staatiliselt (360px), lükkas
   hamburgeri välja → paigutuse vaateava venis 375 → 576px, leht keris
   külgsuunas ja paremale jäi tühi ala. Keelevaheti erand elab ERALDI
   plokis allpool — ära liida neid uuesti kokku. */
@media (max-width: 1023.98px) {
  .pais__hamburger {
    display: flex;
  }

  .pais__tegevused {
    display: none; /* keeled/broneeri elavad mobiilis kleepuvas ribas */
  }

  .pais__nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: var(--z-menyy);
    background-color: var(--varv-taust);
    border-bottom: 1px solid var(--varv-border);
    box-shadow: var(--vari-2);
    max-height: 0;
    overflow: hidden;
    transition: max-height 240ms ease;
  }

  .pais--avatud .pais__nav {
    max-height: 60vh;
  }

  .pais__nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--ruum-2);
  }

  .pais__nav a {
    display: block;
    padding: 0.75rem var(--ruum-1); /* puutetsoon ≥44px */
    font-size: var(--tekst-baas);
    border-bottom: none;
    border-left: 3px solid transparent;
  }

  .pais__nav a:hover,
  .pais__nav a[aria-current="page"] {
    border-left-color: var(--varv-aktsent);
    background-color: var(--varv-valge);
  }
}

/* 768–1023px oli KEELELÕKS: päise tegevused olid juba peidus (<1024px),
   aga kleepuvat riba veel ei olnud (see algab <768px). Hamburgeri menüüs
   keelevalikut ei ole → sellel laiusel EI SAANUD keelt üldse vahetada.
   Mõõdetud 2026-08-17 (900px: keelevaheti peidus, riba peidus).
   Lahendus: sellel vahemikul jääb päisesse AINULT keelevaheti — sotsiaal
   ja broneerimisnupp jäävad peitu, et päis ei muutuks kitsaks.
   See plokk muudab AINULT `.pais__tegevused` nähtavust. `.pais__nav`
   kokkuklapitud olek tuleb ülalt ja peab kehtima ka siin. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .pais__tegevused {
    display: flex;
  }

  .pais__tegevused > *:not(.keelevaheti) {
    display: none;
  }
}

/* ---- Kleepuv alumine riba (ainult mobiil) ---- */
.riba {
  display: none;
}

@media (max-width: 767.98px) {
  .riba {
    display: grid;
    /* NELJAS VEERG EI TOHI OLLA `auto`. Siis määrab veeru laiuse sõna
       pikkus ja paigutus nihkub keelt vahetades: mõõdetud 375px juures
       BRONEERI 100,9px vs BOOK 71,8px → kaks keskmist veergu neelasid
       29px vahe ja ikoonid liikusid (Marius 2026-08-17: "disain ei
       tohiks selle pärast liikuda"). Protsent hoiab mõlemas keeles
       sama paigutuse; minmax kaitseb väga kitsa ekraani puhul. */
    grid-template-columns: auto 1fr 1fr minmax(88px, 27%);
    align-items: stretch;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-riba);
    height: calc(var(--riba-korgus) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    /* Riba peab põhivärvist ERINEMA, muidu sulab ta tumeda sektsiooni peale
       kerides sellega ühte (Mariuse tähelepanek 2026-07-21).
       Kuni 2026-08-18 saavutati see TUMEDAMA astmega. Lilla paletiga läks
       riba HELEDAMAKS (Marius: "kuna põhivärv on tumedam lilla, siis äkki
       heledam lilla") — eristus säilib, suund muutus. Väärtus theme.css-ist. */
    background-color: var(--varv-riba);
    color: var(--varv-tekst-pohjal);
  }
}

.riba a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 44px; /* puutetsoon */
  padding: 0 var(--ruum-2);
  color: var(--varv-tekst-pohjal);
  text-decoration: none;
  font-size: var(--tekst-xs);
}

.riba a:hover {
  color: var(--varv-valge);
}

.riba svg {
  width: 20px;
  height: 20px;
}

/* `align-items: stretch` (mitte `center`) — muidu kahanevad ET/EN lingid
   sisu kõrgusele. Mõõdetud 2026-08-18: puutetsoon oli 44×21px 60px kõrges
   ribas, kuigi malli nõue on ≥44px. Sõrmega tabamine ebaõnnestus tihti ja
   see nägi välja nagu "EN nupp ei tööta" — JS-viga ei olnudki, link oli
   lihtsalt liiga madal. Lingid ise tsentreerivad teksti (`.riba a`). */
.riba__keeled {
  display: flex;
  align-items: stretch;
  padding-inline: var(--ruum-1);
}

.riba__keeled a {
  flex-direction: row;
  padding: 0 var(--ruum-1);
  font-weight: 600;
  letter-spacing: 0.05em;
  opacity: 0.75;
}

.riba__keeled a[aria-current="true"] {
  opacity: 1;
  text-decoration: underline;
  text-decoration-color: var(--varv-aktsent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.riba__broneeri {
  background-color: var(--varv-aktsent);
  color: var(--varv-pohiline) !important; /* kuld-taust nõuab tumedat teksti (WCAG) */
  /* 600, mitte 700: me laadime Interit ainult kaaludes 400/500/600 (vt
     fondid.css). 700 oli AINUS koht kogu CSS-is, mis seda küsis, ja brauser
     võltsis selle 600-st (faux bold — laiendab tähti algoritmiliselt, näeb
     sogasem välja). Ühe nupu pärast ei ole mõtet 47 KB fonti juurde laadida.
     Leitud 2026-08-18 fondide ise-majutamisele üleminekul. */
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.riba__broneeri:hover {
  background-color: var(--varv-aktsent-tume);
  color: var(--varv-pohiline-tume) !important; /* AA hover-kullal (5.05:1), vt nupp--primaarne:hover */
}

/* ---- Jalus ---- */
.jalus {
  background-color: var(--varv-pohiline);
  color: var(--varv-tekst-pohjal);
  padding-block: var(--ruum-5) var(--ruum-4);
  margin-top: var(--sektsiooni-ruum);
}

/* Mobiilis kannab JALUS kleepuva riba + vidina mulli polstri (varem oli
   see `body`-l, vt base.css). Nii täidab tumeroheline kogu alumise ala ja
   jaluse alla ei jää heledat riba. Jalus on alati viimane element, seega
   kaitse sisu katmise eest jääb täpselt samaks.
   Väärtus = riba (60) + mull (56) + õhk (24) + turvaala; ruum-4 on jaluse
   enda alumine polster, mis peab säilima. */
@media (max-width: 767.98px) {
  .jalus {
    padding-bottom: calc(
      var(--ruum-4) + var(--riba-korgus) + var(--vidin-mull) + var(--ruum-3) +
      env(safe-area-inset-bottom, 0px)
    );
  }
}

.jalus a {
  color: var(--varv-tekst-pohjal);
}

.jalus a:hover {
  color: var(--varv-valge);
}

.jalus__sisu {
  display: grid;
  gap: var(--ruum-4);
  grid-template-columns: 1fr;
}

/* 2026-07-25: jalusesse lisandus neljas veerg (lehtede loend) — tahvlil 2,
   desktopil 4 veergu, et read jääksid loetavaks (3 veergu jättis ühe rippuma) */
@media (min-width: 768px) {
  .jalus__sisu {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .jalus__sisu {
    grid-template-columns: repeat(4, 1fr);
  }
}

.jalus__pealkiri {
  font-family: var(--font-pealkiri);
  font-size: var(--tekst-m);
  color: var(--varv-valge);
  margin-bottom: var(--ruum-2);
}

.jalus__nimekiri li + li {
  margin-top: var(--ruum-1);
}

/* `.jalus .sotsiaal a` värvireeglid EEMALDATUD 2026-08-18. Need muutsid
   jaluse ikoonid ühevärviliseks kreemiks ja kirjutasid bränditooni üle
   ((0,2,1) võitis `.sotsiaal .sotsiaal--fb` (0,2,0)). Ikoonid kannavad nüüd
   ise oma brändivärvi — vt `.sotsiaal--ig` / `.sotsiaal--fb` ülalpool.
   ÄRA lisa siia uut `.jalus .sotsiaal a { color: ... }` reeglit. */

.jalus__alumine {
  margin-top: var(--ruum-4);
  padding-top: var(--ruum-3);
  border-top: 1px solid var(--varv-pohiline-tume);
  font-size: var(--tekst-xs);
  color: var(--varv-tekst-pohjal);
  opacity: 0.8;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruum-2);
  /* KESKELE, mitte `space-between` (Marius 2026-08-18). `space-between`
     surus copyright'i vasakusse ja privaatsuslingi paremasse serva —
     täpselt sinna, kus istuvad kaks hõljuvat nuppu (vidin vasakul,
     SalonLife paremal). Kui inimene keris päris alla, jäid need read
     nuppude alla peitu. Keskel on mõlemast nurgast eemal. */
  justify-content: center;
  text-align: center;
}

/* ---- Sektsioon ---- */
.sektsioon {
  padding-block: var(--sektsiooni-ruum);
}

.sektsioon--roheline {
  background-color: var(--varv-pohiline);
  color: var(--varv-tekst-pohjal);
}

.sektsioon--roheline h2,
.sektsioon--roheline h3 {
  color: var(--varv-valge);
}

.sektsioon--valge {
  background-color: var(--varv-valge);
}

.sektsioon__pealkiri {
  text-align: center;
  max-width: 42rem;
  margin-inline: auto;
  margin-bottom: var(--ruum-4);
}

/* Kuldne dekoratiivjoon pealkirja all */
.sektsioon__pealkiri h2::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  background-color: var(--varv-aktsent);
  margin: var(--ruum-2) auto 0;
}

/* ---- Teenusekaart ---- */
.kaart {
  display: flex;
  flex-direction: column;
  background-color: var(--varv-valge);
  border: 1px solid var(--varv-border);
  border-radius: var(--raadius-suur);
  overflow: hidden;
  transition: box-shadow var(--yleminek), transform var(--yleminek);
}

.kaart:hover {
  box-shadow: var(--vari-2);
  transform: translateY(-2px);
}

.kaart__pilt {
  aspect-ratio: 4 / 3;
  background-color: var(--varv-pohiline);
  position: relative;
}

.kaart__pilt img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Kohatäide, kuni fotod puuduvad (CP-05) */
.kaart__pilt--kohataide {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, var(--varv-pohiline), var(--varv-pohiline-tume));
}

.kaart__pilt--kohataide svg {
  width: 44px;
  height: 44px;
  color: var(--varv-aktsent);
  opacity: 0.9;
}

.kaart__sisu {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--ruum-1);
  padding: var(--ruum-3);
}

.kaart__pealkiri {
  font-size: var(--tekst-l);
}

.kaart__pealkiri a {
  text-decoration: none;
  color: inherit;
}

/* Kogu kaart klikitav pealkirja lingi kaudu */
.kaart__pealkiri a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.kaart {
  position: relative;
}

.kaart__kirjeldus {
  color: var(--varv-tekst-sekundaarne);
  font-size: var(--tekst-s);
  flex: 1;
}

.kaart__jalg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--ruum-1);
  padding-top: var(--ruum-2);
  border-top: 1px solid var(--varv-border);
}

.kaart__hind {
  font-weight: 600;
  color: var(--varv-pohiline);
}

.kaart__hind small {
  display: block;
  font-weight: 400;
  font-size: var(--tekst-xs);
  color: var(--varv-tekst-sekundaarne);
}

.kaart__nool {
  /* NB: mitte kuld — kuld valgel taustal ei täida WCAG AA kontrasti */
  color: var(--varv-pohiline);
  font-weight: 600;
  font-size: var(--tekst-s);
}

/* ---- Enne/pärast paar ---- */
.enneparast {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  border-radius: var(--raadius-suur);
  overflow: hidden;
}

.enneparast figure {
  position: relative;
  margin: 0;
}

.enneparast img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Kohatäide, kuni fotod puuduvad (CP-05) */
.enneparast__kohataide {
  aspect-ratio: 4 / 5;
  background: linear-gradient(150deg, var(--varv-pohiline), var(--varv-pohiline-tume));
}

.enneparast figcaption {
  position: absolute;
  left: var(--ruum-1);
  bottom: var(--ruum-1);
  background-color: var(--varv-overlay);
  color: var(--varv-valge);
  font-size: var(--tekst-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.25rem 0.625rem;
  border-radius: var(--raadius);
}

/* ============================================================
   CP-02: avaleht — hero, usaldus-statistika, asukoht, arvustus.
   Lisatud CP-01 LUKUS-osa JÄRELE; olemasolevaid reegleid ei muudetud.
   ============================================================ */

/* ---- Hero ---- */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--varv-pohiline) 30%, var(--varv-pohiline-tume));
  color: var(--varv-tekst-pohjal);
}

/* Päris hero-foto pesa (aktiveerub, kui foto olemas — vt et/index.njk) */
.hero__pilt {
  position: absolute;
  inset: 0;
}

.hero__pilt img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Tume kate foto peal — tekst püsib loetav (WCAG) */
.hero__pilt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--varv-pohiline), var(--varv-overlay));
  opacity: 0.9;
}

/* Sisu keskjoonel — nagu kogu leht (Mariuse suund: hoiame keskmist joont) */
.hero__sisu {
  position: relative;
  z-index: 1;
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
  padding-block: clamp(4rem, 6vw + 2rem, 8rem);
}

.hero__silt {
  color: var(--varv-aktsent); /* kuld tumelillal: 5,61:1 (OK) — mõõdetud üle 2026-08-18 */
  font-size: var(--tekst-s);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--ruum-2);
}

.hero h1 {
  color: var(--varv-valge);
  margin-bottom: var(--ruum-2);
}

.hero__juhtlause {
  font-size: var(--tekst-m);
  max-width: 38rem;
  margin-inline: auto;
  margin-bottom: var(--ruum-4);
}

.hero__nupud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ruum-2);
}

/* ---- Teenuste premium-plaadid (avaleht; CP-02 revision 2) ----
   Mitte e-poe kaardid: suur plaat, serif-nimi, kuldsed aktsendid, hinnata.
   Foto-pesa (.plaat__pilt) aktiveerub CP-05-s. */
.teenused-plaadid {
  display: grid;
  gap: var(--ruum-2);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .teenused-plaadid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ruum-3);
  }
}

.plaat {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 220px;
  padding: var(--ruum-3);
  background: linear-gradient(155deg, var(--varv-pohiline) 25%, var(--varv-pohiline-tume));
  border-radius: var(--raadius-suur);
  overflow: hidden;
  text-decoration: none;
  color: var(--varv-tekst-pohjal);
}

@media (min-width: 768px) {
  .plaat {
    min-height: 280px;
  }
}

/* Hoveril taust paar tooni tumedamaks (kattekiht, sisu jääb heledaks) */
.plaat::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: var(--varv-pohiline-tume);
  opacity: 0;
  transition: opacity var(--yleminek);
}

.plaat:hover::before {
  opacity: 0.55;
}

/* Hover = AINULT värvimuutus (tumenev taust) + kuldne raam — plaat ei liigu */
.plaat:hover {
  color: var(--varv-tekst-pohjal);
}

/* Foto-pesa (CP-05): pilt katab plaadi, tume kate hoiab teksti loetavana */
.plaat__pilt {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.plaat__pilt + .plaat__sisu::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--varv-overlay);
}

/* Jooksev raam: hoveril joonistub joon ülevalt keskelt mõlemas suunas
   ühtlaselt ümber plaadi ja sulgub all keskel. Terve pidev joon.
   Sissejoonistus kokku 0.6s (0.18s → 0.22s → 0.2s), tagasitõmme 0.3s.
   Kiiruse muutmiseks: kestused/viited allpool hover-plokis. */
.plaat__raam {
  position: absolute;
  inset: 10px;
  z-index: 1; /* tausta/foto peal, sisu all */
  pointer-events: none;
}

.plaat__joon {
  position: absolute;
  background-color: var(--varv-aktsent);
  transition: transform 0.3s ease; /* tagasitõmme */
}

/* Horisontaalsed pooled (ülemised täpist välja, alumised nurkadest keskele) */
.plaat__joon--yv,
.plaat__joon--yp,
.plaat__joon--av,
.plaat__joon--ap {
  height: 2px;
  width: 50%;
  transform: scaleX(0);
}

.plaat__joon--yv { top: 0; left: 0; transform-origin: right; }
.plaat__joon--yp { top: 0; right: 0; transform-origin: left; }
.plaat__joon--av { bottom: 0; left: 0; transform-origin: left; }
.plaat__joon--ap { bottom: 0; right: 0; transform-origin: right; }

/* Küljed (ülevalt alla) */
.plaat__joon--v,
.plaat__joon--p {
  top: 0;
  width: 2px;
  height: 100%;
  transform: scaleY(0);
  transform-origin: top;
}

.plaat__joon--v { left: 0; }
.plaat__joon--p { right: 0; }

/* Joonistumise järjekord hoveril */
.plaat:hover .plaat__joon--yv,
.plaat:hover .plaat__joon--yp {
  transform: scaleX(1);
  transition: transform 0.18s linear;
}

.plaat:hover .plaat__joon--v,
.plaat:hover .plaat__joon--p {
  transform: scaleY(1);
  transition: transform 0.22s linear 0.18s;
}

.plaat:hover .plaat__joon--av,
.plaat:hover .plaat__joon--ap {
  transform: scaleX(1);
  transition: transform 0.2s linear 0.4s;
}

.plaat__sisu {
  position: relative;
  z-index: 2; /* kattekihi (::before), foto ja raami peal */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.plaat__nimi {
  font-family: var(--font-pealkiri);
  font-size: var(--tekst-xl);
  font-weight: 600; /* Playfair boldeim laetud lõige */
  line-height: 1.15;
  color: var(--varv-valge);
}

/* Kuldne joon nime all — hoveril kasvab üle kogu nime laiuse */
.plaat__nimi::after {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  margin: 0.5rem auto 0;
  background-color: var(--varv-aktsent);
  transition: width var(--yleminek);
}

.plaat:hover .plaat__nimi::after {
  width: 100%;
}

.plaat__kirjeldus {
  font-size: var(--tekst-s);
  opacity: 0.88;
  max-width: 26rem;
}

/* Noolering — premium-vihje, et plaat on klikitav (teksti-CTA asemel) */
.plaat__nool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-top: var(--ruum-1);
  border: 1px solid var(--varv-aktsent);
  border-radius: 50%;
  color: var(--varv-aktsent);
  font-size: 1.125rem;
  transition: background-color var(--yleminek), color var(--yleminek),
    transform var(--yleminek);
}

/* Hoveril ainult värvivahetus — ei liigu (Mariuse soov) */
.plaat:hover .plaat__nool {
  background-color: var(--varv-aktsent);
  color: var(--varv-pohiline);
}

/* ---- Usaldus-statistika (kasutus tumelillal sektsioonil) ---- */

/* "Kogemus, mida on näha" — püsiv täislaiuses kuldjoon pealkirja all */
#miks-meie .sektsioon__pealkiri h2::after {
  width: 100%;
}
.statistika {
  display: grid;
  gap: var(--ruum-4);
  grid-template-columns: 1fr;
  text-align: center;
  margin-bottom: var(--ruum-4);
}

@media (min-width: 768px) {
  .statistika {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ruum-3);
  }

  /* 2 näitajaga variant (avaleht: 10+ aastat / 30+ diplomit) */
  .statistika--2 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 36rem;
    margin-inline: auto;
  }
}

.statistika__arv {
  font-family: var(--font-pealkiri);
  font-size: var(--tekst-xxl);
  font-weight: 600;
  line-height: 1;
  color: var(--varv-aktsent); /* kuld tumelillal: 5,61:1 (OK) */
}

.statistika__nimi {
  margin-top: var(--ruum-1);
  font-weight: 600;
  color: var(--varv-valge);
}

.statistika__selgitus {
  margin-top: 0.25rem;
  font-size: var(--tekst-s);
  opacity: 0.85;
}

.usaldus__tekst {
  max-width: 42rem;
  margin-inline: auto;
  text-align: center;
}

/* ---- Sektsiooni lõpu tegevusrida (nt "Vaata galeriid") ---- */
.sektsioon__tegevus {
  text-align: center;
  margin-top: var(--ruum-4);
}

/* ---- Asukoht + kaart ---- */
.asukoht {
  display: grid;
  gap: var(--ruum-4);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 1024px) {
  .asukoht {
    grid-template-columns: 2fr 3fr;
  }
}

.asukoht__nimekiri {
  margin-block: var(--ruum-2) var(--ruum-3);
}

.asukoht__nimekiri li + li {
  margin-top: var(--ruum-1);
}

.kaart-embed {
  aspect-ratio: 4 / 3;
  border-radius: var(--raadius-suur);
  overflow: hidden;
  border: 1px solid var(--varv-border);
  background-color: var(--varv-valge); /* enne iframe'i laadimist */
}

@media (min-width: 768px) {
  .kaart-embed {
    aspect-ratio: 16 / 9;
  }
}

.kaart-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---- Lehe päis (H1 + intro; kasutavad /et/teenused/ ja CP-03..08 lehed) ---- */
.leht-pais {
  text-align: center;
  padding-block: var(--ruum-5) var(--ruum-2);
  max-width: 46rem;
}

.leht-pais h1::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  background-color: var(--varv-aktsent);
  margin: var(--ruum-2) auto 0;
}

.leht-pais__intro {
  margin-top: var(--ruum-2);
  color: var(--varv-tekst-sekundaarne);
  font-size: var(--tekst-m);
}

/* ---- Hinnakiri (teenused ja hinnad; taaskasutavad teenuselehed CP-03/04) ---- */
.hinnakiri {
  max-width: 52rem;
  margin-inline: auto;
}

.hinnakiri__rida {
  display: flex;
  align-items: baseline;
  gap: var(--ruum-2);
  padding-block: var(--ruum-2);
  border-bottom: 1px solid var(--varv-border);
}

.hinnakiri__nimi {
  flex: 1 1 14rem;
  font-weight: 500;
}

.hinnakiri__nimi small {
  display: block;
  font-weight: 400;
  font-size: var(--tekst-xs);
  color: var(--varv-tekst-sekundaarne);
}

.hinnakiri__kestus {
  font-size: var(--tekst-s);
  color: var(--varv-tekst-sekundaarne);
  min-width: 4.5rem;
  text-align: right;
}

.hinnakiri__hind {
  font-weight: 600;
  color: var(--varv-pohiline);
  min-width: 3.5rem;
  text-align: right;
}

.hinnakiri__tegevused {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ruum-2);
  margin-top: var(--ruum-4);
}

/* ---- SalonLife hõljuv nupp: mobiilis peidus ----
   Kleepuv riba teeb mobiilis broneerimise töö (BRONEERI avab sama popupi,
   vt main.js) — kaks nuppu üksteise peal oleks segadus (DESIGN.md).

   ⚠ SELEKTOR ON [data-sl-nupp], MITTE KLASSINIMI. Varem oli siin
   `div[class*="WidgetButton"]`, aga SalonLife'i klassid on räsitud
   (`_WidgetWrapper_13map_1`) ja reegel EI TABANUD — nende nupp hõljus
   mobiilis kleepuva riba peal ja kattis "Helista" (Marius 2026-08-18).
   Atribuudi paneb peale main.js täpselt sellele elemendile, mida ta ka
   klõpsab → peidetav ja klõpsatav on alati sama element.

   ⚠⚠ SPETSIIFILISUS ON SIIN OLULINE — ÄRA LIHTSUSTA SELEKTORIT.
   Paljas `[data-sl-nupp]` (0,1,0) EI TÖÖTA, isegi `!important`-iga:
   SalonLife'i enda CSS tuleb NENDE domeenilt ja seab nupule kõrgema
   spetsiifilisusega `display` `!important`-iga. Kuna see leht on
   cross-origin, ei saa selle reegleid isegi `cssRules` kaudu lugeda —
   seepärast jäi viga varem märkamata: DevTools-skaneering "ei näinud"
   ühtegi konkureerivat reeglit, aga nupp jäi ikka nähtavale.
   Nende reegel on (0,2,0) `!important`-iga JA nende leht laaditakse
   MEIE OMA JÄREL (`widget.*.css` tuleb <head>-i lõppu). Seega (0,2,0)
   meie poolel kaotab viigi järjekorra tõttu — vaja on RANGELT kõrgemat
   spetsiifilisust, mitte lihtsalt `!important`-i.

   Mõõdetud päris domeenil 2026-08-18 (reeglit kohapeal ümber kirjutades,
   õiges allikapositsioonis):
     [id^="SalonLife__widget"] [data-sl-nupp]          (0,2,0) → flex ❌
     #SalonLife__widget [data-sl-nupp]                 (1,1,0) → none ✅
     [id^=…] [data-sl-nupp][data-sl-nupp]              (0,3,0) → none ✅

   Hoiame MÕLEMAT: id-versioon on lühem ja loetavam, prefiksiversioon
   töötab ka siis, kui nad id-le sufiksi lisavad (main.js kasutab sama
   prefiksiloogikat). Atribuudi kordamine ongi ainus viis spetsiifilisust
   tõsta ilma id-le lootmata — see EI ole kirjaviga.

   NB: peidame AINULT nupu, mitte popupi. KONTROLLITUD päris domeenil
   2026-08-18: märgitud element on `_WidgetButton_ _WidgetClosed_`,
   ainult 3 alamelementi, rakendus on tema KÕRVAL (mitte sees).
   Peidetud nupu klõpsamine main.js kaudu AVAB popupi normaalselt
   (klass → `_WidgetOpen_`, rakendus 355×772). Mobiilne broneerimine
   töötab seega peidetud nupuga — see ei ole enam lahtine risk. */
@media (max-width: 767.98px) {
  #SalonLife__widget [data-sl-nupp],
  [id^="SalonLife__widget"] [data-sl-nupp][data-sl-nupp][data-sl-nupp] {
    display: none !important;
  }
}

/* ---- MOBIILIS: SalonLife'i aken PEAB LÕPPEMA riba kohal ----
   Marius 2026-08-18: "kui me siseneme salon.life broneeringu menüüsse,
   meil pole valikut sellest väljuda."

   Mõõdetud probleem: nende `_WidgetWrapper_` on `position: fixed`,
   z-index 999999 ja 792px kõrge 812px vaateavas — ehk katab praktiliselt
   kogu ekraani, KAASA ARVATUD meie kleepuva riba (elementFromPoint riba
   kohal tagastas nende wrapperi). Sulgemisnuppu nende DOM-is EI OLE:
   sulgeja ongi see hõljuv nupp, mille me mobiilis peidame. Tulemus oli
   broneerimisaken ilma ühegi väljapääsuta.

   Lahendus on KAHEOSALINE:
   1) siin — anname aknale ülevalt ja alt piiri, nii et ta lõpeb riba kohal;
      `height: auto` on KOHUSTUSLIK, muidu jääb nende fikseeritud 792px
      kehtima ja ülaserv lükkub ekraanist välja (mõõdetud: top = -48px);
   2) main.js — riba BRONEERI muutub avatuna sulgemisnupuks.

   z-index peab ületama nende 999999. */
/* ⚠ SPETSIIFILISUS: id-selektor (1,0,0) on KOHUSTUSLIK. Paljas
   `[id^="SalonLife__widget"]` on (0,1,0) ja KAOTAB nende oma reeglile —
   proovitud 2026-08-18, aken jäi 792px kõrgeks ja kattis riba edasi.
   Sama lugu oli juba peitmisreegliga ja tekstivärviga: nende leht laaditakse
   meie JÄREL, seega `!important` üksi ei aita. Teine selektor on
   varuvariant juhuks, kui nad id-le sufiksi lisavad. */
/* ⚠⚠ AINULT AVATUD OLEKUS — `.sl-avatud` klassi paneb main.js <html>-ile.

   ILMA SELLE VÄRAVATA ON SAIT KATKI. Venitatud ümbris on `position: fixed`
   ja z-index 999999; kui ta on üleekraaniline ka siis, kui popup on KINNI,
   jääb lehele NÄHTAMATU KATE, mis neelab kõik klõpsud. Leht näeb täiesti
   terve välja, aga ükski link ega nupp ei tööta. Mõõdetud 2026-08-18:
   elementFromPoint andis päise, sisu ja teenuseplaatide kohal
   `DIV._WidgetWrapper_`. Ainult kleepuv riba töötas, sest tema z-index
   on kõrgem. Marius leidis selle. ÄRA eemalda `.sl-avatud` eesliidet. */
@media (max-width: 767.98px) {
  .sl-avatud #SalonLife__widget,
  .sl-avatud [id^="SalonLife__widget"][id][id] {
    top: var(--ruum-1) !important;
    bottom: calc(var(--riba-korgus) + var(--ruum-1) + env(safe-area-inset-bottom, 0px)) !important;
    height: auto !important;
    max-height: none !important;
  }

  .riba {
    z-index: 1000001;
  }
}

/* ---- SalonLife'i nupu TEKSTIVÄRV: JÄETUD NENDE VALGEKS (teadlik otsus) ----
   ÄRA "paranda" seda ilma Mariuselt küsimata.

   Nende nupu taust on meie kuld #D89818, tekst on puhas valge. Mõõtsin
   kontrastiks 2,50:1 — see KUKUB WCAG AA-s läbi nii tavateksti (4,5:1) kui
   suure teksti (3:1) nõudes. Tegin 2026-08-18 paranduse tumelillale
   (mõõdetud 4,98:1, AA läbitud), aga Marius vaatas selle live'is üle ja
   ütles: "las ta tegelikult jääb valge, seda on väga hästi näha".

   See on TEADLIK kompromiss: hea nähtavus praktikas vs formaalne
   auditinumber. Otsus on omaniku oma, tema saidi välimuse kohta.

   Kui seda kunagi siiski muuta: reegel oli
     #SalonLife__widget [data-sl-nupp],
     #SalonLife__widget [data-sl-nupp] * { color: var(--varv-pohiline) !important; }
   Id-taseme selektor on vajalik, sest nende leht laaditakse MEIE JÄREL ja
   `!important` üksi kaotab. `*` on vajalik, sest tekst on sisemises
   <span>-is. Mõlemad kontrollitud päris domeenil. Puhtaim koht oleks siiski
   SalonLife'i enda paneel, kust taustavärv tuleb. */

/* ---- Arvustus (struktuur valmis; kuvatakse, kui arvustusi on) ---- */
.arvustus {
  background-color: var(--varv-valge);
  border: 1px solid var(--varv-border);
  border-radius: var(--raadius-suur);
  padding: var(--ruum-3);
}

.arvustus__tahed {
  color: var(--varv-aktsent-tume); /* dekoratiivne; tekstivaste aria-labelis */
  letter-spacing: 0.1em;
  margin-bottom: var(--ruum-1);
}

.arvustus__tekst {
  font-family: var(--font-pealkiri);
  font-size: var(--tekst-m);
  font-style: italic;
}

.arvustus__autor {
  margin-top: var(--ruum-2);
  font-size: var(--tekst-s);
  color: var(--varv-tekst-sekundaarne);
}

/* ============================================================
   CP-03: ripsmete leht (/et/ripsmepikendused/)
   Taaskasutatav CP-04 teenuselehtedel (.tyybid, .teenus-tekst, .kkk).
   Keskjoon + hover ainult värvimuutus (Mariuse disainipõhimõtted).
   ============================================================ */

/* Teenusetüüpide selgitusplokid */
.tyybid {
  display: grid;
  gap: var(--ruum-4) var(--ruum-4);
  grid-template-columns: 1fr;
  max-width: 52rem;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .tyybid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.tyyp {
  text-align: center;
}

.tyyp h3::after {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  background-color: var(--varv-aktsent);
  margin: var(--ruum-1) auto 0;
}

.tyyp p {
  margin-top: var(--ruum-2);
  color: var(--varv-tekst-sekundaarne);
}

/* Sisutekst-plokk (hoolduse selgitus jm pikem tekst keskjoonel) */
.teenus-tekst {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}

/* KKK lehe sees (lihtne loend; CP-07 KKK-leht saab oma akordioni) */
.kkk {
  max-width: 46rem;
  margin-inline: auto;
}

.kkk-yksus {
  padding-block: var(--ruum-3);
  border-bottom: 1px solid var(--varv-border);
  text-align: center;
}

.kkk-yksus:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.kkk-yksus h3 {
  font-size: var(--tekst-m);
}

.kkk-yksus p {
  margin-top: var(--ruum-1);
  color: var(--varv-tekst-sekundaarne);
}

/* ============================================================
   CP-05: galerii (/et/galerii/)
   Filtreeritav enne/pärast galerii. Keskjoon + hover ainult värvimuutus
   (Mariuse disainipõhimõtted). Kõik värvid var(--...) kaudu (CLAUDE.md reegel 7).
   ============================================================ */

/* Filter — keskjoondatud pillid, mähkuvad mobiilis */
.galerii-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ruum-1) var(--ruum-2);
  margin-bottom: var(--ruum-4);
}

.galerii-filter__nupp {
  min-height: 44px; /* puutetsoon */
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--varv-border);
  border-radius: 999px;
  background-color: transparent;
  color: var(--varv-pohiline);
  font-family: var(--font-tekst);
  font-size: var(--tekst-baas);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color var(--yleminek), color var(--yleminek),
    border-color var(--yleminek);
}

.galerii-filter__nupp:hover {
  border-color: var(--varv-pohiline);
  background-color: var(--varv-valge);
}

/* Aktiivne filter — kuldne, tumeroheline tekst (kontrast OK, sama kui nupp--primaarne) */
.galerii-filter__nupp[aria-pressed="true"] {
  background-color: var(--varv-aktsent);
  border-color: var(--varv-aktsent);
  color: var(--varv-pohiline);
}

.galerii-filter__nupp[aria-pressed="true"]:hover {
  background-color: var(--varv-aktsent-tume);
  border-color: var(--varv-aktsent-tume);
  color: var(--varv-pohiline-tume); /* AA hover-kullal (5.05:1) */
}

/* Tööde ruudustik — .ruudustik annab 1/2 veergu; siin kirjuta desktopil samuti 2 */
.galerii-yksus {
  margin: 0;
}

/* Peidetud üksus filtri korral (JS lisab hidden atribuudi) */
.galerii-yksus[hidden] {
  display: none;
}

.galerii-yksus__silt {
  margin-top: var(--ruum-1);
  text-align: center;
  font-size: var(--tekst-s);
  font-weight: 600;
  color: var(--varv-tekst-sekundaarne);
}

/* Silt lingib teenuselehele — pärib värvi, kuldne allajoon hoveril (bränd) */
.galerii-yksus__silt a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--yleminek), border-color var(--yleminek);
}

.galerii-yksus__silt a:hover {
  color: var(--varv-pohiline);
  border-bottom-color: var(--varv-aktsent);
}

.galerii-yksus__silt a:focus-visible {
  outline: 2px solid var(--varv-aktsent);
  outline-offset: 3px;
  border-radius: var(--raadius);
}

.galerii-tyhi {
  text-align: center;
  color: var(--varv-tekst-sekundaarne);
}

/* ============================================================
   CP-06: meist (/et/meist/)
   Meistri portree + valik diplomeid — kohatäited, kuni fotod puuduvad
   (sama muster kui CP-05 enne/pärast). Keskjoon (Mariuse disainipõhimõte),
   kõik värvid var(--...) kaudu (CLAUDE.md reegel 7). CP-01 puutumata.
   ============================================================ */

/* Meistri portree — keskjoonel, portree-suhtega */
.meister-foto {
  max-width: 24rem;
  margin: 0 auto var(--ruum-4);
}

.meister-foto img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--raadius-suur);
}

/* Kohatäide, kuni portree puudub (fotod hiljem, nagu CP-05) */
.meister-foto__kohataide {
  aspect-ratio: 3 / 4;
  border-radius: var(--raadius-suur);
  background: linear-gradient(150deg, var(--varv-pohiline), var(--varv-pohiline-tume));
}

/* Valik diplomeid — 1 veerg mobiilis, 3 desktopil, keskjoonel */
.diplomid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ruum-3);
  max-width: 52rem;
  margin-inline: auto;
}

@media (min-width: 600px) {
  .diplomid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.diplomid__yksus {
  margin: 0;
}

.diplomid__yksus img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--raadius);
  border: 1px solid var(--varv-border);
}

/* Kohatäide, kuni diplomifotod puuduvad */
.diplomid__kohataide {
  aspect-ratio: 3 / 4;
  border-radius: var(--raadius);
  background: linear-gradient(150deg, var(--varv-pohiline), var(--varv-pohiline-tume));
}

/* ============================================================
   CP-07: KKK (/et/kkk/)
   Natiivne <details>/<summary> akordion — ei JS-i (parim INP). Sulgemis-
   indikaator (+/−) puhas CSS. Keskjoondatud veerg, küsimused-vastused vasakule
   (loetavus). Hover = ainult värvimuutus. Kõik värvid var(--...). CP-01 puutumata.
   ============================================================ */

.kkk-akordion {
  max-width: 46rem;
  margin-inline: auto;
  text-align: left;
}

.kkk-item {
  border-bottom: 1px solid var(--varv-border);
}

.kkk-item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ruum-2);
  padding-block: var(--ruum-3);
  cursor: pointer;
  list-style: none; /* peida vaike-kolmnurk */
  font-family: var(--font-pealkiri);
  font-size: var(--tekst-m);
  color: var(--varv-pohiline);
  transition: color var(--yleminek);
}

.kkk-item summary::-webkit-details-marker {
  display: none; /* Safari/Chrome vaikemarker */
}

/* Hover EI muuda küsimusteksti kullaks — kuld heledal taustal jääks ~2.9:1
   (alla AA 4.5). Tekst jääb tumelillaks (loetav); kuldne +/− indikaator ja
   kursor annavad hover-vihje. 2026-07-24 kontrastiparandus. */
.kkk-item summary:hover {
  color: var(--varv-pohiline-tume);
}

/* Funktsionaalne +/− indikaator (mitte dekoratiiv-ikoon) */
.kkk-item summary::after {
  content: "+";
  flex: 0 0 auto;
  font-family: var(--font-tekst);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--varv-aktsent);
  transition: transform var(--yleminek);
}

.kkk-item[open] summary::after {
  content: "−";
}

/* Klaviatuuri-fookus nähtav (a11y) */
.kkk-item summary:focus-visible {
  outline: 2px solid var(--varv-aktsent);
  outline-offset: 2px;
  border-radius: var(--raadius);
}

.kkk-item__sisu {
  padding-bottom: var(--ruum-3);
  color: var(--varv-tekst-sekundaarne);
}

.kkk-item__sisu p {
  margin: 0;
}

/* ============================================================
   CP-08: kontakt (/et/kontakt/)
   Kontaktandmed + kaart (2 veergu desktopil), kontaktivorm. Keskjoon säilib
   sektsiooni pealkirjades; vorm keskveerus. Hover = värvimuutus, var(--...).
   CP-01 puutumata.
   ============================================================ */

/* Kontaktandmed + kaart */
.kontakt {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ruum-4);
  align-items: start;
}

@media (min-width: 768px) {
  .kontakt {
    grid-template-columns: 1fr 1fr;
  }
}

.kontakt__info h2 {
  margin-bottom: var(--ruum-3);
}

.kontakt__nimekiri {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--ruum-2);
}

.kontakt__nimekiri li {
  display: grid;
  gap: 0.15rem;
}

.kontakt__silt {
  font-size: var(--tekst-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--varv-tekst-sekundaarne);
}

.kontakt__sotsiaal {
  margin-top: var(--ruum-3);
  display: grid;
  gap: var(--ruum-1);
}

.kontakt__tegevus {
  margin-top: var(--ruum-4);
}

/* Kontaktivorm — keskveerg, keskjoonel */
.vorm {
  max-width: 38rem;
  margin-inline: auto;
  text-align: left;
}

.vorm__rida {
  display: grid;
  gap: 0.4rem;
  margin-bottom: var(--ruum-2);
}

.vorm label {
  font-size: var(--tekst-s);
  font-weight: 600;
  color: var(--varv-pohiline);
}

.vorm__valikuline {
  font-weight: 400;
  color: var(--varv-tekst-sekundaarne);
}

.vorm input,
.vorm textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--varv-border);
  border-radius: var(--raadius);
  background-color: var(--varv-valge);
  color: var(--varv-tekst);
  font-family: var(--font-tekst);
  font-size: var(--tekst-baas);
  transition: border-color var(--yleminek), box-shadow var(--yleminek);
}

.vorm textarea {
  resize: vertical;
  min-height: 7rem;
}

.vorm input:focus,
.vorm textarea:focus {
  outline: none;
  border-color: var(--varv-aktsent);
  box-shadow: 0 0 0 2px var(--varv-aktsent);
}

/* Honeypot — päris kasutaja eest peidus (bot täidab → Web3Forms blokeerib) */
.vorm__botcheck {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.vorm__tegevus {
  margin-top: var(--ruum-3);
}

.vorm__markus {
  margin-top: var(--ruum-2);
  font-size: var(--tekst-s);
  color: var(--varv-tekst-sekundaarne);
}

/* ============================================================
   CP-12: KKK-vidin (staatiline otsustuspuu, kõigil lehtedel)

   ASUKOHT: VASAK alanurk (Marius 2026-08-18, teine muudatus).

   Ajalugu, et seda mitte kolmandat korda edasi-tagasi liigutada:
   algselt vasakul → tõsteti PAREMALE SalonLife'i nupu kohale, sest kaks
   hõljuvat nuppu vastandnurkades lõhkusid lehe → nüüd TAGASI VASAKULE.
   Vahepeal muutus üks asi, mis teeb vasaku nurga jälle ohutuks:
   SalonLife'i nupp on mobiilis peidetud ja desktopil jääb see PAREMALE,
   seega vastandnurgad ei võitle enam sama ruumi pärast ja me ei sõltu
   enam --salonlife-korgus'est (see muutuja jääb alles, aga vidin ei
   kasuta seda — SalonLife'i nupp on nüüd teises servas).

   ALUMINE NIHE ON KOHUSTUSLIK: mobiilis on all kleepuv riba (--riba-korgus)
   ja vidin EI TOHI selle nuppe katta (Marius: "et ta ei kataks põhimenüü
   nuppe"). Vasakus servas on riba esimene lahter ET/EN keelevaheti, seega
   katmine peidaks just keelevahetuse.

   z-index = --z-riba + 1 (sama muster mis .hyppa-sisule, base.css) —
   avatud paneel peab riba kattest üle olema, sest kasutaja on aktiivselt
   sellega tegemas. Hover = ainult värvimuutus (Mariuse põhimõte, ei
   translateX/Y). Kõik värvid var(--...) kaudu (CLAUDE.md reegel 7).
   ============================================================ */

/* DESKTOP: vidin peegeldab SalonLife'i nuppu — sama kaugus servast ja
   sama keskjoon (Marius 2026-08-18). Vasak 55px = nende parem 55px, seega
   nupud on ekraani suhtes sümmeetrilised.

   Keskjoone arvutus: nende nupp on 63px kõrge ja 40px põhjast, seega tema
   kese on 40 + 63/2 = 71,5px. Meie nupp on --vidin-mull (56px) kõrge, seega
   meie `bottom` peab olema 71,5 - 28 = 43,5px. calc teeb selle ise, nii et
   kui kumbki mõõt muutub, ei pea käsitsi ümber arvutama. */
.vidin {
  position: fixed;
  left: var(--salonlife-vahe-serv);
  bottom: calc(
    var(--salonlife-vahe-all) +
    (var(--salonlife-nupp-korgus) - var(--vidin-mull)) / 2
  );
  z-index: calc(var(--z-riba) + 1);
}

/* MOBIIL: SalonLife'i nuppu ei ole (peidetud), seega joondust pole vaja.
   Vidin istub kleepuva riba KOHAL — muidu kataks mull riba vasakut lahtrit
   (ET/EN keelevaheti) — ja tihedalt serva ligi (Marius: "liiguta natuke
   lähemale servale"). */
@media (max-width: 767.98px) {
  .vidin {
    left: var(--ruum-1);
    bottom: calc(var(--riba-korgus) + env(safe-area-inset-bottom, 0px) + var(--ruum-1));
  }
}

.vidin__nupp {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Mõõt tuleb muutujast, sest base.css arvestab sama väärtust mobiili
     alumises polstris (--vidin-mull, theme.css). Kui muudad suurust,
     muuda ainult muutujat — muidu tekib mulli alla peituv sisu.

     RING, MITTE PILL (2026-08-18): nähtav silt on eemaldatud, seega laius
     = kõrgus ja polstrit pole vaja. Varem oli see sisupõhine pill, mis
     kattis lehe sisu. Silt on nüüd nupu `aria-label`-is. */
  width: var(--vidin-mull);
  height: var(--vidin-mull);
  padding: 0;
  border-radius: 999px;
  border: none;
  background-color: var(--varv-aktsent);
  color: var(--varv-pohiline);
  box-shadow: var(--vari-2);
  cursor: pointer;
  transition: background-color var(--yleminek);
}

/* `.vidin__nupp-silt` ja `.vidin--avatud .vidin__nupp` suuruse-reeglid
   EEMALDATUD 2026-08-18: nähtavat silti enam ei ole, nupp on alati ring,
   seega avatud olek ei pea enam laiust kahandama. */

.vidin__nupp:hover {
  background-color: var(--varv-aktsent-tume);
}

.vidin__nupp:focus-visible {
  outline: 2px solid var(--varv-pohiline);
  outline-offset: 2px;
}

.vidin__nupp-ikoon {
  width: 26px;
  height: 26px;
}

.vidin__nupp-ikoon--sulge {
  display: none;
}

.vidin--avatud .vidin__nupp-ikoon--ava {
  display: none;
}

.vidin--avatud .vidin__nupp-ikoon--sulge {
  display: block;
}

.vidin__paneel {
  display: none;
  position: absolute;
  /* Ankurdub VASAKUSSE serva, sest nupp on vasakul (2026-08-18, teine
     muudatus). Peab käima koos .vidin `left`-iga — kui nupp kolib, kolib
     ka see, muidu avaneb paneel ekraanist välja. */
  left: 0;
  bottom: calc(var(--vidin-mull) + var(--ruum-2));
  flex-direction: column;
  width: min(92vw, 360px);
  max-height: min(75vh, 560px);
  background-color: var(--varv-valge);
  border-radius: var(--raadius-suur);
  box-shadow: var(--vari-2);
  overflow: hidden;
}

.vidin--avatud .vidin__paneel {
  display: flex;
}

.vidin__pais {
  display: flex;
  align-items: center;
  gap: var(--ruum-1);
  padding: var(--ruum-2);
  background-color: var(--varv-pohiline);
  color: var(--varv-tekst-pohjal);
  flex: 0 0 auto;
}

.vidin__tagasi,
.vidin__sulge {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: calc(-1 * var(--ruum-1));
  border: none;
  background: transparent;
  color: var(--varv-tekst-pohjal);
  cursor: pointer;
  border-radius: var(--raadius);
  transition: background-color var(--yleminek);
}

.vidin__tagasi svg,
.vidin__sulge svg {
  width: 20px;
  height: 20px;
}

.vidin__tagasi:hover,
.vidin__sulge:hover {
  background-color: rgba(247, 243, 234, 0.12);
}

.vidin__tagasi:focus-visible,
.vidin__sulge:focus-visible {
  outline: 2px solid var(--varv-aktsent);
  outline-offset: -2px;
}

.vidin__pealkiri {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--font-pealkiri);
  font-size: var(--tekst-m);
  font-weight: 600;
  text-align: center;
}

.vidin__sisu {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--ruum-2);
}

.vidin__menyy {
  display: flex;
  flex-direction: column;
  gap: var(--ruum-1);
}

.vidin__valik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ruum-1);
  min-height: 44px; /* puutetsoon */
  padding: var(--ruum-1) var(--ruum-2);
  border: 1px solid var(--varv-border);
  border-radius: var(--raadius);
  background-color: var(--varv-taust);
  color: var(--varv-tekst);
  font-family: var(--font-tekst);
  font-size: var(--tekst-s);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--yleminek), border-color var(--yleminek);
}

.vidin__valik::after {
  content: "→";
  flex: 0 0 auto;
  color: var(--varv-aktsent);
}

.vidin__valik:hover {
  background-color: var(--varv-valge);
  border-color: var(--varv-aktsent);
}

.vidin__valik:focus-visible {
  outline: 2px solid var(--varv-aktsent);
  outline-offset: 2px;
}

.vidin__vastus {
  font-size: var(--tekst-s);
  line-height: 1.6;
  color: var(--varv-tekst);
}

.vidin__vastus p + p {
  margin-top: var(--ruum-1);
}

.vidin__vastus a {
  color: var(--varv-pohiline);
  font-weight: 600;
}

.vidin__jalus {
  flex: 0 0 auto;
  padding: var(--ruum-2);
  border-top: 1px solid var(--varv-border);
  text-align: center;
}

/* .vidin__broneeri eemaldatud 2026-08-18 — vidina paneelis ei ole enam
   broneerimisnuppu (Marius: "Küsi mult võtame ära broneeringu nupu"). */

.vidin__fallback {
  margin-top: var(--ruum-1);
  font-size: var(--tekst-xs);
  color: var(--varv-tekst-sekundaarne);
}

.vidin__fallback a {
  color: var(--varv-pohiline);
  font-weight: 600;
}

/* ============================================================
   Küpsisenõusoleku bänner (GDPR, GA4 värav) — 2026-07-24
   Mittepealetükkiv alumine riba. z-index KÕRGEIM (üle riba+vidina+SalonLife),
   sest nõusolek tuleb lahendada enne muud. Mobiilis nihkub kleepuva riba
   kohale (bottom-offset). Kaks võrdset nuppu. Kõik värvid var(--...).
   ============================================================ */
.kupsis {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--z-riba) + 10);
  background-color: var(--varv-pohiline);
  color: var(--varv-tekst-pohjal);
  border-top: 2px solid var(--varv-aktsent);
  box-shadow: var(--vari-2);
  padding-block: var(--ruum-2);
}

/* Mobiilis kleepuva riba kohale, et see ei kataks BRONEERI-riba */
@media (max-width: 767.98px) {
  .kupsis {
    bottom: calc(var(--riba-korgus) + env(safe-area-inset-bottom, 0px));
  }
}

.kupsis__sisu {
  display: flex;
  flex-direction: column;
  gap: var(--ruum-2);
  align-items: flex-start;
}

@media (min-width: 768px) {
  .kupsis__sisu {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--ruum-3);
  }
}

.kupsis__pealkiri {
  font-family: var(--font-pealkiri);
  font-size: var(--tekst-m);
  margin-bottom: var(--ruum-1);
  color: var(--varv-valge);
}

.kupsis__tekst {
  font-size: var(--tekst-s);
  color: var(--varv-tekst-pohjal);
  max-width: 60ch;
  margin: 0;
}

/* Nupud — kaks võrdset (keeldumine sama lihtne kui nõustumine) */
.kupsis__nupud {
  display: flex;
  gap: var(--ruum-2);
  flex-shrink: 0;
  width: 100%;
}

@media (min-width: 768px) {
  .kupsis__nupud {
    width: auto;
  }
}

.kupsis__nupp {
  flex: 1;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .kupsis__nupp {
    flex: 0 0 auto;
  }
}

/* Keeldu-nupp tumelillal taustal: hele ääris/tekst (sekundaarne vaikimisi
   tumelilla ääris ei paistaks tumelillal bänneril) */
.kupsis__nupp.nupp--sekundaarne {
  color: var(--varv-tekst-pohjal);
  border-color: var(--varv-tekst-pohjal);
  background-color: transparent;
}

.kupsis__nupp.nupp--sekundaarne:hover {
  background-color: var(--varv-tekst-pohjal);
  color: var(--varv-pohiline);
}

/* ============================================================
   AUDIT 2026-07-25 — uued komponendid
   (privaatsuspoliitika/404/tänuleht, jaluse õiguslikud lingid,
   vormi GDPR-märkus, liikumise vähendamise eelistus)
   ============================================================ */

/* ---- Tekstileht (privaatsus, 404, tänuleht) ---- */
.tekstileht {
  max-width: 68ch;
  margin-inline: auto;
}

.tekstileht--keskel {
  text-align: center;
}

.tekstileht h2 {
  margin-top: var(--ruum-4);
  margin-bottom: var(--ruum-2);
}

.tekstileht h2:first-child {
  margin-top: 0;
}

.tekstileht h3 {
  margin-top: var(--ruum-3);
  margin-bottom: var(--ruum-1);
}

.tekstileht p + p,
.tekstileht ul + p {
  margin-top: var(--ruum-2);
}

.tekstileht__loend {
  margin-top: var(--ruum-2);
  padding-left: var(--ruum-3);
}

.tekstileht__loend li + li {
  margin-top: var(--ruum-1);
}

/* 404 lingiloend: ilma täppideta, keskel */
.tekstileht__loend--lingid {
  list-style: none;
  padding-left: 0;
}

/* ---- Jaluse õiguslikud lingid ---- */
.jalus__alumine a,
.jalus__link-nupp {
  color: var(--varv-tekst-pohjal);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-size: inherit;
  padding: 0;
}

.jalus__alumine a:hover,
.jalus__link-nupp:hover {
  color: var(--varv-aktsent);
}

/* ---- Vormi GDPR-märkus ---- */
.vorm__nousolek {
  font-size: var(--tekst-xs);
  color: var(--varv-tekst-sekundaarne);
  margin-top: var(--ruum-2);
}

/* ---- Liikumise vähendamise eelistus (WCAG 2.3.3 / prefers-reduced-motion) ----
   Kasutaja süsteemisäte "vähenda liikumist" → lülitame välja animatsioonid,
   üleminekud ja sujuva kerimise. Hover-VÄRVIMUUTUS jääb alles (DESIGN.md:
   hover = värvimuutus, mitte liikumine) — kaob ainult liikumine/ajastus. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- hCaptcha widget (2026-07-25) ----
   Widget on iframe fikseeritud mõõtudega (~303x78) — anname sellele oma rea
   ja hoiame keskjoont (DESIGN.md). Kitsal mobiilil skaleerub iframe ise. */
.vorm__kaptsa {
  margin-top: var(--ruum-3);
  display: flex;
  justify-content: center;
}

.vorm__kaptsa .h-captcha {
  /* Reserveerib kõrguse ENNE widgeti laadimist → ei hüppa (CLS) */
  min-height: 78px;
}

/* Vormi veateade (captcha lahendamata, 2026-07-25) */
.vorm__viga {
  margin-top: var(--ruum-2);
  text-align: center;
  font-size: var(--tekst-s);
  font-weight: 600;
  color: var(--varv-pohiline);
  border-left: 3px solid var(--varv-aktsent);
  padding: var(--ruum-1) var(--ruum-2);
  background-color: var(--varv-valge);
}