/* * KFD - karta produktu, szybki podglad i znaczki w kafelkach (wdrozenie 28.09.2026; projekt: ux-strona-produktu-2026-09-28). * Sekcja 12 (poprawka 28.09.2026 wieczorem, ?v=20260928-p14): tabele na stronach CMS na telefonie ("Metody i koszty dostawy"). * Poprawki 4 (28.09.2026 wieczorem, ?v=20260928-p15): 5a .kfd-buyinfo__nw (nazwy bez lamania, zamiast twardych spacji), * 12: podpowiedz nad cennikiem GLS ukryta od 508 do 575 px (tabela miesci sie w ramce). * * Plik poza paczka CCC: dolaczony w templates/_partials/header.tpl (po kfd-menu.css) z wlasna seria ?v=20260928-p * - kazda zmiana tresci = nowy numer, nigdy powrot do starego (Cloudflare trzyma pliki statyczne miesiac). * Link stoi w , wiec reguly wygrywaja z arkuszami z (paczka CCC, kfd-page-width.css, moduly, style Vue). * * Zasady, ktorych ten plik pilnuje: * - NIE zmienia wielkosci ani koloru znaczka obnizki i zdania o najnizszej cenie - to ustawia modul kfdomnibus * (karta 16 px = przekreslona najnizsza cena 16 px, kafelki 11 px = linia "najnizsza cena" 11 px; UOKiK 2023 s. 52); * tu tylko zaokraglenie znaczka; * - cena najwyzej 2 razy wieksza od zdania o najnizszej cenie (26 px przy 13 px), jak dotad; * - niebieski tylko dla rzeczy klikalnych; znaczek "Nowosc" i cena w granacie marki; * - rogi 4 px (przyciski, pola, znaczki), 8 px (ramki bloku zakupu i polecanych); karty kafelkow bez zmian; * - WCAG 2.2 AA: tekst >= 4,5:1, ramki pol >= 3:1, cele dotyku >= 44 px, widoczny fokus z klawiatury; * - kolejnosc elementow na ekranie = kolejnosc w HTML (klawisz Tab idzie tak, jak widac); * - bez :empty (na produkcji HTML nie jest sciskany) - zamiast tego :not(:has(*)). * Reguly z :has() stoja osobno (przegladarka bez :has() odrzuca cala regule i zostaje dotychczasowy wyglad). */ :root { --kfdux-navy: #011638; /* granat marki (logo) - tekst 17,9:1 */ --kfdux-blue: #3d52d5; /* kolor akcji - bialy tekst 6,24:1 */ --kfdux-blue-hover: #2e40b8; /* ciemniejszy przy najechaniu - 8,26:1 */ --kfdux-blue-active: #26379e; /* wcisniety - 9,89:1 */ --kfdux-blue-tint: #eef1fd; /* tlo przycisku drugiego rzedu i wybranego kafelka */ --kfdux-blue-text: #2b3db0; /* tekst na jasnoniebieskim - 7,77:1 */ --kfdux-ink: #2e3445; /* tekst - 12,4:1 */ --kfdux-muted: #4a5263; /* tekst pomocniczy - 7,84:1 (zamiast #7a7a7a 4,29:1) */ --kfdux-control: #858d9b; /* ramka pol - 3,34:1 (zamiast #ddd 1,36:1) */ --kfdux-line: #e3e6ec; /* linie podzialu (ozdobne) */ --kfdux-panel: #f5f7fa; /* tlo ramki informacji */ --kfdux-r: 4px; /* przyciski, pola, znaczki */ --kfdux-r-card: 8px; /* ramki w bloku zakupu i polecanych */ } /* ------------------------------------------------------------------ 1. Znaczki w kafelkach list i "Niedostepny" */ html body .product-miniature .product-flags li.product-flag { border-radius: var(--kfdux-r) !important; } /* "Nowosc": granat marki zamiast koloru przyciskow - nie wyglada jak przycisk i nie konkuruje z cena */ html body .product-miniature .product-flags li.product-flag.new { height: 22px; padding: 0 8px !important; background: var(--kfdux-navy) !important; color: #fff !important; font-size: 11px !important; font-weight: 700 !important; line-height: 22px !important; letter-spacing: .01em; box-sizing: border-box; } /* Obnizka w kafelku: czcionka i kolor z modulu kfdomnibus bez zmian (11 px = linia "najnizsza cena"), tylko wysokosc jak "Nowosc" */ html body .product-miniature .product-flags li.product-flag:is(.discount, .discount-percentage, .discount-amount) { height: 22px; } /* "Niedostepny" (listy i karta produktu): spokojny szary 6,9:1 zamiast niebieskiego jak przycisk albo turkusu 2,33:1 */ html body .product-miniature .product-out-of-stock li.out_of_stock, html body .product-container .product-flags li.product-flag.out_of_stock { background: #eef0f3 !important; color: var(--kfdux-muted) !important; border-radius: var(--kfdux-r) !important; } /* "Niedostepny" w kafelku na telefonie i tablecie nie zaslania lupy szybkiego podgladu (K-14): mniejsze marginesy wewnetrzne plakietki (8 zamiast 25 px z kazdej strony) - ok. 96 px zamiast 130 px, napis w calosci */ @media (max-width: 991.98px) { html body .product-miniature .product-out-of-stock li.out_of_stock { padding-right: 8px !important; padding-left: 8px !important; white-space: nowrap; } } /* ------------------------------------------------------------------ 2. Znaczki na zdjeciu karty produktu */ html body#product .product-container .product-flags { top: 12px !important; left: 12px !important; width: auto !important; flex-direction: row !important; flex-wrap: wrap; align-items: flex-start; gap: 6px; } /* ksztalt i odstep; wielkosc czcionki znaczka obnizki zostaje z kfdomnibus (16 px) */ html body#product .product-container .product-flags li.product-flag { margin: 0 !important; border-radius: var(--kfdux-r) !important; box-sizing: border-box; } html body#product .product-container .product-flags li.product-flag.new { padding: 6px 10px !important; background: var(--kfdux-navy) !important; color: #fff !important; font-size: 14px !important; font-weight: 700 !important; line-height: 18px !important; } /* ------------------------------------------------------------------ 3. Tytul, ocena, cena */ html body#product .product-container .product-title-wishlist-wrapper { align-items: flex-start; gap: 8px; } /* Serduszko: cel dotyku 44 x 44 zamiast 36 x 25 */ html body#product .product-container .product-wishlist-top .wishlist-button-add { width: 44px !important; height: 44px !important; min-width: 44px !important; margin: -8px -10px 0 0; background: transparent !important; box-shadow: none !important; } html body#product .product-container .product-prices { margin-top: 8px; } /* karta produktu i szybki podglad (poprawka 28.09, K-5): ten sam porzadek - ocena albo zaproszenie do opinii w osobnym wierszu nad cena, zdanie Omnibus zaraz pod cena (w podgladzie ocena stala w linii ceny, miedzy cena a zdaniem Omnibus) */ html body :is(#product .product-container, .quickview) .product-prices { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 4px; } html body :is(#product .product-container, .quickview) .product-prices > * { flex: 0 0 100%; min-width: 0; order: 6; } /* kolejnosc: ocena albo zaproszenie do opinii - przekreslona najnizsza cena - cena i cena za 100 g - zdanie Omnibus */ html body :is(#product .product-container, .quickview) .product-prices > .product-price, html body :is(#product .product-container, .quickview) .product-prices .current-price { display: contents; } html body :is(#product .product-container, .quickview) .product-prices .custom_place_stars { order: 1; flex: 0 0 100%; margin: 4px 0 6px !important; } html body .quickview .product-prices .custom_place_stars { margin: 0 0 4px !important; } html body :is(#product .product-container, .quickview) .product-prices > .product-discount { order: 2; margin: 0; } html body .quickview .product-prices .current-price-value { order: 3; flex: 0 0 auto; } html body .quickview .product-prices .current-price > .discount { order: 3; flex: 0 0 auto; } html body .quickview .product-prices .price-per-unit { order: 4; flex: 0 1 auto; } html body .quickview .product-prices > .tax-shipping-delivery-label { order: 5; margin: 0 !important; } /* wiersz ocen: gwiazdki z liczba i "Jak sprawdzamy opinie" w jednej linii (motyw podnosil gwiazdki o 6 px przesunieciem, wiec odnosnik obok stal 6-8 px nizej - K-6) */ html body :is(#product .product-container, .quickview) .custom_place_stars .revws-kfd-average { transform: none !important; margin-bottom: 0 !important; } /* pole dotyku odnosnikow ocen ok. 30-32 px (bylo 18-20 px) bez zmiany wygladu i ukladu (K-7) */ html body :is(#product .product-container, .quickview) .custom_place_stars :is(a.kfd-revws-rules, a.revws-product-custom-placement-link:not(:has(.revws-kfd-average))) { padding-top: 6px !important; padding-bottom: 6px !important; margin-top: -6px !important; margin-bottom: -6px !important; } /* cena: granat, 26 px jak dotad (2 x zdanie o najnizszej cenie 13 px), troche grubsza */ html body#product .product-container .product-prices .current-price-value { order: 3; flex: 0 0 auto; font-size: 26px !important; font-weight: 600 !important; line-height: 1.15; color: var(--kfdux-navy) !important; } /* szybki podglad: ten sam kolor ceny i czytelna cena za 100 g (bez zmiany ukladu i wielkosci) */ html body .quickview .product-prices .current-price-value { color: var(--kfdux-navy) !important; font-weight: 600 !important; } html body .quickview .product-prices .price-per-unit { color: var(--kfdux-muted) !important; font-style: normal !important; } html body#product .product-container .product-prices .current-price > .discount { order: 3; flex: 0 0 auto; } html body#product .product-container .product-prices .price-per-unit { order: 4; flex: 0 1 auto; color: var(--kfdux-muted) !important; font-size: 14px !important; font-style: normal !important; } html body#product .product-container .product-prices > .tax-shipping-delivery-label { order: 5; margin: 0 !important; } /* opinie pod nazwa: gwiazdki z liczba albo male zaproszenie "Brak opinii - dodaj swoja" (nie przy cenie); w szybkim podgladzie tylko zawijanie, zeby "Jak sprawdzamy opinie" nie wychodzilo poza okno */ html body .quickview .custom_place_stars #revws-product-custom-placement { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; } html body#product .product-container .custom_place_stars #revws-product-custom-placement { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; color: var(--kfdux-muted); font-size: 14px; line-height: 1.4; } html body#product .product-container .custom_place_stars a.revws-product-custom-placement-link:not(:has(.revws-kfd-average)) { color: var(--kfdux-muted) !important; font-size: 14px !important; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; } html body#product .product-container .custom_place_stars .revws-kfd-average-value, html body#product .product-container .custom_place_stars .revws-kfd-average-count { color: var(--kfdux-ink); font-size: 14px; } /* "Jak sprawdzamy opinie" zamiast ikonki "i" z sama podpowiedzia (dziala z telefonu i klawiatury) */ html body :is(#product .product-container, .quickview) .custom_place_stars .kfd-revws-rules { color: var(--kfdux-muted) !important; font-size: 13px !important; font-weight: 500 !important; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; } @media (hover: hover) { html body :is(#product .product-container, .quickview) .custom_place_stars .kfd-revws-rules:hover { color: var(--kfdux-navy) !important; } } html body#product .product-container .product-separator-variants { margin: 16px 0 !important; border-top-color: var(--kfdux-line) !important; } /* ------------------------------------------------------------------ 4. Wariant, ilosc, "Dodaj do koszyka" (karta i szybki podglad) */ html body :is(#product .product-container, .quickview) .product-actions .control-label { margin-bottom: 6px; color: var(--kfdux-ink); font-size: 14px; font-weight: 600; text-align: left; } /* "Ilosc" zostaje widoczna, jak "Smak" - pole do wpisania ma widoczna etykiete (WCAG 3.3.2) */ html body :is(#product .product-container, .quickview) .product-add-to-cart .product-quantity-col > .control-label, html body :is(#product .product-container, .quickview) .product-add-to-cart > .control-label.space-for-no-label { display: block; margin-top: 0 !important; margin-bottom: 6px; color: var(--kfdux-ink); font-size: 14px; font-weight: 600; } html body :is(#product .product-container, .quickview) .product-add-to-cart .product-quantity-col .product-quantity, html body :is(#product .product-container, .quickview) .product-add-to-cart .product-quantity-col .qty { display: block !important; margin: 0 !important; padding: 0 !important; } /* pusty komunikat dostepnosci nie robi odstepu (pokazany komunikat zawsze ma ikone; blad odswiezenia ma klase alert) */ html body :is(#product .product-container, .quickview) .product-add-to-cart > #product-availability:not(.alert):not(:has(*)) { display: none !important; } html body :is(#product .product-container, .quickview) .product-add-to-cart > .product-minimal-quantity:not(:has(*)) { margin: 0 !important; } html body :is(#product .product-container, .quickview) .product-variants .product-variants-item { margin: 0; } /* telefon: HTML ma teraz wybor wariantu przed iloscia - bez odwracania kolejnosci z custom.css (column-reverse) */ @media (max-width: 767.98px) { html body .product-add-to-cart > .product-quantity-variants-row { flex-direction: column !important; } } /* produkt bez wariantow: [ - 1 + ] [ Dodaj do koszyka ] w jednym rzedzie (kolejnosc jak w HTML) */ html body#product .product-container .product-add-to-cart > .product-quantity { display: flex !important; flex-wrap: nowrap !important; align-items: stretch; gap: 12px; margin: 0; } html body#product .product-container .product-add-to-cart > .product-quantity::after { content: none !important; } html body#product .product-container .product-add-to-cart > .product-quantity > .qty { flex: 0 0 auto; width: auto !important; margin: 0 !important; } html body#product .product-container .product-add-to-cart > .product-quantity > .add { flex: 1 1 auto; width: auto !important; min-width: 0; margin: 0 !important; } /* licznik: 48 px, wyrazna ramka, prawdziwy znak minus */ html body :is(#product .product-container, .quickview) .product-add-to-cart .bootstrap-touchspin { width: auto !important; height: 48px !important; border: 1px solid var(--kfdux-control) !important; border-radius: var(--kfdux-r) !important; margin: 0 !important; background: #fff; } html body :is(#product .product-container, .quickview) .product-add-to-cart .bootstrap-touchspin input.form-control { width: 44px !important; color: var(--kfdux-navy); font-size: 16px; font-weight: 600; line-height: 46px; } html body :is(#product .product-container, .quickview) .product-add-to-cart .bootstrap-touchspin .btn-touchspin { width: 44px !important; color: var(--kfdux-ink) !important; font-size: 22px !important; } @media (hover: hover) { html body :is(#product .product-container, .quickview) .product-add-to-cart .bootstrap-touchspin .btn-touchspin:hover { background: var(--kfdux-panel) !important; color: var(--kfdux-navy) !important; } } html body :is(#product .product-container, .quickview) .product-add-to-cart .bootstrap-touchspin .btn-touchspin.bootstrap-touchspin-down::after { content: "\2212"; font-weight: 500; } html body :is(#product .product-container, .quickview) .product-add-to-cart .bootstrap-touchspin .btn-touchspin.bootstrap-touchspin-up::after { font-weight: 500; } html body :is(#product .product-container, .quickview) .product-add-to-cart .bootstrap-touchspin:focus-within { outline: 2px solid var(--kfdux-blue); outline-offset: 2px; } /* wybor z listy (ponad 6 opcji): 48 px, ciemny tekst zamiast szarego, ramka 3:1 */ html body :is(#product .product-container, .quickview) .product-variants select.form-control { height: 48px !important; padding-left: 12px !important; border: 1px solid var(--kfdux-control) !important; border-radius: var(--kfdux-r) !important; color: var(--kfdux-ink) !important; font-size: 16px !important; font-weight: 500; } /* przycisk glowny: ten sam niebieski marki, 48 px, rogi 4 px, ikona torby jak w naglowku, ciemniejszy po najechaniu */ html body :is(#product .product-container, .quickview) .product-add-to-cart button.add-to-cart { display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 48px !important; padding: 0 20px !important; border: 0 !important; border-radius: var(--kfdux-r) !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1 !important; white-space: nowrap; transition: background-color .15s ease; } html body :is(#product .product-container, .quickview) .product-add-to-cart button.add-to-cart:not([disabled]) { background: var(--kfdux-blue) !important; color: #fff !important; } html body :is(#product .product-container, .quickview) .product-add-to-cart button.add-to-cart:not([disabled]):hover { background: var(--kfdux-blue-hover) !important; } html body :is(#product .product-container, .quickview) .product-add-to-cart button.add-to-cart:not([disabled]):active { background: var(--kfdux-blue-active) !important; } /* nieaktywny (brak w magazynie, wariant bez stanu): szary jak przycisk w pasku zakupu - czytelny (7,4:1) i nie wyglada na klikalny; jeden wyglad tego stanu na calej stronie (poprawka 28.09, K-8) */ html body :is(#product .product-container, .quickview) .product-add-to-cart button.add-to-cart[disabled] { background: #c3c8d2 !important; color: var(--kfdux-ink) !important; opacity: 1 !important; box-shadow: none !important; cursor: not-allowed; } html body :is(#product .product-container, .quickview) .product-add-to-cart button.add-to-cart::before { content: ""; flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 8h13l-1 12.5h-11z'/%3E%3Cpath d='M9 8V6.5a3 3 0 0 1 6 0V8'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 8h13l-1 12.5h-11z'/%3E%3Cpath d='M9 8V6.5a3 3 0 0 1 6 0V8'/%3E%3C/svg%3E") center / contain no-repeat; } /* widoczny fokus z klawiatury: blok zakupu, szybki podglad, polecane, ramka dostawy, serduszko */ html body :is(#product .product-container, .quickview) .product-actions :is(button, select, input, a, [role="button"]):focus-visible, html body :is(#product .product-container, .quickview) .custom_place_stars a:focus-visible, html body#product .product-container .product-wishlist-top button:focus-visible, html body section.kfdcartcrosssell a:focus-visible, html body#product .kfd-buyinfo :is(a, button):focus-visible, html body#product .tabs .nav-link:focus-visible, html body#product #stock-availability-modal :is(select, [role="button"]):focus-visible { outline: 2px solid var(--kfdux-blue) !important; outline-offset: 2px !important; box-shadow: none !important; } html body :is(#product .product-container, .quickview) .product-add-to-cart .bootstrap-touchspin input:focus-visible { outline: none !important; } /* ------------------------------------------------------------------ 5. Dostawa i platnosc pod przyciskiem */ /* 5a. Ramka (znaczniki wpisane wprost w catalog/product.tpl zamiast trzech linii) */ html body#product .kfd-buyinfo { margin: 16px 0 8px; border-radius: var(--kfdux-r-card); background: var(--kfdux-panel); color: var(--kfdux-ink); font-family: Montserrat, Arial, sans-serif; } html body#product .kfd-buyinfo__list { margin: 0; padding: 2px 16px; list-style: none; } html body#product .kfd-buyinfo__row { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 10px 0; border-top: 1px solid var(--kfdux-line); } html body#product .kfd-buyinfo__row:first-child { border-top: 0; } html body#product .kfd-buyinfo__icon { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--kfdux-navy); } html body#product .kfd-buyinfo__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } html body#product .kfd-buyinfo__title { color: var(--kfdux-navy); font-size: 14px; font-weight: 600; line-height: 1.4; } html body#product .kfd-buyinfo__sub { color: var(--kfdux-muted); font-size: 13px; line-height: 1.45; } html body#product .kfd-buyinfo__sub b { color: var(--kfdux-ink); font-weight: 600; } /* poprawki 4 (28.09 wieczorem): nazwy przewoznikow i metod platnosci (Paczkomat InPost, ORLEN Paczka, DHL POP, Pocztex PUNKT / AUTOMAT, Google Pay, Apple Pay) nie lamia sie w srodku - zamiast twardych spacji w szablonie */ html body#product .kfd-buyinfo__nw { white-space: nowrap; } /* "Sprawdz dostepnosc w sklepie": prawdziwy przycisk (klawiatura), ta sama klasa co dotad (skrypt kfdproduct) */ html body#product .kfd-buyinfo button.kfd-buyinfo__store { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: var(--kfdux-r); background: none; color: var(--kfdux-blue); font: inherit; font-size: 14px; font-weight: 600; line-height: 1.4; text-align: left; cursor: pointer; } html body#product .kfd-buyinfo button.kfd-buyinfo__store .kfd-buyinfo__icon { margin-top: 0; } @media (hover: hover) { html body#product .kfd-buyinfo button.kfd-buyinfo__store:hover .kfd-buyinfo__store-text { text-decoration: underline; text-underline-offset: 3px; } html body#product .kfd-buyinfo__more:hover { color: var(--kfdux-blue-hover); } } html body#product .kfd-buyinfo__chevron { flex: none; width: 16px; height: 16px; margin-left: auto; } html body#product .kfd-buyinfo__row--store { padding: 2px 0; } html body#product .kfd-buyinfo__more { display: inline-block; margin: -6px 16px 6px 50px; /* pole dotyku 6 px wyzej i nizej (padding), uklad jak przy "0 16px 12px 50px" (K-7) */ padding: 6px 0; color: var(--kfdux-blue); font-size: 13px; font-weight: 600; line-height: 1.45; text-decoration: underline; text-underline-offset: 3px; } /* 5b. Dawne trzy linie (gdyby szablon wrocil do starej wersji): czytelniejsze, bez skakania tekstu po najechaniu */ html body#product .product-container .accessories-info .info-text { font-size: 14px !important; font-weight: 500 !important; color: var(--kfdux-ink) !important; } html body#product .product-container .accessories-info :is(.local-shop .info-text, a) { color: var(--kfdux-blue) !important; font-weight: 500 !important; text-decoration: underline; text-underline-offset: 3px; } html body#product .product-container .accessories-info :is(.local-shop .info-text, a):hover { color: var(--kfdux-blue-hover) !important; font-weight: 500 !important; } /* 5c. Okno "Sprawdz dostepnosc" (modul kfdproduct): zamkniecie jako cel dotyku 44 x 44 (obsluga klawiatury w kfd-product-ux.js) */ html body#product #stock-availability-modal #shops { min-height: 44px; /* glowne pole okna jako cel dotyku 44 px (A-7) */ } html body#product #stock-availability-modal .close[role="button"] { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; cursor: pointer; } /* ------------------------------------------------------------------ 6. Polecane pod przyciskiem i w koszyku (modul kfdcartcrosssell) Ten sam wyglad na karcie produktu i w koszyku (body#cart - poprawka 28.09, K-2): przycisk 44 px na telefonie, 3 linie nazwy, cena w granacie, do 991 px lista zamiast przewijania w bok. */ html body:is(#product, #cart) section.kfdcartcrosssell .kfdcartcrosssell__head h2 { color: var(--kfdux-navy); font-size: 18px; } /* podpis "na podstawie ... 90 dni" tylko z klasa kfdcartcrosssell__basis (szablon modulu dodaje ja wylacznie, gdy wszystkie pozycje sa ze wspolnych zakupow) - stary szablon bez tej klasy nie pokaze nieprawdziwego podpisu */ html body section.kfdcartcrosssell .kfdcartcrosssell__head p:not(.kfdcartcrosssell__basis) { display: none; } html body:is(#product, #cart) section.kfdcartcrosssell .kfdcartcrosssell__head p { color: var(--kfdux-muted); font-size: 13px; } html body:is(#product, #cart) section.kfdcartcrosssell .kfdcartcrosssell__head { margin-bottom: 12px; } html body:is(#product, #cart) section.kfdcartcrosssell .kfdcartcrosssell__grid { gap: 12px; } /* karta: cienka ramka zamiast cienia, rogi 8 px */ html body:is(#product, #cart) section.kfdcartcrosssell .kfdcartcrosssell__item { gap: 8px; padding: 12px; border: 1px solid var(--kfdux-line); border-radius: var(--kfdux-r-card); box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease; } html body:is(#product, #cart) section.kfdcartcrosssell .kfdcartcrosssell__image-link { aspect-ratio: 1 / 1; } /* nazwa: 3 linie zamiast 2 (mniej ucietych nazw), granat */ html body:is(#product, #cart) section.kfdcartcrosssell .kfdcartcrosssell__name { min-height: calc(3 * 1.35em); color: var(--kfdux-navy); font-size: 13px; font-weight: 500; line-height: 1.35; -webkit-line-clamp: 3; } html body:is(#product, #cart) section.kfdcartcrosssell .kfdcartcrosssell__price { padding-top: 8px; color: var(--kfdux-navy); font-size: 15px; font-weight: 700; } /* ocena na karcie polecanych (hak displayProductListReviews modulu revws) - karta i koszyk */ html body section.kfdcartcrosssell .kfdcartcrosssell__rating .revws-product-list { margin: 4px 0 0; padding: 0; text-align: left; } html body section.kfdcartcrosssell .kfdcartcrosssell__rating .revws-product-list a { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; color: var(--kfdux-muted); font-size: 12px; line-height: 1.3; text-decoration: none; } html body section.kfdcartcrosssell .kfdcartcrosssell__rating .revws-product-list .revws-count-text { margin: 0; color: var(--kfdux-muted); font-size: 12px; } /* brak opinii w poleceniach: bez pustych gwiazdek (zaproszenie do opinii jest na karcie produktu) */ html body section.kfdcartcrosssell .kfdcartcrosssell__rating .revws-product-list-empty { display: none; } /* "Dodaj" / "Wybierz smak": wypelniony jasnoniebieski przycisk z cienka ramka zamiast pustej ramki ("duch" wg NN/g) */ html body:is(#product, #cart) section.kfdcartcrosssell .kfdcartcrosssell__add.btn.btn-primary { min-height: 40px; padding: 4px 6px; border: 1px solid var(--kfdux-blue) !important; border-radius: var(--kfdux-r); background: var(--kfdux-blue-tint) !important; color: var(--kfdux-blue-text) !important; font-size: 13px; font-weight: 600; line-height: 1.2; white-space: normal; text-align: center; transition: background-color .15s ease, color .15s ease; } /* stany po najechaniu tylko przy myszy - na telefonie nie "przyklejaja sie" po dotknieciu */ @media (hover: hover) { html body:is(#product, #cart) section.kfdcartcrosssell .kfdcartcrosssell__item:hover { border-color: #c3c8d2; box-shadow: 0 4px 16px rgba(1, 22, 56, .08); } html body:is(#product, #cart) section.kfdcartcrosssell .kfdcartcrosssell__add.btn.btn-primary:hover, html body:is(#product, #cart) section.kfdcartcrosssell .kfdcartcrosssell__item:hover .kfdcartcrosssell__add.btn.btn-primary { background: var(--kfdux-blue) !important; color: #fff !important; } } /* telefon i tablet: zwarta lista - wszystkie pozycje widoczne od razu, bez szarego suwaka */ @media (max-width: 991.98px) { html body:is(#product, #cart) section.kfdcartcrosssell .kfdcartcrosssell__grid { display: flex !important; flex-direction: column; gap: 0; padding: 0 !important; overflow: visible !important; border: 1px solid var(--kfdux-line); border-radius: var(--kfdux-r-card); } html body:is(#product, #cart) section.kfdcartcrosssell .kfdcartcrosssell__item { display: grid; flex: none !important; grid-template-columns: 60px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 8px 12px; border: 0; border-top: 1px solid var(--kfdux-line); border-radius: 0; } html body:is(#product, #cart) section.kfdcartcrosssell .kfdcartcrosssell__item:first-child { border-top: 0; } html body:is(#product, #cart) section.kfdcartcrosssell .kfdcartcrosssell__image-link { width: 60px; height: 60px; } html body:is(#product, #cart) section.kfdcartcrosssell .kfdcartcrosssell__name { min-height: 0; font-size: 14px; -webkit-line-clamp: 3; } html body:is(#product, #cart) section.kfdcartcrosssell .kfdcartcrosssell__price { padding-top: 2px; } html body:is(#product, #cart) section.kfdcartcrosssell .kfdcartcrosssell__add.btn.btn-primary { width: auto; min-width: 76px; min-height: 44px; margin: 0; padding: 0 12px; font-size: 14px; white-space: nowrap; } html body:is(#product, #cart) section.kfdcartcrosssell .kfdcartcrosssell__scrollbar { display: none !important; } } /* ------------------------------------------------------------------ 7. Zdjecia */ /* jedno zdjecie: bez rzedu z jedna miniatura (nic nie wnosi). Przy 2+ zdjeciach miniatury bez zmian */ html body#product .product-container .images-container .js-qv-mask:not(:has(li.thumb-container + li.thumb-container)) { display: none !important; } /* od 768 px: zdjecie przy gornej krawedzi, przy tytule, a miniatury tuz pod nim (poprawka 28.09, K-1). Motyw rozciagal ramke zdjecia na wysokosc prawej kolumny i centrowal w niej zdjecie; po dodaniu ramki dostawy i polecanych prawa kolumna jest wyzsza, wiec zdjecie zjezdzalo w dol (na laptopie 1366x768 czesciowo pod ekran). Ramka ma teraz wysokosc zdjecia (jak przy jednym zdjeciu na telefonie), a wolne miejsce zostaje pod nia. */ @media (min-width: 768px) { html body#product .product-container .images-container { justify-content: flex-start !important; } html body#product .product-container .images-container > .product-cover { flex: 0 0 auto !important; justify-content: flex-start !important; } html body#product .product-container .images-container > .product-cover img { height: auto !important; } } /* ------------------------------------------------------------------ 8. Telefon: blok zakupu wyzej */ @media (max-width: 767.98px) { html body#product .product-container .images-container .product-cover { margin-bottom: 8px; padding-top: 12px; padding-bottom: 12px; } html body#product .product-container .product-title-wishlist-wrapper { margin-top: 12px; } html body#product .product-container .product-separator-variants { margin: 12px 0 !important; } html body#product .kfd-buyinfo__list { padding: 2px 14px; } html body#product .kfd-buyinfo__more { margin-left: 48px; } } /* wybor wariantu na cala szerokosc, pod nim [ - 1 + ] [ Dodaj do koszyka ]: telefon - kazdy produkt z wariantami; komputer i tablet - gdy wariant wybiera sie kafelkami (sekcja 11) */ @media (max-width: 767.98px) { html body :is(#product .product-container, .quickview) .product-add-to-cart:has(> .product-quantity-variants-row) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 0; align-items: end; } html body :is(#product .product-container, .quickview) .product-add-to-cart:has(> .product-quantity-variants-row) > .product-quantity-variants-row { display: contents !important; } html body :is(#product .product-container, .quickview) .product-add-to-cart:has(> .product-quantity-variants-row) .product-variants-col { grid-column: 1 / -1; grid-row: 1; min-width: 0; } html body :is(#product .product-container, .quickview) .product-add-to-cart:has(> .product-quantity-variants-row) .product-quantity-col { grid-column: 1; grid-row: 2; margin-top: 12px; } html body :is(#product .product-container, .quickview) .product-add-to-cart:has(> .product-quantity-variants-row) > .product-add-button-row { grid-column: 2; grid-row: 2; margin: 12px 0 0 !important; } html body :is(#product .product-container, .quickview) .product-add-to-cart:has(> .product-quantity-variants-row) > :not(.product-quantity-variants-row):not(.product-add-button-row) { grid-column: 1 / -1; } html body :is(#product .product-container, .quickview) .product-add-to-cart button.add-to-cart { padding: 0 12px !important; font-size: 15px !important; } } @media (min-width: 768px) { html body :is(#product .product-container, .quickview) .product-add-to-cart:has(> .product-quantity-variants-row .kfd-pills) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 0; align-items: end; } html body :is(#product .product-container, .quickview) .product-add-to-cart:has(> .product-quantity-variants-row .kfd-pills) > .product-quantity-variants-row { display: contents !important; } html body :is(#product .product-container, .quickview) .product-add-to-cart:has(> .product-quantity-variants-row .kfd-pills) .product-variants-col { grid-column: 1 / -1; grid-row: 1; min-width: 0; } html body :is(#product .product-container, .quickview) .product-add-to-cart:has(> .product-quantity-variants-row .kfd-pills) .product-quantity-col { grid-column: 1; grid-row: 2; margin-top: 16px; } html body :is(#product .product-container, .quickview) .product-add-to-cart:has(> .product-quantity-variants-row .kfd-pills) > .product-add-button-row { grid-column: 2; grid-row: 2; margin: 16px 0 0 !important; } html body :is(#product .product-container, .quickview) .product-add-to-cart:has(> .product-quantity-variants-row .kfd-pills) > :not(.product-quantity-variants-row):not(.product-add-button-row) { grid-column: 1 / -1; } } /* waskie telefony (do 379 px): bez ikony torby, zeby napis "Dodaj do koszyka" miescil sie w jednej linii; licznik zostaje 3 x 44 px (cele dotyku 44 px - poprawka 28.09, A-4), wezszy (40 px) dopiero ponizej 350 px */ @media (max-width: 379.98px) { html body :is(#product .product-container, .quickview) .product-add-to-cart button.add-to-cart::before { display: none; } } @media (max-width: 349.98px) { html body :is(#product .product-container, .quickview) .product-add-to-cart .bootstrap-touchspin .btn-touchspin, html body :is(#product .product-container, .quickview) .product-add-to-cart .bootstrap-touchspin input.form-control { width: 40px !important; } } /* ------------------------------------------------------------------ 9. Zakladki opisu na telefonie: wszystkie widoczne, bez przewijania w bok */ @media (max-width: 600px) { html body#product .tabs .nav-tabs { flex-wrap: wrap !important; overflow: visible !important; border-bottom: 1px solid var(--kfdux-line) !important; } html body#product .tabs .nav-tabs .nav-item { flex: 0 1 auto !important; width: auto !important; margin: 0 !important; } html body#product .tabs .nav-tabs .nav-link[style*="display: block"], html body#product .tabs .nav-tabs .nav-link { width: auto !important; height: auto !important; min-height: 44px; padding: 8px 12px !important; font-size: 15px; white-space: nowrap !important; } } /* ------------------------------------------------------------------ 10. Pasek zakupu na telefonie (kfd-product-ux.js) */ html body .kfd-buybar { display: none; } @media (max-width: 767.98px) { html body#product .kfd-buybar { position: fixed; right: 0; bottom: 0; left: 0; z-index: 150; /* pod zaslona i szuflada menu (165/185), pod oknami (1040+) i banerem cookies */ display: flex; align-items: center; gap: 12px; padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--kfdux-line); background: #fff; box-shadow: 0 -4px 16px rgba(1, 22, 56, .08); transform: translateY(110%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; } html body#product .kfd-buybar.is-visible { transform: none; visibility: visible; transition: transform .2s ease; } /* nie zaslania okna zgody na cookies, okien (szybki podglad, koszyk, sklepy, lista ulubionych) ani menu */ html:is(.show--consent, .show--settings, .kfd-stock-open, .kfd-wishlist-open) body#product .kfd-buybar, html body#product:is(.modal-open, .kfd-mobile-menu-open) .kfd-buybar { display: none; } html body#product .kfd-buybar__info { display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; min-width: 0; } html body#product .kfd-buybar__price { color: var(--kfdux-navy); font-size: 18px; font-weight: 600; line-height: 1.2; white-space: nowrap; } html body#product .kfd-buybar__variant { max-width: 100%; overflow: hidden; margin: 0; padding: 0; border: 0; background: none; color: var(--kfdux-muted); font: inherit; font-size: 13px; line-height: 1.35; text-align: left; text-overflow: ellipsis; white-space: nowrap; } /* przycisk "Smak: ... - zmien": skracana jest tylko nazwa smaku, "zmien" zawsze widoczne (K-4); pole dotyku 4 px wyzej i 8 px nizej (padding + ujemny margines), uklad paska bez zmian (K-7) */ html body#product button.kfd-buybar__variant { display: flex; align-items: baseline; padding: 4px 0 8px; margin: -4px 0 -8px; cursor: pointer; } html body#product .kfd-buybar__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html body#product .kfd-buybar__sep, html body#product .kfd-buybar__change { flex: none; white-space: pre; } html body#product .kfd-buybar__change { color: var(--kfdux-blue); text-decoration: underline; text-underline-offset: 2px; } html body#product .kfd-buybar__btn { flex: none; height: 48px; padding: 0 18px; border: 0; border-radius: var(--kfdux-r); background: var(--kfdux-blue); color: #fff; font: inherit; font-size: 15px; font-weight: 700; white-space: nowrap; } html body#product .kfd-buybar__btn:active { background: var(--kfdux-blue-active); } html body#product .kfd-buybar__btn[disabled] { background: #c3c8d2; color: var(--kfdux-ink); } html body#product .kfd-buybar :is(button):focus-visible { outline: 2px solid var(--kfdux-blue); outline-offset: 2px; } /* strona i fokus nie chowaja sie pod paskiem (WCAG 2.4.11) */ html.kfd-buybar-on { scroll-padding-bottom: 88px; } html.kfd-buybar-on body#product #footer { padding-bottom: 72px; } } /* ograniczony ruch (ustawienie systemu): pasek pokazuje sie od razu, bez wjezdzania (poprawka 28.09, A-3) */ @media (max-width: 767.98px) and (prefers-reduced-motion: reduce) { html body#product .kfd-buybar, html body#product .kfd-buybar.is-visible { transition: none !important; } } /* ------------------------------------------------------------------ 11. Wybor wariantu kafelkami (product-variants.tpl, 2-6 opcji) */ html body :is(#product .product-container, .quickview) .kfd-pills-set { min-width: 0; margin: 0; padding: 0; border: 0; } html body :is(#product .product-container, .quickview) .kfd-pills-set > legend.control-label { float: none; display: block; width: auto; max-width: 100%; margin: 0 0 8px; padding: 0; border: 0; color: var(--kfdux-ink); font-size: 14px; font-weight: 600; line-height: 1.4; } html body :is(#product .product-container, .quickview) .kfd-pills-set__chosen b { color: var(--kfdux-navy); font-weight: 700; } html body :is(#product .product-container, .quickview) .kfd-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; } html body :is(#product .product-container, .quickview) .kfd-pill { position: relative; display: block; max-width: 100%; margin: 0; cursor: pointer; } /* pole radio niewidoczne, ale dostepne z klawiatury (strzalki zmieniaja wybor w grupie) */ html body :is(#product .product-container, .quickview) .kfd-pill > input.kfd-pill__input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; } html body :is(#product .product-container, .quickview) .kfd-pill__box { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; padding: 6px 14px; border: 1px solid var(--kfdux-control); border-radius: var(--kfdux-r); background: #fff; color: var(--kfdux-ink); font-size: 15px; font-weight: 500; line-height: 1.25; text-align: left; box-sizing: border-box; transition: border-color .15s ease, background-color .15s ease; } @media (hover: hover) { html body :is(#product .product-container, .quickview) .kfd-pill:hover > .kfd-pill__box { border-color: var(--kfdux-navy); } } html body :is(#product .product-container, .quickview) .kfd-pill > input:checked + .kfd-pill__box { padding: 5px 13px; border: 2px solid var(--kfdux-navy); background: var(--kfdux-blue-tint); color: var(--kfdux-navy); font-weight: 700; } html body :is(#product .product-container, .quickview) .kfd-pill > input:focus-visible + .kfd-pill__box { outline: 2px solid var(--kfdux-blue); outline-offset: 2px; } /* wariant bez stanu: widoczny, ale wyszarzony i podpisany "brak" (nie tylko kolorem) */ html body :is(#product .product-container, .quickview) .kfd-pill--out > .kfd-pill__box { border-style: dashed; background: #f3f4f6; color: var(--kfdux-muted); } html body :is(#product .product-container, .quickview) .kfd-pill__out { margin-left: .3em; /* odstep przed "- brak" (w ukladzie flex spacja na poczatku znika) */ font-size: 13px; font-weight: 400; white-space: nowrap; } /* ------------------------------------------------------------------ 12. Tabele na stronach CMS (telefon) * Strona "Metody i koszty dostawy" (CMS 26) i kazda inna strona CMS z tabela w ramce motywu .table-responsive. * Komputer i tablet (od 576 px) bez zmian - reguly tylko ponizej 576 px (poza obrysem fokusu z klawiatury). * - kazda tabela w ramce .table-responsive: tekst 14 px zamiast 16 px; gdy tabela jest szersza niz ekran, przy krawedzi * ramki, za ktora jest dalsza czesc, widac cien (znika na koncu tabeli; gdy tabela sie miesci - nie ma go wcale); * naglowki wierszy (th scope=row, np. "ponizej 200 zl") zostaja przy lewej krawedzi podczas przesuwania w bok; * - tabela z klasa kfd-tabela-karty (w tresci strony): kazdy wiersz jako osobna karta - nazwa na cala szerokosc, * pod nia "Cena" i "Limity" (podpisy z atrybutu data-label w tresci strony); nic nie trzeba przesuwac w bok; * - akapit .kfd-tabela-podpowiedz (w tresci strony, z klasa motywu hidden-sm-up, wiec widoczny tylko ponizej 576 px * takze bez tego pliku): strzalka i szary tekst "Przesun tabele w bok..." nad tabela, ktora trzeba przesuwac; * od 508 do 575 px ukryty (cennik GLS miesci sie tam w ramce - poprawki 4). * Bez tego pliku (np. po wycofaniu karty produktu) nowa tresc strony wyglada jak dotad: tabele w ramce z przewijaniem. */ /* ramka przewijania dostepna z klawiatury (tabindex w tresci): widoczny obrys tylko przy obsludze klawiatura */ html body .page-cms .table-responsive:focus { outline: none; } html body .page-cms .table-responsive:focus-visible { outline: 2px solid var(--kfdux-blue); outline-offset: 2px; } @media (max-width: 575.98px) { html body .page-cms .table-responsive { margin-bottom: 16px; overscroll-behavior-x: contain; /* cienie przy krawedziach (tlo "scroll") zaslaniane bialym tlem "local", ktore przesuwa sie z tabela - cien widac tylko po tej stronie, po ktorej jest jeszcze niewidoczna czesc tabeli */ background: linear-gradient(to right, #fff 40%, rgba(255, 255, 255, 0)) left center / 32px 100% no-repeat local, linear-gradient(to left, #fff 40%, rgba(255, 255, 255, 0)) right center / 32px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, rgba(1, 22, 56, .3), rgba(1, 22, 56, 0)) left center / 16px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgba(1, 22, 56, .3), rgba(1, 22, 56, 0)) right center / 16px 100% no-repeat scroll, #fff; } html body .page-cms .table-responsive > .table { margin-bottom: 0; font-size: 14px; line-height: 1.35; } /* ramki osobno dla kazdej komorki (przyklejona kolumna przesuwa sie razem ze swoimi ramkami); wyglad jak dotad */ html body .page-cms .table-responsive > .table-bordered { border-collapse: separate; border-spacing: 0; border-width: 1px 0 0 1px; } html body .page-cms .table-responsive > .table-bordered > :is(thead, tbody) > tr > :is(th, td) { border-width: 0 1px 1px 0; } html body .page-cms .table-responsive > .table-bordered > thead > tr > :is(th, td) { border-bottom-width: 2px; } html body .page-cms .table-responsive > .table > :is(thead, tbody) > tr > :is(th, td) { padding: 6px 7px; } /* naglowek wiersza zostaje przy lewej krawedzi; biale tlo zaslania przesuwane komorki, linia oddziela go od cen */ html body .page-cms .table-responsive > .table > tbody > tr > th[scope="row"] { position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: inset -1px 0 0 var(--kfdux-line), 3px 0 4px -3px rgba(1, 22, 56, .25); } /* podpowiedz nad tabela, ktora trzeba przesuwac (tekst w tresci strony) */ html body .page-cms .kfd-tabela-podpowiedz { margin: 0 0 6px; color: var(--kfdux-muted); font-size: 14px; line-height: 1.35; text-align: left; } html body .page-cms .kfd-tabela-podpowiedz::before { content: "\2194\00a0"; content: "\2194\00a0" / ""; color: var(--kfdux-navy); font-weight: 700; } /* tabela jako karty: kazdy wiersz osobno, podpisy "Cena" i "Limity" z data-label */ html body .page-cms .table-responsive > table.kfd-tabela-karty, html body .page-cms table.kfd-tabela-karty > tbody, html body .page-cms table.kfd-tabela-karty > tbody > tr, html body .page-cms table.kfd-tabela-karty > tbody > tr > td { display: block; width: auto; } html body .page-cms .table-responsive > table.kfd-tabela-karty { border: 0; font-size: 15px; line-height: 1.4; } html body .page-cms table.kfd-tabela-karty > thead { display: none; } html body .page-cms table.kfd-tabela-karty > tbody > tr { margin: 0 0 8px; padding: 10px 12px; border: 1px solid var(--kfdux-line); border-radius: var(--kfdux-r-card); background: #fff; } html body .page-cms table.kfd-tabela-karty > tbody > tr:last-child { margin-bottom: 0; } html body .page-cms .table-responsive > table.kfd-tabela-karty > tbody > tr > td { padding: 2px 0; border: 0; } html body .page-cms table.kfd-tabela-karty > tbody > tr > td:first-child { padding-bottom: 6px; } html body .page-cms table.kfd-tabela-karty > tbody > tr > td[data-label] { position: relative; padding-left: 64px; } html body .page-cms table.kfd-tabela-karty > tbody > tr > td[data-label]::before { content: attr(data-label); position: absolute; top: 2px; left: 0; color: var(--kfdux-muted); font-size: 14px; font-weight: 600; line-height: 21px; } } /* poprawki 4 (28.09 wieczorem): od 508 do 575 px cennik GLS (476 px) miesci sie juz w ramce (szerokosc ekranu minus 32 px), wiec podpowiedz "Przesun tabele w bok..." bylaby nieprawdziwa - ukryta. Ponizej 508 px zostaje, od 576 px chowa ja motyw. */ @media (min-width: 508px) and (max-width: 575.98px) { html body .page-cms .kfd-tabela-podpowiedz { display: none; } } /* w naglowku tabeli z naglowkami wierszy takze pierwsza komorka zostaje przy lewej krawedzi (osobno - :has()) */ @media (max-width: 575.98px) { html body .page-cms .table-responsive > .table:has(> tbody > tr > th[scope="row"]) > thead > tr > :first-child { position: sticky; left: 0; z-index: 2; background: #fff; box-shadow: inset -1px 0 0 var(--kfdux-line), 3px 0 4px -3px rgba(1, 22, 56, .25); } }