/* Tööriistakeskus – päise plugin
   Kõik reeglid on skoobitud .tkh-header alla, et vältida konflikte Divi/teema stiilidega. */

.tkh-header{
  --tkh-orange:#F2DA49;
  --tkh-yellow:#F2DA49;
  --tkh-charcoal:#123F6E;
  --tkh-steel-line:#3E464C;
  --tkh-white:#FFFFFF;
  --tkh-muted:#A9A296;
  --tkh-ink:#1C1F22;
  --tkh-steel-blue:#3D5A73;

  font-family:'IBM Plex Sans', sans-serif;
  -webkit-font-smoothing:antialiased;
  box-sizing:border-box;
}
.tkh-header *, .tkh-header *::before, .tkh-header *::after{ box-sizing:inherit; }
.tkh-header a{ text-decoration:none; color:inherit; }
.tkh-header button{ font-family:inherit; }

/* ---- Full-bleed trikk, taaskasutatud kõigil laiadel plokkidel ----
   Ulatub üle vaate laiuse, sõltumata sellest, kas lühikood on Divi
   tavalises (boxed) reas või Fullwidth sektsioonis. */
.tkh-site-top,
.tkh-slider,
.tkh-stats-bar{
  position:relative;
  width:100vw;
  left:50%;
  margin-left:-50vw;
}

/* ---- Utility-riba (topbar + logo/otsing + menüü) ---- */
.tkh-site-top{
  background:var(--tkh-charcoal);
  color:var(--tkh-white);
}
.tkh-topbar{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;
  max-width:1240px; margin:0 auto; padding:10px 24px;
  font-size:15px; color:var(--tkh-white); border-bottom:1px solid rgba(255,255,255,0.08);
}
.tkh-topbar a:hover{ color:var(--tkh-yellow); }
.tkh-links{ display:flex; gap:20px; flex-wrap:wrap; align-items:center; }
.tkh-topbar-right{ gap:18px; }
.tkh-topbar-link{ display:inline-flex; align-items:center; gap:6px; }
.tkh-topbar-link svg{ flex-shrink:0; opacity:0.85; }

/* ---- „Minu konto" hõljuv „Logi sisse" (16.10.2026) ----
   .tkh-headeraction-item on puhas paigutuskiht (ilma selleta oleks "Minu
   konto" lingi ümber uus <div>, mis .tkh-headeractions flex-rea sees
   nägemata muudaks; vt .tkh-account-dropdown allpool, miks box siiski vaja
   on - positsioneerimiskontekst). Rippmenüü ise on AINULT külastajale, kes
   pole sisse loginud (vt hd-shortcode.php $tkh_guest) - klass
   "tkh-account-wrap" lisandub ainult siis. */
.tkh-headeraction-item{ position:relative; display:flex; }
.tkh-account-dropdown{
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(4px);
  margin-top:6px; padding:6px; min-width:150px; background:#fff; border-radius:6px;
  box-shadow:0 12px 28px -10px rgba(18,63,110,0.35);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .14s ease, transform .14s ease;
  z-index:40;
}
/* Nähtamatu "sild" rippmenüü ja käivitava lingi vahel, et hiir ei kaotaks
   hõljumist lünga peal liikudes (muidu peaks hiir liikuma täpselt vertikaalselt). */
.tkh-account-dropdown::before{ content:""; position:absolute; left:0; right:0; top:-10px; height:10px; }
.tkh-account-wrap:hover .tkh-account-dropdown,
.tkh-account-wrap:focus-within .tkh-account-dropdown{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
.tkh-account-dropdown a{
  display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:4px;
  font-size:13px; font-weight:600; color:var(--tkh-charcoal); white-space:nowrap;
}
.tkh-account-dropdown a:hover{ background:#F5F3EE; color:var(--tkh-charcoal); }
.tkh-account-dropdown svg{ flex-shrink:0; opacity:.7; }

.tkh-lang-switcher-slot{
  display:flex; align-items:center; gap:6px;
  padding-left:16px; margin-left:2px; border-left:1px solid rgba(255,255,255,0.14);
}
.tkh-lang-switcher{ display:flex; align-items:center; gap:10px; }
.tkh-lang-item{
  display:inline-flex; align-items:center; gap:6px; color:#B9B2A4; font-size:14px; font-weight:600;
  letter-spacing:0.02em; opacity:0.85; transition:opacity .15s ease, color .15s ease;
}
.tkh-lang-item:hover{ opacity:1; color:var(--tkh-white); }
.tkh-lang-flag{
  display:inline-flex; width:21px; height:15px; border-radius:2px; overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,0.25);
}
.tkh-lang-flag svg{ width:100%; height:100%; display:block; }
.tkh-lang-mode-flag .tkh-lang-item{ gap:0; }

.tkh-mainbar{
  max-width:1240px; margin:0 auto; padding:18px 24px 8px;
  display:flex; align-items:center; gap:36px; flex-wrap:wrap;
}
.tkh-logo{ display:flex; align-items:center; flex-shrink:0; }
.tkh-display{
  font-family:var(--tk-font-display, 'Barlow Condensed', sans-serif); letter-spacing:0.02em; font-size:34px; line-height:1; color:var(--tkh-white);
  text-transform:uppercase; /* Bebas Neue -> Barlow Condensed 10.09.2026 */
}
.tkh-logo-img{ display:block; height:40px; width:auto; max-width:260px; object-fit:contain; }

/* Otsingu keskmine "rada": võtab enda alla kogu vaba ruumi logo ja konto/
   ostukorvi vahel ning tsentreerib selle sees tegeliku (max 560px) otsingukasti. */
.tkh-search-center{ flex:1; min-width:220px; display:flex; justify-content:center; }

.tkh-searchwrap{ position:relative; width:100%; max-width:560px; }
.tkh-searchwrap input{
  width:100%; padding:13px 52px 13px 16px; border-radius:2px;
  background:rgba(255,255,255,0.08); font-family:'IBM Plex Sans', sans-serif; font-size:14.5px;
  border:1px solid rgba(255,255,255,0.16);
  color:var(--tkh-white) !important;
  -webkit-text-fill-color:var(--tkh-white);
  caret-color:var(--tkh-white);
}
.tkh-searchwrap input::placeholder{ color:var(--tkh-muted); opacity:1; }
.tkh-searchwrap input:-webkit-autofill{
  -webkit-text-fill-color:var(--tkh-white) !important;
  -webkit-box-shadow:0 0 0 1000px #2A2F34 inset;
  transition:background-color 9999s ease-in-out 0s;
}
.tkh-searchwrap button{
  position:absolute; right:0; top:0; bottom:0; width:46px;
  background:var(--tkh-orange); border:none; color:var(--tkh-charcoal); cursor:pointer;
  display:flex; align-items:center; justify-content:center; border-radius:0 2px 2px 0;
}

/* ---- Kiirotsingu (live search) tulemuste rippmenüü ---- */
.tkh-search-results{
  position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:60;
  background:#fff; border-radius:4px; overflow:hidden;
  box-shadow:0 18px 34px -14px rgba(27,31,35,0.4);
  max-height:70vh; overflow-y:auto;
}
.tkh-search-results[hidden]{ display:none; }
.tkh-search-status{
  padding:14px 16px; font-size:13px; color:#6B6459;
}
.tkh-search-results .tkh-search-item{
  display:flex; align-items:center; gap:12px; padding:10px 14px;
  color:var(--tkh-charcoal); border-top:1px solid #EFEBE3; cursor:pointer;
}
.tkh-search-results .tkh-search-item:first-child{ border-top:none; }
.tkh-search-results .tkh-search-item:hover,
.tkh-search-results .tkh-search-item.is-active{ background:#F5F3EE; }
.tkh-search-item-thumb{
  flex:0 0 40px; width:40px; height:40px; border-radius:3px; object-fit:cover;
  background:#EFEBE3;
}
.tkh-search-item-body{ flex:1; min-width:0; }
.tkh-search-results .tkh-search-item-name{
  color:var(--tkh-charcoal); font-size:13.5px; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.tkh-search-item-price{ font-size:13px; font-weight:700; color:var(--tkh-orange); white-space:nowrap; margin-left:8px; }
.tkh-search-item-price del{ font-weight:400; color:#A9A296; margin-right:5px; }
.tkh-search-results .tkh-search-viewall{
  display:block; text-align:center; padding:12px 14px; font-size:12.5px; font-weight:700;
  color:var(--tkh-orange); border-top:1px solid #EFEBE3; background:#FBFAF7;
}
.tkh-search-results .tkh-search-viewall:hover{ color:var(--tkh-charcoal); }

.tkh-headeractions{ display:flex; align-items:center; gap:26px; flex-shrink:0; margin-left:auto; }
.tkh-headeraction{
  display:flex; flex-direction:column; align-items:center; gap:4px; font-size:11px; color:#B9B2A4; position:relative;
}
.tkh-headeraction svg{ width:22px; height:22px; }
.tkh-cart-count{
  position:absolute; top:-6px; right:-10px; background:var(--tkh-orange); color:var(--tkh-charcoal);
  font-size:10px; font-weight:700; width:16px; height:16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}

/* ---- Usaldusmärgis („Turvaline ostukoht”) ----
   Kuvatakse hero-slaideri paremas ülanurgas, ILMA kaardi/taustata — pilt ise
   (nt logo enda taust/vari) peab kandma visuaalset eristust slaidist. Kuvatakse
   võimalikult originaalsuuruses (width/height:auto), ülempiiriga, et üleslaetud
   pilt ei saaks slaiderit üle koormata, kui see on erakordselt suur. */
.tkh-trust-badge{
  position:absolute; top:24px; right:24px; z-index:5;
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s ease;
}
a.tkh-trust-badge{ cursor:pointer; }
a.tkh-trust-badge:hover{ transform:translateY(-2px); }
.tkh-trust-badge-img{ display:block; width:auto; height:auto; max-height:var(--tkh-trust-badge-size, 80px); max-width:calc(var(--tkh-trust-badge-size, 80px) * 1.8); object-fit:contain; }

.tkh-nav{ border-top:1px solid rgba(255,255,255,0.08); margin-top:10px; position:relative; }
.tkh-navwrap{
  max-width:1240px; margin:0 auto; padding:0 24px;
  display:flex; align-items:center; gap:2px; font-size:19.5px; font-weight:700;
  letter-spacing:0.04em; text-transform:uppercase; overflow-x:auto; list-style:none;
  scrollbar-width:none; /* Firefox - kerimine säilib, riba ennast ei näidata (21.10.2026, "Leiunurk" lisandumisel muutus kerimine nähtavaks kitsamatel akendel). */
  -ms-overflow-style:none; /* vana Edge/IE. */
}
.tkh-navwrap::-webkit-scrollbar{ display:none; } /* Chrome/Safari/uus Edge. */
.tkh-navwrap li{ list-style:none; }
.tkh-navwrap a{ padding:15px 17px; color:var(--tkh-white); white-space:nowrap; display:inline-block; border-bottom:2px solid transparent; }
.tkh-navwrap a:hover{ color:var(--tkh-white); border-bottom-color:var(--tkh-orange); }
.tkh-navwrap-placeholder{ padding:14px 24px; color:#8B8478; font-size:12.5px; text-transform:none; }

/* Esimese menüüpunkti nähtav tekst joondub logo vasaku servaga (lingi enda
   17px vasak padding muidu nihutaks teksti logost paremale) — VÄLJA ARVATUD
   mega-menüü nupp, millel peab olema sümmeetriline padding, kui tal on
   avatuna oma taustaplokk (vt allpool). */
.tkh-navwrap > li:first-child > a{ padding-left:0; }
.tkh-navwrap > li:first-child.tkh-mm-trigger > a{ padding-left:17px; }

/* ---- Tavaline rippmenüü desktopil (nt "Teenused") (15.09.2026) ----
   ⚠ JUURPÕHJUS enne seda parandust: peamenüü desktopi wp_nav_menu() kutse
   kasutas `depth => 1`, mis JÄTTIS ALAMKIRJED TÄIELIKULT RENDERDAMATA -
   kirjed nagu "Teenused" (Hooldus ja remont, Teritamine, Tehnika rent,
   Robotniiduki paigaldus) kadusid desktopilt täiesti, ilma igasuguse
   vihjeta. Mobiilisahtel kasutas juba `depth => 2` ja näitas neid õigesti.
   Vt class-tkh-shortcode.php - depth on nüüd 2 ka desktopil.
   `:not(.tkh-mm-trigger)` VÄLISTAB "Tooted" kirje - sellel on oma
   JS-põhine mega-menüü süsteem (.tkh-mm-shell allpool), see reegel
   puudutab AINULT tavalisi WP-natiivseid alammenüüsid.

   ⚠⚠ TEINE JUURPÕHJUS (avastatud kasutaja tagasisidest "arvutivaates ei
   avane ikka menüü" - esimene versioon kasutas `position:absolute`, mis
   NÄGI ÕIGE VÄLJA koodis, aga oli EKRAANIL nähtamatu): `.tkh-navwrap`
   kannab `overflow-x:auto` (horisontaalne kerimine kitsamatel akendel).
   CSS-i spetsifikatsioon SUNNIB sel juhul ka `overflow-y` "auto"-le, isegi
   kui seda ei ole eraldi määratud - see LÕIKAB ÄRA iga position:absolute
   lapse, mis ulatub navwrap'i enda kõrgusest välja, TÄIESTI SÕLTUMATA
   opacity/visibility väärtusest. "Tooted" mega-menüü (.tkh-mm-shell)
   väldib seda, sest ta EI OLE .tkh-navwrap laps - ta on mujal DOM-is,
   positsioneeritud .tkh-nav suhtes.

   LAHENDUS: `position:fixed` - fixed-elemendi sisaldav plokk on ALATI
   vaateaken (viewport), mitte lähim positsioneeritud esivanem, seega
   overflow-lõikumine ei puuduta teda üldse. Protsentides "top:100%" ei
   tööta enam (fixed ei tea oma vanema kõrgust), seega asukoht (left/top)
   arvutatakse JS-iga hõljutamisel/fookusel - vt tkh-header.js lõppu. */
.tkh-navwrap li.menu-item-has-children:not(.tkh-mm-trigger){ position:relative; }
.tkh-navwrap li.menu-item-has-children:not(.tkh-mm-trigger) > a{
  display:inline-flex; align-items:center; gap:6px;
}
.tkh-navwrap li.menu-item-has-children:not(.tkh-mm-trigger) > a::after{
  content:''; width:6px; height:6px; flex-shrink:0;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
}
.tkh-navwrap li.menu-item-has-children:not(.tkh-mm-trigger) > .sub-menu{
  list-style:none; margin:0; padding:8px 0; position:fixed; top:0; left:0;
  min-width:240px; background:var(--tkh-charcoal); border-top:3px solid var(--tkh-orange);
  box-shadow:0 24px 40px -20px rgba(0,0,0,0.35); z-index:200;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
.tkh-navwrap li.menu-item-has-children:not(.tkh-mm-trigger):hover > .sub-menu,
.tkh-navwrap li.menu-item-has-children:not(.tkh-mm-trigger):focus-within > .sub-menu{
  opacity:1; visibility:visible; transform:translateY(0);
  transition:opacity .16s ease, transform .16s ease;
}
.tkh-navwrap li.menu-item-has-children:not(.tkh-mm-trigger) .sub-menu li{ list-style:none; }
.tkh-navwrap li.menu-item-has-children:not(.tkh-mm-trigger) .sub-menu a{
  display:block; padding:11px 20px; font-size:14.5px; font-weight:600;
  text-transform:none; letter-spacing:normal; white-space:nowrap; border-bottom:0;
  color:var(--tkh-white);
}
.tkh-navwrap li.menu-item-has-children:not(.tkh-mm-trigger) .sub-menu a:hover{
  background:rgba(255,255,255,0.08); color:var(--tkh-orange); border-bottom:0;
}
@media (prefers-reduced-motion: reduce){
  .tkh-navwrap li.menu-item-has-children:not(.tkh-mm-trigger) > .sub-menu{ transition:none; }
}

/* ---- Mega-menüü (tootekategooriad) ----
   Avaneb peamenüü "TOOTED"-tüüpi kirje (klass "tkh-megamenu" VÕI otse poe
   lehele viiv link) kohal hõljudes/klõpsates. Paneel on positsioneeritud
   .tkh-site-top suhtes (juba position:relative + 100vw full-bleed), nii et
   see laotub automaatselt üle kogu vaate laiuse, täpselt navigatsiooniriba alla. */
.tkh-nav .tkh-mm-trigger > a{ display:inline-flex; align-items:center; gap:10px; }

/* Divi rakendab menüü-lingi sees olevatele <span> elementidele globaalse
   visibility:hidden reegli (mõeldud tema enda hõljutamisel-avanevatele
   alamlingi-ikoonidele) — see tabab kaasa ka meie ikooni/sildi span'e,
   mistõttu need muidu jäävad nähtamatuks. Sunnime need alati nähtavaks. */
.tkh-nav .tkh-mm-trigger > a span,
.tkh-nav .tkh-mm-trigger > a span::before,
.tkh-nav .tkh-mm-trigger > a span::after{ visibility:visible !important; }

.tkh-mm-toggle-icon{ position:relative; width:15px; height:11px; flex-shrink:0; }
.tkh-mm-toggle-icon span,
.tkh-mm-toggle-icon::before,
.tkh-mm-toggle-icon::after{
  content:''; position:absolute; left:0; right:0; height:2px; background:currentColor;
  transition:transform .18s ease, opacity .18s ease;
}
.tkh-mm-toggle-icon::before{ top:0; }
.tkh-mm-toggle-icon span{ top:4.5px; display:block; }
.tkh-mm-toggle-icon::after{ top:9px; }
.tkh-mm-trigger.is-open .tkh-mm-toggle-icon::before{ transform:translateY(4.5px) rotate(45deg); }
.tkh-mm-trigger.is-open .tkh-mm-toggle-icon span{ opacity:0; }
.tkh-mm-trigger.is-open .tkh-mm-toggle-icon::after{ transform:translateY(-4.5px) rotate(-45deg); }

.tkh-nav .tkh-mm-trigger.is-open > a{
  background:var(--tkh-orange); color:var(--tkh-charcoal); border-bottom-color:transparent;
}

.tkh-mm-shell{
  --tkh-mm-maxh: 70vh;
  position:absolute; top:100%; left:0; right:0; z-index:70;
  opacity:0; visibility:hidden; transform:translateY(-6px); pointer-events:none;
  transition:opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
  background:var(--tkh-white); border-top:3px solid var(--tkh-orange);
  box-shadow:0 24px 40px -20px rgba(0,0,0,0.35);
}
.tkh-mm-shell.is-open{
  opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;
  transition:opacity .16s ease, transform .16s ease;
}

.tkh-mm-inner{
  max-width:1240px; margin:0 auto; padding:20px 24px;
  display:flex; align-items:flex-start;
}
/* Iga veerg kerib iseseisvalt (mitte kogu paneel korraga) — nii ei pea
   alamkategooriate vaatamiseks kunagi tagasi üles kerima: 2./3. veeru
   sisu vahetub alati oma veeru TIPUST, sõltumata sellest, kui kaugele
   1. veerus on parasjagu kerinud. Tegelik kõrgus (--tkh-mm-maxh) arvutab
   JS iga avamise ja akna suuruse muutuse peale, et paneel kasutaks kogu
   vaba ekraaniruumi ega jääks tarbetult lühikeseks. */
.tkh-mm-col{
  flex:1 1 0; min-width:0; padding:0 20px; border-right:1px solid #ECE8DF;
  max-height:var(--tkh-mm-maxh); overflow-y:auto;
}
.tkh-mm-col:last-child{ border-right:none; }
.tkh-mm-col-1{ padding-left:0; flex:0 0 27%; }

.tkh-mm-list{ list-style:none; margin:0; padding:0; }
.tkh-mm-col-2 .tkh-mm-list,
.tkh-mm-col-3 .tkh-mm-list{ display:none; }
.tkh-mm-col-2 .tkh-mm-list.is-active,
.tkh-mm-col-3 .tkh-mm-list.is-active{ display:block; }

.tkh-mm-col-1 li{ margin:0; }
.tkh-mm-col-1 a{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:7px 10px; font-family:'IBM Plex Sans', sans-serif; font-size:15px; font-weight:600;
  color:var(--tkh-ink); text-transform:none; letter-spacing:normal; border-radius:2px;
}
.tkh-mm-col-1 li.is-active > a,
.tkh-mm-col-1 a:hover{ background:#F5F3EE; color:var(--tkh-charcoal); }
.tkh-mm-col-1 a svg{ flex-shrink:0; opacity:0.5; }
/* Kategooria tunnuspilt menüükirje ees (16.10.2026) - enne nime, nagu
   "span" alati on (vt .tkh-mm-col-1 a:justify-content:space-between: pilt+nimi
   jäävad üheks rühmaks vasakule, nool paremale). AINULT mega-menüüs, mitte
   poe/kategooria külgriba filtrites - vt hd-megamenu.php get_category_tree()
   kommentaari. Kirjeid, millel pilti pole (enamik), ei nihuta midagi - pilt
   lihtsalt puudub, tekst algab sealt, kus muidu. */
.tkh-mm-col-1 a > span{ flex:1; }
.tkh-mm-thumb{
  flex-shrink:0; width:28px; height:28px; border-radius:5px; object-fit:contain;
  background:#F5F3EE; padding:2px;
}
.tkh-mm-thumb--sm{ width:20px; height:20px; border-radius:4px; }

.tkh-mm-col-2 li,
.tkh-mm-col-3 li{ margin:0; }
.tkh-mm-col-2 a,
.tkh-mm-col-3 a{
  display:flex; align-items:center; gap:8px; padding:4px 4px;
  font-family:'IBM Plex Sans', sans-serif; font-size:14px; font-weight:500;
  color:var(--tkh-steel-blue); text-transform:none; letter-spacing:normal;
}
.tkh-mm-col-2 a:hover,
.tkh-mm-col-3 a:hover{ color:var(--tkh-charcoal); text-decoration:underline; }
.tkh-mm-col-2 li.is-active > a{ color:var(--tkh-charcoal); font-weight:700; }
.tkh-mm-col-2 a svg{ flex-shrink:0; opacity:0.45; }

/* ---- Populaarsed kategooriad (tagasiside punkt 9) ----
   Lauaarvutis EI muutu midagi: pealkiri ja nupp on peidus, kõik 20
   kategooriat nähtavad nagu enne. Kogu kokkutõmbamine elab ainult
   allolevas mobiili murdepunktis. */
.tkh-mm-popular-head{ display:none; }
.tkh-mm-showall{ display:none; }

@media (max-width:900px){
  .tkh-mm-inner{ flex-direction:column; max-height:var(--tkh-mm-maxh); overflow-y:auto; padding:16px; }
  .tkh-mm-col{ width:100%; padding:10px 0; border-right:none; border-bottom:1px solid #ECE8DF; max-height:none; overflow-y:visible; }
  .tkh-mm-col:last-child{ border-bottom:none; }
  .tkh-mm-col-1{ flex-basis:auto; }

  /* Kokkutõmbamine käib AINULT siis, kui server pani .tkh-mm-collapsible
     klassi — see tuleb ainult siis, kui vähemalt 4 populaarset kategooriat
     tegelikult leiti. Kui ID-d ei klapi, jääb menüü täiskujule. */
  .tkh-mm-collapsible .tkh-mm-popular-head{
    display:block;
    margin:0 0 10px;
    font-family:var(--tk-font-display, 'Barlow Condensed', sans-serif);
    text-transform:uppercase;
    letter-spacing:0.02em;
    font-size:15px;
    color:var(--tkh-muted, #6B6B6B);
  }

  /* Flex + order, sest soovitud järjekord EI OLE tähestikuline:
     Aiatehnika, Metsatehnika, Aku- ja elektri..., Käsitööriistad, ...
     --tkh-pop tuleb serverist iga populaarse kirje inline stiilina. */
  .tkh-mm-collapsible .tkh-mm-col-1 .tkh-mm-list{
    display:flex;
    flex-direction:column;
  }
  .tkh-mm-collapsible .tkh-mm-col-1 .tkh-mm-l1{ order:99; }
  .tkh-mm-collapsible .tkh-mm-col-1 .tkh-mm-l1[data-popular]{ order:var(--tkh-pop, 50); }

  .tkh-mm-collapsible:not(.is-expanded) .tkh-mm-col-1 .tkh-mm-l1:not([data-popular]){
    display:none;
  }

  .tkh-mm-collapsible .tkh-mm-showall{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    margin-top:12px;
    padding:12px 16px;
    background:transparent;
    border:1px solid var(--tkh-charcoal, #2B2B2B);
    border-radius:4px;
    font-family:var(--tk-font-display, 'Barlow Condensed', sans-serif);
    text-transform:uppercase;
    letter-spacing:0.02em;
    font-size:15px;
    font-weight:600;
    color:var(--tkh-charcoal, #2B2B2B);
    cursor:pointer;
  }
  .tkh-mm-collapsible .tkh-mm-showall svg{ transition:transform .18s ease; }
  .tkh-mm-collapsible.is-expanded .tkh-mm-showall svg{ transform:rotate(180deg); }

  /* Nupu silt vahetub olekuga. Mõlemad on DOM-is, et laius ei hüppaks. */
  .tkh-mm-collapsible .tkh-mm-showall-less{ display:none; }
  .tkh-mm-collapsible.is-expanded .tkh-mm-showall-more{ display:none; }
  .tkh-mm-collapsible.is-expanded .tkh-mm-showall-less{ display:inline; }
}

/* ---- Slaider ---- */
.tkh-slider{
  /* 620 -> 540px (11.09.2026). Madalam slaider toob ka inforiba
     nuppudele lahemale, sest sisuplokk on pystsuunas tsentreeritud ja
     inforiba on alumise serva kylge kinnitatud. */
  min-height:540px;
  overflow:hidden;
  background:var(--tkh-charcoal);
}
.tkh-slides{ position:relative; width:100%; height:100%; min-height:540px; }

.tkh-slide{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transition:opacity .8s ease;
  z-index:1;
}
.tkh-slide.is-active{ opacity:1; visibility:visible; z-index:2; }

.tkh-slide-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
}
.tkh-slide-fallback-illustration{
  position:absolute; top:0; right:0; height:100%; width:62%; opacity:0.9; pointer-events:none;
}
.tkh-slide-fallback-illustration svg{ width:100%; height:100%; display:block; }

.tkh-slide-scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 78% 30%, rgba(255,90,31,0.22), transparent 55%),
    linear-gradient(100deg, rgba(20,23,26,0.92) 0%, rgba(20,23,26,0.72) 42%, rgba(20,23,26,0.32) 75%);
}

.tkh-slide-content{
  position:relative; z-index:2;
  max-width:1240px; height:100%; margin:0 auto; padding:48px 24px;  /* oli 64px */
  display:flex; flex-direction:column; justify-content:center;
  color:var(--tkh-white);
}
.tkh-hero-heading{
  font-family:var(--tk-font-display, 'Barlow Condensed', sans-serif); font-size:var(--tkh-heading-size, 88px);
  /* 11.09.2026: tihedam reavahe (0.95 -> 0.88) ja vaiksem vahe
     alltekstini (20 -> 12px). */
  line-height:0.88; margin:0 0 12px; color:var(--tkh-white);
  /* text-transform tuleb NÜÜD seadetest (TK Päis -> Slaideri pealkirja
     tähesuurus), mitte kõvakoodist. Varem oli siin `uppercase`, mis lisati
     fondiühtlustuse käigus Bebas Neue asendamisel — see sundis kõik
     pealkirjad suurtähtedesse, ka siis kui makett tahab lausekirja. */
}
.tkh-hero-heading--upper{  text-transform:uppercase; }
.tkh-hero-heading--normal{ text-transform:none; }
.tkh-hero-heading--lower{  text-transform:lowercase; }
/* margin-bottom 30 -> 18px: toob nupud ulespoole, alltekstile lahemale. */
.tkh-hero-p{ color:#E4E0D6; font-size:var(--tkh-subheading-size, 17px); margin:0 0 18px; line-height:1.5; }

.tkh-btn{
  display:inline-flex; align-items:center; gap:10px; width:fit-content;
  background:var(--tkh-orange);
  /* MUST, mitte --tkh-charcoal (#123F6E on navy, mitte must) — 11.09.2026.
     .tkh-btn-ghost kirjutab värvi allpool valgeks üle, seega see puudutab
     ainult kollast esmast nuppu. */
  color:#000;
  /* 700 on MAKSIMUM, mis päriselt olemas on: nupp pärib IBM Plex Sansi ja
     fondipäring laeb 400;500;600;700. 800 paneks brauseri kirja tehislikult
     paksuks tegema (faux bold) — see näeb udune ja ebaühtlane välja. */
  font-weight:700; font-size:15px;
  /* 11.09.2026: MADALAM (pystpolster 16 -> 12px) ja vahem umar (10 -> 6px).
     Kylgpolster taastatud 28px peale - kasutaja mottes oli korgus, mitte laius. */
  padding:12px 28px; border-radius:6px; border:none; cursor:pointer;
}
.tkh-btn:hover{ background:var(--tkh-yellow); }

/* ⚠ SPETSIIFILISUS. Slaider asub `.tkh-header` SEES, ja rida 19 ütleb
   `.tkh-header a{ color:inherit }` — spetsiifilisus (0,1,1). `.tkh-btn`
   on (0,1,0) ja KAOTAB sellele, mistõttu nupulink päris `.tkh-slide-content`
   valge värvi. Seetõttu ei olnud tekst kunagi ei navy ega must, vaid alati
   valge — ja värvi muutmine `.tkh-btn` reeglis ei saanudki midagi teha.
   Need kaks reeglit on (0,2,1) ja võidavad selgelt. */
.tkh-header a.tkh-btn{ color:#000; }
.tkh-header a.tkh-btn-ghost{ color:var(--tkh-white); }

.tkh-btn-ghost{ background:transparent; border:1.5px solid rgba(255,255,255,0.55); color:var(--tkh-white); margin-left:12px; }
.tkh-btn-ghost:hover{ border-color:var(--tkh-white); background:rgba(255,255,255,0.08); }
.tkh-hero-actions{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 0; }

/* ═══ STATISTIKARIBA IKOONID (11.09.2026, makett PDF lk 1) ═══
   Ikoon vasakul, tekst paremal. Kasutab SAMA ikoonikomplekti, mida hero
   inforiba — üks süsteem, mitte kaks. Ilma ikoonita kirjed käituvad
   täpselt nagu enne, sest .tkh-hero-stat--icon klassi siis ei lisata. */
.tkh-hero-stat--icon{ display:flex; align-items:center; gap:14px; }
.tkh-stat-icon{ flex-shrink:0; display:flex; align-items:center; }
.tkh-stat-icon .tkh-info-icon{ width:34px; height:34px; stroke-width:1.6; }
/* Täidetud variant: fill tuleb SVG-lt (fill="currentColor"), stroke'i
   ei tohi peale suruda — muidu tekib kuju ümber topeltjoon. */
.tkh-stat-icon .tkh-info-icon--solid{ stroke:none; stroke-width:0; }
.tkh-hero-stat--icon .tkh-stat-text{ display:block; min-width:0; }
@media (max-width:640px){
  .tkh-stat-icon .tkh-info-icon{ width:26px; height:26px; }
  .tkh-hero-stat--icon{ gap:10px; }
}

/* ═══ HERO INFORIBA (11.09.2026, tagasiside punkt 7) ═══
   ⚠ LAIUSEPIIRANG EEMALDATUD 11.09.2026 kasutaja otsusel. Lisasin siia
   esialgu `.tkh-slide-content > * { max-width:52% }`, et tekst ei jookseks
   tootepildi peale. Kasutaja eelistab reavahetusi ISE määrata — pealkirja
   ja alltekstiväli lähevad läbi nl2br(), seega Enter backendis annab
   päris reavahetuse. Automaatne murdmine võttis selle kontrolli ära. */

/* Inforiba: ÜKS ühine riba terve slaideri all, mitte slaidi kaupa.
   .tkh-slider on juba position:relative (vt rida 26), seega absoluutne
   paigutus töötab. Slaider on full-bleed (100vw), seepärast on sees eraldi
   .tkh-info-inner, mis joondub hero tekstiga (max-width 1240 + 24px). */
.tkh-info-bar{
  /* 11.09.2026: EI OLE enam absoluutselt pohja kulge kinnitatud.
     Riba on nuud sisuploki sees, kohe nuppude jarel - nii tuleb see
     nuppudele lahedale ja kogu plokk (pealkiri + tekst + nupud + riba)
     tsentreerub pystsuunas, andes pildile ules/alla vordse ohu. */
  position:static; z-index:3;
  margin-top:22px;
  padding:0;
}
.tkh-info-inner{
  /* max-width/padding EEMALDATUD: riba on nuud sisuploki sees, mis annab
     juba max-width:1240px + 24px polstri. Topelt polster oleks nihutanud
     riba tekstist paremale. */
  display:flex; align-items:center; flex-wrap:wrap;
  gap:0 26px;
}
.tkh-info-item{
  pointer-events:auto;
  display:flex; align-items:center; gap:11px;
  padding:4px 26px 4px 0;
  color:var(--tkh-white); text-decoration:none;
  border-right:1px solid rgba(255,255,255,0.28);
}
.tkh-info-item:last-child{ border-right:none; padding-right:0; }
a.tkh-info-item:hover .tkh-info-l1{ text-decoration:underline; }
.tkh-info-icon{ flex-shrink:0; opacity:.95; }
/* Hero inforiba ikoon 26 -> 39px (poole suurem, kasutaja soov 11.09.2026).
   Skoobitud .tkh-info-item alla, et see EI puudutaks statistikariba,
   millel on oma suurus (60px). */
.tkh-info-item .tkh-info-icon{ width:39px; height:39px; }
.tkh-info-text{ display:flex; flex-direction:column; line-height:1.25; }
.tkh-info-l1{ font-size:14.5px; font-weight:600; }
.tkh-info-l2{ font-size:13px; color:#E4E0D6; }

@media (max-width:1024px){
  .tkh-info-l1{ font-size:13.5px; }
  .tkh-info-l2{ font-size:12.5px; }
  .tkh-info-item{ padding-right:18px; }
  .tkh-info-inner{ gap:0 18px; }
}
@media (max-width:900px){
  /* Kitsal ekraanil ei mahu riba pildi peale - laseme sel voolata
     slaidi alla oma ribana, et tekst ei kattuks pealkirjaga. */
  .tkh-info-bar{ margin-top:16px; padding:0; background:none; }
  .tkh-info-inner{ gap:10px 16px; }
  .tkh-info-item{
    flex:1 1 44%; border-right:none; padding:0;
  }
}
@media (max-width:520px){
  .tkh-info-item{ flex:1 1 100%; }
}


/* ---- Slaideri juhtnupud ---- */
.tkh-slider-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,0.4);
  background:rgba(20,23,26,0.5); color:var(--tkh-white); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s ease, border-color .15s ease;
}
.tkh-slider-arrow:hover{ background:var(--tkh-orange); border-color:var(--tkh-orange); color:var(--tkh-charcoal); }
.tkh-arrow-prev{ left:24px; }
.tkh-arrow-next{ right:24px; }

.tkh-slider-dots{
  position:absolute; left:50%; transform:translateX(-50%); bottom:26px; z-index:3;
  display:flex; gap:10px;
}
.tkh-dot{
  width:9px; height:9px; border-radius:50%; border:1.5px solid rgba(255,255,255,0.6);
  background:transparent; cursor:pointer; padding:0;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.tkh-dot.is-active{ background:var(--tkh-orange); border-color:var(--tkh-orange); transform:scale(1.15); }
.tkh-dot:hover{ border-color:var(--tkh-orange); }

/* ---- Statistikariba slaideri all ----
   Kolm valitavat kujundust (Admin → TK Päis → Hero slaider → Statistikaribad →
   „Kujundus”), lisaks saab riba täiesti välja lülitada. Vaikimisi „Riba” (.tkh-stats-bar--bar)
   jätab olemasoleva väljanägemise; .tkh-stats-bar--cards ja .tkh-stats-bar--centered
   kirjutavad .tkh-hero-stats / .tkh-hero-stat baasreeglid üle suurema spetsiifilisusega. */
.tkh-stats-bar{ background:#0E3055; border-top:1px solid rgba(255,255,255,0.08); }
.tkh-hero-stats{
  display:flex; flex-wrap:wrap; gap:0; max-width:1240px; margin:0 auto; padding:26px 24px;
}
.tkh-hero-stat{ padding:0 32px 0 0; margin-right:32px; border-right:1px solid rgba(255,255,255,0.14); }
.tkh-hero-stat:last-child{ border-right:none; margin-right:0; }
.tkh-num{ font-family:var(--tk-font-display, 'Barlow Condensed', sans-serif); font-size:40px; color:var(--tkh-white); line-height:1; }
/* .tkh-num on numbrid - text-transform ei ole vajalik. */
.tkh-lbl{ font-size:13px; color:var(--tkh-muted); margin-top:6px; text-transform:uppercase; letter-spacing:0.06em; }

/* --- Kujundus: „Kaardid” --- */
.tkh-stats-bar--cards .tkh-hero-stats{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:16px;
  padding:26px 24px; max-width:1240px; margin:0 auto;
}
.tkh-stats-bar--cards .tkh-hero-stat{
  padding:22px 18px; margin-right:0; border-right:none; border-radius:6px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); text-align:center;
}
.tkh-stats-bar--cards .tkh-num{ font-size:42px; }
.tkh-stats-bar--cards .tkh-lbl{ margin-top:8px; }

/* --- Kujundus: „Keskel” --- */
.tkh-stats-bar--centered .tkh-hero-stats{
  justify-content:center; gap:56px; max-width:1240px; margin:0 auto;
}
.tkh-stats-bar--centered .tkh-hero-stat{
  padding:0; margin-right:0; border-right:none; text-align:center;
}
.tkh-stats-bar--centered .tkh-num{ color:var(--tkh-orange); font-size:46px; }

/* --- Kujundus: „Hele” (ilma sinise taustata) --- */
.tkh-stats-bar--light{ background:#F5F3EE; border-top:1px solid rgba(18,63,110,0.08); }
.tkh-stats-bar--light .tkh-hero-stat{ border-right:1px solid rgba(18,63,110,0.14); }
.tkh-stats-bar--light .tkh-num{ color:var(--tkh-charcoal); }
.tkh-stats-bar--light .tkh-lbl{ color:#6B675E; }

/* --- Kujundus: „Minimalistlik” (ilma taustata, sulandub lehega) --- */
.tkh-stats-bar--minimal{ background:transparent; border-top:1px solid rgba(18,63,110,0.12); }
.tkh-stats-bar--minimal .tkh-hero-stats{ padding:57px 24px 22px; }
.tkh-stats-bar--minimal .tkh-hero-stat{ border-right:1px solid rgba(18,63,110,0.16); text-align:center; }
.tkh-stats-bar--minimal .tkh-num{ color:var(--tkh-charcoal); font-size:44px; }
.tkh-stats-bar--minimal .tkh-lbl{ color:#8A8578; font-size:14px; }

/* --- Kujundus: „Näidisdisaini järgi” (makett, PDF lk 1) ---------------
   Erineb „Minimalistlikust” KOLMES asjas, mis maketiga kokku ei läinud:
     1. pealkiri oli 44px Barlow Condensed  ->  17px IBM Plex Sans 700
     2. alapealkiri oli SUURTÄHTEDES        ->  tavaline lausekiri
     3. tekst oli tsentreeritud             ->  vasakule, ikooni kõrvale
   Ikoon ja pealkiri on mõlemad navy (--tkh-charcoal = #123F6E). */
.tkh-stats-bar--makett{ background:#fff; border-top:1px solid rgba(18,63,110,0.10); }
.tkh-stats-bar--makett .tkh-hero-stats{
  padding:26px 24px;
  /* KÕIK NELI ÜHEL REAL. Baasreegel on `flex-wrap:wrap` ilma paindeta,
     seega pikk pealkiri („STIHL-i autoriseeritud edasimüüja") tegi kirje
     laiaks ja lükkas neljanda teisele reale. */
  flex-wrap:nowrap;
  /* `stretch` (mitte `flex-start`) — MIKS: flex-start andis igale kirjele
     tema enda sisu kõrguse, seega ühe- ja kaherealise pealkirjaga kirjed
     olid eri kõrged ja iga ikoon tsentreerus OMA kirje sees. Tulemus:
     ikoonid eri kõrgusel. `stretch` annab kõigile kirjetele sama kõrguse
     (kõrgeima järgi), mille sees `align-items:center` paneb ikoonid
     ÜHELE joonele. */
  align-items:stretch;
}
.tkh-stats-bar--makett .tkh-hero-stat{
  /* `1 1 0` = kõik neli VÕRDSE laiusega, sõltumata tekstipikkusest —
     nii säilib proportsioon. `min-width:0` lubab pikal pealkirjal kirje
     SEES murduda, selle asemel et rida laiali lükata. */
  flex:1 1 0;
  min-width:0;
}
.tkh-stats-bar--makett .tkh-stat-text{ min-width:0; }
.tkh-stats-bar--makett .tkh-num,
.tkh-stats-bar--makett .tkh-lbl{ overflow-wrap:break-word; }
.tkh-stats-bar--makett .tkh-hero-stat{
  border-right:1px solid rgba(18,63,110,0.14);
  text-align:left;
  padding:2px 26px 2px 0;
}
.tkh-stats-bar--makett .tkh-hero-stat:last-child{ border-right:none; }
.tkh-stats-bar--makett .tkh-stat-icon{ color:var(--tkh-charcoal); }
.tkh-stats-bar--makett .tkh-num{
  font-family:'IBM Plex Sans', sans-serif;   /* mitte Barlow Condensed */
  /* 19px (oli 17px) — kasutaja soov 11.09.2026. 700 on maksimum, mis
     IBM Plex Sansist laaditud on (400;500;600;700), seega paksemaks
     minna ei saa ilma tehisliku faux-boldita. */
  font-size:19px; font-weight:700; line-height:1.3;
  color:var(--tkh-charcoal);
  text-transform:none; letter-spacing:0;
}
.tkh-stats-bar--makett .tkh-lbl{
  font-size:14.5px; font-weight:400; line-height:1.4;   /* oli 13.5px */
  color:#5A6472;
  text-transform:none; letter-spacing:0;   /* baasreegel teeb SUURTÄHED */
  margin-top:4px;
}
/* Ikoon 42 -> 60px (kasutaja soov 11.09.2026, „poole suuremaks").
   Ainult makett-stiilis; hero inforiba jääb 26px peale, sest seal on ruum
   kitsam ja ikoonid on foto peal.
   NB: tekstiplokk on ~49px kõrge (19px*1.3 + 4 + 14.5*1.4), seega 60px
   ikoon on sellest pisut kõrgem ja hakkab rida juhtima — see on teadlik.
   align-items:center hoiab ikooni ja teksti optiliselt koos. */
.tkh-stats-bar--makett .tkh-stat-icon .tkh-info-icon{ width:60px; height:60px; }
.tkh-stats-bar--makett .tkh-hero-stat{ gap:18px; align-items:center; }
@media (max-width:1180px){
  .tkh-stats-bar--makett .tkh-stat-icon .tkh-info-icon{ width:48px; height:48px; }
}
@media (max-width:900px){
  /* Telefonis EI hoia neli veergu ühel real — seal on 2x2 loetavam. */
  .tkh-stats-bar--makett .tkh-hero-stats{ padding:18px 16px; flex-wrap:wrap; gap:16px 0; }
  .tkh-stats-bar--makett .tkh-hero-stat{ border-right:none; padding-right:0; flex:1 1 46%; }
}
@media (max-width:520px){
  .tkh-stats-bar--makett .tkh-hero-stat{ flex:1 1 100%; }
}

/* --- Kujundus: „Aktsentne” (oranž/kuldne taust, ilma sinise taustata) --- */
.tkh-stats-bar--accent{ background:linear-gradient(90deg, var(--tkh-orange), var(--tkh-yellow)); border-top:none; }
.tkh-stats-bar--accent .tkh-hero-stat{ border-right:1px solid rgba(255,255,255,0.3); }
.tkh-stats-bar--accent .tkh-num{ color:var(--tkh-white); }
.tkh-stats-bar--accent .tkh-lbl{ color:rgba(255,255,255,0.85); }

/* --- Kujundus: „Aktsentne (must tekst)” --- */
.tkh-stats-bar--accent-dark{ background:linear-gradient(90deg, var(--tkh-orange), var(--tkh-yellow)); border-top:none; }
.tkh-stats-bar--accent-dark .tkh-hero-stat{ border-right:1px solid rgba(0,0,0,0.18); }
.tkh-stats-bar--accent-dark .tkh-num{ color:#1A1A1A; }
.tkh-stats-bar--accent-dark .tkh-lbl{ color:rgba(0,0,0,0.65); }

/* --- Kujundus: „Aktsentne (keskel)” --- */
.tkh-stats-bar--accent-centered{ background:linear-gradient(90deg, var(--tkh-orange), var(--tkh-yellow)); border-top:none; }
.tkh-stats-bar--accent-centered .tkh-hero-stats{ justify-content:center; gap:56px; }
.tkh-stats-bar--accent-centered .tkh-hero-stat{ padding:0; margin-right:0; border-right:none; text-align:center; }
.tkh-stats-bar--accent-centered .tkh-num{ color:var(--tkh-white); }
.tkh-stats-bar--accent-centered .tkh-lbl{ color:rgba(255,255,255,0.85); }

/* --- Kujundus: „Aktsentne (keskel, must tekst)” --- */
.tkh-stats-bar--accent-centered-dark{ background:linear-gradient(90deg, var(--tkh-orange), var(--tkh-yellow)); border-top:none; }
.tkh-stats-bar--accent-centered-dark .tkh-hero-stats{ justify-content:center; gap:56px; }
.tkh-stats-bar--accent-centered-dark .tkh-hero-stat{ padding:0; margin-right:0; border-right:none; text-align:center; }
.tkh-stats-bar--accent-centered-dark .tkh-num{ color:#1A1A1A; }
.tkh-stats-bar--accent-centered-dark .tkh-lbl{ color:rgba(0,0,0,0.65); }

/* --- Kujundus: „Kontuur” (valge taust, raamitud kaardid, ilma sinise taustata) --- */
.tkh-stats-bar--outline{ background:#FFFFFF; border-top:1px solid rgba(18,63,110,0.1); }
.tkh-stats-bar--outline .tkh-hero-stats{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:16px;
  padding:26px 24px; max-width:1240px; margin:0 auto;
}
.tkh-stats-bar--outline .tkh-hero-stat{
  padding:20px 16px; margin-right:0; border-right:none; border-radius:6px;
  border:1.5px solid var(--tkh-charcoal); text-align:center;
}
.tkh-stats-bar--outline .tkh-num{ color:var(--tkh-orange); font-size:42px; }
.tkh-stats-bar--outline .tkh-lbl{ color:var(--tkh-charcoal); margin-top:8px; }

@media (max-width:1024px){
  .tkh-hero-heading{ font-size:clamp(40px, calc(var(--tkh-heading-size, 88px) * 0.68), var(--tkh-heading-size, 88px)); }
  .tkh-slide-fallback-illustration{ width:80%; opacity:0.5; }
  .tkh-slider, .tkh-slides{ min-height:500px; }
}
@media (max-width:640px){
  .tkh-mainbar{ flex-wrap:wrap; }
  .tkh-hero-heading{ font-size:clamp(30px, calc(var(--tkh-heading-size, 88px) * 0.48), var(--tkh-heading-size, 88px)); }
  .tkh-slide-fallback-illustration{ width:100%; opacity:0.25; }
  .tkh-btn-ghost{ margin-left:0; }
  .tkh-slider, .tkh-slides{ min-height:470px; }
  .tkh-slider-arrow{ width:36px; height:36px; }
  .tkh-arrow-prev{ left:10px; }
  .tkh-arrow-next{ right:10px; }
  .tkh-hero-stat{ padding-right:16px; margin-right:16px; }
  .tkh-stats-bar--minimal .tkh-hero-stats{ padding:40px 24px 22px; }
  .tkh-trust-badge{ top:14px; right:14px; }
  .tkh-trust-badge-img{ max-height:calc(var(--tkh-trust-badge-size, 80px) * 0.7); max-width:calc(var(--tkh-trust-badge-size, 80px) * 0.7 * 1.8); }
}

/* ---- Kampaaniaplaadid (variant A) ----
   Iseseisev lühikood [tkh_promo_tiles], kasutab sama tokenite-süsteemi
   nagu .tkh-header, aga defineerib need uuesti oma skoobis, et töötaks
   ka lehel, kus [tkh_header] pole kasutusel. */
.tkh-promo{
  --tkh-orange:#F2DA49;
  --tkh-yellow:#F2DA49;
  --tkh-charcoal:#123F6E;
  --tkh-muted:#6B6459;
  font-family:'IBM Plex Sans', sans-serif;
  -webkit-font-smoothing:antialiased;
  box-sizing:border-box;
}
.tkh-promo *, .tkh-promo *::before, .tkh-promo *::after{ box-sizing:inherit; }
.tkh-promo a{ text-decoration:none; color:inherit; }

.tkh-promo-grid{
  max-width:1240px; margin:0 auto; padding:32px 24px;
  display:grid; gap:16px;
}
.tkh-promo-grid-1{ grid-template-columns:1fr; }
.tkh-promo-grid-2{ grid-template-columns:repeat(2, 1fr); }
.tkh-promo-grid-3{ grid-template-columns:repeat(3, 1fr); }
.tkh-promo-grid-4{ grid-template-columns:repeat(4, 1fr); }

.tkh-promo-tile{
  display:flex; align-items:flex-start; gap:16px;
  background:#fff; border:1px solid #DAD5C8; border-radius:3px;
  padding:22px; position:relative;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
a.tkh-promo-tile{ cursor:pointer; }
a.tkh-promo-tile:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 24px -14px rgba(27,31,35,0.28);
  border-color:var(--tkh-orange);
}
.tkh-promo-tile.is-highlight{
  background:var(--tkh-yellow); border-color:var(--tkh-yellow); color:var(--tkh-charcoal);
}

.tkh-promo-icon{
  flex:0 0 48px; width:48px; height:48px; border-radius:3px;
  background:#E7E3DA; color:var(--tkh-charcoal);
  display:flex; align-items:center; justify-content:center;
}
.tkh-promo-icon svg{ width:24px; height:24px; }
.tkh-promo-tile.is-highlight .tkh-promo-icon{ background:rgba(27,31,35,0.12); }
.tkh-promo-icon-img{ background-size:cover; background-position:center; }

.tkh-promo-body{ flex:1; }
.tkh-promo-title{
  font-family:var(--tk-font-display, 'Barlow Condensed', sans-serif); font-size:20px; letter-spacing:0.01em;
  text-transform:uppercase; /* Bebas Neue -> Barlow Condensed 10.09.2026 */
  margin:0 0 6px; line-height:1.1; color:var(--tkh-charcoal);
}
.tkh-promo-text{ font-size:13.5px; color:var(--tkh-muted); line-height:1.5; margin:0; }
.tkh-promo-tile.is-highlight .tkh-promo-text{ color:#5A4600; }

.tkh-promo-arrow{
  flex:0 0 auto; color:var(--tkh-muted); align-self:center;
  transition:transform .15s ease, color .15s ease;
}
a.tkh-promo-tile:hover .tkh-promo-arrow{ color:var(--tkh-orange); transform:translateX(3px); }

@media (max-width:1024px){
  .tkh-promo-grid-3, .tkh-promo-grid-4{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:640px){
  .tkh-promo-grid-2, .tkh-promo-grid-3, .tkh-promo-grid-4{ grid-template-columns:1fr; }
  .tkh-promo-grid{ padding:24px 24px; }
}

/* ---- Bännerid ----
   Taaskasutab .tkh-slider käitumist (JS otsib .tkh-slider/.tkh-slide/.tkh-dot
   klasse üldiselt), aga .tkh-slider--contained tühistab hero-slaideri
   100vw full-bleed reeglid, sest bännerid peavad jääma sama laiaks kui
   päise sisu (1240px, keskel), mitte ulatuma lehe servadeni. */
.tkh-banners{
  --tkh-orange:#F2DA49;
  --tkh-yellow:#F2DA49;
  --tkh-charcoal:#123F6E;
  font-family:'IBM Plex Sans', sans-serif;
  -webkit-font-smoothing:antialiased;
  box-sizing:border-box;
}
.tkh-banners *, .tkh-banners *::before, .tkh-banners *::after{ box-sizing:inherit; }
.tkh-banners a{ text-decoration:none; color:inherit; }

.tkh-slider.tkh-slider--contained{
  width:100%; left:0; margin-left:0;
  max-width:1240px; margin-left:auto; margin-right:auto;
  min-height:0; background:none;
  padding:32px 24px;
}
.tkh-slider--contained .tkh-slides{ min-height:0; position:relative; }
.tkh-slider--contained .tkh-slide{ position:relative; inset:auto; opacity:0; visibility:hidden; height:0; overflow:hidden; transition:opacity .5s ease; }
.tkh-slider--contained .tkh-slide.is-active{ opacity:1; visibility:visible; height:auto; overflow:visible; }
.tkh-slider--contained .tkh-slider-arrow{ top:50%; }
.tkh-slider--contained .tkh-slider-dots{ position:static; transform:none; justify-content:center; margin-top:18px; }
.tkh-slider--contained .tkh-dot{ border-color:rgba(27,31,35,0.3); }
.tkh-slider--contained .tkh-dot.is-active{ background:var(--tkh-orange); border-color:var(--tkh-orange); }

.tkh-banner-grid{ display:grid; gap:16px; align-items:start; }
.tkh-banner-grid-1{ grid-template-columns:1fr; }
.tkh-banner-grid-2{ grid-template-columns:repeat(2, 1fr); }
.tkh-banner-grid-3{ grid-template-columns:repeat(3, 1fr); }
.tkh-banner-grid-4{ grid-template-columns:repeat(4, 1fr); }
/* Täislaiune bänner (nt ESTO) kõrvuti-rühma ALL — lisatud 05.10.2026. */
.tkh-banner-grid-wide{ margin-top:16px; }

.tkh-banner-card{
  position:relative; display:block; border-radius:4px; overflow:hidden;
  background:var(--tkh-charcoal);
  transition:transform .15s ease, box-shadow .15s ease;
}
a.tkh-banner-card:hover{ transform:translateY(-3px); box-shadow:0 16px 28px -14px rgba(27,31,35,0.35); }

.tkh-banner-img{
  display:block; width:100%; height:auto; /* loomulik proportsioon, ei kärbita */
}
.tkh-banner-card-empty{ aspect-ratio:16/9; }
.tkh-banner-grid-1 .tkh-banner-card-empty{ aspect-ratio:21/9; }

.tkh-banner-bg-empty{
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0 16px, transparent 16px 32px),
    linear-gradient(115deg, #0E3055 0%, #123F6E 60%, #1A4E85 100%);
}
.tkh-banner-scrim{
  position:absolute; left:0; right:0; bottom:0; height:65%; z-index:1;
  background:linear-gradient(0deg, rgba(20,23,26,0.85) 0%, rgba(20,23,26,0.15) 65%, rgba(20,23,26,0) 100%);
  pointer-events:none;
}
.tkh-banner-content{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:20px 22px; color:#fff;
}
.tkh-banner-title{
  font-family:var(--tk-font-display, 'Barlow Condensed', sans-serif); font-size:24px; letter-spacing:0.01em;
  text-transform:uppercase; /* Bebas Neue -> Barlow Condensed 10.09.2026 */
  margin:0 0 4px; line-height:1.05;
}
.tkh-banner-grid-1 .tkh-banner-title{ font-size:38px; }
.tkh-banner-text{ font-size:13px; color:#E4E0D6; margin:0 0 10px; line-height:1.5; max-width:36em; }
.tkh-banner-cta{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:700; color:var(--tkh-charcoal);
  background:var(--tkh-orange); padding:9px 14px; border-radius:2px;
}
a.tkh-banner-card:hover .tkh-banner-cta{ background:var(--tkh-yellow); }

@media (max-width:1024px){
  .tkh-banner-grid-3, .tkh-banner-grid-4{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:640px){
  .tkh-banner-grid-2, .tkh-banner-grid-3, .tkh-banner-grid-4{ grid-template-columns:1fr; }
  .tkh-banner-title{ font-size:20px; }
  .tkh-banner-grid-1 .tkh-banner-title{ font-size:28px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBIILIPÄIS JA -MENÜÜ (11.09.2026)

   LÄHTEOLUKORD, mõõdetud selle faili enda sisust: kogu failis oli päist
   puudutavaid mobiilireegleid TÄPSELT ÜKS — `.tkh-mainbar{flex-wrap:wrap}`
   640px juures. Ei burgerit, ei sahtlit, ei ühtegi reeglit topbarile,
   otsingule ega navigatsioonile. Tagasisidedokument lk 4: „Telefoniversioon
   ei ole lõpuni tehtud."

   Konkreetsed vead, mis sellest tulenesid:
     1. `.tkh-navwrap` on `overflow-x:auto`, 19.5px SUURTÄHTEDES, 17px
        polstriga — telefonis mahtus ekraanile 1-2 menüüpunkti ja ülejäänud
        olid horisontaalse kerimise taga ILMA IGASUGUSE VIHJETA.
     2. Topbaris dubleerisid „Logi sisse"/„Registreeru" seda, mida pakub juba
        „Minu konto" ikoon — mobiilil kaks korda sama asi kitsal real.
     3. Otsingukast on `flex:1; min-width:220px` — `flex-wrap:wrap` juures
        surus see logo ja ikoonid laiali ebaühtlaselt.
     4. Puuteala: `.tkh-headeraction` ikoon 22px + 11px silt ~ 37px kõrge.
        Soovitus (WCAG 2.5.8 / iOS HIG) on vähemalt 44px.

   MURDEPUNKT 900px — sama, mida kasutab juba mega-menüü veergude laotus
   (rida 280). Uut murdepunkti EI lisata, et päis ja mega-menüü ei satuks
   erinevasse olekusse.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Burger on DESKTOPIS peidus — DOM-is alati olemas, et menüü ei sõltuks
   JS-ist, mis elemendi jooksvalt looks (see vilguks laadimisel). */
.tkh-burger{ display:none; }

@media (max-width:900px){

  /* ── 1) Topbar: ainult keelevalik ─────────────────────────────────── */
  .tkh-topbar{ padding:6px 16px; font-size:13px; }
  .tkh-topbar .tkh-topbar-right{ margin-left:auto; }
  /* „Logi sisse" / „Registreeru" peidetud — need on sahtlis ja „Minu konto"
     ikooni all niigi olemas. Peidame ainult need, mitte tervet riba, et
     keelevalik jääks alles. */
  .tkh-topbar .tkh-topbar-link{ display:none; }

  /* ── 2) Mainbar: logo vasakul, ikoonid + burger paremal, otsing OMA REAL ── */
  .tkh-mainbar{
    padding:12px 16px 10px;
    gap:12px;
    flex-wrap:wrap;
    align-items:center;
  }
  .tkh-logo{ flex:0 0 auto; }
  .tkh-logo-img{ height:34px; max-width:190px; }

  /* ⚠ `order` JA `flex-basis:100%` KOOS: order üksi paneks otsingu õigesse
     järjekorda, aga ta jääks samale reale ja pigistaks logo kokku.
     100% baas sunnib ta omaette reale. */
  .tkh-search-center{ order:3; flex:1 0 100%; min-width:0; }
  .tkh-searchwrap{ max-width:none; }

  /* ⚠ 16px EI OLE suvaline: iOS Safari SUUMIB lehe sisse, kui fookusesse
     võetud tekstivälja kirjasuurus on alla 16px. Väiksem font tähendaks,
     et otsingu klõpsamine hüpitab kogu lehe paigast. */
  .tkh-searchwrap input{ padding:11px 46px 11px 14px; font-size:16px; }

  .tkh-headeractions{ order:2; gap:4px; margin-left:auto; }

  /* Puuteala 44x44 miinimum. `min-width`/`min-height`, mitte `padding`, sest
     ikoonid on flex-veerus ja padding lükkaks sildi ikoonist eemale. */
  .tkh-headeraction{
    min-width:44px; min-height:44px;
    justify-content:center;
    font-size:0;              /* silt peidus — ikoon on arusaadav, ruum kitsas */
    gap:0;
  }
  .tkh-headeraction svg{ width:24px; height:24px; }
  .tkh-cart-count{ top:2px; right:2px; }

  /* ── 3) Töölaua navigatsioon välja, burger sisse ──────────────────── */
  .tkh-nav{ display:none; }

  .tkh-burger{
    display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    min-width:44px; min-height:44px;
    background:none; border:0; padding:0; cursor:pointer;
    color:var(--tkh-white, #fff); font-family:'IBM Plex Sans', sans-serif;
  }
  .tkh-burger-box{ position:relative; display:block; width:22px; height:16px; }
  .tkh-burger-box span,
  .tkh-burger-box::before,
  .tkh-burger-box::after{
    content:''; position:absolute; left:0; right:0; height:2px; border-radius:2px;
    background:currentColor; transition:transform .2s ease, opacity .2s ease;
  }
  .tkh-burger-box::before{ top:0; }
  .tkh-burger-box span{ top:7px; }
  .tkh-burger-box::after{ bottom:0; }
  .tkh-burger-label{ font-size:9.5px; line-height:1; letter-spacing:0.04em; text-transform:uppercase; }

  /* Avatud olekus X */
  .tkh-burger[aria-expanded="true"] .tkh-burger-box::before{ transform:translateY(7px) rotate(45deg); }
  .tkh-burger[aria-expanded="true"] .tkh-burger-box span{ opacity:0; }
  .tkh-burger[aria-expanded="true"] .tkh-burger-box::after{ transform:translateY(-7px) rotate(-45deg); }
}

/* ── 4) SAHTEL ─────────────────────────────────────────────────────────
   Sahtel on peidetud KA töölauavaates — mitte ainult mobiilis. Kui keegi
   avab lehe 1200px pealt ja kitsendab akent, ei tohi paneel ekraanile
   hüpata. */
.tkh-drawer{
  position:fixed; inset:0; z-index:9999;
  visibility:hidden; pointer-events:none;
}
.tkh-drawer[data-open="1"]{ visibility:visible; pointer-events:auto; }

.tkh-drawer-backdrop{
  position:absolute; inset:0; background:rgba(10,16,26,0.55);
  opacity:0; transition:opacity .22s ease;
}
.tkh-drawer[data-open="1"] .tkh-drawer-backdrop{ opacity:1; }

.tkh-drawer-panel{
  position:absolute; top:0; right:0; bottom:0;
  width:min(88vw, 360px);
  background:var(--tkh-charcoal, #123F6E);
  color:var(--tkh-white, #fff);
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform .26s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  /* Telefoni kodunupu-riba alt välja. */
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
.tkh-drawer[data-open="1"] .tkh-drawer-panel{ transform:translateX(0); }

@media (prefers-reduced-motion: reduce){
  .tkh-drawer-panel, .tkh-drawer-backdrop{ transition:none; }
}

.tkh-drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid rgba(255,255,255,0.12);
  position:sticky; top:0; background:inherit; z-index:1;
}
.tkh-drawer-title{
  font-family:'IBM Plex Sans', sans-serif; font-size:13px; font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.7);
}
.tkh-drawer-close{
  background:none; border:0; color:inherit; cursor:pointer;
  min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center;
  margin-right:-10px;
}

.tkh-drawer-menu{ list-style:none; margin:0; padding:6px 0; }
.tkh-drawer-menu li{ list-style:none; }
.tkh-drawer-menu a{
  display:block; padding:14px 16px;
  font-family:'IBM Plex Sans', sans-serif; font-size:16px; font-weight:600;
  color:var(--tkh-white, #fff); text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.tkh-drawer-menu a:hover,
.tkh-drawer-menu a:focus{ background:rgba(255,255,255,0.07); color:var(--tkh-white, #fff); }
.tkh-drawer-menu .current-menu-item > a{ color:var(--tkh-yellow, #F1D949); }

/* Alammenüü (depth 2) — taandega, väiksem */
.tkh-drawer-menu .sub-menu{ list-style:none; margin:0; padding:0; background:rgba(0,0,0,0.14); }
.tkh-drawer-menu .sub-menu a{ padding-left:32px; font-size:14.5px; font-weight:500; }

/* --- MOBIILISAHTLI AKORDION + TAISLAIUS (14.09.2026) ---------------------
   1) Paneel tais laiuses telefonis (<=640px); 641-900px jaab 360px lagi,
      sest tais-laiuses sahtel tahvlil naeb katki valja.
   2) Alammenuud on VAIKIMISI KINNI - .is-collapsed lisab JS.
   3) Chevron on ERALDI <button>, mitte kogu rida. <a> jaab navigeeritavaks:
      muidu ei paaseks kategooria enda lehele enam ligi.                    */
@media (max-width: 640px){
  .tkh-drawer-panel{ width:100%; }
}

/* ⚠ 15.09.2026: EEMALDATUD siit topelt/konfliktne akordioni CSS
   (.tkh-drawer-sub-toggle flex-versioon + .is-expanded/.is-collapsed) -
   JS-is oli SAMAL ajal olemas KAKS eraldi akordioni rakendust (see + uuem
   allpool, ".is-open" põhine), mis mõlemad lisasid nupu SAMA klassiga
   ("tkh-drawer-sub-toggle") sama <li> sisse. Kaks kattuvat absoluut/flex
   asetusega nuppu tähendas, et klõps tabas juhuslikult kumba iganes
   DOM-is hiljem oli, ja allpool olev korrektne ".sub-menu{ display:none }"
   reegel (vt ~2311) ei tundnud ".is-expanded"/".is-collapsed" klasse ÜLDSE
   ära - seega "Teenused" (ja teised tavalised alammenüüga kirjed) ei
   avanenudki kunagi mobiilis, olenemata sellest, kumba nuppu kasutaja
   nägi. Vt tkh-header.js samast kuupäevast - vastav teine IIFE
   ("SAHTLI ALAMMENUU AKORDION") on samuti eemaldatud, alles jäi AINULT
   initSubmenus() (initDrawer() sees), mis kasutab ".is-open" klassi ja
   millel ON toimiv CSS-paar (vt allpool). */

/* Kategooriapuu teine tasand veel veidi sissepoole, et hierarhia loeks. */
.tkh-drawer-menu .tkh-drawer-cats-l2 a{ padding-left:48px; font-size:14px; }


.tkh-drawer-foot{
  margin-top:auto; padding:12px 8px 16px;
  border-top:1px solid rgba(255,255,255,0.12);
  display:flex; gap:6px;
}
.tkh-drawer-action{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  min-height:56px; padding:8px 4px; border-radius:8px;
  font-family:'IBM Plex Sans', sans-serif; font-size:12px; font-weight:600;
  color:var(--tkh-white, #fff); text-decoration:none;
  background:rgba(255,255,255,0.08);
}
.tkh-drawer-action:hover,
.tkh-drawer-action:focus{ background:rgba(255,255,255,0.15); color:var(--tkh-white, #fff); }

/* Keha kerimise lukk sahtli avatuse ajal — klassi paneb JS. */
body.tkh-drawer-open{ overflow:hidden; }

/* ⚠ „TOOTED" KIRJE SAHTLIS. Kontrollisin renderdatud lehelt: teine
   wp_nav_menu() kutse EI ANNA puhast nimekirja — `tkh_megamenu` filtrid
   käivad IGA sama menüüasukoha renderduse peale, seega ka sahtlis on
   kirjel klass `tkh-mm-trigger` ja sees kolmetriibuline `.tkh-mm-toggle-icon`.

   Käitumine on siiski õige: mega-menüü JS seotakse ainult `.tkh-nav`
   elementide külge (tkh-header.js, `querySelectorAll('.tkh-nav')`), ja
   sahtel on sellest väljas — link viib lihtsalt /tooted lehele, nagu peab.
   Parandada on vaja ainult NÄHTAVUST: triibuikoon sahtli lingi sees näeks
   välja nagu teine burger. */
.tkh-drawer-menu .tkh-mm-toggle-icon{ display:none !important; }
.tkh-drawer-menu .tkh-mm-trigger-label{ visibility:visible !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   AVALEHE SEKTSIOONIDE VAHED KOMPAKTSEMAKS (14.09.2026)

   MÕÕTSIN enne muutmist, kust vahed tegelikult tulevad. Avalehe kõik viis
   sektsiooni on ÜHE Divi rea (`et_pb_row_0`) sees eraldi `et_pb_code`
   moodulitena, ja lehe enda inline-CSS ütleb:

       .et_pb_code_0, _1, _2, _3, _4 { margin-top:0!important;
                                       margin-bottom:0!important;
                                       padding-top:0; padding-bottom:0 }

   ⚠ SEEGA DIVI EI ANNA VAHEDESSE ÜHTEGI PIKSLIT. Kogu vahe tuli MEIE ENDA
   ümbriste püstpolstrist. Divi seadetes nokitsemine poleks midagi muutnud.

   Mõõdetud vahed sektsioonide VAHEL (alumine + järgmise ülemine):
       kategooriad -> bännerid   38 + 32 = 70px
       bännerid    -> soodus     32 + 34 = 66px
       soodus      -> uued       38 + 34 = 72px
       uued        -> teenused   38 +  0 = 64px  (+ ruudustiku 26px)

   Uus skeem: 20px üleval / 22px all igal sektsioonil -> vahe 42px
   (mobiilis 14/16 -> 30px). Ühtlane, mitte iga sektsioon isemoodi.
   ═══════════════════════════════════════════════════════════════════════════ */

.tkh-slider.tkh-slider--contained{ padding:20px 24px 22px; }
@media (max-width:900px){
  .tkh-slider.tkh-slider--contained{ padding:14px 16px 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOPBARI KONTAKTID — MOBIILIS AINULT IKOONID (14.09.2026)

   Soov: telefonis ei kirjutata e-posti ega numbrit valja, kuvatakse ainult
   ikoonid, ja koik kolm (e-post, telefon, lahtiolekuaeg) mahuvad UHELE reale.
   ═══════════════════════════════════════════════════════════════════════════ */

.tkh-topbar-contacts {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	min-width: 0;
}

.tkh-topbar-contact {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
}
.tkh-topbar-contact:hover { color: var(--tkh-yellow); }
.tkh-topbar-contact--static { cursor: default; }
.tkh-topbar-contact--static:hover { color: inherit; }

.tkh-topbar-ico { flex: 0 0 auto; display: block; }

@media (max-width: 900px) {

	/* ── Ainult ikoonid ──────────────────────────────────────────────────
	   ⚠ EI OLE `display:none`. Tekst peab jaama DOM-i ja ekraanilugejale
	   loetavaks — ikoon uksi ei utle pimedale kasutajale midagi. Sellepärast
	   viime teksti ekraanilt VALJA (sama muster, mida kasutab WordPressi enda
	   `.screen-reader-text`), mitte ei kustuta teda renderdusest. */
	.tkh-topbar .tkh-topbar-text {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		margin: -1px !important;
		padding: 0 !important;
		overflow: hidden !important;
		clip: rect(0 0 0 0) !important;
		clip-path: inset(50%) !important;
		white-space: nowrap !important;
		border: 0 !important;
	}

	/* Koik kolm uhele reale, vasakule. `nowrap` hoiab need koos ka siis, kui
	   paremal olev keelevalik votab ruumi. */
	.tkh-topbar {
		flex-wrap: nowrap;
		gap: 10px;
		padding: 6px 14px;
	}
	.tkh-topbar-contacts {
		flex-wrap: nowrap;
		gap: 4px;
	}

	/* Puuteala: ikoon on 15px, aga vajutatav ala peab olema vahemalt 40px.
	   Polster annab selle, ilma et ikoon ise suureneks. */
	.tkh-topbar-contact {
		gap: 0;
		min-width: 40px;
		min-height: 36px;
		justify-content: center;
	}
	.tkh-topbar-ico { width: 18px; height: 18px; }

	/* Lahtiolekuaeg ei ole link — pisut tuhmim, et kaks klikitavat ikooni
	   eristuksid. */
	.tkh-topbar-contact--static .tkh-topbar-ico { opacity: .7; }
}

/* ═══ LAHTIOLEKUAEG: TEKSTINA, MITTE IKOONINA (14.09.2026) ══════════════
   Tapsustus: e-post ja telefon jaavad mobiilis ikoonideks (need on
   TEGEVUSED — vajuta ja helista/kirjuta), aga lahtiolekuaeg on INFO, mida
   ikoon edasi ei anna. Kell ei utle, kas pood on praegu avatud.

   ⚠ RUUMIARVUTUS, miks see mahub: 375px ekraan miinus 28px polster = 347px.
   Kaks ikooninuppu 36px = 72px, keelevalik ~76px, vahed ~16px -> jaab ~183px.
   Tekst „E-R 9.00-17.00, L 10.00-14.00" on 11.5px juures ~170px. Mahub, aga
   napilt — sellepärast on allpool veel uks aste 360px jaoks. */

@media (max-width: 900px) {

	/* Kella ikoon maha — tekst asendab selle. */
	.tkh-topbar .tkh-topbar-contact--static .tkh-topbar-ico {
		display: none;
	}

	/* ⚠ ULEKIRJUTAB ulalpool oleva ekraanilt-valja-viimise AINULT
	   lahtiolekuaja jaoks. Ulejaanud kaks jaavad ikoonideks. */
	.tkh-topbar .tkh-topbar-contact--static .tkh-topbar-text {
		position: static !important;
		width: auto !important;
		height: auto !important;
		margin: 0 !important;
		overflow: visible !important;
		clip: auto !important;
		clip-path: none !important;
		white-space: nowrap !important;
		font-size: 11.5px;
		line-height: 1.2;
		opacity: .85;
	}

	.tkh-topbar .tkh-topbar-contact--static {
		min-width: 0;
		justify-content: flex-start;
		/* Tohib kokku tombuda, kui ruumi napib — ikoonid ja keelevalik mitte. */
		flex: 0 1 auto;
	}

	.tkh-topbar .tkh-topbar-contact:not(.tkh-topbar-contact--static) {
		flex: 0 0 auto;
		min-width: 36px;
	}

	.tkh-topbar .tkh-topbar-right { flex: 0 0 auto; }
	.tkh-topbar-contacts { gap: 6px; min-width: 0; }
}

@media (max-width: 360px) {
	.tkh-topbar .tkh-topbar-contact--static .tkh-topbar-text { font-size: 10.5px; }
	.tkh-topbar { padding: 6px 10px; }
	.tkh-topbar .tkh-topbar-contact:not(.tkh-topbar-contact--static) { min-width: 32px; }
}

/* ═══ IKOONID SUUREMAKS JA VASAKUSSE SERVA (14.09.2026) ═════════════════

   ⚠ MIKS IKOONID EI OLNUD SERVAS: ikooninupul oli `justify-content:center`
   ja `min-width:36px`. Ikoon on 18px, seega tsentreerimine jattis temast
   vasakule (36-18)/2 = 9px tuhja ruumi — nupp ISE algas kull servast, aga
   ikoon paistis 9px sissepoole nihkunult. Nuud on sisu vasakule joondatud:
   puuteala jaab endiselt suur, aga ikoon algab tapselt polstri servast. */

@media (max-width: 900px) {

	/* 18 -> 22px. Ikoon on ainus asi, mis neist kahest kirjest nahtav on,
	   seega ta peab olema loetav ka kiirel pilgul. */
	.tkh-topbar .tkh-topbar-contact .tkh-topbar-ico {
		width: 22px;
		height: 22px;
	}

	/* Sisu vasakule, mitte keskele — vt selgitust ulal. */
	.tkh-topbar .tkh-topbar-contact:not(.tkh-topbar-contact--static) {
		justify-content: flex-start;
		min-width: 34px;
	}

	/* Vasakpoolne polster vaiksemaks, et esimene ikoon oleks paris servas. */
	.tkh-topbar { padding-left: 12px; }
	.tkh-topbar-contacts { gap: 10px; }
}

@media (max-width: 360px) {
	.tkh-topbar .tkh-topbar-contact .tkh-topbar-ico { width: 20px; height: 20px; }
	.tkh-topbar .tkh-topbar-contact:not(.tkh-topbar-contact--static) { min-width: 30px; }
	.tkh-topbar-contacts { gap: 8px; }
}

/* ═══ KONTAKTIKOONID MOBIILIS MAINBARI (14.09.2026) ═════════════════════
   Soov: telefoni ja e-posti ikoonid samal real, kus menuu, ostukorv ja
   konto — vasakus servas.

   Markup on lehel KAKS korda (topbaris ja mainbaris), sest CSS ei saa
   elementi teise vanema alla tosta. Kumbki koopia on nahtav ainult omas
   vaates, seega kasutaja naeb neid alati UKS kord. */

/* Toolaud: mainbari koopia peidus, topbari oma nahtav. */
.tkh-mainbar-contacts { display: none; }

@media (max-width: 900px) {

	/* Mobiil: vastupidi. */
	.tkh-mainbar-contacts {
		display: flex;
		align-items: center;
		gap: 8px;
		flex: 0 0 auto;
		order: 0;
	}

	/* ⚠ AINULT e-post ja telefon liiguvad. Lahtiolekuaeg JAAB topbari —
	   see on tekst, mitte ikoon, ja mainbaris ei ole talle ruumi. */
	.tkh-topbar .tkh-topbar-contact:not(.tkh-topbar-contact--static) {
		display: none;
	}

	/* Topbarisse jaab lahtiolekuaeg + keelevalik. */
	.tkh-topbar-contacts { gap: 0; }

	.tkh-mb-contact {
		display: inline-flex;
		align-items: center;
		justify-content: flex-start;
		min-width: 34px;
		min-height: 38px;
		color: var(--tkh-white);
	}
	.tkh-mb-contact:hover,
	.tkh-mb-contact:focus { color: var(--tkh-yellow); }
	.tkh-mb-contact .tkh-topbar-ico { width: 22px; height: 22px; }

	/* Logo saab nuud vahem ruumi — ikoonid votavad ~70px. */
	.tkh-mainbar { gap: 8px; }
	.tkh-logo-img { height: 30px; max-width: 150px; }
}

@media (max-width: 400px) {
	.tkh-mb-contact { min-width: 30px; }
	.tkh-mb-contact .tkh-topbar-ico { width: 20px; height: 20px; }
	.tkh-logo-img { height: 26px; max-width: 120px; }
	.tkh-mainbar-contacts { gap: 4px; }
}

/* ⚠ PARANDUS SAMAL PAEVAL: mainbari koopia naitas e-posti ja telefoni
   TEKSTI valja.

   Pohjus: varasem peiteregel oli kirjutatud kujul
   `.tkh-topbar .tkh-topbar-text { ... }` — see nouab `.tkh-topbar`
   esivanemat. Mainbari koopia on topbari OOEDE, mitte laps, seega reegel
   ei tabanud teda ja tekst jai nahtavaks, lukates ikoonid paigast.

   Sama tehnika mis topbaris: tekst viiakse ekraanilt VALJA, mitte ei
   kustutata — ekraanilugeja peab ikkagi „E-post: ..." ette lugema. */
@media (max-width: 900px) {
	.tkh-mb-contact .tkh-topbar-text {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		margin: -1px !important;
		padding: 0 !important;
		overflow: hidden !important;
		clip: rect(0 0 0 0) !important;
		clip-path: inset(50%) !important;
		white-space: nowrap !important;
		border: 0 !important;
	}
	.tkh-mb-contact { gap: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBIILI MAINBAR: SELGE KOLM RIDA (14.09.2026, parandus)

   ⚠ EELMINE KATSE PANI KONTAKTID VALESSE KOHTA. Ma panin nad logo korvale
   samale reale. Tegelik soov: logo ALL, samal real konto/ostukorvi/menuu
   ikoonidega, vasakus servas.

   ⚠ JA SUUREM PROBLEEM: seni SOLTUS paigutus MURDUMISEST. Mainbar oli
   `flex-wrap: wrap` ja elemendid murdusid teisele reale siis, kui ruumi
   juhtumisi napiks jai. See tahendab, et ridade arv soltus logo laiusest ja
   ekraani laiusest — 390px telefonis voisid olla kaks rida, 360px omas kolm.
   Nuud on iga rida MAARATUD, mitte juhuslik:

       rida 1   logo                          (flex-basis 100%)
       rida 2   kontaktid (vasakul) | konto, ostukorv, menuu (paremal)
       rida 3   otsing                        (flex-basis 100%)

   Siin kasutan `order`-it KOIGIL neljal elemendil. Varem oli ainult otsingul
   `order:3` ja teised jooksid vaikimisi jarjekorras — segasusteem, kus uhe
   muutmine liigutas teisi ettearvamatult. Kas koik voi mitte ukski. */

@media (max-width: 900px) {

	.tkh-mainbar {
		flex-wrap: wrap;
		align-items: center;
		gap: 10px;
		padding: 12px 14px 10px;
	}

	/* Rida 1 — logo saab terve rea tagasi, seega ei pea vaike olema. */
	.tkh-logo {
		order: 1;
		flex: 0 0 100%;
	}
	.tkh-logo-img { height: 34px; max-width: 200px; }

	/* Rida 2 vasak — kontaktid. `margin-right:auto` lukustab nad vasakusse
	   serva ka siis, kui ikoone on rohkem voi vahem. */
	.tkh-mainbar-contacts {
		order: 2;
		display: flex;
		flex: 0 0 auto;
		margin-right: auto;
		gap: 10px;
	}

	/* Rida 2 parem — konto, ostukorv, menuu. */
	.tkh-headeractions {
		order: 3;
		flex: 0 0 auto;
		margin-left: auto;
		gap: 6px;
	}

	/* Rida 3 — otsing. */
	.tkh-search-center {
		order: 4;
		flex: 0 0 100%;
		min-width: 0;
	}

	/* Ikoonid samas moodus, et rida naeks uhtlane valja. */
	.tkh-mb-contact { min-width: 38px; min-height: 38px; }
	.tkh-mb-contact .tkh-topbar-ico { width: 22px; height: 22px; }
}

@media (max-width: 400px) {
	.tkh-logo-img { height: 30px; max-width: 170px; }
	.tkh-mb-contact { min-width: 34px; }
	.tkh-mainbar-contacts { gap: 6px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBIIL: LOGO KESKELE, IKOONID UHE MOOTU (14.09.2026)

   ⚠ MIKS IKOONID ERINEVAD OLID — kolm elementi, kolm eri mootu:
       .tkh-headeraction   44x44 kast, 24px svg, all 11px silt
       .tkh-burger         44x44 kast, 22x16 triibud, all 9.5px silt „Menuu"
       .tkh-mb-contact     38x38 kast, 22px svg, silti ei ole

   Sildid tegid kaks neist KORGEMAKS kui kolmanda, seega need ei saanud
   uhele joonele — ka siis, kui kastid oleks olnud uhesuurused. Sellepärast
   lahevad sildid siin maha: ligipaasetavus ei kannata, sest igal nupul on
   `aria-label` (ekraanilugeja loeb „Ostukorv", „Ava menuu" jne).

   Uks jagatud reegel koigile kolmele — nii ei saa neid enam kogemata
   eraldi muuta ja lahku ajada. */

@media (max-width: 900px) {

	/* ── Logo keskele ─────────────────────────────────────────────────── */
	.tkh-mainbar .tkh-logo {
		justify-content: center;
		text-align: center;
	}
	.tkh-mainbar .tkh-logo-img { margin: 0 auto; }

	/* ── Koik kolm ikooninuppu TAPSELT uhesugused ─────────────────────── */
	.tkh-mainbar-contacts .tkh-mb-contact,
	.tkh-headeractions .tkh-headeraction,
	.tkh-mainbar .tkh-burger {
		width: 40px;
		height: 40px;
		min-width: 40px;
		min-height: 40px;
		padding: 0;
		gap: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
	}

	.tkh-mainbar-contacts .tkh-mb-contact .tkh-topbar-ico,
	.tkh-headeractions .tkh-headeraction svg {
		width: 22px;
		height: 22px;
	}

	/* Burgeri triibud sama optilise laiusega, mis ulejaanud ikoonid. */
	.tkh-mainbar .tkh-burger .tkh-burger-box { width: 22px; height: 16px; }
	.tkh-mainbar .tkh-burger .tkh-burger-label,
	.tkh-headeractions .tkh-headeraction .tkh-lbl { display: none; }

	/* ⚠ SERVADE JOONDUS: ikoon on 22px 40px kasti KESKEL, seega temast jaab
	   kummalegi poole (40-22)/2 = 9px. Ilma korralduseta paistaks esimene
	   ikoon 9px paremal ja viimane 9px vasakul sisu servast. Negatiivne
	   margin viib kasti servad tagasi joonele, puuteala kaotamata. */
	.tkh-mainbar-contacts { margin-left: -9px; gap: 2px; }
	.tkh-headeractions    { margin-right: -9px; gap: 2px; }

	/* Ikoonide rida ise: uks kindel korgus, koik keskele. */
	.tkh-mainbar-contacts,
	.tkh-headeractions {
		align-items: center;
		min-height: 40px;
	}

	/* Ostukorvi loendur uue kasti jargi. */
	.tkh-headeraction .tkh-cart-count { top: 4px; right: 4px; }
}

@media (max-width: 400px) {
	.tkh-mainbar-contacts .tkh-mb-contact,
	.tkh-headeractions .tkh-headeraction,
	.tkh-mainbar .tkh-burger {
		width: 36px; height: 36px; min-width: 36px; min-height: 36px;
	}
	.tkh-mainbar-contacts { margin-left: -7px; }
	.tkh-headeractions    { margin-right: -7px; }
}

/* ═══ IKOONIDE OPTILINE UHTLUS + SUUREM LAHTIOLEKUAEG (14.09.2026) ══════

   ⚠ KAKS PoHJUST, miks konto ja ostukorv paistsid teistest vaiksemad:

   1. MINA KAHANDASIN NEID. Eelmine jagatud reegel pani koigile 22px, aga
      konto/ostukorv olid enne 24px. Nad ei jaanud vaiksemaks „kuidagi" —
      ma tegin seda ise, uhtlustamise kaigus.

   2. JOONELAIUS ON ERINEV. Kontrollisin markupist: konto ja ostukorvi SVG-d
      kasutavad `stroke-width="1.6"`, kontaktide omad `1.8`. Peenem joon
      paistab samas mootkavas HELEDAM ja seega vaiksem, ka siis kui kast ja
      viewBox on identsed. Seda ei saa kasti suurusega parandada — joon ise
      peab olema sama jame.

   Nuud: koik 23px JA sama joonelaius. `stroke-width` on SVG-l atribuut, aga
   CSS-ist saab selle ule kirjutada — nii ei pea markupi puutuma. */

@media (max-width: 900px) {

	.tkh-mainbar-contacts .tkh-mb-contact .tkh-topbar-ico,
	.tkh-headeractions .tkh-headeraction svg {
		width: 23px;
		height: 23px;
	}

	/* Joon sama jame, mis kontaktidel. */
	.tkh-headeractions .tkh-headeraction svg {
		stroke-width: 1.8;
	}

	.tkh-mainbar .tkh-burger .tkh-burger-box { width: 23px; height: 17px; }

	/* ── Lahtiolekuaeg suuremaks ──────────────────────────────────────────
	   Ruumi on nuud tunduvalt rohkem kui varem: e-post ja telefon kolisid
	   mainbari, seega topbaris on ainult lahtiolekuaeg ja keelevalik.
	   11.5px -> 13px. Arvutus: 375px - 24px polster = 351px; keelevalik
	   ~76px; tekst 13px juures ~180px. Kokku 256px — ruumi jaab ule. */
	.tkh-topbar .tkh-topbar-contact--static .tkh-topbar-text {
		font-size: 13px;
		opacity: 1;
	}
}

@media (max-width: 400px) {
	.tkh-mainbar-contacts .tkh-mb-contact .tkh-topbar-ico,
	.tkh-headeractions .tkh-headeraction svg { width: 21px; height: 21px; }
	.tkh-mainbar .tkh-burger .tkh-burger-box { width: 21px; height: 16px; }
}

@media (max-width: 360px) {
	.tkh-topbar .tkh-topbar-contact--static .tkh-topbar-text { font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   IKOONIDE OPTILINE TASAKAAL (14.09.2026, 2. katse)

   ⚠ EELMINE PARANDUS EI TOOETANUD, SEST MA PARANDASIN VALET ASJA.
   Kontrollisin serverist kaskaadi: koigil kolmel ikoonil ON sama kasti moot
   (23px, kitsal ekraanil 21px). Probleem ei olnud kastis.

   MOOTSIN joonise tegeliku ulatuse `viewBox="0 0 24 24"` sees:

       konto      circle + path      x 4..20   = 16/24 = 67%   ->  15.3px
       telefon    path               x 4..20   = 16/24 = 67%   ->  15.3px
       ostukorv   rect + sang        x 3..21   = 18/24 = 75%   ->  17.2px
       meil       rect               x 3..21   = 18/24 = 75%   ->  17.2px
       burger     triibud            KOGU kast = 100%          ->  23.0px

   Ehk burger on teistest kuni 50% laiem ja konto/telefon koige kitsamad.
   Sama kasti moot EI TAHENDA sama nahtavat suurust, kui joonis ise tayidab
   kastist erineva osa. Just seda kasutaja naeb.

   LAHENDUS: sihime uhtset NAHTAVAT laiust ~17px ja anname igale ikoonile
   kasti suuruse, mis selle annab:
       67% taidisega  ->  25px kast  (0.67 x 25 = 16.8)
       75% taidisega  ->  23px kast  (0.75 x 23 = 17.2)
       100% taidisega ->  18px kast  (burgeri triibud)

   ⚠ `nth-child` ON SIIN VAJALIK: konto ja ostukorv on sama klassiga, aga
   ERINEVA taidisega. Ilma jarjekorranumbrita ei saa neid eristada. Kui
   kunagi lisatakse kolmas ikoon (nt lemmikud), tuleb see reegel ule vaadata
   — sellepärast on see siia kirja pandud. */

@media (max-width: 900px) {

	/* Vaikimisi: 75% taidisega ikoonid. */
	.tkh-mainbar-contacts .tkh-mb-contact .tkh-topbar-ico,
	.tkh-headeractions .tkh-headeraction svg { width: 23px; height: 23px; }

	/* Konto = 1. ikoon paremas ruhmas, taidis 67% -> suurem kast. */
	.tkh-headeractions .tkh-headeraction:nth-child(1) svg { width: 25px; height: 25px; }

	/* Telefon = 2. ikoon vasakus ruhmas, taidis 67% -> suurem kast. */
	.tkh-mainbar-contacts .tkh-mb-contact:nth-child(2) .tkh-topbar-ico { width: 25px; height: 25px; }

	/* Burger: triibud katavad kogu laiuse, seega kast peab olema VAIKSEM. */
	.tkh-mainbar .tkh-burger .tkh-burger-box { width: 18px; height: 14px; }
	.tkh-mainbar .tkh-burger .tkh-burger-box span { top: 6px; }
	.tkh-mainbar .tkh-burger[aria-expanded="true"] .tkh-burger-box::before { transform: translateY(6px) rotate(45deg); }
	.tkh-mainbar .tkh-burger[aria-expanded="true"] .tkh-burger-box::after  { transform: translateY(-6px) rotate(-45deg); }
}

@media (max-width: 400px) {
	.tkh-mainbar-contacts .tkh-mb-contact .tkh-topbar-ico,
	.tkh-headeractions .tkh-headeraction svg { width: 21px; height: 21px; }
	.tkh-headeractions .tkh-headeraction:nth-child(1) svg { width: 23px; height: 23px; }
	.tkh-mainbar-contacts .tkh-mb-contact:nth-child(2) .tkh-topbar-ico { width: 23px; height: 23px; }
	.tkh-mainbar .tkh-burger .tkh-burger-box { width: 17px; height: 13px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   IKOONID: LAHENDUS ON MARKUPIS, MITTE CSS-is (14.09.2026, lopplik)

   ⚠ KAKS EELMIST KATSET OLID VALED ja tasub teada, miks — et keegi ei
   hakkaks sama teed uuesti kaima.

   1. katse: uhtlustasin KASTI mooedu. Ei aidanud, sest kastid olid juba
      uhesuurused — kontrollisin selle serveri CSS-ist kaskaadi simuleerides.
   2. katse: andsin igale ikoonile ERI kasti suuruse, et nahtav laius uhtiks
      (nth-child reeglid). Matemaatiliselt oige, aga habras: iga uus ikoon
      lohub jarjekorranumbrid, ja kaks ikooni jaid ikka vaiksemaks.

   PARIS PoHJUS: konto ja ostukorvi JOONISED olid viewBox-is vaiksemad —
   konto 4..20 (67%), ostukorv 3..21 (75%), samal ajal kui burger tayidab
   100%. Seda EI SAA CSS-ist parandada, sest CSS ei tea, kui suur on joonis
   kasti sees. Joonistasin ikoonid umber:

       konto     4..20   -> 2.6..21.4   (67% -> 78%)
       ostukorv  3..21   -> 2.4..21.6   (75% -> 80%)
       joonelaius 1.6    -> 1.8         (sama, mis kontaktidel)

   Nuud tayidavad koik ikoonid kasti uhtlaselt ja koigile piisab UHEST
   suurusest. nth-child reeglid on allpool tuhistatud. */

@media (max-width: 900px) {

	/* Uks moot koigile — joonised on nuud uhtlased. */
	.tkh-mainbar-contacts .tkh-mb-contact .tkh-topbar-ico,
	.tkh-headeractions .tkh-headeraction svg {
		width: 24px;
		height: 24px;
	}

	/* ⚠ TUHISTAB 2. katse nth-child erandid — joonised ei vaja neid enam. */
	.tkh-headeractions .tkh-headeraction:nth-child(1) svg,
	.tkh-mainbar-contacts .tkh-mb-contact:nth-child(2) .tkh-topbar-ico {
		width: 24px;
		height: 24px;
	}

	/* Burger tayidab kasti 100%, seega jaab teistest pisut kitsamaks. */
	.tkh-mainbar .tkh-burger .tkh-burger-box { width: 20px; height: 15px; }
	.tkh-mainbar .tkh-burger .tkh-burger-box span { top: 6.5px; }
}

@media (max-width: 400px) {
	.tkh-mainbar-contacts .tkh-mb-contact .tkh-topbar-ico,
	.tkh-headeractions .tkh-headeraction svg,
	.tkh-headeractions .tkh-headeraction:nth-child(1) svg,
	.tkh-mainbar-contacts .tkh-mb-contact:nth-child(2) .tkh-topbar-ico {
		width: 22px;
		height: 22px;
	}
	.tkh-mainbar .tkh-burger .tkh-burger-box { width: 18px; height: 14px; }
}

/* ⚠ UKS MOOEDETUD ERAND: telefoniikoon.
   Parast ikoonide umberjoonistamist on nahtavad laiused 24px kasti sees:
       ostukorv 19.2 · konto 18.7 · meil 18.0 · TELEFON 16.1 · burger 20.0
   Telefoni joonis tayidab kastist ainult 67%, sest torukuju on loomu poolest
   kitsam kui umbrik voi ristkulik. Umberjoonistamine moonutaks kuju; suurem
   kast annab sama tulemuse ilma joonist puutumata.
   0.67 x 27 = 18.1px — tapselt meili tasemel. */
@media (max-width: 900px) {
	.tkh-mainbar-contacts .tkh-mb-contact:nth-child(2) .tkh-topbar-ico {
		width: 27px;
		height: 27px;
	}
}
@media (max-width: 400px) {
	.tkh-mainbar-contacts .tkh-mb-contact:nth-child(2) .tkh-topbar-ico {
		width: 25px;
		height: 25px;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   IKOONID: MOOEDETUD PARIS EKRAANILT (14.09.2026, lopplik)

   ⚠ KOIK EELMISED KATSED TUGINESID ARVUTUSELE, MITTE MOOTMISELE.
   Ma arvutasin viewBox-i taidiseprotsente ja eeldasin, et need kanduvad
   ekraanile. Kasutaja saatis ekraanipildi ja ma moootsin sealt VALGETE
   pikslite ulatuse igal ikoonil (seade 946px lai, DPR 2.41):

       meil      18.3 px
       burger    18.3 px
       telefon   17.9 px
       ostukorv  15.0 px     <- liiga vaike
       konto     10.4 px     <- PEAAEGU POOLE vaiksem

   Konto 10.4px vs meili 18.3px. Minu arvutus lubas molemale ~18px. Miks
   arvutus eksis, ma kindlalt ei tea — kas jouab brauserisse vanem markup
   (vahemalu) voi motab midagi muud vahele. Seepärast EI arvuta ma enam:
   votan mooedetud suhte ja korrutan kastid selle vorra suuremaks.

       konto     18.3 / 10.4 = 1.76  ->  24 x 1.76 ~ 42px
       ostukorv  18.3 / 15.0 = 1.22  ->  24 x 1.22 ~ 29px

   `!important` ja korgem spetsiifilisus, et ukski varasem reegel (neid on
   failis palju) ei saaks seda enam ule kirjutada. */

@media (max-width: 900px) {

	.tkh-mainbar .tkh-headeractions .tkh-headeraction:nth-child(1) svg {
		width: 42px !important;
		height: 42px !important;
	}
	.tkh-mainbar .tkh-headeractions .tkh-headeraction:nth-child(2) svg {
		width: 29px !important;
		height: 29px !important;
	}

	/* Joon sama jame, mis meilil ja telefonil. Mooedetud pildilt: nende
	   joon on nahtavalt paksem kui konto/ostukorvi oma. */
	.tkh-mainbar .tkh-headeractions .tkh-headeraction svg {
		stroke-width: 2 !important;
	}

	/* Kast peab ikooni ara mahutama, muidu loigatakse. */
	.tkh-mainbar .tkh-headeractions .tkh-headeraction {
		width: 46px !important;
		height: 46px !important;
		min-width: 46px !important;
		min-height: 46px !important;
		overflow: visible;
	}
	.tkh-mainbar .tkh-mainbar-contacts .tkh-mb-contact {
		width: 46px !important;
		height: 46px !important;
		min-width: 46px !important;
		min-height: 46px !important;
	}

	/* Ostukorvi loendur uue kasti jargi. */
	.tkh-mainbar .tkh-headeraction .tkh-cart-count { top: 6px; right: 6px; }
}

/* ═══ TOPBAR: LIPUD EI TOHI TEKSTI PEALE JOOSTA ════════════════════════
   ⚠ EKRAANIPILDILT NAHTUD VIGA: lahtiolekuaja tekst ja keelevaliku lipud
   olid TEINETEISE PEAL — „E-R 9.00-17.00, L[lipp]0[lipp]4.[lipp]".

   Pohjus: panin topbarile `flex-wrap: nowrap` ja tekstile
   `white-space: nowrap`. Kui sisu kokku on laiem kui ekraan, ei saa flex
   seda kuhugi panna ja elemendid kattuvad. `nowrap` ei tee ruumi juurde —
   ta ainult keelab murdmise.

   Parandus: tekst TOHIB kokku tombuda ja lopus katkeda kolme punktiga.
   Parem lyhendatud lahtiolekuaeg kui lipud teksti peal. */
@media (max-width: 900px) {
	.tkh-topbar .tkh-topbar-contact--static {
		min-width: 0 !important;
		flex: 0 1 auto !important;
		overflow: hidden;
	}
	.tkh-topbar .tkh-topbar-contact--static .tkh-topbar-text {
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		display: block;
		min-width: 0;
	}
	.tkh-topbar .tkh-lang-switcher-slot {
		flex: 0 0 auto;
		padding-left: 10px;
		margin-left: 6px;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   IKOONID UHELE JOONELE + „MENUU" SILT (14.09.2026)

   MOOEDETUD ekraanipildilt (seade 946px, DPR 2.41), iga ikooni valgete
   pikslite pystkeskpunkt:

       meil       210.6      burger  210.8   <- joonel
       telefon    209.2
       konto      198.4                      <- 12.5px KORGEMAL
       ostukorv   198.0                      <- 12.9px KORGEMAL

   ⚠ PoHJUS: `.tkh-headeraction` on `flex-direction: column` ja ikooni JAREL
   on tekstisolm („Minu konto" / „Ostukorv"). `justify-content:center`
   tsentreerib VEERU SISU TERVIKUNA — ehk [ikoon + tekst] koos. Kui tekstil
   on kasvoi rea korgus, nihkub IKOON sellevorra ULES. Meil ja telefon on
   joonel just sellepärast, et neil tekstisolme ei ole.

   Kasti suuruse muutmine seda EI PARANDA — ma proovisin seda kaks korda.
   Parandus on suuna muutmine: `row` asemel `column`, siis ei ole midagi,
   mis ikooni ules lykkaks. */

@media (max-width: 900px) {

	.tkh-mainbar .tkh-headeractions .tkh-headeraction,
	.tkh-mainbar .tkh-mainbar-contacts .tkh-mb-contact,
	.tkh-mainbar .tkh-burger {
		flex-direction: row !important;
		align-items: center !important;
		justify-content: center !important;
		/* line-height:0 kustutab ka reakorgusest tuleneva jaakruumi, mis
		   `font-size:0` juures veel alles voib jaada. */
		line-height: 0 !important;
		height: 46px !important;
		min-height: 46px !important;
		padding: 0 !important;
	}

	/* Ikoon ise ei tohi venida ega kokku tombuda. */
	.tkh-mainbar .tkh-headeractions .tkh-headeraction svg,
	.tkh-mainbar .tkh-mainbar-contacts .tkh-mb-contact .tkh-topbar-ico,
	.tkh-mainbar .tkh-burger .tkh-burger-box {
		flex: 0 0 auto !important;
		align-self: center !important;
	}

	/* Rida ise samuti uhele joonele. */
	.tkh-mainbar .tkh-headeractions,
	.tkh-mainbar .tkh-mainbar-contacts {
		align-items: center !important;
		min-height: 46px !important;
	}

	/* ── „MENUU" silt burgeri ETTE ──────────────────────────────────────
	   ⚠ DOM-is on silt ikooni JAREL (`<span class="tkh-burger-box">` ja
	   siis `<span class="tkh-burger-label">`). Markupi muutmise asemel
	   piisab `order: -1`-st, mis toeostab sildi flex-reas esimeseks. */
	.tkh-mainbar .tkh-burger {
		width: auto !important;
		min-width: 0 !important;
		gap: 8px !important;
		padding: 0 4px 0 8px !important;
	}
	.tkh-mainbar .tkh-burger .tkh-burger-label {
		display: inline-block !important;
		order: -1;
		font-family: 'IBM Plex Sans', sans-serif;
		font-size: 13px !important;
		font-weight: 700;
		line-height: 1 !important;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--tkh-white);
		white-space: nowrap;
	}

	/* Silt votab ruumi — kontaktide ja ikoonide vahed kitsamaks. */
	.tkh-mainbar .tkh-headeractions { gap: 0 !important; }
	.tkh-mainbar .tkh-mainbar-contacts { gap: 4px !important; }
}

@media (max-width: 400px) {
	.tkh-mainbar .tkh-burger .tkh-burger-label { font-size: 12px !important; }
	.tkh-mainbar .tkh-burger { gap: 6px !important; padding: 0 2px 0 6px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   IKOONIDE SUURUS TAGASI PAIKA (14.09.2026)

   ⚠ MIKS NEED UMBER LAKSID: versioonis 1.19.5 panin konto kastiks 42px ja
   ostukorvi omaks 29px, sest MOOEDETULT olid nad 10.4 ja 15.0 px — poole
   vaiksemad kui teised. Ma kompenseerisin tagajarge, teadmata pohjust.

   Versioon 1.19.6 leidis POHJUSE (`flex-direction: column` + tekstisolm
   pigistas ikooni kokku) ja parandas selle. Sellega kadus ka vajadus
   kompensatsiooni jarele — aga kompensatsioon jai alles ja hakkas nuud
   taies mahus moojuma:

       konto     37.0 px    (siht 18.3)
       ostukorv  26.2 px    (siht 18.3)

   Nuud mooedetud taidise jargi tagasi arvutatud:
       konto     37.0/42 = 88% taidis  ->  18.3/0.88 = 21px
       ostukorv  26.2/29 = 90% taidis  ->  18.3/0.90 = 20px

   Oppetund: kompensatsioon ja parandus ei tohi failis korvuti elada.
   Kui pohjus on leitud, tuleb kompensatsioon MAHA votta, mitte jatta. */

@media (max-width: 900px) {
	.tkh-mainbar .tkh-headeractions .tkh-headeraction:nth-child(1) svg {
		width: 21px !important;
		height: 21px !important;
	}
	.tkh-mainbar .tkh-headeractions .tkh-headeraction:nth-child(2) svg {
		width: 20px !important;
		height: 20px !important;
	}
}

@media (max-width: 400px) {
	.tkh-mainbar .tkh-headeractions .tkh-headeraction:nth-child(1) svg {
		width: 19px !important;
		height: 19px !important;
	}
	.tkh-mainbar .tkh-headeractions .tkh-headeraction:nth-child(2) svg {
		width: 18px !important;
		height: 18px !important;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   VIIMANE TIMMIMINE — MOOEDETUD EKRAANILT (14.09.2026)

   Mooedetud laiused ja keskjooned (seade 946px, DPR 2.41):

       meil       18.3 x 14.1   kesk 210.6   <- etalon
       telefon    17.4 x 17.0   kesk 209.2   <- kitsam JA 1.3px korgemal
       konto      16.2 x 15.4   kesk 210.4
       ostukorv   16.2 x 16.2   kesk 210.4

   ⚠ MIKS TELEFON ON KORGEMAL: torukuju joonis ulatub viewBox-is y 3..21,
   umbriku oma y 5..19. Molema tindi keskpunkt ON 12, aga toru ulaosa on
   jamedam kui alaosa, seega VISUAALNE raskuskese on korgemal kui
   geomeetriline. Seda ei paranda tsentreerimine — tsentreerimine on juba
   oige. Vajalik on optiline nihe.

   ⚠ MIKS IGAL IKOONIL ON ERI KASTI SUURUS: iga joonis taidab oma kastist
   erineva osa (64%-77%). Uks moot koigile annaks erineva NAHTAVA suuruse —
   tapselt seda kasutaja seni nagigi. Kastid on arvutatud mooedetud
   taidisest, siht 18.3px. */

@media (max-width: 900px) {

	/* Telefon: 27 -> 29px (taidis 64%, 0.64 x 29 = 18.6) */
	.tkh-mainbar .tkh-mainbar-contacts .tkh-mb-contact:nth-child(2) .tkh-topbar-ico {
		width: 29px !important;
		height: 29px !important;
		/* Optiline nihe allapoole — vt selgitust ulal. */
		transform: translateY(1.3px);
	}

	/* Konto: 21 -> 24px (taidis 77%, 0.77 x 24 = 18.5) */
	.tkh-mainbar .tkh-headeractions .tkh-headeraction:nth-child(1) svg {
		width: 24px !important;
		height: 24px !important;
	}

	/* Ostukorv: 20 -> 23px (taidis 81%, 0.81 x 23 = 18.6) */
	.tkh-mainbar .tkh-headeractions .tkh-headeraction:nth-child(2) svg {
		width: 23px !important;
		height: 23px !important;
	}
}

@media (max-width: 400px) {
	.tkh-mainbar .tkh-mainbar-contacts .tkh-mb-contact:nth-child(2) .tkh-topbar-ico {
		width: 26px !important; height: 26px !important;
	}
	.tkh-mainbar .tkh-headeractions .tkh-headeraction:nth-child(1) svg {
		width: 22px !important; height: 22px !important;
	}
	.tkh-mainbar .tkh-headeractions .tkh-headeraction:nth-child(2) svg {
		width: 21px !important; height: 21px !important;
	}
}

/* ═══ LAHTIOLEKUAEG: VASAKPOOLNE POLSTER (14.09.2026) ══════════════════
   Topbaris on lahtiolekuaeg ainus vasakpoolne element ja algas tapselt
   riba servast. 10px annab talle veidi ohku.

   ⚠ POLSTER ELEMENDILE, MITTE `.tkh-topbar`-ile: riba enda polstri
   suurendamine nihutaks ka PAREMAT serva ehk keelevalikut, ja see on
   praegu oiges kohas. */
@media (max-width: 900px) {
	.tkh-topbar .tkh-topbar-contact--static {
		padding-left: 10px;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   KLEEPUV PAIS KERIMISEL (14.09.2026)

   Kerides kaob paise ulaosa (topbar, logo, otsing) ara ja alles jaab
   KOMPAKTNE riba: vaike logo + kontaktid + konto/ostukorv/menuu.

   ⚠ MIKS `fixed`, MITTE `position: sticky`: `.tkh-site-top` on Divi
   `et_pb_code` mooduli sees. `sticky` lakkab toimimast, kui UKSKI esivanem
   on `overflow: hidden` voi `overflow: auto` — ja Divi sektsioonidel on see
   sageli olemas, soltuvalt sellest, mis seadeid lehel kasutatakse. `fixed`
   ei soltu esivanematest (kui neil pole `transform`-i), seega ta tootab ka
   siis, kui keegi hiljem Divi seadeid muudab.

   ⚠ HIND: `fixed` votab elemendi voost valja ja sisu HUPPAKS paise korguse
   vorra ules. Seepärast lisab JS samal hetkel `.tkh-header`-ile
   `padding-top`, mis on tapselt kleepuva riba korgune. */

.tkh-sticky-row { display: none; }

@media (max-width: 900px) {

	.tkh-header.is-stuck .tkh-sticky-row {
		display: flex;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9998;
		align-items: center;
		gap: 10px;
		padding: 8px 14px;
		background: var(--tkh-charcoal, #123F6E);
		box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.45);
		/* Telefoni „kulba" alt valja. */
		padding-top: calc(8px + env(safe-area-inset-top, 0px));
	}

	@media (prefers-reduced-motion: no-preference) {
		.tkh-header.is-stuck .tkh-sticky-row { animation: tkh-slide-down .18s ease; }
	}

	.tkh-sticky-row__logo { flex: 0 0 auto; display: flex; align-items: center; }
	.tkh-sticky-row__logo img { height: 26px; width: auto; max-width: 150px; display: block; }

	.tkh-sticky-row__spacer { flex: 1 1 auto; min-width: 0; }

	.tkh-sticky-row__actions { display: flex; align-items: center; gap: 2px; }

	/* ⚠ AINULT `__actions` SEES. Varem oli siin `.tkh-sticky-row a` ehk
	   KOIK lingid real — kaasa arvatud LOGO link, mis on samuti <a>.
	   40x40 kast suruski logo kokku ja loikas selle ara. */
	.tkh-sticky-row__actions a,
	.tkh-sticky-row__actions button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		background: none;
		border: 0;
		padding: 0;
		color: var(--tkh-white, #fff);
		cursor: pointer;
	}
	.tkh-sticky-row svg { display: block; }
	.tkh-sticky-row .tkh-cart-count {
		position: absolute;
		top: 4px;
		right: 4px;
	}
	.tkh-sticky-row__cart { position: relative; }
}

@keyframes tkh-slide-down {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}

/* ═══ SAHTLI KONTAKTID JA KEELEVALIK ═══════════════════════════════════ */

.tkh-drawer-contacts {
	padding: 14px 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.tkh-drawer-contact {
	display: flex;
	align-items: center;
	gap: 11px;
	font-family: 'IBM Plex Sans', sans-serif;
	font-size: 14.5px;
	line-height: 1.35;
	color: var(--tkh-white, #fff);
	text-decoration: none;
}
.tkh-drawer-contact svg { flex: 0 0 auto; opacity: .8; }
a.tkh-drawer-contact:hover,
a.tkh-drawer-contact:focus { color: var(--tkh-yellow, #F1D949); }
.tkh-drawer-contact--static { color: rgba(255, 255, 255, 0.75); cursor: default; }

.tkh-drawer-langs {
	padding: 12px 16px 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}
.tkh-drawer-langs__label {
	font-family: 'IBM Plex Sans', sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}
/* ⚠ Keelevaliku enda markup tuleb render_language_switcher()-ist ja
   kannab topbari klasse. Topbaris on tal vasakpoolne eraldusjoon ja
   polster — sahtlis on need uleliigsed. */
.tkh-drawer-langs .tkh-lang-switcher-slot {
	padding-left: 0;
	margin-left: 0;
	border-left: 0;
}
.tkh-drawer-langs .tkh-lang-item { font-size: 15px; opacity: 1; }
.tkh-drawer-langs .tkh-lang-flag { width: 26px; height: 19px; }

/* ═══════════════════════════════════════════════════════════════════════════
   HORISONTAALNE KERIMINE JA TUHI ALA PAREMAL (14.09.2026)

   ⚠ PoHIPOHJUS: MINU SAHTEL. `.tkh-drawer` on `position:fixed; inset:0`
   ILMA `overflow`-ta, ja paneel selle sees on `transform: translateX(100%)`
   ehk lykatud 360px PAREMALE, vaateavast valja.

   Peidetud element EI KAO layoutist: `visibility:hidden` jatab ta alles ja
   `transform` ei votta teda voost valja. Brauser arvestab seda kerimisala
   arvutamisel ja tekitab horisontaalse kerimisriba tapselt paneeli laiuse
   jagu. Kasutaja naeb seda „tyhja alana paremal" — see ongi ekraanivalisele
   paneelile eraldatud ruum.

   ⚠ TEINE, VAIKSEM POHJUS: `.tkh-site-top`, `.tkh-slider` ja
   `.tkh-stats-bar` kasutavad full-bleed trikki `width: 100vw`. `100vw`
   sisaldab AKNA KERIMISRIBA laiust, aga saadaolev sisulaius mitte. Seega
   toolaual, kus kerimisriba on nahtav, on need plokid ~15px laiemad kui
   leht ise. Mobiilis on kerimisriba ulekattes ja probleemi ei ole — aga
   toolaual on.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1) Sahtel ei tohi ekraanivalist paneeli kerimisalasse arvestada. */
.tkh-drawer {
	overflow: hidden;
}

/*
 * 2) Vaartus `clip`, MITTE `hidden`.
 *    `overflow-x: hidden` muudab elemendi kerimiskonteineriks ja LOHUB
 *    koik `position: sticky` elemendid lehel (Divi omad kaasa arvatud).
 *    `clip` loikab ule ulatuva osa ara, tegemata elementi kerimiskonteineriks
 *    — sticky jaab tooele. Vanemad brauserid jatavad reegli lihtsalt
 *    tahelepanuta, seega midagi katki ei lahe.
 */
html,
body {
	overflow-x: clip;
}

/*
 * 3) Kindlustus: uksi meie paise plokk ei tohi kunagi lehest laiem olla.
 *    `max-width: 100%` ei riku full-bleed trikki, sest see rakendub
 *    `.tkh-header`-ile, mitte tema 100vw lastele.
 */
.tkh-header {
	max-width: 100%;
}

/* ═══ KLEEPUVA RIBA LOGO: MAHUB JA EI PIGISTA (14.09.2026) ══════════════

   ⚠ VIGA OLI KAHEKORDNE PIIRANG ILMA `object-fit`-ita:
       height: 26px;  width: auto;  max-width: 150px;

   Logo on 340x57 (suhe 5.96), seega 26px korgusel on tema LOOMULIK laius
   155px. `max-width:150px` loikas selle 150px peale, aga `height:26px` jai
   kehtima — tulemus ei ole proportsionaalne kahandamine, vaid 3% PIGISTUS
   laiuses. Vaike moonutus, aga logo teksti juures nahtav.

   Ruumi on tegelikult rohkem kui 150px: 393px ekraanil jaab kolme nupu ja
   polstri jarele logole 231px. Annan 190px ja lisan `object-fit: contain`,
   mis hoiab proportsiooni ka siis, kui keegi laeb teistsuguse kujuga logo. */

@media (max-width: 900px) {
	.tkh-header.is-stuck .tkh-sticky-row__logo {
		flex: 0 1 auto;
		min-width: 0;
	}
	.tkh-header.is-stuck .tkh-sticky-row__logo img {
		height: 28px;
		width: auto;
		max-width: min(190px, 52vw);
		object-fit: contain;
	}

	/* Nuppude vahed nulli — iga piksel laheb logole. */
	.tkh-header.is-stuck .tkh-sticky-row__actions { gap: 0; }
	.tkh-header.is-stuck .tkh-sticky-row { gap: 8px; padding-left: 12px; padding-right: 12px; }
}

@media (max-width: 400px) {
	.tkh-header.is-stuck .tkh-sticky-row__logo img {
		height: 26px;
		max-width: min(160px, 48vw);
	}
	.tkh-header.is-stuck .tkh-sticky-row__actions a,
	.tkh-header.is-stuck .tkh-sticky-row__actions button { width: 38px; height: 38px; }
}

/* ⚠ KINDLUSTUS: logo link ei tohi ILMA KI kasti mootu parida. Kui keegi
   lisab hiljem `.tkh-sticky-row a` reegli, ei tohi see logo uuesti kokku
   suruda — seepärast on need vaartused siin selgesonaliselt kirjas. */
@media (max-width: 900px) {
	.tkh-sticky-row .tkh-sticky-row__logo {
		width: auto !important;
		height: auto !important;
		min-width: 0;
		flex: 0 1 auto;
		overflow: visible;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   USALDUSMARGIS MOBIILIS ALLA (14.09.2026)

   ⚠ PROBLEEM: margis oli `top:14px; right:14px` ehk slaideri PAREMAS
   ULANURGAS — tapselt seal, kus on hero PEALKIRI. Toolaual on pealkiri
   uherealine ja ruumi jagub, aga mobiilis murdub ta kolmele reale ja ulatub
   paremale servani. Margis jai teksti peale ja pealkiri muutus loetamatuks.

   ⚠ MIKS MITTE LIHTSALT VAIKSEMAKS: usaldusmargis on mote poolest
   USALDUST loov element. Kui ta on nii vaike, et teda ei loe, ei taida ta
   oma ulesannet — probleem on ASUKOHAS, mitte suuruses.

   LAHENDUS: mobiilis alumisse paremasse nurka. Seal on slaidi foto ja
   kaks nuppu, mis ei ulatu paremasse serva — margis mahub sinna vabalt.

   ⚠ INFORIBA KOMPENSATSIOON: alla 520px on inforida kirjed `flex:1 1 100%`
   ehk ule kogu laiuse ja jooksevad margise alla. Anname neile parempoolse
   polstri margise laiuse jagu. Ilma selleta lahendaks see uhe kattumise ja
   tekitaks teise. */

@media (max-width: 900px) {
	.tkh-slider .tkh-trust-badge {
		top: auto;
		bottom: 16px;
		right: 12px;
	}
	.tkh-slider .tkh-trust-badge-img {
		max-height: calc(var(--tkh-trust-badge-size, 80px) * 0.72);
		max-width: calc(var(--tkh-trust-badge-size, 80px) * 0.72 * 1.8);
	}

	/* Inforida ei tohi margise alla joosta. */
	.tkh-slider .tkh-info-inner {
		padding-right: calc(var(--tkh-trust-badge-size, 80px) * 0.72 + 20px);
	}
}

@media (max-width: 520px) {
	.tkh-slider .tkh-trust-badge {
		bottom: 12px;
		right: 10px;
	}
	.tkh-slider .tkh-trust-badge-img {
		max-height: calc(var(--tkh-trust-badge-size, 80px) * 0.62);
		max-width: calc(var(--tkh-trust-badge-size, 80px) * 0.62 * 1.8);
	}
	.tkh-slider .tkh-info-inner {
		padding-right: calc(var(--tkh-trust-badge-size, 80px) * 0.62 + 16px);
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   SAHTEL: TAISLAIUS JA KOKKUPANDAVAD ALAMMENUUD (14.09.2026)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
	/* Terve lehelaius. Varem `min(88vw, 360px)` — kitsal ekraanil jai
	   paremale 12% ribake lehest paistma, mis tegi menuu poolikuks. */
	.tkh-drawer .tkh-drawer-panel {
		width: 100%;
		max-width: none;
	}
}

/* ── Alammenuu: KINNI, kuni keegi selle avab ───────────────────────────
   ⚠ VAREM OLI ALATI LAHTI. `depth => 2` renderdab alamkirjed kohe ja CSS
   naitas neid taandega. Kolme alammenuuga menuu oleks olnud 30 rida pikk
   ja kasutaja peaks kerima labi asjade, mida ta ei otsi. */
.tkh-drawer-menu .sub-menu {
	display: none;
}
.tkh-drawer-menu .menu-item-has-children.is-open > .sub-menu {
	display: block;
}

/* Vanemkirje rida: link vasakul, avamisnupp paremal. */
.tkh-drawer-menu .menu-item-has-children {
	position: relative;
}
/* ⚠ Polster paremale, et pikk pealkiri EI JOOKSEKS nupu alla. Nupp on
   absoluutne, seega ta ei touka teksti ise eemale. */
.tkh-drawer-menu .menu-item-has-children > a {
	padding-right: 60px;
}

.tkh-drawer-sub-toggle {
	position: absolute;
	top: 0;
	right: 0;
	width: 58px;
	/* Sama korgus, mis lingil: 14px + 14px polster + ~22px reakorgus. */
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	border-left: 1px solid rgba(255, 255, 255, 0.10);
	color: rgba(255, 255, 255, 0.75);
	cursor: pointer;
	padding: 0;
}
.tkh-drawer-sub-toggle:hover,
.tkh-drawer-sub-toggle:focus {
	color: var(--tkh-yellow, #F1D949);
	background: rgba(255, 255, 255, 0.06);
}
.tkh-drawer-sub-toggle svg {
	display: block;
	transition: transform .18s ease;
}
.tkh-drawer-sub-toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
	.tkh-drawer-sub-toggle svg { transition: none; }
}

/* ⚠ TEINE MARGIS peale noole: vanemkirje tekst on pisut heledam ja saab
   vasakule ohukese kollase joone, kui alammenuu on lahti. Nool uksi on
   vaike ja kiirel kerimisel margamatu — eriti kui ekraan on sorme all. */
.tkh-drawer-menu .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	margin-left: 8px;
	border-radius: 50%;
	background: var(--tkh-yellow, #F1D949);
	vertical-align: middle;
	opacity: .55;
}
.tkh-drawer-menu .menu-item-has-children.is-open > a {
	background: rgba(255, 255, 255, 0.06);
	box-shadow: inset 3px 0 0 var(--tkh-yellow, #F1D949);
}
.tkh-drawer-menu .menu-item-has-children.is-open > a::after {
	opacity: 1;
}

/* Alamkirjed: taandega ja tumedamal taustal, et hierarhia oleks nahtav. */
.tkh-drawer-menu .sub-menu {
	background: rgba(0, 0, 0, 0.18);
}
.tkh-drawer-menu .sub-menu a {
	padding-left: 32px;
	font-size: 14.5px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.88);
}

/* ═══ SAHTLI LOGO JA SUJUVAM AVAMINE (14.09.2026) ══════════════════════ */

.tkh-drawer-logo {
	display: flex;
	align-items: center;
	min-width: 0;
}
.tkh-drawer-logo img {
	display: block;
	height: 30px;
	width: auto;
	max-width: min(200px, 55vw);
	object-fit: contain;
}

/* ⚠ `will-change` UTLEB brauserile ETTE, et seda elementi hakatakse
   liigutama, ja ta viiakse eraldi kompositsioonikihile ENNE animatsiooni
   algust. Ilma selleta teeb brauser selle too esimese kaadri ajal — just
   siis, kui libisemine peaks olema koige sujuvam. */
.tkh-drawer-panel {
	will-change: transform;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SLAIDERI ALAPEALKIRI UHELE REALE MOBIILIS (14.09.2026)

   ARVUTUS. Tekst „Lai valik tooriistu, aia- ja metsatehnikat." on 43 margi.
   IBM Plex Sansi keskmine margilaius on segakirjas ~0.50em, seega rea laius
   on ligikaudu 43 x font x 0.5. Saadaolev laius on ekraan miinus 48px
   polstrit:

       ekraan   saadaval   17px      15px      14.5px
       430px    382px      366 OK    322 OK    312 OK
       393px    345px      366 EI    322 OK    312 OK
       360px    312px      366 EI    322 EI    312 OK
       320px    272px      366 EI    322 EI    312 EI

   Fikseeritud suurus ei toota koigil laiustel korraga. `clamp()` seob fondi
   ekraani laiusega: 3.7vw annab 393px juures 14.5px ja 320px juures 11.8px,
   mis clamp'i pohja (12px) tostab 12px peale — 43 x 6 = 258px, mahub.

   ⚠ `white-space: nowrap` EI OLE kasutatud, ja see on TEADLIK. Alapealkiri
   on admini valjal muudetav. Kui keegi kirjutab sinna pikema lause, murduks
   see nuud graatsiliselt teisele reale. `nowrap` puhul ta kas ulatuks
   ekraanilt valja voi loigataks pooleli — molemad halvemad kui reavahetus.

   ⚠ SEE ULEKIRJUTAB admini seade `--tkh-subheading-size` AINULT mobiilis.
   Toolaual jaab seade kehtima. */

@media (max-width: 640px) {
	.tkh-hero-p {
		font-size: clamp(12px, 3.7vw, 15px);
		line-height: 1.45;
	}
}


/* ═══════════════════════════════════════════════════════════════════════════
   BÄNNERID: IGA KOHT VAHETAB OMA BÄNNEREID (16.10.2026, v1.28.0)

   Varem lehitsesid kõik bännerid rühmadena (1.-2. bänner korraga, siis 3.-4.).
   Nüüd (nagu vanal lehel): "kohad" (Bännereid korraga kõrvuti = 2) on kõrvuti
   JÄÄVAD, ja iga koht on oma slaider, mis vahetab ainult enda bännereid.
   Täislaiused bännerid (.tkh-banner-grid-wide, nt ESTO) jäävad omaette reana
   kohtade alla ja ei vaheta.

   Markup: .tkh-banner-stage > .tkh-banner-grid.tkh-banner-lanes > .tkh-slider.tkh-slider--lane
   JS (tkh-header.js initSlider) töötab iga .tkh-slider peal eraldi - muudatust
   pole vaja. Kõik slaidid on samas ruudustiku lahtris üksteise peal, nii et
   koha kõrgus = kõrgeima bänneri kõrgus ja lehe sisu ei hüppa vahetumisel.
   ═══════════════════════════════════════════════════════════════════════════ */
.tkh-banner-stage{ max-width:1240px; margin:0 auto; padding:20px 24px 22px; }
@media (max-width:900px){
  .tkh-banner-stage{ padding:14px 16px 16px; }
}

/* Tühistab hero-slaideri 100vw full-bleed / 540px kõrguse / tumeda tausta. */
.tkh-banners .tkh-slider.tkh-slider--lane{
  width:100%; left:0; margin:0; min-height:0; background:none; overflow:visible;
}
.tkh-slider--lane .tkh-slides{ display:grid; min-height:0; height:auto; }
.tkh-slider--lane .tkh-slide{
  grid-area:1 / 1; position:relative; inset:auto;
  height:auto; align-self:start;
  opacity:0; visibility:hidden; transition:opacity .5s ease, visibility 0s linear .5s;
}
.tkh-slider--lane .tkh-slide.is-active{
  opacity:1; visibility:visible; z-index:2; transition:opacity .5s ease, visibility 0s;
}

/* Nooled ja punktid kaardi peal (ei lisa kõrgust, nii et kohad jäävad ühekõrgused). */
.tkh-slider--lane .tkh-slider-arrow{ width:34px; height:34px; top:50%; }
.tkh-slider--lane .tkh-arrow-prev{ left:10px; }
.tkh-slider--lane .tkh-arrow-next{ right:10px; }
.tkh-slider--lane .tkh-slider-dots{
  bottom:10px; gap:8px; padding:5px 10px; border-radius:999px;
  background:rgba(20,23,26,0.5);
}
.tkh-slider--lane .tkh-dot{ border-color:rgba(255,255,255,0.8); }
.tkh-slider--lane .tkh-dot.is-active{ background:var(--tkh-orange); border-color:var(--tkh-orange); }

@media (max-width:640px){
  .tkh-slider--lane .tkh-slider-arrow{ width:30px; height:30px; }
  .tkh-slider--lane .tkh-arrow-prev{ left:6px; }
  .tkh-slider--lane .tkh-arrow-next{ right:6px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   KLEEPUV MENÜÜRIBA ARVUTIVAATES (16.10.2026, v1.29.0)

   Desktopil (>900px) jääb kerimisel ekraani ülaserva AINULT menüüriba (nav.tkh-nav); topbar ning logo/otsing
   kerivad tavapäraselt minema. Mobiilis kehtib endiselt vana kompaktne riba (.is-stuck, vt ülal).

   ⚠ `position: fixed`, MITTE `sticky`: nav on Divi `et_pb_code` mooduli ja .tkh-site-top sees, mille kõrgus
   piiraks sticky-ka (ta lõpetaks kleepumise, kui .tkh-site-top kerib minema). JS (tkh-header.js lõpus,
   "Kleepuv menüüriba") lisab `.tkh-header.is-nav-stuck` ja kompenseerib väljavõetud riba kõrguse
   (.tkh-site-top padding-bottom), et sisu ei hüppaks.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
	.tkh-header.is-nav-stuck .tkh-nav {
		position: fixed;
		top: var(--tkh-nav-top, 0px);
		left: 0;
		right: 0;
		margin-top: 0;
		z-index: 9998;
		background: var(--tkh-charcoal, #123F6E);
		box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.5);
	}
	@media (prefers-reduced-motion: no-preference) {
		.tkh-header.is-nav-stuck .tkh-nav { animation: tkh-nav-in .18s ease; }
	}
	/* Mega-menüü paneel järgib kleepuvat riba (muidu avaneks see lehe algse menüükoha alla, mis on kerimisel kadunud). */
	.tkh-header.is-nav-stuck .tkh-mm-shell {
		position: fixed;
		top: calc(var(--tkh-nav-top, 0px) + var(--tkh-nav-h, 0px));
		left: 0;
		right: 0;
		z-index: 9997;
	}
}
@keyframes tkh-nav-in {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   KEELEVALIK MOBIILIS RIPPMENÜÜNA (26.10.2026, v1.29.5)

   Probleem: topbaris olid mobiilis kõik 7 lippu korraga ja pigistasid lahtiolekuaja
   kolme punktiga katki ("E–R 9.00–17.00, ..."). Nüüd (<=900px, sama piir mis
   burger-menüül) on topbaris ainult valitud keele lipp + nool; vajutus avab
   ülekatte (position:absolute, ei lükka midagi alla ega kitsenda riba).

   ⚠ ARVUTIVAADE (>900px) JÄÄB SAMAKS: nupp on peidus ja .tkh-lang-menu on
   display:contents, st lingid käituvad nagu otse .tkh-lang-switcher flex-rea
   lapsed (nagu enne). "flag" režiimis peidab arvutivaade ka lisatud nime.
   Sahtli keelevalik (.tkh-drawer-langs) ei kasuta .tkh-lang-dd klassi ja
   ei muutu. Avamine/sulgemine, aktiivne lipp ja ARIA: tkh-header.js
   (initLangDropdown). */
.tkh-lang-dd .tkh-lang-toggle { display: none; }
.tkh-lang-dd .tkh-lang-menu { display: contents; }
.tkh-lang-dd.tkh-lang-mode-flag .tkh-lang-label { display: none; }

@media (max-width: 900px) {
	.tkh-topbar .tkh-lang-dd { position: relative; display: block; }

	.tkh-topbar .tkh-lang-dd .tkh-lang-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		min-width: 44px;
		min-height: 36px;
		padding: 0 4px 0 6px;
		margin: 0;
		background: transparent;
		border: 0;
		border-radius: 6px;
		color: var(--tkh-white);
		line-height: 1;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
	.tkh-topbar .tkh-lang-dd .tkh-lang-toggle:focus-visible {
		outline: 2px solid var(--tkh-yellow);
		outline-offset: 2px;
	}
	.tkh-topbar .tkh-lang-dd .tkh-lang-caret {
		flex: 0 0 auto;
		opacity: .85;
		transition: transform .15s ease;
	}
	.tkh-topbar .tkh-lang-dd.is-open .tkh-lang-caret { transform: rotate(180deg); }

	.tkh-topbar .tkh-lang-dd .tkh-lang-menu {
		display: none;
		position: absolute;
		top: calc(100% + 6px);
		right: 0;
		z-index: 9990;
		flex-direction: column;
		gap: 2px;
		min-width: 176px;
		max-width: calc(100vw - 24px);
		padding: 6px;
		background: #fff;
		border-radius: 10px;
		box-shadow: 0 14px 32px -10px rgba(18, 63, 110, .45), 0 0 0 1px rgba(18, 63, 110, .08);
	}
	.tkh-topbar .tkh-lang-dd.is-open .tkh-lang-menu { display: flex; }

	.tkh-topbar .tkh-lang-dd .tkh-lang-item {
		display: flex;
		align-items: center;
		gap: 12px;
		width: 100%;
		min-height: 40px;
		padding: 0 12px;
		border-radius: 6px;
		color: var(--tkh-charcoal);
		font-size: 14px;
		font-weight: 600;
		opacity: 1;
	}
	.tkh-topbar .tkh-lang-dd .tkh-lang-item:hover,
	.tkh-topbar .tkh-lang-dd .tkh-lang-item:focus-visible {
		background: #F5F3EE;
		color: var(--tkh-charcoal);
		outline: none;
	}
	.tkh-topbar .tkh-lang-dd .tkh-lang-item:focus-visible { box-shadow: inset 0 0 0 2px var(--tkh-charcoal); }
	.tkh-topbar .tkh-lang-dd .tkh-lang-item[aria-current="true"] { background: #EAF0F7; }
	.tkh-topbar .tkh-lang-dd .tkh-lang-item[aria-current="true"]::after {
		content: "";
		margin-left: auto;
		width: 5px;
		height: 10px;
		border: solid var(--tkh-charcoal);
		border-width: 0 2px 2px 0;
		transform: rotate(45deg) translateY(-1px);
	}
	.tkh-topbar .tkh-lang-dd.tkh-lang-mode-flag .tkh-lang-label { display: inline; }
	.tkh-topbar .tkh-lang-dd .tkh-lang-flag { width: 24px; height: 17px; flex: 0 0 auto; }
	.tkh-topbar .tkh-lang-dd .tkh-lang-toggle .tkh-lang-flag { width: 22px; height: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.tkh-topbar .tkh-lang-dd .tkh-lang-caret { transition: none; }
}