/* Podgląd „komórka” na szerokim ekranie (wybor-komorka-bok.js): trzy kolumny — wybór części | telefon | lista części.
   Pasek nad podglądem rozkłada się na elementy siatki (display:contents), więc Wyjdź i urządzenia stoją nad listą,
   a telefon ma całą wysokość okna. Barwy jak kafle kreatora: atrament, fiolet zaznaczenia, papierowe tło. */
.ww-bok-lista[hidden],.ww-bok-wybor[hidden]{display:none}
.ww-js .ww-okno.ww-okno--pelne.ww-okno--bok{display:grid;grid-template-columns:minmax(0,1fr) 390px minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);column-gap:clamp(16px,3vw,40px);background:#e8e9e1}
.ww-okno--bok .ww-pelny-pasek{display:contents}
.ww-okno--bok .ww-komorka-uklady{display:none}
.ww-okno--bok .ww-fragment{grid-column:2;grid-row:1/-1;height:100dvh;box-shadow:0 0 0 1px #c1c6b7,0 12px 40px -18px #11120f59}
.ww-okno--bok [data-wyjdz]{grid-column:3;grid-row:1;justify-self:start;margin:16px 0 0}
.ww-okno--bok .ww-urzadzenia{grid-column:3;grid-row:2;justify-self:start;display:flex;gap:4px;margin:10px 0 0}
.ww-okno--bok .ww-urzadzenia button{margin:0;padding:6px 10px}
.ww-okno--bok .ww-urzadzenia button[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:#fff}

/* Lista części: pionowa nawigacja, bieżąca część (aria-current) wyróżniona fioletem. */
.ww-bok-lista{grid-column:3;grid-row:3;min-height:0;max-width:300px;overflow:auto;padding:20px 8px 24px 0}
.ww-bok-lista h2,.ww-bok-glowa h2{margin:0;font:800 17px/1.25 'Manrope',sans-serif;letter-spacing:-.02em;color:var(--ink)}
.ww-bok-lista>p{margin:4px 0 12px;color:#515947;font:500 13px/1.4 'DM Sans',sans-serif}
.ww-bok-lista ol{display:grid;gap:2px;margin:0;padding:0;list-style:none;counter-reset:czesc}
.ww-bok-lista li{margin:0;padding:0;counter-increment:czesc}
.ww-okno--bok .ww-bok-lista button.ww-bok-czesc{display:flex;margin:0;align-items:center;gap:10px;width:100%;min-height:44px;padding:8px 12px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--ink);font:700 14px/1.3 'Manrope',sans-serif;text-align:left}
.ww-bok-czesc::before{content:counter(czesc,decimal-leading-zero);color:#5839c8;font:700 11px 'Manrope',sans-serif}
.ww-okno--bok .ww-bok-lista button.ww-bok-czesc:hover{border-color:#a99be6;background:#f1edff}
.ww-okno--bok .ww-bok-lista button.ww-bok-czesc[aria-current]{border-color:#5839c8;background:#5839c8;color:#fff}
.ww-bok-czesc[aria-current]::before{color:#e6e0ff}
.ww-bok-ukryta{display:flex;align-items:center;gap:8px;min-height:44px;padding:4px 4px 4px 12px;color:#6d7466;font:600 14px/1.3 'Manrope',sans-serif}
.ww-bok-ukryta span{text-decoration:line-through;text-decoration-thickness:1px}
.ww-bok-ukryta small{color:#6d7466;font:600 12px 'DM Sans',sans-serif}
.ww-okno--bok .ww-bok-lista button.ww-bok-przywroc{margin:0 0 0 auto;min-height:36px;padding:4px 12px;border-radius:999px;font-size:12px}
.ww-okno--bok :is(.ww-bok-lista,.ww-bok-wybor) button:focus-visible,.ww-bok-wybor input:focus-visible{outline:3px solid #5839c8;outline-offset:2px}

/* Wybór części po lewej telefonu: przylega do ramki, przewija się sam (strona kreatora stoi). */
.ww-bok-wybor{grid-column:1;grid-row:1/-1;justify-self:end;width:min(100%,460px);min-height:0;max-height:100dvh;overflow:auto;padding:16px 0 24px 16px;box-sizing:border-box}
.ww-bok-glowa{position:sticky;top:-16px;z-index:1;display:flex;align-items:flex-start;gap:12px;margin:-16px 0 12px;padding:16px 0 10px;background:#e8e9e1}
.ww-bok-glowa>div{flex:1;min-width:0}
.ww-bok-glowa p{margin:0;color:#5839c8;font:700 12px 'Manrope',sans-serif}
.ww-bok-glowa h2:focus{outline:none}
.ww-okno--bok .ww-bok-wybor .ww-bok-zamknij{flex:none;margin:0;width:44px;height:44px;padding:0;border-radius:50%;font-size:16px}
.ww-bok-grupa+.ww-bok-grupa,.ww-bok-telefon+.ww-bok-grupa{margin-top:24px}
.ww-bok-wybor h3{margin:0 0 10px;color:var(--ink);font:800 15px/1.3 'Manrope',sans-serif}
.ww-bok-wybor h3 span{color:var(--muted,#6d7466);font-weight:600}
.ww-bok-siatka{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ww-bok-siatka--paski{grid-template-columns:minmax(0,1fr)}
.ww-okno--bok .ww-bok-wybor button.ww-bok-wariant{display:grid;margin:0;gap:0;width:100%;min-height:44px;padding:8px 8px 0;border:1px solid #d9dccf;border-radius:10px;background:#f5f4ed;color:var(--ink);text-align:left}
.ww-okno--bok .ww-bok-wybor button.ww-bok-wariant:hover{border-color:#a99be6;background:#ebe6fb}
.ww-okno--bok .ww-bok-wybor button.ww-bok-wariant[aria-pressed="true"]{padding:7px 7px 0;border:2px solid #5839c8;background:#ebe6fb}
.ww-bok-wariant .ww-okienko-obraz{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;border-radius:4px;background:#e6e0d8}
.ww-bok-wariant-nazwa{display:flex;align-items:center;gap:6px;min-height:40px;padding:4px 2px;font:700 13px/1.3 'Manrope',sans-serif}
.ww-bok-wariant[aria-pressed="true"] .ww-bok-wariant-nazwa::before{content:'✓';color:#5839c8;font-weight:800}
.ww-bok-tryby{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.ww-okno--bok .ww-bok-tryby button{margin:0;border-radius:999px}
.ww-okno--bok .ww-bok-tryby button[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:#fff}
.ww-bok-telefon{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px;min-width:0;margin-left:0;margin-right:0;padding:0;border:0}
.ww-bok-telefon legend{padding:0 0 10px}.ww-bok-telefon legend h3{margin:0}
.ww-bok-telefon label{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 14px 0 10px;border:1px solid #c1c6b7;border-radius:10px;background:#fff;color:var(--ink);font:600 14px/1.25 'DM Sans',sans-serif;cursor:pointer}
.ww-bok-telefon label:hover{border-color:#5839c8;background:#f1edff}
.ww-bok-telefon label:has(input:checked){border-color:#5839c8;background:#f1edff;box-shadow:inset 0 0 0 1px #5839c8}
.ww-bok-telefon b{display:inline-grid;flex:none;white-space:nowrap;place-items:center;min-width:30px;height:22px;padding:0 4px;border-radius:6px;background:#ece8dc;font:800 11px 'Manrope',sans-serif}
.ww-bok-telefon input{width:18px;height:18px;margin:0;accent-color:#5839c8}
.ww-bok-pusto{margin:0;color:#515947;font:500 14px/1.5 'DM Sans',sans-serif}
.ww-dodatki-tel{display:inline-flex;align-items:center;min-height:44px;color:#515947;font:600 14px 'DM Sans',sans-serif}
@media(forced-colors:active){.ww-bok-czesc[aria-current],.ww-bok-wariant[aria-pressed="true"]{outline:2px solid Highlight}}
.ww-bok-wariant .ww-okienko-opis{padding:0 2px 6px}
.ww-bok-wariant .ww-okienko-cechy{padding:0 0 8px}
.ww-bok-wariant .ww-okienko-pasuje{padding:0 2px 10px}
.ww-bok-wybor .ww-podpowiedz{margin:0 0 16px}
.ww-okno--bok .ww-bok-wybor button.ww-bok-wariant[aria-pressed="true"]{padding:6px 6px 0;border-width:3px;box-shadow:0 0 0 4px #5839c824,0 14px 30px -16px #5839c8aa}
.ww-bok-wariant[aria-pressed="true"] .ww-okienko-oryginal{display:none}

/* Laptop i komputer (wybor-komorka-bok.js, Adrian 3.10.2026): ta sama lista po prawej, ramka strony zajmuje
   środek i pomniejsza się do jego szerokości. Wersje części otwiera karuzela (lupa), panel po lewej
   pojawia się tylko z komunikatem o części z jedną wersją. W pełnym ekranie lupa nie ma „Pokaż na stronie”. */
.ww-js .ww-okno.ww-okno--pelne.ww-okno--bok-szeroki{grid-template-columns:auto minmax(0,1fr) minmax(200px,260px);column-gap:clamp(12px,1.6vw,24px)}
.ww-okno--bok-szeroki .ww-fragment{grid-column:2}
.ww-okno--bok-szeroki .ww-bok-wybor{width:min(30vw,400px)}
.ww-pelny-ekran .ww-lupa-pokaz{display:none}