/* =========================================================================
Karta produktu — nakładka design systemu (zamow-kontener.pl)
Faza 1: przefarbowanie na tokeny --zk-* + style bloków zk-pr__.
Ładowany tylko na is_product(), PO custom.css i flatpickr-override
(stąd świadome !important tam, gdzie stare reguły też je mają).
Źródło prawdy: wytyczne-design-system.md.
========================================================================= */
/* --- 1. Stepper zamówienia --------------------------------------------- */
/* Reguły przeniesione do wspólnego assets/sciezka.css (moduł zk_sc_) —
jeden stepper dla WSZYSTKICH kroków ścieżki, nie tylko produktu. */
/* --- 2. Nagłówek i sekcja rodzaju — kompresja pionowa -------------------- */
body.single-product .woocommerce-product-details__short-description h1 {
color: var(--zk-ink, #23291c);
font-weight: 800;
line-height: 1.2;
font-size: clamp(24px, 2.4vw, 30px) !important;
margin: 0 0 14px;
}
/* Etykieta „Rodzaj wybranego kontenera" (snippet: label font-size:0 +
::after 24px) → mikro-etykieta eyebrow jak na landingach.
UWAGA: klasa .woocommerce jest na , więc łączymy, nie zagnieżdżamy. */
body.single-product form.cart .variations label[for="pa_rodzaj-odpadow"]::after {
content: "Rodzaj odpadu" !important;
font-size: 12px !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: .07em !important;
color: var(--zk-muted, #5b6152) !important;
}
/* Wiersz wybranego rodzaju: bez sztywnych 80px, wszystko w jednej linii
(kafel rodzaju + link „Zmień rodzaj odpadu" obok siebie). */
body.single-product .attribute_pa_rodzaj-odpadow .yith_wccl_value {
height: auto !important;
margin: 2px 0 !important;
}
body.single-product .select_box_image.attribute_pa_rodzaj-odpadow {
display: flex !important;
align-items: center !important;
flex-wrap: wrap;
gap: 2px 16px;
margin: 0 !important;
}
body.single-product .select_box_image.attribute_pa_rodzaj-odpadow .select_option_image {
flex: 0 0 auto;
width: auto !important;
max-width: 100%;
margin: 0 !important;
}
body.single-product .select_box_image.attribute_pa_rodzaj-odpadow img {
max-height: 32px;
width: auto;
}
body.single-product .select_box_image.attribute_pa_rodzaj-odpadow .zk-pr__change-type {
flex: 0 0 auto;
margin: 0;
}
/* --- 3. Kafle rodzaju odpadu — akcent bez ruszania mechaniki ------------ */
/* Tylko stany na LIŚCIE wyboru (nieaktywne kafle). Zaznaczony element
w stanie zwiniętym celowo BEZ ramki/outline — to nie jest kontrolka
klikalna (decyzja W. 16.07). */
body.single-product .select_option_image:not(.selected) {
border-color: var(--zk-line, #e6e8e1) !important;
border-radius: var(--zk-r-control, 8px) !important;
transition: background .15s ease;
}
body.single-product .select_option_image:not(.selected):hover {
background: var(--zk-bg-soft, #f2f4ec) !important;
}
/* --- 4. Dropdown rozmiaru (wapo-custom-select) -------------------------- */
body.single-product #wapo-custom-select {
border: 1px solid var(--zk-line, #e6e8e1) !important;
border-radius: var(--zk-r-control, 8px) !important;
color: var(--zk-ink, #23291c);
}
body.single-product #wapo-custom-select:focus-visible {
outline: 2px solid var(--zk-green-dark, #487214);
outline-offset: 2px;
}
body.single-product #wapo-custom-dropdown {
border: 1px solid var(--zk-line, #e6e8e1) !important;
border-radius: var(--zk-r-control, 8px) !important;
box-shadow: var(--zk-shadow, 0 18px 40px -12px rgba(20, 32, 4, .26));
}
body.single-product .wapo-dropdown-item:hover {
background: var(--zk-bg-soft, #f2f4ec) !important;
}
body.single-product .wapo-dropdown-item.selected {
color: var(--zk-green-dark, #487214) !important;
font-weight: 700;
}
/* --- 5. Pole daty + flatpickr ------------------------------------------- */
body.single-product .yith_wapo_date.datepicker {
border: 1px solid var(--zk-line, #e6e8e1) !important;
border-radius: var(--zk-r-control, 8px) !important;
color: var(--zk-ink, #23291c) !important;
}
body.single-product .yith_wapo_date.datepicker:focus {
outline: 2px solid var(--zk-green-dark, #487214) !important;
outline-offset: 2px;
border-color: var(--zk-green-dark, #487214) !important;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
background: var(--zk-green-dark, #487214) !important;
border-color: var(--zk-green-dark, #487214) !important;
color: #fff !important;
}
.flatpickr-day.today:not(.selected) {
border-color: var(--zk-green, #84BF2A) !important;
}
.flatpickr-day:hover:not(.selected):not(.flatpickr-disabled) {
background: var(--zk-bg-soft, #f2f4ec) !important;
border-color: var(--zk-bg-soft, #f2f4ec) !important;
}
/* --- 5b. Kalendarz „kk" — TYLKO podmiana kolorów (zero zmian layoutu!)
Obca zieleń #7CB342/#5a8f2a → paleta systemowa. Pasek miesięcy z białym
tekstem wymaga ciemnej zieleni (AA); jasna #84BF2A zostaje akcentem
(obwódka „dziś", obwódka „pokaż więcej"). ------------------------------- */
body.single-product .flatpickr-months,
body.single-product .kk-modal-header {
background: var(--zk-green-dark, #487214) !important;
}
body.single-product .flatpickr-day.today {
box-shadow: inset 0 0 0 2px var(--zk-green, #84BF2A) !important;
}
body.single-product .flatpickr-day.selected,
body.single-product .flatpickr-day.startRange,
body.single-product .flatpickr-day.endRange {
background: var(--zk-green-dark, #487214) !important;
}
body.single-product .kk-fs-days,
body.single-product .kk-extra-selected {
background: var(--zk-green-dark, #487214) !important;
color: #fff !important;
}
body.single-product .kk-fs-arrow,
body.single-product .kk-badge-free,
body.single-product .kk-fs-free {
color: var(--zk-green-dark, #487214) !important;
}
body.single-product .kk-btn-confirm {
background: var(--zk-green-dark, #487214) !important;
box-shadow: 0 2px 8px rgba(72, 114, 20, .35) !important;
}
body.single-product .kk-btn-confirm:hover {
background: #3a5d10 !important;
}
body.single-product .kk-show-more {
border-color: var(--zk-green, #84BF2A) !important;
color: var(--zk-green-dark, #487214) !important;
}
/* --- 6. Trust box pod zdjęciem ------------------------------------------ */
/* Zielona powierzchnia (--zk-bg-green) + ikony w ciemnej zieleni #4E761C.
Ikony to SVG w ![]()
— kolorujemy przez mask-image na kontenerze
(progressive enhancement: bez wsparcia :has() zostają oryginalne ![]()
). */
/* Neutralna biała karta (decyzja W. 16.07: zielona powierzchnia odwracała
uwagę od formularza). Ikony zostają ciemnozielone. */
body.single-product .product-info-box {
background: #fff;
border: 1px solid var(--zk-line, #e6e8e1);
border-radius: var(--zk-r-card, 12px);
}
body.single-product .product-info-row:not(:last-child) {
border-bottom-color: var(--zk-line, #e6e8e1);
}
body.single-product .product-info-text {
color: var(--zk-ink, #23291c);
}
/* Ikony (SVG w ![]()
) — przefarbowanie filtrem na ciemną zieleń #4E761C
(decyzja W. 16.07: jasna #84BF2A za jasna na tym tle). brightness(0)
spłaszcza do czerni, reszta łańcucha trafia dokładnie w cel
(wyliczone solverem: wynik rgb(78,118,28) = #4E761C). */
body.single-product .product-info-icon img {
filter: brightness(0) saturate(100%) invert(51%) sepia(47%) saturate(700%) hue-rotate(44deg) brightness(69%) contrast(86%);
}
/* --- 7. Zdjęcie produktu ------------------------------------------------- */
body.single-product .woocommerce-product-gallery__image,
body.single-product .woocommerce-product-gallery__image img {
border-radius: var(--zk-r-card, 12px);
}
body.single-product .woocommerce-product-gallery {
filter: drop-shadow(0 12px 30px rgba(20, 32, 4, .10));
}
/* --- 8. Opis pomocniczy + linki ------------------------------------------ */
body.single-product .wapo-addon-description {
color: var(--zk-muted, #5b6152);
}
body.single-product .wapo-addon-description a {
color: var(--zk-green-dark, #487214);
text-decoration: underline;
}
body.single-product .wapo-addon-description a:hover {
color: var(--zk-ink, #23291c);
}
/* --- 9. Tabela sumy ------------------------------------------------------- */
body.single-product .wapo-total-order th {
color: var(--zk-ink, #23291c);
}
body.single-product #wapo-total-order-price .woocommerce-Price-amount.amount {
color: var(--zk-ink, #23291c) !important;
font-weight: 800;
}
/* Puste „Razem:" przed dokonaniem wyboru — chowamy cały wiersz, dopóki YITH
nie wpisze kwoty (bez :has stary widok zostaje — nieszkodliwe). */
body.single-product #wapo-total-price-table tr.wapo-total-order:has(#wapo-total-order-price:empty) {
display: none;
}
body.single-product #wapo-total-price-table {
margin: 4px 0 0;
}
/* --- 9b. Zwarty rytm pionowy (odzysk ~150px nad CTA) ----------------------- */
body.single-product .woocommerce-product-details__short-description h1 {
margin-bottom: 12px;
}
body.single-product form.cart .variations label[for="pa_rodzaj-odpadow"] {
margin-top: 6px !important;
}
body.single-product table.variations {
margin-bottom: 0;
}
body.single-product table.variations th.label,
body.single-product table.variations td.value {
padding-bottom: 4px;
}
body.single-product .yith-wapo-block .addon-header h3.wapo-addon-title {
margin: 14px 0 8px !important;
}
body.single-product .yith-wapo-container {
margin-bottom: 0;
}
body.single-product .woocommerce-variation-add-to-cart > p {
font-size: 13px;
line-height: 1.5;
color: var(--zk-muted, #5b6152);
margin: 10px 0;
}
/* --- 10. CTA „Złóż zamówienie" — brandowy primary ------------------------- */
body.single-product form.cart button.single_add_to_cart_button.button.alt {
background: var(--zk-red, #c0392b) !important;
color: #fff !important;
border: 0 !important;
border-radius: var(--zk-r-pill, 999px) !important;
font-weight: 800 !important;
letter-spacing: .01em;
box-shadow: 0 12px 26px -12px rgba(192, 57, 43, .55);
transition: background .15s ease, transform .05s ease;
}
body.single-product form.cart button.single_add_to_cart_button.button.alt:hover {
background: var(--zk-red-dark, #a93226) !important;
color: #fff !important;
}
body.single-product form.cart button.single_add_to_cart_button.button.alt:active {
transform: translateY(1px);
}
body.single-product form.cart button.single_add_to_cart_button.button.alt:focus-visible {
outline: 2px solid var(--zk-green-dark, #487214);
outline-offset: 3px;
}
body.single-product form.cart button.single_add_to_cart_button.button.alt.disabled,
body.single-product form.cart button.single_add_to_cart_button.button.alt:disabled {
background: var(--zk-bg-soft, #f2f4ec) !important;
border: 1px solid var(--zk-line, #e6e8e1) !important;
color: var(--zk-muted, #5b6152) !important;
opacity: 1 !important; /* Woo/YITH przyciemnia opacity — nadpisujemy, kontrast AA trzyma para bg-soft/muted */
box-shadow: none;
cursor: not-allowed;
}
/* --- 10a. Kafle rozmiarów ---------------------------------------------------- */
.zk-pr__sizes {
margin: 6px 0 18px;
}
.zk-pr__sizes[hidden] {
display: none;
}
.zk-pr__sizes-title {
margin: 0 0 10px;
font-size: 1.375rem;
font-weight: 700;
color: var(--zk-ink, #23291c);
}
.zk-pr__sizes-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.zk-pr__size {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
padding: 12px 14px;
background: #fff;
border: 1px solid var(--zk-line, #e6e8e1);
border-radius: var(--zk-r-control, 8px);
cursor: pointer;
text-align: left;
font: inherit;
color: var(--zk-ink, #23291c);
transition: background .15s ease, border-color .15s ease;
}
.zk-pr__size:hover {
background: var(--zk-bg-soft, #f2f4ec);
}
.zk-pr__size:focus-visible {
outline: 2px solid var(--zk-green-dark, #487214);
outline-offset: 2px;
}
/* Twarde kolory tekstu dla wszystkich stanów — motyw/custom.css kolorują
button:focus/:active na jasno (stąd wyblakły tekst po kliknięciu). */
.zk-pr__size,
.zk-pr__size:hover,
.zk-pr__size:focus,
.zk-pr__size:active,
.zk-pr__size.is-selected,
.zk-pr__size.is-selected:focus,
.zk-pr__size.is-selected:hover {
color: var(--zk-ink, #23291c) !important;
background-image: none !important;
box-shadow: none !important;
text-shadow: none !important;
}
.zk-pr__size .zk-pr__size-label {
color: var(--zk-ink, #23291c) !important;
}
.zk-pr__size .zk-pr__size-price {
color: var(--zk-green-dark, #487214) !important;
}
.zk-pr__size.is-selected {
background: var(--zk-bg-green, #e8f2d6) !important;
border: 2px solid var(--zk-green, #84BF2A);
padding: 11px 13px; /* kompensacja grubszej ramki — kafel nie skacze */
}
.zk-pr__size:not(.is-selected) {
background: #fff;
}
.zk-pr__size:not(.is-selected):hover {
background: var(--zk-bg-soft, #f2f4ec);
}
.zk-pr__size.is-disabled {
opacity: .45;
cursor: not-allowed;
}
.zk-pr__size-label {
font-weight: 700;
font-size: 17px;
line-height: 1.2;
}
.zk-pr__size-price {
font-size: 14px;
font-weight: 600;
color: var(--zk-green-dark, #487214);
}
.zk-pr__size.is-disabled .zk-pr__size-price {
color: var(--zk-muted, #5b6152);
font-weight: 400;
}
/* Badge „na styku" górnej krawędzi kafla — nie zabiera miejsca w środku
i nie wystaje poza siatkę. */
.zk-pr__size {
overflow: visible;
}
.zk-pr__size-badge {
position: absolute;
top: -9px;
left: 10px;
max-width: calc(100% - 20px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 2px 8px;
background: var(--zk-bg-green, #e8f2d6);
border: 1px solid #d7e6bf;
border-radius: var(--zk-r-control, 8px);
color: var(--zk-green-dark, #487214);
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .04em;
line-height: 1.3;
}
.zk-pr__size.is-selected .zk-pr__size-badge {
background: #fff;
}
@media (max-width: 700px) {
.zk-pr__sizes-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.zk-pr__size-label {
font-size: 16px;
}
}
/* Lista „Wyrzucaj / Nie wyrzucaj" — ukryta na karcie produktu (decyzja W.
16.07): rodzaj jest już wybrany na poprzednim kroku, lista tylko wydłużała
formularz. Zostaje na /wybor-odpadu/, gdzie faktycznie pomaga w decyzji. */
body.single-product #odpady-info-box {
display: none !important;
}
/* Link „Zmień rodzaj odpadu" (wstawia JS) — dyskretna droga powrotu. */
.zk-pr__change-type {
display: inline-block;
margin: 6px 0 2px;
font-size: 13.5px;
font-weight: 600;
color: var(--zk-green-dark, #487214) !important;
text-decoration: underline;
}
.zk-pr__change-type:hover {
color: var(--zk-ink, #23291c) !important;
}
/* Gdy kafle działają (body.zk-pr--tiles dodaje JS): chowamy stary wybór
rozmiaru — wiersze tabeli z selectem #pa_rozmiar i customowy dropdown.
Bez wsparcia :has() (stare przeglądarki) oba UI zostają widoczne —
redundancja zamiast dziury. */
body.zk-pr--tiles table.variations tr:has(#pa_rozmiar),
body.zk-pr--tiles table.variations tr:has(label[for="pa_rozmiar"]) {
display: none;
}
body.zk-pr--tiles #wapo-dropdown-wrap {
display: none !important;
}
/* --- 10b. Podsumowanie wyboru nad CTA --------------------------------------- */
.zk-pr__summary {
background: var(--zk-bg-green-soft, #eef5e2);
border: 1px solid #dcecc4;
border-radius: var(--zk-r-control, 8px);
padding: 12px 16px;
margin: 14px 0 4px;
font-size: 15px;
line-height: 1.5;
color: var(--zk-ink, #23291c);
}
.zk-pr__summary[hidden] {
display: none;
}
.zk-pr__summary-label {
font-weight: 800;
margin-right: 4px;
}
.zk-pr__summary-price {
display: block;
margin-top: 4px;
font-size: 22px;
font-weight: 800;
color: var(--zk-ink, #23291c);
}
.zk-pr__summary-price:empty {
display: none;
}
/* Podsumowanie przejęło „Razem" (klasę nadaje JS po relokacji) —
tabela sumy YITH schowana, żeby nie dublować ceny i nie zostawiać
pustego nagłówka przed dokonaniem wyboru. */
body.zk-pr--summary-total #wapo-total-price-table {
display: none !important;
}
/* Notka przy wariancie (np. big bag: „zakup worka w gestii zamawiającego")
— bursztynowy box informacyjny wg design systemu, zamiast boldu.
.woocommerce-variation-description bywa pustym kontenerem → domyślnie
ukryty, JS pokazuje go tylko z treścią. .zk-pr__variant-note nadaje JS
notce big baga rozpoznanej po treści. */
body.single-product .woocommerce-variation-description {
display: none;
}
body.single-product .woocommerce-variation-description,
body.single-product .zk-pr__variant-note {
background: var(--zk-amber-bg, #FEF3C7);
border: 1px solid #f0dfa0;
border-radius: var(--zk-r-control, 8px);
padding: 10px 14px;
margin: 12px 0 16px;
position: static;
float: none;
clear: both;
}
/* Oryginalny element notki (chowany przez JS) — twardo, na wypadek
przerysowania zanim skrypt zdąży zareagować. */
body.single-product .zk-pr__variant-note-src {
display: none !important;
}
body.single-product .woocommerce-variation-description,
body.single-product .woocommerce-variation-description p,
body.single-product .zk-pr__variant-note,
body.single-product .zk-pr__variant-note * {
color: var(--zk-amber, #B45309) !important;
font-size: 13.5px !important;
line-height: 1.5;
font-weight: 600 !important;
}
body.single-product .woocommerce-variation-description p,
body.single-product .zk-pr__variant-note p {
margin: 0;
}
/* Zwarte odstępy bloków YITH (puste przestrzenie nad sumą) */
body.single-product .yith-wapo-addon {
margin-bottom: 12px !important;
}
body.single-product #yith-wapo-container {
margin: 0 !important;
}
/* Winowajcy odstępu nagłówek→pole daty (front.css YITH):
.wapo-addon-title { margin-bottom:25px } + .title-image { padding:15px 0 } */
body.single-product .yith-wapo-block .yith-wapo-addon .addon-header .title-image {
padding: 2px 0 0 !important;
}
body.single-product .yith-wapo-block .yith-wapo-addon .wapo-addon-title {
margin: 10px 0 8px !important;
}
/* Dodatki typu data — zero zbędnych przekładek między nagłówkiem a polem
(puste opisy, obrazki opcji, marginesy kontenerów opcji). */
body.single-product .yith-wapo-addon-type-date .options-container,
body.single-product .yith-wapo-addon-type-date .options,
body.single-product .yith-wapo-addon-type-date .yith-wapo-option {
margin: 0 !important;
padding: 0 !important;
}
body.single-product .yith-wapo-addon-type-date .wapo-addon-description:empty,
body.single-product .yith-wapo-addon-type-date .option-image,
body.single-product .yith-wapo-addon-type-date .wapo-image {
display: none !important;
}
/* Podpowiedź najbliższego terminu pod polem daty */
.zk-pr__nextdate {
margin: 8px 0 0;
font-size: 13.5px;
font-weight: 600;
color: var(--zk-green-dark, #487214);
}
/* --- 11. Blok pod CTA: zaufanie + telefon ---------------------------------- */
/* Jedna wielkość fontu w całej linii telefonu (numer wyróżnia tylko waga),
oddech od przycisku, minimum treści. */
.zk-pr__after {
margin-top: 22px;
}
.zk-pr__trust {
margin: 0 0 12px;
font-size: 13px;
line-height: 1.5;
color: var(--zk-muted, #5b6152);
text-align: center;
}
.zk-pr__call {
margin: 0;
font-size: 14.5px;
line-height: 1.6;
color: var(--zk-ink, #23291c);
text-align: center;
}
.zk-pr__call a {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 14.5px;
font-weight: 700;
color: var(--zk-ink, #23291c) !important;
text-decoration: none;
white-space: nowrap;
}
.zk-pr__call a:hover {
color: var(--zk-green-dark, #487214) !important;
}
/* Wzorcowa słuchawka (zk_phone_icon ma atrybuty 18px) w linku tekstowym — trzymamy 14px. */
.zk-pr__call a svg { width: 14px; height: 14px; }
.zk-pr__hours {
display: inline-block;
margin-left: 6px;
font-size: 14.5px;
color: var(--zk-muted, #5b6152);
}
/* --- 12. Mobile ------------------------------------------------------------ */
@media (max-width: 700px) {
.zk-pr__trust {
font-size: 12.5px;
}
}
/* --- 13. Poszanowanie reduced motion ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
body.single-product .step,
body.single-product .select_option_image,
body.single-product form.cart button.single_add_to_cart_button.button.alt {
transition: none !important;
}
}
/* --- 14. FIX float-containment karty produktu (KRYTYCZNE) -------------------
Karta produktu stoi na floatach WooCommerce (galeria + summary), których nic
nie domyka (brak zakładek/opisu → brak clear:both). Stopka child theme używa
CSS grid, który floatów NIE owija → elementy nachodzą na siebie.
Domknięcie: kontener treści produktu jako flow-root.
Historia: pierwotnie w custom.css (2026-07-16); custom.css bywa nadpisywany
i reguła znikała ("karta znowu się rozsypuje"), więc trwałe miejsce fixu to
CSS modułu produktu — ładowany tylko tu, PO custom.css. ID w selektorze daje
wysoką specyficzność, więc kolejność nie ma znaczenia.
Pełna diagnoza: claude/diagnoza-karta-produktu-2026-07-16.md */
.single-product main#main.site-main {
display: flow-root;
}
/* ==================================================================
15. Kalendarz — marker „dzisiaj" tylko na dniach wybieralnych
(2026-08-18). Zielona obwódka .today na wygaszonym/niewybieralnym
dniu myliła się z zaznaczeniem (zgłoszenie W.). Na dniach disabled
ring i pogrubienie znikają; na wybieralnych zostają bez zmian.
================================================================== */
.flatpickr-day.today.flatpickr-disabled,
.flatpickr-day.today.kk-unavailable,
.flatpickr-day.today.kk-weekend-disabled,
.flatpickr-day.today.prevMonthDay,
.flatpickr-day.today.nextMonthDay {
box-shadow: none !important;
font-weight: 400 !important;
}
/* Wariant defensywny: ring „dzisiaj" wyłącznie na dniach oznaczonych przez
snippet jako wybieralne (kk-available) lub realnie wybranych. */
.flatpickr-day.today:not(.kk-available):not(.selected):not(.startRange):not(.endRange) {
box-shadow: none !important;
font-weight: 400 !important;
}