/* Podstawa elementów WordPressa i WooCommerce (2026-10-14, prośba klienta: „nasz design niech kontroluje wszystko na stronie”). Motyw nie ładuje już arkuszy WooCommerce (woocommerce.css, -layout, -smallscreen, select2.css) ani stylów bloków WordPressa (inc/szablon.php). Ten plik stoi w ich miejscu, przed resztą arkuszy motywu, więc sklep.css, sklep-widoki.css i telefon.css działają na nim tak jak wcześniej na WooCommerce. Odtwarza to, na czym stały zaakceptowane widoki (siatka i szerokość pól, interlinie etykiet i tabel, teksty dla czytników, kraj jako tekst), w kolorach i krojach marki, i daje wygląd elementom, których motyw dotąd nie stylował (ikony komunikatów, oko przy haśle, nakładka ładowania, ceny w promocji, bloki z edytora). Czego WooCommerce dostarczałby danemu widokowi: REGULY=1 node bin/inwentarz.mjs. */ :root { --fn-ikona-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='24' height='24' fill='white'/%3E%3Cpath d='M12 11v5.5M12 7.4v.01' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='12' cy='12' r='10.5' mask='url(%23m)'/%3E%3C/svg%3E"); --fn-ikona-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='24' height='24' fill='white'/%3E%3Cpath d='m7.4 12.3 3 3 6-6.4' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='12' cy='12' r='10.5' mask='url(%23m)'/%3E%3C/svg%3E"); --fn-ikona-blad: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='24' height='24' fill='white'/%3E%3Cpath d='M12 6.8v6.2M12 16.6v.01' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='12' cy='12' r='10.5' mask='url(%23m)'/%3E%3C/svg%3E"); --fn-ikona-oko: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); --fn-ikona-oko-zamkniete: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M4 4l16 16'/%3E%3C/svg%3E"); --fn-ikona-telefon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.6 3.5h2.6l1.5 4-2 1.3a11 11 0 0 0 6.5 6.5l1.3-2 4 1.5v2.6a2 2 0 0 1-2.2 2A16.5 16.5 0 0 1 4.6 5.7a2 2 0 0 1 2-2.2Z'/%3E%3C/svg%3E"); --fn-ikona-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2.5'/%3E%3Cpath d='m3.8 7 8.2 6.2L20.2 7'/%3E%3C/svg%3E"); --fn-ikona-strzalka: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } /* ---------- Tekst tylko dla czytników ekranu (etykiety ilości, kuponu, „usuń”, zakres cen, komunikaty na żywo) ---------- */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; white-space: nowrap; overflow-wrap: normal !important; word-break: normal !important; } /* Odnośniki „przejdź do…” stają się widoczne z klawiatury, jak „Przejdź do treści” (.fn-pomin w marka.css). */ .screen-reader-text:focus { top: 1rem; left: 1rem; z-index: 100000; width: auto; height: auto; margin: 0; padding: 0.75rem 1rem; clip-path: none; border-radius: 0.5rem; background: var(--fn-zolty); color: var(--fn-czern); font-weight: 700; text-decoration: none; white-space: normal; } /* Obrazki w widokach sklepu nie wychodzą poza kolumnę i trzymają proporcje. */ .woocommerce img, .woocommerce-page img { height: auto; max-width: 100%; } /* ---------- Przyciski WooCommerce (konto, strona po zamówieniu, komunikaty) ---------- Wygląd głównego przycisku marki: żółty z czernią. Niska waga selektora, więc widoki z własnymi przyciskami (koszyk, szuflada, panel zakupu) dalej je ustawiają; przyciski Webflow (.w-button) mają swój wygląd z uklad.css. */ :where(.woocommerce, .woocommerce-page) :where(a.button, button.button, input.button):not(.w-button) { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; margin: 0; padding: 0.75rem 1.5rem 0.9rem; border: 0; border-radius: 0.5rem; background: var(--fn-zolty); color: var(--fn-czern); font: 500 1.25rem/1.2 var(--fn-font-naglowki); text-align: center; text-decoration: none; cursor: pointer; } :where(.woocommerce, .woocommerce-page) .button.alt { -webkit-font-smoothing: antialiased; } :where(.woocommerce, .woocommerce-page) :where(.button:disabled, .button.disabled, .button[disabled]) { opacity: 0.5; cursor: not-allowed; } :where(.woocommerce, .woocommerce-page) .button.loading { opacity: 0.6; cursor: progress; } /* ---------- Komunikaty: ikony marki (wypełnione kółko z wyciętym znakiem) zamiast fontu z ikonami WooCommerce. Kolor z currentColor, ustawia go sklep-widoki.css. ---------- */ .woocommerce-message, .woocommerce-info, .woocommerce-error { overflow-wrap: break-word; } .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { content: ""; flex: none; width: 1rem; height: 1rem; background: currentColor; -webkit-mask: var(--fn-ikona-info) center / contain no-repeat; mask: var(--fn-ikona-info) center / contain no-repeat; } .woocommerce-message::before { -webkit-mask-image: var(--fn-ikona-ok); mask-image: var(--fn-ikona-ok); } .woocommerce-error::before { -webkit-mask-image: var(--fn-ikona-blad); mask-image: var(--fn-ikona-blad); } .woocommerce-error li { list-style: none; } /* ---------- Formularze (zamówienie, konto, kupon) ---------- */ :is(.woocommerce, .woocommerce-page) form .form-row { margin: 0 0 1rem; padding: 0; } :is(.woocommerce, .woocommerce-page) form .form-row label { display: block; line-height: 2; } :is(.woocommerce, .woocommerce-page) form .form-row label.checkbox { display: inline; } :is(.woocommerce, .woocommerce-page) form .form-row :is(.input-text, select) { display: block; box-sizing: border-box; width: 100%; } :is(.woocommerce, .woocommerce-page) form .form-row textarea { line-height: 1.5; } /* Podpowiedź w polu znika chwilę po wejściu w pole (kod kuponu dostaje fokus od razu po rozwinięciu). */ :is(.woocommerce, .woocommerce-page) form .form-row [placeholder]:focus::placeholder { opacity: 0; transition: opacity 0.5s 0.5s; } :is(.woocommerce, .woocommerce-page) form .form-row .required { border: 0; font-weight: 700; text-decoration: none; } :is(.woocommerce, .woocommerce-page) form .form-row .input-checkbox { display: inline; margin: -2px 0.5rem 0 0; vertical-align: middle; } /* Lista wyboru ze strzałką marki (kraj, gdyby sklep wysyłał do więcej niż jednego, województwo). */ :is(.woocommerce, .woocommerce-page) form .form-row select { padding-right: 3rem; cursor: pointer; appearance: none; } :is(.woocommerce, .woocommerce-page) form .form-row .woocommerce-input-wrapper:has(> select:not(.country_to_state--single)) { position: relative; display: block; } :is(.woocommerce, .woocommerce-page) form .form-row .woocommerce-input-wrapper:has(> select:not(.country_to_state--single))::after { content: ""; position: absolute; top: 50%; right: 1rem; width: 1.25rem; height: 1.25rem; translate: 0 -50%; background: var(--fn-czern); pointer-events: none; -webkit-mask: var(--fn-ikona-strzalka) center / contain no-repeat; mask: var(--fn-ikona-strzalka) center / contain no-repeat; } /* Sklep wysyła tylko do Polski: kraj jest jedyną opcją listy i wygląda jak pogrubiony tekst. */ :is(.woocommerce, .woocommerce-page) form .form-row select.country_to_state--single { width: auto; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; appearance: none; pointer-events: none; } :is(.woocommerce, .woocommerce-page) form .form-row .woocommerce-input-wrapper .description { display: none; margin: 0.5rem 0 0; padding: 0.75rem 1rem; border-radius: 0.5rem; background: var(--fn-krem); color: var(--fn-malina-900); font-size: 0.875rem; } /* „Wysłać na inny adres?”: osobny kontekst jak dawny float WooCommerce (margines etykiety zostaje w nagłówku). */ #ship-to-different-address { display: flow-root; } :is(.woocommerce, .woocommerce-page) .woocommerce-invalid #terms { outline: 2px solid var(--fn-roz-300); outline-offset: 2px; } /* Pola obok siebie (imię i nazwisko, kupon i przycisk): dwie kolumny po 47% szerokości, jak dotąd. W wąskich panelach (logowanie, nowe hasło) pola idą jedno pod drugim. */ :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-address-fields__field-wrapper, .woocommerce-EditAccountForm, form.checkout_coupon) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 6%; } :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-address-fields__field-wrapper, .woocommerce-EditAccountForm, form.checkout_coupon) > * { grid-column: 1 / -1; } :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-address-fields__field-wrapper, .woocommerce-EditAccountForm, form.checkout_coupon) > .form-row-first { grid-column: 1; } :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-address-fields__field-wrapper, .woocommerce-EditAccountForm, form.checkout_coupon) > .form-row-last { grid-column: 2; } /* Hasło: oko w polu (pokaż i ukryj), siła nowego hasła i podpowiedź. */ :is(.woocommerce, .woocommerce-page) form .password-input { position: relative; display: flex; flex-direction: column; justify-content: center; } :is(.woocommerce, .woocommerce-page) form .password-input input { padding-right: 3rem; } :is(.woocommerce, .woocommerce-page) form .password-input input::-ms-reveal { display: none; } :is(.woocommerce, .woocommerce-page) form .show-password-input { position: absolute; top: 50%; right: 0.5rem; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin: 0; padding: 0; translate: 0 -50%; border: 0; border-radius: 50%; background: none; color: var(--fn-czern); cursor: pointer; } :is(.woocommerce, .woocommerce-page) form .show-password-input:hover { background: rgb(22 8 14 / 0.07); } :is(.woocommerce, .woocommerce-page) form .show-password-input:focus-visible { outline: 3px solid var(--fn-zolty); outline-offset: 2px; } :is(.woocommerce, .woocommerce-page) form .show-password-input::before { content: ""; width: 1.375rem; height: 1.375rem; background: currentColor; -webkit-mask: var(--fn-ikona-oko-zamkniete) center / contain no-repeat; mask: var(--fn-ikona-oko-zamkniete) center / contain no-repeat; } :is(.woocommerce, .woocommerce-page) form .show-password-input.display-password::before { -webkit-mask-image: var(--fn-ikona-oko); mask-image: var(--fn-ikona-oko); } .woocommerce-password-strength { margin-top: 0.5rem; padding: 0.4rem 0.75rem; border-radius: 0.5rem; font-weight: 600; font-size: 0.9375rem; text-align: center; } .woocommerce-password-strength.short { background: #fdecef; color: #8a1238; } .woocommerce-password-strength.bad { background: var(--fn-roz-200); color: var(--fn-malina-900); } .woocommerce-password-strength.good { background: var(--fn-zolty); color: var(--fn-czern); } .woocommerce-password-strength.strong { background: #c9eedd; color: #0e5b3f; } .woocommerce-password-hint { display: block; margin: 0.5rem 0 0; font-size: 0.875rem; opacity: 0.85; } /* ---------- Tabele (podsumowanie koszyka, zamówienie, szczegóły zamówienia) ---------- */ :is(.woocommerce, .woocommerce-page) table.shop_table { width: 100%; border-collapse: separate; border-spacing: 0; text-align: left; } :is(.woocommerce, .woocommerce-page) table.shop_table :is(th, td) { line-height: 1.5em; vertical-align: middle; } :is(.woocommerce, .woocommerce-page) table.shop_table th { font-weight: 700; text-align: left; } .cart_totals table.shop_table th { width: 35%; } .woocommerce-shipping-destination { margin-bottom: 0; } #shipping_method { margin: 0; padding: 0; list-style: none; } #shipping_method li { margin: 0 0 0.5em; line-height: 1.5em; list-style: none; } #shipping_method li label { display: inline; } #shipping_method li input { margin: 3px 0.4375em 0 0; vertical-align: top; } #shipping_method .amount { font-weight: 700; } /* ---------- Płatność w zamówieniu ---------- */ #payment ul.payment_methods { margin: 0; padding: 1em; list-style: none; text-align: left; } #payment ul.payment_methods li { margin: 0; line-height: 2; font-weight: 400; list-style: none; } #payment ul.payment_methods li input { margin: 0 1em 0 0; } #payment div.payment_box { position: relative; box-sizing: border-box; width: 100%; line-height: 1.5; } #payment div.payment_box p:last-child { margin-bottom: 0; } #payment div.form-row { padding: 1em; } /* Odstęp nad przyciskiem jak dotąd: WooCommerce stawiał go jako float (na telefonie jako element w linii), więc jego margines nie łączył się z marginesem zgody. */ #payment #place_order { display: flex; margin-top: 2rem; } @media (max-width: 768px) { #payment #place_order { margin-bottom: 1em; } } .woocommerce-terms-and-conditions { max-height: 12rem; overflow: auto; margin-bottom: 1rem; padding: 1rem; border-radius: 0.75rem; background: rgb(255 251 247 / 0.07); } /* ---------- Ilość, ceny w promocji, dostępność ---------- */ :is(.woocommerce, .woocommerce-page) .quantity .qty { width: 3.631em; text-align: center; } /* Cena przed obniżką mniejsza i przekreślona, nowa bez podkreślenia (Omnibus pod spodem z SafeHouse). */ :is(.price, .fn-opakowanie-cena, .fn-karta-linii-cena) del { margin-right: 0.35em; font-size: 0.6em; font-weight: 500; opacity: 0.65; text-decoration-thickness: 0.08em; } :is(.price, .fn-opakowanie-cena, .fn-karta-linii-cena) ins { text-decoration: none; } .stock.out-of-stock { display: inline-flex; margin: 0 0 1rem; padding: 0.35rem 0.85rem 0.4rem; border-radius: 6.25rem; background: rgb(0 0 0 / 0.22); font: 700 0.8125rem/1.1 var(--fn-font-naglowki); letter-spacing: 0.08em; text-transform: uppercase; } /* ---------- Ładowanie: zamiast białej nakładki WooCommerce (styl wstawiany przez blockUI) przyciemniona malina i kółko ---------- */ .blockUI.blockOverlay { background: rgb(67 16 38 / 0.45) !important; opacity: 1 !important; border-radius: inherit; cursor: progress !important; } .blockUI.blockOverlay::before { content: ""; position: absolute; top: 50%; left: 50%; width: 2.25rem; height: 2.25rem; margin: -1.125rem 0 0 -1.125rem; border: 3px solid rgb(255 251 247 / 0.3); border-top-color: var(--fn-zolty); border-radius: 50%; animation: fn-kreci 0.8s linear infinite; } @keyframes fn-kreci { to { rotate: 360deg; } } @media (prefers-reduced-motion: reduce) { .blockUI.blockOverlay::before { animation-duration: 2.4s; } } /* ---------- Pasek ogłoszenia sklepu (WooCommerce → Ustawienia → „Powiadomienie w sklepie”), domyślnie wyłączony ---------- */ .woocommerce-store-notice, p.demo_store { position: fixed; right: 1rem; bottom: 1rem; left: 1rem; z-index: 990; display: none; margin: 0; padding: 1rem 1.5rem; border-radius: 1rem; background: var(--fn-zolty); color: var(--fn-czern); font-weight: 600; text-align: center; box-shadow: 0 1rem 2rem rgb(22 8 14 / 0.3); } .woocommerce-store-notice a, p.demo_store a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; } .woocommerce-store-notice__dismiss-link { margin-left: 1rem; font-weight: 700; } /* ---------- Bloki z edytora WordPressa w treści stron (regulamin, polityki): wygląd marki zamiast stylów bloków ---------- */ .has-text-align-center { text-align: center; } .has-text-align-right { text-align: right; } .aligncenter { display: block; margin-right: auto; margin-left: auto; } .alignleft { float: left; margin: 0.35rem 1.5rem 1rem 0; } .alignright { float: right; margin: 0.35rem 0 1rem 1.5rem; } .wp-block-image { margin: 0 0 1.5rem; } .wp-block-image img { height: auto; max-width: 100%; border-radius: 1rem; } .wp-block-image figcaption, .wp-element-caption, .wp-caption-text { margin-top: 0.5rem; font-size: 0.875rem; opacity: 0.8; } .wp-block-table { margin: 0 0 1.5rem; overflow-x: auto; } .wp-block-table table { width: 100%; border-collapse: collapse; } .wp-block-table :is(th, td) { padding: 0.5rem 0.75rem 0.5rem 0; border-bottom: 1px solid rgb(255 251 247 / 0.2); text-align: left; vertical-align: top; } .wp-block-separator { margin: 2rem 0; border: 0; border-top: 1px solid currentColor; opacity: 0.25; } .wp-block-quote { margin: 1.5rem 0; padding-left: 1.25rem; border-left: 3px solid var(--fn-zolty); } .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5rem 0; } .wp-block-button__link, .wp-element-button { display: inline-flex; align-items: center; padding: 0.75rem 1.5rem 0.9rem; border-radius: 0.5rem; background: var(--fn-zolty); color: var(--fn-czern); font: 500 1.25rem/1.2 var(--fn-font-naglowki); text-decoration: none; } .wp-block-columns { display: flex; flex-wrap: wrap; gap: 2rem; margin: 0 0 1.5rem; } .wp-block-column { flex: 1 1 16rem; min-width: 0; } .wp-block-embed iframe, .wp-block-video video { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 1rem; }