/* Nowy wygląd – GABLOTY (wybory Krista 14.10.2026, makieta NOWY_WYGLAD_WDROZENIE/warianty/GABLOTY_WYBOR.html).
   Ładowany TYLKO na kartach gablot (prefiksy z config/packages/pm_nowy_gabloty.yaml) i w kategorii 54 – inne strony go nie widzą.
   Kolory, promienie i cienie = zmienne z nowy.css (jeden styl jak cała strona). Szablony: templates/nowy/_n/gabloty.html.twig,
   _n/gabloty-kat.html.twig, product.html.twig (pasek, wersja B1, „większa gablota”). Zachowanie: public/nowy/js/gabloty.js. */

/* ---------- 1B: pasek „Atesty i trwałość” pod rzędem głównych cech */
.gb-at{position:relative;border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;background:var(--sky-25)}
.gb-at-h{margin:0 0 8px;font-size:13px;font-weight:800;color:var(--navy);letter-spacing:.02em}
.gb-at-l{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.gb-at-i{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:12px;background:#fff;border:1px solid var(--line);min-width:0}
.gb-at-i>.i{flex:none;color:var(--blue-600);width:22px;height:22px;padding:4px;border-radius:8px;background:var(--sky-50);box-sizing:content-box}
.gb-at-t{display:block;min-width:0}
.gb-at-t b{display:block;font-size:14px;color:var(--navy);line-height:1.15}
.gb-at-t span{display:block;font-size:11.5px;color:var(--muted);line-height:1.2}
/* B1 – wyróżnione na pomarańczowo */
.gb-at-i.gb-b1{border:2px solid var(--orange-600);background:var(--orange-50)}
.gb-at-i.gb-b1>.i{color:var(--orange-700);background:#fff}
.gb-at-i.gb-b1 .gb-at-t b{color:var(--orange-700)}
.gb-at-i.gb-b1 .gb-at-t span{color:#7a4b00}
/* „?” przy B1 + dymek (najechanie, dotknięcie, Tab + Enter; Esc zamyka – gabloty.js) */
.gb-tip{flex:none;display:inline-grid;place-items:center;width:22px;height:22px;margin-left:2px;padding:0;border:0;border-radius:50%;background:var(--orange-600);color:#fff;font:800 13px/1 var(--font);cursor:help}
.gb-tip:hover,.gb-tip[aria-expanded="true"]{background:var(--orange-700)}
.gb-tip-b{display:none;position:absolute;z-index:30;left:8px;right:8px;top:calc(100% - 4px);margin:0;padding:10px 12px;border-radius:12px;background:var(--navy);color:#E3EDF5;font-size:13px;line-height:1.45;text-align:left;box-shadow:var(--shadow-2)}
.gb-tip-b b{color:#ffd08a}
.gb-at:has(.gb-tip:hover) .gb-tip-b,.gb-at:has(.gb-tip:focus-visible) .gb-tip-b,.gb-at.gb-otw .gb-tip-b{display:block}
.gb-at.gb-zamk .gb-tip-b{display:none}

/* ---------- 2.2B: wersja Standard | Trudno zapalna B1 (w ramce kolorów .kol) */
.gb-wer{margin-bottom:14px}
.gb-wer-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.gb-wyb{position:relative;display:grid;align-content:start;gap:3px;padding:12px;border:2px solid var(--line);border-radius:var(--radius);background:#fff;cursor:pointer;color:var(--ink)}
.gb-wyb b{display:flex;align-items:center;gap:6px;color:var(--navy);font-size:15.5px;line-height:1.2}
.gb-wyb b .i{flex:none;color:var(--orange-700)}
.gb-wyb>span{font-size:12.5px;color:var(--muted);line-height:1.3}
.gb-wyb>.gb-wyb-c{margin-top:2px;font-size:14px;font-weight:800;color:var(--navy)}
.gb-wyb:hover{border-color:var(--blue)}
.gb-wyb.is-on{border-color:var(--blue-700);background:var(--sky-25);box-shadow:inset 0 0 0 1px var(--blue-700)}
.gb-wyb--b1{border-color:var(--orange-600);background:var(--orange-50)}
.gb-wyb--b1:hover{border-color:var(--orange-700)}
.gb-wyb--b1.is-on{border-color:var(--orange-600);background:var(--orange-50);box-shadow:inset 0 0 0 2px var(--orange-600)}
.gb-wyb>.gb-wyb-z{position:absolute;top:-10px;right:10px;font-size:11px;font-weight:800;line-height:18px;background:var(--orange-600);color:#fff;border-radius:6px;padding:0 8px}
/* zdjęcie dodatku B1 z bazy (ten sam adres i ALT co dotąd w liście dodatków) – mała miniatura w rogu kafelka */
.gb-wyb-img{position:absolute;right:10px;bottom:10px;width:40px;height:40px;object-fit:cover;border-radius:8px;border:1px solid var(--line);background:#fff}
.gb-wyb:has(.gb-wyb-img){padding-right:58px}
.gb-wyb:has(input:focus-visible){outline:3px solid var(--navy);outline-offset:2px}
.gb-wer-uw{margin:8px 0 0;font-size:13px;color:#7a4b00;background:var(--amber-50);border:1px solid #f2d48a;border-radius:var(--radius-sm);padding:6px 10px}
.kol .kol-t.gb-wyl{opacity:.35;cursor:not-allowed}

/* ---------- 3B: „Potrzebujesz większej gabloty?” */
.gb-wieksza{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;padding:14px;border-radius:var(--radius);background:#fff;border:1px solid var(--sky-200);box-shadow:var(--shadow-1)}
.gb-wieksza-av{width:52px;height:52px;border-radius:50%;background:var(--sky-100);display:grid;place-items:center;color:var(--blue-700)}
.gb-wieksza-h{margin:0;color:var(--navy);font-size:16px;font-weight:800;line-height:1.25}
.gb-wieksza-t{margin:2px 0 8px;font-size:13.5px;color:var(--muted)}

/* ---------- 6.1A + 6.3A: kategoria – dwa duże przyciski + „Dlaczego zewnętrzne są droższe?” */
.gb-kat{margin:0 0 18px}
.gb-prz{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.gb-p{display:flex;align-items:center;gap:14px;padding:16px 18px;border:2px solid var(--line);border-radius:16px;background:#fff;text-align:left;color:var(--ink);cursor:pointer;min-width:0}
.gb-p>.i{flex:none;width:40px;height:40px;padding:8px;border-radius:12px;background:var(--sky-50);color:var(--blue-600);box-sizing:content-box}
.gb-p-t{display:block;min-width:0}
.gb-p-t b{display:block;font-size:20px;color:var(--navy);line-height:1.15}
.gb-p-t span{display:block;font-size:13px;color:var(--muted)}
.gb-p-n{margin-left:auto;font-size:13px;font-weight:800;color:var(--muted);white-space:nowrap}
.gb-p:hover{border-color:var(--blue)}
.gb-p[aria-pressed="true"]{background:var(--navy);border-color:var(--navy)}
.gb-p[aria-pressed="true"] .gb-p-t b,.gb-p[aria-pressed="true"] .gb-p-n{color:#fff}
.gb-p[aria-pressed="true"] .gb-p-t span{color:#C9DAE8}
.gb-p[aria-pressed="true"]>.i{background:#fff;color:var(--navy)}
.gb-wsz{display:block;margin:8px 0 0;padding:0;border:0;background:none;font-size:14px;font-weight:700;color:var(--blue-700);cursor:pointer}
.gb-wsz:hover{text-decoration:underline;text-underline-offset:3px}
.gb-dlacz{margin-top:12px;border:1px solid var(--sky-200);border-radius:var(--radius);background:var(--sky-25)}
.gb-dlacz summary{display:flex;align-items:center;gap:8px;padding:10px 14px;font-weight:800;color:var(--navy);cursor:pointer;list-style:none}
.gb-dlacz summary::-webkit-details-marker{display:none}
.gb-dlacz summary .i{flex:none;color:var(--blue-600)}
.gb-dlacz summary::after{content:"▾";margin-left:auto;color:var(--blue-700)}
.gb-dlacz[open] summary::after{content:"▴"}
.gb-dlacz ul{margin:0;padding:0 14px 12px 38px;font-size:14px;color:var(--ink)}
.gb-dlacz li{margin:3px 0}
.kat-k[data-gdz].gb-ukryj{display:none}

/* 6.2A: plakietki na miniaturze (lewy górny róg); znaczek 3D przechodzi wtedy na prawą stronę */
.gb-zn{position:absolute;left:6px;top:6px;z-index:1;display:flex;flex-direction:column;gap:4px;align-items:flex-start;pointer-events:none}
.gb-zn>span{display:inline-flex;align-items:center;gap:4px;padding:3px 8px 3px 4px;border-radius:999px;font-size:11.5px;font-weight:800;line-height:16px;color:#fff;box-shadow:0 1px 4px rgba(0,0,0,.18)}
.gb-zn .i{flex:none;width:14px;height:14px;padding:2px;border-radius:50%;background:#fff;box-sizing:content-box}
.gb-zn-zw{background:var(--blue-700)}.gb-zn-zw .i{color:var(--blue-700)}
.gb-zn-ww{background:var(--green)}.gb-zn-ww .i{color:var(--green)}
.gb-zn-b1{background:var(--orange-700)}.gb-zn-b1 .i{color:var(--orange-700)}
.pc-img:has(.gb-zn) .pc-3d{left:auto;right:8px}

/* ---------- telefon */
@media (max-width:760px){
  .gb-at-l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .gb-at-i{padding:5px 8px 5px 5px;gap:6px}
  .gb-at-i>.i{width:18px;height:18px;padding:3px}
  .gb-at-t b{font-size:13px}.gb-at-t span{font-size:10.5px}
  .gb-wer-row{gap:8px}
  .gb-wyb{padding:10px}
  .gb-wyb b{font-size:14.5px}
  .gb-wyb-img{width:30px;height:30px;right:8px;bottom:8px}
  .gb-wyb:has(.gb-wyb-img){padding-right:10px;padding-bottom:44px}
  .gb-prz{gap:8px}
  .gb-p{flex-direction:column;align-items:flex-start;gap:6px;padding:12px}
  .gb-p>.i{width:30px;height:30px;padding:6px}
  .gb-p-t b{font-size:17px}
  .gb-p-n{margin-left:0}
  .gb-zn>span{font-size:10.5px;padding:2px 6px 2px 3px}
}
@media (max-width:360px){.gb-wer-row{grid-template-columns:minmax(0,1fr)}}