, który
dziedziczył 16px z globalnej reguły akapitu (pomiar: PL/ES/PT ["14px","16px"],
EN ["14px"]). Ustawiamy jeden rozmiar niezależnie od języka — dla koszyka,
podsumowania zamówienia i widoku zamówienia w panelu klienta (klient:
"to przenosi się na inne ekrany, np. potwierdzenia zakupu").
------------------------------------------------------------------------- */
.woocommerce-cart-form dl.variation dt,
.woocommerce-cart-form dl.variation dd,
.woocommerce-cart-form dl.variation dd p,
.woocommerce-checkout-review-order-table dl.variation dt,
.woocommerce-checkout-review-order-table dl.variation dd,
.woocommerce-checkout-review-order-table dl.variation dd p,
.woocommerce-order-details dl.variation dt,
.woocommerce-order-details dl.variation dd,
.woocommerce-order-details dl.variation dd p,
.woocommerce-table--order-details dl.variation dt,
.woocommerce-table--order-details dl.variation dd,
.woocommerce-table--order-details dl.variation dd p,
.woocommerce-MyAccount-content .wc-item-meta,
.woocommerce-MyAccount-content .wc-item-meta li,
.woocommerce-MyAccount-content .wc-item-meta strong,
.woocommerce-MyAccount-content .wc-item-meta p,
.woocommerce-order .wc-item-meta,
.woocommerce-order .wc-item-meta li,
.woocommerce-order .wc-item-meta strong,
.woocommerce-order .wc-item-meta p {
font-size: 14px !important;
line-height: 1.5 !important;
}
/* -------------------------------------------------------------------------
R38/M7 — podgląd pojedynczego zamówienia: nagłówki "Billing address" /
"Shipping address" renderowały się w 36px, przez co "Shipping address"
łamał się do drugiej linii (pomiar @390px: wraps=true).
------------------------------------------------------------------------- */
.woocommerce-order .woocommerce-customer-details h2,
.woocommerce-order .woocommerce-column__title,
.woocommerce-MyAccount-content .woocommerce-customer-details h2,
.woocommerce-MyAccount-content .woocommerce-column__title,
.woocommerce-MyAccount-content .woocommerce-order-details__title {
font-size: 20px !important;
line-height: 1.3 !important;
margin-bottom: 12px !important;
}
.woocommerce-order .woocommerce-customer-details address,
.woocommerce-MyAccount-content .woocommerce-customer-details address {
font-size: 14px !important;
line-height: 1.6 !important;
}
/* -------------------------------------------------------------------------
R38/M6 — lista zamówień: gdy w kolumnie "Actions" są dwie akcje
(View + Proforma invoice), "View" ledwo mieściło się w wierszu. Klient
prosi o zerowy margines z prawej strony tej kolumny.
------------------------------------------------------------------------- */
.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions {
padding-right: 0 !important;
margin-right: 0 !important;
}
/* -------------------------------------------------------------------------
R38/M5 — lista zamówień na mobile: kolejne zamówienia zlewały się w jeden
ciąg (widać dopiero przy więcej niż jednym zamówieniu).
------------------------------------------------------------------------- */
@media (max-width: 767px) {
.woocommerce-MyAccount-content .woocommerce-orders-table__row {
display: block !important;
margin-bottom: 24px !important;
padding-bottom: 20px !important;
border-bottom: 1px solid #e0e0e0 !important;
}
.woocommerce-MyAccount-content .woocommerce-orders-table__row:last-child {
margin-bottom: 0 !important;
border-bottom: 0 !important;
}
.woocommerce-MyAccount-content .woocommerce-orders-table__cell {
padding-top: 4px !important;
padding-bottom: 4px !important;
}
}
/* -------------------------------------------------------------------------
R38/M8 — koszyk na mobile: zdjęcia produktów nadal były dosunięte do prawej.
Powód: reguła "photos to the right (PROD)" z R16 ma specyficzność (0,4,3),
więc biła fix R37/A7 zapisany jako (0,3,2) — mimo że stał później w pliku.
Powtarzamy ją w tym samym kształcie, w pliku ładowanym po round8.
------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
.woocommerce-cart-form table.shop_table_responsive tr.cart_item td.product-thumbnail {
text-align: center !important;
}
.woocommerce-cart-form table.shop_table_responsive tr.cart_item td.product-thumbnail img {
margin: 0 auto 10px !important;
float: none !important;
display: block !important;
}
}
/* -------------------------------------------------------------------------
R38/M9 — checkout, formularz "Add new address" (plugin WCMCA, okno
magnificPopup): po zaznaczeniu "I don't have VAT UE ID/VIES" dochodzi pole
Company NIP, układ się przelicza i lista krajów (select2) renderowała się
o szerokości 2px przy 252 pozycjach — praktycznie niewidoczna (na desktopie
kontener ma 202px i działa). Select2 zapisuje szerokość listy stylem inline
na podstawie kontenera zmierzonego, gdy popup był jeszcze ukryty;
min-width bije szerokość inline, więc naprawiamy to bez ruszania pluginu.
------------------------------------------------------------------------- */
@media (max-width: 767px) {
.select2-container--open .select2-dropdown,
.select2-container--open .select2-dropdown--below,
.select2-container--open .select2-dropdown--above {
min-width: 260px !important;
}
/* Pola formularza adresu: pełna szerokość zamiast dwóch kolumn po ~146px,
w których select kraju i tak się nie mieścił. */
.mfp-content .form-row-first,
.mfp-content .form-row-last {
width: 100% !important;
float: none !important;
margin-right: 0 !important;
}
.mfp-content .select2-container {
width: 100% !important;
}
}
/* -------------------------------------------------------------------------
R38/M4 — sekcja "Register on our platform" / "Cadastre-se em nossa
plataforma" na czarnym tle wychodziła poza ekran na PT. Pomiar @360px:
treść zajmowała 390px (od -15 do 375), przy 375px i szerszych mieści się —
dlatego w R37 uznaliśmy zgłoszenie za niereprodukowalne.
Powód: .chem-cta-section__inner jest flex-itemem z domyślnym min-width:auto,
a jego rozmiar minimalny wymuszała grafika laptop+telefon (max-width:400px).
------------------------------------------------------------------------- */
@media (max-width: 400px) {
.chem-cta-section .chem-row {
padding-left: 15px !important;
padding-right: 15px !important;
}
.chem-cta-section .chem-cta-section__inner {
min-width: 0 !important;
max-width: 100% !important;
width: 100% !important;
}
.chem-cta-section .chem-cta-section__image img {
max-width: 100% !important;
}
.chem-cta-section[style*="background-color: #000"] h2,
.chem-cta-section[style*="background-color: #000000"] h2 {
font-size: 30px !important;
line-height: 1.2 !important;
overflow-wrap: break-word;
}
.chem-cta-section .chem-cta-section__title,
.chem-cta-section .chem-cta-section__text {
max-width: 100% !important;
overflow-wrap: break-word;
}
}
/* -------------------------------------------------------------------------
R38/I2 — layouty podkategorii blogowych były "powiększone na całą
szerokość" względem PROD. Pomiar @1440px na /pl/blog/category/przepisy-prawne/:
PROD kolumna treści 880px, karta 440px, obrazek ~400x215, tytuł 20px
staging kolumna treści 1009px, karta 495px, obrazek 493x403, tytuł 22px
Zawężamy WYŁĄCZNIE archiwa kategorii blogowych (body.category); indeks
/blog/ jest już zgodny z PROD (969 vs 946px) i zostaje nietknięty.
------------------------------------------------------------------------- */
@media (min-width: 1025px) {
body.category .chem-blog-content {
max-width: 880px !important;
}
body.category .chem-blog-sidebar {
width: 288px !important;
flex: 0 0 288px !important;
}
}
body.category .chem-blog-grid {
gap: 40px !important;
}
/* R38f: proporcja kafla wg produkcji. Kontener obrazka ma tam 398x329 px
(`padding-top: calc((100% + 38px) * 0.8 - 20px)`), czyli prawie dokladnie
proporcje zrodel 746x610 – dlatego grafika jest widoczna w calosci.
Nasze 400/215 kadrowalo ja przez `object-fit: cover` (ucieta gora i dol),
co tester opisal jako inny wyglad kafli. Indeks bloga byl juz zgodny (1,22). */
body.category .chem-blog-card__image,
body.tag .chem-blog-card__image,
body.tax-post_tag .chem-blog-card__image {
aspect-ratio: 398 / 329;
}
body.category .chem-blog-card__image img {
height: 100% !important;
object-fit: cover !important;
}
body.category .chem-blog-card__title,
body.category .chem-blog-card__title a {
font-size: 20px !important;
line-height: 1.35 !important;
}
/* -------------------------------------------------------------------------
R38/I1 — układy używane we wpisach blogowych po naprawie formatowania
(odwzorowanie PROD): etykieta + przycisk w jednym wierszu oraz zdjęcie
oblewane tekstem z prawej strony wraz z podpisem pod spodem.
------------------------------------------------------------------------- */
.chem-inline-cta {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 20px;
flex-wrap: wrap;
margin: 20px 0;
}
.chem-inline-cta .chem-inline-cta__label {
margin: 0;
text-align: right;
}
.chem-figure-right {
float: right;
width: 258px;
max-width: 45%;
margin: 0 0 20px 30px;
text-align: center;
}
.chem-figure-right img {
width: 100%;
height: auto;
display: block;
}
.chem-figure-right figcaption {
margin-top: 10px;
font-size: 15px;
line-height: 1.4;
}
@media (max-width: 767px) {
.chem-figure-right {
float: none;
width: 258px;
max-width: 100%;
margin: 20px auto;
}
.chem-inline-cta {
justify-content: flex-start;
}
.chem-inline-cta .chem-inline-cta__label {
text-align: left;
}
}
/* -------------------------------------------------------------------------
R38/S1 — REGRESJA po R37f: w sticky menu zamiast heksagonu widać
pomarańczowy prostokąt (zgłoszenie klienta z PDF 29.07, porównanie
staging vs produkcja).
R37f rozciągnął na cały slot 73px, żeby heksagon był klikalny — ale ten
ma własne pomarańczowe tło (rgb(234,91,12)) z reguł menu. Wcześniej go
nie było widać, bo element był mały; po rozciągnięciu i podniesieniu na
z-index 2 przykrywa glif, który żyje na li::before POD spodem.
Produkcja ma w tym miejscu tło przezroczyste.
Zostawiamy click-target, zdejmujemy tło i wszystko, co mogłoby zasłonić glif.
------------------------------------------------------------------------- */
.chem-is-sticky ul.chem-menu > li.home-special-icon > a,
.chem-is-sticky ul.chem-menu > li.home-special-icon > a:hover,
.chem-is-sticky ul.chem-menu > li.home-special-icon > a:focus {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
border: 0 !important;
}
/* -------------------------------------------------------------------------
R38/S2 + S3 — checkout na mobile (uwagi klienta z PDF 29.07).
Pomiar @390px na /shop-checkout/:
"Phone prefix" form-row-30p -> 89 px → etykieta łamie się na dwie linie
"Phone number" form-row-70p -> 203 px
"Email address" form-row-last -> 145 px, left 204 → ląduje w PRAWEJ
kolumnie, przez co wygląda na wyrównane do prawej
S2: przesuwamy podział prefiks/numer tak, żeby etykieta prefiksu zmieściła
się w jednej linii (klient prosił o zwężenie pola numeru — to ta sama
zmiana, tylko liczona od strony prefiksu).
S3: adres e-mail na pełną szerokość, czyli od lewej krawędzi formularza.
------------------------------------------------------------------------- */
@media (max-width: 480px) {
.woocommerce-checkout .form-row-30p {
width: 40% !important;
}
.woocommerce-checkout .form-row-70p {
width: 58% !important;
}
/* Etykiety w tej parze nie mogą się łamać ani uciekać wielokropkiem. */
.woocommerce-checkout .form-row-30p > label,
.woocommerce-checkout .form-row-70p > label {
white-space: nowrap !important;
overflow: visible !important;
}
/* Adres e-mail: pełna szerokość, od lewej — nie w prawej kolumnie. */
.woocommerce-checkout .form-row#billing_email_field,
.woocommerce-checkout .form-row#shipping_email_field,
.woocommerce-checkout p.form-row[id$="_email_field"] {
width: 100% !important;
float: none !important;
clear: both !important;
margin-right: 0 !important;
}
}
/* -------------------------------------------------------------------------
R38/Q1 — QA: treść przycinana na wąskich ekranach (≤377 px), na KAŻDEJ stronie.
Nie dawało poziomego scrolla (body ma overflow-x:hidden), więc test patrzący
tylko na scrollWidth tego nie łapał — a przy 320 px przycinanych elementów
było 55.
Pomiar: .chem-footer-columns ma szerokość 348 px NIEZALEŻNIE od ekranu
(prawa krawędź zawsze 363). Łańcuch przyczyn:
.chem-footer-columns min-width:auto, flex-wrap:nowrap
└ .chem-footer-col--wide min-content 348 px
└ .spec-subscribe-form min-content 318 px ← formularz newslettera
├ input flex:1 1 0, min-width:0 (kurczy się)
└ button flex:0 0 auto, min-width:AUTO (NIE kurczy się, 98 px)
Przy 375 px mieści się (363 ≤ 375) — dlatego problem widać tylko niżej.
Pozwalamy łańcuchowi się zwężać; dodatkowo na bardzo wąskich ekranach
formularz łamie się na dwie linie, żeby przycisk nie był ściśnięty.
Formularz pochodzi z wtyczki chemnovatic-stay-informed — nie ruszamy jej,
działamy stylami motywu.
------------------------------------------------------------------------- */
.chem-footer-columns,
.chem-footer-col,
.chem-footer-newsletter,
.chem-footer-about,
.spec-subscribe-form {
min-width: 0 !important;
}
.chem-footer-columns {
flex-wrap: wrap !important;
}
.spec-subscribe-form input,
.spec-subscribe-form button {
min-width: 0 !important;
}
.chem-footer-about,
.chem-footer-col p,
.chem-footer-col h3 {
overflow-wrap: break-word;
}
@media (max-width: 400px) {
/* input nad przyciskiem — przy tej szerokości obok siebie się nie mieszczą */
.spec-subscribe-form {
flex-wrap: wrap !important;
}
.spec-subscribe-form input,
.spec-subscribe-form button {
flex: 1 1 100% !important;
width: 100% !important;
}
}
/* R38/Q1b — sidebar bloga miał sztywne `flex: 0 0 293px`, więc przy 320 px
sięgał do 323 px i przycinał widget kategorii wraz z listą. */
@media (max-width: 1024px) {
.chem-blog-sidebar {
flex: 1 1 auto !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
}
}
/* R38/Q1c — dopięcie Q1. Samo `min-width:0` nie wystarczyło, bo main.css
wymusza na kontenerze `max-width: var(--chem-site-width) !important` (1200 px),
więc kontener nie schodził do szerokości rodzica (290 px przy ekranie 320 px)
i zatrzymywał się na szerokości własnej treści = 348 px.
Twardy limit do 100% rodzica + formularz newslettera układany w dwóch
wierszach, żeby jego 318 px nie dyktowało szerokości całej stopki. */
.chem-footer-columns,
.chem-footer-col,
.chem-footer-newsletter,
.chem-footer-about {
max-width: 100% !important;
}
.chem-footer-newsletter .spec-subscribe-form,
.spec-subscribe-form {
display: flex !important;
flex-wrap: wrap !important;
max-width: 100% !important;
width: 100% !important;
}
@media (max-width: 420px) {
.spec-subscribe-form input[type="text"],
.spec-subscribe-form input[type="email"],
.spec-subscribe-form input {
flex: 1 1 100% !important;
width: 100% !important;
min-width: 0 !important;
}
.spec-subscribe-form button {
flex: 0 0 auto !important;
margin-top: 8px !important;
}
}
/* -------------------------------------------------------------------------
R38/Q2 — QA: miniatury galerii produktu uciekały poza ekran na mobile.
Pomiar @390px na /pl/product/purenic-99-czysta-nikotyna/: pozycje listy
`ol.flex-control-nav` mają lewą krawędź 383, 475, 567 — czyli od piątej
miniatury w ogóle poza ekranem, a `body` ma overflow-x:hidden, więc nie
dało się do nich dojechać. Lista ma `max-width: calc(25% - 6px)` na
pozycjach (układ 4 w rzędzie), ale nie zawijała wierszy.
------------------------------------------------------------------------- */
.woocommerce-product-gallery ol.flex-control-nav,
.woocommerce-product-gallery ol.flex-control-thumbs {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
padding-left: 0 !important;
margin-left: 0 !important;
max-width: 100% !important;
}
.woocommerce-product-gallery ol.flex-control-nav > li,
.woocommerce-product-gallery ol.flex-control-thumbs > li {
flex: 0 0 calc(25% - 6px) !important;
max-width: calc(25% - 6px) !important;
min-width: 0 !important;
margin: 0 !important;
}
.woocommerce-product-gallery ol.flex-control-nav > li img {
width: 100% !important;
height: auto !important;
}
/* -------------------------------------------------------------------------
R38/Q3 — QA: siatka bloga zostawała WIELOKOLUMNOWA na telefonach, wbrew
produkcji. Pomiar @360px (1 karta w wierszu = wzorzec PROD):
PROD /pl/blog/ 1 karta w wierszu, szerokość 280 px
PROD /pl/blog/category/… 1 karta w wierszu, szerokość 340 px
stag. /pl/blog/ kilka w wierszu
stag. /pl/blog/category/… 2 w wierszu, szerokość 130 px (!)
Przy 320 px tytuły kart wychodziły poza ekran (prawa krawędź 332).
Zwijamy do jednej kolumny i pozwalamy długim słowom się łamać.
Dotyczy indeksu i archiwów — na obu PROD ma jedną kolumnę.
------------------------------------------------------------------------- */
@media (max-width: 767px) {
.chem-blog-grid {
grid-template-columns: 1fr !important;
}
body.category .chem-blog-grid {
gap: 24px !important;
}
}
.chem-blog-card__title,
.chem-blog-card__title a,
.chem-blog-card__overlay-title {
overflow-wrap: break-word;
word-break: break-word;
}
/* ============================================================================
R38 / fix-08 – BAZA WIEDZY: typografia 1:1 z produkcją (30.07.2026)
============================================================================
Treść kart (kolejność, opisy, linki) siedzi w ACF i poprawia ją skrypt
`tools/r38-batch/fix08-kb-cards.php`. Tu zostaje sam wygląd, zmierzony na
produkcji (1440 px):
lead pod H1 16 px / 900 / #000 / wyśrodkowany (u nas był 24 px
pomarańczowy do lewej – nasz
dziedziczył styl motywu,
a produkcja nadpisuje go inline'em na body typography)
opis karty 14 px / 25,2 px / #000 / wyśrodkowany – już się zgadzał
link w opisie bez podkreślenia, tekst czarny (prod: text-decoration:none)
"Read more" 14 px / 700 / podkreślony, 5 px pod opisem
Slug w klasie body (inc/setup.php) zamiast czterech `page-id-*`.
---------------------------------------------------------------------------- */
body.chem-page--knowledge-base .chem-text-section__content h3,
body.chem-page--knowledge-base .chem-html-section__content h3,
body.chem-page--baza-wiedzy .chem-text-section__content h3,
body.chem-page--baza-wiedzy .chem-html-section__content h3,
body.chem-page--base-de-conocimientos .chem-text-section__content h3,
body.chem-page--base-de-conocimientos .chem-html-section__content h3,
body.chem-page--base-de-conhecimento .chem-text-section__content h3,
body.chem-page--base-de-conhecimento .chem-html-section__content h3 {
font-size: 16px !important;
font-weight: 900 !important;
line-height: 1.3 !important;
color: #000000 !important;
text-align: center !important;
margin: 24px 0 !important;
}
/* Opis karty: produkcja obejmuje cały tekst linkiem, ale bez podkreślenia
i w kolorze tekstu – pogrubiony fragment zostaje pogrubiony. */
.chem-card--image-top .chem-card__content a {
color: #000000 !important;
/* !important, bo motyw podkreśla linki w treści regułą z !important –
produkcja ma tu inline `text-decoration: none!important`. */
text-decoration: none !important;
}
.chem-card--image-top .chem-card__content a:hover {
color: #ea5b0c !important;
}
/* Odstęp opis → "Read more" ma być stałe 5 px (produkcja robi to marginesem
-20px na osobnym bloku tekstowym). Bez tego karty z jednoliniowym opisem
miały 30 px, a z dwuliniowym 5 px. */
.chem-card--image-top .chem-card__content,
.chem-card--image-top .chem-card__content p {
margin-bottom: 0 !important;
}
/* ============================================================================
R38 / fix-10 – CSR (i inne strony z treścią z konwersji)
============================================================================
Pomiar 30.07 pokazał, że hipoteza "galerie Avady zgubiły grid" jest fałszywa
(produkcja nie renderuje tu galerii, a kolumny 1/4, 1/5 i 3/4 zgadzają się
co do jednej – patrz FIXES/fix-10). Zostały trzy realne różnice:
---------------------------------------------------------------------------- */
/* 1. Wyrównanie akapitów. Treść z konwersji ma inline `text-align: justify`
(14 akapitów na CSR), ale main.css:2478 wymusza `text-align:left
!important` na akapitach w html_section – inline przegrywał i całe
sekcje "Szlachetna Paczka"/"Turniej charytatywny" były do lewej, gdy
produkcja justuje. Oddajemy głos inline'owi (selektor atrybutowy). */
.chem-html-section__content > .chem-section > .chem-row > .chem-col > p[style*="text-align: justify"],
.chem-html-section__content > div > p[style*="text-align: justify"] {
text-align: justify !important;
}
.chem-html-section__content > .chem-section > .chem-row > .chem-col > p[style*="text-align: center"],
.chem-html-section__content > div > p[style*="text-align: center"] {
text-align: center !important;
}
.chem-html-section__content > .chem-section > .chem-row > .chem-col > p[style*="text-align: right"],
.chem-html-section__content > div > p[style*="text-align: right"] {
text-align: right !important;
}
/* 2. Pogrubiony PIERWSZY akapit w kolumnie. main.css:2588 pogrubia
`.chem-html-section__content > .chem-section > .chem-row > .chem-col >
p:first-child` (reguła nagłówka sekcji ze strony Sustainable Development),
ale trafia globalnie – na CSR pogrubiała 4 akapity, których produkcja nie
pogrubia (R15 łatał to samo dla stron polityk, po jednym page-id).
W sekcjach BEZ koloru tła ta reguła i tak nie działa (rozmiar i kolor
nadpisuje main.css:2472), więc jedynym jej efektem jest właśnie zbłąkane
pogrubienie – zerujemy je dla dokładnie tego zakresu. Pogrubienia
wpisane w treść (, ) zostają nietknięte. */
.chem-html-section__content > .chem-section:not([style*="background-color"]) > .chem-row > .chem-col > p:first-child {
font-weight: 400 !important;
}
/* 3. Separator sekcji. R35 ustawił 20 px wysokości + 25 px marginesów (razem
70 px), a produkcja ma linię wysokości 1 px BEZ marginesów – kontener
sekcji ma na niej 11 px (zmierzone live 30.07). Osiem separatorów na CSR
dawało ~470 px nadmiarowej wysokości strony i "dziury" po galeriach.
Gradient (delikatny cień, nie kreska) zostaje jak w R35. */
body.chem-page--corporate-social-responsibility hr.chem-separator,
body.chem-page--odpowiedzialnosc-spoleczna-przedsiebiorstwa hr.chem-separator,
body.chem-page--responsabilidad-social-corporativa hr.chem-separator,
body.chem-page--responsabilidade-social-corporativa hr.chem-separator {
height: 1px !important;
margin: 5px 0 !important;
background: radial-gradient(ellipse at 50% -50%, #e2e2e2 0px, rgba(255, 255, 255, 0) 20px) !important;
}
/* Karty bazy wiedzy nie rozciągają bloku treści. `.chem-card__content` ma
`flex: 1 1 0%` (żeby w innych zestawach kart przyciski wyrównywały się do
dołu), więc przy jednoliniowym opisie pusta reszta boksu odsuwała "Read more"
o 25 px. Produkcja NIE wyrównuje – w pierwszym wierszu "Read more" karty
z regulacjami stoi wyżej niż w dwóch pozostałych. */
.chem-card--image-top .chem-card__content {
flex: 0 0 auto !important;
}
/* 4. Nagłówki sekcji na CSR. Produkcja renderuje je jako elementy „title"
Avady w rozmiarze pierwszego stopnia: 42 px / 50,4 px, margines 31,5 px
górny i 4,2 px dolny. Konwersja zamieniła je na zwykłe `
`, które
w motywie mają globalne 36 px / 43,2 px (`--chem-h2-size`, ta sama wartość
co na produkcji – więc zmienna jest OK, wyjątkiem jest ta strona).
Pięć nagłówków × ~47 px to główny powód, dla którego treść CSR była
niższa od produkcyjnej. Zakres: tylko strony CSR (4 języki).
Tylko od 801 px – produkcja poniżej progu 800 px schodzi z tymi
nagłówkami do 22 px / 26,4 px (responsywna typografia Avady), a motyw ma
już taką regułę dla `h2` w `@media (max-width: 800px)`. Bez tego warunku
42 px na telefonie robiło z nagłówka blok wysoki na 200 px. */
@media (min-width: 801px) {
body.chem-page--corporate-social-responsibility .chem-html-section__content h2,
body.chem-page--odpowiedzialnosc-spoleczna-przedsiebiorstwa .chem-html-section__content h2,
body.chem-page--responsabilidad-social-corporativa .chem-html-section__content h2,
body.chem-page--responsabilidade-social-corporativa .chem-html-section__content h2 {
font-size: 42px !important;
line-height: 50.4px !important;
margin-top: 31.5px !important;
margin-bottom: 4.2px !important;
}
}
/* 5. Punkt załamania siatki kart bazy wiedzy. Pomiar produkcji (ES, kolejno
420/520/600/640/700/768/800 px): 3 kolumny od ~641 px w górę, 1 kolumna
przy 640 px i niżej – czyli mały breakpoint Avady. `base.css` zwija naszą
siatkę do 2 kolumn w przedziale 501–800 px i do 1 kolumny poniżej, więc na
tablecie (768 px) mieliśmy 3 wiersze po 353 px zamiast 2 wierszy po 245 px,
a strona rosła o ~1700 px. Zakres: tylko strony bazy wiedzy (4 języki),
żeby nie ruszać pozostałych zestawów kart. */
@media (min-width: 641px) and (max-width: 800px) {
body.chem-page--knowledge-base .chem-cards-grid--3col,
body.chem-page--baza-wiedzy .chem-cards-grid--3col,
body.chem-page--base-de-conocimientos .chem-cards-grid--3col,
body.chem-page--base-de-conhecimento .chem-cards-grid--3col {
grid-template-columns: repeat(3, 1fr) !important;
}
}
@media (max-width: 640px) {
body.chem-page--knowledge-base .chem-cards-grid--3col,
body.chem-page--baza-wiedzy .chem-cards-grid--3col,
body.chem-page--base-de-conocimientos .chem-cards-grid--3col,
body.chem-page--base-de-conhecimento .chem-cards-grid--3col {
grid-template-columns: 1fr !important;
}
}
/* ============================================================================
R38f – BLOG: kategorie i wpisy wracają do wyśrodkowanego kontenera 1200 px
============================================================================
Zgłoszenie testera: „layouty podkategorii blogowych powiększone na całą
szerokość" i „na devce cała strona jest do lewej".
Przyczyna: reguła z R35 („PROD blog spans the FULL viewport") była zmierzona
na INDEKSIE bloga i zdjęła limit szerokości ze WSZYSTKICH stron z tym
układem. Pomiar produkcji 30.07 przy 1440 px:
/pl/blog/ (indeks) #main bez limitu, karty od x=40, sidebar 331 px
-> tu produkcja faktycznie idzie na całą szerokość
/pl/blog/category/… fusion-row 1200 px wyśrodkowany: treść 840 px
od x=120, sidebar 288 px od x=1032
wpis blogowy identycznie: treść 840, sidebar 288, wiersz 1200
U nas kategorie i wpisy miały wrapper 1440 px (treść od x=40, sidebar 331),
stąd wrażenie strony „dosuniętej do lewej" i powiększonych kart.
Zakres: TYLKO kategorie, tagi i pojedyncze wpisy – indeks bloga zostaje
pełnoekranowy, bo taki jest na produkcji.
---------------------------------------------------------------------------- */
@media (min-width: 1200px) {
body.category .chem-blog-wrapper,
body.tag .chem-blog-wrapper,
body.tax-post_tag .chem-blog-wrapper,
body.single-post .chem-blog-wrapper {
max-width: 1200px !important;
margin: 0 auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
gap: 72px !important; /* 840 + 72 + 288 = 1200, jak na produkcji */
}
body.category .chem-blog-wrapper > .chem-blog-content,
body.tag .chem-blog-wrapper > .chem-blog-content,
body.tax-post_tag .chem-blog-wrapper > .chem-blog-content,
body.single-post .chem-blog-wrapper > .chem-blog-content {
margin-left: 0 !important;
}
body.category .chem-blog-sidebar,
body.tag .chem-blog-sidebar,
body.tax-post_tag .chem-blog-sidebar,
body.single-post .chem-blog-sidebar {
flex: 0 0 288px !important;
width: 288px !important;
}
}
/* Pasek tytułu wpisu: produkcja daje 150 px wysokości i 20 px odstępu do
treści – ta sama reguła co na stronach z paskiem, tylko sąsiadem jest tu
`.chem-blog-wrapper`, a nie `.page-content`. */
.chem-title-bar--post + .chem-blog-wrapper {
padding-top: 20px !important;
}
/* Data publikacji: produkcja pisze ją 13 px w kolorze marki (u nas była szara
13 px). Pozycja bez zmian – nad okruszkami, jak dotychczas. */
.chem-single-post__meta,
.chem-single-post__date {
color: #ea5b0c !important;
}
/* Nagłówek archiwum kategorii/tagu: produkcja wyśrodkowuje (H1 zawiera
akapit z `text-align: center`), u nas był do lewej. */
body.category .chem-blog-page-title,
body.tag .chem-blog-page-title,
body.tax-post_tag .chem-blog-page-title {
text-align: center !important;
}
/* Kolejność w kolumnie treści wpisu: produkcja ma NAJPIERW okruszki,
pod nimi wiersz z datą (13 px, kolor marki). `main.css` przestawiał datę
nad okruszki (`order: -1`) – cofamy to. */
.chem-single-post .chem-single-post__meta {
order: 0 !important;
}
/* ----------------------------------------------------------------------------
R38h – zgloszenie klienta 31.07: "mamy suwak na liscie kategorii i tagow".
Sidebar bloga byl przyklejony (`position: sticky`) z ograniczeniem
`max-height: calc(100vh - 120px)` i `overflow-y: auto` (fusion-compat.css),
wiec przy 1440 px mial 780 px wysokosci przy 1539 px tresci - czyli WLASNY
pasek przewijania na liscie kategorii i tagow. Produkcja ma tam sidebar
statyczny, pelnej wysokosci (1653 px), bez przewijania - zmierzone 31.07.
Reguly dla sidebarow sklepu zostawiamy nietkniete.
---------------------------------------------------------------------------- */
@media (min-width: 992px) {
.chem-blog-sidebar {
position: static !important;
max-height: none !important;
overflow-y: visible !important;
}
}
/* ----------------------------------------------------------------------------
R38i – uwagi klienta z 31.07 do panelu klienta (punkt m).
---------------------------------------------------------------------------- */
/* 1. Lista zamowien: gdy w kolumnie "Actions" sa DWA odnosniki (View + Proforma
invoice), "View" ledwo miescilo sie w wierszu. Margines z prawej byl juz
wyzerowany w R38/M6 - brakowalo odstepu MIEDZY odnosnikami i mozliwosci
zlamania do nowego wiersza. Pomiar 31.07 @390 px: odstep 14 px, oba linki
w jednej linii. Dajemy 16 px odstepu i pozwalamy przeniesc drugi odnosnik
do nowego wiersza, gdy sie nie miesci. */
.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions {
display: inline-flex !important;
flex-wrap: wrap !important;
gap: 6px 16px !important;
align-items: baseline !important;
}
.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions a {
margin: 0 !important;
white-space: nowrap;
}
/* 2. Podglad pojedynczego zamowienia: naglowek "Shipping address" przylegal
bez odstepu do tabelki z danymi do faktury (zmierzone: 0 px). */
.woocommerce-MyAccount-content .woocommerce-column--shipping-address,
.woocommerce-MyAccount-content .woocommerce-column--2 {
margin-top: 24px !important;
}
.woocommerce-MyAccount-content .woocommerce-columns--addresses .woocommerce-column__title,
.woocommerce-MyAccount-content .woocommerce-column--shipping-address h2,
.woocommerce-MyAccount-content .woocommerce-column--shipping-address h3 {
margin-top: 0 !important;
}
/* ----------------------------------------------------------------------------
R38k – zgloszenie klienta 03.08: "widok zamowien na mobile jest teraz bez
szarego tla i za bardzo do lewej – total chociazby nie jest do prawej pod
katem wartosci zamowienia".
Przyczyna: w widoku mobilnym WooCommerce (woocommerce-smallscreen.css)
komorki dostaja `display: block`, ale zostaja w ukladzie tabelarycznym, wiec
ich szerokosc wynika z tresci, a nie z szerokosci tabeli. Pomiar 03.08 na
stagingu: tabela 307 px @414 px, 322 px @430 px, 485 px @600 px – a komorki
ZAWSZE 264 px. Przy 390 px roznicy nie widac (tabela 284 px), dlatego wyszlo
dopiero na szerszym telefonie. Efekt: wiersze wizualnie dosuniete do lewej,
wartosci wyrownane do prawej krawedzi 264-pikselowej komorki zamiast do
krawedzi ramki, a "Total:" sklejony z kwota, bo w 264 px nie ma juz luzu.
Rozwiazanie: wylaczamy uklad tabelaryczny na mobile (tabela i tbody jako
bloki), dzieki czemu komorki rozciagaja sie na pelna szerokosc – zmierzone
po poprawce: 305 px przy tabeli 307 px, wartosci przy prawej krawedzi.
Szare tlo: to alternujaca reguła WooCommerce `tr:nth-child(2n) td`
(rgba(0,0,0,.025)) – dziala poprawnie takze u nas (sprawdzone na
sklonowanym drugim wierszu). Konto testowe ma na stagingu JEDNO zamowienie,
czyli wiersz nieparzysty – bialy. Na produkcji pierwsze zamowienie tez jest
biale, szare sa dopiero co drugie.
---------------------------------------------------------------------------- */
@media (max-width: 768px) {
.woocommerce-MyAccount-content .woocommerce-orders-table,
.woocommerce-MyAccount-content .woocommerce-orders-table tbody {
display: block !important;
width: 100% !important;
}
.woocommerce-MyAccount-content .woocommerce-orders-table__row {
width: 100% !important;
}
.woocommerce-MyAccount-content .woocommerce-orders-table__cell {
width: 100% !important;
box-sizing: border-box !important;
}
/* kolumna akcji byla inline-flex (R38i, odstep miedzy "View" a "Proforma
invoice") – jako element liniowy nie przyjelaby pelnej szerokosci */
.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions {
display: flex !important;
}
}
/* ----------------------------------------------------------------------------
R38l — przycisk „Send inquiry" tylko dla zalogowanych
----------------------------------------------------------------------------
Parytet z produkcją. Tam w Custom CSS (wiersz 895) stoi ta sama reguła, ale
z ręcznie wypisanymi 79 slugami przycisków
(`body:not(.logged-in) .maxbutton-send-inquiry-absolutes, … -xylitol`).
Sprawdzone 05.08: u nas przycisk wychodził gościowi na front
(`class="maxbutton-109 maxbutton maxbutton-send-inquiry-cellulose"`).
Zapis po fragmencie klasy obejmuje też przyciski dodane w przyszłości.
---------------------------------------------------------------------------- */
/* R40 (uwaga testera 10.08): wildcard ukrywal WSZYSTKIE przyciski
maxbutton-send-inquiry-*, a produkcja ukrywa tylko 79 wyliczonych slugow -
np. przycisk na produkcie "Produkcja mieszanek do saszetek nikotynowych"
NIE jest na liscie i produkcja pokazuje go takze gosciom. Lista 1:1
z Custom CSS produkcji (tools/r38-batch/prod-custom-css). */
body:not(.logged-in) .maxbutton-send-inquiry-absolutes,
body:not(.logged-in) .maxbutton-send-inquiry-accidity-regulators-and-stabilizers,
body:not(.logged-in) .maxbutton-send-inquiry-acesulfam-k,
body:not(.logged-in) .maxbutton-send-inquiry-amino-acids,
body:not(.logged-in) .maxbutton-send-inquiry-anti-limescale-agents,
body:not(.logged-in) .maxbutton-send-inquiry-anti-wrinkle-brightening-and-regenareting-agents,
body:not(.logged-in) .maxbutton-send-inquiry-antioxidants-and-synergists,
body:not(.logged-in) .maxbutton-send-inquiry-aspartame,
body:not(.logged-in) .maxbutton-send-inquiry-butters,
body:not(.logged-in) .maxbutton-send-inquiry-caffeine,
body:not(.logged-in) .maxbutton-send-inquiry-cellulose,
body:not(.logged-in) .maxbutton-send-inquiry-corrosion-inhibitors,
body:not(.logged-in) .maxbutton-send-inquiry-d-panthenol,
body:not(.logged-in) .maxbutton-send-inquiry-e-liquids-production,
body:not(.logged-in) .maxbutton-send-inquiry-enrichment-additives,
body:not(.logged-in) .maxbutton-send-inquiry-erythritol,
body:not(.logged-in) .maxbutton-send-inquiry-essential-oils,
body:not(.logged-in) .maxbutton-send-inquiry-exfoliating-additives,
body:not(.logged-in) .maxbutton-send-inquiry-extra-excise-tax-ready-solutions,
body:not(.logged-in) .maxbutton-send-inquiry-fatty-acids,
body:not(.logged-in) .maxbutton-send-inquiry-fatty-alcohols,
body:not(.logged-in) .maxbutton-send-inquiry-flavourings,
body:not(.logged-in) .maxbutton-send-inquiry-floral-waters,
body:not(.logged-in) .maxbutton-send-inquiry-fructose,
body:not(.logged-in) .maxbutton-send-inquiry-glucose,
body:not(.logged-in) .maxbutton-send-inquiry-glycerine-99-5,
body:not(.logged-in) .maxbutton-send-inquiry-graphic-design-branding,
body:not(.logged-in) .maxbutton-send-inquiry-herb-flower-and-fruit-macerates,
body:not(.logged-in) .maxbutton-send-inquiry-hydrophobizing-agents,
body:not(.logged-in) .maxbutton-send-inquiry-inulin,
body:not(.logged-in) .maxbutton-send-inquiry-isolates,
body:not(.logged-in) .maxbutton-send-inquiry-labelling-filling-in-bottles,
body:not(.logged-in) .maxbutton-send-inquiry-laboratory-tests-analysis,
body:not(.logged-in) .maxbutton-send-inquiry-lauric-acid,
body:not(.logged-in) .maxbutton-send-inquiry-malic-acid,
body:not(.logged-in) .maxbutton-send-inquiry-mix-go-gusto,
body:not(.logged-in) .maxbutton-send-inquiry-molasses,
body:not(.logged-in) .maxbutton-send-inquiry-monoethylene-glycol,
body:not(.logged-in) .maxbutton-send-inquiry-monopropylene-glycol,
body:not(.logged-in) .maxbutton-send-inquiry-natural-emulsifiers,
body:not(.logged-in) .maxbutton-send-inquiry-natural-nicbase,
body:not(.logged-in) .maxbutton-send-inquiry-niacin,
body:not(.logged-in) .maxbutton-send-inquiry-nicsalt-p-base,
body:not(.logged-in) .maxbutton-send-inquiry-oem-pods-and-cartridges,
body:not(.logged-in) .maxbutton-send-inquiry-oils,
body:not(.logged-in) .maxbutton-send-inquiry-oleic-acid,
body:not(.logged-in) .maxbutton-send-inquiry-orthophosphoric-acid,
body:not(.logged-in) .maxbutton-send-inquiry-peg,
body:not(.logged-in) .maxbutton-send-inquiry-pg-vg-mix,
body:not(.logged-in) .maxbutton-send-inquiry-pharmaceutical-propylene-glycol,
body:not(.logged-in) .maxbutton-send-inquiry-phosphates,
body:not(.logged-in) .maxbutton-send-inquiry-phosphonates,
body:not(.logged-in) .maxbutton-send-inquiry-plant-extracts,
body:not(.logged-in) .maxbutton-send-inquiry-pmta-submission-services,
body:not(.logged-in) .maxbutton-send-inquiry-potassium-carbonate,
body:not(.logged-in) .maxbutton-send-inquiry-potassium-iodide,
body:not(.logged-in) .maxbutton-send-inquiry-potassium-sorbate,
body:not(.logged-in) .maxbutton-send-inquiry-preservatives,
body:not(.logged-in) .maxbutton-send-inquiry-recipe-development,
body:not(.logged-in) .maxbutton-send-inquiry-registration-services,
body:not(.logged-in) .maxbutton-send-inquiry-regulatory-consultations,
body:not(.logged-in) .maxbutton-send-inquiry-regulatory-services,
body:not(.logged-in) .maxbutton-send-inquiry-soap-bases,
body:not(.logged-in) .maxbutton-send-inquiry-soaps-and-surfactants,
body:not(.logged-in) .maxbutton-send-inquiry-sodium-bicarbonate,
body:not(.logged-in) .maxbutton-send-inquiry-sodium-hydroxide,
body:not(.logged-in) .maxbutton-send-inquiry-stearin,
body:not(.logged-in) .maxbutton-send-inquiry-sucralose,
body:not(.logged-in) .maxbutton-send-inquiry-sweeteners-and-sweetening-compounds,
body:not(.logged-in) .maxbutton-send-inquiry-synthetic-nicotine,
body:not(.logged-in) .maxbutton-send-inquiry-thickeners-stabilizers-gelling-agents-and-carriers,
body:not(.logged-in) .maxbutton-send-inquiry-triacetin,
body:not(.logged-in) .maxbutton-send-inquiry-vegetable-glycerin-99-5,
body:not(.logged-in) .maxbutton-send-inquiry-vegetable-glycerine,
body:not(.logged-in) .maxbutton-send-inquiry-vitamin-premixes,
body:not(.logged-in) .maxbutton-send-inquiry-vitamine-e-acetate,
body:not(.logged-in) .maxbutton-send-inquiry-vitamins,
body:not(.logged-in) .maxbutton-send-inquiry-waxes,
body:not(.logged-in) .maxbutton-send-inquiry-xylitol {
display: none !important;
}