/* ============================================================
   KARTA PRODUKTU - uklad wlasny, jezyk wizualny makiety
   Ladowana wylacznie przez produkt-template.php.

   Wszystko siedzi pod '.bmx', wiec tokeny makiety (--navy, --red, --paper,
   --cream, --r, --ease, --brush, --serif, --sans) sa dostepne bez powtarzania.
   Szablon NIE renderuje Oxygena i zdejmuje jego CSS, wiec nie ma tu zadnych
   remisow specyficznosci do rozstrzygania - selektory moga byc plaskie.

   Wyjatek: style WooCommerce i wtyczki probnika zostaja na stronie. Arkusz ma
   zaleznosc od 'custom-css' (ostatni arkusz probnika), wiec idzie po nich.
   Autor: claude, 2026-08-20.
   ============================================================ */

.bmx-pdp {
    background: var(--paper);
}

/* ---------- 1. Okruszki ------------------------------------ */
.bmx-pdp__crumbs {
    padding: 18px 0 0;
    font-family: var(--sans);
    font-size: .78rem;
    color: var(--muted);
}

.bmx-pdp__crumbs .bmx-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.bmx-pdp__crumbs a {
    color: var(--muted);
    text-decoration: none;
}

.bmx-pdp__crumbs a:hover { color: var(--red); }
.bmx-pdp__crumbs span[aria-hidden] { opacity: .4; }

/* ---------- 2. Uklad glowny -------------------------------- */
.bmx-pdp__main { padding-block: clamp(26px, 3.2vw, 52px); }

.bmx-pdp__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 68px);
    align-items: start;
}

@media (max-width: 900px) {
    .bmx-pdp__grid { grid-template-columns: 1fr; }
}

.bmx-pdp__notices { margin-bottom: 18px; }

/* ---------- 3. Galeria -------------------------------------
   Markup pochodzi z woocommerce_show_product_images(): kontener
   '.woocommerce-product-gallery', zdjecie glowne w '__wrapper',
   miniatury w '.flex-control-thumbs'. Ramka jest jasna i kwadratowa,
   zdjecie skalujemy 'contain' - puszki farby maja rozne proporcje
   i 'cover' obcinalby im wieczka (sprawdzone przy kafelkach na glownej). */
/* SPRAWA PRZYKLEJENIA (poprawione 2026-09-01):
   'position:sticky' bylo na SAMEJ GALERII, a nasz blok dodatkowych zdjec
   jest jej RODZENSTWEM w '.bmx-pdp__media'. Przy przewijaniu galeria
   odjezdzala w dol wewnatrz kontenera i naklada sie na te dwa kadry.

   Przyklejamy wiec CALY kontener '.bmx-pdp__media' - galeria i kadry
   jada razem jako jeden blok i nic na nic nie wchodzi. */
.bmx-pdp__media .woocommerce-product-gallery {
    position: static;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

.bmx-pdp__media {
    position: sticky;
    top: 96px;
    align-self: start;
}

@media (max-width: 900px) {
    /* Na waskim ekranie kolumny sa jedna pod druga - przyklejanie
       nie ma sensu i tylko przeszkadza. */
    .bmx-pdp__media { position: static; }
}

/* UWAGA - OGRANICZENIE ZRODLA, NIE STYLU:
   zdjecia produktow w tym sklepie maja 200 px szerokosci i NIE MA wiekszych
   wersji ('full' to tez 200 px - sprawdzone). Kazde rozciagniecie ich na
   szerokosc kolumny daje rozmycie. Dlatego NIE ustawiamy 'width:100%':
   obrazek renderuje sie w swoim naturalnym rozmiarze, a ramka daje mu
   oddech. Wyglada to celowo, zamiast wygladac na nieostre.
   Zeby pokazac je wieksze, trzeba wgrac wieksze pliki. */
.bmx-pdp__media .woocommerce-product-gallery__wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(300px, 34vw, 430px);
    margin: 0;
    padding: 28px;
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
    background: #fff;
    overflow: hidden;
}

.bmx-pdp__media .woocommerce-product-gallery__image {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
}

.bmx-pdp__media .woocommerce-product-gallery__image img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    filter: drop-shadow(0 18px 26px rgba(11, 34, 64, .16));
    /* Klikniecie otwiera podglad (PhotoSwipe), ale lupka jest ukryta
       nizej na zyczenie klienta - bez kursora nic tego nie zapowiadalo
       i wygladalo, jakby powiekszanie nie dzialalo. */
    cursor: zoom-in;
}

/* Lupka powiekszenia - UKRYTA (zyczenie klienta 2026-08-20).
   Wczesniejsza wersja tylko ja przesuwala; teraz znika calkiem.
   Powiekszenie dziala dalej - PhotoSwipe podpina sie pod samo zdjecie,
   a nie pod ten przycisk, wiec klikniecie w kadr nadal otwiera podglad. */
.bmx-pdp__media .woocommerce-product-gallery__trigger {
    display: none !important;
}

.bmx-pdp__media .flex-control-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 10px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.bmx-pdp__media .flex-control-thumbs li { margin: 0; width: auto; }

.bmx-pdp__media .flex-control-thumbs img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-s);
    opacity: .62;
    cursor: pointer;
    transition: opacity .35s var(--ease), border-color .35s var(--ease);
}

.bmx-pdp__media .flex-control-thumbs img:hover,
.bmx-pdp__media .flex-control-thumbs img.flex-active {
    opacity: 1;
    border-color: var(--navy);
}

/* ---------- 4. Podsumowanie -------------------------------- */
.bmx-pdp__sum { width: auto !important; float: none !important; }

.bmx-pdp__t {
    margin: 10px 0 0;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    line-height: 1.1;
    letter-spacing: -.018em;
    color: var(--navy);
    text-wrap: balance;
}

.bmx-pdp__price {
    margin-top: 16px;
    font-family: var(--sans);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--navy);
}

.bmx-pdp__price .price { margin: 0; color: inherit; font-size: inherit; }

.bmx-pdp__price del {
    margin-right: 10px;
    font-size: .72em;
    font-weight: 400;
    color: var(--muted);
}

.bmx-pdp__price ins {
    text-decoration: none;
    color: var(--red);
}

.bmx-pdp__price .woocommerce-Price-currencySymbol { font-size: .7em; }

.bmx-pdp__lead {
    margin-top: 16px;
    max-width: 52ch;
    font-family: var(--sans);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.7;
    color: var(--muted);
}

.bmx-pdp__lead p { margin: 0 0 .8em; }
.bmx-pdp__lead p:last-child { margin-bottom: 0; }

/* ---------- 5. Warianty i koszyk ---------------------------
   Markup z woocommerce_template_single_add_to_cart(): tabela '.variations'
   z selectami atrybutow, pod nia '.woocommerce-variation-add-to-cart'. */
.bmx-pdp__cart {
    margin-top: 28px;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
}

.bmx-pdp__cart table.variations {
    width: 100%;
    margin: 0 0 18px;
    border: 0;
    border-collapse: collapse;
}

.bmx-pdp__cart table.variations tr { display: block; margin-bottom: 14px; }
.bmx-pdp__cart table.variations tr:last-child { margin-bottom: 0; }

.bmx-pdp__cart table.variations th,
.bmx-pdp__cart table.variations td {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    text-align: left;
}

.bmx-pdp__cart table.variations th label {
    display: block;
    margin-bottom: 7px;
    font-family: var(--sans);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--navy);
}

.bmx-pdp__cart select {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    padding: 13px 40px 13px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%230B2240' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    font-family: var(--sans);
    font-size: .95rem;
    color: var(--navy);
    cursor: pointer;
}

.bmx-pdp__cart select:focus {
    outline: none;
    border-color: var(--navy);
}

/* Pole zablokowane - cztery produkty maja baze na sztywno "biel". */
.bmx-pdp__cart select:disabled {
    background-color: var(--cream);
    color: var(--muted);
    cursor: default;
}

.bmx-pdp__cart .reset_variations {
    display: inline-block;
    margin-top: 6px;
    font-family: var(--sans);
    font-size: .78rem;
    color: var(--muted);
}

.bmx-pdp__cart .woocommerce-variation-price {
    margin-bottom: 14px;
    font-family: var(--sans);
    font-size: 1.28rem;
    font-weight: 500;
    color: var(--navy);
}

.bmx-pdp__cart .woocommerce-variation-availability { margin-bottom: 12px; }

.bmx-pdp__cart .stock {
    font-family: var(--sans);
    font-size: .85rem;
    font-weight: 500;
    color: #1F7A4D;
}

.bmx-pdp__cart .stock.out-of-stock { color: var(--red); }

/* Ilosc + przycisk W JEDNYM RZEDZIE.
   'proformat.css' wymusza tu 'display:block !important'
   (selektor 'div.woocommerce-variation-add-to-cart.variations_button'),
   przez co przycisk ladowal POD polem ilosci. Zbijamy to tym samym
   '!important', ale z wyzsza specyficznoscia: (0,3,1) kontra (0,2,1). */
.bmx-pdp__cart form.cart,
.bmx-pdp__cart div.woocommerce-variation-add-to-cart.variations_button {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.bmx-pdp__cart form.variations_form { display: block; }

/* Blok wyboru koloru zajmuje caly wiersz - dopiero pod nim staja
   obok siebie ilosc i przycisk. */
.bmx-pdp__cart div.woocommerce-variation-add-to-cart .extra-options {
    flex: 1 0 100%;
}

.bmx-pdp__cart .quantity {
    display: flex;
    flex: none;
}

/* Przycisk "Dodaj do koszyka" - ten sam komponent co "Wybierz kolor".
   ============================================================
   SPECYFICZNOSC - dlaczego selektory sa tak dlugie:
   WooCommerce styluje ten przycisk regula
     :where(...):where(...) .woocommerce button.button.alt { background:#7f54b3; ... }
   Czesci w ':where()' maja wage ZERO, ale to, co po nich, daje (0,3,1).
   Nasze wczesniejsze '.bmx-pdp__cart .single_add_to_cart_button' to (0,2,0),
   wiec przegrywalo - stad fioletowe tlo, zaokraglenie 3px, 'line-height:1'
   i przycisk siedzacy wyzej niz pole ilosci.
   Dokladamy klasy do (0,4,1), a dla stanow hover/disabled do (0,5,1).
   ============================================================ */
.bmx-pdp .bmx-pdp__cart button.single_add_to_cart_button.button.alt,
.bmx-pdp .bmx-pdp__cart button.single_add_to_cart_button {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* NIE ROZCIAGAMY przycisku na reszte wiersza. Bylo 'flex:1 1 200px'
       - mialo sens, gdy rzad "ilosc + przycisk" byl waski. Po wyrownaniu
       ceny i koszyka do lewej (2026-09-17) rzad ma pelna szerokosc karty
       i przycisk urosl do 424 px. */
    flex: 0 0 auto;
    min-width: 220px;
    max-width: 100%;
    min-height: 54px;
    height: 54px;
    margin: 0;
    padding: 0 32px;
    border: 1px solid var(--red);
    border-radius: 999px;
    background: var(--red);
    background-color: var(--red);
    background-image: none;
    color: #fff;
    font-family: var(--sans);
    font-size: .735rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .15em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: color .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease);
}

.bmx-pdp .bmx-pdp__cart button.single_add_to_cart_button::after {
    content: "";
    position: absolute;
    left: -6%;
    right: -6%;
    bottom: -2px;
    height: 210%;
    z-index: -1;
    background: var(--navy);
    border-radius: 48% 52% 0 0 / 16% 20% 0 0;
    transform: translateY(102%) rotate(-2deg);
    transition: transform .95s cubic-bezier(.62, .02, .3, 1), border-radius .95s cubic-bezier(.62, .02, .3, 1);
}

.bmx-pdp .bmx-pdp__cart button.single_add_to_cart_button.button.alt:hover,
.bmx-pdp .bmx-pdp__cart button.single_add_to_cart_button:hover,
.bmx-pdp .bmx-pdp__cart button.single_add_to_cart_button:focus-visible {
    transform: translateY(-2px);
    border-color: var(--navy);
    background-color: var(--red);
    color: #fff;
}

.bmx-pdp .bmx-pdp__cart button.single_add_to_cart_button:hover::after,
.bmx-pdp .bmx-pdp__cart button.single_add_to_cart_button:focus-visible::after {
    transform: translateY(0) rotate(0deg);
    border-radius: 0;
}

/* Wlasciwy wariant z makiety: maska pedzla jedzie z PRAWEJ na LEWA.
   Dziala, bo to <button> - <input> nie ma pseudoelementow (patrz
   formularz na /dla-profesjonalistow/). */
@supports ((-webkit-mask-image: url('')) or (mask-image: url(''))) {
    .bmx-pdp .bmx-pdp__cart button.single_add_to_cart_button::after {
        left: 0; right: 0; top: 0; bottom: 0;
        height: auto;
        border-radius: 0;
        transform: none;
        background:
            repeating-linear-gradient(112deg, rgba(255,255,255,.022) 0 2px, rgba(255,255,255,0) 2px 11px),
            var(--navy);
        -webkit-mask-image: var(--brush);        mask-image: var(--brush);
        -webkit-mask-size: 300% 100%;            mask-size: 300% 100%;
        -webkit-mask-repeat: no-repeat;          mask-repeat: no-repeat;
        -webkit-mask-position: 100% center;      mask-position: 100% center;
        transition: -webkit-mask-position 1.05s cubic-bezier(.42, .03, .25, 1),
                            mask-position 1.05s cubic-bezier(.42, .03, .25, 1);
    }
    .bmx-pdp .bmx-pdp__cart button.single_add_to_cart_button:hover::after,
    .bmx-pdp .bmx-pdp__cart button.single_add_to_cart_button:focus-visible::after {
        transform: none;
        border-radius: 0;
        -webkit-mask-position: 0% center;        mask-position: 0% center;
    }
}

/* Stan nieaktywny - dopoki nie wybrano wariantu.

   POPRAWKA 2026-09-16. Zgloszenie klientki: "czerwony na buttonach przy
   cechach produktu ma niespojny, kompletnie inny odcien od globalnego".

   Odcien byl w porzadku - to byla dokladnie czerwien marki '--red'
   (#DB0632). Psula ja 'opacity:.45': czerwien rozcienczona kryciem
   na jasnym tle daje rgb(237, 141, 161), czyli wyblakly roz.
   Zmierzone w przegladarce, na oko wyglada jak druga, gorsza czerwien
   marki - i tak wlasnie zostalo odczytane.

   Przycisk jest tu NIEAKTYWNY (klasa 'wc-variation-selection-needed',
   dopoki nie wybrano bazy i pojemnosci), wiec nie powinien w ogole
   udawac przycisku glownego. Zamiast rozcienczac czerwien, dajemy mu
   neutralne tlo: czytelnie mowi "jeszcze nie teraz", a czerwien marki
   zostaje zarezerwowana dla stanu, w ktorym da sie kliknac.

   'opacity' wraca do 1 - to ono bylo zrodlem falszywego koloru. */
.bmx-pdp .bmx-pdp__cart button.single_add_to_cart_button.disabled,
.bmx-pdp .bmx-pdp__cart button.single_add_to_cart_button.button.alt.disabled,
.bmx-pdp .bmx-pdp__cart button.single_add_to_cart_button:disabled,
.bmx-pdp .bmx-pdp__cart button.single_add_to_cart_button.button.alt:disabled:hover {
    opacity: 1;
    cursor: not-allowed;
    transform: none;
    background-color: rgba(11, 34, 64, .09);
    border-color: transparent;
    color: var(--muted);
}

.bmx-pdp .bmx-pdp__cart button.single_add_to_cart_button.disabled::after,
.bmx-pdp .bmx-pdp__cart button.single_add_to_cart_button:disabled::after {
    display: none;
}

/* ---------- 5b. Wybor koloru farby -------------------------
   Markup wtyczki bmpolska-pf_plugin, wstrzykiwany do formularza koszyka:
     .extra-options
       .row.first     -> tytul + dwa radia (Biel / Kolor)
       .row.second    -> '#color_selector' z polem '#searched_color',
                         podpowiedziami '#display' i informacja o podkladzie
   W zrodle nie ma dla nich ZADNYCH stylow poza ukladem - stad goly input.
   ------------------------------------------------------------ */
.bmx-pdp__cart .extra-options {
    width: 100%;
    margin-bottom: 18px;
}

.bmx-pdp__cart .extra-options .title {
    margin-bottom: 9px;
    font-family: var(--sans);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--navy);
}

/* Dwa warianty jako para przyciskow-kart, nie gole kropki. */
.bmx-pdp__cart .extra-options .row.first {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.bmx-pdp__cart .extra-options .row.first .title { flex: 1 0 100%; margin-bottom: 0; }

.bmx-pdp__cart .extra-options .item { flex: 1 1 140px; }

.bmx-pdp__cart .extra-options .item label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 13px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    background: #fff;
    font-family: var(--sans);
    font-size: .93rem;
    color: var(--navy);
    cursor: pointer;
    transition: border-color .3s var(--ease), background .3s var(--ease);
}

.bmx-pdp__cart .extra-options .item label:hover { border-color: var(--navy); }

.bmx-pdp__cart .extra-options .item input[type="radio"] {
    width: 17px;
    height: 17px;
    margin: 0 5px 0 0;
    accent-color: var(--red);
    cursor: pointer;
}

.bmx-pdp__cart .extra-options .item:has(input:checked) label {
    border-color: var(--red);
    background: var(--paper);
}

/* Pole "Wpisz kolor" - w zrodle calkiem nieostylowane. */
.bmx-pdp__cart .color_choser {
    position: relative;
    margin: 0;
}

.bmx-pdp__cart .extra-options .color_choser .title-bigger {
    display: block;
    font-family: var(--sans);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--navy);
    position: relative;
}

.bmx-pdp__cart #searched_color {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 13px 46px 13px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    background: #fff;
    font-family: var(--sans);
    font-size: .95rem;
    font-weight: 400;
    color: var(--navy);
}

.bmx-pdp__cart #searched_color:focus {
    outline: none;
    border-color: var(--navy);
}

.bmx-pdp__cart #searched_color::placeholder {
    color: var(--muted);
    font-weight: 400;
    opacity: 1;
}

/* Skrot do probnika pod polem - wstawia go 'produkt.js'.
   Etykieta '.title-bigger' jest WERSALIKAMI z rozstrzelonym pismem; napis
   siedzi obok niej, nie w srodku, ale '.extra-options' rozdaje wlasne
   wielkosci, wiec podajemy swoje wprost.
   Czerwien jest ta sama co w reszcie odnosnikow tresciowych (patrz
   '.bmx-pdp__crumbs a:hover'), a na najechaniu przechodzi w granat -
   tak zachowuja sie linki w calej makiecie. */
.bmx-pdp__cart .bmx-pdp__probnik {
    margin: 8px 0 0;
    font-family: var(--sans);
    font-size: .8rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.45;
    color: var(--muted);
}

.bmx-pdp__cart .bmx-pdp__probnik a {
    color: var(--red);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    cursor: pointer;
    transition: color .25s var(--ease);
}

.bmx-pdp__cart .bmx-pdp__probnik a:hover,
.bmx-pdp__cart .bmx-pdp__probnik a:focus-visible {
    color: var(--navy);
}

/* Kropka z podgladem wybranego koloru. Wtyczka wstrzykuje jej tlo przez
   '<style>.title-bigger::after{background-color:#xxx}'. W zrodle ma
   'left:298px' i 40x40 px - przy naszej szerokosci pola trafialaby w prozne
   miejsce, wiec kotwiczymy ja od PRAWEJ. Specyficznosc (0,4,0) kontra (0,2,0). */
.bmx-pdp__cart .extra-options .color_choser .title-bigger::after {
    content: "";
    position: absolute;
    left: auto;
    top: auto;
    right: 13px;
    bottom: 11px;
    width: 24px;
    height: 24px;
    border: 1px solid var(--line);
    border-radius: 50%;
}

/* Lista podpowiedzi po wpisaniu nazwy. */
.bmx-pdp__cart #display {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    margin-top: 6px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    box-shadow: var(--shadow-m);
}

.bmx-pdp__cart #display .searched_color {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line-soft);
    font-family: var(--sans);
    font-size: .9rem;
    color: var(--navy);
    cursor: pointer;
}

.bmx-pdp__cart #display .searched_color:hover { background: var(--paper); }

.bmx-pdp__cart #display .color-preview {
    flex: none;
    width: 26px;
    height: 26px;
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
}

/* "lub wybierz z:" - w Oxygenie zapowiadalo przyciski otwierajace okna
   modalne z paleta. Tych przyciskow juz nie ma (paleta jest w oknie
   modalnym), wiec zdanie prowadzilo donikad.

   ':not()' JEST TU KONIECZNE: regula chowa KAZDY akapit bedacy dzieckiem
   '.color_choser', a nasz skrot do probnika tez nim jest. Wyjatek zapisany
   wprost, zeby bylo widac, ze chowamy pozostalosc po wtyczce, a nie
   "wszystkie akapity". */
.bmx-pdp__cart .color_choser > p:not(.bmx-pdp__probnik) {
    display: none;
}

/* Informacja o koniecznosci podkladu. */
.bmx-pdp__cart .extra-options .primer-info {
    margin-top: 14px;
    padding: 14px;
    background: var(--cream);
    border-radius: var(--r-s);
    font-size: .86rem;
    color: var(--ink);
}

.bmx-pdp__cart .primer-text {
    margin-bottom: 10px;
    font-family: var(--sans);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--red);
}

.bmx-pdp__cart .primer-box {
    display: flex;
    align-items: center;
    gap: 14px;
}

.bmx-pdp__cart .primer-img img {
    width: auto;
    height: auto;
    max-width: 62px;
    max-height: 72px;
}

.bmx-pdp__cart .primer-title {
    font-family: var(--sans);
    font-size: .86rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--navy);
}

.bmx-pdp__cart .primer-more a {
    display: inline-block;
    margin-top: 6px;
    font-family: var(--sans);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .1em;
    color: var(--red);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

/* Ostrzezenie o niedostepnej pojemnosci dla wybranej bazy. */
.bmx-pdp__cart .container-base-warning {
    margin-top: 12px;
    padding: 12px 14px;
    border-left: 3px solid var(--red);
    border-radius: var(--r-xs);
    background: var(--paper);
    font-family: var(--sans);
    font-size: .86rem;
    color: var(--ink);
}

/* Komunikat pod polem koloru (np. odcien niedostepny dla tego produktu). */
.bmx-pdp__cart .bmx-pdp__info {
    margin-top: 12px;
    padding: 11px 14px;
    border-left: 3px solid var(--red);
    border-radius: var(--r-xs);
    background: var(--paper);
    font-family: var(--sans);
    font-size: .86rem;
    color: var(--ink);
}

/* Kolek ladowania dokladany przez skrypt przy wyborze probki. */
.bmx-pdp__cart .loader,
.bmx-pdp__loader {
    width: 20px;
    height: 20px;
    margin: 10px auto 0;
    border: 2px solid var(--line);
    border-top-color: var(--red);
    border-radius: 50%;
    animation: bmx-pdp-spin .8s linear infinite;
}

@keyframes bmx-pdp-spin { to { transform: rotate(360deg); } }

/* Blysk potwierdzajacy, ze wybor probki trafil do formularza. */
.bmx-pdp__cart--wybrany {
    border-color: var(--red);
    box-shadow: 0 0 0 4px rgba(219, 6, 50, .1);
}

/* Probki w sekcji "Dobierz kolor" sa klikalne w konkretnym celu. */
.bmx-pdp__colors .single-color { cursor: pointer; }

/* ---------- 6. Pasek zaufania ------------------------------ */
.bmx-pdp__trust {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}

@media (max-width: 560px) {
    .bmx-pdp__trust { grid-template-columns: 1fr; }
}

.bmx-pdp__trust li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--sans);
    font-size: .78rem;
    font-weight: 400;
    line-height: 1.35;
    color: var(--muted);
}

.bmx-pdp__trust svg { flex: none; color: var(--red); }

/* ---------- 7. Probnik kolorow -----------------------------
   Zawartosc pochodzi z wtyczki - nie ruszamy jej wnetrza, dajemy tylko
   oprawe sekcji. Klasy z sufiksem '-darker' zostaja nietkniete: to
   mechanizm kontrastu na ciemnych probkach (patrz kolory.css). */
.bmx-pdp__colors {
    padding-block: clamp(34px, 4vw, 66px);
    background: var(--cream);
}

.bmx-pdp__colors-h { margin-bottom: 24px; }
.bmx-pdp__colors-h .bmx-h2 { margin-top: 10px; }

.bmx-pdp__colors-b {
    padding: clamp(18px, 2.4vw, 30px);
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
    overflow: hidden;
}

.bmx-pdp__colors-b .pf-plugin h2 { display: none; }

/* Przelacznik dwoch nawigacji nad ta sama siatka probek.
   Bez niego obie palety renderowaly sie jedna pod druga - w Oxygenie kazda
   siedziala w osobnym oknie modalnym, u nas leza na stronie. */
.bmx-pdp__ptabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
}

.bmx-pdp__ptab {
    -webkit-appearance: none;
    appearance: none;
    padding: 11px 22px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    font-family: var(--sans);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--navy);
    cursor: pointer;
    transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}

.bmx-pdp__ptab:hover { border-color: var(--navy); background: var(--paper); }

.bmx-pdp__ptab.is-on {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

.bmx-pdp__ppanel { display: none; }
.bmx-pdp__ppanel.is-on { display: block; }

/* ---------- 7b. Przycisk "Wybierz kolor" -------------------
   Siedzi w panelu obok siatki probek, na tle WYBRANEGO koloru. W zrodle
   (proformat.css) to przezroczysty prostokat z obrysem, ktory wtyczka
   przemalowuje na bialo klasa '.color-more-darker', gdy probka jest ciemna.

   Robimy z niego przycisk makiety: czerwien marki + bialy tekst + hover
   "z pedzla" jadacy z prawej na lewa. Czerwien na bialym tekscie czyta sie
   na KAZDYM tle probki, wiec caly mechanizm '-darker' przestaje byc tu
   potrzebny - dlatego nadpisujemy takze jego warianty. To ta sama decyzja,
   ktora makieta podjela dla '.bmx-btn--light' stojacego na zdjeciu.

   SPECYFICZNOSC: zrodlo ma '.pf-plugin .single-family .right-side
   .color-more-button' = (0,4,0), a wariant '-darker' (0,5,0). Dlatego
   selektory ponizej celuja przez pelny lancuch z '.bmx-pdp' - (0,6,0).
   ------------------------------------------------------------ */
.bmx-pdp .pf-plugin .color-more-button.choose-color-btn,
.bmx-pdp .pf-plugin .single-family .right-side .color-more-button.choose-color-btn,
.bmx-pdp .pf-plugin .single-family .right-side .color-more-button.choose-color-btn.color-more-darker {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 26px;
    border: 1px solid var(--red);
    border-radius: 999px;
    background: var(--red);
    font-family: var(--sans);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: #fff;
    cursor: pointer;
    transition: color .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease);
}

.bmx-pdp .pf-plugin .color-more-button.choose-color-btn::after {
    content: "";
    position: absolute;
    left: -6%;
    right: -6%;
    bottom: -2px;
    height: 210%;
    z-index: -1;
    background: var(--navy);
    border-radius: 48% 52% 0 0 / 16% 20% 0 0;
    transform: translateY(102%) rotate(-2deg);
    transition: transform .95s cubic-bezier(.62, .02, .3, 1), border-radius .95s cubic-bezier(.62, .02, .3, 1);
}

.bmx-pdp .pf-plugin .color-more-button.choose-color-btn:hover,
.bmx-pdp .pf-plugin .single-family .right-side .color-more-button.choose-color-btn:hover,
.bmx-pdp .pf-plugin .single-family .right-side .color-more-button.choose-color-btn.color-more-darker:hover {
    transform: translateY(-2px);
    border-color: var(--navy);
    background: var(--red);
    color: #fff;
}

.bmx-pdp .pf-plugin .color-more-button.choose-color-btn:hover::after,
.bmx-pdp .pf-plugin .color-more-button.choose-color-btn:focus-visible::after {
    transform: translateY(0) rotate(0deg);
    border-radius: 0;
}

/* Wlasciwy wariant z makiety - maska pedzla z prawej na lewa. */
@supports ((-webkit-mask-image: url('')) or (mask-image: url(''))) {
    .bmx-pdp .pf-plugin .color-more-button.choose-color-btn::after {
        left: 0; right: 0; top: 0; bottom: 0;
        height: auto;
        border-radius: 0;
        transform: none;
        background:
            repeating-linear-gradient(112deg, rgba(255,255,255,.022) 0 2px, rgba(255,255,255,0) 2px 11px),
            var(--navy);
        -webkit-mask-image: var(--brush);        mask-image: var(--brush);
        -webkit-mask-size: 300% 100%;            mask-size: 300% 100%;
        -webkit-mask-repeat: no-repeat;          mask-repeat: no-repeat;
        -webkit-mask-position: 100% center;      mask-position: 100% center;
        transition: -webkit-mask-position 1.05s cubic-bezier(.42, .03, .25, 1),
                            mask-position 1.05s cubic-bezier(.42, .03, .25, 1);
    }
    .bmx-pdp .pf-plugin .color-more-button.choose-color-btn:hover::after,
    .bmx-pdp .pf-plugin .color-more-button.choose-color-btn:focus-visible::after {
        transform: none;
        border-radius: 0;
        -webkit-mask-position: 0% center;        mask-position: 0% center;
    }
}

/* ---------- 8. Zakladki -----------------------------------
   Markup z woocommerce_output_product_data_tabs(). Zakladki zostaja
   zakladkami (skrypt Woo przelacza panele), zmienia sie tylko wyglad:
   pigulki zamiast obramowanych prostokatow. */
/* Sekcja opisu dzieli tlo z sasiadami (probnik i produkty powiazane maja
   var(--cream)). Wczesniej byla jasniejsza od nich, przez co opis wygladal
   jak bialy pas wciety miedzy dwie sekcje. */
.bmx-pdp__tabs-sec {
    padding-block: clamp(34px, 4vw, 66px);
    background: var(--cream);
}

.bmx-pdp .woocommerce-tabs { display: block; }

.bmx-pdp .woocommerce-tabs ul.tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
    border: 0;
}

/* Jedna zakladka to nie zakladki - pasek z jedna pigulka byl tylko halasem,
   tym bardziej ze jej etykieta ("Opis") powtarzala naglowek panelu. */
.bmx-pdp .woocommerce-tabs ul.tabs:has(li:only-child) {
    display: none;
}

.bmx-pdp .woocommerce-tabs ul.tabs::before,
.bmx-pdp .woocommerce-tabs ul.tabs li::before,
.bmx-pdp .woocommerce-tabs ul.tabs li::after { display: none; }

.bmx-pdp .woocommerce-tabs ul.tabs li {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.bmx-pdp .woocommerce-tabs ul.tabs li a {
    display: block;
    padding: 11px 22px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    font-family: var(--sans);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--navy);
    text-decoration: none;
    transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);

    /* PEDZEL (2026-09-28, zgloszenie: "buttony sterujace tabs nie maja efektu,
       ktory mamy standardowo na buttonach, i kolor sie nie zgadza").
       Mechanizm i tokeny z pedzel.css; zakladka jest obrysowa, wiec
       zamalowuje sie GRANATEM - tym samym kolorem, co zakladka aktywna. */
    --bmx-farba: var(--navy);
    --bmx-tlo: transparent;
    --bmx-tekst: #fff;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.bmx-pdp .woocommerce-tabs ul.tabs li:not(.active) a {
    transition: color .3s var(--bmx-ease, ease) var(--bmx-zwloka-wyj, .45s),
                border-color .45s var(--bmx-ease, ease);
}

.bmx-pdp .woocommerce-tabs ul.tabs li:not(.active) a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        repeating-linear-gradient(112deg, rgba(255, 255, 255, .022) 0 2px, rgba(255, 255, 255, 0) 2px 11px),
        var(--bmx-farba);
    -webkit-mask-image: var(--bmx-brush, var(--brush));
            mask-image: var(--bmx-brush, var(--brush));
    -webkit-mask-size: 300% 100%;
            mask-size: 300% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: 100% center;
            mask-position: 100% center;
    transition: -webkit-mask-position 1.05s var(--bmx-walek, ease),
                        mask-position 1.05s var(--bmx-walek, ease);
}

.bmx-pdp .woocommerce-tabs ul.tabs li:not(.active) a:hover::after,
.bmx-pdp .woocommerce-tabs ul.tabs li:not(.active) a:focus-visible::after {
    -webkit-mask-position: 0% center;
            mask-position: 0% center;
}

/* '!important' TYLKO na hoverze - z tego samego powodu co w pedzel.css:
   Oxygen wypisuje inline '.woocommerce-tabs ul li a:hover
   { background-color:#BA0C2C !important; color:#fff !important }'
   (inna czerwien niz --red) i bez tego wygrywal z kazda nasza regula. */
.bmx-pdp .woocommerce-tabs ul.tabs li:not(.active) a:hover,
.bmx-pdp .woocommerce-tabs ul.tabs li:not(.active) a:focus-visible {
    background-color: var(--bmx-tlo) !important;
    border-color: var(--bmx-farba) !important;
    color: var(--bmx-tekst) !important;
    transition: color .3s var(--bmx-ease, ease) var(--bmx-zwloka-wej, .3s),
                border-color .45s var(--bmx-ease, ease);
}

/* Aktywna zakladka na hoverze zostaje granatowa (Oxygen robil z niej czerwona). */
.bmx-pdp .woocommerce-tabs ul.tabs li.active a:hover {
    background-color: var(--navy) !important;
    color: #fff !important;
}

@media (prefers-reduced-motion: reduce) {
    .bmx-pdp .woocommerce-tabs ul.tabs li:not(.active) a::after { transition: none; }
}

.bmx-pdp .woocommerce-tabs ul.tabs li.active a {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

/* BIALE TLO OPISU - skad sie bralo:
   NIE z arkuszy (przeszukane wszystkie 12 ladowanych na tej stronie), tylko
   z bloku <style> wypisywanego INLINE przez Oxygena: '.wc-tab{background-color:#fff}'.
   Oxygen drukuje CSS swoich 'code blocks' niezaleznie od tego, czy jego szablon
   sie renderuje - nasz filtr 'style_loader_tag' zdejmuje tylko PLIKI .css,
   a tego bloku nie dotyka. Panel opisu ma klase 'wc-tab', wiec go lapal.
   Bijemy to specyficznoscia: (0,3,0) kontra (0,1,0) - wygrywamy niezaleznie
   od kolejnosci, a inline <style> i tak idzie po naszym arkuszu. */
.bmx-pdp .woocommerce-Tabs-panel.wc-tab,
.bmx-pdp .woocommerce-Tabs-panel {
    background: transparent;
    background-color: transparent;
}

.bmx-pdp .woocommerce-Tabs-panel {
    max-width: 74ch;
    margin-inline: auto;   /* bez tego kolumna tekstu wisi przy lewej krawedzi */
    font-family: var(--sans);
    font-size: 1.125rem;   /* 18 px - o 2 px wieksze niz bazowe 16 px */
    font-weight: 300;
    line-height: 1.75;
    color: var(--ink);
}

/* Naglowek panelu dubluje etykiete zakladki - chowamy go WYLACZNIE wtedy,
   gdy pasek zakladek naprawde jest na ekranie (czyli przy wiecej niz jednej). */
.bmx-pdp .woocommerce-tabs:has(ul.tabs li:not(:only-child)) .woocommerce-Tabs-panel > h2:first-child {
    display: none;
}

.bmx-pdp .woocommerce-Tabs-panel > h2:first-child {
    margin-top: 0;
    text-align: center;
}

.bmx-pdp .woocommerce-Tabs-panel h2,
.bmx-pdp .woocommerce-Tabs-panel h3,
.bmx-pdp .woocommerce-Tabs-panel h4 {
    font-family: var(--serif);
    font-weight: 500;
    color: var(--navy);
    line-height: 1.22;
    margin: 1.7em 0 .5em;
}

.bmx-pdp .woocommerce-Tabs-panel table {
    width: 100%;
    border-collapse: collapse;
}

.bmx-pdp .woocommerce-Tabs-panel th,
.bmx-pdp .woocommerce-Tabs-panel td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--line-soft);
    text-align: left;
}

/* ---------- 9. Produkty powiazane --------------------------
   Karta jest IDENTYCZNA z kafelkiem sklepu (widget 'bm-custom-menu').
   Reguly przeniesione 1:1 z 'sklep.css' ('.bm-shop-wrapper .product-card'),
   bo tamten arkusz NIE laduje sie na karcie produktu. Klasy 'product-card...'
   sa te same co w sklepie; scope '.bmx-pdp__rel' trzyma je wylacznie w tej
   sekcji. Zmieniasz karte sklepowa? Zaktualizuj tez ten blok (i markup
   w 'produkt-template.php'). */
.bmx-pdp__rel {
    padding-block: clamp(34px, 4vw, 70px);
    background: var(--cream);
}

.bmx-pdp__rel-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 1.8vw, 26px);
    margin-top: 30px;
    align-items: stretch;
}

@media (max-width: 900px) { .bmx-pdp__rel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .bmx-pdp__rel-grid { grid-template-columns: 1fr; } }

/* Kafelek - cala karta jest odnosnikiem (<a class="product-card">). */
.bmx-pdp__rel .product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
    box-shadow: none;
    text-decoration: none;
    color: inherit;
    transition: transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease);
}

.bmx-pdp__rel .product-card:hover,
.bmx-pdp__rel .product-card:focus-visible {
    transform: translateY(-6px);
    box-shadow: var(--shadow-mh);
    border-color: transparent;
}

.bmx-pdp__rel .product-card:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 3px;
}

/* Kod produktu - pigulka w rogu; kryjace tlo, zeby zdjecie nie przebijalo. */
.bmx-pdp__rel .product-code-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    padding: 4px 8px;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    background: #fff;
    box-shadow: var(--shadow-s);
    font-family: var(--sans);
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.25;
    text-transform: uppercase;
    color: var(--navy);
}

/* Zdjecie - stala wysokosc ramki, obrazek w naturalnej wielkosci (zrodlo ~200 px). */
.bmx-pdp__rel .image-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 250px;
    padding: 50px 16px 16px;
    background: var(--paper);
    overflow: hidden;
}

.bmx-pdp__rel .image-wrapper img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 14px 20px rgba(11, 34, 64, .15));
    transition: transform .6s var(--ease);
}

.bmx-pdp__rel .product-card:hover .image-wrapper img { transform: scale(1.05); }

/* Wysrodkowanie tresci - w sklepie daje je bazowy 'shop-style.css'
   ('.card-details{text-align:center}'), ktory nie laduje sie na karcie
   produktu; odtwarzamy je tutaj, zeby kafelek byl 1:1 ze sklepem. */
.bmx-pdp__rel .card-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    flex: 1;
    padding: 20px 20px 22px;
    text-align: center;
}

.bmx-pdp__rel .product-name {
    margin: 0;
    font-family: var(--sans);
    font-size: .955rem;
    font-weight: 600;
    line-height: 1.32;
    letter-spacing: -.004em;
    color: var(--navy);
    transition: color .35s var(--ease);
}

.bmx-pdp__rel .product-card:hover .product-name { color: var(--red); }

.bmx-pdp__rel .product-description {
    margin: 0;
    flex: 1 1 auto;
    min-height: calc(3 * 1.6em);
    font-family: var(--sans);
    font-size: .815rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* "N kolorow do wyboru" - czerwona kropka zamiast emoji palety. */
.bmx-pdp__rel .product-colors-info {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--sans);
    font-size: .73rem;
    font-weight: 400;
    color: var(--navy);
}

.bmx-pdp__rel .product-colors-info::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--red);
}

/* Tagi - ikony schowane, widoczne tylko trzy pierwsze (jak w sklepie). */
.bmx-pdp__rel .product-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 2px;
}

.bmx-pdp__rel .product-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    background: transparent;
    font-family: var(--sans);
    font-size: .63rem;
    font-weight: 500;
    letter-spacing: .05em;
    line-height: 1.5;
    color: var(--muted);
    white-space: nowrap;
}

.bmx-pdp__rel .product-tag .tag-icon { display: none; }
.bmx-pdp__rel .product-tag:nth-of-type(n+4) { display: none; }

/* Stopka kafelka - wloskowata linia i cena. */
.bmx-pdp__rel .product-price-section {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
}

.bmx-pdp__rel .price-label {
    font-family: var(--sans);
    font-size: .68rem;
    font-weight: 400;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}

.bmx-pdp__rel .price-value {
    font-family: var(--sans);
    font-size: 1.06rem;
    font-weight: 600;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Przycisk - wizualnie ten sam co w sklepie; tu jako <span>, bo cala karta
   jest odnosnikiem. Wypelnienie pedzlem odpalamy hoverem KARTY, nie przycisku. */
.bmx-pdp__rel .btn-variant {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 12px;
    padding: 12px 20px;
    border: 1px solid var(--red);
    border-radius: 999px;
    background: var(--red);
    font-family: var(--sans);
    font-size: .69rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
    transition: color .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease);
}

.bmx-pdp__rel .btn-variant::after {
    content: "";
    position: absolute;
    left: -6%;
    right: -6%;
    bottom: -2px;
    height: 210%;
    z-index: -1;
    background: var(--navy);
    border-radius: 48% 52% 0 0 / 16% 20% 0 0;
    transform: translateY(102%) rotate(-2deg);
    transition: transform .95s cubic-bezier(.62, .02, .3, 1), border-radius .95s cubic-bezier(.62, .02, .3, 1);
}

.bmx-pdp__rel .product-card:hover .btn-variant,
.bmx-pdp__rel .product-card:focus-visible .btn-variant {
    transform: translateY(-2px);
    border-color: var(--navy);
    color: #fff;
}

.bmx-pdp__rel .product-card:hover .btn-variant::after,
.bmx-pdp__rel .product-card:focus-visible .btn-variant::after {
    transform: translateY(0) rotate(0deg);
    border-radius: 0;
}

@supports ((-webkit-mask-image: url('')) or (mask-image: url(''))) {
    .bmx-pdp__rel .btn-variant::after {
        left: 0; right: 0; top: 0; bottom: 0;
        height: auto;
        border-radius: 0;
        transform: none;
        background:
            repeating-linear-gradient(112deg, rgba(255,255,255,.022) 0 2px, rgba(255,255,255,0) 2px 11px),
            var(--navy);
        -webkit-mask-image: var(--brush);        mask-image: var(--brush);
        -webkit-mask-size: 300% 100%;            mask-size: 300% 100%;
        -webkit-mask-repeat: no-repeat;          mask-repeat: no-repeat;
        -webkit-mask-position: 100% center;      mask-position: 100% center;
        transition: -webkit-mask-position 1.05s cubic-bezier(.42, .03, .25, 1),
                            mask-position 1.05s cubic-bezier(.42, .03, .25, 1);
    }
    .bmx-pdp__rel .product-card:hover .btn-variant::after,
    .bmx-pdp__rel .product-card:focus-visible .btn-variant::after {
        transform: none;
        border-radius: 0;
        -webkit-mask-position: 0% center;        mask-position: 0% center;
    }
}

.bmx-sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- 10. Komunikaty WooCommerce --------------------- */
.bmx-pdp .woocommerce-message,
.bmx-pdp .woocommerce-info,
.bmx-pdp .woocommerce-error {
    margin: 0 0 18px;
    padding: 15px 20px;
    border: 1px solid var(--line-soft);
    border-left: 3px solid var(--navy);
    border-radius: var(--r-s);
    background: #fff;
    font-family: var(--sans);
    font-size: .92rem;
    list-style: none;
    color: var(--ink);
}

.bmx-pdp .woocommerce-error { border-left-color: var(--red); }

.bmx-pdp .woocommerce-message .button,
.bmx-pdp .woocommerce-info .button {
    float: right;
    padding: 8px 18px;
    border-radius: 999px;
    background: var(--navy);
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
    .bmx-pdp * { transition: none !important; }
}

/* ============================================================
   ZAKLADKI NIESTANDARDOWE - Wlasciwosci / Kolory-parametry / Pobierz
   (2026-09-01)

   Do dzis na karcie produktu renderowala sie JEDNA zakladka - "Opis" -
   bo wtyczka 'Custom Product Tabs for WooCommerce' (YIKES) byla wylaczona.
   Po jej wlaczeniu wracaja zakladki zapisane w meta 'yikes_woo_products_tabs'
   na 31 produktach: najczesciej "Pobierz" (30 szt.), "Kolory/parametry"
   (25) i "Wlasciwosci" (17).

   Sam przelacznik i panele byly juz ostylowane w punkcie o zakladkach -
   te reguly obsluguja wiele zakladek poprawnie ('ul.tabs li a',
   'li.active a', ukrywanie paska przy jednej zakladce). Brakowalo
   natomiast obslugi TRESCI, ktorej wczesniej nie bylo z czego zobaczyc:
   te panele zawieraja obrazki, odnosniki do plikow PDF i tabele.

   UWAGA na zakladke "Opis": zgodnie z decyzja klienta z 2026-08-19 nie
   dostaje wlasnych regul ukladu. Ponizsze celuja w same odnosniki
   i obrazki, wiec ukladu opisu nie ruszaja.
   ============================================================ */

/* ---------- Obrazki w panelach -----------------------------
   Panele "Wlasciwosci" i "Pobierz" maja wgrane grafiki w oryginalnym
   rozmiarze. Bez ograniczenia rozpychaly panel poza jego szerokosc. */
.bmx-pdp .woocommerce-Tabs-panel img {
    max-width: 100%;
    height: auto;
}

/* ---------- Odnosniki w panelach ---------------------------
   'naglowek.css' zdejmuje podkreslenie wszystkim odnosnikom wewnatrz
   '.bmx' (regula '.bmx :where(a) { text-decoration:none }'), a karta
   produktu to '<div class="bmx bmx-pdp">'. Dla naglowka i stopki jest
   to sluszne, ale w zakladce "Pobierz" odnosniki do karty technicznej
   i atestu przestawaly wygladac jak odnosniki - zlewaly sie z tekstem.

   ':where()' ma wage ZERO, wiec wystarczy dowolna wlasna regula.
   Dajemy czerwien marki i podkreslenie z odstepem. */
.bmx-pdp .woocommerce-Tabs-panel a {
    color: var(--red);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color .25s var(--ease);
}

.bmx-pdp .woocommerce-Tabs-panel a:hover,
.bmx-pdp .woocommerce-Tabs-panel a:focus-visible {
    color: var(--navy);
    text-decoration: underline;
}

/* Odnosnik owijajacy sam obrazek nie potrzebuje kreski pod spodem. */
.bmx-pdp .woocommerce-Tabs-panel a:has(> img) {
    text-decoration: none;
}

/* To samo slowko "od" w kafelkach produktow powiazanych. */
.bmx-pdp .bmx-pdp__rel-p .bmx-cena-od {
    font-size: .78em;
    font-weight: 400;
    color: var(--muted);
    margin-right: 2px;
}

/* ---------- Dodatkowe zdjecia pod galeria -------------------
   Dwa kadry obok siebie, zasilane z galerii produktu WooCommerce
   (patrz 'produkt-template.php'). Blok pojawia sie tylko wtedy, gdy
   redakcja wgrala zdjecia - inaczej szablon nie wypisuje go wcale.

   UWAGA na rozmiary zrodlowe: zdjecia produktow maja w tym serwisie
   200 px w KAZDYM rozmiarze i rozciaganie ich daje pikeloze (opisane
   przy galerii glownej). Zdjecia dodatkowe wgrywa redakcja i moga byc
   dowolne, wiec ramka NIE narzuca im szerokosci - obrazek renderuje sie
   najwyzej do swojej naturalnej wielkosci, a ramka daje mu oddech.
   Stad 'width:auto' zamiast 'width:100%'. */
.bmx-pdp__extra {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}

/* Jedno zdjecie nie ma sie z czym dzielic - zajmuje cala szerokosc. */
.bmx-pdp__extra[data-ile="1"] {
    grid-template-columns: minmax(0, 1fr);
}

.bmx-pdp__extra-item {
    /* JEDNAKOWY FORMAT 16:9 (2026-09-01).
       Wczesniej ramka miala stala wysokosc 150 px i skalowanie 'contain',
       wiec kazde zdjecie zajmowalo inna czesc kadru i dwa kadry obok siebie
       nie trzymaly wspolnej linii. Teraz o wysokosci decyduje proporcja,
       a zdjecie wypelnia kadr w calosci.

       'cover' jest tu BEZPIECZNY, mimo zasady "nie rozciagac": ramka ma
       ok. 250 px szerokosci, a zrodla w rozmiarze 'large' maja 1024 px
       (sprawdzone na wszystkich piecu zdjeciach testowych: 1024x569 do
       1024x967). Skalowanie idzie wiec W DOL. Zasada dotyczy zdjec
       PRODUKTOW, ktore maja 200 px - te trafiaja do galerii wyzej,
       nie tutaj. */
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-s);
    background: #fff;
    overflow: hidden;
}

/* Odnosnik dokladany 2026-09-16 (powiekszanie kadru). Musi wypelnic
   ramke co do piksela, inaczej 'object-fit' na obrazku liczylby sie
   wzgledem odnosnika o wysokosci tekstu, a nie kadru 16:9. */
.bmx-pdp__extra-link {
    display: block;
    width: 100%;
    height: 100%;
    /* Kursor mowi, ze kadr da sie powiekszyc - lupka jest ukryta
       na zyczenie klienta, wiec to jedyny sygnal, ze tu sie klika. */
    cursor: zoom-in;
}

.bmx-pdp__extra-item img {
    display: block;
    width: 100%;
    height: 100%;
    /* Przyciecie gora-dol: kadr bierze srodek zdjecia, a nadmiar
       wysokosci wychodzi poza ramke. */
    object-fit: cover;
    object-position: center;
    transition: transform .6s var(--ease);
}

.bmx-pdp__extra-item:hover img {
    transform: scale(1.04);
}

/* NA TELEFONIE DWA KWADRATY OBOK SIEBIE.
   Zgloszenie 2026-09-17: "kafelki galerii na stronie produktu powinny
   byc malutkimi kwadracikami pod zdjeciem po 2 obok siebie, za bardzo
   rozpychaja widok".

   Bylo odwrotnie, niz zakladal poprzedni komentarz w tym miejscu:
   ustawienie jednej kolumny ponizej 560 px dawalo kadry 348x195 px
   jeden pod drugim - dwa zdjecia zajmowaly ponad 400 px zaraz pod
   puszka i spychaly opis daleko w dol.

   Zostawiamy dwie kolumny i zmieniamy proporcje na kwadrat: przy
   390 px wychodzi 169x169 px na kadr, czyli caly zestaw ma 169 px
   zamiast 400. Kadr jest mniejszy, ale to podglad - pelne zdjecie
   otwiera sie po dotknieciu (powiekszanie kadru, 'produkt.js'). */
@media (max-width: 560px) {
    .bmx-pdp__extra-item {
        aspect-ratio: 1 / 1;
    }
}

/* ---------- Ukrycie ceny wywolawczej w podsumowaniu ---------
   '<p class="price">' z 'woocommerce_template_single_price()' pokazywalo
   widelki "273.00 zl - 714.00 zl". Klient poprosil o ukrycie (2026-09-01) -
   tak samo jak na kafelkach, gdzie widelki zastapila kwota "od X zl".

   BEZPIECZENSTWO SPRAWDZONE PRZED ZMIANA:
   cena wybranego wariantu ma WLASNY element - '.woocommerce-variation-price'
   wewnatrz '.single_variation_wrap', wypelniany przez
   'add-to-cart-variation.min.js'. To dwa rozne miejsca w DOM, wiec ukrycie
   '<p class="price">' NIE psuje przeliczania ceny po wyborze pojemnosci.
   Sprawdzone rowniez, ze na karcie sa tylko te dwa elementy z klasa 'price'.

   Ukrywamy sam '<p class="price">', a nie kontener '.bmx-pdp__price' -
   gdyby kiedys doszla tam druga tresc, ma sie nadal pokazac.
   'visibility' nie wystarczy: element ma zostac bez rezerwacji miejsca. */
.bmx-pdp .bmx-pdp__price > .price {
    display: none;
}

/* Kontener zostaje w ukladzie tylko wtedy, gdy ma co pokazac - inaczej
   zabralby 16 px marginesu na pusto. */
.bmx-pdp .bmx-pdp__price:not(:has(> :not(.price))) {
    display: none;
}

/* ---------- Probnik w oknie modalnym ------------------------
   Markup probnika sie NIE zmienil - te same '.bmx-pdp__colors-b',
   '.bmx-pdp__ptab' i '.bmx-pdp__ppanel', tylko wewnatrz '<dialog>'.
   Wszystkie wczesniejsze reguly probnika dzialaja dalej. */

/* Naglowek sekcji przestal byc zapowiedzia palety, a stal sie zaproszeniem -
   dostaje wiec oddech i wyrownanie do srodka. */
.bmx-pdp__colors-h {
    text-align: center;
}

.bmx-pdp__colors-l {
    max-width: 54ch;
    margin: 12px auto 22px;
    font-family: var(--sans);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--muted);
}

.bmx-pdp__colors-open {
    margin-inline: auto;
}

/* ---- Samo okno ---- */
.bmx-pdp__modal {
    width: min(1100px, calc(100vw - 32px));
    max-width: none;
    max-height: calc(100vh - 48px);
    padding: 0;
    border: 0;
    border-radius: var(--r);
    background: #fff;
    box-shadow: var(--shadow-m);
    overflow: hidden;
}

.bmx-pdp__modal::backdrop {
    background: rgba(11, 34, 64, .55);
    backdrop-filter: blur(2px);
}

/* Panel probnika przewija sie wewnatrz okna, a nie razem ze strona. */
.bmx-pdp__modal .bmx-pdp__colors-b {
    max-height: calc(100vh - 48px - 58px);
    overflow-y: auto;
    padding: 18px clamp(14px, 2.4vw, 26px) clamp(18px, 2.4vw, 26px);
    scrollbar-width: thin;
    scrollbar-color: rgba(11, 34, 64, .26) var(--cream);
}

/* ---- Pasek z tytulem i krzyzykiem ---- */
.bmx-pdp__modal-bar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px clamp(14px, 2.4vw, 26px);
    border-bottom: 1px solid var(--line-soft);
    background: #fff;
}

.bmx-pdp__modal-t {
    font-family: var(--sans);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--navy);
}

.bmx-pdp__modal-x {
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    font-size: 1.35rem;
    line-height: 1;
    color: var(--navy);
    cursor: pointer;
    transition: color .25s var(--ease), border-color .25s var(--ease);
}

.bmx-pdp__modal-x:hover {
    color: var(--red);
    border-color: var(--red);
}

/* Przegladarka bez obslugi '<dialog>' - probnik zostaje na stronie
   tak jak dzialal do tej pory (patrz 'produkt.js'). */
.bmx-pdp__modal--bez-obslugi {
    position: static;
    width: auto;
    max-height: none;
    box-shadow: none;
}

.bmx-pdp__modal--bez-obslugi .bmx-pdp__modal-bar {
    display: none;
}

.bmx-pdp__modal--bez-obslugi .bmx-pdp__colors-b {
    max-height: none;
    overflow: visible;
    padding: 0;
}

/* ---------- Odstepy sekcji po przenosinach do okna ----------
   Gdy paleta lezala na stronie, ponizsze odstepy oddzielaly ja od naglowka
   i od nastepnej sekcji. Po schowaniu probnika w oknie modalnym pod
   przyciskiem nie ma juz NICZEGO - zostawal sam pusty odstep.

   Zdejmujemy trzy warstwy naraz:
     1. 'margin-bottom:24px' naglowka - domykal go przed paleta,
     2. dolna polowe 'padding-block' sekcji,
     3. 'margin-bottom' ostatniego elementu w naglowku (przycisk),
        bo margines dziecka i tak by sie tu przebil. */
.bmx-pdp .bmx-pdp__colors {
    padding-bottom: 0;
}

.bmx-pdp .bmx-pdp__colors-h {
    margin-bottom: 0;
}

.bmx-pdp .bmx-pdp__colors-open {
    margin-bottom: 0;
}

/* Okno modalne jest poza ukladem strony dopiero po otwarciu. Dopoki jest
   zamkniete, '<dialog>' bez atrybutu 'open' i tak nie zajmuje miejsca -
   ale zapisujemy to wprost, zeby zaden pozniejszy 'display' tego nie zmienil. */
.bmx-pdp .bmx-pdp__modal:not([open]) {
    display: none;
}

/* ============================================================
   ZAKLADKA "OPIS" - DWIE KOLUMNY I ZAOKRAGLONE MEDIA
   Zgloszenie klientki 2026-09-17: "czemu na desktopie opis nie ma
   ukladu dwukolumnowego, a zdjecia i filmy nie maja border radiusow
   ustawionych wedlug zasad designu dla tego projektu?"

   OBIE RZECZY BYLY LUKA, NIE DECYZJA:

   1. Uklad. Panel dostal wylacznie 'max-width:74ch' - jedna kolumna
      do czytania. Parowanie zdjecia z tekstem istnialo na stronie
      od 2026-09-16, ale bylo przypiete do jednej strony w 'strony.css'.
      Teraz komponent lezy w 'bm-newhome.css', a 'artykul.js' buduje
      pary rowniez tutaj.

   2. Zaokraglenia. Zasada z design.md ("Zdjecia - promien
      'min(--r, 8%)'") byla wdrozona selektorami celujacymi w obrazki
      Oxygena ('.ct-image', galerie) i w kafelki makiety. Opis produktu
      to tresc WooCommerce wklejona z edytora ('<p><img class="alignnone">'),
      ktorej zaden z tych selektorow nie obejmowal - stad ostre rogi
      na wszystkich zdjeciach w panelach.
   ============================================================ */

/* Zaokraglenia obejmuja WSZYSTKIE panele, nie tylko opis - "Wlasciwosci"
   i "Pobierz" tez maja wgrane grafiki. Wartosc dokladnie taka, jak zapisana
   w wytycznych; przy watkich probkach '8%' zbija promien proporcjonalnie. */
.bmx-pdp .woocommerce-Tabs-panel :is(img, iframe, video) {
    border-radius: min(var(--r), 8%);
}

/* Na desktopie panel opisu przestaje byc waska kolumna, bo ma pomiescic
   pare obok siebie. Szerokosc do czytania wraca na poziom POJEDYNCZEJ
   kolumny tekstu - pilnuje jej '.bmx-art__tekst' (62ch) w komponencie. */
@media (min-width: 901px) {
    .bmx-pdp .woocommerce-Tabs-panel--description {
        max-width: none;
    }

    /* Wstep przed pierwszym zdjeciem i wszystko, czego skrypt nie wzial
       do pary, zostaje waska kolumna - inaczej pojedyncze akapity
       rozjechalyby sie na cala szerokosc sekcji. */
    .bmx-pdp .woocommerce-Tabs-panel--description > :not(.bmx-art__para) {
        max-width: 74ch;
        margin-inline: auto;
    }
}

/* ============================================================
   WIERSZ "BAZA" - ETYKIETA BEZ POLA
   Zgloszenie klientki 2026-09-17: "przy produkcie w kafelku wyboru
   pojemnosci i koloru jest slowo »baza« i jest ono totalnie z dupy".

   Miala racje. Zmierzone: pole '#pa_baza' ma 'display:none', wiec
   z calego wiersza zostawal sam napis "BAZA" nad pusta przestrzenia.

   Baza farby NIE JEST wyborem uzytkownika - ustawia ja wtyczka probnika
   po wybraniu koloru (pyta serwer akcja 'getColorBase' i zapisuje wynik).
   Etykieta opisywala wiec decyzje, ktorej nikt tu nie podejmuje.

   ':has()' celuje w wiersz PO ZAWARTOSCI, a nie po numerze - tabela
   wariantow nie ma na wierszach zadnych klas ani identyfikatorow,
   a kolejnosc atrybutow moze sie zmienic. */
.bmx-pdp__cart table.variations tr:has(#pa_baza) {
    display: none;
}

/* Produkt bez wyboru koloru - patrz koniec 'produkt.js'. */
.bmx-pdp__colors.bmx-pdp--bez-koloru,
.bmx-pdp__cart.bmx-pdp--pusta {
    display: none;
}

/* ============================================================
   CENA I "DODAJ DO KOSZYKA" - DO LEWEJ, BLIZEJ WYBORU
   Zgloszenie klientki 2026-09-17: "uklad ceny i do koszyka do lewej
   bylby tu lepszy, odstep nad cena jest za duzy".

   SKAD SIE BRALO WCIECIE: 'form.variations_form' jest u nas siatka
   elastyczna (to ta sama regula, ktora ustawia ilosc i przycisk
   w jednym rzedzie). '.single_variation_wrap' nie mial zadanej
   szerokosci, wiec stawal OBOK tabeli wariantow i zawijal sie
   z jej odstepem - zmierzone: zaczynal sie 129 px od krawedzi karty
   przy jej szerokosci 574 px.

   Wymuszenie pelnego wiersza sadza go przy lewej krawedzi, tak jak
   etykiete "POJEMNOSC" nad nim. */
.bmx-pdp__cart .single_variation_wrap {
    /* 'flex-basis:100%' samo nie wystarczylo - zmierzone: element mial
       wlasciwa baze, a mimo to renderowal sie na 316 px przy formularzu
       524 px, bo szerokosc narzuca mu arkusz wtyczki. Stad 'width'
       z '!important' i wyzerowany margines poziomy. */
    flex: 1 0 100%;
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    min-width: 0;
}

/* Odstep nad cena szedl z marginesu tabeli wariantow i z wlasnego
   odstepu ceny naraz. Zostawiamy jeden. */
.bmx-pdp__cart .single_variation_wrap .woocommerce-variation-price {
    margin-top: 0;
    margin-bottom: 10px;
}

.bmx-pdp__cart form.variations_form table.variations {
    margin-bottom: 14px;
}


/* ============================================================
   POZOSTALE ZAKLADKI (nie "Opis") - obraz NAD tekstem (2026-09-28)
   Zgloszenie: w "Cechy i zastosowanie" obraz wklejony z 'alignleft'
   byl oplywany i reszta sekcji (ColorLock) spadala pod zdjecie na cala
   szerokosc - tresc rozbita na dwie czesci. Decyzja klientki: obraz na
   gorze, tekst normalnie pod nim, calosc wysrodkowana, max ok. 800 px.
   Dotyczy tez "Wlasciwosci" i "Kolory/parametry" (te same wklejki).
   "Opis" ma wlasny uklad par (artykul.js) i zostaje bez zmian.
   ============================================================ */
.bmx-pdp .woocommerce-Tabs-panel:not(.woocommerce-Tabs-panel--description) {
    max-width: 800px;
}

.bmx-pdp .woocommerce-Tabs-panel:not(.woocommerce-Tabs-panel--description) img:is(.alignleft, .alignright, .aligncenter, .alignnone) {
    float: none;
    display: block;
    margin: 8px auto 26px;
}

/* ---------- Zdjecia w zakladkach = szerokosc tekstu (2026-09-28) ----------
   Klientka o schemacie ColorLock na Aura N522/N524: "czemu obraz nie ma takiej
   samej szerokosci jak tekst?" i "taka choinka wyglada paskudnie, nie chcemy tak".
   Przyczyna: w edytorze wpisano obrazkowi width="500" (plik ma 1439 px), wiec
   stal na 500 px pod tekstem na 760 px. Skan 30 kart produktu: to jedyny taki
   przypadek; pozostale zdjecia maja juz pelna szerokosc, a wezsze w "Opisie" to
   zamierzony uklad dwukolumnowy (zdjecie obok tekstu) - tam blok = zdjecie,
   wiec ta regula nic nie zmienia.
   Zasada: zdjecie SAMO w akapicie (takze owiniete w link) wypelnia kolumne,
   niezaleznie od szerokosci wpisanej w edytorze. 'height:auto' - bo edytor
   wpisuje tez 'height' i obraz by sie znieksztalcil.
   UWAGA na przyszlosc: male logo/ikona wstawione samo w akapicie tez sie
   rozciagnie - takie grafiki wstawiac obok tekstu albo dac im klase. */
.bmx-pdp .woocommerce-Tabs-panel p > img:only-child,
.bmx-pdp .woocommerce-Tabs-panel p > a:only-child > img:only-child {
    width: 100%;
    height: auto;
}

/* ---------- "TEN KOLOR WYMAGA PODKLADU" - styl strony (2026-09-28) ----------
   Klientka: "stylowanie do poprawy, niespojne, nie zgadza sie ze strona".
   Nasze reguly wyzej ('.bmx-pdp__cart .primer-*', waga 0,2,1) przegrywaly
   z arkuszem wtyczki bmpolska-pf ('.primer-info .primer-box .primer-extra
   .primer-more a', 0,4,1): czarna ramka, czarny kanciasty "KUP TERAZ",
   czarny tytul. 'body:not(#bmx-f)' daje wage identyfikatora. */
body:not(#bmx-f) .bmx-pdp__cart .primer-info {
    margin-top: 14px;
    padding: 16px;
    border: 1px solid rgba(11, 34, 64, .1);
    border-left: 3px solid var(--red, #DB0632);
    border-radius: var(--r-s, 12px);
    background: var(--paper, #FCFAF6);
    color: var(--navy, #0B2240);
}
body:not(#bmx-f) .bmx-pdp__cart .primer-info .primer-text {
    margin: 0 0 12px;
    font-family: var(--sans, "Inter", sans-serif);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-align: left;
    text-transform: uppercase;
    color: var(--red, #DB0632);
}
body:not(#bmx-f) .bmx-pdp__cart .primer-info .primer-box {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
}
body:not(#bmx-f) .bmx-pdp__cart .primer-info .primer-img img {
    display: block;
    width: auto;
    height: auto;
    max-width: 56px;
    max-height: 66px;
}
body:not(#bmx-f) .bmx-pdp__cart .primer-info .primer-box .primer-extra { padding: 0; min-width: 0; }
body:not(#bmx-f) .bmx-pdp__cart .primer-info .primer-box .primer-extra .primer-title {
    min-height: 0;
    margin: 0 0 10px;
    font-family: var(--sans, "Inter", sans-serif);
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
    color: var(--navy, #0B2240);
}
/* "Kup teraz" - maly przycisk obrysowy z pedzlem (granat), jak pozostale obrysowe. */
body:not(#bmx-f) .bmx-pdp__cart .primer-info .primer-box .primer-extra .primer-more a {
    --bmx-farba: var(--navy, #0B2240);
    --bmx-tlo: transparent;
    --bmx-tekst: #fff;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 9px 18px;
    border: 1px solid rgba(11, 34, 64, .25);
    border-radius: 999px;
    background: transparent;
    font-family: var(--sans, "Inter", sans-serif);
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .13em;
    line-height: 1.2;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--navy, #0B2240);
    transition: color .3s var(--bmx-ease, ease) var(--bmx-zwloka-wyj, .45s), border-color .45s var(--bmx-ease, ease);
}
body:not(#bmx-f) .bmx-pdp__cart .primer-info .primer-box .primer-extra .primer-more a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: repeating-linear-gradient(112deg, rgba(255, 255, 255, .022) 0 2px, rgba(255, 255, 255, 0) 2px 11px), var(--bmx-farba);
    -webkit-mask-image: var(--bmx-brush, var(--brush));
            mask-image: var(--bmx-brush, var(--brush));
    -webkit-mask-size: 300% 100%;
            mask-size: 300% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: 100% center;
            mask-position: 100% center;
    transition: -webkit-mask-position 1.05s var(--bmx-walek, ease), mask-position 1.05s var(--bmx-walek, ease);
}
body:not(#bmx-f) .bmx-pdp__cart .primer-info .primer-box .primer-extra .primer-more a:is(:hover, :focus-visible) {
    border-color: var(--bmx-farba);
    color: var(--bmx-tekst);
    transition: color .3s var(--bmx-ease, ease) var(--bmx-zwloka-wej, .3s), border-color .45s var(--bmx-ease, ease);
}
body:not(#bmx-f) .bmx-pdp__cart .primer-info .primer-box .primer-extra .primer-more a:is(:hover, :focus-visible)::after {
    -webkit-mask-position: 0% center;
            mask-position: 0% center;
}
@media (prefers-reduced-motion: reduce) {
    body:not(#bmx-f) .bmx-pdp__cart .primer-info .primer-more a,
    body:not(#bmx-f) .bmx-pdp__cart .primer-info .primer-more a::after { transition: none; }
}

/* Kropka z podgladem wybranego koloru: przypieta od GORY do srodka pola
   "Wpisz kolor" (pole 27 px od gory etykiety, 47 px wysokosci -> srodek 51,
   kropka 24 px -> top 39). Byla przypieta od DOLU etykiety ('bottom:11px'),
   a ramka "wymaga podkladu" siedzi w tej samej etykiecie - kropka zjezdzala
   w rog ramki (zgloszenie klientki 2026-09-28, "zielona kropka"). */
body:not(#bmx-f) .bmx-pdp__cart .extra-options .color_choser .title-bigger::after {
    top: 39px;
    bottom: auto;
}

/* ---------- KARTA PRODUKTU NA TELEFONIE - formularz zakupu (2026-09-28) ----------
   Klientka: odstep pod "Pojemnosc" 10px; warianty farby jeden pod drugim;
   od wariantow do ilosci 10px; ilosc i "Dodaj do koszyka" w jednej linii
   (ciasniejsze okienko ilosci). Zmierzone przy 390 px przed zmiana:
   lista->warianty 55px (w tym 27px ukrytego linku "Wyczysc"), warianty->ilosc
   44px, warianty po 145px ("Biel (OC-65)" w dwoch wierszach), przycisk
   w osobnym wierszu (126 + 12 + 220 > 300). */
@media (max-width: 599px) {
    /* Pojemnosc -> warianty: 10 px. Ukryty link "Wyczysc" (WC: style="visibility:hidden")
       nie zajmuje miejsca; po wybraniu pojemnosci pokazuje sie normalnie. */
    /* Formularz jest flexem z przerwa 12px - to ona + margines tabeli daly 22px. */
    body:not(#bmx-f) .bmx-pdp__cart form.variations_form { row-gap: 10px; }
    body:not(#bmx-f) .bmx-pdp__cart table.variations { margin-bottom: 0; }
    body:not(#bmx-f) .bmx-pdp__cart table.variations a.reset_variations[style*="hidden"] { display: none; }
    body:not(#bmx-f) .bmx-pdp__cart .reset_variations_alert { margin: 0; }

    /* Warianty farby jeden pod drugim, na cala szerokosc. */
    body:not(#bmx-f) .bmx-pdp__cart .extra-options { margin-bottom: 0; }
    body:not(#bmx-f) .bmx-pdp__cart .extra-options .row.first { margin-bottom: 0; flex-direction: column; flex-wrap: nowrap; gap: 8px; }
    body:not(#bmx-f) .bmx-pdp__cart .extra-options .row.first .item { width: 100%; max-width: none; flex: none; }

    /* Warianty -> ilosc: 10 px; ilosc + przycisk w jednej linii. */
    body:not(#bmx-f) .bmx-pdp__cart .woocommerce-variation-add-to-cart,
    body:not(#bmx-f) .bmx-pdp__cart form.cart:not(.variations_form) { row-gap: 10px; column-gap: 10px; flex-wrap: wrap; align-items: stretch; }
    body:not(#bmx-f) .bmx-pdp__cart .woocommerce-variation-add-to-cart > .extra-options { flex: 1 0 100%; }
    body:not(#bmx-f) .bmx-pdp__cart .quantity { flex: none; }
    body:not(#bmx-f) .bmx-pdp__cart .quantity :is(button, .minus, .plus) { width: 32px; min-width: 32px; padding: 0; }
    body:not(#bmx-f) .bmx-pdp__cart .quantity input.qty { width: 32px; min-width: 0; padding: 0; }
    body:not(#bmx-f) .bmx-pdp__cart .single_add_to_cart_button {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        padding-inline: 14px;
        letter-spacing: .1em;
        white-space: nowrap;
    }
}

/* Nieaktywny "Dodaj do koszyka" (przed wyborem pojemnosci; WooCommerce daje
   klase .disabled) - BEZ pedzla i uniesienia. Mial granatowy pedzel pod
   szarym napisem (kontrast 1,7). Zasada: nieaktywne przyciski nie reaguja. */
body:not(#bmx-f) .bmx-pdp__cart .single_add_to_cart_button.disabled::after { content: none; }
body:not(#bmx-f) .bmx-pdp__cart .single_add_to_cart_button.disabled:is(:hover, :focus-visible) { transform: none; cursor: not-allowed; }

/* ---------- OPIS POD PRODUKTEM NA TELEFONIE (2026-09-28) ----------
   Klientka: "za duze paddingi po bokach, odstepy pod obrazem do tekstu za
   wielkie, odstep od paska tabs do tresci tez za duzy". Zmierzone przy 390 px:
   tekst 40 px od krawedzi (20 sekcji + 20 panelu), zakladki->tresc 46 px,
   obraz->tekst 20 px + 28 px miedzy parami. Teraz: 20 px od krawedzi (jak
   reszta strony), zakladki->tresc 20, obraz->tekst 12, miedzy parami 20. */
@media (max-width: 599px) {
    body:not(#bmx-f) .bmx-pdp .woocommerce-tabs .woocommerce-Tabs-panel {
        margin-top: 14px; /* + 6 px pod paskiem zakladek = 20 */
        padding: 0;
    }
    body:not(#bmx-f) .bmx-pdp .woocommerce-Tabs-panel .bmx-art__para {
        row-gap: 12px;
        margin-bottom: 20px;
    }
}

/* Korekta: odstep zakladki->tresc trzyma margines paska zakladek (26 px),
   z ktorym laczy sie margines panelu - ustawiamy go na 20 px. */
@media (max-width: 599px) {
    body:not(#bmx-f) .bmx-pdp .woocommerce-tabs ul.tabs { margin-bottom: 20px; }
    body:not(#bmx-f) .bmx-pdp .woocommerce-tabs .woocommerce-Tabs-panel { margin-top: 0; }
}

/* ---------- TELEFON: tekst tuz pod zdjeciem bez gornego marginesu (2026-09-28) ----------
   Klientka: "w opisie pod pierwszym obrazem nadal za duzy odstep". Na wiekszosci
   produktow pod zdjeciem w parze stoi NAGLOWEK (np. "ColorLock(R) Technology")
   z wlasnym margin-top 36-44 px -> 43-67 px zamiast 12. Zmierzone na 30 kartach. */
@media (max-width: 599px) {
    body:not(#bmx-f) .bmx-pdp .woocommerce-Tabs-panel .bmx-art__fig + :is(h1, h2, h3, h4, h5, p, ul, ol),
    body:not(#bmx-f) .bmx-pdp .woocommerce-Tabs-panel .bmx-art__fig + * > :first-child {
        margin-top: 0;
    }
}

/* ---------- TELEFON: zakladki opisu jako lista rozwijana (2026-09-28) ----------
   Klientka: "'Cechy i zastosowanie' jest urwane w polowie mimo przewijania
   w bok - moze na mobile zrobmy ladny dropdown?". Liste buduje produkt.js
   (".bmx-tabs-lista"), wybor klika odpowiednia zakladke WooCommerce, wiec
   cala logika zakladek zostaje ta sama. Wyglad = wzorzec pola (kremowe tlo,
   ramka .16, r12, 48 px) + szewron z listy "Pojemnosc" (pola.css).
   Na telefonie wybierak systemowy; desktop - zakladki bez zmian. */
.bmx-tabs-lista { display: none; }
@media (max-width: 599px) {
    body:not(#bmx-f) .bmx-pdp .woocommerce-tabs ul.tabs { display: none; }
    body:not(#bmx-f) .bmx-pdp .bmx-tabs-lista { display: block; margin: 0 0 20px; }
    body:not(#bmx-f) .bmx-pdp .bmx-tabs-lista select {
        -webkit-appearance: none;
                appearance: none;
        box-sizing: border-box;
        width: 100%;
        height: 50px;
        margin: 0;
        padding: 0 44px 0 18px;
        border: 1px solid rgba(11, 34, 64, .16);
        border-radius: 12px;
        background: #FCFAF6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%230B2240' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat calc(100% - 18px) 50% / 10px 7px;
        font-family: var(--sans, "Inter", sans-serif);
        font-size: .74rem;
        font-weight: 600;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--navy, #0B2240);
        cursor: pointer;
    }
    body:not(#bmx-f) .bmx-pdp .bmx-tabs-lista select:focus {
        outline: none;
        border-color: var(--navy, #0B2240);
        background-color: #fff;
    }
}

/* Korekty (2026-09-28):
   - pasek zakladek: arkusz Oxygena ma '.woocommerce-tabs .tabs { display:flex !important }',
     wiec schowanie na telefonie tez musi byc !important (lista go zastepuje),
   - zdjecie w parze: <img> liniowy w <p> zostawial 10 px "szpary" pod soba
     (miejsce na dolne wydluzenia liter) - 22 px zamiast 12 do tekstu. */
@media (max-width: 599px) {
    body:not(#bmx-f) .bmx-pdp .woocommerce-tabs ul.tabs { display: none !important; }
    body:not(#bmx-f) .bmx-pdp .woocommerce-Tabs-panel .bmx-art__fig img { display: block; }
}

/* Korekty 2 (2026-09-28, Scuff-X i podobne): w edytorze zdjecie bywa wstawione
   w naglowek/akapit (np. <h3><img></h3>, margin-bottom 10,5 px), a pary maja
   margin-top 28 px (laczyl sie z odstepem pod lista zakladek). Na telefonie:
   opakowanie zdjecia bez marginesow, pary bez gornego marginesu - odstep
   miedzy nimi trzyma margin-bottom 20 px. */
@media (max-width: 599px) {
    body:not(#bmx-f) .bmx-pdp .woocommerce-Tabs-panel .bmx-art__fig > * { margin: 0; }
    body:not(#bmx-f) .bmx-pdp .woocommerce-Tabs-panel .bmx-art__para { margin-top: 0; }
}

/* Korekta 3 (2026-09-28): "teraz pierwszy obraz jest za blisko tekstu" -
   zerowanie margin-top wszystkich par zabralo odstep NAD zdjeciem (tekst
   powyzej -> zdjecie). Przywracamy 28 px wszystkim parom poza pierwsza
   w panelu (pod lista zakladek odstep trzyma lista: 20 px). */
@media (max-width: 599px) {
    body:not(#bmx-f) .bmx-pdp .woocommerce-Tabs-panel .bmx-art__para:not(:first-of-type) { margin-top: 28px; }
}

/* Korekta 4: para ze zdjeciem bezposrednio PO tresci (akapit, lista, blok)
   dostaje 28 px nad soba - takze gdy jest pierwsza para w panelu (np. Aura N524:
   akapity -> para "Green Promise"). Para zaraz pod lista zakladek (przed nia
   tylko ukryty naglowek "Opis") zostaje bez gornego marginesu. */
@media (max-width: 599px) {
    body:not(#bmx-f) .bmx-pdp .woocommerce-Tabs-panel :is(p, ul, ol, div, h3, h4, h5, blockquote, table, figure) + .bmx-art__para { margin-top: 28px; }
}

/* ============================================================
   ZASADA (klientka, 2026-09-28): UKLAD KOLUMNOWY - WYSOKI TEKST, NIZSZY OBRAZ
   "Obraz ma byc wgrany od gory kolumny i jechac w miare scrollowania do jej
   dolu (wracac w gore przy scroll up analogicznie)". Realizacja: kolumna
   obrazu rozciagnieta na wysokosc wiersza, sam obraz 'position:sticky'
   95 px od gory ekranu (przyklejony naglowek 67 px + 28 px). Gdy obraz jest
   WYZSZY od tekstu, nic sie nie zmienia (tekst dalej wysrodkowany obok).
   Tu: pary "zdjecie + tekst" w opisach produktow (artykul.js) na desktopie.
   Kazdy nowy uklad kolumnowy obraz+tekst - ta sama zasada.
   Warunek: zaden przodek nie moze miec overflow hidden/auto/scroll
   ('clip' jest OK) - inaczej sticky nie dziala.
   ============================================================ */
@media (min-width: 600px) {
    body:not(#bmx-f) .bmx-pdp .woocommerce-Tabs-panel .bmx-art__para > .bmx-art__fig { align-self: stretch; }
    body:not(#bmx-f) .bmx-pdp .woocommerce-Tabs-panel .bmx-art__para > .bmx-art__fig > * {
        position: sticky;
        top: 95px;
    }
}


/* ============================================================
   LISTY W TRESCI KARTY PRODUKTU (2026-10-06)
   Zgloszenie Oli: "w wielu miejscach, jak edytuje, nie widac list
   punktowanych - na widoku pojedynczych farb lista wyglada jak zwykly
   tekst".
   Przyczyna: reset nowego wygladu w bm-newhome.css
       :where(.bmx) :where(ul) { list-style:none; margin:0; padding:0 }
   obejmuje cala karte produktu - takze tresc wpisywana w edytorze:
   opis, zakladki (YIKES Custom Product Tabs) i krotki opis. Lista bez
   punktow i bez wciecia wygladala jak kilka linijek tekstu.
   Sprawdzone 2026-10-06 na produkcji: wpisy, aktualnosci i strony Oxygena
   (regulamin, cookies, artshow, aplikacje) maja punkty - reset tam nie
   siega, bo nie sa w '.bmx'. Opisy kategorii sklepu list nie maja.
   Przywracamy zwykle listy TYLKO w kontenerach tresci z edytora. Elementy
   ukladu (pasek zakladek 'ul.tabs', "Dostawa pod drzwi", pasek u gory)
   leza poza nimi i zostaja bez zmian. Reset ma wage zero (:where), wiec
   wystarcza zwykly selektor klasy.
   ============================================================ */
.bmx-pdp :is(.woocommerce-Tabs-panel, .woocommerce-product-details__short-description) :is(ul, ol) {
    margin: 0 0 1.1em;
    padding-left: 1.4em;
}

.bmx-pdp :is(.woocommerce-Tabs-panel, .woocommerce-product-details__short-description) ul {
    list-style: disc outside;
}

.bmx-pdp :is(.woocommerce-Tabs-panel, .woocommerce-product-details__short-description) ol {
    list-style: decimal outside;
}

/* Lista w liscie: blizej rodzica, kolko zamiast kropki. */
.bmx-pdp :is(.woocommerce-Tabs-panel, .woocommerce-product-details__short-description) :is(ul, ol) :is(ul, ol) {
    margin: .35em 0 0;
}

.bmx-pdp :is(.woocommerce-Tabs-panel, .woocommerce-product-details__short-description) ul ul {
    list-style-type: circle;
}

.bmx-pdp :is(.woocommerce-Tabs-panel, .woocommerce-product-details__short-description) li {
    display: list-item;
    margin-bottom: .35em;
}

/* Punkt i numer w granacie marki - tekst zostaje w kolorze tresci. */
.bmx-pdp :is(.woocommerce-Tabs-panel, .woocommerce-product-details__short-description) li::marker {
    color: var(--navy, #0B2240);
}