/* =====================================================================
   PROMATION – NOWY WYGLĄD: „Dobierz stojak” wersja 3 „Rysunek” (/promation-dobierz-stojak.php).
   Szablon templates/nowy/_cms/dobierz-rysunek.html.twig, skrypt public/nowy/js/dobierz.js.
   Źródło: makieta projekt-nowy-wyglad/home.css (sekcje „Dobierz stojak – 3 propozycje”, „wersja 3 wybrana”, „punkt 1 bez zdjęć”
   – wariant B, suwaki, próbki kolorów) + wspólne klocki listy (tbar, pigułki wyborów, „Pokaż więcej”, pusty wynik) z baza.css/home.css.
   Zmiany względem makiety: czcionki co najmniej 13 px, cele dotyku co najmniej 44 px na telefonie, kafelki z ramy (.pc w nowy.css)
   w siatce z ramy (.grid – liczba w rzędzie jak w kategoriach, 05.10), część elementów tylko z JavaScriptem (.dob-js),
   próbki kolorów „transparentny” i „czerwony” w kafelku.
   ===================================================================== */
.dob{padding-bottom:40px}
.dob .c-intro{font-size:16.5px;line-height:1.7;color:#34424F;max-width:720px;margin:0 0 26px}
.dob .dob-h{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:22px;color:var(--navy);margin:0 0 14px}
.dob .dob-h small{font-size:14px;font-weight:500;color:var(--muted)}
.dob .dob-h--s{font-size:19px}
.dob-nr{width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;font-size:15px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex:none}
/* bez JavaScriptu: pytania 3 i „Doprecyzuj”, rysunek, sortowanie i „Pokaż więcej” nie działają – ukryte (cała lista stojaków widoczna) */
html:not(.js) .dob-js{display:none!important}

/* układ: pytania po lewej, rysunek od góry po prawej (przyklejony przy przewijaniu) */
.dob-top{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:28px;align-items:start;margin:4px 0 22px}
.dob-qs{min-width:0}
.dob-qs h1{font-size:40px;font-weight:800;margin:0 0 10px}
.dob-qs .dob-blk{margin-bottom:22px}

/* karty odpowiedzi (pytania 1 i 2) – przycisk z JavaScriptem, link do kategorii bez niego */
.dob-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.dob-card{display:flex;flex-direction:column;text-align:left;background:#fff;border:2px solid var(--line);border-radius:18px;padding:0 0 14px;cursor:pointer;overflow:hidden;font:inherit;color:inherit;text-decoration:none!important;min-width:0;transition:border-color .15s,box-shadow .15s,transform .15s}
.dob-card:hover:not([disabled]){border-color:var(--blue);box-shadow:var(--shadow-2);transform:translateY(-2px)}
a.dob-card:hover{color:inherit}
.dob-card.is-on{border-color:var(--blue);box-shadow:0 0 0 4px rgba(1,179,225,.18)}
.dob-card[disabled]{opacity:.42;cursor:not-allowed}
.dob-img{display:flex;align-items:center;justify-content:center;height:170px;background:linear-gradient(180deg,#F8FBFD,#EAF2F8)}
.dob-img img{max-height:150px;max-width:80%;object-fit:contain;mix-blend-mode:multiply}
.dob-img--g{background:#fff;padding:6px 8px}
.dob-img--g img{width:100%;max-width:none;max-height:100%;height:100%;object-fit:contain;mix-blend-mode:normal}
.dob-cards--s .dob-img,.dob-cards--s .dob-img--g{height:112px}
.dob-t{display:block;padding:12px 16px 0}
.dob-t b{display:block;font-size:19px;color:var(--navy);line-height:1.25}
.dob-cards--s .dob-t b{font-size:16px}
.dob-t small{display:block;font-size:14px;color:#34424F;margin-top:3px;line-height:1.4}
.dob-cards--s .dob-t small{font-size:13px}
.dob-card em{margin:8px 16px 0;font-style:normal;font-weight:700;font-size:13.5px;color:var(--blue-700)}
.dob-card.is-on em::before{content:"✓ "}
/* punkt 1 – wariant B „duży napis” z kolorowym paskiem (Krist 01.10) */
.dob-p1{position:relative;padding:0 0 14px;border-top-width:6px}
.dob-p1b--ulotki{border-top-color:#EE7F0A}
.dob-p1b--plakat{border-top-color:#0E2F4F}
.dob-p1b--oba{border-top-color:#01B3E1}
.dob-p1b.is-on{border-color:var(--blue)}
.dob-p1b--ulotki.is-on{border-top-color:#EE7F0A}.dob-p1b--plakat.is-on{border-top-color:#0E2F4F}.dob-p1b--oba.is-on{border-top-color:#01B3E1}
.dob-p1b .dob-big{display:block;padding:18px 16px 0;font-size:28px;font-weight:800;letter-spacing:-.01em;color:var(--navy);line-height:1.1}
.dob-p1b .dob-t{padding-top:6px}

/* pytanie 3: kartki w skali */
.dob-frow{margin:0 0 14px}
.dob-frow h3{font-size:14.5px;color:var(--muted);margin:0 0 8px;font-weight:700}
.dob-fs{display:flex;flex-wrap:wrap;gap:10px}
.dob-f{display:grid;grid-template-rows:72px auto auto auto;justify-items:center;align-items:start;gap:2px;min-width:106px;padding:10px 10px 8px;border:2px solid var(--line);border-radius:14px;background:#fff;cursor:pointer;text-align:center;font:inherit;color:inherit}
.dob-f:hover{border-color:var(--blue)}
.dob-f.is-on{border-color:var(--blue);background:var(--sky-50);box-shadow:0 0 0 3px rgba(1,179,225,.15)}
.dob-fp{display:flex;align-items:flex-end;justify-content:center;height:72px}
.dob-paper{display:flex;align-items:center;justify-content:center;background:#fff;border:2px solid var(--navy);border-radius:2px;box-shadow:3px 3px 0 #DDEAF3}
.dob-paper i{font-style:normal;font-weight:800;font-size:13px;line-height:1;color:var(--navy)}
.dob-f b{font-size:15px;color:var(--navy)}
.dob-f small{font-size:13px;color:var(--muted);line-height:1.25;max-width:116px}
.dob-f em{font-style:normal;font-size:13px;font-weight:700;color:var(--blue-700)}
.dob-none{color:var(--muted);margin:0}
.dob-q3{min-height:300px}
.dob-q3:not(:empty){min-height:0}

/* rysunek */
.dob-draw-card{position:sticky;top:12px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:16px;box-shadow:var(--shadow-2);display:grid;gap:12px;min-width:0}
.dob-draw{width:100%;aspect-ratio:1500/2150;max-height:470px}
.dob-draw svg{width:100%;height:100%;max-height:470px;display:block}
.dob-draw .dt{fill:#fff;font-weight:800;text-anchor:middle;dominant-baseline:middle;font-family:var(--font)}
.dob-draw .dt--s{fill:#0E2F4F}
.dob-cap{margin:0;font-size:14.5px;line-height:1.5;color:#34424F;min-height:44px}
.dob-cap small{font-size:13px;color:var(--muted)}
.dob-go{justify-content:center}

/* wybrane odpowiedzi (pigułki) */
.dob-picked{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 16px}
.dob-picked[hidden]{display:none}
.dob-pk-l{font-weight:700;color:var(--navy);font-size:14px}
.dob .sr-ctl-c{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:0;border-radius:30px;background:var(--navy);color:#fff;font-size:13.5px;font-weight:600;font-family:var(--font);cursor:pointer}
.dob .sr-ctl-c:hover{background:var(--blue-800)}
.dob .sr-ctl-c span{opacity:.75}
.dob-reset{border:0;background:none;color:var(--blue-700);font:600 14px var(--font);cursor:pointer;text-decoration:underline;padding:6px 4px}

/* Doprecyzuj */
.dob-more{margin:0 0 22px;padding:18px 20px;border-radius:18px;background:#fff;border:1px solid var(--line)}
.dob-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px 26px;min-height:120px}
.dob-groups:not(:empty){min-height:0}
.dob-g{min-width:0}
.dob-g h3{font-size:14.5px;color:var(--navy);margin:0 0 8px}
.dob-g h3 small{font-weight:500;color:var(--muted);font-size:13px}
.dob-chips{display:flex;flex-wrap:wrap;gap:6px}
.dob-chip{border:1.5px solid var(--line);background:#fff;border-radius:30px;padding:7px 12px;font:600 13.5px var(--font);color:var(--navy);cursor:pointer}
.dob-chip:hover{border-color:var(--blue)}
.dob-chip em{font-style:normal;color:var(--muted);margin-left:2px}
.dob-chip small{font-size:13px;font-weight:500;color:var(--muted);margin-left:3px}
.dob-chip.is-on{background:var(--navy);border-color:var(--navy);color:#fff}
.dob-chip.is-on em,.dob-chip.is-on small{color:#CFE3F2}
/* kolory jako próbki (Krist 01.10) */
.dob-chip.dob-chip--k{min-width:88px;text-align:center}
.dob-chip.dob-k-czarny{background:#15191E;border-color:#15191E;color:#fff}
.dob-chip.dob-k-czarny em{color:#AEB7C0}
.dob-chip.dob-k-srebrny{background:linear-gradient(135deg,#F3F5F7,#B9C1C9 55%,#E6EAEE);border-color:#AEB7C0;color:#1F2D3A}
.dob-chip.dob-k-bialy{background:#fff;border-color:#C9D3DC;color:#1F2D3A}
.dob-chip.dob-k-przezr{background:repeating-conic-gradient(#E3EBF1 0 25%,#fff 0 50%) 0 0/14px 14px;border-color:#C9D3DC;color:#1F2D3A}
.dob-chip.dob-chip--k em{color:inherit;opacity:.75}
.dob-chip.dob-chip--k.is-on{box-shadow:0 0 0 3px var(--blue);border-color:var(--blue)}
.dob-chip.dob-chip--k.is-on::before{content:"✓ ";font-weight:800}
.dob-chip.dob-k-czarny.is-on{background:#15191E;color:#fff}
.dob-chip.dob-k-srebrny.is-on{background:linear-gradient(135deg,#F3F5F7,#B9C1C9 55%,#E6EAEE);color:#1F2D3A}
.dob-chip.dob-k-bialy.is-on{background:#fff;color:#1F2D3A}
.dob-chip.dob-k-przezr.is-on{background:repeating-conic-gradient(#E3EBF1 0 25%,#fff 0 50%) 0 0/14px 14px;color:#1F2D3A}
/* suwak z dwoma uchwytami (cena, wysokość) – tylko komputer */
.dob-g--rng h3 small[data-rng-l]{color:var(--blue-700);font-weight:800;font-size:13.5px}
.dob-rng{position:relative;height:30px;margin:8px 10px 2px;--a:0%;--b:100%}
.dob-rng::before{content:"";position:absolute;left:0;right:0;top:13px;height:6px;border-radius:6px;background:linear-gradient(90deg,#DDE5EA var(--a),var(--blue) var(--a),var(--blue) var(--b),#DDE5EA var(--b))}
.dob-rng input{position:absolute;left:-10px;top:0;width:calc(100% + 20px);height:30px;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none}
.dob-rng input::-webkit-slider-runnable-track{background:none;height:30px}
.dob-rng input::-moz-range-track{background:none}
.dob-rng input::-webkit-slider-thumb{pointer-events:auto;-webkit-appearance:none;appearance:none;width:24px;height:24px;margin-top:3px;border-radius:50%;background:#fff;border:3px solid var(--blue);box-shadow:0 2px 8px rgba(14,47,79,.3);cursor:grab}
.dob-rng input::-moz-range-thumb{pointer-events:auto;width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--blue);box-shadow:0 2px 8px rgba(14,47,79,.3);cursor:grab}
.dob-rng input:focus{outline:none}
.dob-rng input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(1,179,225,.45),0 0 0 6px var(--navy)}
.dob-rng input:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px rgba(1,179,225,.45),0 0 0 6px var(--navy)}
.dob-rng-x{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin:0 2px}
/* ekran dotykowy z suwakami (tablet, okno ≥ 761 px): uchwyt to cel dotyku 44 px – widoczne kółko 24 px jak na komputerze,
   reszta to przezroczysta ramka; środek uchwytu na końcach paska jak przy myszy */
@media (pointer:coarse){
  .dob-rng{height:44px}
  .dob-rng::before{top:19px}
  .dob-rng input{left:-22px;width:calc(100% + 44px);height:44px}
  .dob-rng input::-webkit-slider-runnable-track{height:44px}
  .dob-rng input::-webkit-slider-thumb{width:44px;height:44px;margin-top:0;border:10px solid transparent;background:#fff padding-box;box-shadow:inset 0 0 0 3px var(--blue)}
  .dob-rng input::-moz-range-thumb{width:24px;height:24px;border:10px solid transparent;background:#fff padding-box;box-shadow:inset 0 0 0 3px var(--blue)}
  .dob-rng input:focus-visible::-webkit-slider-thumb{box-shadow:inset 0 0 0 3px var(--blue),inset 0 0 0 6px rgba(1,179,225,.45)}
  .dob-rng input:focus-visible::-moz-range-thumb{box-shadow:inset 0 0 0 3px var(--blue),inset 0 0 0 6px rgba(1,179,225,.45)}
}
.dob-note{display:flex;gap:8px;align-items:flex-start;margin:16px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.dob-note svg{flex:none;margin-top:2px}

/* wyniki: kafelki z ramy (.pc, _n/karta) w siatce .grid z ramy (nowy.css) – BEZ własnej liczby kolumn (Krist 05.10: kafelki były za duże,
   przy 1078 px 3 po 328 px i obrazek 210×406). Jak kategorie, wyniki szukania i grupa: 5 w rzędzie, dopóki kafelek ma ok. 210 px,
   ≤ 1169 px – 4, ≤ 941 px – 3, telefon (≤ 760 px) – 2; ramka zdjęcia .pc-img (3:4) taka sama jak w kafelkach kategorii.
   Rama przechodzi na 2 kolumny już przy 860 px – tu, jak w wynikach szukania (szuk.css), 3 kolumny do 761 px: tablet pionowo
   (768 px) ma kafelki ok. 239 px zamiast 2 po 363 px z obrazkiem 210×465. */
@media (min-width:761px) and (max-width:860px){.dob .grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.dob .tbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.dob .tbar-n{margin:0;color:var(--muted)}
.dob .tbar-n b{color:var(--navy)}
.dob .tbar-sort{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.dob .tbar-sort select{height:40px;border:1.5px solid var(--line);border-radius:10px;padding:0 12px;background:#fff;color:var(--navy);font-weight:600;font-size:16px}
.dob-it{display:contents}
.dob-it[hidden]{display:none!important}
.dob-czeka [data-dob-grid]{visibility:hidden}
.dob .pc-code,.dob .pc-spec li,.dob .pc-fm li{font-size:13px}
.dob .pc-spec li{white-space:normal}   /* długie fakty („mieści ok. 1350 ulotek”) zawijają się w wąskim kafelku telefonu */
.dob .sw--transparentny{background:repeating-conic-gradient(#D7E0E8 0 25%,#fff 0 50%) 0 0/6px 6px}
.dob .sw--czerwony{background:#D62828}
.dob .sr-more{display:flex;justify-content:center;padding:22px 0 6px}
.dob-empty{display:flex;gap:18px;padding:22px;border-radius:var(--radius);background:#fff;border:1px solid var(--line);margin:10px 0 26px}
.dob-empty[hidden]{display:none}
.dob-empty h2{font-size:21px;margin:0 0 6px}
.dob-empty p{margin:0 0 12px;color:#34424F}
.dob .sr-empty-ico{flex:none;width:64px;height:64px;border-radius:50%;background:var(--sky-50);color:var(--blue-700);display:flex;align-items:center;justify-content:center}
.dob .sr-empty-cta{display:flex;gap:10px;flex-wrap:wrap;margin:0}
.dob-blad{padding:18px 20px;border-radius:var(--radius);background:var(--amber-50);border:1px solid var(--line);margin:0 0 22px}

/* opis „Wyszukiwarka stojaków Promation” */
.dob .seo{margin:48px 0 24px}
.dob .seo-sec{max-width:880px}
.dob .seo h2{font-size:24px;margin:0 0 12px}
.dob .seo p{color:#34424F;font-size:16.5px;line-height:1.75;margin:0}

@media (max-width:1100px){
  .dob-top{grid-template-columns:minmax(0,1fr)}
  .dob-draw-card{position:static}
}
@media (max-width:860px){
  /* cele dotyku ≥ 44 px */
  .dob-chip,.dob .sr-ctl-c,.dob-reset{min-height:44px}
  .dob .tbar-sort select{min-height:44px}
  .dob-f{min-height:44px}
}
@media (max-width:760px){
  .dob-qs h1{font-size:28px}
  .dob .c-intro{font-size:16px}
  .dob-cards{grid-template-columns:minmax(0,1fr)}
  .dob-card{display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto auto;padding:0 12px 0 0;align-items:center}
  .dob-card .dob-img{height:100%;min-height:96px;grid-row:1/3}
  .dob-card .dob-img--g{min-height:72px}
  .dob-card .dob-img img{max-height:86px}
  .dob-t{padding:10px 0 0}
  .dob-card em{margin:4px 0 10px}
  .dob-p1b{display:flex;flex-direction:column;padding:0 0 12px}
  .dob-p1 .dob-t{padding:10px 14px 0}
  .dob-p1 em{margin:4px 14px 0}
  .dob-f{min-width:88px}
  .dob-more{padding:16px 14px}
  .dob-groups{grid-template-columns:minmax(0,1fr)}
  .dob-empty{flex-direction:column}
  .dob .tbar-n{order:3;width:100%}
  .dob .tbar-sort span{display:none}
  .dob .seo h2{font-size:21px}
  .dob .seo p{font-size:16px;line-height:1.7}
  .dob-q3{min-height:520px}
}

/* (06.10, UX nr 11) start bez odpowiedzi: na rysunku plakietka „Przykład” (dobierz.js – klasa dob-draw--przyklad) */
.dob-draw{position:relative}
.dob-draw--przyklad::before{content:"Przykład";position:absolute;top:10px;left:10px;z-index:1;padding:4px 12px;border-radius:999px;background:var(--navy);color:#fff;font-size:13px;font-weight:700;letter-spacing:.3px}
.dob-draw--przyklad svg{opacity:.55}