{"id":9726,"date":"2026-11-10T12:59:53","date_gmt":"2026-11-10T12:59:53","guid":{"rendered":"https:\/\/bihome.pl\/kalkulator-swiatla\/"},"modified":"2026-11-10T12:59:53","modified_gmt":"2026-11-10T12:59:53","slug":"kalkulator-swiatla","status":"publish","type":"page","link":"https:\/\/bihome.pl\/en\/kalkulator-swiatla\/","title":{"rendered":"Kalkulator \u015bwiat\u0142a i wysoko\u015bci lampy"},"content":{"rendered":"<div id=\"bkl\" class=\"bkl\" data-src=\"https:\/\/bihome.pl\/wp-content\/uploads\/bihome-tools\/lampy.json?v=1794315558\">\n<style>\n.bkl { font-family: Outfit, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif; max-width: 1100px; margin: 0 auto; color: #1e293b; }\n.bkl * { box-sizing: border-box; }\n\n\/* Panel kontrolny *\/\n.bkl-controls-card {\n  background: #ffffff;\n  border: 1px solid #e2e8f0;\n  border-radius: 14px;\n  padding: 22px;\n  box-shadow: 0 4px 16px rgba(0,0,0,0.03);\n  margin-bottom: 22px;\n}\n.bkl-ctrl-title {\n  font-size: 15px;\n  font-weight: 700;\n  color: #1e293b;\n  margin: 0 0 14px 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.bkl-ctrl-title svg { color: #cc685c; }\n\n.bkl-room-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }\n.bkl-room-pill {\n  border: 1px solid #cbd5e1;\n  background: #f8fafc;\n  border-radius: 20px;\n  padding: 6px 14px;\n  font-size: 13px;\n  font-weight: 500;\n  color: #334155;\n  cursor: pointer;\n  transition: all .2s ease;\n}\n.bkl-room-pill:hover { border-color: #cc685c; color: #cc685c; }\n.bkl-room-pill.active { background: #cc685c; color: #ffffff; border-color: #cc685c; font-weight: 600; }\n\n.bkl-grid-2 {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));\n  gap: 16px;\n  padding: 14px;\n  background: #fbfaf9;\n  border-radius: 8px;\n  border: 1px solid #f7f6f4;\n  margin-bottom: 16px;\n}\n.bkl-field label {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  font-size: 12px;\n  font-weight: 600;\n  color: #334155;\n  margin-bottom: 4px;\n}\n.bkl-field .val-badge {\n  font-size: 11px;\n  font-weight: 700;\n  color: #cc685c;\n  background: #ffffff;\n  padding: 1px 7px;\n  border: 1px solid #f7f6f4;\n  border-radius: 5px;\n}\n.bkl-slider { width: 100%; accent-color: #cc685c; cursor: pointer; margin: 3px 0 2px; }\n.bkl-subinfo { display: flex; justify-content: space-between; font-size: 10px; color: #94a3b8; }\n\n.bkl-zones-wrap { margin-top: 12px; }\n.bkl-zones-title { font-size: 12px; font-weight: 600; color: #475569; margin-bottom: 8px; }\n.bkl-zone-toggles { display: flex; flex-wrap: wrap; gap: 8px; }\n.bkl-zone-btn {\n  border: 1px dashed #cbd5e1;\n  background: #fff;\n  border-radius: 6px;\n  padding: 6px 12px;\n  font-size: 12px;\n  font-weight: 500;\n  color: #475569;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  transition: all .2s;\n}\n.bkl-zone-btn.active { border-style: solid; border-color: #cc685c; background: #fbf1ef; color: #cc685c; font-weight: 600; }\n.bkl-zone-details {\n  background: #ffffff;\n  border: 1px solid #f7f6f4;\n  border-radius: 8px;\n  padding: 12px 14px;\n  margin-top: 10px;\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n  gap: 14px;\n}\n\n\/* Pasek KPI \u2014 wyraziste kafelki wynikowe: navy + koral (F5b v2) *\/\n.bkl-kpi-bar {\n  display: grid;\n  grid-template-columns: repeat(5, minmax(0, 1fr));\n  gap: 12px;\n  margin-bottom: 16px;\n}\n.bkl-kpi-card {\n  position: relative;\n  background: #1e293b;\n  border: 1px solid #334155;\n  border-radius: 12px;\n  padding: 16px 16px 14px;\n  min-height: 124px;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  overflow: hidden;\n  box-shadow: 0 8px 20px rgba(15,23,42,0.10);\n}\n.bkl-kpi-card::before {\n  content: \"\";\n  position: absolute;\n  top: 0; left: 0; right: 0;\n  height: 3px;\n  background: #cc685c;\n}\n.bkl-kpi-label {\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.07em;\n  text-transform: uppercase;\n  color: #94a3b8;\n  line-height: 1.25;\n  margin: 0 0 10px 0;\n}\n.bkl-kpi-metric {\n  font-size: clamp(18px, 1.8vw, 25px);\n  white-space: nowrap;\n  font-weight: 800;\n  color: #ffffff;\n  line-height: 1.05;\n  letter-spacing: -0.015em;\n  font-variant-numeric: tabular-nums;\n  margin: auto 0 7px 0;\n}\n.bkl-kpi-desc {\n  font-size: 12px;\n  color: #b6c2d2;\n  line-height: 1.3;\n  margin: 0;\n}\n.bkl-kpi-card--total {\n  background: #cc685c;\n  border-color: #b55347;\n  box-shadow: 0 8px 22px rgba(204,104,92,0.26);\n}\n.bkl-kpi-card--total::before { background: #ffffff; opacity: 0.45; }\n.bkl-kpi-card--total .bkl-kpi-label { color: rgba(255,255,255,0.85); }\n.bkl-kpi-card--total .bkl-kpi-desc { color: rgba(255,255,255,0.92); }\n\n\/* Sticky pasek podsumowania \u2014 widoczny przy przegl\u0105daniu lamp *\/\n.bkl-sticky {\n  position: fixed;\n  left: 0; right: 0; bottom: 0;\n  z-index: 9990;\n  background: #1e293b;\n  border-top: 3px solid #cc685c;\n  box-shadow: 0 -10px 28px rgba(15,23,42,0.24);\n  transform: translateY(110%);\n  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);\n  padding-bottom: env(safe-area-inset-bottom, 0px);\n}\n.bkl-sticky.is-on { transform: translateY(0); }\n.bkl-sticky-in {\n  max-width: 1100px;\n  margin: 0 auto;\n  padding: 10px 16px;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n.bkl-st-metrics {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  flex: 1 1 auto;\n  min-width: 0;\n  overflow-x: auto;\n  scrollbar-width: none;\n}\n.bkl-st-metrics::-webkit-scrollbar { display: none; }\n.bkl-st-item {\n  display: flex;\n  align-items: baseline;\n  gap: 6px;\n  white-space: nowrap;\n  padding-right: 14px;\n  border-right: 1px solid #3b4a61;\n  flex: 0 0 auto;\n}\n.bkl-st-item:last-child { border-right: 0; padding-right: 0; }\n.bkl-st-label {\n  font-size: 10px;\n  font-weight: 700;\n  letter-spacing: 0.07em;\n  text-transform: uppercase;\n  color: #94a3b8;\n}\n.bkl-st-val {\n  font-size: 15px;\n  font-weight: 800;\n  color: #ffffff;\n  font-variant-numeric: tabular-nums;\n}\n.bkl-st-item--total .bkl-st-val { color: #f7b8ad; }\n.bkl-st-actions { display: flex; gap: 8px; flex: 0 0 auto; }\n.bkl-lbl-short { display: none; }\n.bkl-st-btn {\n  border-radius: 8px;\n  font-size: 13px;\n  font-weight: 700;\n  padding: 9px 14px;\n  min-height: 38px;\n  cursor: pointer;\n  white-space: nowrap;\n  transition: background 0.2s, border-color 0.2s, color 0.2s;\n}\n.bkl-st-btn--ghost { background: transparent; border: 1px solid #64748b; color: #e2e8f0; }\n.bkl-st-btn--ghost:hover { border-color: #cc685c; color: #ffffff; }\n.bkl-st-btn--solid { background: #cc685c; border: 1px solid #cc685c; color: #ffffff; }\n.bkl-st-btn--solid:hover { background: #b55347; border-color: #b55347; }\n.bkl-stick-spacer { height: 0; transition: height 0.28s ease; }\n.bkl-stick-spacer.is-on { height: 76px; }\n\/* Asystent Bibi nie mo\u017ce zas\u0142ania\u0107 przycisk\u00f3w paska \u2014 unosi si\u0119 nad nim *\/\nbody.bkl-bar-on .bihome-assistant-container {\n  bottom: 122px;\n  transition: opacity 0.5s ease, transform 0.5s ease, bottom 0.28s cubic-bezier(0.4, 0, 0.2, 1);\n}\n@media (max-width: 900px) {\n  .bkl-kpi-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n  .bkl-kpi-card { min-height: 108px; padding: 14px 14px 12px; }\n  .bkl-kpi-metric { font-size: 24px; }\n}\n@media (max-width: 780px) {\n  .bkl-st-label { display: none; }\n  .bkl-st-val { font-size: 14px; }\n  .bkl-st-item { padding-right: 10px; }\n  .bkl-st-metrics { gap: 10px; }\n  .bkl-sticky-in { gap: 8px; padding: 9px 12px; }\n  .bkl-st-btn { padding: 8px 10px; font-size: 12px; min-height: 36px; }\n  .bkl-stick-spacer.is-on { height: 70px; }\n  body.bkl-bar-on .bihome-assistant-container { bottom: 104px; }\n}\n@media (max-width: 560px) {\n  \/* Na telefonie wszystkie trzy metryki musz\u0105 by\u0107 widoczne bez przewijania paska *\/\n  .bkl-st-metrics { gap: 8px; min-width: 0; }\n  .bkl-st-item { padding-right: 8px; }\n  .bkl-st-val { font-size: 13px; }\n  .bkl-st-btn { padding: 7px 9px; font-size: 12px; }\n  .bkl-lbl-full { display: none; }\n  .bkl-lbl-short { display: inline; }\n}\n@media (max-width: 420px) {\n  .bkl-kpi-bar { grid-template-columns: 1fr; }\n  .bkl-kpi-card { min-height: 0; }\n}\n\n.bkl-sec-title {\n  display: flex;\n  justify-content: space-between;\n  align-items: baseline;\n  margin: 0 0 14px 0;\n  font-size: 16px;\n  font-weight: 700;\n  color: #1e293b;\n}\n.bkl-sec-sub { font-size: 12px; font-weight: normal; color: #64748b; }\n\n\/* ===== KARTA LAMPY \u2014 wsp\u00f3lny szkielet (F5b, 2026-11-08) =====\n   UWAGA: ten blok ma bli\u017aniaczy odpowiednik w bihome-tool-kalkulator-swiatla.php\n   (klasy .bkl-*). Ka\u017cd\u0105 zmian\u0119 wprowadzaj w OBU plikach \u2014 inaczej karty si\u0119 rozjad\u0105.\n   Zasady: packshot 1:1 (max 220px) wy\u015brodkowany, karta flex-column 100% wysoko\u015bci,\n   tre\u015b\u0107 flex:1, przyciski margin-top:auto, dolny padding 16px. *\/\n.bkl-lamps-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));\n  gap: 18px;\n  align-items: stretch;\n}\n\n.bkl-lamp-card {\n  background: #ffffff;\n  border: 1px solid #e2e8f0;\n  border-radius: 12px;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  transition: transform .2s ease, box-shadow .2s ease;\n  box-shadow: 0 2px 8px rgba(0,0,0,0.02);\n}\n.bkl-lamp-card:hover {\n  transform: translateY(-3px);\n  box-shadow: 0 10px 24px rgba(12, 64, 105, 0.08);\n}\n.bkl-lamp-img-wrap {\n  flex: 0 0 auto;\n  width: 100%;\n  aspect-ratio: 1 \/ 1;\n  max-height: 220px;\n  background: #faf9f6;\n  padding: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-bottom: 1px solid #f1f5f9;\n}\n.bkl-lamp-img-wrap img {\n  display: block;\n  width: 100%;\n  height: 100%;\n  max-height: 100%;\n  object-fit: contain;\n  object-position: center;\n  mix-blend-mode: normal !important;\n  border-radius: 8px;\n  transition: transform .25s ease;\n}\n.bkl-lamp-card:hover .bkl-lamp-img-wrap img { transform: scale(1.04); }\n\n.bkl-lamp-body {\n  flex: 1 1 auto;\n  min-height: 0;\n  padding: 14px 16px 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.bkl-lamp-brand {\n  display: inline-flex;\n  align-items: center;\n  align-self: flex-start;\n  height: 18px;\n  font-size: 11px;\n  line-height: 18px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: #cc685c;\n  background: #fbf1ef;\n  padding: 0 6px;\n  border-radius: 4px;\n  white-space: nowrap;\n}\n.bkl-lamp-name {\n  font-size: 13px;\n  font-weight: 600;\n  color: #1e293b;\n  margin: 0;\n  line-height: 18px;\n  min-height: 36px;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n.bkl-lamp-specs {\n  font-size: 11px;\n  color: #64748b;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin: 0;\n  line-height: 16px;\n}\n.bkl-lamp-why {\n  font-size: 11px;\n  color: #166534;\n  background: #f0fdf4;\n  border-radius: 4px;\n  padding: 2px 6px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  line-height: 16px;\n}\n.bkl-lamp-actions {\n  margin-top: auto;\n  display: grid;\n  grid-template-columns: 1fr auto;\n  gap: 8px;\n  padding-top: 10px;\n  border-top: 1px solid #f1f5f9;\n}\n.bkl-btn-act,\n.bkl-btn-cmp {\n  min-height: 34px;\n  font-size: 12px;\n  font-weight: 600;\n  border-radius: 6px;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background .2s, border-color .2s, color .2s;\n}\n.bkl-btn-act {\n  background: #cc685c;\n  color: #fff !important;\n}\n.bkl-btn-act:hover { background: #b55347; text-decoration: none; }\n.bkl-btn-cmp {\n  background: #fff;\n  border: 1px solid #cbd5e1;\n  color: #475569 !important;\n  padding: 0 10px;\n}\n.bkl-btn-cmp:hover { border-color: #cc685c; color: #cc685c !important; text-decoration: none; }\n\/* F5b polish (audyt UX) *\/\n.bkl-subinfo { font-size: 11px; }\n.bkl-slider { height: 28px; }\n.bkl-room-pill, .bkl-zone-btn { min-height: 36px; }\n.bkl-room-pill:focus-visible, .bkl-zone-btn:focus-visible, .bkl-slider:focus-visible { outline: 2px solid #cc685c; outline-offset: 2px; }\n.bkl-lamp-specs, .bkl-lamp-why { font-size: 12px; line-height: 18px; }\n@media (max-width: 520px) {\n  .bkl-lamps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }\n  .bkl-lamp-body { padding: 12px 12px 16px; gap: 6px; }\n  .bkl-lamp-actions { grid-template-columns: 1fr; gap: 6px; }\n  .bkl-controls-card { padding: 16px; }\n  .bkl-sec-title { flex-direction: column; gap: 2px; }\n}\n<\/style>\n\n<div class=\"bkl-controls-card\">\n  <div class=\"bkl-ctrl-title\">\n    <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"5\"\/><path d=\"M12 1v2m0 18v2M4.22 4.22l1.42 1.42m12.72 12.72l1.42 1.42M1 12h2m18 0h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42\"\/><\/svg>\n    Wybierz przeznaczenie wn\u0119trza\n  <\/div>\n\n  <div class=\"bkl-room-pills\" id=\"bkl-room-pills\">\n    <button type=\"button\" class=\"bkl-room-pill active\" data-lux=\"150\" data-room=\"salon\">Salon (150 lx)<\/button>\n    <button type=\"button\" class=\"bkl-room-pill\" data-lux=\"200\" data-room=\"jadalnia\">Jadalnia (200 lx)<\/button>\n    <button type=\"button\" class=\"bkl-room-pill\" data-lux=\"300\" data-room=\"kuchnia\">Kuchnia (300 lx)<\/button>\n    <button type=\"button\" class=\"bkl-room-pill\" data-lux=\"100\" data-room=\"sypialnia\">Sypialnia (100 lx)<\/button>\n    <button type=\"button\" class=\"bkl-room-pill\" data-lux=\"400\" data-room=\"biuro\">Biuro \/ pracownia (400 lx)<\/button>\n    <button type=\"button\" class=\"bkl-room-pill\" data-lux=\"200\" data-room=\"lazienka\">\u0141azienka (200 lx)<\/button>\n  <\/div>\n  <input type=\"hidden\" id=\"bkl-lux\" value=\"150\">\n  <input type=\"hidden\" id=\"bkl-room\" value=\"salon\">\n\n  <div class=\"bkl-grid-2\">\n    <div class=\"bkl-field\">\n      <label for=\"bkl-m2\">Powierzchnia: <span class=\"val-badge\" id=\"bkl-m2o\">20 m\u00b2<\/span><\/label>\n      <input type=\"range\" id=\"bkl-m2\" class=\"bkl-slider\" min=\"4\" max=\"70\" step=\"1\" value=\"20\">\n      <div class=\"bkl-subinfo\"><span>4 m\u00b2<\/span><span>70 m\u00b2<\/span><\/div>\n    <\/div>\n    <div class=\"bkl-field\">\n      <label for=\"bkl-h\">Wysoko\u015b\u0107 sufitu: <span class=\"val-badge\" id=\"bkl-ho\">250 cm<\/span><\/label>\n      <input type=\"range\" id=\"bkl-h\" class=\"bkl-slider\" min=\"220\" max=\"420\" step=\"5\" value=\"250\">\n      <div class=\"bkl-subinfo\"><span>220 cm<\/span><span>420 cm<\/span><\/div>\n    <\/div>\n    <div class=\"bkl-field\">\n      <label for=\"bkl-ref\">Odbicie \u015bcian: <span class=\"val-badge\" id=\"bkl-refo\">Standardowe<\/span><\/label>\n      <select id=\"bkl-ref\" style=\"width:100%; padding:6px 8px; border:1px solid #cbd5e1; border-radius:6px; font-size:12px; margin-top:2px;\">\n        <option value=\"1\">Jasne \u015bciany (standard)<\/option>\n        <option value=\"1.25\">Ciemne \u015bciany (+25% lumen\u00f3w)<\/option>\n      <\/select>\n    <\/div>\n  <\/div>\n\n  <div class=\"bkl-zones-wrap\">\n    <div class=\"bkl-zones-title\">Strefy dedykowane (opcjonalne):<\/div>\n    <div class=\"bkl-zone-toggles\">\n      <button type=\"button\" class=\"bkl-zone-btn active\" id=\"btn-zt\">\u2713 St\u00f3\u0142 jadalniany<\/button>\n      <button type=\"button\" class=\"bkl-zone-btn\" id=\"btn-zw\">+ Wyspa kuchenna<\/button>\n      <button type=\"button\" class=\"bkl-zone-btn\" id=\"btn-zb\">+ Blat roboczy<\/button>\n    <\/div>\n\n    <div class=\"bkl-zone-details\" id=\"panel-zt\">\n      <div class=\"bkl-field\">\n        <label>D\u0142ugo\u015b\u0107 sto\u0142u: <span class=\"val-badge\" id=\"bkl-tlo\">180 cm<\/span><\/label>\n        <input type=\"range\" id=\"bkl-tl\" class=\"bkl-slider\" min=\"80\" max=\"320\" step=\"10\" value=\"180\">\n      <\/div>\n      <div class=\"bkl-field\">\n        <label>Szeroko\u015b\u0107 sto\u0142u: <span class=\"val-badge\" id=\"bkl-two\">90 cm<\/span><\/label>\n        <input type=\"range\" id=\"bkl-tw\" class=\"bkl-slider\" min=\"60\" max=\"130\" step=\"5\" value=\"90\">\n      <\/div>\n    <\/div>\n\n    <div class=\"bkl-zone-details\" id=\"panel-zw\" style=\"display:none;\">\n      <div class=\"bkl-field\">\n        <label>D\u0142ugo\u015b\u0107 wyspy: <span class=\"val-badge\" id=\"bkl-wlo\">220 cm<\/span><\/label>\n        <input type=\"range\" id=\"bkl-wl\" class=\"bkl-slider\" min=\"100\" max=\"360\" step=\"10\" value=\"220\">\n      <\/div>\n      <div class=\"bkl-field\">\n        <label>Szeroko\u015b\u0107 wyspy: <span class=\"val-badge\" id=\"bkl-wwo\">90 cm<\/span><\/label>\n        <input type=\"range\" id=\"bkl-ww\" class=\"bkl-slider\" min=\"60\" max=\"140\" step=\"5\" value=\"90\">\n      <\/div>\n    <\/div>\n\n    <div class=\"bkl-zone-details\" id=\"panel-zb\" style=\"display:none;\">\n      <div class=\"bkl-field\">\n        <label>D\u0142ugo\u015b\u0107 blatu: <span class=\"val-badge\" id=\"bkl-blo\">240 cm<\/span><\/label>\n        <input type=\"range\" id=\"bkl-bl\" class=\"bkl-slider\" min=\"100\" max=\"400\" step=\"20\" value=\"240\">\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<div class=\"bkl-kpi-bar\" id=\"bkl-kpis\">\n  <div class=\"bkl-kpi-card\">\n    <div class=\"bkl-kpi-label\">\u015awiat\u0142o og\u00f3lne<\/div>\n    <div class=\"bkl-kpi-metric\" id=\"kpi-gen-lm\">3 000 lm<\/div>\n    <div class=\"bkl-kpi-desc\" id=\"kpi-gen-desc\">Dla 20 m\u00b2 przy normie 150 lx<\/div>\n  <\/div>\n  <div class=\"bkl-kpi-card\">\n    <div class=\"bkl-kpi-label\" id=\"kpi-zone-label\">Strefa: St\u00f3\u0142 jadalny<\/div>\n    <div class=\"bkl-kpi-metric\" id=\"kpi-zone-lm\">1 200 lm<\/div>\n    <div class=\"bkl-kpi-desc\" id=\"kpi-zone-desc\">Dodatkowe \u015bwiat\u0142o nad sto\u0142em<\/div>\n  <\/div>\n  <div class=\"bkl-kpi-card\">\n    <div class=\"bkl-kpi-label\">Optymalny klosz<\/div>\n    <div class=\"bkl-kpi-metric\" id=\"kpi-dia\">39\u201365 cm<\/div>\n    <div class=\"bkl-kpi-desc\" id=\"kpi-dia-desc\">1 du\u017ca lub 2 mniejsze oprawy<\/div>\n  <\/div>\n  <div class=\"bkl-kpi-card\">\n    <div class=\"bkl-kpi-label\">Wysoko\u015b\u0107 zawieszenia<\/div>\n    <div class=\"bkl-kpi-metric\" id=\"kpi-hang\">75\u201385 cm<\/div>\n    <div class=\"bkl-kpi-desc\" id=\"kpi-hang-desc\">nad blatem sto\u0142u jadalnianego<\/div>\n  <\/div>\n  <div class=\"bkl-kpi-card bkl-kpi-card--total\">\n    <div class=\"bkl-kpi-label\">Suma w pomieszczeniu<\/div>\n    <div class=\"bkl-kpi-metric\" id=\"kpi-tot-lm\">4 200 lm<\/div>\n    <div class=\"bkl-kpi-desc\" id=\"kpi-tot-desc\">\u015awiat\u0142o warstwowe na osobnych obwodach<\/div>\n  <\/div>\n<\/div>\n\n<div class=\"bkl-sec-title\">\n  <span>Rekomendowane oprawy o\u015bwietleniowe<\/span>\n  <span class=\"bkl-sec-sub\" id=\"bkl-rec-sub\">Dopasowane do obliczonych lumen\u00f3w i kubatury<\/span>\n<\/div>\n\n<div class=\"bkl-lamps-grid\" id=\"bkl-lamps-out\">\n  <!-- Karty wstrzykiwane przez JS -->\n<\/div>\n\n<script>\n(function(){\n  var R = document.getElementById('bkl');\n  var L = [];\n  var state = { zt: true, zw: false, zb: false };\n\n  function $(id){ return document.getElementById(id); }\n  function esc(s){ return String(s==null?'':s).replace(\/[&<>\"]\/g, function(c){return{'&':'&amp;','<':'&lt;','>':'&gt;','\"':'&quot;'}[c]}); }\n  function nf(n){ return Math.round(n).toLocaleString('pl-PL'); }\n\n  function calc(){\n    var lux = +$('bkl-lux').value;\n    var m2 = +$('bkl-m2').value;\n    var h = +$('bkl-h').value;\n    var ref = +$('bkl-ref').value;\n    var tl = +$('bkl-tl').value;\n    var tw = +$('bkl-tw').value;\n    var wl = +$('bkl-wl').value;\n    var ww = +$('bkl-ww').value;\n    var bl = +$('bkl-bl').value;\n\n    $('bkl-m2o').textContent = m2 + ' m\u00b2';\n    $('bkl-ho').textContent = h + ' cm';\n    $('bkl-tlo').textContent = tl + ' cm';\n    $('bkl-two').textContent = tw + ' cm';\n    $('bkl-wlo').textContent = wl + ' cm';\n    $('bkl-wwo').textContent = ww + ' cm';\n    $('bkl-blo').textContent = bl + ' cm';\n\n    var genLm = Math.round(m2 * lux * ref);\n    var totLm = genLm;\n\n    $('kpi-gen-lm').textContent = nf(genLm) + ' lm';\n    $('kpi-gen-desc').textContent = 'Dla ' + m2 + ' m\u00b2 przy ' + lux + ' lx' + (ref > 1 ? ' (+25%)' : '');\n\n    \/\/ ==== Dynamiczny wz\u00f3r kubaturowy \u015brednicy klosza (eliminacja hardcoded \"40\u201355\") ====\n    \/\/ Boki planu przybli\u017cone kwadratem (input zbiera tylko powierzchni\u0119): szer. = d\u0142. = \u221am\u00b2.\n    var side = Math.sqrt(m2);\n    var dMid = Math.round(side * 2 * 5);         \/\/ D = \u221am\u00b2 \u00b7 2 \u00b7 5  \u2192  4m\u00b2:20 \u00b7 16m\u00b2:40 \u00b7 20m\u00b2:45 \u00b7 70m\u00b2:84 cm\n    var dLo  = Math.max(20, Math.round(dMid * 0.9 \/ 5) * 5);\n    var dHi  = Math.max(dLo + 5, Math.round(dMid * 1.1 \/ 5) * 5);\n    var bigSpace = (m2 > 30);\n\n    var zoneLm = 0;\n    var zoneLabel = 'Brak strefy';\n    var zoneDesc = 'W\u0142\u0105cz stref\u0119 robocz\u0105 powy\u017cej';\n\n    var diaText, diaDesc;\n    if (dMid >= 80) {\n      diaText = '80\u2013100 cm';\n      diaDesc = 'Zalecany min. gabaryt lub kompozycja 2\u20133 opraw';\n    } else if (bigSpace) {\n      diaText = dLo + '\u2013' + dHi + ' cm';\n      diaDesc = 'rozwa\u017c kompozycj\u0119 2 opraw \/ szynoprzew\u00f3d';\n    } else {\n      diaText = dLo + '\u2013' + dHi + ' cm';\n      diaDesc = (dHi >= 40 ? '1 du\u017ca lub 2 mniejsze oprawy' : '1 oprawa centralna');\n    }\n\n    \/\/ ==== Wysoko\u015b\u0107 zawieszenia oprawy OG\u00d3LNEJ (strefa sto\u0142u wy\u0142\u0105czona) ====\n    \/\/ Dolna kraw\u0119d\u017a oprawy 210\u2013220 cm nad pod\u0142og\u0105; zwis = h \u2212 215 \u2212 (0..15 cm korpusu).\n    var bot = Math.min(h, 215);\n    bot = Math.max(210, bot);\n    var dropHi = Math.max(0, h - bot);\n    var dropLo = Math.max(0, dropHi - 15);\n    var hangText = bot + ' cm';\n    var hangDesc = (h >= 230)\n      ? 'od pod\u0142ogi \u00b7 zwis\/przew\u00f3d ok. ' + dropLo + '\u2013' + dropHi + ' cm'\n      : 'przy suficie \u00b7 zwis ok. ' + dropLo + '\u2013' + dropHi + ' cm';\n\n    \/\/ ==== Strefy dedykowane (multiselect: st\u00f3\u0142 \/ wyspa \/ blat roboczy) ====\n    var ztLm = 0, zwLm = 0, zbLm = 0;\n    var n, maxD, minD, nw, maxDw;\n\n    if (state.zt) {\n      var tableArea = (tl \/ 100) * (tw \/ 100);\n      ztLm = Math.round(Math.max(800, tableArea * 300 * 2.5));\n      n = tl > 200 ? 2 : 1;\n      maxD = Math.round(Math.min(tw - 25, tl \/ (n + 0.5)));\n      minD = Math.round(maxD * 0.6);\n      hangText = '75\u201385 cm';\n      hangDesc = 'nad blatem sto\u0142u jadalnianego';\n      diaText = minD + '\u2013' + maxD + ' cm';\n      diaDesc = n > 1 ? (n + ' oprawy w osi sto\u0142u') : '1 oprawa centralnie';\n    }\n\n    if (state.zw) {\n      var islArea = (wl \/ 100) * (ww \/ 100);\n      zwLm = Math.round(Math.max(1000, islArea * 400 * 2.2));\n      nw = wl > 180 ? (wl > 280 ? 3 : 2) : 1;\n      maxDw = Math.round(Math.min(ww - 20, 45));\n      if (!state.zt) {\n        hangText = '80\u201390 cm';\n        hangDesc = 'nad blatem wyspy kuchennej';\n        diaText = '~' + maxDw + ' cm';\n        diaDesc = nw + ' oprawy nad wysp\u0105';\n      }\n    }\n\n    \/\/ Blat roboczy: 500 lx w pasie 60 cm \u2192 600 lm na metr bie\u017c\u0105cy blatu\n    if (state.zb) {\n      zbLm = Math.round((bl \/ 100) * 600);\n      if (!state.zt && !state.zw) {\n        hangText = '50\u201360 cm';\n        hangDesc = 'nad blatem roboczym (ta\u015bma LED \/ podszafkowe)';\n        diaText = '\u2014';\n        diaDesc = 'ta\u015bma LED lub punkty nad blatem';\n      }\n    }\n\n    zoneLm = ztLm + zwLm + zbLm;\n    totLm += zoneLm;\n\n    var zParts = [];\n    if (state.zt) zParts.push({ k: 'St\u00f3\u0142', lm: ztLm });\n    if (state.zw) zParts.push({ k: 'Wyspa', lm: zwLm });\n    if (state.zb) zParts.push({ k: 'Blat', lm: zbLm });\n\n    if (zParts.length === 0) {\n      zoneLabel = 'Brak strefy';\n      zoneDesc = 'W\u0142\u0105cz stref\u0119 robocz\u0105 powy\u017cej';\n      $('kpi-zone-lm').textContent = '\u2014';\n    } else {\n      zoneLabel = 'Strefa: ' + zParts.map(function(p){ return p.k; }).join(' + ');\n      $('kpi-zone-lm').textContent = nf(zoneLm) + ' lm';\n      if (zParts.length === 1) {\n        var only = zParts[0].k;\n        zoneDesc = (only === 'St\u00f3\u0142') ? 'Dodatkowe \u015bwiat\u0142o nad sto\u0142em'\n                 : (only === 'Wyspa') ? 'Dodatkowe \u015bwiat\u0142o nad wysp\u0105'\n                 : 'Dla blatu ' + bl + ' cm (norma 500 lx \/ blat roboczy)';\n      } else {\n        zoneDesc = zParts.map(function(p){ return p.k + ' ' + nf(p.lm) + ' lm'; }).join(' \u00b7 ');\n      }\n    }\n\n    \/\/ Zakres \u015brednicy do dopasowania kart lamp (zamiast sztywnego 20\u201365 cm).\n    var recLo, recHi, recWhy;\n    if (state.zt) {\n      recLo = minD; recHi = maxD; recWhy = 'harmonizuje ze sto\u0142em';\n    } else if (state.zw) {\n      recLo = Math.max(20, maxDw - 10); recHi = maxDw; recWhy = 'pasuje nad wysp\u0119 kuchenn\u0105';\n    } else if (dMid >= 80) {\n      recLo = Math.round(dMid * 0.5); recHi = Math.round(dMid * 0.7); recWhy = 'pasuje do kompozycji 2\u20133 opraw';\n    } else {\n      recLo = dLo; recHi = dHi; recWhy = 'pasuje do kubatury wn\u0119trza';\n    }\n\n    $('kpi-zone-label').textContent = zoneLabel;\n    $('kpi-zone-desc').textContent = zoneDesc;\n    $('kpi-dia').textContent = diaText;\n    $('kpi-dia-desc').textContent = diaDesc;\n    $('kpi-hang').textContent = hangText;\n    $('kpi-hang-desc').textContent = hangDesc;\n    $('kpi-tot-lm').textContent = nf(totLm) + ' lm';\n    if (bigSpace && genLm > 5000) {\n      $('kpi-tot-desc').textContent = 'G\u0142\u00f3wna 2 500\u20133 500 lm + uzupe\u0142niaj\u0105ce (kinkiety, szyny, pod\u0142ogowe)';\n    } else {\n      $('kpi-tot-desc').textContent = '\u015awiat\u0142o warstwowe w ' + m2 + ' m\u00b2';\n    }\n\n    updateSticky(nf(totLm) + ' lm', diaText, hangText);\n\n    renderLamps(genLm, zoneLm, h, { lo: recLo, hi: recHi, why: recWhy });\n  }\n\n  \/* Sticky pasek podsumowania: pojawia si\u0119 po przewini\u0119ciu kafelk\u00f3w wynik\u00f3w *\/\n  function updateSticky(total, dia, hang){\n    var t = $('bkl-st-total'), d = $('bkl-st-dia'), g = $('bkl-st-hang');\n    if(t) t.textContent = total;\n    if(d) d.textContent = dia.replace('\u015br. ~', '~');\n    if(g) g.textContent = hang;\n  }\n\n  function syncSticky(){\n    var bar = $('bkl-sticky'), spacer = $('bkl-stick-spacer'), kpis = $('bkl-kpis');\n    if(!bar || !kpis || !R) return;\n    var kpiRect = kpis.getBoundingClientRect();\n    var wrapRect = R.getBoundingClientRect();\n    var on = (kpiRect.bottom < 0) && (wrapRect.bottom > 140);\n    if(on === bar.classList.contains('is-on')) return;\n    bar.classList.toggle('is-on', on);\n    if(spacer) spacer.classList.toggle('is-on', on);\n    document.body.classList.toggle('bkl-bar-on', on);\n  }\n\n  var stickTick = false;\n  function onScroll(){\n    if(stickTick) return;\n    stickTick = true;\n    window.requestAnimationFrame(function(){ stickTick = false; syncSticky(); });\n  }\n  \/* Motyw przewija BODY (nie window), dlatego nas\u0142uch idzie te\u017c z przechwytywaniem *\/\n  window.addEventListener('scroll', onScroll, { passive: true });\n  document.addEventListener('scroll', onScroll, { passive: true, capture: true });\n  window.addEventListener('resize', onScroll, { passive: true });\n  if(window.IntersectionObserver){\n    new IntersectionObserver(function(){ syncSticky(); }, { threshold: [0, 0.5, 1] }).observe($('bkl-kpis'));\n  }\n\n  function resetAll(){\n    var defaults = { 'bkl-m2': 20, 'bkl-h': 250, 'bkl-tl': 180, 'bkl-tw': 90, 'bkl-wl': 220, 'bkl-ww': 90, 'bkl-bl': 240 };\n    Object.keys(defaults).forEach(function(id){ var el = $(id); if(el) el.value = defaults[id]; });\n    if($('bkl-ref')) $('bkl-ref').value = '1';\n    if($('bkl-lux')) $('bkl-lux').value = '150';\n\n    var pills = $('bkl-room-pills');\n    if(pills){\n      var all = pills.querySelectorAll('.bkl-room-pill');\n      for(var i = 0; i < all.length; i++) all[i].classList.toggle('active', i === 0);\n    }\n\n    [['zt','btn-zt','panel-zt'], ['zw','btn-zw','panel-zw'], ['zb','btn-zb','panel-zb']].forEach(function(t){\n      var shouldOn = (t[0] === 'zt');\n      state[t[0]] = shouldOn;\n      var btn = $(t[1]), panel = $(t[2]);\n      if(btn){\n        var label = btn.textContent.replace(\/^[+\u2713]\\s*\/, '').trim();\n        btn.textContent = (shouldOn ? '\u2713 ' : '+ ') + label;\n        btn.classList.toggle('active', shouldOn);\n      }\n      if(panel) panel.style.display = shouldOn ? 'grid' : 'none';\n    });\n\n    calc();\n  }\n\n  function renderLamps(genLm, zoneLm, ceilH, diaCtx){\n    var out = $('bkl-lamps-out');\n    out.innerHTML = '';\n    var oldMore = $('bkl-more'); if(oldMore) oldMore.remove();\n    if(!L.length) return;\n\n    var targetLm = (state.zt || state.zw) ? (zoneLm || 1000) : (genLm \/ 2);\n    var scored = [];\n\n    L.forEach(function(p){\n      if(p.t !== 'wis') return;\n      var sc = 20, why = '';\n      if(p.img) sc += 10;\n      if(p.pub) sc += 10;\n\n      if(p.lm){\n        var ratio = p.lm \/ targetLm;\n        if(ratio >= 0.5 && ratio <= 1.8){\n          sc += 30;\n          why = p.lm + ' lm pasuje do strefy';\n        }\n      }\n      if(p.d && diaCtx && p.d >= (diaCtx.lo - 5) && p.d <= (diaCtx.hi + 5)){ sc += 20; if(!why) why = '\u015arednica ' + p.d + ' cm ' + diaCtx.why; }\n      if(p.h && p.h < ceilH - 180){ sc += 15; }\n\n      scored.push({ p: p, sc: sc, why: why || 'Dopasowanie do kubatury' });\n    });\n\n    scored.sort(function(a, b){ return b.sc - a.sc; });\n\n    var top = scored;\n    $('bkl-rec-sub').textContent = 'Dopasowano ' + top.length + ' modeli, od najlepszych';\n\n    function renderItem(item){\n      var p = item.p;\n      var card = document.createElement('div');\n      card.className = 'bkl-lamp-card';\n\n      var specs = [];\n      if(p.d) specs.push('\u015br. ' + p.d + ' cm');\n      if(p.h) specs.push('wys. ' + p.h + ' cm');\n      if(p.lm) specs.push(p.lm + ' lm');\n      if(p.g) specs.push(p.g);\n\n      card.innerHTML = \n        '<div class=\"bkl-lamp-img-wrap\">' +\n          (p.img ? '<img decoding=\"async\" loading=\"lazy\" src=\"' + esc(p.img) + '\" alt=\"' + esc(p.n) + '\">' : '<div style=\"color:#94a3b8; font-size:12px;\">Brak zdj\u0119cia<\/div>') +\n        '<\/div>' +\n        '<div class=\"bkl-lamp-body\">' +\n          '<span class=\"bkl-lamp-brand\">' + esc(p.m || 'Kolekcja') + '<\/span>' +\n          '<h4 class=\"bkl-lamp-name\">' + esc(p.n) + '<\/h4>' +\n          '<p class=\"bkl-lamp-specs\">' + esc(specs.join(' \u00b7 ') || 'Wymiary standardowe') + '<\/p>' +\n          '<div class=\"bkl-lamp-why\">\u2713 ' + esc(item.why) + '<\/div>' +\n          '<div class=\"bkl-lamp-actions\">' +\n            '<a href=\"' + esc(p.u) + '\" class=\"bkl-btn-act\">' + 'Zobacz model' + '<\/a>' +\n            '<a href=\"\/porownywarka\/?porownaj=' + esc(p.i || '') + '\" class=\"bkl-btn-cmp\">Por\u00f3wnaj<\/a>' +\n          '<\/div>' +\n        '<\/div>';\n\n      out.appendChild(card);\n    }\n    var STEP = 8, shown = 0;\n    var more = document.createElement('button');\n    more.id = 'bkl-more'; more.type = 'button';\n    more.style.cssText = 'display:block;margin:24px auto 0;padding:14px 28px;background:#cc685c;color:#fff;border:0;border-radius:999px;font-weight:700;font-size:15px;cursor:pointer;';\n    more.onmouseover = function(){ more.style.background = '#b55347'; };\n    more.onmouseout = function(){ more.style.background = '#cc685c'; };\n    function showMore(){\n      top.slice(shown, shown + STEP).forEach(renderItem);\n      shown = Math.min(top.length, shown + STEP);\n      var left = top.length - shown;\n      if(left > 0){ more.textContent = 'Poka\u017c kolejne ' + Math.min(STEP, left) + ' lamp (' + shown + ' z ' + top.length + ')'; }\n      else { more.style.display = 'none'; }\n    }\n    out.parentNode.insertBefore(more, out.nextSibling);\n    more.addEventListener('click', showMore);\n    showMore();\n  }\n\n  var pills = $('bkl-room-pills');\n  if(pills){\n    pills.addEventListener('click', function(e){\n      var btn = e.target.closest('.bkl-room-pill');\n      if(!btn) return;\n      pills.querySelectorAll('.bkl-room-pill').forEach(function(p){ p.classList.remove('active'); });\n      btn.classList.add('active');\n      $('bkl-lux').value = btn.getAttribute('data-lux');\n      $('bkl-room').value = btn.getAttribute('data-room');\n      calc();\n    });\n  }\n\n  function setupZone(btnId, panelId, key){\n    $(btnId).addEventListener('click', function(){\n      state[key] = !state[key];\n      if(state[key]){\n        this.classList.add('active');\n        this.textContent = '\u2713 ' + this.textContent.replace('+ ', '');\n        $(panelId).style.display = 'grid';\n      } else {\n        this.classList.remove('active');\n        this.textContent = '+ ' + this.textContent.replace('\u2713 ', '');\n        $(panelId).style.display = 'none';\n      }\n      calc();\n    });\n  }\n  setupZone('btn-zt', 'panel-zt', 'zt');\n  setupZone('btn-zw', 'panel-zw', 'zw');\n  setupZone('btn-zb', 'panel-zb', 'zb');\n\n  var stChange = $('bkl-st-change'), stReset = $('bkl-st-reset');\n  if(stChange){\n    stChange.addEventListener('click', function(){\n      var card = R.querySelector('.bkl-controls-card');\n      if(card) card.scrollIntoView({ behavior: 'smooth', block: 'center' });\n    });\n  }\n  if(stReset){\n    stReset.addEventListener('click', function(){ resetAll(); });\n  }\n\n  ['bkl-m2', 'bkl-h', 'bkl-ref', 'bkl-tl', 'bkl-tw', 'bkl-wl', 'bkl-ww', 'bkl-bl'].forEach(function(id){\n    var el = $(id);\n    if(el){\n      el.addEventListener('input', calc);\n      el.addEventListener('change', calc);\n    }\n  });\n\n  \/* Domyka warto\u015bci paska, gdy startowe przeliczenie wypad\u0142o przed wczytaniem markupu paska *\/\n  function refreshStickyFromKpi(){\n    updateSticky($('kpi-tot-lm').textContent, $('kpi-dia').textContent, $('kpi-hang').textContent);\n    syncSticky();\n  }\n  if(document.readyState === 'loading'){\n    document.addEventListener('DOMContentLoaded', refreshStickyFromKpi);\n  } else {\n    refreshStickyFromKpi();\n  }\n\n  fetch(R.getAttribute('data-src'))\n    .then(function(r){ return r.json(); })\n    .then(function(data){\n      L = data;\n      calc();\n    })\n    .catch(function(){\n      calc();\n    });\n})();\n<\/script>\n\n<div class=\"bkl-sticky\" id=\"bkl-sticky\" role=\"region\" aria-label=\"Podsumowanie oblicze\u0144\">\n  <div class=\"bkl-sticky-in\">\n    <div class=\"bkl-st-metrics\">\n      <div class=\"bkl-st-item bkl-st-item--total\"><span class=\"bkl-st-label\">Suma<\/span><span class=\"bkl-st-val\" id=\"bkl-st-total\">4 200 lm<\/span><\/div>\n      <div class=\"bkl-st-item\"><span class=\"bkl-st-label\">Klosz<\/span><span class=\"bkl-st-val\" id=\"bkl-st-dia\">39\u201365 cm<\/span><\/div>\n      <div class=\"bkl-st-item\"><span class=\"bkl-st-label\">Zawieszenie<\/span><span class=\"bkl-st-val\" id=\"bkl-st-hang\">75\u201385 cm<\/span><\/div>\n    <\/div>\n    <div class=\"bkl-st-actions\">\n      <button type=\"button\" class=\"bkl-st-btn bkl-st-btn--ghost\" id=\"bkl-st-change\"><span class=\"bkl-lbl-full\">Zmie\u0144 wymiary<\/span><span class=\"bkl-lbl-short\">Zmie\u0144<\/span><\/button>\n      <button type=\"button\" class=\"bkl-st-btn bkl-st-btn--solid\" id=\"bkl-st-reset\">Zresetuj<\/button>\n    <\/div>\n  <\/div>\n<\/div>\n<div class=\"bkl-stick-spacer\" id=\"bkl-stick-spacer\" aria-hidden=\"true\"><\/div>\n<\/div>\n\t\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":0,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_swt_meta_header_display":false,"_swt_meta_footer_display":false,"_swt_meta_site_title_display":false,"_swt_meta_sticky_header":false,"_swt_meta_transparent_header":false,"footnotes":""},"class_list":["post-9726","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bihome.pl\/en\/wp-json\/wp\/v2\/pages\/9726","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bihome.pl\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bihome.pl\/en\/wp-json\/wp\/v2\/types\/page"}],"replies":[{"embeddable":true,"href":"https:\/\/bihome.pl\/en\/wp-json\/wp\/v2\/comments?post=9726"}],"version-history":[{"count":0,"href":"https:\/\/bihome.pl\/en\/wp-json\/wp\/v2\/pages\/9726\/revisions"}],"wp:attachment":[{"href":"https:\/\/bihome.pl\/en\/wp-json\/wp\/v2\/media?parent=9726"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}