/* FLOUZE — poszarpane obramowania wszystkich liniowych ram (styl ramki „grunge”).
   Zamiast równej linii `border: 3.5px solid …` rysujemy border-image z img/linia-*.png (te same faktury, pierścień ramki zmniejszony do
   grubości linii). Ładowany OSTATNI, więc nadpisuje zwykłe obramowania z pozostałych arkuszy.
   NOWA RAMA: dopisz selektor do jednej z grup niżej (grubość/kolor = która grupa). Ramki produktów (kolczasty drut) to osobny system.
   Grubości ×1,7 (2026-10-04). Warianty: cienka (T6, do ok. 7 px) / gruba (T12, 5–8 px)  ×  bialy / ice / przyg (biały przygaszony). */
:root {
  --lg-c-b: url("../img/linia-cienka-bialy.png"); --lg-c-i: url("../img/linia-cienka-ice.png"); --lg-c-p: url("../img/linia-cienka-przyg.png");
  --lg-g-b: url("../img/linia-gruba-bialy.png");  --lg-g-i: url("../img/linia-gruba-ice.png");  --lg-g-p: url("../img/linia-gruba-przyg.png");
}

/* ── cienka, biała, 3 px: małe kontrolki ── */
.slajd-link, .sl-strzalka, .soc, .gf-x, .kosz-x, #wstecz, .wkrotce-plakietka, .kosz-ile-ster {
  border: 5px solid transparent; border-image: var(--lg-c-b) 6 / 5px round;
}
/* ── cienka, biała, 4 px: przyciski i zdjęcia w podglądzie ── */
.pill, .gf-slajd img, .galeria-tajne .gf-slajd video {
  border: 7px solid transparent; border-image: var(--lg-c-b) 6 / 7px round;
}
.pill.wkrotce-btn { border-image-source: var(--lg-c-p); }
/* ── cienka, przygaszona, 3 px: pola, miniatury, szkło klisz ── */
.mail, .kosz-mini, .kosz-razem, .gf-mini button, .ul-box input, .szklo, .miasto-ramka {
  border: 5px solid transparent; border-image: var(--lg-c-p) 6 / 5px round;
}
/* ── cienka, przygaszona, 2 px: widok produktu (delikatne ramki) ── */
.pp-karta, .pp-scena, .pp-mini button, .pp-rozm button, .pp-opis, .pp-kafel {
  border: 3.5px solid transparent; border-image: var(--lg-c-p) 6 / 3.5px round;
}
/* ── cienka, lodowa, 3–4 px ── */
.kosz-rabat { border: 5px solid transparent; border-image: var(--lg-c-i) 6 / 5px round; }
.kasa-info  { border: 7px solid transparent; border-image: var(--lg-c-i) 6 / 7px round; }
/* ── gruba, biała, 5–6 px: duże ramy ── */
.post, .kasa-blok { border: 8.5px solid transparent; border-image: var(--lg-g-b) 12 / 8.5px round; }
.ul-box { border: 10px solid transparent; border-image: var(--lg-g-b) 12 / 10px round; }
.sekcja-obraz .ramka { border: 8.5px solid transparent; border-image: var(--lg-g-b) 12 / 8.5px round; }
/* ── gruba, lodowa, 6 px: panel odtajniania ── */
.odt { border: 10px solid transparent; border-image: var(--lg-g-i) 12 / 10px round; }
/* ── krawędzie jednostronne ── */
.kosz { border-left: 10px solid transparent; border-image: var(--lg-g-b) 12 / 0 0 0 10px round; }
.foot { border-top: 8.5px solid transparent; border-image: var(--lg-g-b) 12 / 8.5px 0 0 0 round; }
#produkty .card[data-ramka=""] { border: 7px solid transparent; border-image: var(--lg-c-b) 6 / 7px round; }

/* ── stany: aktywny/fokus = lodowa wersja tej samej faktury (zwykły border-color przy border-image nie działa) ── */
.mail:focus-within, .mail.sent, .gf-mini button.on, .pp-mini button.on, .pp-rozm button.on, .ul-box input:focus { border-image-source: var(--lg-c-i); }
.gf-mini button { opacity: .75; } .gf-mini button.on { opacity: 1; }
.mail.blad { border-image-source: var(--lg-c-b); }