/* Tööriistakeskus – Tootekategooriad
   Kõik reeglid skoobitud .tkc-wrap alla, et vältida konflikte Divi/teema stiilidega. */

.tkc-wrap{
  --tkc-accent:#F1D949;
  --tkc-cols:6;
  --tkc-charcoal:#1B1F23;
  --tkc-yellow:#FFC02E;
  --tkc-muted:#6B6459;
  --tkc-border:#DAD5C8;
  --tkc-panel:#F5F2EA;
  font-family:'IBM Plex Sans', sans-serif;
  -webkit-font-smoothing:antialiased;
  box-sizing:border-box;
}
.tkc-wrap *, .tkc-wrap *::before, .tkc-wrap *::after{ box-sizing:inherit; }
.tkc-wrap a{ text-decoration:none; color:inherit; }

.tkc-grid{
  display:grid; grid-template-columns:repeat(var(--tkc-cols), 1fr); gap:20px;
  max-width:1240px; margin:0 auto; padding:8px 24px;
  align-items:start;
}

.tkc-card{
  position:relative;
  background:#fff; border:1px solid var(--tkc-border); border-radius:2px; overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tkc-card::before{
  /* Hoiatuslindi-viide ülaservas — ilmub hõljutades, nagu kinnitatud siseriba */
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--tkc-accent); transform:scaleX(0); transform-origin:left center;
  transition:transform .22s ease; z-index:2;
}
.tkc-card:hover,
.tkc-card.is-open{
  transform:translateY(-4px);
  box-shadow:0 18px 28px -18px rgba(27,31,35,0.32);
  border-color:var(--tkc-charcoal);
}
.tkc-card:hover::before,
.tkc-card.is-open::before{ transform:scaleX(1); }

.tkc-card-link{ display:block; }
.tkc-card-link:focus-visible{ outline:2px solid var(--tkc-accent); outline-offset:-2px; }

.tkc-card-image{
  aspect-ratio:3/2; max-height:120px; background:#fff; display:flex; align-items:center; justify-content:center; overflow:hidden;
  padding:14px; border-bottom:1px solid var(--tkc-border);
}
.tkc-card-image img{
  width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; display:block; transition:transform .35s ease, filter .35s ease;
}
.tkc-card:hover .tkc-card-image img,
.tkc-card.is-open .tkc-card-image img{ transform:scale(1.05); }
.tkc-card-fallback-icon{ width:34%; color:#B0AA9C; }
.tkc-card-fallback-icon svg{ width:100%; height:100%; display:block; }

.tkc-card-heading{
  margin:16px 16px 14px; min-height:52px; display:flex; align-items:center;
}
.tkc-card-title{
  font-family:var(--tk-font-display, 'Barlow Condensed', sans-serif); font-size:21px; letter-spacing:0.015em; line-height:1.1;
  text-transform:uppercase; /* Bebas Neue -> Barlow Condensed 10.09.2026 */
  color:var(--tkc-charcoal); margin:0;
}

.tkc-card-subs-wrap{
  height:0 !important; overflow:hidden !important;
  transition:height .3s ease;
}
.tkc-card.is-open .tkc-card-subs-wrap{
  height:var(--tkc-row-max, 700px) !important;
}
.tkc-card-subs{
  list-style:none !important; margin:0; padding:0 16px;
  display:flex; flex-direction:column;
}
.tkc-card-subs li{
  margin:0; padding:0; list-style:none !important; list-style-type:none !important;
}
.tkc-card-subs li::before,
.tkc-card-subs li::marker{
  content:none !important; display:none !important;
}
.tkc-card-subs a{
  display:block; padding:7px 2px; font-size:12.5px; line-height:1.3; letter-spacing:0.01em;
  color:var(--tkc-muted); border-top:1px solid var(--tkc-border);
  transition:color .15s ease;
}
.tkc-card-subs li:first-child a{ border-top:none; }
.tkc-card-subs li:last-child{ padding-bottom:14px; }
.tkc-card-subs a:hover{ color:var(--tkc-accent); text-decoration:none; }

@media (prefers-reduced-motion:reduce){
  .tkc-card, .tkc-card::before, .tkc-card-image img, .tkc-card-subs-wrap{ transition:none; }
  .tkc-card:hover{ transform:none; }
}

@media (max-width:1024px){
  .tkc-grid{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:640px){
  .tkc-grid{ grid-template-columns:repeat(2, 1fr); gap:12px; padding:8px 16px; }
  .tkc-card-image{ max-height:96px; padding:10px; }
  .tkc-card-heading{ margin:12px 12px 10px; min-height:40px; }
  .tkc-card-title{ font-size:17px; }
  .tkc-card-subs{ padding:0 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   POPULAARSED KATEGOORIAD — maketi järgi (tagasiside PDF lk 1, 11.09.2026)

   Värvid EI ole uued: --tkh-charcoal (#123F6E, vaatamata nimele navy) ja
   --tkh-yellow (#F2DA49) on päise olemasolevad tokenid. Maketi sinine on
   sama sinine, mis saidi päisel juba on — seega ei tekita see uut paletti,
   vaid viib ruudustiku ülejäänud saidiga kokku. Ruudustik oli seni beež
   (#DAD5C8 / #F5F2EA), mis oli päisest lahus.

   ⚠ MIKS AINULT SIIN, MITTE MEGA-MENÜÜS: tagasiside punkt 17 nõuab, et
   „TOOTED" avaks lauaarvutis KÕIK kategooriad. Mega-menüü kokkutõmme jääb
   mobiilile (tkh-header.css, max-width:900px).
   ══════════════════════════════════════════════════════════════════════ */

.tkc-wrap{
  --tkc-navy:#123F6E;
  --tkc-navy-soft:#3D5A73;
  --tkc-band:#F6F8FB;
  --tkc-card-line:#E3E8EF;
}

.tkc-head-row{ display:none; }
.tkc-showall{ display:none; }

/* Sektsiooniriba, nagu maketis: hele taust üle terve laiuse. */
.tkc-wrap.tkc-collapsible{
  background:var(--tkc-band);
  padding:34px 0 38px;
}

/* Pealkirjarida: nimi vasakul, link paremal — sama joondus mis ruudustikul
   (max-width 1240 + 24px külgpolster), et need ei nihkuks. */
.tkc-collapsible .tkc-head-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  max-width:1240px;
  margin:0 auto 18px;
  padding:0 24px;
}

.tkc-collapsible .tkc-popular-head{
  margin:0;
  font-family:'IBM Plex Sans', sans-serif;
  font-size:25px;
  line-height:1.2;
  font-weight:700;
  letter-spacing:-0.01em;
  text-transform:none;      /* maketis on tavaline lausekiri, mitte SUURTÄHED */
  color:var(--tkc-navy);
}

/* Link, mitte kastnupp — maketis on see väike tekst noolega paremal. */
.tkc-collapsible .tkc-showall{
  display:inline-flex;
  align-items:center;
  gap:7px;
  flex-shrink:0;
  margin:0;
  padding:0;
  background:none;
  border:0;
  font-family:'IBM Plex Sans', sans-serif;
  font-size:14.5px;
  font-weight:600;
  line-height:1.2;
  color:var(--tkc-navy);
  cursor:pointer;
  text-transform:none;
}
.tkc-collapsible .tkc-showall:hover{ text-decoration:underline; }
.tkc-collapsible .tkc-showall:focus-visible{
  outline:2px solid var(--tkc-navy); outline-offset:3px; border-radius:2px;
}
.tkc-collapsible .tkc-showall-arrow{ transition:transform .18s ease; }
.tkc-collapsible.is-expanded .tkc-showall-arrow{ transform:rotate(180deg); }
.tkc-collapsible .tkc-showall-less{ display:none; }
.tkc-collapsible.is-expanded .tkc-showall-more{ display:none; }
.tkc-collapsible.is-expanded .tkc-showall-less{ display:inline; }

/* Kokkutõmmatuna 8 kaarti reas, nagu maketis — mitte admini veergude arv.
   Avatuna langeb tagasi admini seadele (--tkc-cols). */
.tkc-collapsible:not(.is-expanded) .tkc-grid{
  grid-template-columns:repeat(8, 1fr);
  gap:14px;
}

/* Kaardi kogukõrgus: pilt + pealkirjaplokk + ääris. Kõigil sama, kõige
   pikema nime järgi. `:not(.is-open)` on oluline — kui kaardil klõpsatakse
   ja alamkategooriad avanevad, ei tohi fikseeritud kõrgus neid ära lõigata.
   ⚠ 15.09.2026: EEMALDATUD siit varasem `:not(.is-expanded)` piirang -
   see reegel andis võrdsed kõrgused AINULT kokkupandud (8-populaarse)
   olekus, mitte laiendatud "kõik kategooriad" olekus (klõps "Vaata kõiki"
   avalehel, VÕI tooriistakeskus-modern-shop plugina "Tooted" lehe
   show_all="1" režiim - vt class-tkc-shortcode.php). Kliendi teatatud viga
   "Tooted" lehel: "kastid oleks kõik ühesuurused" - laiendatud/show_all
   olekus VAJAB seda reeglit täpselt sama palju kui kokkupandud olekus.
   Turvaline laiendada: --tkc-title-lines (2 rida) + --tkc-title-fs on
   MÕÕDETUD kitsama 8-veerulise (118,8px kasutatavat laiust) konteksti
   jaoks - laiem 6- või vähemveeruline ruudustik annab IGA nime jaoks
   VEEL rohkem ruumi, mitte vähem, seega ei teki uut poolitus-/lõikeriski. */
.tkc-collapsible .tkc-card:not(.is-open){
  height:calc(var(--tkc-img-h) + var(--tkc-title-h) + 2px);
}
/* Link hoiab pilti + pealkirja; ei tohi flex-konteineris kokku suruda. */
.tkc-collapsible .tkc-card-link{ flex:0 0 auto; }

.tkc-collapsible .tkc-grid .tkc-card{ order:99; }
.tkc-collapsible .tkc-grid .tkc-card[data-popular]{ order:var(--tkc-pop, 50); }
.tkc-collapsible:not(.is-expanded) .tkc-grid .tkc-card:not([data-popular]){ display:none; }

/* Kaardi ilme maketi järgi: heledam joon, ümaram nurk, pealkiri PILDI ALL
   keskel väikese sinise kirjaga (praegu oli vasakul, suurtähtedes, antratsiit). */
.tkc-collapsible .tkc-card{
  border-color:var(--tkc-card-line);
  border-radius:6px;
}
.tkc-collapsible .tkc-card:hover,
.tkc-collapsible .tkc-card.is-open{
  border-color:var(--tkc-navy);
  box-shadow:0 14px 24px -16px rgba(18,63,110,0.38);
}
.tkc-collapsible .tkc-card::before{ background:var(--tkc-navy); }

/* ---- VÕRDSED KÕRGUSED ----
   Probleem: .tkc-grid on `align-items:start`, seega iga kaart oli täpselt
   oma sisu kõrgune. Kategooriate nimed on erineva pikkusega — „Aiatehnika"
   mahub ühele reale, „Aku- ja elektritööriistad" ja „Õlid, määrdeained,
   puhastusained" kahele — mistõttu kaardid olid eri kõrgused.

   Lahendus ilma `align-items:stretch`-ita: pilt on fikseeritud kuvasuhtega
   ja pealkirjaplokk fikseeritud min-kõrgusega, seega kaardid tulevad
   võrdsed iseenesest. `stretch` oleks halvem — siis venitaks avatud
   alamkategooriatega kaart (.is-open) kogu rea endaga kaasa. */
.tkc-collapsible .tkc-card{
  /* 12px, mitte 13px. MÕÕDETUD (IBM Plex Sans 500 päris fondimeetrikaga):
     8-veerulises kaardis on kasutatavat tekstilaiust 118,8px (polstriga 8px).
     „Isikukaitsevahendid" on 13px juures 122,0px ehk 7,2px ÜLE — see sundis
     brauserit sõna keskelt murdma („Isikukaitsevahendi" + üksik „d").
     12px juures on sama sõna 112,0px, varu 6,8px. Ainus nimi, mis üle läks;
     järgmine oli „Keevitusseadmed" 107,2px. */
  --tkc-title-fs:12px;
  --tkc-title-lh:1.35;
  --tkc-title-lines:2;
  --tkc-title-pad:22px;   /* 8px üleval + 14px all */
  --tkc-img-h:104px;

  /* Pealkirjaploki kõrgus KÕIGE PIKEMA nime järgi (2 rida). Mõõdetud:
     ükski 8-st nimest ei vaja rohkem kui 2 rida, ei 8- ega 6-veerulises
     vaates. Kõik kaardid saavad SAMA arvu. */
  --tkc-title-h:calc(var(--tkc-title-fs) * var(--tkc-title-lh) * var(--tkc-title-lines) + var(--tkc-title-pad));
}

/* ⚠ MIKS FIKSEERITUD KÕRGUS, MITTE aspect-ratio.
   aspect-ratio tuletab kõrguse VEERU LAIUSEST. Kaheksa `1fr` veergu ei jagune
   täisarvulisteks pikslilaiusteks (1240 - 48 polstrit - 7x14 gap = 1094 / 8
   = 136,75px), seega murdosapiksel ümardus eri kaartidel eri suunas ja
   kaardid jäid 1-2px võrra eri kõrgusega. Fikseeritud kõrgus katkestab
   selle sõltuvuse: pilt on igal kaardil sama kõrge, olenemata veeru
   murdosalaiusest. Kuvasuhe hoitakse ligikaudu 4:3 iga murdepunkti jaoks
   eraldi, muutuja --tkc-img-h kaudu. */
.tkc-collapsible .tkc-card-image{
  aspect-ratio:auto;
  height:var(--tkc-img-h);
  min-height:var(--tkc-img-h);
  max-height:var(--tkc-img-h);
  /* Maketil (tagasiside PDF lk 1) EI OLE pildi ja nime vahel joont — pilt ja
     silt on samal valgel pinnal, eraldab ainult vahe. NB: `border-bottom:0`,
     mitte rea kustutamine — baasreegel (.tkc-card-image, rida ~51) seaks
     muidu joone tagasi. */
  padding:14px 14px 4px;
  border-bottom:0;
}

.tkc-collapsible .tkc-card-heading{
  margin:0;
  padding:8px 8px 14px;
  align-items:center;
  justify-content:center;
  /* ⚠ FIKSEERITUD KÕRGUS, MITTE min-height.
     min-height on PÕRAND, mitte lagi — kui midagi (nt line-clamp, mis ei
     rakendu, või poolitusest tekkiv lisarida) tekitab sisu, mis on kõrgem
     kui 2 rida, kasvab plokk kaasa ja kaart läheb teistest kõrgemaks.
     Täpselt see oligi pikema nimega kaardi probleem. height + max-height
     teevad selle võimatuks: sisu ei saa kasti enam venitada. */
  height:var(--tkc-title-h);
  min-height:var(--tkc-title-h);
  max-height:var(--tkc-title-h);
  overflow:hidden;
}
.tkc-collapsible .tkc-card-title{
  font-family:'IBM Plex Sans', sans-serif;
  font-size:var(--tkc-title-fs);
  line-height:var(--tkc-title-lh);
  /* 600, mitte 500 — maketil (tagasiside PDF lk 1) on sildid jämedamad.
     MÕÕDETUD enne muutmist, sest jämedam kiri on LAIEM ja oleks võinud
     tekstimurdmise vea tagasi tuua: „Isikukaitsevahendid" 112,0px -> 113,5px
     kasutatavast 118,8-st. Varu 6,8px -> 5,2px. Mahub endiselt ühele reale. */
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  text-align:center;
  color:var(--tkc-navy);
  /* Kaitse tuleviku vastu: kui keegi lisab väga pika nime, lõigatakse see
     kahe rea pealt, mitte ei lõhu rea kõrgust. Praegused 8 nime mahuvad. */
  display:-webkit-box;
  -webkit-line-clamp:var(--tkc-title-lines);
  line-clamp:var(--tkc-title-lines);
  -webkit-box-orient:vertical;
  overflow:hidden;
  /* JÄRJEKORD ON OLULINE. CSS proovib reavahetust nii: tavalised murdekohad
     (tühikud) -> POOLITAMINE (hyphens:auto) -> hädamurdmine (overflow-wrap).
     <html lang="et"> on juba olemas, seega kui brauseril on eesti
     poolitusmustrid, saab pikast liitsõnast korralik „Isikukaitse-vahendid".
     overflow-wrap jääb VIIMASEKS võrguks — 12px juures ei lähe seda vaja. */
  -webkit-hyphens:auto;
  hyphens:auto;
  overflow-wrap:break-word;
}

/* ---- Kitsamad ekraanid ---- */
@media (max-width:1180px){
  .tkc-collapsible:not(.is-expanded) .tkc-grid{ grid-template-columns:repeat(6, 1fr); }
  .tkc-collapsible .tkc-card{ --tkc-img-h:130px; }
}
@media (max-width:900px){
  .tkc-wrap.tkc-collapsible{ padding:24px 0 26px; }
  .tkc-collapsible .tkc-head-row{
    margin-bottom:14px;
    padding:0 16px;
    flex-wrap:wrap;
    gap:6px;
  }
  .tkc-collapsible .tkc-popular-head{ font-size:20px; }
  .tkc-collapsible .tkc-showall{ font-size:14px; }
  .tkc-collapsible:not(.is-expanded) .tkc-grid{ grid-template-columns:repeat(2, 1fr); }
  /* Muudame AINULT muutujaid — nii pealkirja min-kõrgus kui pildi kõrgus
     arvutatakse neist, seega jäävad kaardid ka siin võrdseks. */
  .tkc-collapsible .tkc-card{ --tkc-title-fs:12.5px; --tkc-img-h:160px; }
}
@media (max-width:520px){
  .tkc-collapsible .tkc-head-row{ flex-direction:column; align-items:flex-start; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   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.
   ═══════════════════════════════════════════════════════════════════════════ */

.tkc-wrap.tkc-collapsible{ padding:20px 0 22px; }
@media (max-width:900px){
  .tkc-wrap.tkc-collapsible{ padding:14px 0 16px; }
}

/* ⚠ TAUSTARIBA LAIUS 1400 -> 1240px.
   Ütlesin varem, et Divi rida on 1080px lai — see oli vale, ma lugesin
   teema vaikeväärtust `--content-max-width`. Avalehe enda inline-CSS
   kirjutab selle üle: `.et_pb_row_0{ max-width:1400px !important }`.

   Tagajärg: `.tkc-wrap`-il ei ole max-width'i, seega riba oli 1400px lai,
   aga `.tkc-grid` sees on 1240px — riba ulatus kaartidest 80px üle KUMMASTKI
   servast. Soodustooted, Uued tooted ja Teenused on kõik 1240px. Nüüd on
   ka see riba 1240px ja kõik neli on ühel joonel. */
.tkc-wrap.tkc-collapsible{
  max-width:1240px;
  margin-left:auto;
  margin-right:auto;
}