/* Konfigurator elektryki PV, sklepfelicity.pl: styles of konfigurator.html scoped under .pvkx. Built by skrypty/wdrozenie-sklep.cjs. */

/* sklepfelicity.pl LV/HV category style (2026-10-12): Unbounded headings, Sora text, ink #171310 on #f4f4f2,
   dark "ember" studios with a glowing arc and a lit floor line, orange gradient pills used sparingly.
   The page itself stays light in every system theme (the user asked for a bright page); only the product
   stage and a few accent cards are dark, as on the LV and HV pages.
   Layout: a sticky dark studio on the left shows the real inverter next to the DC and AC boxes drawn to scale;
   a white card on the right walks through the steps and ends in the shopping list. Phones: one column. */
.pvkx{
  --page:#f4f4f2; --card:#ffffff; --ink:#171310; --ink2:#2f2925; --muted:#4f4843; --muted2:#776d66;
  --line:#e7e2dd; --line2:#d3ccc6; --kafel:#f4f3f1; --kafel2:#ebe9e6;
  --pom:#f06a25; --pom-ciem:#b4410f; --grad:linear-gradient(135deg,#f78a33,#e2560f); --soft:#fff1e6; --soft-line:#f2c9aa;
  --burs:#ffb36b; --opis:rgba(255,244,236,.93); --przyg:rgba(255,236,222,.76); --linia:rgba(255,236,222,.15);
  --studio:radial-gradient(80% 62% at 50% 92%,#3c1e10 0%,#1e0f09 48%,#0d0706 100%);
  --ember:radial-gradient(90% 90% at 0% 100%,#5a1f08,#2a0d04 60%,#160704);
  --glass:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  --ok:#1f6b3f; --ok-bg:#eaf5ee; --warn:#8a5208; --warn-bg:#fdf3e2; --bad:#b4271b; --bad-bg:#fcebe9;
  --disp:"Unbounded","Sora",Arial,sans-serif; --txt:"Sora","Instrument Sans","Segoe UI",Arial,sans-serif;
  --top:64px; --ease:cubic-bezier(.2,.8,.2,1); color-scheme:light;
}
.pvkx,.pvkx{background:var(--page);color:var(--ink)}
.pvkx{margin:0}
.pvkx [hidden]{display:none!important}
.pvkx .pvk{font-family:var(--txt);font-size:15px;line-height:1.6;color:var(--ink);background:var(--page);-webkit-font-smoothing:antialiased}
.pvkx .pvk *,.pvkx .pvk *::before,.pvkx .pvk *::after{box-sizing:border-box}
.pvkx :where(.pvk) :where(h1,h2,h3,p,ul,ol,dl,dd,figure){margin:0;padding:0}
.pvkx :where(.pvk) :where(ul,ol){list-style:none}
.pvkx .pvk button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pvkx .pvk code{font-family:var(--txt);font-weight:600;letter-spacing:.01em}
.pvkx .pvk svg{display:block}
.pvkx .eb,.pvkx .pvk p.eb{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--pom-ciem);margin-top:0!important}

/* top bar, like the shop header */
.pvkx .top{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;height:var(--top);display:flex;align-items:center;justify-content:space-between;gap:16px;padding-inline:max(16px,calc((100% - 1280px)/2));background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.pvkx .top-l{display:flex;align-items:center;gap:18px;min-width:0}
.pvkx .logo{display:block;height:36px;width:auto}
.pvkx .brand{font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:-.02em;white-space:nowrap}
.pvkx .top-t{color:var(--muted);font-size:13.5px;font-weight:500;white-space:nowrap;padding-left:18px;border-left:1px solid var(--line)}
.pvkx .top-r{font-size:12.5px;font-weight:600;color:var(--ink);background:var(--kafel);border-radius:999px;padding:6px 14px;white-space:nowrap}
@media (max-width:640px){.pvkx .top-t{display:none}.pvkx .logo{height:30px}.pvkx .top-r{font-size:11.5px;padding:5px 11px}}

/* layout */
.pvkx .app{display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,440px);gap:16px;align-items:start;max-width:1320px;margin-inline:auto;padding:16px 20px 20px}
.pvkx .stage{position:sticky;top:calc(var(--top) + 16px + env(safe-area-inset-top,0px));height:calc(100dvh - var(--top) - 32px - env(safe-area-inset-top,0px));min-height:580px;display:flex;flex-direction:column;padding:clamp(22px,2.6vw,38px);border-radius:26px;background:var(--studio);color:#fff;overflow:hidden;isolation:isolate;box-shadow:0 30px 60px -34px rgba(13,7,6,.6)}
.pvkx .stage::before{content:"";position:absolute;inset:-20%;z-index:-1;pointer-events:none;background:radial-gradient(30% 24% at 50% 8%,rgba(255,170,110,.14),transparent 70%),radial-gradient(34% 30% at 14% 76%,rgba(240,106,37,.12),transparent 70%),radial-gradient(34% 30% at 88% 66%,rgba(240,106,37,.1),transparent 70%);animation:pvDryf 30s ease-in-out infinite alternate}
@keyframes pvDryf{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(4%,-3%) rotate(6deg)}100%{transform:translate(-3%,2%) rotate(-4deg)}}
.pvkx .panel{background:var(--card);border-radius:26px;box-shadow:0 1px 0 rgba(40,25,15,.04),0 24px 50px -32px rgba(40,25,15,.22);min-width:0}
@media (max-width:1023px){
  .pvkx .app{display:block;padding:10px 10px 16px}
  .pvkx .stage{position:relative;top:auto;height:auto;min-height:0;padding:24px 14px 14px;border-radius:22px;margin-bottom:10px}
  .pvkx .panel{border-radius:22px}
}
.pvkx .st-head{text-align:center}
.pvkx .st-k{color:var(--burs)!important;margin-bottom:10px!important}
.pvkx .st-title{font-family:var(--disp);font-weight:700;font-size:clamp(26px,3vw,44px);line-height:1.04;letter-spacing:-.03em;color:#fff;text-wrap:balance}
.pvkx .st-sub{margin-top:10px!important;color:var(--przyg);font-size:14.5px}
.pvkx .views{position:relative;flex:1;min-height:0;display:grid}
.pvkx .view{grid-area:1/1;display:flex;flex-direction:column;justify-content:center;min-height:0;opacity:0;visibility:hidden;transform:translateY(10px) scale(.99);transition:opacity .4s var(--ease),transform .55s var(--ease),visibility 0s .4s}
.pvkx .view.on{opacity:1;visibility:visible;transform:none;transition:opacity .4s var(--ease),transform .55s var(--ease)}
@media (max-width:1023px){.pvkx .views{display:block}.pvkx .view{display:none;padding-block:20px 12px;transform:none}.pvkx .view.on{display:flex;animation:pvkIn .4s var(--ease)}}
@keyframes pvkIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pvkx .tabs{position:relative;display:flex;justify-content:center;gap:2px;margin-inline:auto;padding:4px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--linia);max-width:100%;overflow-x:auto;scrollbar-width:none}
.pvkx .tabs button{border:0;background:transparent;padding:9px 18px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--przyg);white-space:nowrap;transition:background-color .25s var(--ease),color .25s}
.pvkx .tabs button:hover{color:#fff}
.pvkx .tabs button[aria-selected="true"]{background:#fff;color:#2a0d04}
.pvkx .tabs button:focus-visible{outline:2px solid var(--burs);outline-offset:2px}
@media (max-width:560px){.pvkx .tabs .tl{display:none}.pvkx .tabs{width:100%;justify-content:space-between}.pvkx .tabs button{flex:1;padding:9px 8px}}

/* kit view: products standing on a lit floor under a slowly turning arc */
.pvkx .lineup{--lh:clamp(200px,33vh,400px);--cap:62px;position:relative;display:flex;align-items:flex-end;justify-content:center;gap:clamp(18px,4vw,64px);padding-top:18px;isolation:isolate}
.pvkx .lineup::before{content:"";position:absolute;left:50%;bottom:var(--cap);width:calc(var(--lh) * 2.15);aspect-ratio:1;border-radius:50%;z-index:-1;pointer-events:none;transform:translate(-50%,50%);background:radial-gradient(closest-side,transparent 97.2%,rgba(255,140,60,.5) 98.3%,#ffe2c8 98.85%,rgba(255,140,60,.5) 99.4%,transparent 100%),radial-gradient(closest-side,transparent 84%,rgba(255,110,40,.15) 97.5%,rgba(255,110,40,0) 100%);-webkit-mask-image:conic-gradient(from 270deg,transparent 0deg,rgba(0,0,0,.25) 35deg,#000 90deg,rgba(0,0,0,.25) 145deg,transparent 180deg);mask-image:conic-gradient(from 270deg,transparent 0deg,rgba(0,0,0,.25) 35deg,#000 90deg,rgba(0,0,0,.25) 145deg,transparent 180deg);animation:pvLuk 16s ease-in-out infinite alternate}
@keyframes pvLuk{from{transform:translate(-50%,50%) rotate(-14deg)}to{transform:translate(-50%,50%) rotate(14deg)}}
.pvkx .lineup::after{content:"";position:absolute;left:-12%;right:-12%;bottom:var(--cap);height:1px;z-index:-1;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,214,176,.34) 25%,rgba(255,214,176,.34) 75%,transparent)}
.pvkx .streak{position:absolute;left:-30%;right:-30%;bottom:var(--cap);height:1px;overflow:hidden;pointer-events:none;z-index:-1}
.pvkx .streak::before{content:"";position:absolute;left:0;top:0;width:16%;height:1px;background:linear-gradient(90deg,rgba(255,210,170,0),rgba(255,214,176,.95),rgba(255,210,170,0));animation:pvSmuga 7s cubic-bezier(.5,0,.5,1) infinite}
@keyframes pvSmuga{from{transform:translateX(-131%)}to{transform:translateX(656%)}}
@media (max-width:1023px){.pvkx .lineup{--lh:clamp(130px,38vw,240px);--cap:56px;gap:12px}}
.pvkx .item{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px;transition:opacity .4s var(--ease),filter .4s;min-width:0}
.pvkx .item .obj{position:relative;display:flex;align-items:flex-end;justify-content:center;isolation:isolate}
.pvkx .item .obj::after{content:"";position:absolute;left:2%;right:2%;bottom:-11px;height:22px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.62),transparent);z-index:-1}
.pvkx .item .obj::before{content:"";position:absolute;left:0;right:0;bottom:-18px;height:40%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,125,45,.2),transparent);z-index:-2}
.pvkx .item img{display:block;height:var(--lh)!important;width:auto!important;max-width:40vw!important;object-fit:contain;filter:drop-shadow(0 26px 30px rgba(0,0,0,.45))}
.pvkx .item img.wide{height:calc(var(--lh)*.62)!important;max-width:44vw!important}
.pvkx .item .boxwrap svg{height:var(--h);width:auto;filter:drop-shadow(0 20px 24px rgba(0,0,0,.42))}
.pvkx .item figcaption{text-align:center;display:grid;gap:2px;min-width:0;height:46px;align-content:start}
.pvkx .item figcaption b{font-size:14px;font-weight:600;color:#fff;white-space:nowrap}
.pvkx .item figcaption span{font-size:12.5px;color:var(--przyg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1023px){.pvkx .item{gap:12px}.pvkx .item figcaption{height:42px}.pvkx .item figcaption b{font-size:12.5px}.pvkx .item figcaption span{font-size:11px}}
.pvkx .item.off{opacity:.26;filter:saturate(.3)}
.pvkx .stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:860px;margin:clamp(20px,3.4vh,34px) auto 0!important;width:100%}
.pvkx .stats>div{display:flex;flex-direction:column;gap:6px;padding:16px 14px 15px;border-radius:18px;border:1px solid rgba(255,236,222,.13);background:var(--glass);text-align:center}
.pvkx .stats .ci{display:none}
.pvkx .stats dd{font-family:var(--disp);font-weight:600;font-size:clamp(19px,2vw,28px);line-height:1.1;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.pvkx .stats dt{font-size:12.5px;color:var(--przyg);line-height:1.4}
@media (max-width:1023px){.pvkx .stats{gap:6px}.pvkx .stats>div{padding:11px 6px;border-radius:14px}.pvkx .stats dd{font-size:16px}.pvkx .stats dt{font-size:10.5px}}

/* box close-up */
.pvkx .close{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(230px,.9fr);align-items:center;gap:clamp(18px,3vw,44px);max-width:1000px;margin-inline:auto;width:100%}
@media (max-width:760px){.pvkx .close{grid-template-columns:minmax(0,1fr)}}
.pvkx .close .big{display:flex;justify-content:center;min-width:0;overflow:hidden;border-radius:18px;padding:6px}
.pvkx .close .big svg{width:100%;max-width:520px;height:auto;max-height:52vh;transition:transform .7s var(--ease);animation:wzFade .45s var(--ease)}
@media (max-width:1023px){.pvkx .close .big svg{max-height:none}}
.pvkx .legend{display:grid;gap:12px;padding:18px;border-radius:20px;background:var(--glass);border:1px solid rgba(255,236,222,.13)}
.pvkx .legend li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start;border-radius:12px;transition:opacity .35s,background-color .35s}
.pvkx .mk{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:#fff;font-size:12px;font-weight:700;box-shadow:0 6px 14px rgba(240,106,37,.35)}
.pvkx .legend b{display:block;font-size:13.5px;font-weight:600;line-height:1.35;color:#fff}
.pvkx .legend div>span{display:block;font-size:12px;color:var(--przyg)}
.pvkx .legend code{font-size:11.5px;color:var(--burs)}
.pvkx .legend .lg-h{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--burs)}
.pvkx .close-note{font-size:12.5px;color:var(--przyg);margin-top:12px!important;line-height:1.5}

/* route view */
.pvkx .route{position:relative;display:grid;grid-template-columns:auto minmax(40px,1fr) auto minmax(40px,1fr) auto minmax(40px,1fr) auto minmax(40px,1fr) auto;align-items:start;max-width:1000px;margin-inline:auto;width:100%;transform-origin:0 0;transition:transform .7s var(--ease)}
.pvkx .stop{display:grid;justify-items:center;gap:8px;text-align:center;width:86px}
.pvkx .stop .dot{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;background:var(--glass);border:1px solid rgba(255,236,222,.18);color:#ffe2c8}
.pvkx .stop .dot svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pvkx .stop b{font-size:13px;font-weight:600;line-height:1.25;color:#fff}
.pvkx .stop small{font-size:12px;color:var(--przyg);line-height:1.35}
.pvkx .stop.prod .dot{border:1.5px solid #f78a33;color:var(--burs);box-shadow:0 0 0 5px rgba(240,106,37,.1),0 0 30px rgba(240,106,37,.28)}
.pvkx .stop.prod.off .dot{border:1px solid rgba(255,236,222,.18);color:#ffe2c8;box-shadow:none;opacity:.45}
.pvkx .run{position:relative;display:grid;justify-items:center;gap:4px;padding-top:21px;text-align:center}
.pvkx .run .ln{position:relative;width:100%;height:2px;border-radius:2px;background:rgba(255,236,222,.14);overflow:hidden;margin-bottom:10px}
.pvkx .run .ln i{position:absolute;inset:0;background:repeating-linear-gradient(90deg,#ff9a4d 0 6px,transparent 6px 14px);animation:pvkRun 1.2s linear infinite}
.pvkx .run.off{opacity:.35}.pvkx .run.off .ln i{display:none}
.pvkx .run em{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--burs)}
.pvkx .run b{font-family:var(--disp);font-weight:600;font-size:21px;line-height:1.1;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.pvkx .run small{font-size:11px;color:var(--przyg);line-height:1.35;max-width:9em}
@keyframes pvkRun{to{background-position:14px 0}}
@keyframes pvkRunY{to{background-position:0 14px}}
/* narrow studio (two columns on 1024–1279 px screens): the route scales with the studio width, phones keep the vertical route */
.pvkx #routeBox{container-type:inline-size}
@media (min-width:761px){@container (max-width:720px){
  .pvkx .route{grid-template-columns:auto minmax(34px,1fr) auto minmax(34px,1fr) auto minmax(34px,1fr) auto minmax(34px,1fr) auto}
  .pvkx .stop{width:68px;gap:6px}
  .pvkx .stop .dot{width:50px;height:50px;border-radius:16px}
  .pvkx .stop .dot svg{width:26px;height:26px}
  .pvkx .stop b{font-size:12px}
  .pvkx .stop small{font-size:11px}
  .pvkx .run{padding-top:15px;gap:3px}
  .pvkx .run b{font-size:16px}
  .pvkx .run small{font-size:10.5px;max-width:none}
  .pvkx #routeBox .route .run.vrun{width:68px;justify-content:start;padding-left:33px}
}}
@media (min-width:761px){@container (max-width:560px){
  .pvkx .route{grid-template-columns:auto minmax(30px,1fr) auto minmax(30px,1fr) auto minmax(30px,1fr) auto minmax(30px,1fr) auto}
  .pvkx .stop{width:64px}
  .pvkx #routeBox .route .run.vrun{width:64px;padding-left:31px}
  .pvkx .stop b{font-size:10.5px}
  .pvkx .stop small{font-size:10.5px}
  .pvkx .run b{font-size:14px}
  .pvkx .run small{font-size:10px}
  .pvkx .run .rk{display:none}
}}
@media (max-width:760px){
  .pvkx .route{grid-template-columns:minmax(0,1fr);justify-items:stretch;gap:0;max-width:420px}
  .pvkx .stop{grid-template-columns:52px minmax(0,1fr);justify-items:start;text-align:left;width:auto;align-items:center;gap:2px 14px}
  .pvkx .stop .dot{width:52px;height:52px;border-radius:16px;grid-row:span 2}
  .pvkx .run{grid-template-columns:52px auto minmax(0,1fr);justify-items:start;align-items:center;text-align:left;padding:6px 0;gap:2px 14px}
  .pvkx .run .ln{width:2px;height:44px;margin:0 auto;grid-row:span 2}
  .pvkx .run .ln i{background:repeating-linear-gradient(180deg,#ff9a4d 0 6px,transparent 6px 14px);animation-name:pvkRunY}
  .pvkx .run em{grid-row:span 2}
}
/* focus zoom: the stage moves onto the run or modules being edited */
.pvkx .route .stop,.pvkx .route .run{transition:opacity .45s var(--ease),filter .45s var(--ease)}

.pvkx #routeBox[data-focus] .stop,.pvkx #routeBox[data-focus] .run{opacity:.18;filter:grayscale(1)}
@media (min-width:1024px){.pvkx #vRoute{position:relative}.pvkx #vRoute .rfocus{position:absolute;z-index:2;top:6px;left:50%;width:min(600px,100%);margin:0;transform:translateX(-50%);animation:rfIn .45s var(--ease)}}
@keyframes rfIn{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}
.pvkx #routeBox[data-focus="A"] [data-seg="A"],.pvkx #routeBox[data-focus="A"] [data-segs~="A"],.pvkx #routeBox[data-focus="B"] [data-seg="B"],.pvkx #routeBox[data-focus="B"] [data-segs~="B"],.pvkx #routeBox[data-focus="C"] [data-seg="C"],.pvkx #routeBox[data-focus="C"] [data-segs~="C"],.pvkx #routeBox[data-focus="D"] [data-seg="D"],.pvkx #routeBox[data-focus="D"] [data-segs~="D"],.pvkx #routeBox[data-focus="E"] [data-seg="E"],.pvkx #routeBox[data-focus="E"] [data-segs~="E"]{opacity:1;filter:none}
.pvkx #routeBox[data-focus] .run[data-seg] .ln{height:3px}
.pvkx .rfocus{display:flex;align-items:center;gap:14px;max-width:600px;width:100%;margin:0 auto 26px;padding:14px 18px;border-radius:18px;background:rgba(255,255,255,.07);border:1px solid rgba(255,236,222,.16);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:pvkIn .4s var(--ease)}
.pvkx .rf-l{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:#fff;font-weight:700;font-size:15px;box-shadow:0 8px 18px rgba(240,106,37,.35)}
.pvkx .rf-t{display:grid;gap:2px;min-width:0;flex:1}
.pvkx .rf-t b{font-size:14.5px;font-weight:600;color:#fff}
.pvkx .rf-t span{font-size:12.5px;color:var(--przyg);line-height:1.45}
.pvkx .rf-v{flex:none;font-family:var(--disp);font-weight:600;font-size:24px;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
.pvkx .big .mkc{transition:opacity .35s}
.pvkx .big[data-hl] .mkc{opacity:.25}
.pvkx .big[data-hl~="1"] .mkc.m1,.pvkx .big[data-hl~="2"] .mkc.m2,.pvkx .big[data-hl~="3"] .mkc.m3,.pvkx .big[data-hl~="4"] .mkc.m4,.pvkx .big[data-hl~="5"] .mkc.m5{opacity:1}
.pvkx .big[data-hl~="1"] .mkc.m1 circle,.pvkx .big[data-hl~="2"] .mkc.m2 circle,.pvkx .big[data-hl~="3"] .mkc.m3 circle,.pvkx .big[data-hl~="4"] .mkc.m4 circle{animation:pvkPulse 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes pvkPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.22)}}
.pvkx .legend[data-hl] li[data-m]{opacity:.35}
.pvkx .legend li.hl{opacity:1!important;background:rgba(240,106,37,.14);box-shadow:inset 3px 0 0 var(--pom);padding:6px 6px 6px 9px;margin:-6px -6px -6px -9px}

/* panel */
.pvkx .p-in{padding-inline:clamp(18px,2.4vw,30px)}
.pvkx .p-head{padding-block:26px 2px}
.pvkx .p-head h2{font-family:var(--disp);font-weight:700;font-size:26px;line-height:1.1;letter-spacing:-.025em;margin-top:8px!important}
.pvkx .p-head p{margin-top:10px!important;color:var(--muted);font-size:14px;line-height:1.6}
.pvkx .sec{padding-block:26px;display:grid;gap:14px;scroll-margin-top:calc(var(--top) + 16px)}
.pvkx .sec>h2,.pvkx details.sec>summary h2{font-family:var(--disp);font-weight:600;font-size:21px;line-height:1.2;letter-spacing:-.02em}
.pvkx .sec-n{display:none}
.pvkx .sub{color:var(--muted);font-size:14px;margin-top:-4px!important}
.pvkx .why{font-size:13.5px}
.pvkx .why summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;color:var(--pom-ciem);font-weight:600;list-style:none}
.pvkx .why summary::-webkit-details-marker{display:none}
.pvkx .why summary::before{content:"?";display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--soft);font-size:11.5px;font-weight:700}
.pvkx .why p{margin-top:10px!important;padding:14px 16px;border-radius:16px;background:var(--kafel);color:var(--muted);line-height:1.6;animation:pvkIn .35s var(--ease)}
.pvkx .lab{font-size:14.5px;font-weight:600}
.pvkx .hint{font-size:12.5px;color:var(--muted2);line-height:1.55}
.pvkx .grp{display:grid;gap:10px}

/* option tiles, like the LV device tiles */
.pvkx .opts{display:grid;gap:8px}
.pvkx .opt{position:relative;display:block;cursor:pointer}
.pvkx .opt input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.pvkx .o-b{position:relative;display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;background:var(--kafel);box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .2s,background-color .2s,transform .12s}
.pvkx .o-t{display:grid;gap:2px;min-width:0;flex:1}
.pvkx .o-t b{font-size:14px;font-weight:600;line-height:1.3}
.pvkx .o-t small{font-size:12px;color:var(--muted);line-height:1.45}
.pvkx .o-v{flex:none;font-size:12.5px;font-weight:600;color:var(--pom-ciem);font-variant-numeric:tabular-nums}
.pvkx .opt:hover .o-b{box-shadow:inset 0 0 0 1px var(--line2)}
.pvkx .opt input:checked+.o-b{background:#fff;box-shadow:inset 0 0 0 1.5px var(--pom),0 14px 28px -16px rgba(240,106,37,.5)}
.pvkx .opt input:focus-visible+.o-b{outline:2px solid var(--pom);outline-offset:2px}
.pvkx .opt:active .o-b{transform:scale(.985)}
.pvkx .opt:not(.cb) .o-b::after{content:"";flex:none;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line2);transition:box-shadow .25s var(--ease)}
.pvkx .opt:not(.cb) input:checked+.o-b::after{box-shadow:inset 0 0 0 7px var(--pom)}
.pvkx .opt.cb .o-b::after{content:"";flex:none;width:22px;height:22px;border-radius:7px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line2);transition:background .2s,box-shadow .2s}
.pvkx .opt.cb input:checked+.o-b{background:#fff;box-shadow:inset 0 0 0 1.5px var(--pom),0 14px 28px -16px rgba(240,106,37,.5);animation:tilePop .32s var(--ease)}
.pvkx .opt.cb input:not(:checked)+.o-b .o-t{opacity:.72}
.pvkx .opt.cb input:checked+.o-b .o-v{color:var(--pom-ciem)}
@keyframes tilePop{0%{transform:scale(.985)}60%{transform:scale(1.01)}100%{transform:none}}
.pvkx .opt.cb input:checked+.o-b::after{background:var(--grad);box-shadow:0 4px 10px rgba(240,106,37,.35)}
.pvkx .opt.cb input:checked+.o-b::before{content:"";position:absolute;right:24px;top:50%;width:6px;height:11px;margin-top:-7px;border:solid #fff;border-width:0 2.2px 2.2px 0;transform:rotate(45deg);z-index:1;animation:wzTick .28s var(--ease)}
@keyframes wzTick{from{opacity:0;transform:rotate(45deg) scale(.3)}to{opacity:1;transform:rotate(45deg) scale(1)}}
.pvkx .opts.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:420px){.pvkx .opts.two{grid-template-columns:minmax(0,1fr)}}
.pvkx .quick{display:flex;flex-wrap:wrap;gap:6px}
.pvkx .quick button{border:1px solid var(--line2);background:#fff;color:var(--ink);border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:600;transition:border-color .2s,transform .12s}
.pvkx .quick button:hover{border-color:var(--ink)}
.pvkx .quick button:active{transform:scale(.97)}

/* segmented pills */
.pvkx .seg{display:flex;flex-wrap:wrap;gap:6px}
.pvkx .seg label{position:relative;cursor:pointer}
.pvkx .seg input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.pvkx .seg span{display:block;padding:9px 15px;border-radius:999px;font-size:13px;font-weight:600;line-height:1.2;background:var(--kafel);transition:background-color .2s,color .2s,transform .12s;font-variant-numeric:tabular-nums}
.pvkx .seg label:hover span{background:var(--kafel2)}
.pvkx .seg input:checked+span{background:var(--ink);color:#fff}
.pvkx .seg input:focus-visible+span{outline:2px solid var(--pom);outline-offset:2px}
.pvkx .seg label:active span{transform:scale(.96)}

/* select & info */
.pvkx .sel{position:relative}
.pvkx .sel select{appearance:none;-webkit-appearance:none;width:100%;height:54px;padding:0 46px 0 18px;border:0;border-radius:16px;background:var(--kafel);color:var(--ink);font:600 14px var(--txt);cursor:pointer;box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .2s}
.pvkx .sel select:hover{box-shadow:inset 0 0 0 1px var(--line2)}
.pvkx .sel::after{content:"";position:absolute;right:20px;top:50%;width:8px;height:8px;border:solid var(--ink);border-width:0 1.8px 1.8px 0;transform:translateY(-70%) rotate(45deg);pointer-events:none}
.pvkx .sel select:focus-visible{outline:2px solid var(--pom);outline-offset:2px}
.pvkx .specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)}
.pvkx .specs div{padding:11px 0;border-bottom:1px solid var(--line);display:grid;gap:2px}
.pvkx .specs div:nth-child(odd){padding-right:12px}
.pvkx .specs dt{font-size:12px;color:var(--muted2)}
.pvkx .specs dd{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.pvkx .link-out{font-size:13.5px;font-weight:600;color:var(--pom-ciem);text-underline-offset:4px;text-decoration-color:var(--soft-line)}
.pvkx .note{font-size:13px;line-height:1.55;padding:13px 16px;border-radius:16px;background:var(--kafel);color:var(--ink2)}
.pvkx .note.good{background:var(--ok-bg);color:#1d4a30}.pvkx .note.alert{background:var(--warn-bg);color:#6b4007}
.pvkx .res{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;padding:18px;border-radius:20px;background:var(--ember);color:#fff}
.pvkx .res div{display:flex;flex-direction:column-reverse;gap:2px}
.pvkx .res dt{font-size:12px;color:var(--przyg)}
.pvkx .res dd{font-family:var(--disp);font-weight:600;font-size:18px;line-height:1.2;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
.pvkx .res p{grid-column:1/-1;font-size:11.5px;color:var(--przyg)}

/* number fields with round steppers, as in the HV builder */
.pvkx .flds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:end}
@media (max-width:420px){.pvkx .flds{grid-template-columns:minmax(0,1fr)}}
.pvkx .fld{display:grid;gap:7px;min-width:0}
.pvkx .fld>label,.pvkx .fld>.l2{font-size:12.5px;font-weight:600;color:var(--ink2);line-height:1.35}
.pvkx .stp{display:flex;align-items:center;gap:4px;height:54px;padding:0 7px;border-radius:16px;background:var(--kafel);box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .2s,background-color .2s}
.pvkx .stp:focus-within{box-shadow:inset 0 0 0 1.5px var(--pom);background:#fff}
.pvkx .stp-b{flex:none;width:38px;height:38px;border:0;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(40,25,15,.1),inset 0 0 0 1px var(--line);font-size:19px;font-weight:400;line-height:1;color:var(--ink);transition:transform .12s,box-shadow .2s,color .2s}
.pvkx .stp-b:hover{color:var(--pom-ciem);box-shadow:0 3px 8px rgba(40,25,15,.12),inset 0 0 0 1px var(--soft-line)}
.pvkx .stp-b:active{transform:scale(.9)}
.pvkx .stp-b:focus-visible{outline:2px solid var(--pom);outline-offset:1px}
.pvkx .stp input{flex:1;min-width:0;width:100%;height:100%;border:0;background:transparent;text-align:right;font:600 17px var(--disp);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;outline:0;padding:0}
.pvkx .stp-u{flex:none;padding:0 6px 0 4px;color:var(--muted2);font-size:12.5px;font-weight:500;min-width:28px}
.pvkx .inp{width:100%;height:54px;border:0;border-radius:16px;padding:0 16px;background:var(--kafel);color:var(--ink);font:500 14px var(--txt);outline:0;box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .2s,background-color .2s}
.pvkx .inp:focus{box-shadow:inset 0 0 0 1.5px var(--pom);background:#fff}
.pvkx .inp::placeholder{color:var(--muted2);opacity:.85}
.pvkx .letter{display:inline-grid;place-items:center;width:20px;height:20px;margin-right:7px;border-radius:50%;background:var(--grad);color:#fff;font-size:10.5px;font-weight:700;vertical-align:1px}

/* switch rows */
.pvkx .sw{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;padding:2px 0}
.pvkx .sw input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.pvkx .sw-t{display:grid;gap:2px;min-width:0}
.pvkx .sw-t b{font-size:14px;font-weight:600}
.pvkx .sw-t small{font-size:12px;color:var(--muted);line-height:1.45}
.pvkx .sw-ui{flex:none;position:relative;width:50px;height:30px;border-radius:999px;background:var(--line2);transition:background .25s}
.pvkx .sw-ui::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.2);transition:transform .25s var(--ease)}
.pvkx .sw input:checked+.sw-ui{background:var(--grad)}
.pvkx .sw input:checked+.sw-ui::after{transform:translateX(20px)}
.pvkx .sw input:focus-visible+.sw-ui{outline:2px solid var(--pom);outline-offset:3px}

.pvkx details.sec>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px}
.pvkx details.sec>summary::-webkit-details-marker{display:none}
.pvkx details.sec>summary::after{content:"+";flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px #e0d9d3;font-size:20px;font-weight:400;line-height:1;color:var(--pom-ciem);transition:transform .3s var(--ease),background-color .2s}
.pvkx details.sec[open]>summary::after{transform:rotate(45deg);background:var(--soft)}
.pvkx .sum #stPro{padding:18px;border-radius:18px;background:var(--kafel);transition:background-color .2s,box-shadow .2s}
.pvkx .sum #stPro[open]{background:#fff;box-shadow:inset 0 0 0 1px #e6e0db,0 14px 32px rgba(40,25,15,.06)}
.pvkx .sum #stPro>summary h2{font-size:15.5px}
.pvkx .tchk{display:grid;gap:8px;font-size:13px}
.pvkx .tchk li{display:flex;gap:10px}
.pvkx .tchk li::before{content:"";flex:none;width:8px;height:8px;margin-top:6px;border-radius:50%;background:var(--ok)}
.pvkx .tchk li.bad::before{background:var(--bad)}

/* summary: the list opens on a dark ember card, like the LV advisor card */
.pvkx .sum{gap:16px}
.pvkx .sum-hero{position:relative;display:grid;gap:4px;padding:22px 22px 20px;border-radius:22px;color:#fff;background:var(--ember);overflow:hidden;isolation:isolate}
.pvkx .sum-hero::after{content:"";position:absolute;right:-30%;bottom:-120%;width:90%;aspect-ratio:1;border-radius:50%;z-index:-1;background:radial-gradient(closest-side,transparent 96.5%,rgba(255,140,60,.45) 98%,#ffe2c8 98.6%,rgba(255,140,60,.45) 99.2%,transparent 100%);opacity:.7}
.pvkx .pvk .sum-hero p.eb{color:var(--burs)}
.pvkx .sum-hero h2{font-family:var(--disp);font-weight:700;font-size:30px;line-height:1.08;letter-spacing:-.03em}
.pvkx .sum-hero code{font-size:12.5px;font-weight:600;color:var(--burs);overflow-wrap:anywhere}
.pvkx .sum-hero small{font-size:11.5px;color:var(--przyg);margin-top:8px}
.pvkx .pill{position:absolute;top:18px;right:18px;display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;font-size:11px;font-weight:600;background:#fff;color:var(--ok)}
.pvkx .pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pvkx .pill.warn{color:var(--warn)}.pvkx .pill.bad{color:var(--bad)}
.pvkx .pill{border:0;font-family:var(--txt);line-height:1.3;cursor:pointer;transition:transform .15s var(--ease),box-shadow .2s}
.pvkx .pill::after{content:"";width:5px;height:5px;margin-left:3px;border:solid currentColor;border-width:0 1.6px 1.6px 0;transform:translateY(-2px) rotate(45deg);opacity:.75;transition:transform .2s var(--ease)}
.pvkx .pill[aria-expanded="true"]::after{transform:translateY(1px) rotate(225deg)}
.pvkx .pill:not(:disabled):hover{transform:translateY(-1px);filter:brightness(1.2)}
/* the pill says the state in colour: green = complete, amber = to check, red = to fix; nothing to open when complete */
.pvkx .pill{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,236,222,.3)}
.pvkx .pill.ok{background:rgba(95,211,138,.16);color:#9be8b6;box-shadow:inset 0 0 0 1px rgba(95,211,138,.45)}
.pvkx .pill.ok::before{width:9px;height:5px;border-radius:0;background:none;border:solid currentColor;border-width:0 0 2px 2px;transform:translateY(-1px) rotate(-45deg)}
.pvkx .pill.warn{background:rgba(255,179,107,.16);color:#ffc895;box-shadow:inset 0 0 0 1px rgba(255,179,107,.5)}
.pvkx .pill.bad{background:rgba(255,110,92,.18);color:#ffa597;box-shadow:inset 0 0 0 1px rgba(255,110,92,.55)}
.pvkx .pill:disabled{cursor:default;opacity:1}
.pvkx .pill:disabled::after{content:none}
/* the popover matches the dark list card; red and amber say what kind of note it is */
.pvkx .pvk .pop{background:linear-gradient(180deg,#26130a,#160904);color:#fff;box-shadow:0 0 0 1px rgba(255,236,222,.14),0 26px 50px -18px rgba(13,7,6,.65)}
.pvkx .pvk .pop::before{background:#26130a;box-shadow:-1px -1px 0 rgba(255,236,222,.14)}
.pvkx .pvk .pop h4{color:#ffa597}.pvkx .pvk .pop h4.w{color:#ffc895}
.pvkx .pvk .pop li{color:var(--opis)}
.pvkx .pvk .pop li::before{background:#ffb36b}.pvkx .pvk .pop li.bad::before{background:#ff7a66}
.pvkx .pvk .pop .go{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,236,222,.25)}
.pvkx .pvk .pop .go:hover{background:rgba(255,255,255,.18)}
.pvkx .pvk .pop .go:focus-visible{outline-color:var(--burs)}
.pvkx .pill:focus-visible{outline:2px solid var(--burs);outline-offset:2px}
.pvkx .sum{position:relative}
.pvkx .pop{position:absolute;z-index:30;width:min(380px,100%);padding:16px 16px 6px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--line),0 26px 50px -18px rgba(40,25,15,.4);opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top right;transition:opacity .18s var(--ease),transform .22s var(--ease)}
.pvkx .pop.on{opacity:1;transform:none}
.pvkx .pop::before{content:"";position:absolute;top:-6px;right:var(--ar,30px);width:12px;height:12px;background:#fff;transform:rotate(45deg);box-shadow:-1px -1px 0 var(--line)}
.pvkx .pop h4{margin:0;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--bad)}
.pvkx .pop h4.w{color:var(--warn)}
.pvkx .pop ul{display:grid;gap:12px;margin:10px 0 14px;padding:0;list-style:none}
.pvkx .pop li,.pvkx .pvk .checks li{display:grid;grid-template-columns:8px minmax(0,1fr);gap:6px 10px;align-items:start;font-size:13px;line-height:1.45;color:var(--ink2)}
.pvkx .pop li::before{content:"";width:8px;height:8px;margin-top:6px;border-radius:50%;background:var(--warn)}
.pvkx .pop li.bad::before{background:var(--bad)}
.pvkx .pop .ok{margin:0 0 10px;font-size:13px;color:var(--ok)}
.pvkx .go{grid-column:2;justify-self:start;display:inline-flex;align-items:center;gap:6px;border:0;border-radius:999px;padding:5px 12px;background:var(--soft);color:var(--pom-ciem);font:600 12px var(--txt);cursor:pointer;transition:background-color .2s,transform .12s}
.pvkx .go:hover{background:#ffe2cc}
.pvkx .go:active{transform:scale(.96)}
.pvkx .go:focus-visible{outline:2px solid var(--pom);outline-offset:2px}
.pvkx .pvk .checks li>span{display:grid;gap:6px;justify-items:start}
.pvkx .flash{border-radius:16px;animation:pvFlash 1.8s var(--ease)}
@keyframes pvFlash{0%,100%{box-shadow:0 0 0 0 rgba(240,106,37,0)}15%,45%{box-shadow:0 0 0 4px rgba(240,106,37,.4)}}
.pvkx .lgrp+.lgrp{margin-top:20px}
.pvkx .lgrp h3{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--pom-ciem)}
.pvkx .lgrp h3 em{font-style:normal;letter-spacing:0;text-transform:none;font-size:11px;font-weight:600;color:var(--muted2)}
.pvkx .lgrp .g-note{font-size:12px;color:var(--muted2);margin-top:2px!important}
.pvkx .rows li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 14px;padding:12px 0;border-bottom:1px solid var(--line)}
.pvkx .r-code{font-size:13.5px;font-weight:700;letter-spacing:.01em;overflow-wrap:anywhere}
.pvkx .r-name{font-size:13px;line-height:1.45;color:var(--ink2)}
.pvkx .r-note{font-size:11.5px;color:var(--muted2);line-height:1.45}
.pvkx .r-note code{font-size:11.5px;color:var(--ink2)}
.pvkx .r-qty{grid-column:2;grid-row:1/span 3;text-align:right;font-family:var(--disp);font-weight:600;font-size:15px;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.pvkx .r-qty small{display:block;font-family:var(--txt);font-size:11.5px;font-weight:500;letter-spacing:0;color:var(--muted2)}
.pvkx .tag{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:600;vertical-align:2px;background:var(--kafel);color:var(--muted)}
.pvkx .tag.s{background:var(--warn-bg);color:var(--warn)}
.pvkx .tag.z{background:var(--soft);color:var(--pom-ciem)}
.pvkx .rows li.new .r-code{color:var(--muted)}
.pvkx .empty{padding:18px;border-radius:16px;background:var(--kafel);color:var(--muted);font-size:14px}
.pvkx .checks{display:grid;gap:9px;padding:18px;border-radius:18px;background:var(--warn-bg)}
.pvkx .checks.calm{background:var(--kafel)}
.pvkx .checks h3{font-size:14px;font-weight:600}
.pvkx .checks ul{display:grid;gap:8px;font-size:13px;line-height:1.5;color:var(--ink2)}
.pvkx .checks li{display:flex;gap:10px}
.pvkx .checks li::before{content:"";flex:none;width:8px;height:8px;margin-top:6px;border-radius:50%;background:var(--warn)}
.pvkx .checks li.bad::before{background:var(--bad)}.pvkx .checks li.info::before{background:var(--muted2)}
.pvkx .confirm{position:relative;display:flex;gap:12px;align-items:flex-start;cursor:pointer;font-size:13px;color:var(--ink2)}
.pvkx .confirm input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.pvkx .confirm .box{flex:none;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line2);transition:background .2s,box-shadow .2s}
.pvkx .confirm input:checked+.box{background:var(--grad);box-shadow:none}
.pvkx .confirm input:checked+.box::after{content:"";width:6px;height:11px;border:solid #fff;border-width:0 2.2px 2.2px 0;transform:translateY(-1px) rotate(45deg)}
.pvkx .confirm input:focus-visible+.box{outline:2px solid var(--pom);outline-offset:2px}

/* buttons: pills as on the LV and HV pages */
.pvkx .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:999px;border:1px solid var(--line2);background:#fff;color:var(--ink);font-weight:600;font-size:14px;line-height:1.2;transition:transform .15s var(--ease),border-color .2s,background-color .2s,box-shadow .2s,filter .2s,opacity .2s}
.pvkx .btn:hover{border-color:var(--ink);transform:translateY(-1px)}
.pvkx .btn:active{transform:scale(.98)}
.pvkx .btn:focus-visible{outline:2px solid var(--pom);outline-offset:3px}
.pvkx .btn.primary{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 12px 26px -10px rgba(240,106,37,.55)}
.pvkx .btn.primary:hover{filter:brightness(1.07)}
.pvkx .btn.primary::after{content:"→";font-weight:700;transition:transform .2s var(--ease)}
.pvkx .btn.primary:hover::after{transform:translateX(3px)}
.pvkx .btn.primary.done-btn::after{content:none}
.pvkx .btn[disabled]{opacity:.42;cursor:not-allowed;transform:none;filter:none;box-shadow:none}
.pvkx .btn.ghost{background:transparent;border-color:var(--line2);color:var(--ink)}
.pvkx .btn.hide{visibility:hidden}
.pvkx #pvkCart{width:100%;min-height:54px;font-size:15px}
.pvkx .acts{display:flex;flex-wrap:wrap;gap:8px}
.pvkx .acts .btn{flex:1 1 120px}
.pvkx .msg{font-size:13px;color:var(--ok);min-height:1.4em}
.pvkx .foot{font-size:12px;color:var(--muted2);line-height:1.55}
.pvkx .center{text-align:center}
.pvkx .pvk[data-mode="podglad"] .only-shop{display:none!important}

/* wizard: one step at a time */
.pvkx .wz-head{flex:none;padding:18px clamp(18px,2.4vw,30px) 8px;border-bottom:1px solid var(--line)}
.pvkx .wz-meta{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pvkx .wz-step{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--pom-ciem)}
.pvkx .wz-list{border:0;background:var(--kafel);color:var(--ink);border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:600;transition:background-color .2s,transform .2s}
.pvkx .wz-list:hover{background:var(--kafel2);transform:translateY(-1px)}
.pvkx .wz-list:focus-visible{outline:2px solid var(--pom);outline-offset:2px}
.pvkx .wz-prog{display:flex;gap:4px;margin-top:8px}
.pvkx .wz-prog button{flex:1;border:0;background:transparent;padding:9px 0;cursor:pointer}
.pvkx .wz-prog button i{display:block;position:relative;height:4px;border-radius:2px;background:var(--kafel2);overflow:hidden}
.pvkx .wz-prog button i::after{content:"";position:absolute;inset:0;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.pvkx .wz-prog button.done i::after,.pvkx .wz-prog button.cur i::after{transform:scaleX(1)}
.pvkx .wz-prog button:hover i{background:var(--line2)}
.pvkx .wz-prog button:focus-visible{outline:2px solid var(--pom);outline-offset:2px;border-radius:4px}
.pvkx .wz-body>.sec:not(.cur){display:none}
.pvkx .wz-body:not(.first)>.p-head{display:none}
.pvkx .wz-body>.sec{padding-block:24px 30px}
.pvkx .wz-body>.sec>h2{font-size:23px}
.pvkx .wz-body>.sec.enter{animation:wzIn .5s var(--ease) both}
@keyframes wzIn{from{opacity:0;transform:translateX(calc(var(--dir,1)*32px))}to{opacity:1;transform:none}}
.pvkx .pbar{position:sticky;bottom:0;z-index:20;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px clamp(16px,2.4vw,26px) calc(12px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-top:1px solid var(--line);border-radius:0 0 26px 26px}
.pvkx .pb-mid{display:grid;min-width:0;text-align:center}
.pvkx .pb-mid b{font-family:var(--disp);font-size:17px;font-weight:600;line-height:1.1;letter-spacing:-.02em;white-space:nowrap}
.pvkx .pb-mid span{font-size:11px;line-height:1.3;color:var(--muted2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:480px){.pvkx .pb-mid{visibility:hidden}}
.pvkx #wzNext{min-width:150px}
@media (min-width:1024px){
  .pvkx .panel{position:sticky;top:calc(var(--top) + 16px + env(safe-area-inset-top,0px));height:calc(100dvh - var(--top) - 32px - env(safe-area-inset-top,0px));min-height:580px;display:flex;flex-direction:column;overflow:hidden}
  .pvkx .wz-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
  .pvkx .pbar{position:static;flex:none;border-radius:0}
}
@media (max-width:1023px){
  .pvkx .pbar{position:fixed;left:0;right:0;bottom:0;z-index:35;border-radius:0;padding-inline:12px;gap:10px;transition:transform .4s var(--ease)}
  .pvkx .pbar.away{transform:translateY(110%)}
  .pvkx .pvk{padding-bottom:84px}
  .pvkx #wzNext{min-width:0}
}
/* battery on the stage and in the route */
.pvkx .lineup.has-bat{--lh:clamp(180px,29vh,340px);gap:clamp(12px,2.8vw,44px)}
@media (max-width:1023px){.pvkx .lineup.has-bat{--lh:clamp(112px,33vw,220px);gap:8px}}
@media (max-width:600px){.pvkx .lineup.has-bat .item figcaption{height:34px;max-width:96px}.pvkx .lineup.has-bat .item figcaption b{white-space:normal;font-size:11px;line-height:1.25}.pvkx .lineup.has-bat .item figcaption span{display:none}.pvkx .lineup.has-bat{--cap:46px}}
.pvkx #kBat img,.pvkx #kBat .obj>svg{display:block;height:calc(var(--lh) * var(--bf,1))!important;width:auto!important;max-width:34vw!important;object-fit:contain;filter:drop-shadow(0 26px 30px rgba(0,0,0,.45))}
.pvkx #kBat .cnt{position:absolute;z-index:2;top:-8px;right:-12px;padding:3px 10px;border-radius:999px;background:#2a1408;border:1px solid rgba(255,179,107,.5);box-shadow:0 6px 16px rgba(0,0,0,.4);font-family:var(--disp);font-size:12px;font-weight:600;color:#fff}
.pvkx #kBat .obj{transition:transform .7s var(--ease)}
.pvkx #vKit[data-spot="bat"] #kDc,.pvkx #vKit[data-spot="bat"] #kAc,.pvkx #vKit[data-spot="bat"] #kInv{opacity:.3}
.pvkx #vKit[data-spot="bat"] #kBat .obj{transform:scale(1.06)}
.pvkx #vKit[data-spot="inv"] #kBat{opacity:.28}
.pvkx .stp.ro{justify-content:flex-end;gap:6px;padding:0 10px 0 16px}
.pvkx .stp.ro b{font-family:var(--disp);font-size:17px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pvkx #bBatSec label[data-v]{display:none}
.pvkx #bBatSec[data-v="lv"] label[data-v="lv"],.pvkx #bBatSec[data-v="hv"] label[data-v="hv"]{display:block}
.pvkx .route .run.vrun{grid-column:5;grid-row:2;justify-self:center;width:86px;display:grid;grid-template-columns:2px max-content;justify-content:center;justify-items:start;align-items:center;column-gap:12px;row-gap:0;padding:12px 0 8px;text-align:left}
.pvkx .route .vrun .ln{grid-row:1/span 3;width:2px;height:62px;margin:0}
.pvkx .route .vrun .ln i{background:repeating-linear-gradient(180deg,#ff9a4d 0 6px,transparent 6px 14px);animation-name:pvkRunY}
.pvkx .route .vrun small{max-width:none;white-space:nowrap}
.pvkx .route .stop.bat{grid-column:5;grid-row:3;justify-self:center}
@media (max-width:760px){.pvkx .route .run.vrun{grid-column:auto;grid-row:auto;justify-self:stretch;width:auto;grid-template-columns:52px auto minmax(0,1fr);column-gap:14px;padding:6px 0}.pvkx .route .vrun .ln{height:44px;margin:0 auto}.pvkx .route .stop.bat{grid-column:auto;grid-row:auto;justify-self:stretch}}
/* prices and cart */
.pvkx .r-qty{display:grid;justify-items:end;align-content:start;gap:2px}
.pvkx .r-qty i{font-style:normal;font-family:var(--txt);font-size:12.5px;font-weight:600;color:var(--muted2)}
.pvkx .r-qty small{font-family:var(--txt);font-size:11.5px;font-weight:500;letter-spacing:0;color:var(--muted2);white-space:nowrap}
.pvkx .pvk .lgrp h3 em.g-sum{font-family:var(--disp);font-size:13px;font-weight:600;letter-spacing:-.01em;text-transform:none;color:var(--ink)}
.pvkx .sum-hero h2{font-variant-numeric:tabular-nums}
.pvkx .pvk .sum-net{margin-top:2px!important;font-size:12.5px;color:var(--przyg)}
.pvkx .tot{display:grid;gap:4px;padding:16px 18px;border-radius:18px;background:var(--kafel)}
.pvkx .tot div{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.pvkx .tot dt{font-size:14px;font-weight:600}
.pvkx .tot dd{font-family:var(--disp);font-size:20px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pvkx .tot div.sm dt,.pvkx .tot div.sm dd{font-family:var(--txt);font-size:12.5px;font-weight:500;letter-spacing:0;color:var(--muted2)}
.pvkx .tot p{font-size:12.5px;color:var(--muted2)}
.pvkx .opt.cb .o-v{font-family:var(--disp);font-size:12.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink);transition:color .2s}
.pvkx .opt.cb input:not(:checked)+.o-b .o-v{color:var(--muted2)}
.pvkx #pvkCart.busy{opacity:.8;cursor:progress}
.pvkx .sheet{position:fixed;inset:0;z-index:60}
.pvkx .sh-bg{position:absolute;inset:0;background:rgba(13,7,6,.45);opacity:0;transition:opacity .3s var(--ease)}
.pvkx .sh-p{position:absolute;top:0;right:0;bottom:0;display:flex;flex-direction:column;width:min(460px,100%);background:#fff;box-shadow:-30px 0 60px -30px rgba(13,7,6,.5);transform:translateX(100%);transition:transform .4s var(--ease)}
.pvkx .sheet.on .sh-bg{opacity:1}.pvkx .sheet.on .sh-p{transform:none}
.pvkx .sh-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:22px 22px 14px;border-bottom:1px solid var(--line)}
.pvkx .sh-h h2{font-family:var(--disp);font-size:22px;font-weight:700;letter-spacing:-.02em}
.pvkx .sh-x{flex:none;width:38px;height:38px;border:0;border-radius:50%;background:var(--kafel);font-size:22px;line-height:1}
.pvkx .sh-x:hover{background:var(--kafel2)}
.pvkx .sh-b{flex:1;min-height:0;overflow:auto;padding:6px 22px 18px}
.pvkx .sh-b h3{margin:18px 0 6px!important;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--pom-ciem)}
.pvkx .sh-b h3.off{color:var(--muted2)}
.pvkx .sh-b .lead{margin-top:14px!important;padding:12px 14px;border-radius:14px;background:var(--soft);font-size:13px;line-height:1.5;color:var(--ink2)}
.pvkx .sh-b .lead.ok{background:var(--ok-bg);color:#1d4a30}
.pvkx .sh-b ul li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.pvkx .sh-b ul li b{font-weight:600;line-height:1.35}
.pvkx .sh-b ul li small{grid-column:1;font-size:11.5px;color:var(--muted2)}
.pvkx .sh-b ul li span{grid-column:2;grid-row:1/span 2;text-align:right;font-family:var(--disp);font-size:14px;font-weight:600;white-space:nowrap}
.pvkx .sh-b ul.off li{opacity:.65}
.pvkx .sh-b .note{margin-top:10px!important;font-size:12.5px;line-height:1.5;color:var(--muted)}
.pvkx .sh-b .note a{color:var(--pom-ciem);font-weight:600}
.pvkx .sh-f{display:grid;gap:10px;padding:16px 22px calc(18px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:#fff}
.pvkx .sh-f .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13px;color:var(--muted)}
.pvkx .sh-f .row b{font-family:var(--disp);font-size:20px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.pvkx .sh-f .acts2{display:flex;gap:8px}.pvkx .sh-f .acts2>*{flex:1}
.pvkx a.btn{text-decoration:none}
.pvkx .cbar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:flex;align-items:center;gap:14px;padding:12px max(16px,calc((100% - 1280px)/2)) calc(12px + env(safe-area-inset-bottom,0px));background:#171310;color:#fff;box-shadow:0 -14px 40px rgba(13,7,6,.35);transform:translateY(110%);transition:transform .45s var(--ease)}
.pvkx .cbar.on{transform:none}
.pvkx .cb-ok{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--grad);font-weight:700}
.pvkx .cb-t{display:grid;min-width:0;flex:1}
.pvkx .cb-t b{font-size:14.5px;font-weight:600}
.pvkx .cb-t span{font-size:12.5px;color:var(--przyg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pvkx .cbar .btn{min-height:42px}
.pvkx .cbar .btn.ghost{color:#fff;border-color:rgba(255,236,222,.35)}
.pvkx .cb-x{flex:none;width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:20px;line-height:1}
@media (max-width:1023px){.pvkx .cbar{bottom:calc(72px + env(safe-area-inset-bottom,0px));padding-bottom:12px;flex-wrap:wrap}.pvkx .cbar .cb-t{flex-basis:calc(100% - 100px)}.pvkx .cbar .btn{flex:1}}
@media (max-width:560px){.pvkx .sh-p{top:auto;width:100%;max-height:92dvh;border-radius:22px 22px 0 0;transform:translateY(100%)}}
/* only the electrics on the stage: boxes at full height, cables between them */
.pvkx .pvk .lineup{--lh:clamp(170px,min(30vh,19vw),360px);gap:clamp(12px,3vw,48px)}
@media (max-width:1023px){.pvkx .pvk .lineup{--lh:clamp(110px,33vw,220px);gap:12px}}
.pvkx #kCab svg{height:calc(var(--lh) * .56);width:auto;filter:drop-shadow(0 18px 22px rgba(0,0,0,.45))}
/* step header: the LV/HV type, a visible step count and the list as a price card */
.pvkx .wz-head{padding:18px clamp(18px,2.4vw,30px) 10px}
.pvkx .wz-meta{align-items:center;gap:14px}
.pvkx .wz-where{display:grid;gap:4px;min-width:0}
.pvkx .pvk .wz-step{font-family:var(--disp);font-size:18px;font-weight:600;line-height:1.1;letter-spacing:-.02em;text-transform:none;color:var(--ink)}
.pvkx .wz-step b{font-weight:700;color:var(--pom)}
.pvkx .wz-name{font-size:12.5px;line-height:1.35;color:var(--muted2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pvkx .pvk .wz-list{flex:none;display:flex;align-items:center;gap:10px;padding:7px 12px 7px 7px;border:0;border-radius:16px;background:var(--ember);color:#fff;box-shadow:0 12px 26px -16px rgba(13,7,6,.7);transition:transform .2s var(--ease),box-shadow .2s}
.pvkx .pvk .wz-list:hover{background:var(--ember);transform:translateY(-1px);box-shadow:0 16px 30px -16px rgba(13,7,6,.8)}
.pvkx .wz-list:focus-visible{outline:2px solid var(--pom);outline-offset:2px}
.pvkx .wl-ic{position:relative;display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:rgba(255,255,255,.1);color:var(--burs)}
.pvkx .wl-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pvkx .wl-ic i{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--grad);box-shadow:0 0 0 2px #2a0d04;font:700 10.5px/19px var(--txt);font-style:normal;color:#fff;text-align:center}
.pvkx .wl-t{display:grid;text-align:left;line-height:1.15}
.pvkx .wl-t small{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--przyg);white-space:nowrap}
.pvkx .wl-t b{font-family:var(--disp);font-size:16px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.pvkx .wl-t b.bump{animation:wlBump .5s var(--ease)}
@keyframes wlBump{0%{transform:none}35%{transform:scale(1.08);color:var(--burs)}100%{transform:none}}
.pvkx .wl-go{font-size:20px;line-height:1;color:var(--burs);transition:transform .2s var(--ease)}
.pvkx .wz-list:hover .wl-go{transform:translateX(2px)}
.pvkx .wz-prog{gap:5px;margin-top:14px}
.pvkx .wz-prog button i{height:5px;border-radius:3px}
@media (max-width:420px){.pvkx .pvk .wz-step{font-size:16px}.pvkx .wl-t b{font-size:15px}.pvkx .wl-go{display:none}}
.pvkx .excl{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;padding:13px 16px;border-radius:16px;background:var(--soft);font-size:13px;line-height:1.5;color:var(--ink2)}
.pvkx .excl::before{content:"i";display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--grad);color:#fff;font:700 12px/1 var(--disp)}
.pvkx .excl b{font-weight:600}
.pvkx .specs dd.av-s{color:var(--ok)}.pvkx .specs dd.av-s::before{content:"● ";font-size:10px;vertical-align:1px}.pvkx .specs dd.av-n{color:var(--warn)}.pvkx .specs dd.av-z{color:var(--muted)}
/* QA fixes */
.pvkx .stage{container-type:inline-size}
.pvkx .views,.pvkx .view{min-width:0}
.pvkx .pvk .lineup{--lh:clamp(150px,min(30vh,32cqw),360px);gap:clamp(12px,3cqw,48px)}
@media (max-width:1023px){.pvkx .pvk .lineup{--lh:clamp(96px,min(33vw,32cqw),220px)}}
@media (max-width:480px){.pvkx .pvk .lineup .item figcaption span{display:none}.pvkx .pvk .lineup .item figcaption{height:20px}.pvkx .pvk .lineup{--cap:32px}}
.pvkx .pvk .checks li>span .go{grid-column:auto}
.pvkx .go{white-space:nowrap;max-width:100%}
.pvkx .sh-f .acts2{flex-wrap:wrap}.pvkx .sh-f .acts2>*{flex:1 1 150px;white-space:nowrap}
.pvkx .tot dd{white-space:nowrap}
.pvkx .acts .btn{white-space:nowrap;padding:0 14px}
.pvkx #wzNext{white-space:nowrap}
@media (max-width:420px){.pvkx .pill{position:static;justify-self:start;margin-top:12px}.pvkx #wzNext{padding:0 16px;font-size:13.5px}.pvkx .pbar .btn.ghost{padding:0 14px}}
/* motion details */
.pvkx .item img.swap{animation:wzSwap .7s var(--ease)}
@keyframes wzSwap{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
.pvkx .boxwrap svg{animation:wzPop .5s var(--ease)}
@keyframes wzPop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes wzFade{from{opacity:0}to{opacity:1}}
.pvkx #kInv .obj{transition:transform .7s var(--ease)}
.pvkx #vKit[data-spot="inv"] #kDc,.pvkx #vKit[data-spot="inv"] #kAc{opacity:.28}
.pvkx #vKit[data-spot="inv"] #kInv .obj{transform:scale(1.06)}
.pvkx .sum.reveal .sum-hero{animation:wzHero .6s var(--ease) both}
@keyframes wzHero{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.pvkx .sum.reveal .rows li{animation:wzRow .5s var(--ease) both;animation-delay:calc(var(--i,0)*30ms + .15s)}
@keyframes wzRow{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pvkx .dist-tip{display:none}
@media (max-width:1023px){.pvkx .dist-tip:not([hidden]){display:block;font-size:13px;line-height:1.55;padding:12px 14px;border-radius:16px;background:var(--soft);color:var(--ink2);animation:pvkIn .3s var(--ease)}.pvkx .rfocus{margin-bottom:16px}}

/* ---------- below the configurator: separate bands, as on the LV and HV pages ---------- */
.pvkx .dol{display:grid;gap:clamp(12px,1.4vw,16px);max-width:1320px;margin-inline:auto;padding:0 20px 40px}
@media (max-width:1023px){.pvkx .dol{padding:0 10px 24px}}
.pvkx .dl-k{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--pom-ciem)}
.pvkx .dl-h2{font-family:var(--disp);font-weight:700;font-size:clamp(30px,3.6vw,52px);line-height:1.06;letter-spacing:-.025em;text-wrap:balance}
.pvkx .dl-k+.dl-h2{margin-top:14px!important}
.pvkx .dl-wstep{max-width:38em;margin:18px auto 0!important;font-size:clamp(16px,1.4vw,20px);line-height:1.6;color:var(--muted);text-wrap:pretty}
.pvkx .dl-head{text-align:center;max-width:880px;margin:0 auto}
.pvkx .dl-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:220px;min-height:52px;padding:0 30px;border-radius:999px;border:1px solid transparent;font-size:15.5px;font-weight:600;line-height:1.2;text-decoration:none;transition:background-color .2s,border-color .2s,color .2s,transform .2s,filter .2s}
.pvkx .dl-btn:active{transform:scale(.98)}
.pvkx .dl-btn:focus-visible{outline:2px solid var(--pom);outline-offset:3px}
.pvkx .dl-btn.pom{background:var(--grad);color:#fff;box-shadow:0 12px 26px rgba(240,106,37,.3)}
.pvkx .dl-btn.pom:hover{filter:brightness(1.07)}
.pvkx .dl-btn.jasny{background:#fff;color:#2a0d04}
.pvkx .dl-btn.jasny:hover{background:#ffe7d6}
.pvkx .dl-btn.obrys-j{border-color:rgba(255,236,222,.35);color:#fff}
.pvkx .dl-btn.obrys-j:hover{border-color:#fff}

/* 1. the path of the current: the customer's own kit on a lit floor */
.pvkx .dl-flow{position:relative;isolation:isolate;overflow:hidden;padding:clamp(52px,7vw,104px) clamp(16px,3vw,48px) clamp(40px,5vw,72px);border-radius:28px;background:radial-gradient(75% 60% at 50% 86%,#3c1e10 0%,#1e0f09 46%,#0d0706 100%);color:#fff;text-align:center}
.pvkx .dl-flow::before{content:"";position:absolute;inset:-20%;z-index:-1;pointer-events:none;background:radial-gradient(30% 24% at 50% 10%,rgba(255,170,110,.14),transparent 70%),radial-gradient(34% 30% at 16% 74%,rgba(240,106,37,.12),transparent 70%),radial-gradient(34% 30% at 86% 66%,rgba(240,106,37,.1),transparent 70%);animation:pvDryf 30s ease-in-out infinite alternate}
.pvkx .dl-flow .dl-k{color:var(--burs)}
.pvkx .dl-flow .dl-wstep{color:var(--opis)}
.pvkx .flow{--fh:clamp(120px,14vw,200px);position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(8px,2vw,28px);max-width:1180px;margin:clamp(44px,5vw,76px) auto 0}
.pvkx .flow::before{content:"";position:absolute;left:-6%;right:-6%;top:var(--fh);height:1px;background:linear-gradient(90deg,transparent,rgba(255,214,176,.38) 14%,rgba(255,214,176,.38) 86%,transparent)}
.pvkx .flow::after{content:"";position:absolute;left:10%;right:10%;top:calc(var(--fh) + 30px);height:2px;background:repeating-linear-gradient(90deg,#ff9a4d 0 8px,transparent 8px 18px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);opacity:.75;animation:pvFlow 1.3s linear infinite}
@keyframes pvFlow{to{background-position:18px 0}}
@keyframes pvFlowY{to{background-position:0 18px}}
.pvkx .flow li{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0}
.pvkx .fl-obj{position:relative;display:flex;align-items:flex-end;justify-content:center;width:100%;height:var(--fh);isolation:isolate}
.pvkx .fl-obj::after{content:"";position:absolute;left:12%;right:12%;bottom:-9px;height:18px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent);z-index:-1}
.pvkx .fl-obj img{display:block;height:100%!important;width:auto!important;max-width:100%!important;object-fit:contain;filter:drop-shadow(0 22px 26px rgba(0,0,0,.45))}
.pvkx .fl-obj img.wide{height:66%!important}
.pvkx .fl-obj svg{width:auto;max-width:100%;filter:drop-shadow(0 18px 22px rgba(0,0,0,.42))}
.pvkx .fl-inv .fl-obj::before{content:"";position:absolute;left:50%;bottom:0;width:calc(var(--fh) * 2.6);aspect-ratio:1;border-radius:50%;z-index:-2;pointer-events:none;transform:translate(-50%,50%);background:radial-gradient(closest-side,transparent 97%,rgba(255,140,60,.5) 98.2%,#ffe2c8 98.8%,rgba(255,140,60,.5) 99.4%,transparent 100%);-webkit-mask-image:conic-gradient(from 270deg,transparent 0deg,rgba(0,0,0,.25) 35deg,#000 90deg,rgba(0,0,0,.25) 145deg,transparent 180deg);mask-image:conic-gradient(from 270deg,transparent 0deg,rgba(0,0,0,.25) 35deg,#000 90deg,rgba(0,0,0,.25) 145deg,transparent 180deg);animation:pvLuk 16s ease-in-out infinite alternate}
.pvkx .fl-n{position:relative;z-index:1;display:grid;place-items:center;width:32px;height:32px;margin-top:15px;border-radius:50%;background:var(--grad);box-shadow:0 0 0 6px #1e0f09,0 8px 20px rgba(240,106,37,.4);font-family:var(--disp);font-size:13px;font-weight:700;color:#fff}
.pvkx .flow b{display:block;margin-top:16px;font-family:var(--disp);font-weight:600;font-size:clamp(14px,1.3vw,17px);line-height:1.25;color:#fff}
.pvkx .flow p{margin-top:8px!important;max-width:15em;font-size:13.5px;line-height:1.55;color:var(--przyg)}
@media (max-width:760px){
  .pvkx .flow{--fh:84px;grid-template-columns:minmax(0,1fr);gap:18px;max-width:440px;text-align:left}
  .pvkx .flow::before{display:none}
  .pvkx .flow::after{left:47px;right:auto;top:24px;bottom:24px;width:2px;height:auto;background:repeating-linear-gradient(180deg,#ff9a4d 0 8px,transparent 8px 18px);-webkit-mask-image:linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);animation-name:pvFlowY}
  .pvkx .flow li{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:16px;align-items:center;text-align:left}
  .pvkx .fl-obj{grid-row:1/span 3;height:96px;padding:10px;border-radius:24px;background:#24120a;box-shadow:inset 0 0 0 1px rgba(255,236,222,.12);align-items:center}
  .pvkx .fl-obj::after,.pvkx .fl-inv .fl-obj::before{display:none}
  .pvkx .fl-n{display:none}
  .pvkx .flow b{margin-top:0;font-size:16px}
  .pvkx .flow p{max-width:none;margin-top:4px!important}
}

/* 2. what each part does: Tesla-like feature rows with the customer's boxes */
.pvkx .dl-czesci{padding:clamp(56px,7vw,104px) clamp(18px,3vw,48px);border-radius:28px;background:#fff}
.pvkx .cz{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,80px);align-items:center;max-width:1120px;margin:clamp(44px,5vw,80px) auto 0}
.pvkx .cz-r .cz-fig{order:2}
.pvkx .cz-fig{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:5/4;border-radius:24px;background:radial-gradient(70% 70% at 50% 100%,#ffffff,#efece8 72%);overflow:hidden;padding:clamp(22px,4vw,52px)}
.pvkx .cz-fig svg{width:100%;height:100%;filter:drop-shadow(0 26px 30px rgba(40,25,15,.18));transition:transform .8s var(--ease)}
.pvkx .cz:hover .cz-fig svg{transform:scale(1.03)}
.pvkx .cz-bat{align-items:flex-end}
.pvkx .cz-bat img{display:block;height:92%!important;width:auto!important;max-width:90%!important;object-fit:contain;filter:drop-shadow(0 26px 30px rgba(40,25,15,.2));transition:transform .8s var(--ease)}
.pvkx .cz:hover .cz-bat img{transform:scale(1.03)}
.pvkx .cz-txt h3{font-family:var(--disp);font-weight:700;font-size:clamp(24px,2.6vw,36px);line-height:1.1;letter-spacing:-.025em;margin-top:12px!important;text-wrap:balance}
.pvkx .cz-txt>p:not(.dl-k){margin-top:14px!important;font-size:16px;line-height:1.65;color:var(--muted)}
.pvkx .cz-l{margin-top:26px!important;border-top:1px solid var(--line)}
.pvkx .cz-l div{padding:16px 0;border-bottom:1px solid var(--line)}
.pvkx .cz-l dt{font-size:15.5px;font-weight:600}
.pvkx .cz-l dd{margin-top:4px!important;font-size:14.5px;line-height:1.6;color:var(--muted)}
@media (max-width:860px){.pvkx .cz{grid-template-columns:minmax(0,1fr);gap:24px}.pvkx .cz-r .cz-fig{order:0}.pvkx .cz-fig{aspect-ratio:4/3}}

/* 3. three steps on a dashed line, as in "Jak skompletować zestaw" */
.pvkx .dl-kroki{padding:clamp(48px,6vw,88px) clamp(14px,2.4vw,36px);text-align:center}
.pvkx .kr{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,40px);max-width:1040px;margin:clamp(36px,4vw,56px) auto 0;counter-reset:kr}
.pvkx .kr::before{content:"";position:absolute;left:16.6%;right:16.6%;top:27px;height:2px;background:repeating-linear-gradient(90deg,#e8a072 0 8px,transparent 8px 16px);animation:pvFlow 1.6s linear infinite}
.pvkx .kr li{position:relative;counter-increment:kr;display:flex;flex-direction:column;align-items:center}
.pvkx .kr li::before{content:counter(kr);display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--grad);box-shadow:0 0 0 8px var(--page),0 12px 26px rgba(240,106,37,.35);font-family:var(--disp);font-size:20px;font-weight:700;color:#fff}
.pvkx .kr b{display:block;margin-top:22px;font-family:var(--disp);font-weight:600;font-size:19px;line-height:1.25}
.pvkx .kr p{margin-top:10px!important;max-width:22em;font-size:15px;line-height:1.6;color:var(--muted)}
.pvkx .dl-cta{margin-top:clamp(32px,4vw,52px)}
@media (max-width:700px){.pvkx .kr{grid-template-columns:minmax(0,1fr);gap:28px}.pvkx .kr::before{display:none}}

/* 4. questions beside the advisor card (LV and HV page ending) */
.pvkx .dl-faq{padding:clamp(48px,6vw,88px) clamp(14px,2.4vw,36px);border-radius:28px;background:#fff}
.pvkx .faq-uklad{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-areas:"t t" "w w" "d l";gap:0 clamp(24px,4vw,56px);max-width:1120px;margin:0 auto;align-items:start}
.pvkx .faq-uklad>.dl-h2{grid-area:t;text-align:center}
.pvkx .faq-uklad>.dl-wstep{grid-area:w;margin:18px auto clamp(30px,4vw,48px)!important;text-align:center}
.pvkx .doradca{grid-area:d;position:sticky;top:calc(var(--top) + 24px);padding:26px;border-radius:22px;background:var(--ember);color:#fff}
.pvkx .doradca b{display:block;font-family:var(--disp);font-size:19px;font-weight:600}
.pvkx .doradca p{margin-top:6px!important;font-size:14.5px;line-height:1.5;color:var(--opis)}
.pvkx .doradca-l{display:flex;flex-direction:column;gap:8px;margin-top:18px!important}
.pvkx .doradca-l a{display:flex;align-items:center;gap:12px;min-height:50px;padding:0 16px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,236,222,.16);font-size:15px;font-weight:600;color:#fff;text-decoration:none;transition:background-color .2s,border-color .2s}
.pvkx .doradca-l a:hover{background:rgba(255,255,255,.14);border-color:rgba(255,236,222,.4)}
.pvkx .doradca-l svg{width:20px;height:20px;flex:0 0 20px;color:var(--burs);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pvkx .doradca small{display:block;margin-top:14px;font-size:12.5px;line-height:1.5;color:var(--przyg)}
.pvkx .faq-l{grid-area:l}
.pvkx .faq-l details{margin-bottom:10px;border-radius:18px;background:var(--kafel);transition:background-color .2s,box-shadow .2s}
.pvkx .faq-l details[open]{background:#fff;box-shadow:inset 0 0 0 1px #e6e0db,0 14px 32px rgba(40,25,15,.06)}
.pvkx .faq-l summary{position:relative;display:block;padding:20px 58px 20px 22px;font-size:16px;font-weight:600;line-height:1.4;cursor:pointer;list-style:none}
.pvkx .faq-l summary::-webkit-details-marker{display:none}
.pvkx .faq-l summary::after{content:"+";position:absolute;right:18px;top:50%;display:flex;align-items:center;justify-content:center;width:30px;height:30px;margin-top:-15px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px #e0d9d3;font-size:20px;font-weight:400;line-height:1;color:var(--pom-ciem);transition:transform .3s var(--ease),background-color .2s}
.pvkx .faq-l details[open] summary::after{transform:rotate(45deg);background:var(--soft)}
.pvkx .faq-l summary:focus-visible{outline:2px solid var(--pom);outline-offset:3px;border-radius:18px}
.pvkx .faq-l details p{padding:0 58px 22px 22px;font-size:15px;line-height:1.65;color:var(--muted)}
.pvkx .faq-l details[open] p{animation:pvkIn .45s var(--ease)}
.pvkx .dl-faq.no-dor .faq-uklad{grid-template-columns:minmax(0,1fr);grid-template-areas:"t" "w" "l";max-width:820px}
@media (max-width:900px){.pvkx .faq-uklad{grid-template-columns:minmax(0,1fr);grid-template-areas:"t" "w" "l" "d"}.pvkx .doradca{position:static;margin-top:6px}}
@media (max-width:700px){.pvkx .faq-l summary{padding:18px 54px 18px 18px;font-size:15px}.pvkx .faq-l details p{padding:0 18px 18px}}

/* 5. closing strip and the way to the inverters */
.pvkx .zauf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.pvkx .zauf li{display:flex;align-items:center;gap:14px;padding:18px;border-radius:18px;background:#fff;text-align:left}
.pvkx .zauf svg{width:44px;height:44px;flex:0 0 44px;padding:10px;border-radius:14px;background:var(--soft);color:var(--pom-ciem);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pvkx .zauf b{display:block;font-size:14.5px;line-height:1.3}
.pvkx .zauf span{display:block;margin-top:2px;font-size:12.5px;line-height:1.4;color:var(--muted)}
@media (max-width:900px){.pvkx .zauf{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.pvkx .zauf{grid-template-columns:minmax(0,1fr);gap:8px}}
.pvkx .ofk{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:center;gap:24px;padding:clamp(28px,4vw,52px) clamp(26px,4vw,52px) 0;border-radius:28px;background:radial-gradient(75% 90% at 85% 100%,#3c1e10,#1e0f09 55%,#0d0706);color:#fff}
.pvkx .ofk>div:first-child{position:relative;z-index:1;padding-bottom:clamp(28px,4vw,52px)}
.pvkx .ofk small{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--burs)}
.pvkx .ofk h2{margin-top:10px!important;font-family:var(--disp);font-weight:700;font-size:clamp(24px,2.8vw,38px);line-height:1.1;letter-spacing:-.025em}
.pvkx .ofk p{max-width:30em;margin-top:12px!important;font-size:15.5px;line-height:1.6;color:var(--opis)}
.pvkx .ofk-b{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.pvkx .ofk-foto{position:relative;display:flex;justify-content:center;align-items:flex-end;align-self:end;gap:6%;height:clamp(200px,24vw,300px)}
.pvkx .ofk-foto::before{content:"";position:absolute;left:50%;bottom:-60%;width:130%;aspect-ratio:1;border-radius:50%;transform:translateX(-50%);background:radial-gradient(closest-side,transparent 96.5%,rgba(255,140,60,.5) 98%,#ffe2c8 98.6%,rgba(255,140,60,.5) 99.2%,transparent 100%);-webkit-mask-image:linear-gradient(transparent,#000 30%);mask-image:linear-gradient(transparent,#000 30%)}
.pvkx .ofk-foto img{position:relative;height:88%!important;width:auto!important;max-width:48%!important;object-fit:contain;filter:drop-shadow(0 24px 30px rgba(0,0,0,.45))}
.pvkx .ofk-foto img+img{height:72%!important}
@media (max-width:700px){.pvkx .ofk{grid-template-columns:minmax(0,1fr);text-align:center;padding:30px 18px 0}.pvkx .ofk>div:first-child{padding-bottom:0}.pvkx .ofk p{margin-left:auto;margin-right:auto}.pvkx .ofk-b{justify-content:center}.pvkx .ofk-b .dl-btn{flex:1 1 100%}.pvkx .ofk-foto{height:190px}.pvkx .ofk-foto::before{width:105%;bottom:-75%}}

/* reveal on scroll (only when the observer runs) */
.pvkx .pvk.rv-on .rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.pvkx .pvk.rv-on .rv.in{opacity:1;transform:none}
.pvkx .pvk.rv-on .rv-st>*{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease) calc(var(--i,0)*90ms),transform .7s var(--ease) calc(var(--i,0)*90ms)}
.pvkx .pvk.rv-on .rv-st.in>*{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){.pvkx .pvk *,.pvkx .pvk *::before,.pvkx .pvk *::after{transition:none!important;animation:none!important}}
@media print{
  .pvkx .top,.pvkx .stage,.pvkx .sec:not(.sum),.pvkx .pbar,.pvkx .acts,.pvkx .confirm,.pvkx #pvkCart,.pvkx #pvkCartHelp,.pvkx .msg,.pvkx .dol,.pvkx .p-head{display:none!important}
  .pvkx .app{display:block}.pvkx .panel{border:0;box-shadow:none}
  .pvkx .pvk{background:#fff;color:#000}
}

/* ---- shop glue (sklepfelicity.pl info page) ---- */
#SrodekKolumna:has(.pvkx)>h1{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#SrodekKolumna:has(.pvkx)>.StrTresc{padding:0;background:transparent}
#SrodekKolumna:has(.pvkx)>.StrTresc>br,#SrodekKolumna:has(.pvkx)>.StrTresc>a.przycisk{display:none}
@supports (overflow-x:clip){body:has(.pvkx) .CalaStrona{overflow-x:clip!important;overflow-y:visible!important;display:flow-root}}
.StrTresc .FormatEdytor:has(.pvkx){max-width:none;padding:0;margin:0}
.pvkx{--top:0px;display:block;margin:0 -4px;text-align:left}
.pvkx .top{display:none!important}
.pvkx .pvk{background:transparent;border-radius:28px}
.pvkx .app{padding:0 0 16px}
.pvkx .logo{height:36px!important;width:auto!important}
.pvkx button,.pvkx input,.pvkx select,.pvkx textarea{text-transform:none;letter-spacing:normal}
.pvkx .stage,.pvkx .panel{top:calc(var(--top) + 16px)}
@media (min-width:1024px){.pvkx .stage,.pvkx .panel{height:calc(100vh - var(--top) - 32px)}}
@media (max-width:1023px){
.pvkx .pbar{bottom:var(--pvk-dol,0px)}
.pvkx .pvk{padding-bottom:calc(84px + var(--pvk-dol,0px))}
.pvkx .cbar{bottom:calc(72px + var(--pvk-dol,0px) + env(safe-area-inset-bottom,0px))}
.pvkx .app{padding:0 0 16px}
}

/* ---------- guided configurator (16.10.2026): the page customers use; the engine's own page above stays hidden ---------- */
/* Guided PV electrics configurator (preview 15.10.2026). The language of the LV and HV pages: Unbounded headings, Sora text,
   ink on warm white, one dark ember stage with the installation map, orange only for the next step. */
.kf{--ink:#171310;--ink-2:#4f4843;--ink-3:#6b625b;--page:#f4f4f2;--card:#fff;--line:#e6e0db;--line-2:#d8d1cb;--warm:#fbf7f3;
  --pom:#c94e0d;--pom-2:#a83e09;--pom-ciem:#b4410f;--pom-tlo:#fff1e6;--ok:#237a4b;--ok-tlo:#e9f6ee;--burs:#ffb36b;
  --disp:Unbounded,Sora,Arial,sans-serif;--txt:Sora,"Instrument Sans",Arial,sans-serif;--ease:cubic-bezier(.2,.8,.2,1);
  --r:22px;font-family:var(--txt);font-size:16px;line-height:1.55;color:var(--ink);-webkit-font-smoothing:antialiased;
  max-width:1240px;margin:0 auto;padding:18px 16px 8px;box-sizing:border-box}
.kf *,.kf *::before,.kf *::after{box-sizing:border-box}
:where(.kf) :where(h1,h2,h3,p,ul,ol,li,figure,dl,dd){margin:0;padding:0}
:where(.kf) :where(ul,ol){list-style:none}
/* the shop template styles the lists of page descriptions (.FormatEdytor ul: disc, inside, margin 20px 0) and beats the reset
   above; the page draws its own dots (::before), so frames and installer notes showed two dots on iPhone and Chrome (16f) */
.kf li{list-style:none}
/* the same template rule gives every list 20 px above and below (map routes, list groups, notes): lists start at 0 here and their
   own rules set what they need; .kf ul ties with .FormatEdytor ul and wins by coming later (16g) */
.kf :is(ul,ol){margin:0;padding:0}
:where(.kf) button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0;-webkit-tap-highlight-color:transparent}
:where(.kf) input{font:inherit;color:inherit}
:where(.kf) img{display:block;max-width:100%}
.kf :focus-visible{outline:2px solid var(--pom);outline-offset:3px;border-radius:10px}
.kf [hidden]{display:none!important}

/* head and progress */
.kf-top{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 24px;margin-bottom:18px}
.kf-top h1{font-family:var(--disp);font-size:clamp(26px,3.2vw,40px);font-weight:700;line-height:1.16;letter-spacing:-.025em;text-wrap:balance}
.kf-top p{max-width:34em;margin-top:8px;font-size:clamp(15px,1.3vw,17px);color:var(--ink-2);text-wrap:pretty}
.kf-kroki{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -16px 16px;padding:2px 16px}
.kf-kroki::-webkit-scrollbar{display:none}
.kf-kroki button{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px 0 6px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:14px;font-weight:500;color:var(--ink-2);transition:border-color .2s,background-color .2s,color .2s}
.kf-kroki button i{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--page);font-style:normal;font-size:13px;font-weight:700;color:var(--ink-3)}
.kf-kroki button.is-gotowe i{background:var(--ok-tlo);color:var(--ok)}
.kf-kroki button.is-gotowe i::before{content:"✓"}
.kf-kroki button.is-gotowe i span{display:none}
.kf-kroki button[aria-current="step"]{border-color:var(--ink);background:var(--ink);color:#fff}
.kf-kroki button[aria-current="step"] i{background:var(--pom);color:#fff}
.kf-kroki button:hover{border-color:var(--ink-3)}

/* two columns: the map stays in view while the questions change */
.kf-uklad{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:18px;align-items:start}
.kf-scena{position:sticky;top:16px}

/* ---------- the stage: the installation as a map ---------- */
.kf-st{position:relative;isolation:isolate;overflow:hidden;border-radius:28px;padding:24px 22px 18px;color:#fff;background:radial-gradient(75% 60% at 50% 88%,#3c1e10 0%,#1e0f09 48%,#0d0706 100%)}
.kf-st::before{content:"";position:absolute;inset:-20%;z-index:-2;background:radial-gradient(32% 26% at 50% 8%,rgba(255,170,110,.14),transparent 70%),radial-gradient(34% 30% at 16% 74%,rgba(240,106,37,.12),transparent 70%),radial-gradient(34% 30% at 86% 70%,rgba(240,106,37,.1),transparent 70%)}
.kf-st::after{content:"";position:absolute;left:50%;bottom:-62%;z-index:-1;width:150%;aspect-ratio:1;border-radius:50%;transform:translateX(-50%);pointer-events:none;background:radial-gradient(closest-side,transparent 97.2%,rgba(255,140,60,.45) 98.3%,#ffe2c8 98.85%,rgba(255,140,60,.45) 99.4%,transparent 100%);-webkit-mask-image:linear-gradient(transparent,#000 40%);mask-image:linear-gradient(transparent,#000 40%)}
.kf-st-gora{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.kf-st-gora h2{font-family:var(--disp);font-size:clamp(20px,2.2vw,28px);font-weight:700;line-height:1.1;letter-spacing:-.02em}
.kf-st-gora p{margin-top:4px;font-size:14px;color:rgba(255,236,222,.72)}
.kf-st-cena{flex:0 0 auto;text-align:right}
.kf-st-cena b{display:block;font-family:var(--disp);font-size:clamp(20px,2.2vw,28px);font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kf-st-cena span{font-size:13px;color:rgba(255,236,222,.72)}

/* the map: panels, DC box, inverter, AC box, house in one row; the battery under the inverter */
.kf-mapa{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:auto 40px auto;gap:0 26px;margin:28px 4px 8px}
.kf-w{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 2px;border-radius:16px;cursor:pointer}
.kf-w:hover .kf-w-ob{border-color:rgba(255,236,222,.5)}
.kf-w-ob{position:relative;display:flex;align-items:center;justify-content:center;width:100%;max-width:112px;aspect-ratio:1/1.06;border-radius:18px;border:1px solid rgba(255,236,222,.16);background:rgba(255,255,255,.06);transition:border-color .25s,background-color .25s,box-shadow .25s,opacity .25s}
.kf-w-ob img{max-width:78%;max-height:80%;width:auto;height:auto;filter:drop-shadow(0 10px 16px rgba(0,0,0,.4))}
.kf-w-ob>svg{width:86%;height:auto;max-height:84%;filter:drop-shadow(0 10px 16px rgba(0,0,0,.4))}
.kf-w-ob svg.kf-ik{width:46%;height:auto;filter:none;color:rgba(255,236,222,.8);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.kf-w b{margin-top:9px;font-size:13.5px;font-weight:600;line-height:1.25}
.kf-w small{margin-top:2px;font-size:12px;line-height:1.3;color:rgba(255,236,222,.66);text-wrap:balance}
.kf-w-st{position:absolute;top:-8px;right:-6px;z-index:2;display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:700;line-height:1.2;white-space:nowrap}
.kf-w.is-kup .kf-w-ob{border-color:rgba(255,179,107,.75);background:rgba(255,179,107,.09);box-shadow:0 0 0 1px rgba(255,179,107,.25),0 18px 40px rgba(240,106,37,.18)}
.kf-w.is-kup .kf-w-st{background:linear-gradient(135deg,#c94e0d,#a83e09);color:#fff}
.kf-w.is-ma .kf-w-ob{opacity:.62}
.kf-w.is-ma .kf-w-st{background:rgba(255,255,255,.12);color:rgba(255,236,222,.8)}
.kf-w.is-akt .kf-w-ob{outline:2px solid #fff;outline-offset:3px}
.kf-w-mag{grid-column:3;grid-row:3}
.kf-w-pan{grid-column:1}.kf-w-dc{grid-column:2}.kf-w-fal{grid-column:3}.kf-w-ac{grid-column:4}.kf-w-dom{grid-column:5}
/* the lines between the tiles: drawn under the tiles, lit where something is bought */
.kf-l{position:absolute;z-index:0;height:2px;border-radius:2px;background:rgba(255,236,222,.18)}
.kf-l.is-kup{background:linear-gradient(90deg,#ffb36b,#f06a25);box-shadow:0 0 12px rgba(240,106,37,.6)}
.kf-l.is-zest{background:#6fd39b;box-shadow:0 0 10px rgba(111,211,155,.45)}
.kf-l em{position:absolute;left:50%;top:-22px;transform:translateX(-50%);display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#2b1a12;border:1px solid rgba(255,236,222,.25);font-size:11px;font-style:normal;font-weight:700;color:rgba(255,236,222,.85)}
.kf-l.kf-l-e{width:2px;height:auto}
.kf-l.kf-l-e em{left:50%;top:50%;transform:translate(-50%,-50%)}
.kf-mapa-leg{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin-top:14px;font-size:12px;color:rgba(255,236,222,.7)}
.kf-mapa-leg span{display:inline-flex;align-items:center;gap:6px}
.kf-mapa-leg span::before{content:"";width:16px;height:3px;border-radius:2px;background:rgba(255,236,222,.25)}
.kf-mapa-leg .k1::before{background:linear-gradient(90deg,#ffb36b,#f06a25)}
.kf-mapa-leg .k2::before{background:#6fd39b}

/* what the map says in words: what is bought on each stretch */
.kf-odc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
/* only the margin outranks the list reset above: display stays at .kf-odc, so the phone and low-stage rules still hide it (16g) */
.kf .kf-odc{margin-top:16px}
.kf-odc li{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,236,222,.1);font-size:13px;line-height:1.4;color:rgba(255,244,236,.9)}
.kf-odc li em{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:rgba(255,236,222,.14);font-style:normal;font-size:11.5px;font-weight:700}
.kf-odc li.is-kup em{background:linear-gradient(135deg,#c94e0d,#a83e09);color:#fff}
.kf-odc li.is-zest em{background:#6fd39b;color:#0d2a1b}
.kf-odc li b{display:block;font-weight:600;color:#fff}

/* ---------- the questions ---------- */
.kf-panel{min-width:0;border-radius:28px;background:var(--card);border:1px solid var(--line);padding:24px 22px 20px}
.kf-krok>h2{font-family:var(--disp);font-size:clamp(21px,2.1vw,27px);font-weight:700;line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
.kf-krok>.kf-sub{margin-top:8px;font-size:15px;color:var(--ink-2);text-wrap:pretty}
.kf-blok{margin-top:22px}
.kf-blok>h3{font-size:16px;font-weight:600;line-height:1.35}
.kf-blok>.kf-pom{margin-top:4px;font-size:14px;line-height:1.5;color:var(--ink-3)}
.kf-blok>.kf-pom+*{margin-top:12px}
.kf-blok>h3+*:not(.kf-pom){margin-top:12px}

/* cards to tick: purchases, options */
.kf-karty{display:grid;gap:10px}
.kf-k{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:4px 14px;width:100%;padding:14px 16px;border:1.5px solid var(--line);border-radius:18px;background:var(--card);text-align:left;transition:border-color .2s,background-color .2s,box-shadow .2s}
.kf-k:hover{border-color:var(--line-2)}
.kf-k[aria-pressed="true"],.kf-k[aria-checked="true"]{border-color:var(--ink);box-shadow:0 10px 26px rgba(40,25,15,.07)}
.kf-k-zn{grid-row:span 2;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;border:1.5px solid var(--line-2);background:#fff;transition:background-color .2s,border-color .2s}
.kf-k[role="radio"] .kf-k-zn{border-radius:50%}
.kf-k[aria-pressed="true"] .kf-k-zn,.kf-k[aria-checked="true"] .kf-k-zn{border-color:var(--ink);background:var(--ink)}
.kf-k[aria-pressed="true"] .kf-k-zn::after{content:"";width:12px;height:7px;margin-top:-3px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(-45deg)}
.kf-k[aria-checked="true"] .kf-k-zn::after{content:"";width:10px;height:10px;border-radius:50%;background:#fff}
.kf-k-t{font-size:15.5px;font-weight:600;line-height:1.3}
.kf-k-o{grid-column:2;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.kf-k-c{grid-row:span 2;align-self:center;text-align:right;font-size:14px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.kf-k-c small{display:block;font-size:11.5px;font-weight:500;color:var(--ink-3)}
.kf-k-tag{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;background:var(--pom-tlo);font-size:11px;font-weight:700;color:var(--pom-ciem);vertical-align:2px}
.kf-k-tag.is-ok{background:var(--ok-tlo);color:var(--ok)}
.kf-szybkie{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.kf-szybkie button{min-height:38px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--page);font-size:13.5px;font-weight:500}
.kf-szybkie button:hover{border-color:var(--ink-3)}

/* inverter and battery choice: photo cards */
.kf-szukaj{display:flex;gap:8px;align-items:center}
.kf-szukaj input{flex:1 1 auto;min-width:0;height:46px;padding:0 16px;border:1.5px solid var(--line);border-radius:14px;background:var(--page);font-size:15px}
.kf-szukaj input:focus{outline:none;border-color:var(--ink);background:#fff}
.kf-filtry{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.kf-filtry button{min-height:34px;padding:0 12px;border:1px solid var(--line);border-radius:999px;font-size:13px;font-weight:500;color:var(--ink-2)}
.kf-filtry button[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:#fff}
.kf-lista-f{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;max-height:min(58vh,560px);overflow:auto;margin-top:12px;padding:2px;scrollbar-width:thin}
.kf-f{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 10px 12px;border:1.5px solid var(--line);border-radius:18px;background:#fff;text-align:center;transition:border-color .2s,box-shadow .2s}
.kf-f:hover{border-color:var(--line-2)}
.kf-f[aria-checked="true"]{border-color:var(--ink);box-shadow:0 10px 26px rgba(40,25,15,.08)}
.kf-f-img{display:flex;align-items:center;justify-content:center;width:100%;height:92px;border-radius:12px;background:radial-gradient(70% 70% at 50% 100%,#fff,#efece8 75%)}
.kf-f-img img{max-height:82px;width:auto}
.kf-f b{font-size:13.5px;font-weight:700;line-height:1.25;overflow-wrap:anywhere}
.kf-f small{font-size:12px;line-height:1.35;color:var(--ink-2)}
.kf-f .kf-dost{font-size:11.5px;font-weight:600;color:var(--ok)}
.kf-f .kf-dost.is-n{color:var(--ink-3)}
.kf-f-inny{justify-content:center;background:var(--warm);border-style:dashed}
.kf-lista-f:has(>.kf-f-inny:only-child)::before{content:"Nie mamy takiego modelu na liście. Sprawdź pisownię albo wybierz „Mojego falownika nie ma” i wpisz dane z karty katalogowej.";grid-column:1/-1;padding:4px 2px;font-size:14px;line-height:1.5;color:var(--ink-2)}

/* steppers, segmented choices, switches */
.kf-pola{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.kf-pole label,.kf-pole>span{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;line-height:1.3}
.kf-lit{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--ink);font-size:11.5px;font-weight:700;color:#fff}
.kf-pole .kf-pom{margin-top:4px;font-size:12.5px;color:var(--ink-3)}
.kf-st-p{display:flex;align-items:center;height:48px;margin-top:8px;border:1.5px solid var(--line);border-radius:14px;background:var(--page);overflow:hidden}
.kf-st-p:focus-within{border-color:var(--ink);background:#fff}
.kf-st-p button{flex:0 0 44px;height:100%;font-size:20px;font-weight:500;color:var(--ink-2)}
.kf-st-p button:hover{background:rgba(0,0,0,.04);color:var(--ink)}
.kf-st-p input{flex:1 1 auto;width:0;min-width:0;height:100%;border:0;background:transparent;text-align:center;font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}
.kf-st-p input:focus{outline:none}
.kf-st-p span{flex:0 0 auto;padding-right:6px;font-size:13px;color:var(--ink-3)}
.kf-moc{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.kf-moc-p{flex:1 1 170px;max-width:260px;min-width:0;transition:opacity .2s}
.kf-moc-p .kf-st-p{margin-top:0}
.kf-moc-p.is-off{opacity:.45}
.kf-moc-p.is-off:focus-within{opacity:1}
.kf-moc-nw{flex:0 0 auto;min-height:48px;padding:0 18px;border:1.5px solid var(--line);border-radius:14px;background:#fff;font-size:14.5px;font-weight:500}
.kf-moc-nw[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:#fff}
.kf-seg{display:flex;flex-wrap:wrap;gap:6px}
.kf-seg button{min-height:42px;padding:0 15px;border:1.5px solid var(--line);border-radius:12px;background:#fff;font-size:14px;font-weight:500;transition:border-color .2s,background-color .2s}
.kf-seg button[aria-checked="true"]{border-color:var(--ink);background:var(--ink);color:#fff}
.kf-sw{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 16px;width:100%;padding:14px 16px;border:1.5px solid var(--line);border-radius:18px;background:#fff;text-align:left}
.kf-sw+.kf-sw{margin-top:8px}
.kf-sw b{font-size:15px;font-weight:600;line-height:1.3}
.kf-sw small{grid-column:1;font-size:13px;line-height:1.45;color:var(--ink-2)}
.kf-sw i{grid-column:2;grid-row:1/span 2;position:relative;width:46px;height:28px;border-radius:999px;background:var(--line-2);transition:background-color .2s}
.kf-sw i::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.2);transition:transform .25s var(--ease)}
.kf-sw[aria-checked="true"]{border-color:var(--ink)}
.kf-sw[aria-checked="true"] i{background:var(--ink)}
.kf-sw[aria-checked="true"] i::after{transform:translateX(18px)}
.kf-chipy{display:flex;flex-wrap:wrap;gap:6px}
.kf-chipy button{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 13px;border:1.5px solid var(--line);border-radius:999px;background:#fff;font-size:13.5px}
.kf-chipy button small{font-size:12px;color:var(--ink-3)}
.kf-chipy button[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:#fff}
.kf-chipy button[aria-pressed="true"] small{color:rgba(255,255,255,.7)}

/* boxes that explain: what is in the box, what it means, a gentle warning */
.kf-ramka{margin-top:14px;padding:16px 18px;border-radius:18px;background:var(--warm);border:1px solid #f0e4d9;font-size:14px;line-height:1.55;color:var(--ink-2)}
.kf-ramka b{color:var(--ink)}
.kf-ramka.is-ok{background:var(--ok-tlo);border-color:#cfe9d9}
.kf-ramka.is-ok>strong{display:flex;align-items:center;gap:8px;font-size:15px;color:#1f6b43}
.kf-ramka.is-ok>strong::before{content:"✓";flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--ok);font-size:13px;color:#fff}
.kf-ramka ul{margin:8px 0 0}
.kf-ramka li{position:relative;padding-left:16px;margin-top:4px}
.kf-ramka li::before{content:"";position:absolute;left:2px;top:.65em;width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5}
.kf-ramka.is-uwaga{background:#fff7ec;border-color:#f6dcb8}
.kf-co{margin-top:16px;border-top:1px solid var(--line)}
.kf-co summary{display:flex;align-items:center;gap:8px;padding:14px 0 4px;font-size:14px;font-weight:600;color:var(--pom-ciem);cursor:pointer;list-style:none}
.kf-co summary::-webkit-details-marker{display:none}
.kf-co summary::before{content:"?";display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--pom-tlo);font-size:12px;font-weight:700}
.kf-co p{padding:6px 0 4px;font-size:14px;line-height:1.6;color:var(--ink-2)}

/* the route picture in the distances step */
.kf-trasa{display:flex;align-items:center;gap:0;margin:16px 0 4px;overflow-x:auto;scrollbar-width:none}
.kf-trasa span{flex:0 0 auto;padding:6px 10px;border-radius:10px;background:var(--page);font-size:12.5px;font-weight:600;white-space:nowrap}
.kf-trasa em{flex:1 0 26px;position:relative;height:2px;margin:0 2px;background:var(--line-2)}
.kf-trasa em::after{content:attr(data-l);position:absolute;left:50%;top:-11px;transform:translateX(-50%);display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--ink);font-size:11px;font-style:normal;font-weight:700;color:#fff}
.kf-trasa em.is-off{background:var(--line)}
.kf-trasa em.is-off::after{background:var(--line-2);color:var(--ink-3)}

/* the list */
.kf-suma{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:16px 18px;border-radius:18px;background:var(--ink);color:#fff}
.kf-suma b{display:block;font-family:var(--disp);font-size:26px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kf-suma span{font-size:13px;color:rgba(255,255,255,.7)}
.kf-grupa{margin-top:20px}
.kf-grupa>h3{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:15px;font-weight:700}
.kf-grupa>h3 small{font-size:13px;font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums}
.kf-poz{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:4px 12px;align-items:start;padding:12px 0;border-bottom:1px solid var(--line)}
.kf-poz:last-child{border-bottom:0}
.kf-poz-img{grid-row:span 3;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:12px;background:#fff;border:1px solid var(--line);overflow:hidden}
.kf-poz-img img{max-width:88%;max-height:88%;object-fit:contain}
.kf-poz-img svg{width:26px;height:26px;fill:none;stroke:var(--ink-3);stroke-width:1.6}
.kf-poz-n{font-size:14px;font-weight:600;line-height:1.35}
.kf-poz-n a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.kf-poz-n a:hover{border-color:currentColor}
.kf-poz-c{grid-row:span 2;text-align:right;font-size:14.5px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.kf-poz-c small{display:block;font-size:11.5px;font-weight:500;color:var(--ink-3)}
.kf-poz-o{grid-column:2;font-size:12.5px;line-height:1.45;color:var(--ink-3)}
.kf-poz-a{grid-column:2/span 2;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px}
.kf-ile{display:inline-flex;align-items:center;height:34px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.kf-ile button{width:32px;height:100%;font-size:17px;color:var(--ink-2)}
.kf-ile button:hover{background:var(--page)}
.kf-ile input{width:46px;height:100%;border:0;text-align:center;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.kf-ile span{padding-right:8px;font-size:12px;color:var(--ink-3)}
/* the e-mail link in "Tego nie mamy w sklepie": a bigger touch area without moving the text (16g) */
.kf-mail{display:inline-block;padding:7px 2px;margin:-7px -2px}
.kf-usun{padding:9px 4px;margin:-9px -4px;font-size:13px;font-weight:600;color:var(--ink-3);text-decoration:underline;text-underline-offset:3px}
.kf-pom>a[target="_blank"]{display:inline-flex;align-items:center;min-height:40px}
.kf-usun:hover{color:var(--pom-ciem)}
.kf-poz.is-off{opacity:.55}
.kf-poz.is-off .kf-poz-n{text-decoration:line-through}
.kf-zest li{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.45}
.kf-zest li:last-child{border-bottom:0}
.kf-zest li::before{content:"✓";flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-top:1px;border-radius:50%;background:var(--ok-tlo);font-size:12px;font-weight:700;color:var(--ok)}
.kf-zest li small{display:block;font-size:12.5px;color:var(--ink-3)}
.kf-uwagi li{position:relative;padding:8px 0 8px 18px;border-bottom:1px solid var(--line);font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.kf-uwagi li::before{content:"";position:absolute;left:3px;top:15px;width:7px;height:7px;border-radius:50%;background:var(--burs)}
.kf-uwagi li.is-bad::before{background:var(--pom-2)}
.kf-akcje{display:grid;gap:8px;margin-top:20px}
.kf-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;font-size:16px;font-weight:600;transition:transform .2s,filter .2s,background-color .2s}
.kf-btn:active{transform:scale(.98)}
.kf-btn-1{background:linear-gradient(135deg,#c94e0d,#a83e09);color:#fff;box-shadow:0 12px 26px rgba(201,78,13,.28)}
.kf-btn-1:hover{filter:brightness(.93)}
.kf-btn-2{border:1.5px solid var(--ink);background:#fff;color:var(--ink)}
.kf-btn-2:hover{background:var(--page)}

/* the bottom bar: price and the way forward. Phones and tablets: a card that sticks to the bottom while the configurator
   is on screen and rests at its end, never over the shop's footer. Computers: the foot of the questions column (below). */
.kf-dol{position:sticky;bottom:calc(8px + env(safe-area-inset-bottom));z-index:20;margin:16px -4px 0;padding:10px 12px 10px 16px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 14px 34px rgba(40,25,15,.16)}
.kf-dol-in{display:flex;align-items:center;justify-content:space-between;gap:12px}
.kf-dol-l{display:flex;align-items:center;gap:14px;min-width:0;overflow:hidden}
.kf-dol-l button{display:flex;flex-direction:column;align-items:flex-start;text-align:left;line-height:1.2}
.kf-dol-l b{font-family:var(--disp);font-size:20px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kf-dol-l span{max-width:100%;overflow:hidden;text-overflow:ellipsis;font-size:12.5px;color:var(--ink-3);white-space:nowrap}
.kf-dol-l span i{font-style:normal}
.kf-dol-p .kf-btn{white-space:nowrap}
.kf-dol-p{display:flex;gap:8px}
.kf-dol-p .kf-btn{min-height:48px;padding:0 20px;font-size:15px}
.kf-wstecz{border:1.5px solid var(--line);background:#fff;color:var(--ink)}

/* the sheet that shows what goes to the cart */
.kf-arkusz{position:fixed;inset:0;z-index:30;display:flex;align-items:flex-end;justify-content:center;background:rgba(23,19,16,.45)}
.kf-arkusz>div{width:min(560px,100%);max-height:86vh;overflow:auto;padding:22px 22px calc(22px + env(safe-area-inset-bottom));border-radius:24px 24px 0 0;background:#fff}
.kf-arkusz h3{font-family:var(--disp);font-size:22px;font-weight:700}
.kf-arkusz p{margin-top:8px;font-size:14px;color:var(--ink-2)}
.kf-arkusz ul{margin-top:12px}
.kf-arkusz li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}

@media (max-width:1023px){
.kf-uklad{grid-template-columns:1fr}
.kf-scena{position:static}
.kf-st{padding:18px 14px 14px;border-radius:24px}
.kf-mapa{margin-top:24px;gap:0 16px;grid-template-rows:auto 30px auto}
.kf-w-ob{border-radius:14px}
.kf-w b{font-size:12px;margin-top:6px}
.kf-w small{display:none}
.kf-w-st{top:-7px;right:-4px;padding:2px 6px;font-size:10px}
.kf-odc{grid-template-columns:1fr}
.kf-odc li{padding:9px 10px;font-size:12.5px}
.kf-panel{padding:20px 16px 18px;border-radius:24px}
}
@media (max-width:560px){
.kf{padding:12px 12px 8px}
.kf-kroki{margin:0 -12px 12px;padding:2px 12px}
.kf-mapa-leg{display:none}
.kf-mapa{gap:0 10px;margin:22px 0 4px}
.kf-l em{display:none}
.kf-w-st{top:-9px;right:50%;transform:translateX(50%);padding:1px 6px;font-size:9.5px}
.kf-w b{font-size:11px;line-height:1.2}
.kf-w-fal .kf-w-st{display:none}
.kf-odc{display:none}
.kf-st-gora h2{font-size:18px}
.kf-st-cena b{font-size:18px}
.kf-lista-f{grid-template-columns:repeat(2,minmax(0,1fr));max-height:none}
.kf-k{padding:13px 14px;gap:3px 12px}
.kf-k-c{grid-row:auto;grid-column:2;text-align:left}
.kf-k-c small{display:inline;margin-left:6px}
.kf-dol-p .kf-wstecz{display:none}
.kf-dol-l span i{display:none}
.kf-dol-p .kf-btn{min-height:46px;padding:0 18px}
}

/* computers: one screen. The map fills the left column, the questions scroll inside the right one, the price and the way
   forward close that column. Height: --kf-h from kreator.js (what is left under the shop's header on the first screen);
   on a short screen the whole screen under the shop's sticky menu (--top). */
@media (min-width:1024px){
.kf{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);grid-template-rows:auto auto minmax(0,1fr) auto;column-gap:18px;
  height:calc(100vh - var(--top,0px) - 24px);height:var(--kf-h,calc(100dvh - var(--top,0px) - 24px));min-height:540px;padding:12px 16px 8px}
.kf-top{grid-column:1/-1;margin-bottom:12px}
.kf-top>div{display:flex;align-items:center;gap:8px 28px;width:100%}
.kf-top h1{flex:0 0 auto;font-size:clamp(22px,2.1vw,30px)}
.kf-top p{margin:0;max-width:38em;font-size:14px;line-height:1.45}
.kf-kroki{grid-column:1/-1;margin-bottom:12px}
.kf-uklad{display:contents}
.kf-scena{grid-column:1;grid-row:3/5;position:static;min-height:0;container-type:size}
.kf-scena>.kf-st{display:flex;flex-direction:column;height:100%}
.kf-scena .kf-mapa{margin-top:auto}
.kf-scena .kf-mapa-leg{margin-bottom:auto}
.kf-panel{grid-column:2;grid-row:3;min-height:0;overflow-y:auto;scrollbar-width:thin;border-bottom:0;border-radius:28px 28px 0 0}
.kf-lista-f[aria-label="Falownik"]{max-height:none;overflow:visible}
@media (max-width:1279px){.kf-dol-l span i{display:none}}
.kf-dol{grid-column:2;grid-row:4;position:sticky;bottom:0;margin:0;padding:14px 22px;border-radius:0 0 28px 28px;background:#fff;box-shadow:0 -14px 22px -20px rgba(40,25,15,.4);-webkit-backdrop-filter:none;backdrop-filter:none}
}
/* the map scales with the height it gets; the stretches in words only where there is room */
@container (max-height:720px){
.kf-odc{display:none}
.kf-st{padding:20px 20px 16px}
.kf-mapa{grid-template-rows:auto 30px auto;margin:20px 4px 4px}
.kf-w-ob{max-width:clamp(64px,calc((100cqh - 300px) / 2.3),112px)}
.kf-w b{margin-top:7px}
}
/* the shop's night mode (html.fx-noc, "Tryb nocny"): the same page in the shop's night colours, cards #1e1b19 on #100e0c,
   light text; product photos keep their light tiles; what is dark-on-light by day (chosen step, ticks, the sum) turns light-on-dark */
html.fx-noc .kf{--ink:#f2eeea;--ink-2:#d2cac3;--ink-3:#aca298;--page:#2a2522;--card:#1e1b19;--line:#3a3430;--line-2:#4d4642;--warm:#252019;
  --pom-tlo:#3b2416;--pom-ciem:#ff9d6e;--ok:#63d197;--ok-tlo:#16291e}
html.fx-noc .kf-k-zn{background:var(--page)}
html.fx-noc .kf-k[aria-pressed="true"] .kf-k-zn,html.fx-noc .kf-k[aria-checked="true"] .kf-k-zn{border-color:var(--pom);background:var(--pom)}
html.fx-noc .kf-kroki button[aria-current="step"],html.fx-noc .kf-filtry button[aria-pressed="true"],html.fx-noc .kf-seg button[aria-checked="true"],
html.fx-noc .kf-chipy button[aria-pressed="true"],html.fx-noc .kf-moc-nw[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:#171310}
html.fx-noc .kf-chipy button[aria-pressed="true"] small{color:#4f4843}
html.fx-noc .kf-lit,html.fx-noc .kf-trasa em::after{background:var(--ink);color:#171310}
html.fx-noc .kf-sw[aria-checked="true"] i{background:var(--pom)}
html.fx-noc .kf-f,html.fx-noc .kf-moc-nw,html.fx-noc .kf-seg button,html.fx-noc .kf-sw,html.fx-noc .kf-chipy button,html.fx-noc .kf-wstecz{background:var(--card);color:var(--ink)}
html.fx-noc .kf-btn-2{background:transparent;color:var(--ink);border-color:var(--ink)}
html.fx-noc .kf-btn-2:hover{background:var(--page)}
html.fx-noc .kf-szukaj input:focus,html.fx-noc .kf-st-p:focus-within{background:var(--card)}
html.fx-noc .kf-ile input{background:transparent;color:var(--ink)}
html.fx-noc .kf-ramka{border-color:var(--line)}
html.fx-noc .kf-ramka.is-ok{border-color:#2b4b37}
html.fx-noc .kf-ramka.is-ok>strong{color:#8fe3b5}
html.fx-noc .kf-ramka.is-uwaga{background:#2b2116;border-color:#5a4127}
html.fx-noc .kf-suma{background:#100e0c;border:1px solid var(--line)}
html.fx-noc .kf-dol{background:rgba(30,27,25,.96);border-color:var(--line);box-shadow:0 14px 34px rgba(0,0,0,.5)}
html.fx-noc .kf-arkusz>div{background:var(--card);color:var(--ink)}
@media (min-width:1024px){html.fx-noc .kf-dol{background:var(--card);box-shadow:0 -14px 22px -20px rgba(0,0,0,.7)}}
@media (prefers-reduced-motion:reduce){.kf *{transition:none!important}}

/* ---- shop glue of the guided page ---- */
.pvkx:has(.kf) .pvk{display:none!important}
.pvkx .kf-dol{bottom:calc(8px + var(--pvk-dol,0px) + env(safe-area-inset-bottom,0px));z-index:60}
@media (min-width:1024px){.pvkx .kf-dol{bottom:0}}
.pvkx .kf-arkusz{z-index:2000}
/* the template sizes every image (img:not(...){max-width:100%!important;height:auto!important}): the guided page's own sizes win */
.pvkx .kf .kf-w-ob img{width:auto!important;height:auto!important;max-width:78%!important;max-height:80%!important}
.pvkx .kf .kf-f-img img{width:auto!important;height:auto!important;max-width:100%!important;max-height:82px!important}
.pvkx .kf .kf-poz-img img{width:auto!important;height:auto!important;max-width:88%!important;max-height:88%!important}
.pvkx .kf .kf-w-ob>svg{width:86%!important;height:auto!important;max-height:84%!important}
.pvkx .kf a{text-decoration:none}