.elementor-kit-5{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-system-primary:#111827;--e-global-color-system-surface:#FFFFFF;--e-global-color-system-soft:#F3F4F6;--e-global-color-system-text:#1F2937;--e-global-color-system-muted:#6B7280;--e-global-color-system-border:#E5E7EB;--e-global-color-system-accent:#186058;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}} /* Start custom CSS */.elementor-location-header .emprime-desktop-header > .e-con-inner { align-items: center; } .elementor-location-header .emprime-desktop-header .elementor-widget-image, .elementor-location-header .emprime-desktop-header .elementor-widget-heading, .elementor-location-header .emprime-desktop-header .elementor-widget-icon { align-self: center; } .elementor-location-header .emprime-desktop-header .elementor-widget-search-form { width: 100%; align-self: center; } .elementor-location-header .emprime-desktop-header .elementor-icon { font-size: 19px; line-height: 1; } .elementor-search-form__icon .e-font-icon-svg-container { display: none; } .elementor-search-form__icon::before { content: ""; display: inline-block; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("https://emprime24.pl/wp-content/uploads/2026/09/emprime-ikona-szukaj.svg") no-repeat center / contain; mask: url("https://emprime24.pl/wp-content/uploads/2026/09/emprime-ikona-szukaj.svg") no-repeat center / contain; } /* ==== Product Card v1 ==== */ /* ========================================================================== Emprime - Product Card v1 -------------------------------------------------------------------------- Jedna karta produktu dla wszystkich petli WooCommerce: - /sklep/ (archiwum natywne) - /kategoria-produktu/* (archiwum natywne) - wyniki wyszukiwania (?s=...&post_type=product) - produkty powiazane / polecane (widget Elementora "woocommerce-products") Zasady: - kolor akcentu wylacznie #186058 (DEC-012), ikony wylacznie UIcons Thin Rounded (DEC-013); - zero tresci, ktorej nie mamy w danych: bez ocen, opinii, deklaracji dostawy, licznikow i terminow. Karta pokazuje tylko zdjecie, nazwe, cene, dostepnosc ze stanu magazynowego WooCommerce i przycisk zakupu; - czysty CSS, bez JavaScriptu i bez wtyczek; - dziala poprawnie takze wtedy, gdy produkt nie ma zdjecia i WooCommerce wstawia obraz zastepczy (dzis 181 z 182 produktow). Struktura DOM, na ktorej to stoi (natywny szablon WooCommerce 11.1): li.product > a.woocommerce-loop-product__link -> img + h2.woocommerce-loop-product__title + span.price > a.button.add_to_cart_button > a.added_to_cart (dopisywany po dodaniu przez AJAX) Uwaga o specyficznosci: prefiks :is(body.woocommerce, .woocommerce, .elementor-widget-woocommerce-products) laczy wszystkie cztery konteksty i jednoczesnie podnosi specyficznosc o jedna klase ponad reguly petli w site-styles.css, wiec kolejnosc ladowania plikow nie ma znaczenia. Przy scalaniu mozna usunac z site-styles.css bloki: .woocommerce ul.products li.product .woocommerce-loop-product__title .woocommerce ul.products li.product .price .woocommerce ul.products li.product .button .single-product .site-main ul.products (oraz jego wariant mobilny) bo ten plik je zastepuje. ========================================================================== */ :root { --emprime-accent: #186058; --emprime-accent-dark: #124a44; --emprime-accent-soft: rgba(24, 96, 88, 0.08); --emprime-ink: #202b3b; --emprime-muted: #5d6b74; --emprime-line: #e2e8e6; --emprime-surface: #f4f7f6; --emprime-card-radius: 10px; --emprime-card-gap: 20px; --emprime-card-pad: 12px; --emprime-title-lines: 3; --emprime-title-size: 14px; --emprime-title-lh: 1.35; } /* -------------------------------------------------------------------------- 1. Siatka Kolumny ustawiamy tylko dla petli natywnych. Petle renderowane widgetem Elementora maja klase .elementor-grid i wlasne ustawienia kolumn w widgecie (4 / tablet 2 / mobile 1) - tego nie nadpisujemy, zeby ustawienie w edytorze nie klamalo. -------------------------------------------------------------------------- */ :is(body.woocommerce, .woocommerce, .elementor-widget-woocommerce-products) ul.products { margin: 0 0 32px !important; padding: 0 !important; list-style: none !important; } :is(body.woocommerce, .woocommerce, .elementor-widget-woocommerce-products) ul.products:not(.elementor-grid) { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: var(--emprime-card-gap); } /* Clearfix WooCommerce tworzylby puste komorki siatki. */ :is(body.woocommerce, .woocommerce, .elementor-widget-woocommerce-products) ul.products::before, :is(body.woocommerce, .woocommerce, .elementor-widget-woocommerce-products) ul.products::after { content: none !important; display: none !important; } /* -------------------------------------------------------------------------- 2. Karta -------------------------------------------------------------------------- */ :is(body.woocommerce, .woocommerce, .elementor-widget-woocommerce-products) ul.products li.product { /* Elementor ustawia na pozycji petli flex-direction: var(--button-align-direction). Gdy w widgecie nie wlaczono "wyrownaj przycisk do dolu", zmienna jest pusta, wartosc jest niepoprawna i karta wraca do ukladu w wierszu: zdjecie i tresc walcza o miejsce z przyciskiem. Dlatego ustawiamy i zmienne, i sam kierunek. */ --button-align-display: flex; --button-align-direction: column; position: relative; display: flex !important; flex-direction: column !important; float: none !important; clear: none !important; width: auto !important; min-width: 0; margin: 0 !important; padding: var(--emprime-card-pad) !important; background: #fff; border: 1px solid var(--emprime-line); border-radius: var(--emprime-card-radius); text-align: left !important; transition: border-color 0.15s ease, box-shadow 0.15s ease; } :is(body.woocommerce, .woocommerce, .elementor-widget-woocommerce-products) ul.products li.product:hover { border-color: #c6d5d1; box-shadow: 0 6px 18px rgba(24, 96, 88, 0.1); } /* Link opakowujacy zdjecie, nazwe i cene. Rosnie do pelnej wysokosci karty, dzieki czemu przycisk zawsze konczy karte na tej samej wysokosci. */ :is(body.woocommerce, .woocommerce, .elementor-widget-woocommerce-products) ul.products li.product > a.woocommerce-loop-product__link { order: 1; display: flex !important; flex: 1 1 auto; flex-direction: column; gap: 10px; min-width: 0; color: inherit !important; text-decoration: none !important; } /* -------------------------------------------------------------------------- 3. Boks zdjecia - zawsze kwadrat, niezaleznie od proporcji pliku -------------------------------------------------------------------------- */ :is(body.woocommerce, .woocommerce, .elementor-widget-woocommerce-products) ul.products li.product img { display: block; box-sizing: border-box; width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; margin: 0 !important; padding: 8px; border-radius: 8px; background: #fff; object-fit: contain; } /* Obraz zastepczy WooCommerce: zmniejszony i wyciszony na spokojnym tle, zeby pusty katalog nie wygladal jak blad renderowania. */ :is(body.woocommerce, .woocommerce, .elementor-widget-woocommerce-products) ul.products li.product img.woocommerce-placeholder { padding: 26% !important; background: var(--emprime-surface); opacity: 0.55; } /* Odznaka promocji - jedyna odznaka na karcie, generowana przez WooCommerce wylacznie przy realnej cenie promocyjnej. */ :is(body.woocommerce, .woocommerce, .elementor-widget-woocommerce-products) ul.products li.product .onsale { position: absolute; top: calc(var(--emprime-card-pad) + 8px); left: calc(var(--emprime-card-pad) + 8px); /* WooCommerce ustawia tu right: 0. Bez wyzerowania odznaka ma jednoczesnie lewa i prawa krawedz, wiec rozciaga sie na cala szerokosc karty. */ right: auto !important; bottom: auto !important; z-index: 2; min-width: 0; min-height: 0; margin: 0 !important; padding: 4px 10px !important; border-radius: 999px; background: var(--emprime-accent) !important; color: #fff !important; font-size: 11px !important; font-weight: 700 !important; line-height: 1.4 !important; } /* -------------------------------------------------------------------------- 4. Nazwa - stala liczba linii, wiec karty nie rozjezdzaja sie w pionie Przyciecie jest wylacznie wizualne: pelna nazwa zostaje w HTML, wiec wyszukiwarki i roboty AI nadal ja widza. -------------------------------------------------------------------------- */ :is(body.woocommerce, .woocommerce, .elementor-widget-woocommerce-products) ul.products li.product .woocommerce-loop-product__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--emprime-title-lines); line-clamp: var(--emprime-title-lines); overflow: hidden; min-height: calc(var(--emprime-title-lines) * var(--emprime-title-lh) * 1em); margin: 0 !important; padding: 0 !important; color: var(--emprime-ink) !important; font-size: var(--emprime-title-size) !important; font-weight: 600 !important; line-height: var(--emprime-title-lh) !important; overflow-wrap: anywhere; } :is(body.woocommerce, .woocommerce, .elementor-widget-woocommerce-products) ul.products li.product:hover .woocommerce-loop-product__title { color: var(--emprime-accent) !important; } /* -------------------------------------------------------------------------- 5. Cena - dociagnieta do dolu bloku z trescia, wiec zawsze na tej samej wysokosci we wszystkich kartach w rzedzie -------------------------------------------------------------------------- */ :is(body.woocommerce, .woocommerce, .elementor-widget-woocommerce-products) ul.products li.product .price { margin: auto 0 0 !important; padding: 0 !important; color: var(--emprime-accent) !important; font-size: 20px !important; font-weight: 700 !important; line-height: 1.25 !important; } :is(body.woocommerce, .woocommerce, .elementor-widget-woocommerce-products) ul.products li.product .price del { margin-right: 6px; color: var(--emprime-muted) !important; font-size: 14px !important; font-weight: 400 !important; opacity: 1 !important; } :is(body.woocommerce, .woocommerce, .elementor-widget-woocommerce-products) ul.products li.product .price ins { background: none !important; text-decoration: none !important; } /* -------------------------------------------------------------------------- 6. Dostepnosc Tresc bierze sie z klasy, ktora WooCommerce nadaje pozycji petli na podstawie realnego stanu magazynowego (instock / outofstock). Nie ma tu zadnej deklaracji terminu wysylki ani liczby sztuk - tego nie wiemy na poziomie listingu. Docelowo ten komunikat powinien wychodzic z PHP (hook woocommerce_after_shop_loop_item), zeby byl realnym tekstem w HTML. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 7. Przycisk zakupu - ostatni element karty, zawsze pelna szerokosc, zawsze na tej samej wysokosci -------------------------------------------------------------------------- */ :is(body.woocommerce, .woocommerce, .elementor-widget-woocommerce-products) ul.products li.product .button { order: 3; position: relative; box-sizing: border-box; display: flex !important; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; margin: 10px 0 0 !important; padding: 10px 12px !important; border: 1px solid var(--emprime-accent) !important; border-radius: 8px !important; background: var(--emprime-accent) !important; color: #fff !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.2 !important; text-align: center; text-decoration: none !important; text-transform: none !important; transition: background-color 0.15s ease; } :is(body.woocommerce, .woocommerce, .elementor-widget-woocommerce-products) ul.products li.product .button:hover { background: var(--emprime-accent-dark) !important; border-color: var(--emprime-accent-dark) !important; } /* Produkt niedostepny: ten sam ksztalt i ta sama wysokosc, inna waga wizualna. */ :is(body.woocommerce, .woocommerce, .elementor-widget-woocommerce-products) ul.products li.product.outofstock .button { background: #fff !important; color: var(--emprime-accent) !important; } :is(body.woocommerce, .woocommerce, .elementor-widget-woocommerce-products) ul.products li.product.outofstock .button:hover { background: var(--emprime-accent-soft) !important; border-color: var(--emprime-accent) !important; } /* Link "Zobacz koszyk" dopisywany przez AJAX WooCommerce. Bez tego karta rosla po dodaniu produktu i rzad sie rozjezdzal. */ :is(body.woocommerce, .woocommerce, .elementor-widget-woocommerce-products) ul.products li.product a.added_to_cart { order: 4; display: block; width: 100%; margin: 8px 0 0 !important; padding: 0 !important; color: var(--emprime-accent) !important; font-size: 13px !important; font-weight: 600 !important; text-align: center; text-decoration: underline; } /* -------------------------------------------------------------------------- 8. Dostepnosc klawiaturowa -------------------------------------------------------------------------- */ :is(body.woocommerce, .woocommerce, .elementor-widget-woocommerce-products) ul.products li.product a:focus-visible { outline: 2px solid var(--emprime-accent); outline-offset: 2px; border-radius: 6px; } /* -------------------------------------------------------------------------- 9. Responsywnosc (petle natywne; petle Elementora steruja kolumnami ustawieniami widgetu) -------------------------------------------------------------------------- */ @media (max-width: 1200px) { :is(body.woocommerce, .woocommerce, .elementor-widget-woocommerce-products) ul.products:not(.elementor-grid) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } /* Tablet w pionie (768 px) i wszystko wezsze: 2 kolumny. */ @media (max-width: 900px) { :is(body.woocommerce, .woocommerce, .elementor-widget-woocommerce-products) ul.products:not(.elementor-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px; } } /* Zgodnosc: szablon single-product-v1.json ma w "custom_css" kontenera regule ul.products { grid-template-columns: repeat(4, minmax(0,1fr)) } bez wariantu tabletowego. Ma ona wyzsza specyficznosc niz responsywne klasy widgetu, wiec miedzy 768 a 1024 px produkty powiazane laduja w czterech kolumnach po 165 px i przycisk wychodzi poza ekran. Do czasu usuniecia tamtego CSS z szablonu trzymamy tu 2 kolumny. Przy okazji ujednolica to mobile: petle Elementora maja wtedy 2 kolumny tak samo jak petle natywne. Po usunieciu tamtego CSS i ustawieniu w widgecie kolumn 4 / 2 / 2 ten blok mozna skasowac. */ @media (max-width: 1024px) { :is(body.woocommerce, .woocommerce, .elementor-widget-woocommerce-products) ul.products.elementor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 600px) { :root { --emprime-card-gap: 12px; --emprime-card-pad: 10px; --emprime-title-size: 13px; } :is(body.woocommerce, .woocommerce, .elementor-widget-woocommerce-products) ul.products:not(.elementor-grid) { gap: var(--emprime-card-gap); } :is(body.woocommerce, .woocommerce, .elementor-widget-woocommerce-products) ul.products li.product .price { font-size: 18px !important; } :is(body.woocommerce, .woocommerce, .elementor-widget-woocommerce-products) ul.products li.product .button { min-height: 42px; padding: 9px 8px !important; font-size: 13px !important; } } /* -------------------------------------------------------------------------- 10. Ikona koszyka w przycisku (DEC-013, UIcons Thin Rounded) Wymaga wgrania pliku fi-tr-shopping-cart-add.svg do biblioteki mediow jako emprime-ikona-koszyk-dodaj.svg. Dopoki pliku nie ma, maska jest pusta i ikona po prostu sie nie renderuje - przycisk dziala i wyglada poprawnie. -------------------------------------------------------------------------- */ :is(body.woocommerce, .woocommerce, .elementor-widget-woocommerce-products) ul.products li.product .button.add_to_cart_button::before { content: ""; flex: 0 0 auto; width: 18px; height: 18px; background-color: currentColor; -webkit-mask: url("https://emprime24.pl/wp-content/uploads/2026/09/emprime-ikona-koszyk-dodaj.svg") no-repeat center / contain; mask: url("https://emprime24.pl/wp-content/uploads/2026/09/emprime-ikona-koszyk-dodaj.svg") no-repeat center / contain; } /* ==== Widok produktu ==== */ /* ========================================================================== Emprime24 - widok pojedynczego produktu (single product) v1 -------------------------------------------------------------------------- Zakres: wylacznie strona produktu (body.single-product) Renderuje: szablon Elementora "Produkt v1" ID 227 (widgety WooCommerce), a NIE domyslny szablon WooCommerce z motywu Hello Biz. Dlatego wszystkie selektory ida po klasach widgetow Elementora (.elementor-widget-woocommerce-*) i po ID kontenerow sp0000xx. Kolory: jeden akcent #186058 (DEC-012). Reszta to neutralna szarosc. Ikony: Flaticon UIcons Thin Rounded (DEC-013), wbudowane jako data: URI w zmiennych --emp-ico-* ponizej. Zero zaleznosci od plikow wgranych do WordPressa, zero ryzyka 404. Jesli wolisz wersje z biblioteki mediow, podmien same zmienne (patrz komentarz). Tresc: plik nie dodaje ZADNEJ tresci - ani ikonami, ani content:"". Wszystkie napisy pochodza z WooCommerce. !important: post-227.css (custom CSS zapisany w szablonie) laduje sie jako OSTATNI arkusz na stronie, wiec kolizyjne wlasciwosci (kolor ceny, tlo przycisku, siatka produktow) wymagaja !important. Uzyte tylko tam, gdzie faktycznie sa konieczne. ========================================================================== */ body.single-product { /* --- paleta ---------------------------------------------------------- */ --emp-accent: #186058; --emp-accent-dark: #124a44; --emp-accent-soft: rgba(24, 96, 88, 0.09); --emp-accent-ring: rgba(24, 96, 88, 0.22); --emp-ink: #1b2a2e; --emp-ink-soft: #5b6b70; --emp-line: #e2e8ea; --emp-line-strong: #cfdad9; --emp-surface: #ffffff; --emp-surface-soft: #f4f7f6; --emp-radius: 12px; --emp-radius-sm: 8px; --emp-shadow: 0 6px 18px rgba(16, 32, 36, 0.07); /* --- ikony (UIcons Thin Rounded, wbudowane) -------------------------- Zamiana na pliki z biblioteki mediow WordPressa - podmien wartosc na: url("https://emprime24.pl/wp-content/uploads/2026/09/emprime-ikona-.svg") --------------------------------------------------------------------- */ /* fi-tr-check-circle */ --emp-ico-instock: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22m18.756,8.048c.193.197.191.514-.006.708l-5.325,5.244c-.686.671-1.568,1.007-2.45,1.007-.873,0-1.747-.329-2.43-.988l-2.296-2.264c-.196-.194-.198-.51-.005-.707.196-.197.512-.199.708-.005l2.292,2.26c.974.941,2.505.937,3.48-.018l5.324-5.243c.195-.193.513-.191.707.005Zm5.244,3.952c0,6.617-5.383,12-12,12S0,18.617,0,12,5.383,0,12,0s12,5.383,12,12Zm-1,0c0-6.065-4.935-11-11-11S1,5.935,1,12s4.935,11,11,11,11-4.935,11-11Z%22/%3E%3C/svg%3E"); /* fi-tr-circle-xmark */ --emp-ico-outofstock: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22m15.854,8.854l-3.146,3.146,3.146,3.146c.195.195.195.512,0,.707-.098.098-.226.146-.354.146s-.256-.049-.354-.146l-3.146-3.146-3.146,3.146c-.098.098-.226.146-.354.146s-.256-.049-.354-.146c-.195-.195-.195-.512,0-.707l3.146-3.146-3.146-3.146c-.195-.195-.195-.512,0-.707s.512-.195.707,0l3.146,3.146,3.146-3.146c.195-.195.512-.195.707,0s.195.512,0,.707Zm8.146,3.146c0,6.617-5.383,12-12,12S0,18.617,0,12,5.383,0,12,0s12,5.383,12,12Zm-1,0c0-6.065-4.935-11-11-11S1,5.935,1,12s4.935,11,11,11,11-4.935,11-11Z%22/%3E%3C/svg%3E"); /* fi-tr-shopping-cart-add */ --emp-ico-cart: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22m24,4.5c0,.276-.224.5-.5.5h-3.5v3.5c0,.276-.224.5-.5.5s-.5-.224-.5-.5v-3.5h-3.5c-.276,0-.5-.224-.5-.5s.224-.5.5-.5h3.5V.5c0-.276.224-.5.5-.5s.5.224.5.5v3.5h3.5c.276,0,.5.224.5.5Zm-.563,2.51c-.266-.056-.533.121-.588.392l-.757,3.785c-.326,1.63-1.77,2.813-3.432,2.813H5.879l-1.25-9h7.871c.276,0,.5-.224.5-.5s-.224-.5-.5-.5H4.49l-.256-1.843c-.17-1.229-1.234-2.157-2.476-2.157H.5C.224,0,0,.224,0,.5s.224.5.5.5h1.259c.745,0,1.383.556,1.485,1.294l1.781,12.825c.308,2.212,2.225,3.881,4.457,3.881h10.018c.276,0,.5-.224.5-.5s-.224-.5-.5-.5h-10.018c-1.73,0-3.214-1.289-3.462-3h12.64c2.138,0,3.993-1.521,4.412-3.617l.757-3.785c.055-.271-.121-.534-.393-.588Zm-14.437,14.99c0,1.103-.897,2-2,2s-2-.897-2-2,.897-2,2-2,2,.897,2,2Zm-1,0c0-.551-.448-1-1-1s-1,.449-1,1,.448,1,1,1,1-.449,1-1Zm11,0c0,1.103-.897,2-2,2s-2-.897-2-2,.897-2,2-2,2,.897,2,2Zm-1,0c0-.551-.448-1-1-1s-1,.449-1,1,.448,1,1,1,1-.449,1-1Z%22/%3E%3C/svg%3E"); /* fi-tr-zoom-in */ --emp-ico-zoom: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M14,10c0,.276-.224,.5-.5,.5h-3v3c0,.276-.224,.5-.5,.5s-.5-.224-.5-.5v-3h-3c-.276,0-.5-.224-.5-.5s.224-.5,.5-.5h3v-3c0-.276,.224-.5,.5-.5s.5,.224,.5,.5v3h3c.276,0,.5,.224,.5,.5Zm9.854,13.854c-.098,.098-.226,.146-.354,.146s-.256-.049-.354-.146l-6.449-6.449c-1.775,1.607-4.12,2.596-6.697,2.596C4.486,20,0,15.514,0,10S4.486,0,10,0s10,4.486,10,10c0,2.577-.989,4.922-2.596,6.697l6.449,6.449c.195,.195,.195,.512,0,.707Zm-4.854-13.854C19,5.038,14.963,1,10,1S1,5.038,1,10s4.037,9,9,9,9-4.038,9-9Z%22/%3E%3C/svg%3E"); /* fi-tr-comment-dots */ --emp-ico-review: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22m13,12c0,.552-.448,1-1,1s-1-.448-1-1,.448-1,1-1,1,.448,1,1Zm4-1c-.552,0-1,.448-1,1s.448,1,1,1,1-.448,1-1-.448-1-1-1Zm-10,0c-.552,0-1,.448-1,1s.448,1,1,1,1-.448,1-1-.448-1-1-1Zm17,1.355v6.963c0,2.582-2.1,4.682-4.682,4.682h-6.186C6.103,24,.47,19.208.029,12.855c-.241-3.477,1.027-6.878,3.479-9.334C5.96,1.065,9.36-.204,12.837.028c6.26.425,11.163,5.84,11.163,12.327Zm-1,0c0-5.963-4.494-10.939-10.23-11.329-.251-.017-.503-.026-.753-.026-2.922,0-5.729,1.154-7.8,3.227C1.968,6.479.806,9.598,1.027,12.786c.41,5.918,5.501,10.214,12.105,10.214h6.186c2.03,0,3.682-1.651,3.682-3.682v-6.963Z%22/%3E%3C/svg%3E"); } /* ========================================================================== 1. Ogolne: brak przepelnienia poziomego ========================================================================== */ body.single-product .elementor-location-single img { max-width: 100%; } body.single-product .elementor-location-single .product_title, body.single-product .elementor-location-single .woocommerce-loop-product__title, body.single-product .elementor-location-single .product_meta { overflow-wrap: break-word; } /* jQuery zoom podklada nad zdjeciem kopie w pelnej rozdzielczosci (1259 px szerokosci). Na mobile wystaje poza ekran, a przy zdjeciu dopasowanym przez object-fit i tak trafia w zle miejsce. Powiekszenie zostaje dostepne przez lupe -> lightbox PhotoSwipe. */ body.single-product .woocommerce-product-gallery .zoomImg { display: none !important; } /* ========================================================================== 2. Okruszki (breadcrumb) ========================================================================== */ body.single-product .elementor-widget-woocommerce-breadcrumb .woocommerce-breadcrumb { margin: 0; color: var(--emp-ink-soft); font-size: 13px; line-height: 1.55; } body.single-product .elementor-widget-woocommerce-breadcrumb .woocommerce-breadcrumb a { color: var(--emp-ink-soft); text-decoration: none; } body.single-product .elementor-widget-woocommerce-breadcrumb .woocommerce-breadcrumb a:hover, body.single-product .elementor-widget-woocommerce-breadcrumb .woocommerce-breadcrumb a:focus-visible { color: var(--emp-accent); text-decoration: underline; } /* ========================================================================== 3. Uklad glownego wiersza: galeria + panel zakupu ========================================================================== */ /* Kolumny nie rozciagaja sie na wysokosc najwyzszej - dzieki temu karta zakupu ma wysokosc swojej tresci, a nie 800 px pustego tla. */ body.single-product .elementor-227 .elementor-element-sp000003 { align-items: flex-start !important; } /* Karta galerii */ body.single-product .elementor-227 .elementor-element-sp000004 { --padding-top: 16px; --padding-bottom: 16px; --padding-left: 16px; --padding-right: 16px; background-color: var(--emp-surface) !important; border: 1px solid var(--emp-line); border-radius: var(--emp-radius); } /* Karta zakupu (buy box) */ body.single-product .elementor-227 .elementor-element-sp000006 { --padding-top: 24px; --padding-bottom: 24px; --padding-left: 24px; --padding-right: 24px; --gap: 16px 16px; --row-gap: 16px; --column-gap: 16px; background-color: var(--emp-surface); border: 1px solid var(--emp-line); border-radius: var(--emp-radius); } @media (min-width: 1025px) { /* Panel zakupu jedzie z uzytkownikiem przy dlugiej stronie produktu. */ body.single-product .elementor-227 .elementor-element-sp000006 { position: sticky; top: 24px; } } /* ========================================================================== 4. Galeria zdjec ========================================================================== */ /* WooCommerce dokleja galerii (div.images) 2em marginesu na dole - w karcie z wlasnym paddingiem robi to 32 px pustego pasa pod zdjeciem. */ body.single-product .woocommerce-product-gallery, body.single-product.woocommerce div.product div.images { position: relative; margin: 0; } /* Zabezpieczenie: WooCommerce ustawia inline opacity:0 i podnosi ja dopiero skryptem. Gdy skrypt nie wystartuje, klient widzi pustke w miejscu zdjecia. Animacja ma wyzszy priorytet niz styl inline, wiec po 2,5 s zdjecie pojawi sie tak czy inaczej. */ @keyframes emp-gallery-failsafe { to { opacity: 1; } } body.single-product .woocommerce-product-gallery { animation: emp-gallery-failsafe 0.01s linear 2.5s forwards; } body.single-product .woocommerce-product-gallery__wrapper, body.single-product .woocommerce-product-gallery__image { margin: 0; } /* Jednakowy, kwadratowy kadr dla kazdego produktu - niezaleznie od tego, czy zdjecie jest pionowe, poziome, czy w ogole go nie ma. */ body.single-product .woocommerce-product-gallery img { display: block; width: 100%; max-width: 520px; height: auto; margin-inline: auto; aspect-ratio: 1 / 1; object-fit: contain; padding: 12px; background: var(--emp-surface); border-radius: var(--emp-radius-sm); } /* Produkt bez wlasnego zdjecia: symbol zastepczy WooCommerce wycisza sie i zmniejsza, zeby nie udawal fotografii produktu. */ body.single-product .woocommerce-product-gallery img.woocommerce-placeholder { padding: 22%; background: var(--emp-surface-soft); opacity: 0.35; } /* Miniatury przy produkcie z wieloma zdjeciami */ body.single-product .woocommerce-product-gallery .flex-control-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; } body.single-product .woocommerce-product-gallery .flex-control-thumbs li { width: 72px; margin: 0; list-style: none; } body.single-product .woocommerce-product-gallery .flex-control-thumbs img { padding: 6px; border: 1px solid var(--emp-line); border-radius: var(--emp-radius-sm); cursor: pointer; opacity: 0.7; transition: opacity 0.18s ease, border-color 0.18s ease; } body.single-product .woocommerce-product-gallery .flex-control-thumbs img:hover, body.single-product .woocommerce-product-gallery .flex-control-thumbs img.flex-active { border-color: var(--emp-accent); opacity: 1; } /* Lupa - domyslnie WooCommerce wstawia tu emoji 🔍. Zastapione ikona z UIcons w bialym kolku. */ body.single-product .woocommerce-product-gallery__trigger { position: absolute; top: 12px; right: 12px; left: auto; z-index: 3; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin: 0; padding: 0; border: 1px solid var(--emp-line); border-radius: 50%; background: var(--emp-surface); box-shadow: 0 1px 3px rgba(16, 32, 36, 0.1); color: var(--emp-ink); font-size: 0; line-height: 0; text-decoration: none; transition: border-color 0.18s ease, color 0.18s ease; } body.single-product .woocommerce-product-gallery__trigger:hover, body.single-product .woocommerce-product-gallery__trigger:focus-visible { border-color: var(--emp-accent); color: var(--emp-accent); } body.single-product .woocommerce-product-gallery__trigger > span { display: none; } body.single-product .woocommerce-product-gallery__trigger::after { content: ""; width: 22px; height: 22px; background-color: currentColor; -webkit-mask: var(--emp-ico-zoom) no-repeat center / contain; mask: var(--emp-ico-zoom) no-repeat center / contain; } /* ========================================================================== 5. Panel zakupu: tytul, cena, dostepnosc ========================================================================== */ body.single-product .elementor-227 .elementor-widget-woocommerce-product-title h1.product_title { margin: 0 !important; color: var(--emp-ink) !important; font-size: clamp(23px, 2.1vw, 30px) !important; line-height: 1.25 !important; letter-spacing: -0.01em; } body.single-product .elementor-227 .elementor-widget-woocommerce-product-price .price { display: block; margin: 0 !important; color: var(--emp-accent) !important; font-size: clamp(26px, 2.3vw, 32px) !important; font-weight: 800 !important; line-height: 1.15; } body.single-product .elementor-227 .elementor-widget-woocommerce-product-price .price del { margin-right: 10px; color: var(--emp-ink-soft) !important; font-size: 0.6em; font-weight: 600; opacity: 1; } body.single-product .elementor-227 .elementor-widget-woocommerce-product-price .price del .amount { color: var(--emp-ink-soft) !important; font-size: inherit; } body.single-product .elementor-227 .elementor-widget-woocommerce-product-price .price ins, body.single-product .elementor-227 .elementor-widget-woocommerce-product-price .price ins .amount { color: var(--emp-accent) !important; text-decoration: none; } /* Widget "Product Add To Cart" drukuje wlasny status magazynowy, przez co "203 w magazynie" pojawia sie na stronie dwa razy. Zostaje ten z widgetu "Product Stock" (sp000008a), bo stoi we wlasciwym miejscu, nad koszykiem. */ body.single-product .elementor-widget-woocommerce-product-add-to-cart .elementor-add-to-cart > p.stock { display: none !important; } body.single-product .elementor-widget-woocommerce-product-stock p.stock { display: inline-flex; align-items: center; gap: 8px; width: auto; margin: 0; padding: 7px 14px 7px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; line-height: 1.35; } body.single-product .elementor-widget-woocommerce-product-stock p.stock::before { content: ""; flex: 0 0 auto; width: 17px; height: 17px; background-color: currentColor; -webkit-mask: var(--emp-ico-instock) no-repeat center / contain; mask: var(--emp-ico-instock) no-repeat center / contain; } body.single-product .elementor-widget-woocommerce-product-stock p.stock.in-stock { background: var(--emp-accent-soft); color: var(--emp-accent) !important; } body.single-product .elementor-widget-woocommerce-product-stock p.stock.out-of-stock, body.single-product .elementor-widget-woocommerce-product-stock p.stock.available-on-backorder { background: var(--emp-surface-soft); color: var(--emp-ink-soft) !important; } body.single-product .elementor-widget-woocommerce-product-stock p.stock.out-of-stock::before { -webkit-mask: var(--emp-ico-outofstock) no-repeat center / contain; mask: var(--emp-ico-outofstock) no-repeat center / contain; } /* Krotki opis - widget renderuje sie tylko wtedy, gdy produkt go ma, wiec przy pustym opisie nie zostaje po nim zadna dziura. */ body.single-product .elementor-widget-woocommerce-product-short-description { color: var(--emp-ink-soft); font-size: 15px; line-height: 1.65; } body.single-product .elementor-widget-woocommerce-product-short-description p:last-child { margin-bottom: 0; } /* ========================================================================== 6. Formularz koszyka ========================================================================== */ body.single-product .elementor-227 .elementor-widget-woocommerce-product-add-to-cart form.cart { display: flex !important; /* Elementor Pro wymusza na tym formularzu flex-wrap: nowrap regula o specyficznosci (0,6,2). Bez !important przycisk nie moze zejsc do wlasnego wiersza i sciska sie ponizej szerokosci wlasnego napisu. */ flex-wrap: wrap !important; align-items: stretch; gap: 12px; margin: 0 !important; } body.single-product .elementor-227 .elementor-widget-woocommerce-product-add-to-cart form.cart .quantity { margin: 0 !important; float: none; } body.single-product .elementor-227 .elementor-widget-woocommerce-product-add-to-cart .quantity .qty { width: 92px; min-width: 92px; /* post-227.css ustawia tu min-height: 52px selektorem (0,6,0). */ min-height: 56px !important; padding: 0 10px; border: 1px solid var(--emp-line-strong) !important; border-radius: var(--emp-radius-sm) !important; background: var(--emp-surface); color: var(--emp-ink); font-size: 16px; font-weight: 600; text-align: center; } body.single-product .elementor-227 .elementor-widget-woocommerce-product-add-to-cart .quantity .qty:focus { border-color: var(--emp-accent) !important; outline: 3px solid var(--emp-accent-ring); outline-offset: 0; } body.single-product .elementor-227 .elementor-widget-woocommerce-product-add-to-cart .single_add_to_cart_button { display: inline-flex !important; /* post-227.css ma dla tego przycisku regule o specyficznosci (0,5,0), wiec bez !important flex-basis z szablonu wygrywa. */ flex: 1 1 220px !important; min-width: 0; align-items: center; justify-content: center; gap: 10px; min-height: 56px !important; padding: 0 26px !important; border: 0 !important; border-radius: var(--emp-radius-sm) !important; background-color: var(--emp-accent) !important; color: #ffffff !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.2; text-align: center; cursor: pointer; transition: background-color 0.18s ease, transform 0.12s ease; } body.single-product .elementor-227 .elementor-widget-woocommerce-product-add-to-cart .single_add_to_cart_button::before { content: ""; flex: 0 0 auto; width: 20px; height: 20px; background-color: currentColor; -webkit-mask: var(--emp-ico-cart) no-repeat center / contain; mask: var(--emp-ico-cart) no-repeat center / contain; } body.single-product .elementor-227 .elementor-widget-woocommerce-product-add-to-cart .single_add_to_cart_button:hover { background-color: var(--emp-accent-dark) !important; } body.single-product .elementor-227 .elementor-widget-woocommerce-product-add-to-cart .single_add_to_cart_button:active { transform: translateY(1px); } body.single-product .elementor-227 .elementor-widget-woocommerce-product-add-to-cart .single_add_to_cart_button:focus-visible { outline: 3px solid var(--emp-accent-ring); outline-offset: 3px; } body.single-product .elementor-227 .elementor-widget-woocommerce-product-add-to-cart .single_add_to_cart_button.disabled, body.single-product .elementor-227 .elementor-widget-woocommerce-product-add-to-cart .single_add_to_cart_button:disabled { opacity: 0.45; cursor: not-allowed; } /* Komunikat WooCommerce po dodaniu do koszyka */ body.single-product .woocommerce-notices-wrapper .woocommerce-message, body.single-product .woocommerce-notices-wrapper .woocommerce-info, body.single-product .woocommerce-notices-wrapper .woocommerce-error { /* Gorny odstep jest potrzebny, bo komunikat wypada tuz pod paskiem wysylki i bez niego przykleja sie do jego zielonej krawedzi. */ margin: 20px auto 12px; max-width: 1240px; padding: 14px 20px; border: 1px solid var(--emp-line); border-left: 4px solid var(--emp-accent); border-radius: var(--emp-radius-sm); background: var(--emp-surface-soft); color: var(--emp-ink); font-size: 15px; list-style: none; } body.single-product .woocommerce-notices-wrapper .woocommerce-message::before, body.single-product .woocommerce-notices-wrapper .woocommerce-info::before, body.single-product .woocommerce-notices-wrapper .woocommerce-error::before { display: none; } body.single-product .woocommerce-notices-wrapper .button { border-radius: var(--emp-radius-sm); background: var(--emp-accent); color: #ffffff; } /* ========================================================================== 7. Metadane produktu (SKU, kategoria) ========================================================================== */ body.single-product .elementor-227 .elementor-widget-woocommerce-product-meta { margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--emp-line); } /* Widok "inline" Elementora sklejal wartosci w jeden ciag: "SKU 5907377532804Kategoria Witaminy i suplementy". Zamiana na czytelna liste etykieta / wartosc. */ body.single-product .elementor-widget-woocommerce-product-meta .product_meta { display: flex; flex-direction: column; gap: 9px; margin: 0; color: var(--emp-ink); font-size: 14px; line-height: 1.5; } body.single-product .elementor-widget-woocommerce-product-meta .product_meta .detail-container { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 0; } body.single-product .elementor-widget-woocommerce-product-meta .product_meta .detail-label { flex: 0 0 auto; min-width: 92px; color: var(--emp-ink-soft); font-weight: 500 !important; } /* Elementor rysuje pionowa kreske separatora miedzy pozycjami - w ukladzie pionowym jest zbedna. */ body.single-product .elementor-woo-meta--view-inline .product_meta .detail-container::after, body.single-product .elementor-widget-woocommerce-product-meta .product_meta .detail-container:not(:last-child)::after { content: none !important; display: none !important; border: 0 !important; } body.single-product .elementor-widget-woocommerce-product-meta .product_meta .sku { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } body.single-product .elementor-widget-woocommerce-product-meta .product_meta a { color: var(--emp-accent); text-decoration: none; } body.single-product .elementor-widget-woocommerce-product-meta .product_meta a:hover, body.single-product .elementor-widget-woocommerce-product-meta .product_meta a:focus-visible { text-decoration: underline; } /* ========================================================================== 8. Zakladki (opis / opinie) ========================================================================== */ body.single-product .elementor-227 .elementor-widget-woocommerce-product-data-tabs { padding-top: 0 !important; border-top: 0 !important; } body.single-product.woocommerce div.product .woocommerce-tabs { margin: 0; padding: 0; } body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; border: 0; list-style: none; } body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs::before, body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs::after, body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li::before, body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none !important; display: none !important; border: 0 !important; } body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li { margin: 0; padding: 0; border: 0; border-radius: 999px; background: transparent; box-shadow: none; } body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li a { display: block; padding: 10px 18px; border-radius: 999px; background: var(--emp-surface-soft); color: var(--emp-ink-soft); font-size: 15px; font-weight: 600; line-height: 1.3; text-decoration: none; transition: background-color 0.18s ease, color 0.18s ease; } body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--emp-accent); } body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { background: var(--emp-accent); color: #ffffff; } /* Produkty Emprime najczesciej nie maja opisu, wiec zostaje jedna zakladka "Opinie". Pojedyncza zakladka niczego nie przelacza, wiec pasek znika, a panel zostaje jako zwykla sekcja. */ body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs:not(:has(li + li)) { display: none; } body.single-product.woocommerce div.product .woocommerce-tabs .panel { margin: 0; padding: 24px; border: 1px solid var(--emp-line); border-radius: var(--emp-radius); background: var(--emp-surface); box-shadow: none; } body.single-product.woocommerce div.product .woocommerce-tabs .panel > h2:first-child, body.single-product .woocommerce-Reviews-title { margin: 0 0 14px; color: var(--emp-ink); font-size: 20px; line-height: 1.3; } body.single-product .woocommerce-Reviews .woocommerce-noreviews { display: flex; align-items: center; gap: 12px; margin: 0; padding: 18px 20px; border-radius: var(--emp-radius-sm); background: var(--emp-surface-soft); color: var(--emp-ink-soft); font-size: 15px; } body.single-product .woocommerce-Reviews .woocommerce-noreviews::before { content: ""; flex: 0 0 auto; width: 22px; height: 22px; background-color: var(--emp-ink-soft); opacity: 0.7; -webkit-mask: var(--emp-ico-review) no-repeat center / contain; mask: var(--emp-ico-review) no-repeat center / contain; } body.single-product .woocommerce-Reviews .woocommerce-verification-required { margin: 12px 0 0; padding: 0; color: var(--emp-ink-soft); font-size: 13.5px; } body.single-product .woocommerce-Reviews .commentlist { margin: 0; padding: 0; list-style: none; } body.single-product .woocommerce-Reviews .commentlist li.review { margin: 0 0 14px; padding: 16px 18px; border: 1px solid var(--emp-line); border-radius: var(--emp-radius-sm); background: var(--emp-surface); } body.single-product .woocommerce-Reviews .star-rating span, body.single-product .woocommerce-Reviews .stars a { color: var(--emp-accent); } /* ========================================================================== 9. Cross-sell: "Inne produkty, ktore moga Cie zainteresowac" -------------------------------------------------------------------------- Same karty produktow celowo NIE sa tu stylowane. Robi to Product Card v1 w site-styles.css, ktory obejmuje takze petle renderowane widgetem Elementora (selektor :is(..., .elementor-widget-woocommerce-products)). Jedna karta w calym sklepie = jeden zestaw regul (P1 pkt 2 audytu). Tu zostaje wylacznie naglowek sekcji i odstepy wokol niej. ========================================================================== */ body.single-product .elementor-227 .elementor-element-sp000013 .elementor-heading-title { margin: 0; color: var(--emp-ink) !important; font-size: clamp(20px, 1.8vw, 25px) !important; line-height: 1.3; } body.single-product .elementor-227 .elementor-widget-woocommerce-products ul.products { margin-bottom: 0 !important; } /* ========================================================================== 10. Tablet (<= 1024 px) ========================================================================== */ @media (max-width: 1024px) { body.single-product .elementor-227 .elementor-element-sp000003 { --gap: 28px 28px; --row-gap: 28px; --column-gap: 28px; } body.single-product .elementor-227 .elementor-element-sp000006 { --padding-top: 20px; --padding-bottom: 20px; --padding-left: 20px; --padding-right: 20px; } /* Na tablecie kolumna zakupu ma ok. 280-400 px, wiec ilosc i przycisk nie mieszcza sie w jednym rzedzie (przy 768 px przycisk wychodzil 8 px poza ekran). Przycisk dostaje wlasny, pelny wiersz. */ body.single-product .elementor-227 .elementor-widget-woocommerce-product-add-to-cart .single_add_to_cart_button { flex: 1 1 100% !important; } } /* ========================================================================== 11. Mobile (<= 767 px) ========================================================================== */ @media (max-width: 767px) { body.single-product .elementor-227 .elementor-element-sp000001 { --gap: 24px 24px; --row-gap: 24px; --column-gap: 24px; } body.single-product .elementor-227 .elementor-element-sp000003 { --gap: 20px 20px; --row-gap: 20px; --column-gap: 20px; } body.single-product .elementor-227 .elementor-element-sp000004 { --padding-top: 12px; --padding-bottom: 12px; --padding-left: 12px; --padding-right: 12px; } body.single-product .elementor-227 .elementor-element-sp000006 { --padding-top: 18px; --padding-bottom: 18px; --padding-left: 18px; --padding-right: 18px; --gap: 14px 14px; --row-gap: 14px; --column-gap: 14px; } /* Zdjecie nie moze zjadac calego pierwszego ekranu - cena i przycisk zakupu maja byc widoczne po jednym przewinieciu. */ body.single-product .woocommerce-product-gallery img { max-width: none; max-height: 46vh; padding: 8px; object-fit: contain; } body.single-product .woocommerce-product-gallery__trigger { top: 8px; right: 8px; width: 38px; height: 38px; } body.single-product .elementor-227 .elementor-widget-woocommerce-product-add-to-cart .quantity .qty { width: 84px; min-width: 84px; } body.single-product .elementor-227 .elementor-widget-woocommerce-product-add-to-cart .single_add_to_cart_button { padding: 0 16px !important; } body.single-product.woocommerce div.product .woocommerce-tabs .panel { padding: 18px; } } /* ========================================================================== 12. Dostepnosc ========================================================================== */ @media (prefers-reduced-motion: reduce) { body.single-product .elementor-227 .single_add_to_cart_button, body.single-product .woocommerce-product-gallery__trigger, body.single-product .woocommerce-product-gallery .flex-control-thumbs img { transition: none; } } /* ==== Koszyk, zamowienie, konto ==== */ /* ============================================================= Emprime24 - koszyk, zamowienie i konto klienta Plik: code/elementor/checkout.css Wersja v1, 2026-09-07 Zakres: wylacznie body.woocommerce-cart, body.woocommerce-checkout i body.woocommerce-account. Plik nie dotyka homepage, listingu sklepu ani karty produktu - te zostaja w site-styles.css. Kolor akcentu #186058 zgodnie z DEC-012. Ikony: Flaticon UIcons Thin Rounded zgodnie z DEC-013. Wklejone jako maski data-URI, zeby arkusz dzialal od razu, bez wgrywania plikow SVG do biblioteki mediow. Zrodla w repo, code/theme/uicons-thin-rounded/svg/: fi-tr-basket-shopping-simple pusty koszyk fi-tr-trash usuniecie pozycji z koszyka fi-tr-envelope krok "Dane kontaktowe" fi-tr-marker krok "Adres do wysylki" fi-tr-truck-side krok "Opcje wysylki" fi-tr-credit-card krok "Opcje platnosci" fi-tr-exclamation komunikat bledu fi-tr-check komunikat potwierdzenia fi-tr-eye, fi-tr-eye-crossed pokaz i ukryj haslo fi-tr-angle-small-down rozwijanie panelu kuponu CSS celowo NIE zaslania problemow, ktore wymagaja decyzji wlasciciela albo zmiany konfiguracji. Zostaja widoczne: naglowek "Dodaj tu swoj tekst naglowka" (blad szablonu standard-page-v1.json), komunikat "Nie ma dostepnych metod platnosci", nazwa wysylki "Plaska stawka" i jej kwota, ceny netto w podsumowaniu, brak odnosnikow do regulaminu i polityki prywatnosci. Opis w raporcie z audytu. ============================================================= */ /* ------------------------------------------------------------- 1. Wspolne zmienne ------------------------------------------------------------- */ body.woocommerce-cart, body.woocommerce-checkout, body.woocommerce-account { --emp-accent: #186058; --emp-accent-hover: #124a44; --emp-ink: #202b3b; --emp-muted: #5a6672; --emp-line: #dce2e6; --emp-field: #cbd5dc; --emp-soft: #f7f9f8; --emp-danger: #b3261e; --emp-danger-soft: #fdf2f1; --emp-radius: 4px; --emp-control: 52px; /* ikony UIcons Thin Rounded (DEC-013) jako maski */ --emp-ico-basket-shopping-simple: url("data:image/svg+xml,"); --emp-ico-trash: url("data:image/svg+xml, "); --emp-ico-envelope: url("data:image/svg+xml, "); --emp-ico-marker: url("data:image/svg+xml, "); --emp-ico-truck-side: url("data:image/svg+xml, "); --emp-ico-credit-card: url("data:image/svg+xml, "); --emp-ico-exclamation: url("data:image/svg+xml, "); --emp-ico-check: url("data:image/svg+xml, "); --emp-ico-eye: url("data:image/svg+xml, "); --emp-ico-eye-crossed: url("data:image/svg+xml, "); --emp-ico-angle-small-down: url("data:image/svg+xml, "); } /* ------------------------------------------------------------- 2. Naprawy ukladu odziedziczone po motywie i Elementorze 2a. Kontener Elementora ma domyslnie flex-wrap: wrap przy flex-direction: column. Wysoki blok WooCommerce zawija sie wtedy w druga, pusta kolumne i strona rosnie o kilkaset pikseli pustki (koszyk mobile 2372 px zamiast 1951 px, zamowienie mobile 5029 px zamiast okolo 3200 px). Wylaczamy zawijanie na tych trzech widokach. 2b. Hello Biz ustawia .alignwide { margin-inline: -80px }. Na desktopie to celowo poszerza blok, ale ponizej 1120 px wypycha caly koszyk i checkout 80 px poza lewa krawedz ekranu, a body ma ukryte przepelnienie, wiec etykiety sa bezpowrotnie ucinane (na 390 px widac "vka" zamiast "Plaska stawka"). ------------------------------------------------------------- */ body.woocommerce-cart .elementor-location-single .e-con > .e-con-inner, body.woocommerce-checkout .elementor-location-single .e-con > .e-con-inner, body.woocommerce-account .elementor-location-single .e-con > .e-con-inner { flex-wrap: nowrap; } @media (max-width: 1119px) { body.woocommerce-cart .alignwide, body.woocommerce-checkout .alignwide, body.woocommerce-account .alignwide { margin-inline: 0; } } /* ------------------------------------------------------------- 3. Typografia naglowkow sekcji ------------------------------------------------------------- */ body.woocommerce-cart .wc-block-components-title, body.woocommerce-checkout .wc-block-components-title, body.woocommerce-account #customer_login h2 { color: var(--emp-ink); font-weight: 700; letter-spacing: 0; } /* ------------------------------------------------------------- 4. Koszyk - stan pusty ------------------------------------------------------------- */ body.woocommerce-cart .wp-block-woocommerce-empty-cart-block { max-width: 760px; margin: 8px auto 0; text-align: center; } body.woocommerce-cart .wc-block-cart__empty-cart__title { margin: 0 0 8px; color: var(--emp-ink); font-size: 24px; font-weight: 700; line-height: 1.25; } /* ikona pustego koszyka: zamiast systemowej szarej buzi UIcon koszyka */ body.woocommerce-cart .wc-block-cart__empty-cart__title.with-empty-cart-icon::before { content: ""; display: block; width: 64px; height: 64px; margin: 0 auto 20px; background: var(--emp-accent); background-image: none; -webkit-mask: var(--emp-ico-basket-shopping-simple) no-repeat center / contain; mask: var(--emp-ico-basket-shopping-simple) no-repeat center / contain; opacity: 1; } body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-separator { max-width: 120px; margin: 28px auto; border-color: var(--emp-line); color: var(--emp-line); } body.woocommerce-cart .wp-block-woocommerce-empty-cart-block > h2:not(.wc-block-cart__empty-cart__title) { margin: 0 0 24px; color: var(--emp-ink); font-size: 22px; font-weight: 700; } /* siatka "Nowe w sklepie" w pustym koszyku - spojna z paleta marki */ body.woocommerce-cart .wc-block-grid__products .wc-block-grid__product { display: flex; flex-direction: column; } body.woocommerce-cart .wc-block-grid__product-add-to-cart { margin-top: auto; padding-top: 12px; } body.woocommerce-cart .wc-block-grid__product-title { color: var(--emp-ink); font-size: 15px; font-weight: 600; line-height: 1.35; } body.woocommerce-cart .wc-block-grid__product-price { color: var(--emp-accent); font-weight: 700; } body.woocommerce-cart .wc-block-grid__product-add-to-cart .wp-block-button__link { min-height: 44px; padding: 11px 20px; border: 0; border-radius: var(--emp-radius); background: var(--emp-accent); color: #fff; font-size: 15px; font-weight: 600; } body.woocommerce-cart .wc-block-grid__product-add-to-cart .wp-block-button__link:hover, body.woocommerce-cart .wc-block-grid__product-add-to-cart .wp-block-button__link:focus { background: var(--emp-accent-hover); color: #fff; } /* ------------------------------------------------------------- 5. Koszyk - lista pozycji ------------------------------------------------------------- */ body.woocommerce-cart .wc-block-cart-items__header th { padding-bottom: 12px; border-bottom: 1px solid var(--emp-line); color: var(--emp-muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } body.woocommerce-cart .wc-block-cart-items__row td { padding-top: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--emp-line); } body.woocommerce-cart .wc-block-cart-item__image img { width: 88px; height: 88px; border: 1px solid var(--emp-line); border-radius: var(--emp-radius); background: var(--emp-soft); object-fit: contain; } body.woocommerce-cart a.wc-block-components-product-name { color: var(--emp-ink); font-size: 16px; font-weight: 600; line-height: 1.35; text-decoration: none; } body.woocommerce-cart a.wc-block-components-product-name:hover, body.woocommerce-cart a.wc-block-components-product-name:focus { color: var(--emp-accent); text-decoration: underline; } body.woocommerce-cart .wc-block-cart-item__prices .wc-block-components-product-price__value { color: var(--emp-muted); font-size: 14px; } body.woocommerce-cart .wc-block-cart-item__total .wc-block-components-product-price__value { color: var(--emp-ink); font-size: 17px; font-weight: 700; } /* licznik sztuk - powiekszony do bezpiecznego celu dotykowego */ body.woocommerce-cart .wc-block-cart-item__quantity .wc-block-components-quantity-.elementor-kit-5 { display: flex; width: 132px; min-width: 132px; max-width: 132px; min-height: 44px; border: 1px solid var(--emp-field); border-radius: var(--emp-radius); background: #fff; } body.woocommerce-cart .wc-block-cart-item__quantity .wc-block-components-quantity-.elementor-kit-5__button { position: static; flex: 0 0 42px; width: 42px; min-width: 0; height: 42px; min-height: 42px; padding: 0; color: var(--emp-ink); font-size: 20px; line-height: 1; opacity: 1; } body.woocommerce-cart .wc-block-cart-item__quantity .wc-block-components-quantity-.elementor-kit-5__button:disabled { color: var(--emp-field); } body.woocommerce-cart .wc-block-cart-item__quantity .wc-block-components-quantity-.elementor-kit-5__button:not(:disabled):hover { background: var(--emp-soft); color: var(--emp-accent); } body.woocommerce-cart .wc-block-cart-item__quantity .wc-block-components-quantity-.elementor-kit-5__input { flex: 1 1 auto; width: auto; min-width: 0; padding: 0; min-height: 42px; color: var(--emp-ink); font-size: 16px; font-weight: 600; } /* usuwanie pozycji - ikona UIcons zamiast wbudowanego kosza Woo */ body.woocommerce-cart table.wc-block-cart-items .wc-block-cart-item__remove-link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--emp-radius); background: none; color: var(--emp-muted); text-decoration: none; } body.woocommerce-cart table.wc-block-cart-items .wc-block-cart-item__remove-link > svg { display: none; } body.woocommerce-cart table.wc-block-cart-items .wc-block-cart-item__remove-link::before { display: block; content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--emp-ico-trash) no-repeat center / contain; mask: var(--emp-ico-trash) no-repeat center / contain; } body.woocommerce-cart table.wc-block-cart-items .wc-block-cart-item__remove-link:hover, body.woocommerce-cart table.wc-block-cart-items .wc-block-cart-item__remove-link:focus { background: var(--emp-danger-soft); color: var(--emp-danger); } /* ------------------------------------------------------------- 6. Podsumowanie koszyka i podsumowanie zamowienia ------------------------------------------------------------- */ body.woocommerce-cart .wc-block-cart__sidebar .wp-block-woocommerce-cart-totals-block, body.woocommerce-cart .wc-block-cart__sidebar > .wp-block-woocommerce-cart-order-summary-block, body.woocommerce-checkout .wc-block-checkout__sidebar > .wp-block-woocommerce-checkout-order-summary-block { padding: 20px 20px 24px; border: 1px solid var(--emp-line); border-radius: var(--emp-radius); background: var(--emp-soft); } body.woocommerce-cart .wc-block-components-totals-item__label, body.woocommerce-checkout .wc-block-components-totals-item__label { color: var(--emp-muted); font-size: 14px; } body.woocommerce-cart .wc-block-components-totals-item__value, body.woocommerce-checkout .wc-block-components-totals-item__value { color: var(--emp-ink); font-size: 15px; font-weight: 600; } /* WooCommerce rysuje juz kreske nad suma, wiec nie dokladamy drugiej */ body.woocommerce-cart .wc-block-components-totals-footer-item, body.woocommerce-checkout .wc-block-components-totals-footer-item { margin-top: 0; padding-top: 16px; border-top: 0; } body.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label, body.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label { color: var(--emp-ink); font-size: 17px; font-weight: 700; } body.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value, body.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { color: var(--emp-accent); font-size: 22px; font-weight: 700; } /* panel kuponu */ body.woocommerce-cart .wc-block-components-panel .wc-block-components-panel__button, body.woocommerce-checkout .wc-block-components-panel .wc-block-components-panel__button { display: flex; align-items: center; width: 100%; min-height: 48px; color: var(--emp-ink); font-size: 15px; font-weight: 600; } body.woocommerce-cart .wc-block-components-panel__button > svg, body.woocommerce-checkout .wc-block-components-panel__button > svg { display: none; } body.woocommerce-cart .wc-block-components-panel__button::after, body.woocommerce-checkout .wc-block-components-panel__button::after { content: ""; width: 18px; height: 18px; margin-left: auto; background: var(--emp-muted); transition: transform .15s ease; -webkit-mask: var(--emp-ico-angle-small-down) no-repeat center / contain; mask: var(--emp-ico-angle-small-down) no-repeat center / contain; } body.woocommerce-cart .wc-block-components-panel__button[aria-expanded="true"]::after, body.woocommerce-checkout .wc-block-components-panel__button[aria-expanded="true"]::after { transform: rotate(180deg); } /* glowna akcja koszyka */ body.woocommerce-cart .wc-block-cart__submit-button { display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 24px; border: 0; border-radius: var(--emp-radius); background: var(--emp-accent); color: #fff; font-size: 16px; font-weight: 700; text-decoration: none; } body.woocommerce-cart .wc-block-cart__submit-button:hover, body.woocommerce-cart .wc-block-cart__submit-button:focus { background: var(--emp-accent-hover); color: #fff; } /* ------------------------------------------------------------- 7. Zamowienie - kroki formularza ------------------------------------------------------------- */ body.woocommerce-checkout .wc-block-components-checkout-step { padding-bottom: 8px; } body.woocommerce-checkout .wc-block-components-checkout-step__title { display: flex; align-items: center; gap: 10px; font-size: 20px; } /* geometria ikony kroku; sama ikona wlacza sie dopiero w regulach ponizej, zeby krok bez przypisanej ikony nie pokazal pustego kwadratu */ body.woocommerce-checkout .wc-block-components-checkout-step__title::before { content: ""; display: none; flex: 0 0 auto; width: 22px; height: 22px; background: var(--emp-accent); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; mask-repeat: no-repeat; mask-position: center; mask-size: contain; } body.woocommerce-checkout .wc-block-checkout__contact-fields .wc-block-components-checkout-step__title::before { display: block; -webkit-mask-image: var(--emp-ico-envelope); mask-image: var(--emp-ico-envelope); } body.woocommerce-checkout .wc-block-checkout__shipping-fields .wc-block-components-checkout-step__title::before, body.woocommerce-checkout .wc-block-checkout__billing-fields .wc-block-components-checkout-step__title::before { display: block; -webkit-mask-image: var(--emp-ico-marker); mask-image: var(--emp-ico-marker); } body.woocommerce-checkout .wc-block-checkout__shipping-option .wc-block-components-checkout-step__title::before { display: block; -webkit-mask-image: var(--emp-ico-truck-side); mask-image: var(--emp-ico-truck-side); } body.woocommerce-checkout .wc-block-checkout__payment-method .wc-block-components-checkout-step__title::before { display: block; -webkit-mask-image: var(--emp-ico-credit-card); mask-image: var(--emp-ico-credit-card); } /* krok "Dodaj notatke" nie dostaje ikony - jest opcjonalny */ body.woocommerce-checkout .wc-block-checkout__order-notes .wc-block-components-checkout-step__title::before { display: none; } body.woocommerce-checkout .wc-block-components-checkout-step__description { color: var(--emp-muted); font-size: 14px; } /* ------------------------------------------------------------- 8. Pola formularza - checkout i konto ------------------------------------------------------------- */ body.woocommerce-checkout .wc-block-components-text-input input, body.woocommerce-checkout .wc-block-components-combobox input, body.woocommerce-checkout .wc-block-components-textarea, body.woocommerce-account .woocommerce input.input-text, body.woocommerce-account .woocommerce select, body.woocommerce-account .woocommerce textarea { width: 100%; min-height: var(--emp-control); border: 1px solid var(--emp-field); border-radius: var(--emp-radius); background: #fff; color: var(--emp-ink); font-size: 16px; /* 16 px zapobiega przybliżaniu strony na iOS */ line-height: 1.4; } body.woocommerce-account .woocommerce input.input-text, body.woocommerce-account .woocommerce select, body.woocommerce-account .woocommerce textarea { padding: 12px 14px; } body.woocommerce-checkout .wc-block-components-text-input input:focus, body.woocommerce-checkout .wc-block-components-combobox input:focus, body.woocommerce-checkout .wc-block-components-textarea:focus, body.woocommerce-account .woocommerce input.input-text:focus, body.woocommerce-account .woocommerce select:focus, body.woocommerce-account .woocommerce textarea:focus { border-color: var(--emp-accent); box-shadow: 0 0 0 2px rgba(24, 96, 88, .18); outline: none; } body.woocommerce-checkout .wc-block-components-text-input label, body.woocommerce-checkout .wc-block-components-combobox label { color: var(--emp-muted); } body.woocommerce-account .woocommerce label { display: block; margin-bottom: 6px; color: var(--emp-muted); font-size: 14px; font-weight: 500; } body.woocommerce-account .woocommerce .required { color: var(--emp-danger); } /* pokaz i ukryj haslo */ body.woocommerce-account .password-input { position: relative; display: block; width: 100%; } body.woocommerce-account .password-input .show-password-input { position: absolute; top: 50%; right: 4px; display: flex; width: 44px; height: 44px; align-items: center; justify-content: center; padding: 0; border: 0; background: none; transform: translateY(-50%); } body.woocommerce-account .password-input .show-password-input::before, body.woocommerce-account .password-input .show-password-input::after { content: ""; width: 20px; height: 20px; background: var(--emp-muted); -webkit-mask: var(--emp-ico-eye) no-repeat center / contain; mask: var(--emp-ico-eye) no-repeat center / contain; } body.woocommerce-account .password-input .show-password-input::after { display: none; } body.woocommerce-account .password-input.display-password .show-password-input::before { -webkit-mask-image: var(--emp-ico-eye-crossed); mask-image: var(--emp-ico-eye-crossed); } body.woocommerce-account .password-input .show-password-input:hover::before { background: var(--emp-accent); } /* ------------------------------------------------------------- 9. Wybor wysylki i platnosci ------------------------------------------------------------- */ body.woocommerce-checkout .wc-block-components-radio-control__option { min-height: 60px; padding: 14px 16px 14px 48px; border: 1px solid var(--emp-field); border-radius: var(--emp-radius); background: #fff; } body.woocommerce-checkout .wc-block-components-radio-control__option + .wc-block-components-radio-control__option { margin-top: 10px; } body.woocommerce-checkout .wc-block-components-radio-control__option-checked { border-color: var(--emp-accent); background: var(--emp-soft); box-shadow: inset 0 0 0 1px var(--emp-accent); } body.woocommerce-checkout .wc-block-components-radio-control__label { color: var(--emp-ink); font-weight: 600; } body.woocommerce-checkout .wc-block-components-radio-control__secondary-label { color: var(--emp-accent); font-weight: 700; } /* ------------------------------------------------------------- 10. Komunikaty Tresc komunikatow zostaje bez zmian. Poprawiamy tylko czytelnosc i ikone, zeby klient nie przeoczyl bledu. ------------------------------------------------------------- */ body.woocommerce-cart .wc-block-components-notice-banner, body.woocommerce-checkout .wc-block-components-notice-banner { align-items: flex-start; border-radius: var(--emp-radius); font-size: 15px; line-height: 1.45; } body.woocommerce-cart .wc-block-components-notice-banner.is-error, body.woocommerce-checkout .wc-block-components-notice-banner.is-error { border: 1px solid var(--emp-danger); background: var(--emp-danger-soft); color: var(--emp-ink); } body.woocommerce-cart .wc-block-components-notice-banner > svg, body.woocommerce-checkout .wc-block-components-notice-banner > svg { display: none; } body.woocommerce-cart .wc-block-components-notice-banner::before, body.woocommerce-checkout .wc-block-components-notice-banner::before { content: ""; flex: 0 0 auto; width: 22px; height: 22px; margin: 1px 12px 0 0; background: var(--emp-accent); -webkit-mask: var(--emp-ico-check) no-repeat center / contain; mask: var(--emp-ico-check) no-repeat center / contain; } body.woocommerce-cart .wc-block-components-notice-banner.is-error::before, body.woocommerce-checkout .wc-block-components-notice-banner.is-error::before, body.woocommerce-cart .wc-block-components-notice-banner.is-warning::before, body.woocommerce-checkout .wc-block-components-notice-banner.is-warning::before { background: var(--emp-danger); -webkit-mask-image: var(--emp-ico-exclamation); mask-image: var(--emp-ico-exclamation); } /* klasyczne komunikaty WooCommerce, widoczne m.in. na koncie */ body.woocommerce-account .woocommerce-message, body.woocommerce-account .woocommerce-info, body.woocommerce-account .woocommerce-error { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 24px; padding: 16px 18px; border: 1px solid var(--emp-line); border-left: 4px solid var(--emp-accent); border-radius: var(--emp-radius); background: var(--emp-soft); color: var(--emp-ink); font-size: 15px; list-style: none; } body.woocommerce-account .woocommerce-error { border-color: var(--emp-danger); border-left-color: var(--emp-danger); background: var(--emp-danger-soft); } body.woocommerce-account .woocommerce-message::before, body.woocommerce-account .woocommerce-info::before, body.woocommerce-account .woocommerce-error::before { content: ""; position: static; width: 20px; height: 20px; margin: 0; background: var(--emp-accent); font-family: inherit; -webkit-mask: var(--emp-ico-check) no-repeat center / contain; mask: var(--emp-ico-check) no-repeat center / contain; } body.woocommerce-account .woocommerce-error::before { background: var(--emp-danger); -webkit-mask-image: var(--emp-ico-exclamation); mask-image: var(--emp-ico-exclamation); } body.woocommerce-account .woocommerce-message .button, body.woocommerce-account .woocommerce-info .button { margin-left: auto; } /* ------------------------------------------------------------- 11. Zgody i glowna akcja zamowienia ------------------------------------------------------------- */ body.woocommerce-checkout .wc-block-checkout__terms { margin: 20px 0 8px; color: var(--emp-muted); font-size: 14px; line-height: 1.5; } body.woocommerce-checkout .wc-block-checkout__terms a { color: var(--emp-accent); font-weight: 600; text-decoration: underline; } body.woocommerce-checkout .wc-block-components-checkout-place-order-button { width: 100%; min-height: 58px; padding: 0 28px; border: 0; border-radius: var(--emp-radius); background: var(--emp-accent); color: #fff; font-size: 17px; font-weight: 700; } body.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover, body.woocommerce-checkout .wc-block-components-checkout-place-order-button:focus { background: var(--emp-accent-hover); color: #fff; } body.woocommerce-checkout .wc-block-components-checkout-place-order-button:disabled, body.woocommerce-checkout .wc-block-components-checkout-place-order-button[aria-disabled="true"] { background: #9aa8a5; color: #fff; cursor: not-allowed; } body.woocommerce-checkout .wc-block-components-checkout-place-order-button .wc-block-components-button__text, body.woocommerce-checkout .wc-block-components-checkout-place-order-button .wc-block-components-checkout-place-order-button__text { color: inherit; font-weight: inherit; } /* ------------------------------------------------------------- 12. Podsumowanie zamowienia w kolumnie bocznej ------------------------------------------------------------- */ body.woocommerce-checkout .wc-block-components-checkout-order-summary__title-text { color: var(--emp-ink); font-size: 18px; font-weight: 700; } body.woocommerce-checkout .wc-block-components-order-summary-item__image img { border: 1px solid var(--emp-line); border-radius: var(--emp-radius); background: #fff; } body.woocommerce-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-name { color: var(--emp-ink); font-size: 14px; font-weight: 600; line-height: 1.35; } /* ------------------------------------------------------------- 13. Konto klienta - logowanie i rejestracja ------------------------------------------------------------- */ body.woocommerce-account #customer_login { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; max-width: 470px; } body.woocommerce-account #customer_login::before, body.woocommerce-account #customer_login::after { content: none; display: none; } body.woocommerce-account #customer_login > .u-column1, body.woocommerce-account #customer_login > .u-column2 { float: none; width: auto; margin: 0; } body.woocommerce-account #customer_login > .u-column2 { padding-top: 26px; border-top: 1px solid var(--emprime-line, #e2e8e6); } body.woocommerce-account #customer_login button[type="submit"] { width: 100%; } body.woocommerce-account #customer_login h2 { margin: 0 0 16px; font-size: 22px; line-height: 1.25; } body.woocommerce-account #customer_login form.login, body.woocommerce-account #customer_login form.register { margin: 0; padding: 28px 28px 24px; border: 1px solid var(--emp-line); border-radius: var(--emp-radius); background: #fff; } body.woocommerce-account #customer_login .form-row { margin: 0 0 18px; padding: 0; } body.woocommerce-account .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; color: var(--emp-muted); font-size: 14px; font-weight: 400; } body.woocommerce-account .woocommerce-form-login__rememberme input { width: 18px; height: 18px; margin: 0; accent-color: var(--emp-accent); } body.woocommerce-account .woocommerce-form-login .form-row:not(.woocommerce-form-row) { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 14px; } body.woocommerce-account .woocommerce-privacy-policy-text p, body.woocommerce-account #customer_login form p:not(.form-row) { color: var(--emp-muted); font-size: 14px; line-height: 1.5; } body.woocommerce-account .woocommerce-LostPassword { margin: 4px 0 0; } body.woocommerce-account .woocommerce-LostPassword a, body.woocommerce-account .woocommerce-privacy-policy-link { color: var(--emp-accent); font-weight: 600; text-decoration: underline; } body.woocommerce-account .woocommerce-LostPassword a:hover, body.woocommerce-account .woocommerce-privacy-policy-link:hover { color: var(--emp-accent-hover); } /* przyciski konta */ body.woocommerce-account .woocommerce .button, body.woocommerce-account .woocommerce button.button, body.woocommerce-account .woocommerce .woocommerce-Button, body.woocommerce-account .woocommerce input.button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 28px; border: 0; border-radius: var(--emp-radius); background: var(--emp-accent); color: #fff; font-size: 16px; font-weight: 700; line-height: 1; text-decoration: none; } body.woocommerce-account .woocommerce .button:hover, body.woocommerce-account .woocommerce button.button:hover, body.woocommerce-account .woocommerce .woocommerce-Button:hover, body.woocommerce-account .woocommerce input.button:hover, body.woocommerce-account .woocommerce .button:focus, body.woocommerce-account .woocommerce button.button:focus, body.woocommerce-account .woocommerce .woocommerce-Button:focus, body.woocommerce-account .woocommerce input.button:focus { background: var(--emp-accent-hover); color: #fff; } body.woocommerce-account .woocommerce-message .button { min-height: 40px; padding: 0 18px; font-size: 14px; } /* ------------------------------------------------------------- 14. Konto klienta - obszar po zalogowaniu UWAGA: nie zweryfikowane na zywej stronie. Zalozenie konta testowego byloby zmiana na produkcji, a takiej nie wykonujemy bez zgody. Regulki sa zachowawcze: kolory, odstepy i cele dotykowe, bez ingerencji w uklad tabel zamowien. ------------------------------------------------------------- */ body.woocommerce-account .woocommerce-MyAccount-navigation ul { margin: 0; padding: 0; border: 1px solid var(--emp-line); border-radius: var(--emp-radius); list-style: none; overflow: hidden; } body.woocommerce-account .woocommerce-MyAccount-navigation li + li { border-top: 1px solid var(--emp-line); } body.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: 14px 18px; color: var(--emp-ink); font-size: 15px; font-weight: 500; text-decoration: none; } body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: var(--emp-soft); color: var(--emp-accent); } body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--emp-soft); color: var(--emp-accent); font-weight: 700; } body.woocommerce-account .woocommerce-MyAccount-content table.shop_table th, body.woocommerce-account .woocommerce-MyAccount-content table.shop_table td { padding: 14px 12px; border-bottom: 1px solid var(--emp-line); font-size: 15px; } body.woocommerce-account .woocommerce-MyAccount-content table.shop_table th { color: var(--emp-muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } /* ------------------------------------------------------------- 15. Mobile do 767 px ------------------------------------------------------------- */ @media (max-width: 767px) { body.woocommerce-cart, body.woocommerce-checkout, body.woocommerce-account { --emp-control: 50px; } body.woocommerce-account #customer_login { grid-template-columns: 1fr; gap: 24px; } body.woocommerce-account #customer_login form.login, body.woocommerce-account #customer_login form.register { padding: 20px 18px 18px; } body.woocommerce-account .woocommerce .button, body.woocommerce-account .woocommerce button.button, body.woocommerce-account .woocommerce .woocommerce-Button, body.woocommerce-account .woocommerce input.button { width: 100%; } body.woocommerce-account .woocommerce-message .button, body.woocommerce-account .woocommerce-info .button { width: auto; margin-left: 0; } body.woocommerce-cart .wc-block-cart-item__image img { width: 72px; height: 72px; } /* na mobile Woo rozbija wiersz na kilka komorek - jedna kreska pod cala pozycja zamiast czterech odcinkow pod komorkami */ body.woocommerce-cart .wc-block-cart-items__row td { padding-top: 16px; padding-bottom: 16px; border-bottom: 0; } body.woocommerce-cart .wc-block-cart-items__row { display: block; border-bottom: 1px solid var(--emp-line); } body.woocommerce-cart a.wc-block-components-product-name { font-size: 15px; } body.woocommerce-cart .wc-block-cart__sidebar .wp-block-woocommerce-cart-totals-block, body.woocommerce-checkout .wc-block-checkout__sidebar > .wp-block-woocommerce-checkout-order-summary-block { padding: 16px 16px 20px; } body.woocommerce-checkout .wc-block-components-checkout-step__title { font-size: 18px; } body.woocommerce-cart .wc-block-cart__empty-cart__title { font-size: 21px; } body.woocommerce-cart .wc-block-cart__empty-cart__title.with-empty-cart-icon::before { width: 56px; height: 56px; margin-bottom: 16px; } } /* ==== Warstwa sklepu z pluginu projektowego ==== */ /* Dostepnosc na karcie produktu - realny tekst z PHP zamiast tresci z CSS */ :is(body.woocommerce, .woocommerce, .elementor-widget-woocommerce-products) ul.products li.product .emp-dostepnosc { order: 2; display: block; margin: 10px 0 0; padding-left: 15px; background: radial-gradient(circle 4px at 4px 50%, currentColor 99%, transparent 100%) no-repeat left center; font-size: 12px; font-weight: 600; line-height: 1.4; } :is(body.woocommerce, .woocommerce, .elementor-widget-woocommerce-products) ul.products li.product .emp-dostepnosc--jest { color: var(--emprime-accent); } :is(body.woocommerce, .woocommerce, .elementor-widget-woocommerce-products) ul.products li.product .emp-dostepnosc--brak { color: var(--emprime-muted); } /* Pasek krokow zakupu na koszyku i zamowieniu */ .emp-kroki { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 32px; padding: 0; list-style: none; counter-reset: none; } .emp-kroki__krok { padding: 0 0 12px; border-top: 3px solid var(--emprime-line); padding-top: 12px; color: var(--emprime-muted); font-size: 15px; font-weight: 500; line-height: 1.3; } .emp-kroki__nr { font-weight: 700; } .emp-kroki__krok--aktywny, .emp-kroki__krok--zrobiony { border-top-color: var(--emprime-accent); color: var(--emprime-ink); } .emp-kroki__krok--aktywny { font-weight: 700; } @media (max-width: 600px) { .emp-kroki { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; margin-bottom: 24px; } .emp-kroki__krok { font-size: 13px; padding-top: 8px; padding-bottom: 6px; } } /* Przycisk powrotu przy pustym koszyku */ .emp-pusty-koszyk { margin: 8px 0 40px; text-align: center; } .emp-pusty-koszyk__btn { display: inline-block; padding: 15px 34px; border-radius: 6px; background: var(--emprime-accent); color: #fff !important; font-size: 16px; font-weight: 600; line-height: 1.2; text-decoration: none; } .emp-pusty-koszyk__btn:hover, .emp-pusty-koszyk__btn:focus { background: var(--emprime-accent-dark); color: #fff !important; } /* Globalny kolor odnosnikow. Hello Biz ustawia rozowy #cc3366, ktory nie ma nic wspolnego z marka (DEC-012). Footer jest na ciemnym tle, wiec tam biel. */ .elementor-location-footer a { color: #ffffff; text-decoration: none; } .elementor-location-footer a:hover, .elementor-location-footer a:focus { color: #ffffff; text-decoration: underline; } .woocommerce-breadcrumb a, .woocommerce-message a, .woocommerce-info a, .entry-content a, .elementor-widget-theme-post-content a { color: #186058; } /* Archiwum poradnika renderowane serwerowo (widgety Elementora `posts` i `archive-title` nie istnieja w wersji 4.x i znikaja bez sladu). */ .emp-poradnik { max-width: 1240px; margin: 0 auto; padding: 32px 24px 64px; } .emp-poradnik__tytul { margin: 0 0 28px; color: var(--emprime-ink, #202b3b); font-size: 34px; line-height: 1.2; } .emp-poradnik__pusto { margin: 0 0 8px; color: var(--emprime-muted, #5d6b74); font-size: 16px; text-align: center; } .emp-poradnik__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; } .emp-artykul__foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; } .emp-artykul__tytul { margin: 12px 0 6px; font-size: 18px; line-height: 1.35; } .emp-artykul__tytul a { color: var(--emprime-ink, #202b3b); text-decoration: none; } .emp-artykul__zajawka { margin: 0; color: var(--emprime-muted, #5d6b74); font-size: 14px; line-height: 1.5; } @media (max-width: 1024px) { .emp-poradnik__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .emp-poradnik { padding: 24px 16px 48px; } .emp-poradnik__tytul { font-size: 26px; } .emp-poradnik__lista { grid-template-columns: 1fr; } } /* ==== Koszyk, dodawanie do koszyka i konto (wzorzec ergonomii: Rosa24) ==== */ /* Stepper ilosci na karcie produktu, w jednym wierszu z przyciskiem */ :is(body.woocommerce, .woocommerce, .elementor-widget-woocommerce-products) ul.products li.product .emp-ilosc { order: 3; display: flex; align-items: stretch; width: 104px; margin: 12px 0 0; border: 1px solid var(--emprime-line, #e2e8e6); border-radius: 6px; overflow: hidden; } .emp-ilosc__btn { flex: 0 0 30px; padding: 0; border: 0; background: #fff; color: var(--emprime-ink, #202b3b); font-size: 16px; line-height: 1; cursor: pointer; } .emp-ilosc__btn:hover { background: var(--emprime-surface, #f4f7f6); } /* `input` przed klasa, bo Hello Biz stroi pola przez `input[type="text"]` (specyficznosc 0,1,1) i sama klasa przegrywala: pole ilosci dostawalo wlasna szara ramke z promieniem 3px w srodku ramki steppera, czyli dwie ramki jedna w drugiej, oraz padding 8px 16px na polu szerokim na 42 px. */ .emp-ilosc input.emp-ilosc__pole { flex: 1 1 auto; width: 100%; min-height: 34px; padding: 0; border: 0; border-radius: 0; border-left: 1px solid var(--emprime-line, #e2e8e6); border-right: 1px solid var(--emprime-line, #e2e8e6); background: #fff; color: var(--emprime-ink, #202b3b); font-size: 14px; text-align: center; } :is(body.woocommerce, .woocommerce, .elementor-widget-woocommerce-products) ul.products li.product .button { order: 4; } /* Akcje w naglowku: ikona, etykieta pod nia, przy koszyku kwota obok. Wymiary wg references/spec/rosa24-pomiary.json */ .emprime-desktop-header .emp-akcja { flex: 0 0 auto; width: auto; } .emprime-desktop-header .emp-akcja .elementor-widget-heading { width: auto; } .emprime-desktop-header .emp-akcja .elementor-heading-title { font-size: 14px; font-weight: 400; line-height: 20px; white-space: nowrap; } .emprime-desktop-header .emp-akcja .elementor-icon { font-size: 19px; line-height: 1; } .emprime-desktop-header .emp-akcja--koszyk > .e-con-inner, .emprime-desktop-header .emp-akcja--koszyk { position: relative; } /* Licznik i kwota wstrzykiwane przez snippet ID 5 */ .emprime-desktop-header .emp-akcja--koszyk, .emprime-mobile-header .emp-koszyk-ikona { position: relative; } .emp-koszyk-info { display: none; } .emp-koszyk-info--pelny { display: block; position: absolute; inset: 0; pointer-events: none; } .emp-koszyk-info__licznik { position: absolute; top: -2px; left: 50%; margin-left: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--emprime-accent, #186058); color: #fff; font-size: 13px; font-weight: 600; line-height: 20px; text-align: center; } .emp-koszyk-info__suma { display: none; } @media (min-width: 1025px) { /* Koszyk zostaje kolumna jak pozostale akcje. Kwota stoi obok kolumny, dosunieta do jej prawej krawedzi i wysrodkowana w pionie. */ .emprime-desktop-header .emp-akcja--koszyk { margin-right: 74px; } .emp-koszyk-info__suma { display: block; position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); color: var(--emprime-ink, #202b3b); font-size: 16px; font-weight: 400; line-height: 1.2; white-space: nowrap; } } /* Modal po dodaniu do koszyka */ .emp-modal-tlo { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; background: rgba(16, 24, 32, 0.55); overflow-y: auto; } .emp-modal-tlo[hidden] { display: none; } body.emp-modal-otwarty { overflow: hidden; } .emp-modal { width: 100%; max-width: 520px; border-radius: 12px; background: #fff; box-shadow: 0 18px 60px rgba(16, 24, 32, 0.25); } .emp-modal__naglowek { position: relative; display: flex; align-items: center; gap: 10px; padding: 20px 52px 16px 24px; } .emp-modal__ptaszek { flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--emprime-accent, #186058); position: relative; } .emp-modal__ptaszek::after { content: ""; position: absolute; left: 7px; top: 5px; width: 6px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .emp-modal__tytul { margin: 0; color: var(--emprime-ink, #202b3b); font-size: 19px; line-height: 1.3; } /* Krzyzyk zamkniecia. `button` przed klasa i wlasny hover, bo motyw daje kazdemu przyciskowi padding 8px 16px (glif uciekal o 8 px w prawo i 5 px w dol od srodka kwadratu), a globalna regula `body.woocommerce button:hover` malowala go na ciemnozielony kwadrat jak przycisk akcji. */ .emp-modal__naglowek button.emp-modal__zamknij { position: absolute; top: 14px; right: 16px; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--emprime-muted, #5d6b74); font-size: 26px; line-height: 1; cursor: pointer; } .emp-modal__naglowek button.emp-modal__zamknij:hover, .emp-modal__naglowek button.emp-modal__zamknij:focus { background-color: var(--emprime-surface, #f4f7f6); color: var(--emprime-ink, #202b3b); } .emp-modal__naglowek button.emp-modal__zamknij:focus-visible { outline: 2px solid var(--emprime-accent, #186058); outline-offset: 2px; } .emp-modal__produkt { display: flex; align-items: center; gap: 14px; padding: 0 24px 20px; border-bottom: 1px solid var(--emprime-line, #e2e8e6); } .emp-modal__produkt img { width: 68px; height: 68px; object-fit: contain; } .emp-modal__produkt-nazwa { margin: 0 0 4px; color: var(--emprime-ink, #202b3b); font-size: 14px; line-height: 1.4; } .emp-modal__produkt-cena { margin: 0; color: var(--emprime-accent, #186058); font-size: 16px; font-weight: 700; } .emp-modal__polecane { padding: 18px 24px 4px; } .emp-modal__polecane-tytul { margin: 0 0 12px; color: var(--emprime-ink, #202b3b); font-size: 15px; } .emp-modal__polecany { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 10px; border: 1px solid var(--emprime-line, #e2e8e6); border-radius: 8px; } .emp-modal__polecany img { width: 56px; height: 56px; object-fit: contain; } .emp-modal__polecany-opis { flex: 1 1 auto; min-width: 0; } .emp-modal__polecany-nazwa { display: block; margin-bottom: 4px; color: var(--emprime-ink, #202b3b) !important; font-size: 13px; line-height: 1.35; text-decoration: none; } .emp-modal__polecany-cena { display: block; margin-bottom: 8px; color: var(--emprime-accent, #186058); font-size: 14px; font-weight: 700; } .emp-modal__kup { display: inline-block; padding: 7px 14px !important; border-radius: 5px; background: var(--emprime-accent, #186058) !important; color: #fff !important; font-size: 13px; font-weight: 600; } .emp-modal__stopka { display: flex; gap: 12px; padding: 16px 24px 22px; } .emp-modal__wroc, .emp-modal__do-koszyka { flex: 1 1 0; padding: 13px 16px; border-radius: 6px; font-size: 15px; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; } .emp-modal__wroc { border: 1px solid var(--emprime-line, #e2e8e6); background: #fff; color: var(--emprime-ink, #202b3b); } .emp-modal__do-koszyka { border: 1px solid var(--emprime-accent, #186058); background: var(--emprime-accent, #186058); color: #fff !important; } @media (max-width: 600px) { .emp-modal-tlo { padding: 0; align-items: flex-end; } .emp-modal { max-width: none; border-radius: 12px 12px 0 0; } .emp-modal__stopka { flex-direction: column-reverse; } } /* Konto niezalogowanego: jedna waska kolumna, logowanie pierwsze */ /* Logo w stopce: plik jest przygotowany pod biale tlo, wiec na ciemnym wybielamy go filtrem zamiast trzymac drugi plik. */ .elementor-location-footer .elementor-widget-image img { filter: brightness(0) invert(1); } /* ==== Ramka wyszukiwarki i szary pas kategorii (pomiary Rosa24) ==== */ /* Otoczka 760 x 40, ramka 1 px w kolorze akcentu, promien 8 px */ .elementor-location-header .emprime-desktop-header .elementor-search-form__container { min-height: 40px; border: 1px solid var(--emprime-accent, #186058); border-radius: 8px; background: #fff; } .elementor-location-header .emprime-desktop-header .elementor-search-form__input { min-height: 38px; padding: 8px 8px 8px 4px; background: transparent; font-size: 14px; } .elementor-location-header .emprime-desktop-header .elementor-search-form__icon { padding-left: 12px; opacity: 0.75; } /* Pas kategorii na szarym tle, wysokosc 43 px. U Rosa24 to slider, bo maja kilkanascie kategorii. My mamy szesc pozycji, wiec przenosimy samo tlo i wysokosc, bez przewijania. */ .elementor-location-header .emprime-desktop-header:nth-of-type(2), .elementor-location-header > .elementor-element > .e-con-inner > .emprime-desktop-header + .emprime-desktop-header { background: #f3f5f7; } .emp-pas-kategorii { background: #f3f5f7; } .emp-pas-kategorii > .e-con-inner { min-height: 43px; align-items: center; } .emp-pas-kategorii .elementor-heading-title { font-size: 16px; line-height: 1.3; } /* ==== Pasek wysylki (wymiary z references/spec/rosa24-pomiary.json) ==== */ .emp-wysylka { background: var(--emprime-accent, #186058); color: #fff; } .emp-wysylka__srodek { display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 48px; max-width: 1240px; margin: 0 auto; padding: 8px 24px; } .emp-wysylka__tekst { font-size: 16px; font-weight: 500; line-height: 1.3; text-align: center; } .emp-wysylka__zegar { flex: 0 0 auto; min-width: 182px; padding: 4px 16px; border-radius: 16px; background: #fff; color: var(--emprime-ink, #202b3b); font-size: 16px; font-weight: 500; line-height: 24px; text-align: center; font-variant-numeric: tabular-nums; } @media (max-width: 767px) { .emp-wysylka__srodek { flex-direction: column; gap: 8px; padding: 10px 16px; } .emp-wysylka__tekst { font-size: 14px; } .emp-wysylka__zegar { min-width: 0; font-size: 14px; } } /* Pasek wysylki: motyw dokladal padding-bottom i margin-bottom, przez co zielone tlo bylo wyzsze od tresci i tekst wygladal na przypiety do gory. */ .emp-wysylka { margin: 0; padding: 0; } /* ==== Stany hover ==== Hello Biz ustawia wszystkim przyciskom hover na rozowy #cc3366 z bialym tekstem. Na sterze ilosci znikal przez to plusik i minusik. */ .emp-ilosc__btn:hover, .emp-ilosc__btn:focus { background-color: var(--emprime-surface, #f4f7f6); color: var(--emprime-accent, #186058); } :is(body.woocommerce, .woocommerce, .elementor-widget-woocommerce-products) ul.products li.product .button:hover, :is(body.woocommerce, .woocommerce, .elementor-widget-woocommerce-products) ul.products li.product .button:focus, .single-product .site-main div.product form.cart .single_add_to_cart_button:hover, .emp-modal__kup:hover, .emp-modal__kup:focus { background-color: var(--emprime-accent-dark, #124a44) !important; color: #fff !important; } .emp-modal__wroc:hover, .emp-modal__wroc:focus { background-color: var(--emprime-surface, #f4f7f6); color: var(--emprime-ink, #202b3b); } /* Przyciski WooCommerce poza petla: koszyk, konto, checkout */ body.woocommerce button:hover, body.woocommerce button:focus, body.woocommerce-cart button:hover, body.woocommerce-checkout button:hover, body.woocommerce-account button:hover, body.woocommerce-account button:focus { background-color: var(--emprime-accent-dark, #124a44); color: #fff; } /* Serce ulubionych nie moze robic sie rozowe */ .emp-serce:hover, .emp-serce:focus, button.emp-serce:hover, button.emp-serce:focus { background-color: var(--emprime-surface, #f4f7f6); color: var(--emprime-accent, #186058); } /* ==== Typografia stron tresci (regulamin, polityka, zwroty, reklamacje) ==== Tresc przyszla z innego sklepu jako HTML Elementora. Klasy zostaly zdjete, bo wskazywaly na CSS, ktorego u nas nie ma i naglowki robily sie niebieskie. Tytul strony renderuje szablon, wiec w tresci nie ma juz drugiego H1. */ .elementor-widget-theme-post-content { max-width: 820px; } .elementor-widget-theme-post-content h2 { margin: 34px 0 12px; color: var(--emprime-ink, #202b3b); font-size: 22px; font-weight: 700; line-height: 1.3; } .elementor-widget-theme-post-content h2:first-child { margin-top: 0; } .elementor-widget-theme-post-content h3 { margin: 24px 0 10px; color: var(--emprime-ink, #202b3b); font-size: 18px; font-weight: 700; line-height: 1.35; } .elementor-widget-theme-post-content p, .elementor-widget-theme-post-content li { color: #3d4a55; font-size: 15px; line-height: 1.65; } .elementor-widget-theme-post-content p { margin: 0 0 14px; } .elementor-widget-theme-post-content ul, .elementor-widget-theme-post-content ol { margin: 0 0 16px; padding-left: 22px; } .elementor-widget-theme-post-content li { margin-bottom: 6px; } .elementor-widget-theme-post-content a { color: var(--emprime-accent, #186058); } /* Tytul strony i odstep do tresci, zeby po usunieciu dubla nie bylo dziury */ body.page .elementor-widget-theme-post-title { margin-bottom: 22px; } /* Tytul koszyka i zamowienia. Strona koszyka ma resztkowe dane Elementora bez widgetu tytulu, wiec H1 dokladany jest przez snippet warstwy sklepu. */ .emp-tytul-strony { margin: 0 0 22px; color: var(--emprime-ink, #202b3b); font-size: 34px; font-weight: 700; line-height: 1.2; } @media (max-width: 767px) { .emp-tytul-strony { font-size: 26px; } } /* Szerokosc tresci rowna szerokosci naglowka. Hello Biz ustawia .site-main na 1140 px, a naglowek ma kontener 1240 px, wiec okruszki i sidebar kategorii byly wciete o 50 px wzgledem logo. */ @media (min-width: 1200px) { /* Hello Biz ustawia tu 1140 px selektorem body:not([class*=elementor-page-]) .site-main o specyficznosci (0,2,1). Ten ma (0,2,2), wiec wygrywa bez !important. */ body:not([class*="elementor-page-"]) main.site-main { max-width: 1240px; } } /* ==== Oddech w sekcji platnosci na zamowieniu ==== Bloki WooCommerce renderuja checkboxy z zerowym marginesem i paddingiem, przez co zgody wchodzily w komunikat bledu i w siebie nawzajem. */ body.woocommerce-checkout .wc-block-components-radio-control__option { padding-top: 18px; padding-bottom: 18px; } /* Rozwiniety panel wybranej metody, np. pole kodu BLIK */ body.woocommerce-checkout .wc-block-components-radio-control-accordion-content { padding: 4px 20px 20px 48px; } body.woocommerce-checkout .wc-block-components-radio-control-accordion-content .wc-block-components-text-input { margin-top: 6px; margin-bottom: 4px; } /* Kazda zgoda dostaje wlasny wiersz z odstepem */ body.woocommerce-checkout .wc-block-components-checkbox { margin: 16px 0 0; } body.woocommerce-checkout .wc-block-components-checkbox:first-child { margin-top: 12px; } body.woocommerce-checkout .wc-block-components-checkbox__label { padding-left: 4px; line-height: 1.5; } /* Komunikat walidacji nie moze dotykac nastepnego pola */ body.woocommerce-checkout .wc-block-components-validation-error { margin: 6px 0 4px; line-height: 1.45; } /* Notatka do zamowienia i zgoda pod formularzem */ body.woocommerce-checkout .wc-block-checkout__add-note { margin: 26px 0 0; padding: 20px 0 0; border-top: 1px solid var(--emprime-line, #e2e8e6); } body.woocommerce-checkout .wc-block-checkout__terms { margin: 24px 0 20px; padding-top: 22px; line-height: 1.6; } body.woocommerce-checkout .wc-block-checkout__actions { padding-bottom: 8px; } /* Odstep miedzy metodami platnosci */ body.woocommerce-checkout .wc-block-components-radio-control__option + .wc-block-components-radio-control__option { border-top: 1px solid var(--emprime-line, #e2e8e6); } /* ==== Zgoda na cookies ==== Odmowa musi byc rownie latwa jak zgoda, wiec "Tylko niezbedne" ma ten sam rozmiar i widocznosc co "Akceptuje wszystkie", tylko inny wariant koloru. */ .emp-cookies { position: fixed; inset: 0; z-index: 100001; display: flex; align-items: flex-end; justify-content: center; padding: 20px; background: rgba(16, 24, 32, 0.45); } .emp-cookies__okno { width: 100%; max-width: 640px; padding: 26px 28px 24px; border-radius: 12px; background: #fff; box-shadow: 0 18px 60px rgba(16, 24, 32, 0.28); } .emp-cookies__tytul { margin: 0 0 10px; color: var(--emprime-ink, #202b3b); font-size: 20px; font-weight: 700; line-height: 1.3; } .emp-cookies__tekst { margin: 0 0 18px; color: #3d4a55; font-size: 14px; line-height: 1.6; max-width: 58ch; } .emp-cookies__tekst a { color: var(--emprime-accent, #186058); } .emp-cookies__kategorie { margin: 0 0 18px; padding: 16px 0 4px; border-top: 1px solid var(--emprime-line, #e2e8e6); } .emp-cookies__kat { display: flex; gap: 10px; margin-bottom: 14px; color: #3d4a55; font-size: 13px; line-height: 1.5; cursor: pointer; } .emp-cookies__kat input { flex: 0 0 auto; margin-top: 2px; } .emp-cookies__kat strong { color: var(--emprime-ink, #202b3b); } .emp-cookies__akcje { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; } /* Atrybut hidden ustawia display:none, ale regula wyzej go bije. Bez tego przycisk zapisu byl widoczny od razu. */ .emp-cookies__akcje[hidden], .emp-cookies__kategorie[hidden] { display: none; } .emp-cookies__btn { padding: 12px 20px; border-radius: 6px; font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer; } .emp-cookies__btn--glowny { border: 1px solid var(--emprime-accent, #186058); background: var(--emprime-accent, #186058); color: #fff; } .emp-cookies__btn--glowny:hover { background: var(--emprime-accent-dark, #124a44); color: #fff; } .emp-cookies__btn--drugi { border: 1px solid var(--emprime-line, #e2e8e6); background: #fff; color: var(--emprime-ink, #202b3b); } .emp-cookies__btn--drugi:hover { background: var(--emprime-surface, #f4f7f6); color: var(--emprime-ink, #202b3b); } @media (max-width: 600px) { .emp-cookies { padding: 0; } .emp-cookies__okno { border-radius: 12px 12px 0 0; padding: 22px 18px 20px; } .emp-cookies__akcje { flex-direction: column-reverse; } .emp-cookies__btn { width: 100%; } } /* =========================================================================== KOMUNIKATY WOOCOMMERCE: obramowanie fokusu Po dodaniu do koszyka WooCommerce przenosi fokus na komunikat, zeby czytnik ekranu go przeczytal. Przegladarka rysuje wtedy swoj systemowy niebieski pierscien, ktory nie ma nic wspolnego z reszta strony i znika dopiero przy nastepnym klikniecu. Fokusu nie odbieramy, bo to realne udogodnienie. Rozdzielamy natomiast dwa przypadki: fokus ustawiony przez skrypt (mysz, dotyk) nie rysuje nic, a fokus od klawiatury dostaje czytelny pierscien w kolorze marki. =========================================================================== */ /* Komunikat ma tabindex="-1", wiec klawiatura i tak na niego nie wejdzie: fokus jest tu wylacznie programowy, po to zeby czytnik ekranu przeczytal tresc po przeladowaniu strony. Pierscien nie niesie wiec zadnej informacji, a po przeladowaniu przegladarka uznaje taki fokus za "widoczny" i rysuje go mimo reguly :focus-visible. Dlatego celujemy wprost w tabindex="-1". */ .woocommerce-notices-wrapper [tabindex="-1"]:focus, .woocommerce-notices-wrapper .woocommerce-message:focus, .woocommerce-notices-wrapper .woocommerce-info:focus, .woocommerce-notices-wrapper .woocommerce-error:focus { outline: none; } /* Elementy w srodku komunikatu sa normalnie osiagalne klawiatura i tam pierscien musi zostac, w kolorze marki zamiast systemowego niebieskiego. */ .woocommerce-notices-wrapper a:focus-visible, .woocommerce-notices-wrapper button:focus-visible { outline: 2px solid var(--emp-accent, #186058); outline-offset: 3px; border-radius: var(--emp-radius-sm, 8px); } /* Poza karta produktu komunikat mial tylko style WooCommerce, wiec wygladal inaczej na listingu, w koszyku i na koncie. Ten sam uklad wszedzie. */ body:not(.single-product) .woocommerce-notices-wrapper .woocommerce-message, body:not(.single-product) .woocommerce-notices-wrapper .woocommerce-info, body:not(.single-product) .woocommerce-notices-wrapper .woocommerce-error { margin: 20px auto 12px; padding: 14px 20px; border: 1px solid var(--emp-line, #e2e8e6); border-left: 4px solid var(--emp-accent, #186058); border-radius: var(--emp-radius-sm, 8px); background: var(--emp-surface-soft, #f4f7f6); color: var(--emp-ink, #0f172a); font-size: 15px; list-style: none; } body:not(.single-product) .woocommerce-notices-wrapper .woocommerce-message::before, body:not(.single-product) .woocommerce-notices-wrapper .woocommerce-info::before, body:not(.single-product) .woocommerce-notices-wrapper .woocommerce-error::before { display: none; }/* End custom CSS */