:root{--font-family-body: "Poppins", "Helvetica", "Arial", "sans-serif";--font-family-label: "Poppins", "Helvetica", "Arial", "sans-serif";--font-family-semi: "Poppins", "Helvetica", "Arial", "sans-serif";--font-family-title: "Poppins", "Helvetica", "Arial", "sans-serif";--color-a-hover: #F12735;--color-primary: #F12735;--color-secondary: #F12735;--bg-color-btn: #F12735;--bg-color-btn-hover: #F12735;--ax-form-bi-width: 1px;--ax-form-btn-width: 1px;}@media (max-width: 767px){#box-product-grid .archive-wrapper-items{margin-left: calc(-10px/2);margin-right: calc(-10px/2);}#box-product-grid .archive-wrapper-items > .item{padding-left: calc(10px/2);padding-right: calc(10px/2);margin-bottom: 10px;}}@media (min-width: 768px) and (max-width: 1024px){#box-product-grid .archive-wrapper-items{margin-left: calc(-20px/2);margin-right: calc(-20px/2);}#box-product-grid .archive-wrapper-items > .item{padding-left: calc(20px/2);padding-right: calc(20px/2);margin-bottom: 20px;}}@media (min-width: 1025px) and (max-width: 1199px){#box-product-grid .archive-wrapper-items{margin-left: calc(-30px/2);margin-right: calc(-30px/2);}#box-product-grid .archive-wrapper-items > .item{padding-left: calc(30px/2);padding-right: calc(30px/2);margin-bottom: 30px;}}@media (min-width: 1200px){#box-product-grid .archive-wrapper-items{margin-left: calc(-30px/2);margin-right: calc(-30px/2);}#box-product-grid .archive-wrapper-items > .item{padding-left: calc(30px/2);padding-right: calc(30px/2);margin-bottom: 30px;}}@media (max-width: 767px){#box-product-grid .archive-wrapper-items > .item{-ms-flex: 0 0 calc(100%/2); flex: 0 0 calc(100%/2); max-width: calc(100%/2);}}@media (min-width: 768px) and (max-width: 1024px){#box-product-grid .archive-wrapper-items > .item{-ms-flex: 0 0 calc(100%/2); flex: 0 0 calc(100%/2); max-width: calc(100%/2);}}@media (min-width: 1025px) and (max-width: 1199px){#box-product-grid .archive-wrapper-items > .item{-ms-flex: 0 0 calc(100%/3); flex: 0 0 calc(100%/3); max-width: calc(100%/3);}}@media (min-width: 1200px){#box-product-grid .archive-wrapper-items > .item{-ms-flex: 0 0 calc(100%/3); flex: 0 0 calc(100%/3); max-width: calc(100%/3);}}header.is-sticked.is-scroll-up #header-sticky, header.is-sticked.is-scroll-down #header-sticky{-webkit-transform: none; transform: none; visibility: visible; opacity: 1; pointer-events: all;}/* ========================================================= ODSTĘPY MIĘDZY SEKCJAMI CHECKOUTU (wersja odporna na kolejność) ========================================================= */ html body #thecheckout-cart-summary, html body #thecheckout-login-form, html body #thecheckout-account, html body #thecheckout-address-invoice, html body #thecheckout-address-delivery, html body #thecheckout-shipping, html body #thecheckout-payment, html body #thecheckout-order-message, html body #thecheckout-newsletter, html body #thecheckout-psgdpr, html body .terms-and-conditions { margin-bottom: 22px !important; } html body .terms-and-conditions:last-child { margin-bottom: 0 !important; } @media (max-width: 575px) { html body #thecheckout-cart-summary, html body #thecheckout-login-form, html body #thecheckout-account, html body #thecheckout-address-invoice, html body #thecheckout-address-delivery, html body #thecheckout-shipping, html body #thecheckout-payment, html body #thecheckout-order-message, html body #thecheckout-newsletter, html body #thecheckout-psgdpr, html body .terms-and-conditions { margin-bottom: 16px !important; } } /* ========================================================= ODSTĘP W PIONIE MIĘDZY WSZYSTKIMI RZĘDAMI CHECKOUTU (na głównym kontenerze pionowym) ========================================================= */ html body .vertical > * { margin-bottom: 22px !important; } html body .vertical > *:last-child { margin-bottom: 0 !important; } @media (max-width: 575px) { html body .vertical > * { margin-bottom: 16px !important; } } /* ========================================================= ODSTĘP POMIĘDZY LEWĄ I PRAWĄ KOLUMNĄ ========================================================= */ #thecheckout-form .flex-split-horizontal.checkout-area-3 { column-gap: 24px !important; row-gap: 18px !important; } /* Szerokość kolumn po odjęciu odstępu */ #thecheckout-form .flex-split-horizontal.checkout-area-3 > .blocks.checkout-area-4 { flex: 1 1 calc(50% - 12px) !important; flex-basis: calc(50% - 12px) !important; width: calc(50% - 12px) !important; min-width: calc(50% - 12px) !important; max-width: calc(50% - 12px) !important; } /* Telefon – boxy jeden pod drugim */ @media (max-width: 767px) { #thecheckout-form .flex-split-horizontal.checkout-area-3 { column-gap: 0 !important; row-gap: 14px !important; } #thecheckout-form .flex-split-horizontal.checkout-area-3 > .blocks.checkout-area-4 { flex-basis: 100% !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; } } /* ========================================================= GLOBALNE ODSTĘPY W UKŁADZIE THECHECKOUT ========================================================= */ .flex-split-horizontal.checkout-area-3 { display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; column-gap: 20px !important; row-gap: 20px !important; width: 100% !important; margin-right: 0 !important; margin-bottom: 20px !important; margin-left: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* Dwie kolumny */ .flex-split-horizontal.checkout-area-3 > .blocks.checkout-area-4 { flex: 0 1 calc(50% - 10px) !important; flex-basis: calc(50% - 10px) !important; width: calc(50% - 10px) !important; min-width: calc(50% - 10px) !important; max-width: calc(50% - 10px) !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* Jeśli w rzędzie jest tylko jeden box, pozostaje pełnej szerokości */ .flex-split-horizontal.checkout-area-3 > .blocks.checkout-area-4:only-child { flex: 0 0 100% !important; flex-basis: 100% !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; } /* Właściwy box zawsze zajmuje całą szerokość swojej kolumny */ .flex-split-horizontal.checkout-area-3 > .blocks.checkout-area-4 > .checkout-block.main-block { width: 100% !important; margin: 0 !important; box-sizing: border-box !important; } /* Dodatkowy pionowy odstęp pomiędzy kolejnymi rzędami */ .flex-split-horizontal.checkout-area-3 + .flex-split-horizontal.checkout-area-3 { margin-top: 20px !important; } /* ========================================================= TELEFON ========================================================= */ @media (max-width: 767px) { .flex-split-horizontal.checkout-area-3 { flex-direction: column !important; column-gap: 0 !important; row-gap: 14px !important; margin-bottom: 14px !important; } .flex-split-horizontal.checkout-area-3 > .blocks.checkout-area-4 { flex: 0 0 100% !important; flex-basis: 100% !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; } } /* ========================================================= MASZ JUŻ KONTO – WYRÓWNANIE DO LEWEJ ========================================================= */ #thecheckout-login-form .offer-login { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; width: 100% !important; min-height: 108px !important; margin: 0 !important; padding: 18px 20px 18px 60px !important; text-align: left !important; box-sizing: border-box !important; } /* Tytuł */ #thecheckout-login-form .offer-login .already-account-label { display: block !important; align-self: flex-start !important; width: auto !important; margin: 0 0 11px !important; padding: 0 !important; color: #ffffff !important; font-size: 16px !important; font-weight: 800 !important; line-height: 1.25 !important; text-align: left !important; } /* Kontener przycisku */ #thecheckout-login-form .offer-login .classic-login { display: block !important; align-self: flex-start !important; width: auto !important; margin: 0 !important; padding: 0 !important; text-align: left !important; } /* Przycisk */ #thecheckout-login-form .offer-login .classic-login .log-in { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 106px !important; min-height: 38px !important; margin: 0 !important; padding: 10px 17px !important; color: #101920 !important; background: #EF7F1A !important; border: 0 !important; border-radius: 6px !important; font-size: 12px !important; font-weight: 800 !important; line-height: 1.2 !important; text-align: center !important; text-decoration: none !important; box-sizing: border-box !important; } /* Hover */ #thecheckout-login-form .offer-login .classic-login .log-in:hover { color: #ffffff !important; background: #8aaa3b !important; } /* Telefon */ @media (max-width: 575px) { #thecheckout-login-form .offer-login { min-height: 100px !important; padding: 16px 15px 16px 54px !important; } #thecheckout-login-form .offer-login .already-account-label { font-size: 15px !important; } } /* ========================================================= KRZYŻYK USUWANIA PRODUKTU Z KOSZYKA ========================================================= */ #thecheckout-cart-summary .remove-from-cart { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 38px !important; min-width: 38px !important; height: 38px !important; padding: 0 !important; overflow: visible !important; color: #101920 !important; background: #f1f3f4 !important; border: 1px solid #e5e8ea !important; border-radius: 6px !important; font-size: 0 !important; text-decoration: none !important; cursor: pointer !important; } /* Krzyżyk */ #thecheckout-cart-summary .remove-from-cart::before { content: "×" !important; display: block !important; color: #101920 !important; font-family: Arial, sans-serif !important; font-size: 25px !important; font-weight: 400 !important; line-height: 1 !important; transform: translateY(-1px); } /* Hover */ #thecheckout-cart-summary .remove-from-cart:hover { background: #d84040 !important; border-color: #d84040 !important; } #thecheckout-cart-summary .remove-from-cart:hover::before { color: #ffffff !important; } /* ========================================================= POPRAWKA PODSUMOWANIA KOSZYKA ========================================================= */ /* Usunięcie tła z wewnętrznych card-block w podsumowaniu */ #thecheckout-cart-summary .cart-summary .card-block { background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; } /* ========================================================= ODSTĘPY W INPUTACH I PŁYWAJĄCYCH LABELACH ========================================================= */ /* Tekst wpisywany w polach */ .checkout-block.main-block input.form-control, .checkout-block.main-block textarea.form-control, .checkout-block.main-block select.form-control { padding-right: 16px !important; padding-left: 16px !important; text-indent: 0 !important; box-sizing: border-box !important; } /* Zwykłe placeholdery */ .checkout-block.main-block input.form-control::placeholder, .checkout-block.main-block textarea.form-control::placeholder { color: #aeb7bb !important; opacity: 1 !important; text-indent: 0 !important; } /* Pływające etykiety, np. E-mail, Imię, Nazwisko */ .checkout-block.main-block .has-float-label > .field-label { right: auto !important; left: 16px !important; max-width: calc(100% - 32px) !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* Obsługa innego zapisu klasy w module */ .checkout-block.main-block .has-float-label > .filed-label { right: auto !important; left: 16px !important; max-width: calc(100% - 32px) !important; margin: 0 !important; padding: 0 !important; } /* Telefon */ @media (max-width: 575px) { .checkout-block.main-block input.form-control, .checkout-block.main-block textarea.form-control, .checkout-block.main-block select.form-control { padding-right: 14px !important; padding-left: 14px !important; } .checkout-block.main-block .has-float-label > .field-label, .checkout-block.main-block .has-float-label > .filed-label { left: 14px !important; max-width: calc(100% - 28px) !important; } } /* ========================================================= CHECKBOXY W FORMULARZACH CHECKOUTU ========================================================= */ /* Cały wiersz checkboxa */ .checkout-block.main-block .form-group.checkbox > label { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; cursor: pointer !important; } /* Układ: checkbox + treść */ .checkout-block.main-block .form-group.checkbox .custom-checkbox { position: relative !important; display: grid !important; grid-template-columns: 22px minmax(0, 1fr) !important; column-gap: 11px !important; align-items: center !important; width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* Prawdziwe pole – niewidoczne, ale klikalne */ .checkout-block.main-block .form-group.checkbox .custom-checkbox > input[type="checkbox"] { position: absolute !important; top: 50% !important; left: 0 !important; z-index: 4 !important; display: block !important; visibility: visible !important; width: 22px !important; height: 22px !important; margin: 0 !important; opacity: 0 !important; transform: translateY(-50%) !important; cursor: pointer !important; } /* Widoczny kwadrat */ .checkout-block.main-block .form-group.checkbox .custom-checkbox > input[type="checkbox"] + span { position: relative !important; grid-column: 1 !important; display: flex !important; visibility: visible !important; align-items: center !important; justify-content: center !important; width: 22px !important; min-width: 22px !important; height: 22px !important; margin: 0 !important; padding: 0 !important; background: #ffffff !important; border: 2px solid #8aaa3b !important; border-radius: 4px !important; opacity: 1 !important; box-sizing: border-box !important; pointer-events: none !important; } /* Tekst checkboxa */ .checkout-block.main-block .form-group.checkbox .custom-checkbox > .label { grid-column: 2 !important; display: block !important; width: auto !important; margin: 0 !important; padding: 0 !important; color: #101920 !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.45 !important; text-align: left !important; } /* Zaznaczony checkbox */ .checkout-block.main-block .form-group.checkbox .custom-checkbox > input[type="checkbox"]:checked + span { background: #8aaa3b !important; border-color: #8aaa3b !important; } /* Haczyk domyślnie ukryty */ .checkout-block.main-block .form-group.checkbox .custom-checkbox .check-icon, .checkout-block.main-block .form-group.checkbox .custom-checkbox .checkbox-checked { display: none !important; } /* Haczyk po zaznaczeniu */ .checkout-block.main-block .form-group.checkbox .custom-checkbox > input[type="checkbox"]:checked + span .check-icon, .checkout-block.main-block .form-group.checkbox .custom-checkbox > input[type="checkbox"]:checked + span .checkbox-checked { display: block !important; visibility: visible !important; width: auto !important; height: auto !important; margin: 0 !important; color: #ffffff !important; background: transparent !important; font-size: 17px !important; line-height: 1 !important; opacity: 1 !important; } /* Fokus klawiatury */ .checkout-block.main-block .form-group.checkbox .custom-checkbox > input[type="checkbox"]:focus + span { outline: 3px solid rgba(138, 170, 59, 0.25) !important; outline-offset: 2px !important; } /* ========================================================= CHECKBOX „JESTEM KLIENTEM BIZNESOWYM” ========================================================= */ #thecheckout-address-invoice .business-private-checkboxes .custom-checkbox, #thecheckout-address-delivery .business-private-checkboxes .custom-checkbox { position: relative !important; display: grid !important; grid-template-columns: 22px minmax(0, 1fr) !important; column-gap: 11px !important; align-items: center !important; width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* Prawdziwy checkbox – niewidoczny, ale klikalny */ #thecheckout-address-invoice .business-private-checkboxes .custom-checkbox > input[type="checkbox"], #thecheckout-address-delivery .business-private-checkboxes .custom-checkbox > input[type="checkbox"] { position: absolute !important; top: 50% !important; left: 0 !important; z-index: 4 !important; display: block !important; visibility: visible !important; width: 22px !important; height: 22px !important; margin: 0 !important; opacity: 0 !important; transform: translateY(-50%) !important; cursor: pointer !important; } /* Widoczny kwadrat */ #thecheckout-address-invoice .business-private-checkboxes .custom-checkbox > input[type="checkbox"] + span, #thecheckout-address-delivery .business-private-checkboxes .custom-checkbox > input[type="checkbox"] + span { position: relative !important; grid-column: 1 !important; display: flex !important; visibility: visible !important; align-items: center !important; justify-content: center !important; width: 22px !important; min-width: 22px !important; height: 22px !important; margin: 0 !important; padding: 0 !important; background: #ffffff !important; border: 2px solid #8aaa3b !important; border-radius: 4px !important; opacity: 1 !important; box-sizing: border-box !important; pointer-events: none !important; } /* Treść obok checkboxa */ #thecheckout-address-invoice .business-private-checkboxes .custom-checkbox > .label, #thecheckout-address-delivery .business-private-checkboxes .custom-checkbox > .label { grid-column: 2 !important; display: block !important; width: auto !important; margin: 0 !important; padding: 0 !important; color: #101920 !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.45 !important; text-align: left !important; } /* Stan zaznaczony */ #thecheckout-address-invoice .business-private-checkboxes .custom-checkbox > input[type="checkbox"]:checked + span, #thecheckout-address-delivery .business-private-checkboxes .custom-checkbox > input[type="checkbox"]:checked + span { background: #8aaa3b !important; border-color: #8aaa3b !important; } /* Haczyk domyślnie ukryty */ #thecheckout-address-invoice .business-private-checkboxes .custom-checkbox .check-icon, #thecheckout-address-delivery .business-private-checkboxes .custom-checkbox .check-icon { display: none !important; } /* Haczyk po zaznaczeniu */ #thecheckout-address-invoice .business-private-checkboxes .custom-checkbox > input[type="checkbox"]:checked + span .check-icon, #thecheckout-address-delivery .business-private-checkboxes .custom-checkbox > input[type="checkbox"]:checked + span .check-icon { display: block !important; visibility: visible !important; color: #ffffff !important; background: transparent !important; font-size: 17px !important; line-height: 1 !important; opacity: 1 !important; } /* ========================================================= USUNIĘCIE FLAGI Z POLA TELEFONU ========================================================= */ /* Ukrycie flagi i rozwijanej listy krajów */ .checkout-block.main-block .iti .iti__country-container { display: none !important; } /* Pole telefonu na pełną szerokość */ .checkout-block.main-block .iti { display: block !important; width: 100% !important; } /* Przywrócenie normalnego paddingu po usunięciu flagi */ .checkout-block.main-block .iti input[type="tel"], .checkout-block.main-block input.form-control[type="tel"] { width: 100% !important; padding-right: 16px !important; padding-left: 16px !important; text-indent: 0 !important; box-sizing: border-box !important; } /* Telefon */ @media (max-width: 575px) { .checkout-block.main-block .iti input[type="tel"], .checkout-block.main-block input.form-control[type="tel"] { padding-right: 14px !important; padding-left: 14px !important; } } /* ========================================================= WYRÓWNANIE POLA TELEFONU PO USUNIĘCIU FLAGI ========================================================= */ #thecheckout-address-invoice input.form-control.orig-field.iti__tel-input, #thecheckout-address-delivery input.form-control.orig-field.iti__tel-input, #thecheckout-account input.form-control.orig-field.iti__tel-input, .checkout-block.main-block input[data-tc-intl-tel-input="1"] { display: block !important; width: 100% !important; min-height: 48px !important; margin: 0 !important; padding: 16px 14px 6px 16px !important; padding-left: 16px !important; color: #101920 !important; background: #f8f9f7 !important; border: 1px solid #d5dadd !important; border-radius: 7px !important; font-family: inherit !important; font-size: 13px !important; line-height: 1.3 !important; text-indent: 0 !important; box-shadow: none !important; box-sizing: border-box !important; } /* Placeholder numeru telefonu */ #thecheckout-address-invoice input.iti__tel-input::placeholder, #thecheckout-address-delivery input.iti__tel-input::placeholder, #thecheckout-account input.iti__tel-input::placeholder { color: #aeb7bb !important; opacity: 1 !important; text-indent: 0 !important; } /* Pływający napis „Telefon” */ #thecheckout-address-invoice .iti + .field-label, #thecheckout-address-delivery .iti + .field-label, #thecheckout-account .iti + .field-label { right: auto !important; left: 16px !important; } /* Telefon */ @media (max-width: 575px) { #thecheckout-address-invoice input.form-control.orig-field.iti__tel-input, #thecheckout-address-delivery input.form-control.orig-field.iti__tel-input, #thecheckout-account input.form-control.orig-field.iti__tel-input, .checkout-block.main-block input[data-tc-intl-tel-input="1"] { padding-right: 14px !important; padding-left: 14px !important; } } /* ========================================================= NAPRAWA KLIKANIA WE WSZYSTKIE CHECKBOXY ========================================================= */ /* Kontenery checkboxów muszą przyjmować kliknięcia */ body#checkout .custom-checkbox { pointer-events: auto !important; } /* Stylujemy bezpośrednio prawdziwy input */ body#checkout #conditions-to-approve .custom-checkbox > input[type="checkbox"], body#checkout .checkout-block.main-block .custom-checkbox > input[type="checkbox"] { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; inset: auto !important; z-index: 10 !important; display: block !important; visibility: visible !important; width: 22px !important; min-width: 22px !important; max-width: 22px !important; height: 22px !important; min-height: 22px !important; max-height: 22px !important; margin: 0 !important; padding: 0 !important; appearance: none !important; -webkit-appearance: none !important; background-color: #ffffff !important; background-image: none !important; border: 2px solid #8aaa3b !important; border-radius: 4px !important; opacity: 1 !important; clip: auto !important; clip-path: none !important; transform: none !important; cursor: pointer !important; pointer-events: auto !important; box-sizing: border-box !important; } /* Zaznaczony checkbox */ body#checkout #conditions-to-approve .custom-checkbox > input[type="checkbox"]:checked, body#checkout .checkout-block.main-block .custom-checkbox > input[type="checkbox"]:checked { background-color: #8aaa3b !important; border-color: #8aaa3b !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 14px 14px !important; } /* Ukrywamy stary dekoracyjny kwadrat */ body#checkout #conditions-to-approve .custom-checkbox > input[type="checkbox"] + span, body#checkout .checkout-block.main-block .custom-checkbox > input[type="checkbox"] + span { display: none !important; } /* Fokus klawiatury */ body#checkout #conditions-to-approve .custom-checkbox > input[type="checkbox"]:focus, body#checkout .checkout-block.main-block .custom-checkbox > input[type="checkbox"]:focus { outline: 3px solid rgba(138, 170, 59, 0.28) !important; outline-offset: 2px !important; } /* ========================================================= UKRYCIE CHECKBOXA „DOSTAWA POD INNY ADRES” ========================================================= */ body#checkout .second-address .custom-checkbox > input[type="checkbox"] { position: absolute !important; top: 0 !important; left: 0 !important; z-index: -1 !important; width: 1px !important; min-width: 1px !important; max-width: 1px !important; height: 1px !important; min-height: 1px !important; max-height: 1px !important; margin: 0 !important; padding: 0 !important; opacity: 0 !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; overflow: hidden !important; } /* Usunięcie miejsca zajmowanego przez checkbox */ body#checkout .second-address .custom-checkbox { position: relative !important; display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* Czarny pasek nadal pozostaje klikalny */ body#checkout .second-address .custom-checkbox > label { display: flex !important; width: 100% !important; margin: 0 !important; cursor: pointer !important; box-sizing: border-box !important; } /* ========================================================= DEFINYTYWNE UKRYCIE CHECKBOXA DOSTAWY NA INNY ADRES ========================================================= */ body#checkout #thecheckout-address-invoice .second-address input#ship-to-different-address { display: none !important; visibility: hidden !important; position: absolute !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; } /* Ukrycie starego graficznego kwadratu */ body#checkout #thecheckout-address-invoice .second-address input#ship-to-different-address + span { display: none !important; } /* Usunięcie miejsca po checkboxie */ body#checkout #thecheckout-address-invoice .second-address .custom-checkbox { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* Cały czarny pasek pozostaje klikalny */ body#checkout #thecheckout-address-invoice .second-address label[for="ship-to-different-address"] { display: flex !important; width: 100% !important; margin: 0 !important; cursor: pointer !important; } /* ========================================================= ODSTĘP WOKÓŁ PRZYCISKU INPOST ========================================================= */ #thecheckout-shipping .inpost-shipping-button { margin: 12px 16px 14px !important; } /* Usunięcie ewentualnego przyklejenia przez kontener */ #thecheckout-shipping .carrier-extra-content .form-group { margin: 0 !important; } /* Telefon */ @media (max-width: 575px) { #thecheckout-shipping .inpost-shipping-button { margin: 10px 12px 12px !important; } } #thecheckout-payment .przelewy24-checkbox-group { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 9px; align-items: start; margin: 0 0 12px !important; padding: 11px 12px; background: none; border: 0px solid #dfe3e5; border-radius: 6px; } /* ========================================================= INFORMACJA O WYBRANYM PACZKOMACIE ========================================================= */ #thecheckout-shipping .inpost-shipping-machine-info { width: auto !important; margin: 12px 16px 0 !important; padding: 10px 12px !important; background: #ffffff !important; border-left: 3px solid #8aaa3b !important; border-radius: 4px !important; box-shadow: none !important; box-sizing: border-box !important; } /* Przycisk pod wybranym Paczkomatem */ #thecheckout-shipping .inpost-shipping-machine-info + .form-group .inpost-shipping-button { margin: 12px 16px 14px !important; } /* Telefon */ @media (max-width: 575px) { #thecheckout-shipping .inpost-shipping-machine-info { margin: 10px 12px 0 !important; padding: 9px 10px !important; } #thecheckout-shipping .inpost-shipping-machine-info + .form-group .inpost-shipping-button { margin: 10px 12px 12px !important; } } /* ========================================================= PRZELEWY24 – USUNIĘCIE BIAŁEGO TŁA I RAMKI ZGODY ========================================================= */ #thecheckout-payment .przelewy24-checkbox-group { background: transparent !important; background-color: transparent !important; border: 0 !important; border-color: transparent !important; border-radius: 0 !important; box-shadow: none !important; outline: 0 !important; } /* ========================================================= PODMIANA NAGŁÓWKA – ZAKUP JAKO GOŚĆ ========================================================= */ #thecheckout-account { position: relative !important; } #thecheckout-account > .inner-area { position: relative !important; } /* Ukrycie oryginalnego tekstu „Utwórz konto” */ #thecheckout-account .block-header.account-header { position: relative !important; color: transparent !important; font-size: 0 !important; } /* Pozostawienie żółtej ikony */ #thecheckout-account .block-header.account-header::before { color: #EF7F1A !important; font-size: 24px !important; } /* Nowy tytuł */ #thecheckout-account .block-header.account-header::after { content: "Kup jako gość lub załóż konto" !important; position: absolute !important; top: 16px !important; right: 18px !important; left: 60px !important; display: block !important; color: #ffffff !important; background: transparent !important; font-family: inherit !important; font-size: 17px !important; font-weight: 800 !important; line-height: 1.25 !important; text-align: left !important; pointer-events: none !important; } /* Nowy podtytuł */ #thecheckout-account > .inner-area::after { content: "Podaj adres e-mail i kontynuuj bez rejestracji" !important; position: absolute !important; top: 41px !important; right: 18px !important; left: 60px !important; z-index: 5 !important; display: block !important; color: #dfe5e8 !important; background: transparent !important; font-family: inherit !important; font-size: 10px !important; font-weight: 400 !important; line-height: 1.3 !important; text-align: left !important; pointer-events: none !important; } /* Telefon */ @media (max-width: 575px) { #thecheckout-account .block-header.account-header::after { top: 16px !important; right: 12px !important; left: 51px !important; font-size: 14px !important; } #thecheckout-account > .inner-area::after { top: 39px !important; right: 12px !important; left: 51px !important; font-size: 9px !important; } } /* ========================================================= UKRYCIE REJESTRACJI PO ZŁOŻENIU ZAMÓWIENIA ========================================================= */ body#order-confirmation #content-hook_payment_return + div.card { display: none !important; } /* Dodatkowe zabezpieczenie dla innego układu elementów */ body#order-confirmation #main > div.card:has(.card-block > form[method="post"]) { display: none !important; } /* Ukrycie podtytułu pod nagłówkiem zakupu gościnnego */ #thecheckout-account > .inner-area::after { content: none !important; display: none !important; } .elementor-widget-axps-products .alert.alert-info { font-size: 0; } .elementor-widget-axps-products .alert.alert-info::after { content: "Obecnie brak produktów."; font-size: 16px; } /* Pokaż kategorię „Filtry różnych producentów” */ html body .elementor-element-4e2fab02 ul.nrt_mega_menu.menu-vertical > li.nrt_mega_27 { display: block !important; visibility: visible !important; opacity: 1 !important; height: auto !important; } /* Całkowicie usuń Show More / Show Less */ html body .elementor-element-4e2fab02 ul.nrt_mega_menu.menu-vertical > li.show-more-cat { display: none !important; visibility: hidden !important; height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } /* Pokaż wszystkie kategorie ukrywane przez moduł */ html body .elementor-element-4e2fab02 ul.nrt_mega_menu.menu-vertical > li.more-cate { display: block !important; visibility: visible !important; opacity: 1 !important; height: auto !important; } /* Usuń Show More / Show Less */ html body .elementor-element-4e2fab02 ul.nrt_mega_menu.menu-vertical > li.show-more-cat { display: none !important; } @media (max-width: 767px) { /* Układ menu umożliwiający zmianę kolejności */ .wrapper-menu-mobile > ul.mo_element_ul_depth_0 { display: flex; flex-direction: column; } /* Przeniesienie pozycji „Kategorie” na samą górę */ .wrapper-menu-mobile > ul.mo_element_ul_depth_0 > li:has(> .menu_a_wrap.menu-item-has-children) { order: -1; } /* Pogrubienie napisu „Kategorie” */ .wrapper-menu-mobile .menu_a_wrap.menu-item-has-children > a { font-weight: 700 !important; } } @media (max-width: 767px) { /* Ukrycie słowa „Megamenu”, pozostawienie krzyżyka */ #canvas-menu-mobile .title-canvas-widget { font-size: 0 !important; } #canvas-menu-mobile .title-canvas-widget::after { font-size: 18px !important; } /* Ukrycie pozycji „Strona główna” */ .wrapper-menu-mobile .nrt_mo_mega_1 { display: none !important; } /* Ukrycie listy ikon społecznościowych */ .canvas-mo-mobile .social-list { display: none !important; } } @media (max-width: 767px) { #canvas-menu-mobile .social-list { display: none !important; } } #RR__docs { max-width: 100%!important; margin: 0 auto 0; line-height: normal !important; white-space: initial !important; } body.adminaxoncreator-settings #content > .bootstrap > .alert-danger { display: none !important; } .summary-container .product-variants .control-label { display: table-cell; margin-bottom: 0; padding-right: 20px; color: #fff; white-space: nowrap; font-weight: var(--font-weight-semi); font-family: var(--font-family-semi); min-width: 70px; vertical-align: top; line-height: 30px; padding-top: 4px; padding-bottom: 4px; } .radio-label { min-width: 32px; line-height: 30px; padding: 0 8px; text-align: center; font-weight: normal; border: 1px solid var(--ax-line-color); color: #fff; font-size: 12px; box-shadow: none; display: inline-block; background: var(--ax-bg-wrapper); transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; -ms-transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; } /* ========================================================= AKCESORIA PRZEMYSLOWE - KOLOR MARKI #EF7F1A Przyciski "Dodaj do koszyka" + menu kategorii ========================================================= */ /* --------------------------------------------------------- PRZYCISKI "DODAJ DO KOSZYKA" --------------------------------------------------------- */ body .add-to-cart, body button.add-to-cart, body .btn.add-to-cart, body [data-button-action="add-to-cart"], body .product-add-to-cart .add-to-cart, body .product-miniature .add-to-cart, body .product-miniature .ajax_add_to_cart_button, body .ajax_add_to_cart_button { background: #EF7F1A !important; background-color: #EF7F1A !important; border-color: #EF7F1A !important; } body .add-to-cart:hover, body .add-to-cart:focus, body button.add-to-cart:hover, body button.add-to-cart:focus, body .btn.add-to-cart:hover, body .btn.add-to-cart:focus, body [data-button-action="add-to-cart"]:hover, body [data-button-action="add-to-cart"]:focus, body .product-add-to-cart .add-to-cart:hover, body .product-add-to-cart .add-to-cart:focus, body .product-miniature .add-to-cart:hover, body .product-miniature .add-to-cart:focus, body .product-miniature .ajax_add_to_cart_button:hover, body .product-miniature .ajax_add_to_cart_button:focus, body .ajax_add_to_cart_button:hover, body .ajax_add_to_cart_button:focus { background: #EF7F1A !important; background-color: #EF7F1A !important; border-color: #EF7F1A !important; } /* --------------------------------------------------------- LEWE MENU KATEGORII - KOLOR AKCENTU Widget ograniczony do .elementor-element-4e2fab02, wiec zmiana nie rozlewa sie na pozostale menu. --------------------------------------------------------- */ .elementor-element-4e2fab02 { --ax-primary-color: #EF7F1A; --ax-color-primary: #EF7F1A; --primary-color: #EF7F1A; --theme-color: #EF7F1A; --accent-color: #EF7F1A; } /* Zielone kropki przy kategoriach -> pomaranczowe */ .elementor-element-4e2fab02 ul.nrt_mega_menu.menu-vertical > li > a::before, .elementor-element-4e2fab02 ul.nrt_mega_menu.menu-vertical > li > .menu_a_wrap::before, .elementor-element-4e2fab02 ul.nrt_mega_menu.menu-vertical > li > .menu_a_wrap > a::before, .elementor-element-4e2fab02 ul.nrt_mega_menu.menu-vertical > li > a > span::before, .elementor-element-4e2fab02 ul.nrt_mega_menu.menu-vertical > li > .menu_a_wrap > a > span::before { background-color: #EF7F1A !important; border-color: #EF7F1A !important; color: #EF7F1A !important; } /* Jezeli kropka jest osobnym elementem/ikona */ .elementor-element-4e2fab02 ul.nrt_mega_menu.menu-vertical .menu-item-dot, .elementor-element-4e2fab02 ul.nrt_mega_menu.menu-vertical .item-dot, .elementor-element-4e2fab02 ul.nrt_mega_menu.menu-vertical .dot, .elementor-element-4e2fab02 ul.nrt_mega_menu.menu-vertical .menu-icon, .elementor-element-4e2fab02 ul.nrt_mega_menu.menu-vertical .item-icon { background-color: #EF7F1A !important; border-color: #EF7F1A !important; color: #EF7F1A !important; } /* Zolty pasek / border pod naglowkiem "Strona glowna" -> pomaranczowy */ .elementor-element-4e2fab02 .block-title::before, .elementor-element-4e2fab02 .block-title::after, .elementor-element-4e2fab02 .title_block::before, .elementor-element-4e2fab02 .title_block::after, .elementor-element-4e2fab02 .widget-title::before, .elementor-element-4e2fab02 .widget-title::after, .elementor-element-4e2fab02 .title-menu::before, .elementor-element-4e2fab02 .title-menu::after, .elementor-element-4e2fab02 .title_vertical_menu::before, .elementor-element-4e2fab02 .title_vertical_menu::after, .elementor-element-4e2fab02 .elementor-heading-title::before, .elementor-element-4e2fab02 .elementor-heading-title::after { background-color: #EF7F1A !important; border-color: #EF7F1A !important; } .elementor-element-4e2fab02 .block-title, .elementor-element-4e2fab02 .title_block, .elementor-element-4e2fab02 .widget-title, .elementor-element-4e2fab02 .title-menu, .elementor-element-4e2fab02 .title_vertical_menu, .elementor-element-4e2fab02 .elementor-heading-title { border-color: #EF7F1A !important; } /* ========================================================= FINALNE NADPISANIE KOLORU PRZYCISKOW NA KARCIE PRODUKTU Wyższa specyficzność niż reguły #product ... w motywie ========================================================= */ html body#product .summary-container .btn-primary, html body#product .summary-container button.btn-primary, html body#product .summary-container .add-to-cart, html body#product .summary-container button.add-to-cart, html body#product .summary-container .product-add-to-cart .add-to-cart, html body#product .summary-container .js-mailalert .btn, html body#product .summary-container .js-mailalert button, html body#product .summary-container .mailalert .btn, html body#product .summary-container .mailalert button { background: #EF7F1A !important; background-color: #EF7F1A !important; border-color: #EF7F1A !important; } /* Przycisk niedostępnego produktu również ma być pomarańczowy */ html body#product .summary-container .add-to-cart:disabled, html body#product .summary-container .add-to-cart[disabled], html body#product .summary-container button.add-to-cart:disabled, html body#product .summary-container button.add-to-cart[disabled], html body#product .summary-container .btn-primary:disabled, html body#product .summary-container .btn-primary[disabled] { background: #EF7F1A !important; background-color: #EF7F1A !important; border-color: #EF7F1A !important; } /* Hover tylko dla aktywnych przycisków */ html body#product .summary-container .btn-primary:not(:disabled):hover, html body#product .summary-container .btn-primary:not(:disabled):focus, html body#product .summary-container .add-to-cart:not(:disabled):hover, html body#product .summary-container .add-to-cart:not(:disabled):focus, html body#product .summary-container .js-mailalert .btn:hover, html body#product .summary-container .js-mailalert .btn:focus { background: #d96e12 !important; background-color: #d96e12 !important; border-color: #d96e12 !important; } /* ========================================================= LISTA PRODUKTOW - 3 PRODUKTY W RZEDZIE NA DESKTOPIE Dokladne nadpisanie reguly motywu dla strony kategorii. Motyw ustawia 25% (4 kolumny) od 1200 px, dlatego uzywamy tego samego selektora i zmieniamy szerokosc na 33.333333%. ========================================================= */ @media (min-width: 1200px) { html body#category #box-product-grid .archive-wrapper-items { display: flex !important; flex-wrap: wrap !important; } html body#category #box-product-grid .archive-wrapper-items > .item { -ms-flex: 0 0 33.333333% !important; flex: 0 0 33.333333% !important; width: 33.333333% !important; max-width: 33.333333% !important; } } /* ========================================================= LEWE MENU KATEGORII - KOLORYSTYKA POMARANCZOWA ========================================================= */ /* Główny box */ html body #left-column .widget.block-categories, html body #left-content .widget.block-categories { border-radius: 20px !important; overflow: hidden !important; background: #ffffff !important; } /* ========================================================= NAGŁÓWEK "STRONA GŁÓWNA" ========================================================= */ html body #left-column .widget.block-categories .widget-title, html body #left-column .widget.block-categories .title-block, html body #left-column .widget.block-categories .block-title, html body #left-content .widget.block-categories .widget-title, html body #left-content .widget.block-categories .title-block, html body #left-content .widget.block-categories .block-title { background: #101920 !important; color: #ffffff !important; } /* Tekst nagłówka */ html body #left-column .widget.block-categories .widget-title *, html body #left-column .widget.block-categories .title-block *, html body #left-column .widget.block-categories .block-title *, html body #left-content .widget.block-categories .widget-title *, html body #left-content .widget.block-categories .title-block *, html body #left-content .widget.block-categories .block-title * { color: #ffffff !important; } /* ========================================================= POMARAŃCZOWY PASEK POD NAGŁÓWKIEM ========================================================= */ html body #left-column .widget.block-categories .widget-title::after, html body #left-column .widget.block-categories .title-block::after, html body #left-column .widget.block-categories .block-title::after, html body #left-column .widget.block-categories .widget-title span::after, html body #left-column .widget.block-categories .title-block span::after, html body #left-content .widget.block-categories .widget-title::after, html body #left-content .widget.block-categories .title-block::after, html body #left-content .widget.block-categories .block-title::after { background: #EF7F1A !important; background-color: #EF7F1A !important; border-color: #EF7F1A !important; } /* Jeżeli pasek jest robiony borderem */ html body #left-column .widget.block-categories .widget-title, html body #left-column .widget.block-categories .title-block, html body #left-content .widget.block-categories .widget-title, html body #left-content .widget.block-categories .title-block { border-color: #EF7F1A !important; } /* ========================================================= KROPKI PRZY KATEGORIACH ========================================================= */ html body #left-column .widget.block-categories li > a::before, html body #left-column .widget.block-categories li::before, html body #left-content .widget.block-categories li > a::before, html body #left-content .widget.block-categories li::before, html body #left-column .widget.block-categories .category-top-menu li > a::before, html body #left-column .widget.block-categories .category-sub-menu li > a::before { background: #EF7F1A !important; background-color: #EF7F1A !important; border-color: #EF7F1A !important; } /* Jeżeli kropka ma dodatkową obwódkę/halo */ html body #left-column .widget.block-categories li > a::before, html body #left-content .widget.block-categories li > a::before { box-shadow: 0 0 0 6px rgba(239, 127, 26, 0.12) !important; } /* ========================================================= LINKI KATEGORII ========================================================= */ html body #left-column .widget.block-categories li > a, html body #left-content .widget.block-categories li > a { color: #101920 !important; transition: color .2s ease, background-color .2s ease !important; } /* Hover */ html body #left-column .widget.block-categories li:hover > a, html body #left-column .widget.block-categories li > a:hover, html body #left-content .widget.block-categories li:hover > a, html body #left-content .widget.block-categories li > a:hover { color: #EF7F1A !important; } /* ========================================================= PLUS / IKONA ROZWIJANIA ========================================================= */ html body #left-column .widget.block-categories .collapse-icons, html body #left-column .widget.block-categories .navbar-toggler, html body #left-column .widget.block-categories .toggle-menu, html body #left-column .widget.block-categories .open-menu, html body #left-content .widget.block-categories .collapse-icons, html body #left-content .widget.block-categories .navbar-toggler, html body #left-content .widget.block-categories .toggle-menu, html body #left-content .widget.block-categories .open-menu { color: #EF7F1A !important; } /* ========================================================= AKTYWNA / OTWARTA KATEGORIA ========================================================= */ html body #left-column .widget.block-categories li.current > a, html body #left-column .widget.block-categories li.active > a, html body #left-content .widget.block-categories li.current > a, html body #left-content .widget.block-categories li.active > a { color: #EF7F1A !important; font-weight: 700 !important; } /* ========================================================= LEWE MENU KATEGORII - HOVER #F12735 ========================================================= */ /* Tekst kategorii po najechaniu */ html body #left-column .widget.block-categories li:hover > a, html body #left-column .widget.block-categories li > a:hover, html body #left-content .widget.block-categories li:hover > a, html body #left-content .widget.block-categories li > a:hover { color: #F12735 !important; } /* Kropka po najechaniu */ html body #left-column .widget.block-categories li:hover > a::before, html body #left-content .widget.block-categories li:hover > a::before { background: #F12735 !important; background-color: #F12735 !important; border-color: #F12735 !important; box-shadow: 0 0 0 6px rgba(241, 39, 53, 0.12) !important; } /* Plus / minus po najechaniu */ html body #left-column .widget.block-categories .collapse-icons:hover, html body #left-column .widget.block-categories .navbar-toggler:hover, html body #left-column .widget.block-categories .toggle-menu:hover, html body #left-column .widget.block-categories .open-menu:hover, html body #left-content .widget.block-categories .collapse-icons:hover, html body #left-content .widget.block-categories .navbar-toggler:hover, html body #left-content .widget.block-categories .toggle-menu:hover, html body #left-content .widget.block-categories .open-menu:hover { color: #F12735 !important; } /* Rozwinięta / aktywna kategoria po najechaniu */ html body #left-column .widget.block-categories li.current:hover > a, html body #left-column .widget.block-categories li.active:hover > a, html body #left-content .widget.block-categories li.current:hover > a, html body #left-content .widget.block-categories li.active:hover > a { color: #F12735 !important; } /* ========================================================= LEWE MENU - HOVER / AKTYWNA KATEGORIA ========================================================= */ /* Hover głównej kategorii */ html body #left-column .block-categories li[data-depth="0"]:hover { background: rgba(241, 39, 53, 0.06) !important; box-shadow: inset 3px 0 0 #F12735 !important; } /* Hover tekstu */ html body #left-column .block-categories li[data-depth="0"]:hover > a { color: #F12735 !important; } /* Rozwinięta / aktywna kategoria */ html body #left-column .block-categories li[data-depth="0"].current, html body #left-column .block-categories li[data-depth="0"].active { background: rgba(241, 39, 53, 0.06) !important; box-shadow: inset 3px 0 0 #F12735 !important; } /* Podkategoria po najechaniu */ html body #left-column .block-categories li[data-depth="1"]:hover { background: rgba(241, 39, 53, 0.05) !important; } html body #left-column .block-categories li[data-depth="1"]:hover > a { color: #F12735 !important; } /* Przycisk plus/minus */ html body #left-column .block-categories li[data-depth="0"]:hover .navbar-toggler, html body #left-column .block-categories li[data-depth="0"]:hover .collapse-icons { color: #F12735 !important; background: rgba(241, 39, 53, 0.08) !important; } /* ========================================================= LEWE MENU - USUNIĘCIE OSTATNIEJ ZIELENI ========================================================= */ /* Rozwinięta / aktywna główna kategoria */ html body#category #left-column .block-categories li[data-depth="0"]:hover, html body#category #left-column .block-categories li[data-depth="0"].active, html body#category #left-column .block-categories li[data-depth="0"].current, html body#category #left-column .block-categories li[data-depth="0"]:has(ul.collapse.show) { background: rgba(241, 39, 53, 0.06) !important; box-shadow: inset 3px 0 0 #F12735 !important; border-color: transparent !important; } /* Tekst głównej kategorii */ html body#category #left-column .block-categories li[data-depth="0"]:hover > a, html body#category #left-column .block-categories li[data-depth="0"].active > a, html body#category #left-column .block-categories li[data-depth="0"].current > a, html body#category #left-column .block-categories li[data-depth="0"]:has(ul.collapse.show) > a { color: #F12735 !important; } /* Box z minusem / plusem */ html body#category #left-column .block-categories li[data-depth="0"] .navbar-toggler, html body#category #left-column .block-categories li[data-depth="0"] .collapse-icons { background: rgba(241, 39, 53, 0.08) !important; color: #F12735 !important; border-color: transparent !important; } /* Sam plus / minus */ html body#category #left-column .block-categories li[data-depth="0"] .navbar-toggler *, html body#category #left-column .block-categories li[data-depth="0"] .collapse-icons * { color: #F12735 !important; } /* Podkategorie - usunięcie zielonego tła */ html body#category #left-column .block-categories li[data-depth="0"] ul, html body#category #left-column .block-categories li[data-depth="1"] { background-color: transparent !important; } /* Hover podkategorii */ html body#category #left-column .block-categories li[data-depth="1"]:hover { background: rgba(241, 39, 53, 0.05) !important; } /* Kropka na hover */ html body#category #left-column .block-categories li:hover > a::before { background: #F12735 !important; border-color: #F12735 !important; } /* ========================================================= PODKATEGORIE - HOVER BEZ ZIELENI ========================================================= */ html body#category #left-column .block-categories li[data-depth="1"] > a.category-sub-link:hover { color: #F12735 !important; background: rgba(241, 39, 53, 0.06) !important; background-color: rgba(241, 39, 53, 0.06) !important; border-color: transparent !important; } /* Kropka podkategorii na hover */ html body#category #left-column .block-categories li[data-depth="1"] > a.category-sub-link:hover::before { background: #F12735 !important; background-color: #F12735 !important; border-color: #F12735 !important; } /* Dodatkowo usuwamy zielone tło z linków podkategorii */ html body#category #left-column .block-categories li[data-depth="1"] > a.category-sub-link { background-color: transparent !important; } /* Ale na hover dajemy delikatny czerwony */ html body#category #left-column .block-categories li[data-depth="1"] > a.category-sub-link:hover { background-color: rgba(241, 39, 53, 0.06) !important; }