/* ============================================================================
   R43 — uwagi klienta z 21.08.2026 (4 punkty).

   Konwencja jak przy R39/R40: osobny arkusz rundy, ladowany OSTATNI, zeby cala
   runde dalo sie cofnac jednym plikiem. Kazda regula ma zmierzona przyczyne
   (pomiary: tools/r43-batch/diagnoza.mjs i diagnoza-u3.mjs, staging vs produkcja).
   ============================================================================ */


/* ----------------------------------------------------------------------------
   U1 — strona glowna, sekcja opinii: stala wysokosc + wyrownanie opinii nr 4.

   Uwaga klienta: „zablokowanie wysokosci sekcji z opiniami, bo trzylinijkowe
   opinie przesuwaja w dol to co pod nimi. I na en oraz na pt jedna opinia nie
   jest wyrownana, opinia nr 4."

   ZMIERZONA PRZYCZYNA (1440 px, wszystkie jezyki):
     jezyk  slajd 1  2    3    4    5     min-height arkusza
     en     143      143  143  118  169   150
     pl     143      143  143  143  143   150
     es     143      143  143  143  169   150
     pt     143      143  143  118  169   150

   Kazdy slajd ma wlasna wysokosc, bo `display:none` wypycha nieaktywne z
   ukladu — kontener ma wysokosc AKTYWNEGO slajdu. Stara proteza z R15c
   (`min-height: 150/175/300 px`) tylko podnosi podloge: slajd 169 px i tak ja
   przebija, wiec przy kazdym obrocie sekcje ponizej skacza o 19 px.
   To samo tlumaczy druga polowe uwagi: EN i PT to DOKLADNIE te dwa jezyki,
   w ktorych opinia nr 4 ma 3 linie zamiast 4 (118 px zamiast 143) — jej szara
   ramka jest nizsza od pozostalych, wiec podpis autora siedzi wyzej i opinia
   „nie jest wyrownana". PL i ES maja tam 4 linie i klient tego nie zglasza.

   ROZWIAZANIE bez magicznych liczb: slajdy ida na siebie w jednej komorce
   gridu, wiec wysokosc toru = wysokosc NAJWYZSZEGO slajdu — automatycznie
   per jezyk i per szerokosc ekranu, bez pilnowania wartosci w px przy kazdej
   nowej opinii. Nieaktywne chowamy `visibility`, nie `display`, bo tylko wtedy
   nadal wyznaczaja wysokosc (i nadal nie sa czytane przez czytniki ekranu).
   Szara ramka rozciaga sie na cala wolna wysokosc, a tekst w niej jest
   wysrodkowany w pionie — dzieki temu ramka i podpis kazdej opinii sa
   dokladnie w tym samym miejscu.
   ---------------------------------------------------------------------------- */
.chem-testimonials {
    display: grid !important;
    grid-template-columns: 1fr !important;
    /* wysokosc bierze sie z najwyzszego slajdu, nie z podlogi w px */
    min-height: 0 !important;
}
/* UWAGA na szczegolowosc: `main.css:3702` chowa nieaktywne slajdy regula
   `.chem-testimonials blockquote.chem-testimonial:not(.active)` (0,3,1) i to
   `!important`, a `main.css:3706` pokazuje pierwszy przez selektor (0,4,1).
   Sam `.chem-testimonials > .chem-testimonial` (0,2,0) przegrywa z obiema —
   pierwsze podejscie R43 wlaczylo grid, ale slajdy dalej mialy `display:none`
   i tor nadal skakal. Dlatego prefiks sekcji: (0,4,1) i pozniejsze ladowanie. */
.chem-testimonials-section .chem-testimonials > blockquote.chem-testimonial {
    grid-area: 1 / 1 !important;
    /* `display:flex` bije `display:none !important` z main.css/base.css */
    display: flex !important;
    flex-direction: column !important;
    visibility: hidden !important;
}
.chem-testimonials-section .chem-testimonials > blockquote.chem-testimonial.active {
    visibility: visible !important;
}
/* zanim JS oznaczy pierwszy slajd — pokaz pierwszy (zapas po main.css) */
.chem-testimonials-section .chem-testimonials:not(:has(.chem-testimonial.active))
> blockquote.chem-testimonial:first-of-type {
    visibility: visible !important;
}
/* szara ramka wypelnia tor; tekst wysrodkowany w pionie.
   `display:grid` (nie flex) — pojedynczy anonimowy element jest wtedy
   rozciagany na pelna szerokosc, wiec `text-align:center` dziala jak dotad. */
.chem-testimonials-section .chem-testimonials > blockquote.chem-testimonial > p {
    flex: 1 1 auto !important;
    display: grid !important;
    align-content: center !important;
    margin: 0 !important;
}
.chem-testimonials-section .chem-testimonials > blockquote.chem-testimonial > cite {
    flex: 0 0 auto !important;
}


/* ----------------------------------------------------------------------------
   U2 — strona glowna, sekcja „I want to develop my business…": margines od
   prawej przy przyklejonym heksagonie.

   Uwaga klienta: „w przypadku obrazka heksagonu, ktory jest sticky potrzebny
   jest margines od prawej jakies 5-8px, bo obrazek dotyka bloku tekstu
   przewijanego obok niego."

   ZMIERZONA PRZYCZYNA (1440 px): prawa krawedz obrazka 710 px, lewa krawedz
   kolumny tekstu 710 px — odstep DOKLADNIE 0 px, w kazdym z czterech jezykow
   (`.chem-twi__image` ma padding-right i margin-right rowne 0).

   Dajemy 8 px (gorna granica z uwagi klienta) po stronie stykajacej sie
   z tekstem — a wiec z prawej przy obrazku po lewej i z lewej przy obrazku
   po prawej, zeby regula nie zepsula wariantu z odwrocona kolejnoscia kolumn.
   Tylko od 801 px w gore: nizej kolumny sie skladaja i sticky jest wylaczone.
   ---------------------------------------------------------------------------- */
@media (min-width: 801px) {
    body.home .chem-text-with-image.chem-twi--image-left > .chem-row > .chem-twi__image {
        padding-right: 8px !important;
    }
    body.home .chem-text-with-image.chem-twi--image-right > .chem-row > .chem-twi__image {
        padding-left: 8px !important;
    }
}


/* ----------------------------------------------------------------------------
   U3 — strony produktowe: szary przycisk „Add to cart" przy niedostepnym
   wariancie (zamiast jasnofioletowego).

   Uwaga klienta: „prosimy o Szary przycisk Dodaj do koszyka, gdy produkt jest
   niedostepny. Obecnie jest jasny fioletowy. (…) Widoczne np. na produkcie
   NicSalt — opcja Pyruvate."

   ZMIERZONA PRZYCZYNA (zalogowane konto B2B, NicSalts → Pyruvate): przycisk
   dostaje klasy `disabled wc-variation-selection-needed`, a wtedy wchodzi
   WLASNA regula WooCommerce `.woocommerce button.button.alt.disabled`
   z tlem `#7f54b3` (firmowy fiolet Woo) i `opacity: .5` — stad „jasny fiolet".
   Nasza pomaranczowa regula ma nizsza szczegolowosc i przegrywa. Pozostale
   szesc wariantow tego produktu mierzy sie na `rgb(234, 91, 12)`, wiec zmiana
   dotyka wylacznie stanu niedostepnego.

   Kolor: `#b3b3b3` (neutralna szarosc) z bialym napisem i szara obwodka —
   pomaranczowa obwodka z round8 tez musi zejsc, inaczej szary przycisk nadal
   ma pomaranczowa ramke. `opacity: 1`, bo przezroczystosc Woo robila z tego
   plama nie do odczytania; sygnalem „nieaktywny" jest szarosc i kursor.
   ---------------------------------------------------------------------------- */
.woocommerce a.button.disabled:not(.chem-cart-update),
.woocommerce button.button.disabled:not(.chem-cart-update):not([name="update_cart"]),
.woocommerce input.button.disabled:not([name="update_cart"]),
.woocommerce a.button.alt.disabled:not(.chem-cart-update),
.woocommerce button.button.alt.disabled:not(.chem-cart-update):not([name="update_cart"]),
.woocommerce input.button.alt.disabled:not([name="update_cart"]),
.woocommerce button.button:disabled:not(.chem-cart-update):not([name="update_cart"]),
.woocommerce button.button.alt:disabled:not(.chem-cart-update):not([name="update_cart"]),
button.single_add_to_cart_button.disabled,
button.single_add_to_cart_button:disabled,
.single-product .summary .single_add_to_cart_button.disabled,
.single-product .summary .single_add_to_cart_button:disabled {
    background: #b3b3b3 !important;
    background-color: #b3b3b3 !important;
    color: #ffffff !important;
    box-shadow: inset 0 0 0 2px #b3b3b3 !important;
    border-color: #b3b3b3 !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
    text-decoration: none !important;
}
/* najechanie na nieaktywny przycisk niczego nie zmienia — bez tego wygralaby
   regula hover z round8-fixes.css (biale tlo, pomaranczowa ramka, podkreslenie) */
.woocommerce a.button.disabled:not(.chem-cart-update):hover,
.woocommerce button.button.disabled:not(.chem-cart-update):not([name="update_cart"]):hover,
.woocommerce input.button.disabled:not([name="update_cart"]):hover,
.woocommerce a.button.alt.disabled:not(.chem-cart-update):hover,
.woocommerce button.button.alt.disabled:not(.chem-cart-update):not([name="update_cart"]):hover,
.woocommerce input.button.alt.disabled:not([name="update_cart"]):hover,
.woocommerce button.button:disabled:not(.chem-cart-update):not([name="update_cart"]):hover,
.woocommerce button.button.alt:disabled:not(.chem-cart-update):not([name="update_cart"]):hover,
button.single_add_to_cart_button.disabled:hover,
button.single_add_to_cart_button:disabled:hover,
.single-product .summary .single_add_to_cart_button.disabled:hover,
.single-product .summary .single_add_to_cart_button:disabled:hover,
.single-product .summary .single_add_to_cart_button.disabled:focus,
.single-product .summary .single_add_to_cart_button:disabled:focus {
    background: #b3b3b3 !important;
    background-color: #b3b3b3 !important;
    color: #ffffff !important;
    box-shadow: inset 0 0 0 2px #b3b3b3 !important;
    border-color: #b3b3b3 !important;
    text-decoration: none !important;
}
/* Przycisk „Zaktualizuj koszyk" jest z tej reguly WYLACZONY (`:not()` wyzej).
   Ma wlasny, uzgodniony wcześniej wyglad stanu nieaktywnego: jasnoszary
   `#e2e2e2` z ciemnym napisem (fusion-compat.css:2240) i `#b5b5b5` na mobile
   (round8-fixes.css:2259). Pierwsza wersja R43 zabrala mu ten wyglad przy
   okazji — a klient pytal wylacznie o przycisk na karcie produktu. */


/* ----------------------------------------------------------------------------
   U4 — stopka: uklad kolumn 50/25/25 zamiast 33/33/33.

   Uwaga klienta: „zmiana ukladu na 50/25/25, obecnie jest 33/33/33. Czyli
   pierwsza kolumna polowa, i dwie pozostale z linkami na jedna czwarta."

   ZMIERZONA PRZYCZYNA: szablon `footer.php` od poczatku wypisuje klasy
   `--wide` i `--narrow`, a `base.css:1161` daje im 50% i 25%. Kasuja to dwie
   pozniejsze reguly:
     * `main.css:71`  `.chem-footer-col { flex: 1 !important }` — ta sama
       szczegolowosc co `.chem-footer-col--wide` (jedna klasa), ale stoi
       NIZEJ w pliku, wiec wygrywa takze dla kolumny szerokiej,
     * `r38-fixes.css:390` `.chem-footer-col { max-width: 100% !important }`
       (poprawka przycinania przy 320 px) — zdejmuje limit 48%.
   Pomiar potwierdza: 380 / 380 / 380 px przy kontenerze 1200 px (32/32/32%),
   podczas gdy produkcja ma 624 / 312 / 312 px przy 1248 px (50/25/25%).

   Liczymy z uwzglednieniem rynienki 30 px (dwie przerwy = 60 px), zeby
   proporcja 50/25/25 dotyczyla realnie dostepnej szerokosci:
     50% * (W - 60) = 0,5W - 30  →  calc(50% - 30px)
     25% * (W - 60) = 0,25W - 15 →  calc(25% - 15px)
   Ponizej 801 px kolumny sie skladaja (base.css:1449) i te reguly nie dzialaja.
   ---------------------------------------------------------------------------- */
@media (min-width: 801px) {
    .chem-footer-columns > .chem-footer-col--wide {
        flex: 0 0 calc(50% - 30px) !important;
        max-width: calc(50% - 30px) !important;
    }
    .chem-footer-columns > .chem-footer-col--narrow {
        flex: 0 0 calc(25% - 15px) !important;
        max-width: calc(25% - 15px) !important;
    }
}