/* ==========================================================================
   Pewne Wnętrze - nowy wygląd kalkulatora (wybór klienta z 2026-10-25;
   przełącznik "Obecny / Propozycja" usunięty)

   Sam kalkulator (HTML, JS i style #klb w index.html) zostaje 1:1 z produkcji,
   razem ze znacznikami ADMIN:*. Ten plik tylko nadpisuje wygląd i działa
   wyłącznie wtedy, gdy .calc-shell ma klasę .klb-v2 (jest na stałe w index.html).
   Bez tej klasy albo bez tego pliku kalkulator wygląda jak dawniej.

   Zasady tego wyglądu:
   - większe pismo (etykiety 14 px zamiast 12,5 px, opcje 13 px zamiast 11,5 px),
   - jedna siatka dla wszystkich opcji: kafelki równej szerokości i wysokości,
     ustawione w tych samych kolumnach w każdym wierszu,
   - zamiast emoji jednolity znacznik wyboru (kafelek jak w logo),
   - kosztorys jako tabela: ilości i kwoty wyrównane do prawej w stałych kolumnach,
     pod nią podział kosztorysu na pomieszczenia,
   - w nagłówku pomieszczenia tylko plus (dodaje do wyceny) albo "Uwzględnij", kosz i strzałka
     zwijania; "Elektryka" jest zwykłym wierszem w opcjach pomieszczenia.
   "Uwzględnij", kosz przy jedynym pomieszczeniu danego rodzaju, wiersz "Elektryka" i podział na
   pomieszczenia generuje skrypt kalkulatora w index.html; w obecnym wyglądzie są ukryte (style #klb).
   Style #klb mają !important, dlatego tutaj też, z wyższą specyficznością.
   ========================================================================== */

/* ---------- nagłówek i zakładki ---------- */
.klb-v2 #klb .kh { border-bottom: 0 !important; padding-bottom: 0 !important; }
.klb-v2 #klb .kh p { font-size: 14px !important; color: #f1f3f7 !important; margin-top: 6px !important; }
.klb-v2 #klb .ktabs {
  width: min(660px, 100%) !important; gap: 6px !important; padding: 5px !important;
  margin: 22px auto 26px !important;
  border: 1px solid rgba(255, 255, 255, .09) !important; border-radius: 999px !important;
  background: rgba(10, 22, 40, .6) !important;
}
.klb-v2 #klb .ktab {
  padding: 12px 10px !important; margin-bottom: 0 !important; border-bottom: 0 !important; border-radius: 999px !important;
  font-size: 14px !important; font-weight: 700 !important; color: #f1f3f7 !important;
}
.klb-v2 #klb .ktab:hover { color: #fff !important; }
.klb-v2 #klb .ktab.on { background: #d4af37 !important; color: #0a1628 !important; }
.klb-v2 #klb .ktab-icon { display: none !important; }

/* ---------- pomieszczenie: nagłówek ---------- */
.klb-v2 #klb .kwiz-lay, .klb-v2 #klb .klay { gap: 24px !important; }
.klb-v2 #klb .ktype { margin-bottom: 12px !important; }
.klb-v2 #klb .kroom { margin-bottom: 6px !important; border-radius: 16px !important; border-color: rgba(255, 255, 255, .09) !important; background: #0e2444 !important; }
.klb-v2 #klb .kroom-hd { padding: 16px 20px !important; gap: 14px !important; }
.klb-v2 #klb .kroom-hd-l { gap: 14px !important; }
.klb-v2 #klb .kroom-icon {
  width: 40px !important; height: 40px !important; display: grid !important; place-items: center !important;
  border-radius: 12px !important; background: rgba(212, 175, 55, .1) !important; border: 1px solid rgba(212, 175, 55, .25) !important;
  font-size: 19px !important; line-height: 1 !important;
}
/* ikony pomieszczeń: zamiast emoji złote ikony liniowe, dobierane po identyfikatorze
   pomieszczenia (kroom-<id>_<nr>). Pomieszczenie o innym identyfikatorze zachowuje emoji z danych.
   Te same ikony (zmienna --m według data-room) stoją przy kwotach w podziale kosztorysu,
   w filtrze pomieszczeń katalogu i przy grupach cennika pokojowego. */
.klb-v2 #klb {
  --ic-lazienka: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12h19'/%3E%3Cpath d='M4.5 12v3.5A3.5 3.5 0 0 0 8 19h8a3.5 3.5 0 0 0 3.5-3.5V12'/%3E%3Cpath d='M7.5 19l-.8 2M16.5 19l.8 2'/%3E%3Cpath d='M6.5 12V6.3a2.3 2.3 0 0 1 4.6 0'/%3E%3Cpath d='M9.4 6.9h3.4'/%3E%3C/svg%3E");
  --ic-kuchnia: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5h14V16a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3z'/%3E%3Cpath d='M5 13H3M19 13h2'/%3E%3Cpath d='M6.5 10.5c0-2 2.5-3.5 5.5-3.5s5.5 1.5 5.5 3.5'/%3E%3Cpath d='M12 7V5.4'/%3E%3C/svg%3E");
  --ic-pokoj: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 11V8.5A2.5 2.5 0 0 1 8.5 6h7A2.5 2.5 0 0 1 18 8.5V11'/%3E%3Cpath d='M4 11a2 2 0 0 0-2 2v4a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1v-4a2 2 0 0 0-4 0v2H6v-2a2 2 0 0 0-2-2z'/%3E%3Cpath d='M5 18v2M19 18v2'/%3E%3C/svg%3E");
  --ic-przedpokoj: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 21h17'/%3E%3Cpath d='M6.5 21V4.5A1.5 1.5 0 0 1 8 3h8a1.5 1.5 0 0 1 1.5 1.5V21'/%3E%3Cpath d='M14.3 11.6v1.6'/%3E%3C/svg%3E");
  --ic-balkon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5h18M3 20.5h18'/%3E%3Cpath d='M5 11.5v9M9.7 11.5v9M14.3 11.5v9M19 11.5v9'/%3E%3Cpath d='M8.6 11.5a3.4 3.4 0 0 1 6.8 0'/%3E%3Cpath d='M12 4.6v1.3M6.9 6.7l.9.9M17.1 6.7l-.9.9'/%3E%3C/svg%3E");
  /* "Uniwersalne" (filtr katalogu i grupa cennika): iskra jak emoji w danych */
  --ic-uniwersalne: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5c.7 4.2 2.3 5.8 6.5 6.5-4.2.7-5.8 2.3-6.5 6.5-.7-4.2-2.3-5.8-6.5-6.5 4.2-.7 5.8-2.3 6.5-6.5z'/%3E%3Cpath d='M18.5 15.5v4M16.5 17.5h4'/%3E%3C/svg%3E");
  /* "Inne prace": lista pozycji */
  --ic-inne: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6.5h11M9 12h11M9 17.5h11'/%3E%3Cpath d='M4.5 6.5h.01M4.5 12h.01M4.5 17.5h.01' stroke-width='2.6'/%3E%3C/svg%3E");
}
.klb-v2 #klb [data-room="lazienka"] { --m: var(--ic-lazienka); }
.klb-v2 #klb [data-room="kuchnia"] { --m: var(--ic-kuchnia); }
.klb-v2 #klb [data-room="pokoj"] { --m: var(--ic-pokoj); }
.klb-v2 #klb [data-room="przedpokoj"] { --m: var(--ic-przedpokoj); }
.klb-v2 #klb [data-room="balkon"] { --m: var(--ic-balkon); }
.klb-v2 #klb [data-room="uniwersalne"] { --m: var(--ic-uniwersalne); }
.klb-v2 #klb [data-room="inne"] { --m: var(--ic-inne); }
.klb-v2 #klb .kroom[id^="kroom-lazienka_"] .kroom-icon,
.klb-v2 #klb .kroom[id^="kroom-kuchnia_"] .kroom-icon,
.klb-v2 #klb .kroom[id^="kroom-pokoj_"] .kroom-icon,
.klb-v2 #klb .kroom[id^="kroom-przedpokoj_"] .kroom-icon,
.klb-v2 #klb .kroom[id^="kroom-balkon_"] .kroom-icon { font-size: 0 !important; color: transparent !important; background-color: rgba(212, 175, 55, .1) !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 60% !important; }
.klb-v2 #klb .kroom[id^="kroom-lazienka_"] .kroom-icon { background-image: var(--ic-lazienka) !important; }
.klb-v2 #klb .kroom[id^="kroom-kuchnia_"] .kroom-icon { background-image: var(--ic-kuchnia) !important; }
.klb-v2 #klb .kroom[id^="kroom-pokoj_"] .kroom-icon { background-image: var(--ic-pokoj) !important; }
.klb-v2 #klb .kroom[id^="kroom-przedpokoj_"] .kroom-icon { background-image: var(--ic-przedpokoj) !important; }
.klb-v2 #klb .kroom[id^="kroom-balkon_"] .kroom-icon { background-image: var(--ic-balkon) !important; }
/* pomieszczenie poza wyceną: sama belka z plusem, cała klikalna (dodaje pomieszczenie do wyceny,
   js/main.js). Kosz, strzałka i opcje pomieszczenia pojawiają się dopiero po dodaniu. */
.klb-v2 #klb .kroom.off { transition: border-color .2s !important; }
.klb-v2 #klb .kroom.off:hover { border-color: rgba(212, 175, 55, .4) !important; }
.klb-v2 #klb .kroom.off:hover .kroom-hd-l { opacity: .85 !important; }
.klb-v2 #klb .kroom-title { font-size: 17px !important; font-weight: 700 !important; letter-spacing: -.01em !important; line-height: 1.25 !important; }
.klb-v2 #klb .kroom-sub { font-size: 12.5px !important; color: #b6becb !important; margin-top: 3px !important; line-height: 1.3 !important; }
.klb-v2 #klb .kroom.off .kroom-hd-l { opacity: .55 !important; }

/* przyciski w nagłówku: "Uwzględnij", kosz i strzałka zwijania (pomieszczenie w wycenie) albo plus
   (poza wyceną). Przełączniki z nagłówka są ukryte, "Elektryka" jest wierszem w opcjach (.kw-row-elec).
   - "Uwzględnij" (zaznaczony kafelek): odznaczenie wyłącza pomieszczenie z wyceny, ale zostawia jego
     ustawienia; wraca belka z plusem, a plus przywraca pomieszczenie z tymi ustawieniami.
   - Kosz usuwa pomieszczenie razem z ustawieniami: przy jedynym pomieszczeniu danego rodzaju wraca
     belka z plusem i ustawienia domyślne, przy kilku pomieszczeniach tego rodzaju znika to jedno. */
.klb-v2 #klb .kroom-hd { flex-wrap: nowrap !important; }
.klb-v2 #klb .kroom-hd-r { gap: 8px !important; }
.klb-v2 #klb .kroom-hd-r > div { display: none !important; }
.klb-v2 #klb .kroom-incl {
  order: 0 !important; display: flex !important; align-items: center !important; gap: 7px !important;
  height: 34px !important; padding: 0 12px 0 10px !important; box-sizing: border-box !important;
  border: 1px solid #d4af37 !important; border-radius: 10px !important; background: rgba(212, 175, 55, .13) !important;
  font-family: inherit !important; font-size: 12.5px !important; font-weight: 600 !important; line-height: 1 !important;
  color: #ffffff !important; white-space: nowrap !important; cursor: pointer !important; transition: background .2s !important;
}
.klb-v2 #klb .kroom-incl::before {
  content: '' !important; flex: 0 0 13px; width: 13px; height: 13px; border-radius: 4px;
  background: #d4af37 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.7 8.5l2.8 2.8 5.8-6.4' fill='none' stroke='%230a1628' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.klb-v2 #klb .kroom-incl:hover { background: rgba(212, 175, 55, .24) !important; }
.klb-v2 #klb .kroom-del, .klb-v2 #klb .kroom-collapse-btn {
  width: 34px !important; height: 34px !important; margin: 0 !important; border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, .12) !important; background: rgba(255, 255, 255, .03) !important; color: #f1f3f7 !important;
  transition: background .2s, border-color .2s, color .2s !important;
}
.klb-v2 #klb .kroom-del { order: 1 !important; font-size: 0 !important; }
.klb-v2 #klb .kroom-del.kroom-del-one { display: flex !important; }
.klb-v2 #klb .kroom.off .kroom-del.kroom-del-one { display: none !important; }
.klb-v2 #klb .kroom-del::before {
  content: '' !important; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5h16'/%3E%3Cpath d='M9.5 6.5V4.8a1.3 1.3 0 0 1 1.3-1.3h2.4a1.3 1.3 0 0 1 1.3 1.3v1.7'/%3E%3Cpath d='M6.5 6.5l.9 12.6A1.6 1.6 0 0 0 9 20.5h6a1.6 1.6 0 0 0 1.6-1.4l.9-12.6'/%3E%3Cpath d='M10.2 10.5v6M13.8 10.5v6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5h16'/%3E%3Cpath d='M9.5 6.5V4.8a1.3 1.3 0 0 1 1.3-1.3h2.4a1.3 1.3 0 0 1 1.3 1.3v1.7'/%3E%3Cpath d='M6.5 6.5l.9 12.6A1.6 1.6 0 0 0 9 20.5h6a1.6 1.6 0 0 0 1.6-1.4l.9-12.6'/%3E%3Cpath d='M10.2 10.5v6M13.8 10.5v6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.klb-v2 #klb .kroom-del:hover { background: rgba(248, 113, 113, .14) !important; border-color: #f87171 !important; color: #f87171 !important; }
.klb-v2 #klb .kroom-collapse-btn { order: 2 !important; }
.klb-v2 #klb .kroom.off .kroom-collapse-btn { display: none !important; }
.klb-v2 #klb .kroom.off .kroom-hd-r::before {
  --pl: #d4af37; --pb: rgba(212, 175, 55, .08);
  order: 3 !important;
  content: '' !important; width: 34px !important; height: 34px !important; box-sizing: border-box !important;
  border-radius: 10px !important; border: 1px solid rgba(212, 175, 55, .45) !important;
  background: linear-gradient(var(--pl), var(--pl)) center / 12px 2px no-repeat, linear-gradient(var(--pl), var(--pl)) center / 2px 12px no-repeat, var(--pb) !important;
  transition: border-color .2s !important;
}
.klb-v2 #klb .kroom.off:hover .kroom-hd-r::before { --pl: #0a1628; --pb: #d4af37; border-color: #d4af37 !important; }
/* "Dodaj kolejne pomieszczenie" ma sens dopiero wtedy, gdy pierwsze tego rodzaju jest w wycenie */
.klb-v2 #klb .ktype:not(:has(.kroom:not(.off))) .kadd-instance { display: none !important; }
/* po najechaniu strzałka wypełnia się złotem, tak jak plus przy pomieszczeniu poza wyceną */
.klb-v2 #klb .kroom-collapse-btn:hover { background: #d4af37 !important; border-color: #d4af37 !important; color: #0a1628 !important; }
/* strzałka zwijania: liniowy szewron zamiast trójkąta z czcionki; w dół, gdy pomieszczenie
   jest rozwinięte, w bok, gdy jest zwinięte */
.klb-v2 #klb .kroom-arr {
  width: 16px !important; height: 16px !important; font-size: 0 !important; background: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .2s !important;
}
.klb-v2 #klb .kroom.closed .kroom-arr { transform: rotate(-90deg) !important; }

/* ---------- pomieszczenie: wiersze z opcjami ---------- */
.klb-v2 #klb .kroom-body { padding: 4px 20px 18px !important; }
.klb-v2 #klb .kw-row { border-top-color: rgba(255, 255, 255, .06) !important; }
/* "Elektryka" jako zwykły wiersz opcji (od 761 px siatka jak w pozostałych wierszach, niżej) */
.klb-v2 #klb .kw-row.kw-row-elec { display: flex !important; }
.klb-v2 #klb .kw-lbl { font-size: 14px !important; font-weight: 600 !important; color: #ffffff !important; line-height: 1.35 !important; }
.klb-v2 #klb .kw-lbl small { font-size: 12px !important; font-weight: 400 !important; color: #b6becb !important; margin-top: 3px !important; line-height: 1.4 !important; }
/* jedna siatka kolumn dla wszystkich wierszy: kafelki stałej szerokości i wysokości,
   ustawione w równych kolumnach (wysokość mieści nazwę w dwóch liniach; szerokość mieści
   kwadrat zaznaczenia, ikonę i najdłuższe słowo z nazw opcji) */
.klb-v2 #klb .kw-choices { display: grid !important; grid-template-columns: repeat(auto-fill, 152px) !important; gap: 6px !important; }
.klb-v2 #klb .kw-opt {
  display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 5px !important;
  min-height: 36px !important; padding: 3px 7px !important; border-radius: 9px !important;
  background: rgba(255, 255, 255, .03) !important; border-color: rgba(255, 255, 255, .1) !important;
  font-size: 12px !important; font-weight: 600 !important; line-height: 1.2 !important; color: #f1f3f7 !important;
  white-space: normal !important; text-align: left !important;
  /* długi wyraz bez spacji (np. "(piekarnik/zmywarka)") łamie się w kafelku zamiast z niego wychodzić */
  min-width: 0 !important; overflow-wrap: anywhere !important; -webkit-hyphens: auto !important; hyphens: auto !important;
}
.klb-v2 #klb .kw-opt:hover { border-color: rgba(212, 175, 55, .45) !important; color: #fff !important; }
.klb-v2 #klb .kw-opt::before {
  content: '' !important; flex: 0 0 13px !important; width: 13px !important; height: 13px !important; border-radius: 4px !important;
  box-shadow: inset 0 0 0 1.5px rgba(212, 175, 55, .5) !important;
}
.klb-v2 #klb .kw-opt.on { background: rgba(212, 175, 55, .13) !important; border-color: #d4af37 !important; color: #fff !important; }
.klb-v2 #klb .kw-opt.on::before {
  box-shadow: none !important;
  background: #d4af37 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.7 8.5l2.8 2.8 5.8-6.4' fill='none' stroke='%230a1628' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat !important;
}
.klb-v2 #klb .kw-opt-icon { display: none !important; }
/* ikona opcji między kwadratem zaznaczenia a napisem, w stylu ikon pomieszczeń. Atrybut data-ic
   nadaje skrypt kalkulatora (OPT_ICONS), rysunki są niżej między znacznikami IKONY-OPCJI. */
.klb-v2 #klb .kw-opt::before { order: -2 !important; }
.klb-v2 #klb .kw-opt[data-ic]::after {
  content: '' !important; order: -1; flex: 0 0 16px; width: 16px; height: 16px;
  background: #d4af37; opacity: .75; transition: opacity .2s;
  -webkit-mask: var(--oi) center / contain no-repeat; mask: var(--oi) center / contain no-repeat;
}
.klb-v2 #klb .kw-opt.on[data-ic]::after, .klb-v2 #klb .kw-opt[data-ic]:hover::after { opacity: 1; }
.klb-v2 #klb .kw-opt .nw { white-space: nowrap !important; }
/* nazwa dłuższa niż 28 znaków (np. "Podłączenie AGD (piekarnik/zmywarka)") zajmuje dwie kolumny zamiast czterech linii */
.klb-v2 #klb .kw-opt.kw-opt-wide { grid-column: span 2 !important; }
/* IKONY-OPCJI:START (reguły wpisuje node _tools/ikony-kalkulatora.mjs, nie zmieniać ręcznie) */
.klb-v2 #klb .kw-opt[data-ic="none"] { --oi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M6 18L18 6'/%3E%3C/svg%3E"); }
.klb-v2 #klb .kw-opt[data-ic="hammer"] { --oi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 19.5l9-9'/%3E%3Cpath d='M10 6.9L12.9 4l7.1 7.1-2.9 2.9z'/%3E%3C/svg%3E"); }
.klb-v2 #klb .kw-opt[data-ic="house"] { --oi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 20.5V10L12 4l7.5 6v10.5'/%3E%3Cpath d='M3 20.5h18'/%3E%3Cpath d='M10 20.5V15h4v5.5'/%3E%3C/svg%3E"); }
.klb-v2 #klb .kw-opt[data-ic="shower"] { --oi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 21V6.5A2.5 2.5 0 0 1 8 4h4a2 2 0 0 1 2 2v1.6'/%3E%3Cpath d='M10 11a4 3.2 0 0 1 8 0z'/%3E%3Cpath d='M11 14v1.5M14 14v2.5M17 14v1.5'/%3E%3C/svg%3E"); }
.klb-v2 #klb .kw-opt[data-ic="cabin"] { --oi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='3.5' width='15' height='17' rx='1.5'/%3E%3Cpath d='M4.5 17h15'/%3E%3Cpath d='M8 9.5l3-3M8 13l5.5-5.5'/%3E%3C/svg%3E"); }
.klb-v2 #klb .kw-opt[data-ic="tub"] { --oi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5h18'/%3E%3Cpath d='M4.5 11.5v3A4.5 4.5 0 0 0 9 19h6a4.5 4.5 0 0 0 4.5-4.5v-3'/%3E%3Cpath d='M7.5 19l-1 2M16.5 19l1 2'/%3E%3Cpath d='M6.5 11.5V7a2 2 0 0 1 4 0'/%3E%3C/svg%3E"); }
.klb-v2 #klb .kw-opt[data-ic="tub-free"] { --oi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 9.5h15'/%3E%3Cpath d='M4.5 9.5c.3 4.6 3.4 7.5 7.5 7.5s7.2-2.9 7.5-7.5'/%3E%3Cpath d='M7.5 16l-1.5 3.5M16.5 16l1.5 3.5'/%3E%3C/svg%3E"); }
.klb-v2 #klb .kw-opt[data-ic="tub-shower"] { --oi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13.5h18'/%3E%3Cpath d='M4.5 13.5V15a4 4 0 0 0 4 4h7a4 4 0 0 0 4-4v-1.5'/%3E%3Cpath d='M18 13.5v-8A1.5 1.5 0 0 0 16.5 4H13v2.2'/%3E%3Cpath d='M10 8.6a3 2.4 0 0 1 6 0z'/%3E%3Cpath d='M11.5 10.8v.6M14.5 10.8v.6'/%3E%3C/svg%3E"); }
.klb-v2 #klb .kw-opt[data-ic="wc-wall"] { --oi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 3v18'/%3E%3Crect x='7' y='4' width='4' height='3' rx='.8'/%3E%3Cpath d='M4.5 10h14a1 1 0 0 1 1 1c0 3.9-3.1 7-7 7h-8'/%3E%3C/svg%3E"); }
.klb-v2 #klb .kw-opt[data-ic="wc"] { --oi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='3.5' width='6' height='7.5' rx='1'/%3E%3Cpath d='M4.5 12.5h15c0 3-2.5 5.5-5.5 5.5H9.5c-2.8 0-5-2.5-5-5.5z'/%3E%3Cpath d='M10 18v2.5h5V18'/%3E%3C/svg%3E"); }
.klb-v2 #klb .kw-opt[data-ic="sink-vessel"] { --oi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 16h18'/%3E%3Cpath d='M6 11h12a6 5 0 0 1-12 0z'/%3E%3Cpath d='M15.5 11V7h-3'/%3E%3Cpath d='M5 16v4.5M19 16v4.5'/%3E%3C/svg%3E"); }
.klb-v2 #klb .kw-opt[data-ic="sink-inset"] { --oi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M6.5 10c0 3.6 2.5 5.5 5.5 5.5s5.5-1.9 5.5-5.5'/%3E%3Cpath d='M12 10V6h3'/%3E%3Cpath d='M5 10v10.5M19 10v10.5'/%3E%3C/svg%3E"); }
.klb-v2 #klb .kw-opt[data-ic="sink-top"] { --oi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 15h18'/%3E%3Crect x='6.5' y='10.5' width='11' height='4.5' rx='1.5'/%3E%3Cpath d='M12 10.5V7h3'/%3E%3Cpath d='M5 15v5.5M19 15v5.5'/%3E%3C/svg%3E"); }
.klb-v2 #klb .kw-opt[data-ic="tiles-std"] { --oi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='7' height='7' rx='1'/%3E%3Crect x='13' y='4' width='7' height='7' rx='1'/%3E%3Crect x='4' y='13' width='7' height='7' rx='1'/%3E%3Crect x='13' y='13' width='7' height='7' rx='1'/%3E%3C/svg%3E"); }
.klb-v2 #klb .kw-opt[data-ic="tiles-large"] { --oi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4' width='17' height='7.5' rx='1'/%3E%3Crect x='3.5' y='12.5' width='17' height='7.5' rx='1'/%3E%3C/svg%3E"); }
.klb-v2 #klb .kw-opt[data-ic="slab"] { --oi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='1.5'/%3E%3Cpath d='M7 17.5c1.5-2.5 3-2.2 4.5-4.5s3-3.5 5.5-5'/%3E%3C/svg%3E"); }
.klb-v2 #klb .kw-opt[data-ic="tiles"] { --oi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='1'/%3E%3Cpath d='M3.5 9.2h17M3.5 14.8h17M9.2 3.5v17M14.8 3.5v17'/%3E%3C/svg%3E"); }
.klb-v2 #klb .kw-opt[data-ic="subway"] { --oi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='1'/%3E%3Cpath d='M3.5 9.8h17M3.5 14.2h17M9 5.5v4.3M15 5.5v4.3M6 9.8v4.4M12 9.8v4.4M18 9.8v4.4M9 14.2v4.3M15 14.2v4.3'/%3E%3C/svg%3E"); }
.klb-v2 #klb .kw-opt[data-ic="bolt"] { --oi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3L6 13.5h5.5L10.5 21 18 10.5h-5.5z'/%3E%3C/svg%3E"); }
.klb-v2 #klb .kw-opt[data-ic="drop"] { --oi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5c3.1 4 5.5 6.9 5.5 10a5.5 5.5 0 0 1-11 0c0-3.1 2.4-6 5.5-10z'/%3E%3C/svg%3E"); }
.klb-v2 #klb .kw-opt[data-ic="mirror"] { --oi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6.5' y='3.5' width='11' height='17' rx='5.5'/%3E%3Cpath d='M9.5 10l2.5-2.5M9.5 13.5l5-5'/%3E%3Cpath d='M3.5 9v6M20.5 9v6'/%3E%3C/svg%3E"); }
.klb-v2 #klb .kw-opt[data-ic="ladder"] { --oi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5v17M17 3.5v17M7 7h10M7 10.5h10M7 14h10M7 17.5h10'/%3E%3C/svg%3E"); }
.klb-v2 #klb .kw-opt[data-ic="vanity"] { --oi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 10h17'/%3E%3Crect x='5' y='10' width='14' height='9.5' rx='1'/%3E%3Cpath d='M12 10v9.5M10 13.5v2.5M14 13.5v2.5'/%3E%3Cpath d='M8.5 10c0-1.7 1.6-3 3.5-3s3.5 1.3 3.5 3'/%3E%3C/svg%3E"); }
.klb-v2 #klb .kw-opt[data-ic="led-strip"] { --oi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='9' width='19' height='6' rx='3'/%3E%3Cpath d='M6.5 12h.01M10 12h.01M13.5 12h.01M17 12h.01' stroke-width='2.6'/%3E%3C/svg%3E"); }
.klb-v2 #klb .kw-opt[data-ic="planks"] { --oi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='1'/%3E%3Cpath d='M3 9.7h18M3 14.3h18M14 5v4.7M8 9.7v4.6M16.5 14.3V19'/%3E%3C/svg%3E"); }
.klb-v2 #klb .kw-opt[data-ic="planks-v"] { --oi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='3.5' width='15' height='17' rx='1'/%3E%3Cpath d='M9.5 3.5v17M14.5 3.5v17M4.5 11h5M9.5 7h5M9.5 15h5M14.5 12h5'/%3E%3C/svg%3E"); }
.klb-v2 #klb .kw-opt[data-ic="plank"] { --oi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='10' rx='1'/%3E%3Cpath d='M5.5 10.5c2 0 3 1.5 6 1.5s4-1.5 7-1.5M5.5 13.8c2 0 3.5 1 6 1s4-1 7-1'/%3E%3C/svg%3E"); }
.klb-v2 #klb .kw-opt[data-ic="parquet"] { --oi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5L7.75 5 12 8.5 16.25 5l4.25 3.5M3.5 14l4.25-3.5L12 14l4.25-3.5L20.5 14M3.5 19.5L7.75 16 12 19.5 16.25 16l4.25 3.5'/%3E%3C/svg%3E"); }
.klb-v2 #klb .kw-opt[data-ic="resin"] { --oi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 19.5h18'/%3E%3Cpath d='M12 4c2.2 2.9 3.8 4.9 3.8 7.1a3.8 3.8 0 0 1-7.6 0C8.2 8.9 9.8 6.9 12 4z'/%3E%3Cpath d='M5 16.5h3.5M15.5 16.5H19'/%3E%3C/svg%3E"); }
.klb-v2 #klb .kw-opt[data-ic="roller"] { --oi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3.5' width='13' height='5' rx='1.2'/%3E%3Cpath d='M17 6h2.5v5.5H11V14'/%3E%3Crect x='9.5' y='14' width='3' height='7' rx='1'/%3E%3C/svg%3E"); }
.klb-v2 #klb .kw-opt[data-ic="wallpaper"] { --oi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3.5' width='16' height='4.5' rx='2.25'/%3E%3Cpath d='M6.5 8v12.5h11V8'/%3E%3Cpath d='M10 12l2 2 2-2M10 16l2 2 2-2'/%3E%3C/svg%3E"); }
.klb-v2 #klb .kw-opt[data-ic="texture"] { --oi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='1.5'/%3E%3Cpath d='M7 9.5c1.2-1 2.3-1 3.5 0s2.3 1 3.5 0 2.3-1 3 0M7 14.5c1.2-1 2.3-1 3.5 0s2.3 1 3.5 0 2.3-1 3 0'/%3E%3C/svg%3E"); }
.klb-v2 #klb .kw-opt[data-ic="ceiling"] { --oi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h18'/%3E%3Cpath d='M7 4v5M17 4v5'/%3E%3Crect x='3.5' y='9' width='17' height='3.5' rx='.8'/%3E%3C/svg%3E"); }
.klb-v2 #klb .kw-opt[data-ic="ceiling-led"] { --oi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h18'/%3E%3Cpath d='M7 4v4M17 4v4'/%3E%3Crect x='3.5' y='8' width='17' height='3.5' rx='.8'/%3E%3Cpath d='M12 14.5V17M7.5 14.2l-1.2 1.8M16.5 14.2l1.2 1.8'/%3E%3C/svg%3E"); }
.klb-v2 #klb .kw-opt[data-ic="molding"] { --oi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 3.5h17M3.5 3.5v17'/%3E%3Cpath d='M3.5 12c1.8 0 2.7-1 3-2.5.4-1.8 1.5-2.8 3.4-2.8 1.5 0 2.4-.9 2.7-2.4l.2-.8'/%3E%3C/svg%3E"); }
.klb-v2 #klb .kw-opt[data-ic="box"] { --oi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 7.5L12 3.5l8.5 4v9L12 20.5l-8.5-4z'/%3E%3Cpath d='M3.5 7.5L12 11.5l8.5-4M12 11.5v9'/%3E%3C/svg%3E"); }
.klb-v2 #klb .kw-opt[data-ic="cabinet"] { --oi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='9' width='16' height='11.5' rx='1'/%3E%3Cpath d='M4 13.5h16M12 9v11.5'/%3E%3Cpath d='M4 5.5h16M4 4v3M20 4v3'/%3E%3C/svg%3E"); }
.klb-v2 #klb .kw-opt[data-ic="lamp"] { --oi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h18'/%3E%3Cpath d='M12 4v3.5'/%3E%3Cpath d='M7 12a5 4.5 0 0 1 10 0z'/%3E%3Cpath d='M12 15v2.5M7.8 14.5l-1.3 2M16.2 14.5l1.3 2'/%3E%3C/svg%3E"); }
.klb-v2 #klb .kw-opt[data-ic="oven"] { --oi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3.5' width='16' height='17' rx='1.5'/%3E%3Cpath d='M4 8h16'/%3E%3Crect x='7' y='11' width='10' height='6.5' rx='1'/%3E%3Cpath d='M7.5 5.8h.01M10.5 5.8h.01' stroke-width='2.4'/%3E%3C/svg%3E"); }
.klb-v2 #klb .kw-opt[data-ic="hood"] { --oi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 3.5h5v6h-5z'/%3E%3Cpath d='M4 15.5l4.5-6h7l4.5 6z'/%3E%3Cpath d='M8 18.5h8'/%3E%3C/svg%3E"); }
.klb-v2 #klb .kw-opt[data-ic="curtain"] { --oi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5h19'/%3E%3Cpath d='M5 4.5v15c1.3-.8 2.7-.8 4 0v-15M15 4.5v15c1.3-.8 2.7-.8 4 0v-15'/%3E%3C/svg%3E"); }
.klb-v2 #klb .kw-opt[data-ic="wardrobe"] { --oi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3.5' width='16' height='15.5' rx='1'/%3E%3Cpath d='M12 3.5V19M10 10v3M14 10v3'/%3E%3Cpath d='M6 19v1.5M18 19v1.5'/%3E%3C/svg%3E"); }
.klb-v2 #klb .kw-opt[data-ic="shutter"] { --oi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='4.5' rx='1'/%3E%3Cpath d='M5 8v12.5h14V8M5 11.5h14M5 15h14'/%3E%3C/svg%3E"); }
.klb-v2 #klb .kw-opt[data-ic="bulb"] { --oi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 18h5M10.5 21h3'/%3E%3Cpath d='M12 3a6 6 0 0 0-3.6 10.8c.7.5 1.1 1.3 1.1 2.1v.1h5v-.1c0-.8.4-1.6 1.1-2.1A6 6 0 0 0 12 3z'/%3E%3C/svg%3E"); }
.klb-v2 #klb .kw-opt[data-ic="socket"] { --oi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='4'/%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3Cpath d='M10.2 12h.01M13.8 12h.01' stroke-width='2.4'/%3E%3C/svg%3E"); }
.klb-v2 #klb .kw-opt[data-ic="phone"] { --oi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='2.5' width='10' height='19' rx='2.5'/%3E%3Cpath d='M11 18.5h2'/%3E%3C/svg%3E"); }
.klb-v2 #klb .kw-opt[data-ic="chat"] { --oi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v10.5h-9.5L6 19v-3.5H4z'/%3E%3Cpath d='M8.5 10.3h.01M12 10.3h.01M15.5 10.3h.01' stroke-width='2.4'/%3E%3C/svg%3E"); }
.klb-v2 #klb .kw-opt[data-ic="mail"] { --oi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2'/%3E%3Cpath d='M3.8 7l8.2 6 8.2-6'/%3E%3C/svg%3E"); }
/* IKONY-OPCJI:END */
/* pola liczbowe */
.klb-v2 #klb .kw-num { gap: 8px !important; }
.klb-v2 #klb .kw-nbtn { width: 36px !important; height: 36px !important; min-width: 36px !important; border-radius: 10px !important; border-color: rgba(255, 255, 255, .14) !important; background: rgba(255, 255, 255, .03) !important; font-size: 18px !important; font-weight: 500 !important; color: #ffffff !important; }
.klb-v2 #klb .kw-ninp { width: 72px !important; height: 36px !important; border-radius: 10px !important; font-size: 14px !important; font-weight: 700 !important; }
.klb-v2 #klb .kw-unit { font-size: 13px !important; color: #f1f3f7 !important; margin-left: 2px !important; }
/* "dodaj kolejne pomieszczenie": mały odnośnik pod kartą zamiast paska na całą szerokość */
.klb-v2 #klb .kadd-instance {
  display: block !important; width: auto !important; margin: 0 4px 0 auto !important; padding: 4px 2px !important;
  border: 0 !important; background: none !important;
  font-size: 12.5px !important; font-weight: 600 !important; color: #d4af37 !important; text-align: right !important;
}
.klb-v2 #klb .kadd-instance:hover { background: none !important; text-decoration: underline !important; text-underline-offset: 3px !important; }

/* ---------- kosztorys (panel po prawej) ---------- */
.klb-v2 #klb .kpbox { border-radius: 16px !important; border-color: rgba(212, 175, 55, .24) !important; background: #0e2444 !important; }
.klb-v2 #klb .kp-head { padding: 18px 20px 14px !important; }
.klb-v2 #klb .kp-title { font-size: 20px !important; font-weight: 800 !important; letter-spacing: -.02em !important; margin-bottom: 4px !important; }
.klb-v2 #klb .kp-sub { font-size: 12.5px !important; color: #b6becb !important; }
.klb-v2 #klb .kvat, .klb-v2 #klb .kfactor { padding: 14px 20px !important; }
.klb-v2 #klb .ksec-lbl, .klb-v2 #klb .kform-title, .klb-v2 #klb .kfsel-lbl { font-size: 10.5px !important; letter-spacing: .14em !important; color: #b6becb !important; margin-bottom: 9px !important; }
.klb-v2 #klb .kvat-opts { gap: 6px !important; }
.klb-v2 #klb .kvopt { padding: 9px 4px !important; border-radius: 10px !important; background: rgba(255, 255, 255, .03) !important; border-color: rgba(255, 255, 255, .1) !important; font-size: 13.5px !important; font-weight: 700 !important; color: #f1f3f7 !important; }
.klb-v2 #klb .kvopt small { font-size: 10px !important; margin-top: 4px !important; opacity: .8 !important; }
.klb-v2 #klb .kvopt.on { background: rgba(212, 175, 55, .13) !important; border-color: #d4af37 !important; color: #d4af37 !important; }
.klb-v2 #klb .kfac-grid { gap: 5px !important; }
.klb-v2 #klb .kfopt { height: 34px !important; min-height: 34px !important; max-height: 34px !important; padding: 0 12px !important; border-radius: 9px !important; background: rgba(255, 255, 255, .03) !important; border-color: rgba(255, 255, 255, .1) !important; font-size: 12.5px !important; color: #f1f3f7 !important; }
.klb-v2 #klb .kfopt strong { font-size: 13px !important; font-variant-numeric: tabular-nums !important; }
/* pozycje jako tabela: nazwa | ilość | kwota | usuń */
.klb-v2 #klb .ksel-list { max-height: 264px !important; padding: 6px 20px !important; }
/* nazwa pozycji w całości (do dwóch linii) zamiast ucinania wielokropkiem */
.klb-v2 #klb .ksel-row { display: grid !important; grid-template-columns: minmax(0, 1fr) 56px 60px 14px !important; gap: 8px !important; align-items: center !important; height: auto !important; min-height: 30px !important; max-height: none !important; padding: 6px 0 !important; overflow: visible !important; }
.klb-v2 #klb .ksel-name { font-size: 12.5px !important; color: #f1f3f7 !important; line-height: 1.3 !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
.klb-v2 #klb .ksel-qty { font-size: 12px !important; color: #b6becb !important; text-align: right !important; font-variant-numeric: tabular-nums !important; }
.klb-v2 #klb .ksel-price { font-size: 12.5px !important; font-weight: 700 !important; text-align: right !important; font-variant-numeric: tabular-nums !important; }
/* podział na pomieszczenia (między pozycjami a sumami): ikona, nazwa z metrażem, kwota netto */
.klb-v2 #klb .ksum-rooms:not(:empty) { display: block !important; padding: 14px 20px 8px !important; border-bottom: 1px solid rgba(255, 255, 255, .07) !important; }
.klb-v2 #klb .ksum-row { display: grid !important; grid-template-columns: 26px minmax(0, 1fr) auto !important; align-items: center !important; gap: 10px !important; min-height: 38px !important; border-top: 1px solid rgba(255, 255, 255, .05) !important; }
.klb-v2 #klb .ksec-lbl + .ksum-row { border-top: 0 !important; }
.klb-v2 #klb .ksum-row::before {
  content: '' !important; width: 26px; height: 26px; box-sizing: border-box; border-radius: 8px;
  border: 1px solid rgba(212, 175, 55, .25); background: rgba(212, 175, 55, .1) var(--m) center / 66% no-repeat;
}
.klb-v2 #klb .ksum-name { font-size: 13px !important; font-weight: 600 !important; color: #f1f3f7 !important; line-height: 1.3 !important; }
.klb-v2 #klb .ksum-val { font-size: 13.5px !important; font-weight: 700 !important; color: #ffffff !important; text-align: right !important; font-variant-numeric: tabular-nums !important; white-space: nowrap !important; }
.klb-v2 #klb .ktotals { padding: 14px 20px 16px !important; }
.klb-v2 #klb .ktrow { height: 26px !important; font-size: 13px !important; color: #f1f3f7 !important; }
.klb-v2 #klb .kt-val { font-weight: 700 !important; font-variant-numeric: tabular-nums !important; }
.klb-v2 #klb .ktrow.main { height: 50px !important; padding: 12px 0 0 !important; margin-top: 8px !important; border-top-color: rgba(212, 175, 55, .25) !important; }
.klb-v2 #klb .ktrow.main .kt-lbl { font-size: 13px !important; font-weight: 800 !important; letter-spacing: .14em !important; }
.klb-v2 #klb .ktrow.main .kt-val { font-size: 30px !important; font-weight: 800 !important; letter-spacing: -.02em !important; }
.klb-v2 #klb .kclear { font-size: 12px !important; padding-top: 10px !important; }
/* formularz zgłoszenia */
.klb-v2 #klb .kform { padding: 16px 20px 20px !important; }
.klb-v2 #klb .kform-row { gap: 8px !important; margin-bottom: 8px !important; }
.klb-v2 #klb .kfinp { height: 44px !important; padding: 0 14px !important; border-radius: 10px !important; background: rgba(255, 255, 255, .03) !important; border-color: rgba(255, 255, 255, .12) !important; font-size: 14px !important; }
.klb-v2 #klb .kfmsg { min-height: 78px !important; padding: 12px 14px !important; border-radius: 10px !important; background: rgba(255, 255, 255, .03) !important; border-color: rgba(255, 255, 255, .12) !important; font-size: 14px !important; line-height: 1.45 !important; margin-bottom: 12px !important; }
.klb-v2 #klb .kfinp:focus, .klb-v2 #klb .kfmsg:focus { border-color: #d4af37 !important; }
.klb-v2 #klb .kf-kontakt { grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; margin-bottom: 14px !important; }
.klb-v2 #klb .kf-kontakt .kw-opt { min-height: 36px !important; padding: 3px 8px !important; gap: 5px !important; justify-content: flex-start !important; }
.klb-v2 #klb .ksubmit { height: 48px !important; border-radius: 999px !important; font-size: 14px !important; font-weight: 800 !important; letter-spacing: .05em !important; }
/* "Wyślij bez wyceny" pod głównym przyciskiem: obrys zamiast wypełnienia, niższy */
.klb-v2 #klb .ksend-bez { height: 42px !important; margin-top: 10px !important; border-radius: 999px !important; font-size: 12.5px !important; font-weight: 800 !important; letter-spacing: .05em !important; }
.klb-v2 #klb .kconsent-note { text-align: left !important; font-size: 11.5px !important; line-height: 1.5 !important; color: #b6becb !important; margin-top: 12px !important; }

/* ---------- katalog usług i cennik pokojowy ----------
   Kategorie i grupy cennika wyglądają jak karty pomieszczeń w kreatorze: nazwa zwykłym pismem
   (w wersalikach kreski nad Ż, Ś, Ó były ucinane), liczba pozycji i strzałka w kwadracie, zamiast
   emoji złote ikony pomieszczeń. W katalogu każda usługa ma własny wiersz z pełną nazwą:
   nazwa | cena za jednostkę | ilość | objaśnienia (od 761 px, niżej układ z index.html). */
.klb-v2 #klb #kprice-tab .kcatalog > p { margin: 0 0 20px !important; font-size: 14px !important; line-height: 1.55 !important; color: #f1f3f7 !important; }
.klb-v2 #klb .ksearch {
  padding: 12px 14px 12px 44px !important; border-radius: 12px !important; font-size: 14px !important; border-color: rgba(255, 255, 255, .12) !important;
  background: rgba(255, 255, 255, .03) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b6becb' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.2-4.2'/%3E%3C/svg%3E") 15px center / 18px no-repeat !important;
}
/* filtry w karcie jak pomieszczenie w kreatorze: tło i ramka karty, wiersze oddzielone linią,
   etykieta po lewej pismem jak w kreatorze, kafelki w kolorach kafelków opcji */
.klb-v2 #klb .kfbox { margin: 0 0 12px !important; padding: 4px 16px !important; border: 1px solid rgba(255, 255, 255, .09) !important; border-radius: 16px !important; background: #0e2444 !important; }
.klb-v2 #klb .kfgroup { margin: 0 !important; padding: 14px 0 !important; border-bottom: 0 !important; }
.klb-v2 #klb .kfgroup + .kfgroup { border-top: 1px solid rgba(255, 255, 255, .06) !important; }
.klb-v2 #klb .kfgroup-lbl { font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: #ffffff !important; line-height: 1.35 !important; }
/* kafelki równej szerokości w kolumnach, nazwa najwyżej w dwóch liniach (prośba klienta).
   Najdłuższa nazwa ("Zabudowy i wykończenia glazurnicze") potrzebuje 148 px tekstu, stąd kafelek
   min. 168 px; obok panelu kosztorysu wychodzą 3 kolumny, na tablecie więcej. */
.klb-v2 #klb .kfilters { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)) !important; gap: 6px !important; }
.klb-v2 #klb .kfbtn {
  display: flex !important; align-items: center !important; gap: 7px !important; min-height: 36px !important;
  padding: 6px 10px !important; border-radius: 9px !important; white-space: normal !important; text-align: left !important; line-height: 1.25 !important;
  background: rgba(255, 255, 255, .03) !important; border-color: rgba(255, 255, 255, .1) !important;
  font-size: 12.5px !important; font-weight: 600 !important; color: #f1f3f7 !important;
}
.klb-v2 #klb .kfbtn:hover { border-color: rgba(212, 175, 55, .45) !important; color: #ffffff !important; }
.klb-v2 #klb .kfbtn.on { background: #d4af37 !important; border-color: #d4af37 !important; color: #0a1628 !important; }
/* filtr pomieszczeń: złota ikona pomieszczenia, na wybranym filtrze w kolorze napisu */
.klb-v2 #klb .kfbtn-ic { flex: 0 0 15px; width: 15px; height: 15px; font-size: 0 !important; background: #d4af37; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.klb-v2 #klb .kfbtn.on .kfbtn-ic { background: #0a1628; }
.klb-v2 #klb .kcat { margin-bottom: 8px !important; border-radius: 16px !important; border-color: rgba(255, 255, 255, .09) !important; background: #0e2444 !important; }
.klb-v2 #klb .kcat-hd { height: auto !important; min-height: 60px !important; max-height: none !important; padding: 12px 14px 12px 20px !important; gap: 12px !important; background: transparent !important; }
.klb-v2 #klb .kcat-lbl {
  display: flex !important; align-items: center !important; gap: 14px !important; min-width: 0 !important;
  font-size: 15.5px !important; font-weight: 700 !important; letter-spacing: -.01em !important; text-transform: none !important;
  color: #ffffff !important; line-height: 1.3 !important; white-space: normal !important; overflow: visible !important;
}
.klb-v2 #klb .kcat-cnt { margin-left: 0 !important; font-size: 12.5px !important; color: #b6becb !important; font-variant-numeric: tabular-nums !important; }
.klb-v2 #klb .kcat-cnt span { color: #d4af37 !important; font-weight: 700 !important; }
/* strzałka jak przy pomieszczeniach w kreatorze: liniowy szewron w kwadracie, po najechaniu złoty */
.klb-v2 #klb .kcat-arr {
  flex: 0 0 34px; width: 34px; height: 34px; box-sizing: border-box; margin-left: 4px !important;
  display: grid !important; place-items: center !important; font-size: 0 !important; color: #f1f3f7 !important;
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; background: rgba(255, 255, 255, .03);
  transition: transform .2s, background .2s, border-color .2s, color .2s !important;
}
.klb-v2 #klb .kcat-arr::before { content: ''; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
.klb-v2 #klb .kcat-hd:hover .kcat-arr { background: #d4af37; border-color: #d4af37; color: #0a1628 !important; }
/* ikona grupy w cenniku pokojowym, jak ikona pomieszczenia w kreatorze */
.klb-v2 #klb .kcat-ic { flex: 0 0 40px; width: 40px; height: 40px; box-sizing: border-box; font-size: 0 !important; border: 1px solid rgba(212, 175, 55, .25); border-radius: 12px; background: rgba(212, 175, 55, .1) var(--m) center / 60% no-repeat; }
.klb-v2 #klb .kcat-body { border-top: 1px solid rgba(255, 255, 255, .06) !important; }
/* wiersze usług: pełna nazwa zamiast ucinania wielokropkiem */
.klb-v2 #klb .krow { height: auto !important; min-height: 44px !important; max-height: none !important; border-top-color: rgba(255, 255, 255, .05) !important; }
.klb-v2 #klb .krow-name { font-size: 13.5px !important; color: #f1f3f7 !important; line-height: 1.35 !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
.klb-v2 #klb .krow.sel .krow-name { color: #ffffff !important; font-weight: 600 !important; }
.klb-v2 #klb .krow-price { font-size: 13.5px !important; }
.klb-v2 #klb .krow-unit { font-size: 11.5px !important; color: #b6becb !important; }
.klb-v2 #klb .kqbtn { width: 26px !important; height: 26px !important; min-width: 26px !important; border-radius: 8px !important; border-color: rgba(255, 255, 255, .14) !important; background: rgba(255, 255, 255, .03) !important; color: #ffffff !important; font-size: 16px !important; line-height: 1 !important; }
.klb-v2 #klb .kqbtn:hover { background: #d4af37 !important; border-color: #d4af37 !important; color: #0a1628 !important; }
.klb-v2 #klb .kqinp { width: 32px !important; font-size: 13.5px !important; font-weight: 700 !important; color: #b6becb !important; }
.klb-v2 #klb .krow.sel .kqinp { color: #ffffff !important; }
.klb-v2 #klb .kqunit { font-size: 11.5px !important; }
.klb-v2 #klb .krow-tip { width: 18px !important; min-width: 18px !important; height: 18px !important; font-size: 10.5px !important; }
/* "?" narysowany i wyśrodkowany w kółku: znak z czcionki stał krzywo (nierówne marginesy znaku
   i linia pisma zaokrąglana do piksela) */
.klb-v2 #klb .krow-tip:not(.krow-fx) { font-size: 0 !important; }
.klb-v2 #klb .krow-tip:not(.krow-fx)::before {
  content: ''; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.1 8.9a3 3 0 0 1 5.8 1c0 2-2.9 2.6-2.9 4'/%3E%3Cpath d='M12 17.7h.01'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.1 8.9a3 3 0 0 1 5.8 1c0 2-2.9 2.6-2.9 4'/%3E%3Cpath d='M12 17.7h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- układ na szerokim ekranie ---------- */
/* Nagłówek w jednym wierszu: tytuł po lewej, zakładki po prawej, żeby początek kalkulatora
   był niski. #klb staje się siatką dwóch kolumn; wszystko poza tytułem i zakładkami zajmuje
   obie kolumny. Dekoracje tła są pozycjonowane absolutnie, więc do siatki nie wchodzą. */
@media (min-width: 1101px) {
  .calc-shell.klb-v2 #klb {
    display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; column-gap: 32px !important; align-items: center !important;
    padding-top: 30px !important;
  }
  .klb-v2 #klb > *:not(.k-grid-bg):not(.k-tiles):not(.k-bars) { grid-column: 1 / -1 !important; margin-left: 0 !important; margin-right: 0 !important; min-width: 0 !important; }
  .klb-v2 #klb > .kh:not(.k-grid-bg):not(.k-tiles):not(.k-bars) { grid-column: 1 !important; text-align: left !important; margin-bottom: 24px !important; }
  .klb-v2 #klb > .ktabs:not(.k-grid-bg):not(.k-tiles):not(.k-bars) { grid-column: 2 !important; width: min(520px, 44vw) !important; margin: 0 0 24px !important; }
  .klb-v2 #klb .kh-eye { justify-content: flex-start !important; margin-bottom: 8px !important; }
  .klb-v2 #klb .kh-eye::after { display: none !important; }
  .calc-shell.klb-v2 #klb .kh h1 { text-align: left !important; font-size: clamp(26px, 2.4vw, 32px) !important; margin-bottom: 0 !important; }
  .klb-v2 #klb .kh p { text-align: left !important; margin-top: 6px !important; }
}
@media (min-width: 1101px) {
  .klb-v2 #klb .kwiz-panel, .klb-v2 #klb .kpanel { width: 384px !important; min-width: 384px !important; }
  .klb-v2 #klb .kform-row:first-of-type { flex-direction: row !important; }
  .klb-v2 #klb .kform-row:first-of-type .kfinp { flex: 1 1 0 !important; min-width: 0 !important; }
}
@media (min-width: 761px) {
  /* etykieta w stałej kolumnie, opcje zawsze od tej samej linii */
  .klb-v2 #klb .kw-row { display: grid !important; grid-template-columns: 168px minmax(0, 1fr) !important; gap: 8px 18px !important; align-items: center !important; padding: 11px 0 !important; }
  .klb-v2 #klb .kw-row.kw-row-elec { display: grid !important; }
  .klb-v2 #klb .kw-lbl { width: auto !important; flex: none !important; }
  .klb-v2 #klb .kfgroup { gap: 14px !important; }
  /* etykieta na wysokości pierwszego rzędu kafelków */
  .klb-v2 #klb .kfgroup-lbl { flex: 0 0 120px !important; width: 120px !important; padding-top: 8px !important; }
  .klb-v2 #klb .krow { padding: 6px 16px !important; gap: 12px !important; }
  .klb-v2 #klb .krow-pu { width: 84px !important; min-width: 84px !important; }
  /* katalog: jedna usługa w wierszu, kolumny nazwa | cena | ilość | objaśnienia (ƒ i ?) */
  .klb-v2 #klb #kcat-tab .kcat-body { grid-template-columns: 1fr !important; }
  .klb-v2 #klb #kcat-tab .krow { display: grid !important; grid-template-columns: minmax(0, 1fr) 92px auto 44px !important; column-gap: 14px !important; border-right: 0 !important; }
  .klb-v2 #klb #kcat-tab .krow > * { grid-row: 1 !important; }
  .klb-v2 #klb #kcat-tab .krow-name { grid-column: 1 !important; }
  .klb-v2 #klb #kcat-tab .krow-pu { grid-column: 2 !important; width: auto !important; min-width: 0 !important; justify-content: flex-end !important; }
  .klb-v2 #klb #kcat-tab .krow-qty { grid-column: 3 !important; }
  .klb-v2 #klb #kcat-tab .krow-fx { grid-column: 4 !important; justify-self: start !important; }
  .klb-v2 #klb #kcat-tab .krow-tip:not(.krow-fx) { grid-column: 4 !important; justify-self: end !important; }
}
/* do 1100 px kosztorys stoi pod listą: lista i katalog na całą szerokość (w układzie z index.html
   kurczyły się do szerokości treści, np. katalog do ok. 460 px przy ekranie 900 px) */
@media (max-width: 1100px) {
  .klb-v2 #klb .kcatalog, .klb-v2 #klb .kwiz-form { align-self: stretch !important; }
}
/* ---------- telefon ---------- */
@media (max-width: 760px) {
  .klb-v2 #klb .ktabs { margin: 16px auto 18px !important; padding: 4px !important; gap: 3px !important; }
  .klb-v2 #klb .ktab { padding: 10px 4px !important; font-size: 12px !important; line-height: 1.2 !important; }
  .klb-v2 #klb .kroom-hd { padding: 13px 14px !important; }
  .klb-v2 #klb .kroom-icon { width: 34px !important; height: 34px !important; font-size: 16px !important; border-radius: 10px !important; }
  .klb-v2 #klb .kroom-title { font-size: 15.5px !important; }
  .klb-v2 #klb .kroom-sub { font-size: 11.5px !important; }
  .klb-v2 #klb .kroom-body { padding: 2px 14px 14px !important; }
  /* filtry w dwóch równych kolumnach (najdłuższa nazwa zajmuje tu 3 linie, reszta najwyżej 2) */
  .klb-v2 #klb .kfbox { padding: 2px 14px !important; }
  .klb-v2 #klb .kfgroup { padding: 12px 0 !important; gap: 9px !important; }
  .klb-v2 #klb .kfilters { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .klb-v2 #klb .kfbtn { padding: 6px 10px !important; font-size: 12px !important; }
  /* katalog: cena z jednostką w stałej kolumnie (mieści np. "545 zł obwód"), żeby przyciski ilości stały równo */
  .klb-v2 #klb .krow-pu { width: 94px !important; min-width: 94px !important; }
  /* nagłówek dodanego pomieszczenia w dwóch wierszach: nazwa, a pod nią "Uwzględnij", kosz
     i strzałka po prawej (w jednym wierszu na nazwę zostałoby ok. 50 px); belka z plusem w jednym */
  .klb-v2 #klb .kroom-title { white-space: normal !important; }
  .klb-v2 #klb .kroom:not(.off) .kroom-hd { flex-wrap: wrap !important; row-gap: 10px !important; }
  .klb-v2 #klb .kroom:not(.off) .kroom-hd-r { width: 100% !important; justify-content: flex-end !important; }
  .klb-v2 #klb .kw-row { padding: 12px 0 !important; gap: 9px !important; }
  .klb-v2 #klb .kw-choices { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; }
  /* węższe kafelki: mniejsze odstępy, kwadrat i ikona, żeby najdłuższe słowo mieściło się w linii */
  .klb-v2 #klb .kw-opt { min-height: 36px !important; padding: 3px 6px !important; gap: 4px !important; font-size: 12px !important; }
  .klb-v2 #klb .kw-opt::before { flex-basis: 12px !important; width: 12px !important; height: 12px !important; }
  .klb-v2 #klb .kw-opt[data-ic]::after { flex-basis: 14px; width: 14px; height: 14px; }
  /* sposób kontaktu: kolumny według długości nazw, żeby "Telefon" nie łamał się w środku */
  .klb-v2 #klb .kf-kontakt { grid-template-columns: repeat(3, auto) !important; }
  .klb-v2 #klb .kf-kontakt .kw-opt { padding: 6px 6px !important; gap: 4px !important; }
  .klb-v2 #klb .kadd-instance { margin-right: 2px !important; }
  .klb-v2 #klb .ktrow.main .kt-val { font-size: 26px !important; }
}

/* najwęższe telefony (np. 360 px): kafelek ma ok. 129 px, więc bez ikony, żeby słowa takie jak
   "podumywalkowa" czy "mrozoodporne" mieściły się w linii */
@media (max-width: 380px) {
  .klb-v2 #klb .kw-opt[data-ic]::after { display: none !important; }
}