.abp-item-block { margin: 1rem 0; }
.abp-offer { display: flex; gap: .75rem; align-items: center; padding: .75rem;
  border: 1px solid var(--bs-border-color, #dee2e6); border-radius: .5rem; text-decoration: none; color: inherit; }
.abp-offer:hover { border-color: var(--bs-primary, #0d6efd); }
.abp-offer__img { width: 64px; height: 64px; object-fit: contain; flex: 0 0 auto; }
.abp-offer__text { display: flex; flex-direction: column; gap: .15rem; }
.abp-offer__label { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--bs-primary, #0d6efd); }
.abp-offer__name { font-weight: 600; }
.abp-offer__prices { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.abp-offer__old { text-decoration: line-through; opacity: .6; }
.abp-offer__new { font-weight: 700; }
.abp-offer__save { font-size: .85rem; color: #198754; }

.abp-pack { margin: 1rem 0; padding: .9rem; border: 1px solid var(--bs-border-color, #dee2e6); border-radius: .5rem; }
.abp-pack__title { font-weight: 600; margin-bottom: .5rem; }
.abp-pack__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }

/*
 * Kazdy skladnik w WLASNEJ mini-sekcji.
 *
 * Powod jest funkcjonalny, nie estetyczny: skladniki zestawu bywaja roznego fasonu
 * (52 z 96 aktywnych zestawow tego sklepu), wiec kazdy ma wlasny wybor rozmiaru
 * i wlasna tabele rozmiarow. W jednym wierszu na skladnik nie bylo widac, ktory
 * wybor nalezy do ktorego produktu - a przy skladniku z dwiema listami (rozmiar
 * i kolor) wybory wypychane `margin-left: auto` zderzaly sie z nazwa.
 *
 * ⚠ Kolory z TOKENOW motywu, nie wpisane: modul jedzie na sklepy rodziny w dwoch
 * motywach i musi dzialac w trybie ciemnym.
 */
.abp-pack__item { display: grid; grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "img name" "img opts"; column-gap: .7rem; row-gap: .4rem; align-items: center;
  padding: .55rem .65rem; border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: .4rem; background: var(--bs-tertiary-bg, #f8f9fa); }
.abp-pack__img { grid-area: img; width: 80px; height: 80px; object-fit: contain; }
.abp-pack__name { grid-area: name; }
.abp-pack__savings { margin-top: .75rem; padding-top: .6rem; border-top: 1px dashed var(--bs-border-color, #dee2e6); }
.abp-pack__badge { display: inline-block; margin-left: .4rem; padding: .1rem .45rem;
  border-radius: .3rem; background: #198754; color: #fff; font-size: .85rem; }

/*
 * Tam, gdzie stoi blok zestawu, chowamy natywny "Dodaj do koszyka".
 * Dodalby produkt-zestaw jako jedna pozycje, a my chcemy w koszyku i zamowieniu
 * prawdziwe skladniki - od tego jest przycisk w bloku zestawu.
 * :has() zalatwia to bez migotania; JS w front.js jest zapasem dla starszych przegladarek.
 *
 * Dwa zakresy, oba WASKIE:
 *  - .product-container: karta produktu,
 *  - .quickview: okno szybkiego podgladu, gdzie natywny przycisk tez sie renderuje.
 * Wcześniejsza regula `body:has(.abp-pack)` byla pulapka: tresc podgladu zostaje
 * w DOM po jego zamknieciu, wiec po jednym zajrzeniu w zestaw przyciski "do koszyka"
 * znikalyby z CALEGO listingu do konca wizyty na tej stronie.
 */
.product-container:has(.abp-pack) .product__add-to-cart-container,
.product-container:has(.abp-pack) .product-add-to-cart,
.quickview:has(.abp-pack) .product__add-to-cart-container,
.quickview:has(.abp-pack) .product__add-to-cart,
.quickview:has(.abp-pack) .product-add-to-cart {
    display: none !important;
}

/*
 * Natywne selektory wariantu na karcie ZESTAWU.
 *
 * Zestawy przeniesione z PS 1.6 maja ZDEGENEROWANE kombinacje: kazdy atrybut
 * jest osobna kombinacja (`Velkost=M`, `Farba=Cierna`, `Typ=Panske tricko`)
 * zamiast ich zlozenia. Skutki na karcie, oba zmierzone na tSK 2026-09-09:
 *
 *  - kombinacja domyslna nie zawiera wszystkich grup, wiec napis nad selektorem
 *    pokazuje SAM DWUKROPEK - 86 ze 100 zestawow,
 *  - grupa z kilkoma wartosciami renderuje DZIALAJACY selektor, ktorego wybor
 *    nie ma wplywu na zamowienie - 54 ze 100 zestawow. To jest gorsze niz pusty
 *    napis: klient wybiera cos, co nic nie robi.
 *
 * Wybor wariantu przy zestawie nalezy do bloku .abp-pack (osobna lista na kazda
 * zmienna grupe kazdego skladnika) i to on jedzie do koszyka - zadna kombinacja
 * samego zestawu nie wystapila w zamowieniu ani razu.
 *
 * ⚠ Kombinacji NIE KASUJEMY, choc wygladaja na martwe: napedzaja 1047 wierszy
 * `ps_layered_product_attribute`, wiec zestaw daje sie znalezc filtrem rozmiaru
 * i koloru - i to jest poprawne, bo w tych rozmiarach naprawde da sie go kupic.
 * Usuniecie danych wypchneloby 100 zestawow z filtrow, czyli naprawiloby wyglad
 * kosztem funkcji.
 *
 * `display: none`, a nie ukrycie wizualne: kontrolka zostawiona w kolejnosci
 * tabulacji to fokus wpadajacy w pole, ktore niczego nie ustawia.
 */
.product-container:has(.abp-pack) .product__variants,
.quickview:has(.abp-pack) .product__variants {
    display: none !important;
}

/*
 * Wiersz wyborow skladnika: listy i przycisk tabeli rozmiarow.
 *
 * Stoi w drugim wierszu gridu, obok miniatury - wiec przy miniaturze 80 px nic sie
 * nie marnuje: nazwa i wybory razem maja mniej wiecej jej wysokosc. Zmierzone na
 * zestawie 9396 przy 1400 px: blok 450 -> 358 px, przy WIEKSZEJ miniaturze.
 */
.abp-pack__options { grid-area: opts; display: flex; flex-wrap: wrap; align-items: center;
  gap: .45rem .8rem; }
.abp-pack__choice { display: flex; gap: .4rem; align-items: center; }
.abp-pack__choice label { margin: 0; font-size: .9rem; white-space: nowrap; }
.abp-pack__select { width: auto; min-width: 5.5rem; }

/*
 * Przycisk tabeli rozmiarow sklada modul `ababinksizecharts` - tutaj zostaje sam odstep.
 * ⚠ Jego wlasna regula `.asc-wrap { margin: .6rem 0 .2rem }` opisuje przycisk stojacy
 * pod cena; w wierszu wyborow ten margines rozpycha wiersz w pionie. Zawezenie do
 * `.abp-pack` wystarcza, bo jest specyficzniejsze - kolejnosc arkuszy nie ma tu nic
 * do rzeczy, oba sa poza warstwami kaskady.
 */
.abp-pack .asc-wrap { margin: 0; }

/*
 * ⚠ Ponizej 576 px wybory schodza POD miniature, na pelna szerokosc mini-sekcji.
 *
 * Kolumna obok miniatury ma tam okolo 250 px, a wiersz wyborow to etykieta, lista
 * i przycisk tabeli - zmierzone na 390 px: przycisk WYCHODZIL POZA RAMKE sekcji.
 * ⚠ Pomiar tego nie zlapal, bo dokument sie nie przewijal (przepelnienie bylo
 * w kontenerze, nie w stronie) - zlapal dopiero ZRZUT EKRANU. Wybory na pelnej
 * szerokosci mieszcza sie w jednym wierszu.
 */
@media (max-width: 575.98px) {
  .abp-pack__item { grid-template-areas: "img name" "opts opts"; }
}
/*
 * 1.6.0: edytor personalizacji skladnika stoi W JEGO mini-sekcji, pod wyborami - klient widzi,
 * ktory projekt nalezy do ktorego produktu. Skladnik bez zapisanego projektu po probie
 * dodania zestawu dostaje czerwona ramke (`data-abp-missing`), obok komunikatu pod przyciskiem.
 */
.abp-pack__item--perso { grid-template-areas: "img name" "img opts" "img perso"; }
.abp-pack__perso { grid-area: perso; min-width: 0; }
.abp-pack__perso .abcu { margin: 0; }
.abp-pack__item[data-abp-missing] { border-color: #b02a37; box-shadow: 0 0 0 1px #b02a37; }
@media (max-width: 575.98px) {
  .abp-pack__item--perso { grid-template-areas: "img name" "opts opts" "perso perso"; }
}
.abp-pack__add { margin-top: .75rem; width: 100%; }
.abp-pack__error { margin-top: .5rem; color: #b02a37; }

/*
 * 1.7.0: pozycje jednego zestawu w koszyku - wspolna ramka po lewej i naglowek nad pierwsza.
 * Kolory z tokenow motywu (dwa motywy, tryb ciemny).
 */
.abp-cart-item { border-left: 3px solid var(--bs-primary, #0d6efd); padding-left: .75rem;
  background: var(--bs-tertiary-bg, #f8f9fa); }
.abp-cart-item--first { margin-top: .75rem; border-top-left-radius: .4rem; border-top-right-radius: .4rem; }
.abp-cart-item--first::before { content: attr(data-abp-head); display: block; padding: .5rem 0 .25rem;
  font-weight: 600; color: var(--bs-primary, #0d6efd); }
.abp-cart-item--last { margin-bottom: .75rem; border-bottom-left-radius: .4rem; border-bottom-right-radius: .4rem; }
.abp-cart-pack { margin: .25rem 0; }
/* W grupie nazwa zestawu stoi raz, w naglowku - znacznik przy kazdej pozycji bylby powtorzeniem.
   Bez JS grupy nie ma i znacznik zostaje. Pozycje grupy bez przerw miedzy soba. */
.abp-cart-item .abp-cart-pack__badge { display: none; }
.abp-cart-item:not(.abp-cart-item--last) { margin-bottom: 0; }
.abp-cart-item:not(.abp-cart-item--first) { margin-top: 0; padding-top: .75rem; }
.abp-cart-item--last { padding-bottom: .75rem; }
.abp-cart-pack__badge { display: inline-block; padding: .1rem .5rem; border-radius: .3rem; font-size: .85rem;
  background: var(--bs-primary-bg-subtle, #cfe2ff); color: var(--bs-primary-text-emphasis, #052c65); }
/*
 * 1.7.3: okno potwierdzenia rozbicia zestawu. Na komputerze wysrodkowane, na telefonie od dolu
 * (arkusz), zeby przyciski byly pod kciukiem. "Ponechat sadu" jest przyciskiem glownym - to
 * bezpieczna odpowiedz; usuniecie jest odnosnikiem.
 */
.abp-dialog { width: min(28rem, calc(100% - 32px)); max-height: calc(100% - 32px); overflow: auto; border: 0;
  border-radius: 1rem; padding: 1.75rem 1.5rem 1.25rem; text-align: center;
  background: var(--bs-body-bg, #fff); color: var(--bs-body-color, #212529);
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .28); }
.abp-dialog[open] { animation: abp-in .18s ease-out; }
.abp-dialog::backdrop { background: rgba(15, 23, 42, .55); backdrop-filter: blur(2px); }
@keyframes abp-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.abp-dialog__x { position: absolute; top: .6rem; right: .6rem; width: 2.25rem; height: 2.25rem; border: 0;
  border-radius: 50%; background: transparent; color: var(--bs-secondary-color, #6c757d); cursor: pointer; }
.abp-dialog__x:hover { background: var(--bs-tertiary-bg, #f1f3f5); }
.abp-dialog__x svg, .abp-dialog__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.abp-dialog__x svg { width: 1.1rem; height: 1.1rem; }
.abp-dialog__icon { width: 3.25rem; height: 3.25rem; margin: 0 auto .75rem; padding: .8rem; border-radius: 50%;
  background: var(--bs-warning-bg-subtle, #fff3cd); color: var(--bs-warning-text-emphasis, #997404); }
.abp-dialog__title { font-size: 1.25rem; font-weight: 700; margin: 0 0 .4rem; }
.abp-dialog__lead { margin: 0 auto 1.1rem; max-width: 24rem; color: var(--bs-secondary-color, #495057); line-height: 1.45; }
.abp-dialog__loss { color: var(--bs-danger, #dc3545); white-space: nowrap; }
.abp-dialog__rest { text-align: left; border: 1px solid var(--bs-border-color, #dee2e6); border-radius: .75rem;
  padding: .75rem .9rem; margin-bottom: 1.25rem; background: var(--bs-tertiary-bg, #f8f9fa); }
.abp-dialog__rest-label { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--bs-secondary-color, #6c757d); margin-bottom: .5rem; }
.abp-dialog__items { list-style: none; margin: 0; padding: 0; }
.abp-dialog__item { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: .75rem; align-items: center;
  padding: .35rem 0; }
.abp-dialog__item + .abp-dialog__item { border-top: 1px dashed var(--bs-border-color, #dee2e6); }
.abp-dialog__thumb { width: 3rem; height: 3rem; border-radius: .5rem; overflow: hidden; background: var(--bs-body-bg, #fff);
  display: flex; align-items: center; justify-content: center; }
.abp-dialog__thumb img { width: 100%; height: 100%; object-fit: contain; }
.abp-dialog__name { font-size: .9rem; line-height: 1.3; overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.abp-dialog__price { text-align: right; white-space: nowrap; font-size: .95rem; }
.abp-dialog__old { color: var(--bs-secondary-color, #6c757d); font-size: .85rem; margin-right: .15rem; }
.abp-dialog__new { color: var(--bs-danger, #dc3545); }
.abp-dialog__total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--bs-border-color, #dee2e6); font-weight: 600; }
.abp-dialog__actions { display: flex; flex-direction: column; gap: .35rem; }
.abp-dialog__keep { width: 100%; padding: .7rem 1rem; font-weight: 600; }
.abp-dialog__remove { color: var(--bs-secondary-color, #6c757d); text-decoration: underline; }
.abp-dialog__remove:hover { color: var(--bs-danger, #dc3545); }
@media (max-width: 575.98px) {
  .abp-dialog { width: 100%; max-width: none; margin: auto 0 0; border-radius: 1rem 1rem 0 0; padding-bottom: 1.5rem; }
  .abp-dialog[open] { animation-name: abp-up; }
  @keyframes abp-up { from { transform: translateY(100%); } to { transform: none; } }
}
@media (prefers-reduced-motion: reduce) { .abp-dialog[open] { animation: none; } }