/* ORNAMENT - ubranie fabrycznego markupu WooCommerce. Selektory na klasach Woo z kontraktu (22 pliki). Bez przebudowy DOM. */ /* ------------------------------------------------------- karta produktu */ /* Wyjatek typografii nazw produktow bez przodka .woocommerce - strona glowna renderuje petle produktow poza kontekstem stron Woo. */ ul.products li.product .woocommerce-loop-product__title { font-family: var(--font-ui); font-weight: 500; color: var(--text-body); text-transform: none; letter-spacing: 0; font-size: 15px; line-height: 1.45; margin: 14px 16px 6px; transition: color var(--dur-fast) var(--ease); } ul.products li.product a:hover .woocommerce-loop-product__title { color: var(--action); } ul.products li.product { position: relative; display: flex; flex-direction: column; background: var(--surface-page); border: 1px solid var(--border-divider); border-radius: var(--radius-card); overflow: hidden; transition: border-color var(--dur-fast) var(--ease); } ul.products li.product:hover { border-color: var(--action); } ul.products li.product .woocommerce-LoopProduct-link { display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none; } ul.products li.product img { width: 100%; height: auto; /* bez tego atrybut height z WP wygrywa z aspect-ratio */ aspect-ratio: 450 / 617; object-fit: cover; display: block; transition: transform var(--dur-fast) var(--ease); } ul.products li.product a:hover img { transform: scale(1.03); } ul.products li.product .price { margin: 0 16px 14px; font-weight: 600; font-size: 16px; color: var(--text-brand); } ul.products li.product .price del { opacity: .55; margin-right: 8px; } ul.products li.product .price ins { text-decoration: none; } ul.products li.product .button { margin: 0 16px 16px; margin-top: auto; align-self: center; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 28px; white-space: nowrap; background: transparent; border: 1.5px solid var(--action); border-radius: var(--radius-pill); color: var(--action); font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } ul.products li.product .button:hover { background: var(--surface-tint); color: var(--action-hover); border-color: var(--action-hover); text-decoration: none; } /* serce listy zyczen (nasz element w karcie) */ .orn-produkt__serce { position: absolute; top: 10px; right: 10px; z-index: 2; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-divider); border-radius: 50%; background: var(--surface-page); color: var(--oberzyna); cursor: pointer; box-shadow: var(--shadow-1); transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .orn-produkt__serce:hover { color: var(--action); border-color: var(--action); } .orn-produkt__serce[aria-pressed="true"] { color: var(--action); border-color: var(--action); } .orn-produkt__serce[aria-pressed="true"] svg { fill: currentColor; } /* plakietka wyprzedazy Woo */ ul.products li.product .onsale { position: absolute; left: 10px; top: 10px; z-index: 2; display: inline-flex; align-items: center; height: 24px; padding: 0 12px; border-radius: var(--radius-pill); background: var(--surface-cream); color: var(--text-brand); font-size: 11px; font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; } /* -------------------------------------------------------- siatka archiwum */ /* Siatka obowiazuje takze poza kontenerem .woocommerce: strona listy zyczen jest wlasnym szablonem motywu, wiec bez tego kazda kartka szla na cala szerokosc zamiast stanac w kolumnie. */ .woocommerce ul.products, ul.products.orn-lz__siatka { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } @media (max-width: 1023px) { .woocommerce ul.products, ul.products.orn-lz__siatka { grid-template-columns: repeat(2, 1fr); gap: 16px; } } /* --------------------------------------------------------- stronicowanie */ ul.page-numbers { list-style: none; margin: 44px 0 0; padding: 0; display: flex; justify-content: center; gap: 8px; } ul.page-numbers .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; border: 1px solid var(--border-divider); border-radius: var(--radius-pill); background: var(--surface-page); font-size: 14px; font-weight: 600; color: var(--text-body); text-decoration: none; transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } ul.page-numbers a.page-numbers:hover { border-color: var(--action); color: var(--action); } ul.page-numbers .page-numbers.current { background: var(--action); border-color: var(--action); color: var(--text-inverse); } /* ------------------------------------------------------------ komunikaty */ /* Uwaga: .woocommerce-message to div, .woocommerce-error to ul > li. */ .woocommerce-message, .woocommerce-info, .woocommerce-error { margin: 0 0 var(--space-5); padding: 14px 18px; border-radius: var(--radius-notice); font-size: 14px; line-height: 1.6; } .woocommerce-message { background: var(--sukces-tlo); border: 1px solid var(--sukces-obwodka); color: var(--sukces); } .woocommerce-info { background: var(--info-tlo); border: 1px solid var(--info-obwodka); color: var(--info); } .woocommerce-error { list-style: none; background: var(--blad-tlo); border: 1px solid var(--blad-obwodka); color: var(--blad); } .woocommerce-error li { margin: 0; } .woocommerce-error li + li { margin-top: 8px; } .woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button { float: right; margin-left: 16px; font-weight: 600; color: inherit; text-decoration: underline; background: none; border: 0; padding: 0; cursor: pointer; } /* ------------------------------------------------------ galeria produktu */ .woocommerce div.product div.images img { width: 100%; display: block; border-radius: var(--radius-card); } /* ================================================================ koszyk */ .orn-strona { padding: 40px 0 96px; } .orn-strona .entry-title { font-size: 40px; margin: 0 0 32px; } .woocommerce-cart .entry-content .woocommerce { display: grid; grid-template-columns: 1fr 400px; gap: 56px; align-items: start; } .woocommerce-cart .woocommerce-notices-wrapper { grid-column: 1 / -1; } .woocommerce-cart form.woocommerce-cart-form { min-width: 0; } /* tabela koszyka */ table.shop_table { width: 100%; border-collapse: collapse; } table.shop_table th { text-align: left; padding: 0 16px 14px 0; font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border-divider); } table.cart th.product-remove { width: 44px; padding-right: 0; } table.cart th.product-thumbnail { width: 112px; } table.cart th.product-price { width: 88px; } table.cart th.product-quantity { width: 150px; } table.cart th.product-subtotal { width: 92px; text-align: right; padding-right: 0; } table.cart td { padding: 24px 16px 24px 0; border-bottom: 1px solid var(--border-divider); vertical-align: top; font-size: 15px; color: var(--text-body); } table.cart td.product-remove { padding-right: 0; } table.cart td.product-subtotal { text-align: right; padding-right: 0; font-weight: 600; color: var(--text-brand); } table.cart td.product-name a { font-size: 15px; font-weight: 600; color: var(--text-body); line-height: 1.45; } table.cart td.product-name a:hover { color: var(--action); text-decoration: none; } table.cart td.product-thumbnail img { width: 96px; height: auto; aspect-ratio: 450 / 617; object-fit: cover; border-radius: var(--radius-card); display: block; } table.cart a.remove { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; color: var(--gliniany); font-size: 20px; line-height: 1; text-decoration: none; font-weight: 400; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } table.cart a.remove:hover { background: var(--blad-tlo); color: var(--blad); } table.cart .quantity .qty { width: 72px; height: 44px; box-sizing: border-box; padding: 0 6px 0 14px; border: 1.5px solid var(--border-input); border-radius: var(--radius-input); background: var(--surface-page); font-family: var(--font-ui); font-size: 15px; color: var(--text-body); text-align: center; } /* ---------------------------------------------- sklad zestawu papeterii Trzy kolumny czytane jako rachunek: nazwa elementu, przelicznik, kwota. Ten sam wyglad w koszyku, w kasie i w podgladzie zamowienia, bo to ta sama informacja - klient nie powinien jej rozpoznawac od nowa na kazdym ekranie. Kwoty maja staly slup (min-width) i cyfry tabelaryczne, wiec stoja w pionie bez wzgledu na dlugosc nazwy. */ /* Odstep kolumn robimy paddingiem komorek, nie column-gap. Przy gapie kreska nad wierszem rozpadala sie na dwa odcinki z dziura w srodku i rachunek wygladal na zlozony z dwoch tabel. */ table.cart dl.variation, .woocommerce-checkout-review-order-table dl.variation, .woocommerce-order-details dl.variation { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0; margin: 14px 0 0; } /* W koszyku jest miejsce, wiec rachunek nie rozlazi sie na cala szerokosc komorki; w kasie kolumna jest waska i kazdy piksel jest potrzebny. */ table.cart dl.variation { max-width: 460px; } table.cart dl.variation dt, table.cart dl.variation dd, .woocommerce-checkout-review-order-table dl.variation dt, .woocommerce-checkout-review-order-table dl.variation dd, .woocommerce-order-details dl.variation dt, .woocommerce-order-details dl.variation dd { padding: 7px 0; border-top: 1px solid var(--border-divider); font-size: 13px; line-height: 1.5; margin: 0; min-width: 0; text-transform: none; letter-spacing: 0; } table.cart dl.variation dt, .woocommerce-checkout-review-order-table dl.variation dt, .woocommerce-order-details dl.variation dt { font-weight: 500; color: var(--text-muted); padding-right: 14px; } table.cart dl.variation dd, .woocommerce-checkout-review-order-table dl.variation dd, .woocommerce-order-details dl.variation dd { font-weight: 600; color: var(--text-body); padding-left: 14px; } table.cart dl.variation dd p, .woocommerce-checkout-review-order-table dl.variation dd p, .woocommerce-order-details dl.variation dd p { margin: 0; display: flex; align-items: baseline; justify-content: flex-end; gap: 10px; } .orn-sklad__mnoznik { font-weight: 400; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .orn-sklad__kwota { min-width: 70px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .orn-sklad__kwota--rabat { color: var(--text-brand); } .orn-sklad__tekst { font-weight: 600; } /* Na waskim ekranie nie ma miejsca na trzy kolumny, ale przelicznik jest informacja o cenie, wiec go nie chowamy - zawija sie nad kwote. */ @media (max-width: 720px) { table.cart dl.variation dd p, .woocommerce-checkout-review-order-table dl.variation dd p, .woocommerce-order-details dl.variation dd p { flex-wrap: wrap; gap: 2px 8px; } .orn-sklad__mnoznik { flex: 1 0 100%; text-align: right; } } /* ------------------------------------------- dane do przelewu (bramka bacs) Najwazniejszy blok na potwierdzeniu przy przelewie: klient ma przepisac numer konta do swojej bankowosci. Fabrycznie sa to dwa naglowki wystawowe jeden pod drugim (h2 "Nasze dane bankowe" i h3 z nazwa odbiorcy plus dwukropek) oraz lista z punktorami. Skladamy z tego jedna karte, w ktorej numer konta jest najwiekszym elementem. */ .woocommerce-bacs-bank-details { margin: 0 0 40px; padding: 28px 32px; background: var(--surface-cream); border-radius: var(--radius-card); } .wc-bacs-bank-details-heading { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-brand); margin: 0 0 6px; } .wc-bacs-bank-details-account-name { font-family: var(--font-ui); font-size: 15px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text-body); margin: 0 0 20px; } /* Etykieta nad wartoscia, nie obok. Przy ukladzie obok siebie etykieta "Numer konta:" i numer w 20 px walczyly o te same 520 px i numer lamal sie na dwie linie (zmierzone: 66 px wysokosci, dwie linie). Numer konta, ktory klient przepisuje do bankowosci, nie moze byc przelamany. */ ul.wc-bacs-bank-details { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-width: 560px; } ul.wc-bacs-bank-details li { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 0; padding: 12px 0; font-size: 12px; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); border-top: 1px solid var(--border-divider); } ul.wc-bacs-bank-details li:first-child { border-top: 0; padding-top: 0; } ul.wc-bacs-bank-details li strong { font-size: 15px; font-weight: 600; color: var(--text-body); letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; } /* Numer konta dostaje najwiekszy stopien pisma i kolor marki, bo to jedyna rzecz na tym ekranie, ktora klient przenosi ręcznie. Reszta potwierdza. */ ul.wc-bacs-bank-details li.account_number strong { font-size: 22px; letter-spacing: .03em; color: var(--text-brand); white-space: nowrap; } @media (max-width: 560px) { .woocommerce-bacs-bank-details { padding: 22px 20px; } ul.wc-bacs-bank-details li.account_number strong { font-size: 17px; letter-spacing: .02em; white-space: normal; } } /* Meta pozycji w zamowieniu (potwierdzenie, podglad w koncie, maile) idzie innym szablonem niz koszyk: wc_display_item_meta daje ul.wc-item-meta. */ /* Rachunek zestawu w podgladzie zamowienia i na potwierdzeniu. Wedlug projektu siedzi we wlasnym kremowym bloku wciagnietym pod nazwe pozycji, zeby bylo widac, ze to rozpisanie jednej pozycji, a nie osobne produkty. */ .wc-item-meta { list-style: none; margin: 12px 0 4px; padding: 4px 16px; background: var(--surface-paper); border-radius: var(--radius-card); display: grid; grid-template-columns: minmax(0, 1fr) auto auto; font-size: 13px; } .wc-item-meta li { display: contents; } .wc-item-meta .wc-item-meta-label { grid-column: 1; padding: 9px 14px 9px 0; border-top: 1px solid var(--border-divider); font-weight: 500; color: var(--text-muted); text-transform: none; letter-spacing: 0; } .wc-item-meta li > p { grid-column: 2 / -1; margin: 0; padding: 9px 0; border-top: 1px solid var(--border-divider); display: flex; align-items: baseline; justify-content: flex-end; gap: 14px; font-weight: 600; color: var(--text-body); font-variant-numeric: tabular-nums; } .wc-item-meta li:first-child .wc-item-meta-label, .wc-item-meta li:first-child > p { border-top: 0; } /* wiersz rabatu czyta sie jako kwota ujemna, wiec idzie kolorem marki */ .wc-item-meta li:last-child .wc-item-meta-label, .wc-item-meta li:last-child > p { color: var(--text-brand); } /* naglowek i data zamowienia */ .orn-powrot { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--action); } .orn-powrot::before { content: "\2190"; } .orn-zam__naglowek { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 16px 0 4px; flex-wrap: wrap; } .orn-zam__tytul { font-size: 30px; margin: 0; } .orn-zam__data { font-size: 15px; color: var(--text-muted); margin: 0 0 8px; } /* Fabryczne naglowki sekcji zamowienia jako eyebrow, zgodnie z projektem: to etykiety nad tabela i nad adresami, nie naglowki wystawowe. */ .woocommerce-order-details__title, .woocommerce-customer-details h2, .woocommerce-column__title { font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); margin: 28px 0 12px; } .woocommerce-column__title { margin-top: 0; } /* Tabela pozycji zamowienia: nazwa produktu to tresc, nie odnosnik do klikania, wiec nie swieci sliwka. Podsumowanie czyta sie jak rachunek, nie jak formularz. */ .woocommerce-table--order-details .product-name a { color: var(--text-body); font-weight: 600; } .woocommerce-table--order-details .product-name a:hover { color: var(--action); } .woocommerce-table--order-details .product-quantity { font-weight: 400; color: var(--text-muted); } .woocommerce-table--order-details tfoot th, .woocommerce-table--order-details tfoot td { font-family: var(--font-ui); font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; padding: 12px 0; border-top: 1px solid var(--border-divider); border-bottom: 0; } .woocommerce-table--order-details tfoot th { color: var(--text-muted); text-align: left; } .woocommerce-table--order-details tfoot td { text-align: right; font-weight: 600; color: var(--text-body); } .woocommerce-table--order-details tfoot tr:last-child th, .woocommerce-table--order-details tfoot tr:last-child td { border-top: 0; } .woocommerce-table--order-details tfoot tr.order-total th { font-size: 17px; color: var(--text-body); font-weight: 600; } .woocommerce-table--order-details tfoot tr.order-total td { font-size: 20px; color: var(--text-brand); } /* Adresy obok siebie, kazdy w karcie */ .woocommerce-columns--addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; } .woocommerce-columns--addresses .woocommerce-column { float: none !important; width: auto !important; border: 1px solid var(--border-divider); border-radius: var(--radius-card); padding: 20px 24px; } .woocommerce-columns--addresses address { font-style: normal; font-size: 15px; line-height: 1.7; color: var(--text-body); } .woocommerce-columns--addresses p { margin: 12px 0 0; font-size: 15px; } @media (max-width: 760px) { .woocommerce-columns--addresses { grid-template-columns: 1fr; } } .orn-notatki { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 12px; } .orn-notatki__wpis { border-left: 2px solid var(--border-divider); padding-left: 16px; } .orn-notatki__wpis time { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 4px; } .orn-notatki__wpis p { margin: 0; font-size: 14px; } /* kupon i aktualizacja */ table.cart td.actions { padding: 24px 0 0; border-bottom: 0; } table.cart td.actions .coupon { float: left; display: flex; align-items: center; gap: 10px; } table.cart td.actions .coupon .input-text { width: 180px; height: 44px; box-sizing: border-box; padding: 0 16px; border: 1.5px solid var(--border-input); border-radius: var(--radius-input); background: var(--surface-page); font-family: var(--font-ui); font-size: 14px; color: var(--text-body); } table.cart td.actions .button { height: 44px; padding: 0 20px; border: 1.5px solid var(--action); border-radius: var(--radius-pill); background: transparent; color: var(--action); font-family: var(--font-ui); font-size: 14px; font-weight: 600; cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } table.cart td.actions .button:hover { background: var(--surface-tint); color: var(--action-hover); border-color: var(--action-hover); } table.cart td.actions .button[name="update_cart"] { float: right; border-color: var(--border-input); color: var(--text-body); } table.cart td.actions .button[name="update_cart"]:hover { border-color: var(--action); color: var(--action); background: transparent; } table.cart td.actions .button:disabled { opacity: .5; cursor: default; } /* podsumowanie koszyka */ .cart-collaterals { position: sticky; top: 24px; } .cart-collaterals .cart_totals { background: var(--surface-paper); border-radius: var(--radius-card); padding: 28px; } .cart-collaterals .cart_totals h2 { font-size: 22px; margin: 0 0 18px; } .cart-collaterals table.shop_table th, .cart-collaterals table.shop_table td { padding: 12px 0; border-top: 1px solid var(--border-divider); border-bottom: 0; font-size: 14px; letter-spacing: 0; text-transform: none; } .cart-collaterals table.shop_table th { font-weight: 500; color: var(--text-muted); vertical-align: top; } .cart-collaterals table.shop_table td { text-align: right; font-size: 15px; font-weight: 600; color: var(--text-body); } .cart-collaterals .order-total th, .cart-collaterals .order-total td { padding-top: 16px; font-size: 15px; } .cart-collaterals .order-total td { font-size: 18px; color: var(--text-brand); } /* Wybor przesylki: pieciu metod nie da sie czytac wciśnietych w prawa kolumne podsumowania - dluzsze nazwy zawijaly sie i lista strzepila sie od lewej. Wiersz przesylki rozkladamy wiec na cala szerokosc panelu (th nad td) i wyrownujemy do lewej, jak kazda liste wyboru w systemie. */ .cart_totals tr.woocommerce-shipping-totals th, .cart_totals tr.woocommerce-shipping-totals td, .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals th, .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals td { display: block; width: auto; text-align: left; } .cart_totals tr.woocommerce-shipping-totals td, .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals td { border-top: 0; padding-top: 2px; } ul.woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; text-align: left; } ul.woocommerce-shipping-methods li { display: flex; align-items: flex-start; justify-content: flex-start; gap: 10px; } ul.woocommerce-shipping-methods input.shipping_method { accent-color: var(--sliwka); width: 18px; height: 18px; margin: 1px 0 0; flex: none; } ul.woocommerce-shipping-methods label { font-size: 14px; font-weight: 400; color: var(--text-body); cursor: pointer; text-align: left; line-height: 1.4; } ul.woocommerce-shipping-methods label .woocommerce-Price-amount { font-weight: 600; } .woocommerce-shipping-destination { margin: 14px 0 0; font-size: 13px; font-weight: 400; color: var(--text-muted); text-align: left; } .shipping-calculator-button { font-size: 13px; font-weight: 600; color: var(--action); } .woocommerce-shipping-calculator { margin-top: 6px; } .wc-proceed-to-checkout { margin-top: 20px; } .wc-proceed-to-checkout .checkout-button { display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; border: 0; border-radius: var(--radius-pill); background: var(--action); color: var(--text-inverse); font-family: var(--font-ui); font-size: 15px; font-weight: 600; text-decoration: none; transition: background var(--dur-fast) var(--ease); } .wc-proceed-to-checkout .checkout-button:hover { background: var(--action-hover); color: var(--text-inverse); } /* koszyk pusty */ .cart-empty.woocommerce-info { max-width: 560px; } .return-to-shop { margin-top: 8px; } .return-to-shop .button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 32px; border: 0; border-radius: var(--radius-pill); background: var(--action); color: var(--text-inverse); font-size: 15px; font-weight: 600; text-decoration: none; transition: background var(--dur-fast) var(--ease); } .return-to-shop .button:hover { background: var(--action-hover); } /* ================================================================== kasa */ .woocommerce-checkout form.checkout { display: grid; grid-template-columns: 1fr 480px; grid-template-rows: auto 1fr; gap: 24px 56px; align-items: start; } .woocommerce-checkout .col2-set#customer_details { grid-column: 1; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 44px; min-width: 0; float: none; width: auto; } .woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 { float: none; width: auto; } .woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 1; margin: 0; font-size: 24px; } .woocommerce-checkout #order_review { grid-column: 2; grid-row: 2; align-self: start; position: sticky; top: 24px; background: var(--surface-paper); border-radius: var(--radius-card); padding: 24px 24px 28px; } /* pola formularza */ form.checkout h3 { font-size: 24px; margin: 0 0 24px; } .woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-additional-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } form.checkout p.form-row { margin: 0; } form.checkout p.form-row-wide { grid-column: 1 / -1; } form.checkout p.form-row label { display: block; font-size: 14px; font-weight: 600; color: var(--text-body); margin: 0 0 8px; } form.checkout p.form-row label .required { color: var(--sliwka); margin-left: 2px; text-decoration: none; } form.checkout p.form-row label .optional { color: var(--text-muted); font-weight: 400; } .woocommerce-input-wrapper { display: block; } form.checkout .input-text, form.checkout select, form.checkout textarea { width: 100%; box-sizing: border-box; border: 1.5px solid var(--border-input); border-radius: var(--radius-input); background: var(--surface-page); font-family: var(--font-ui); font-size: 15px; color: var(--text-body); } form.checkout .input-text, form.checkout select { height: 48px; padding: 0 16px; } form.checkout textarea { min-height: 96px; padding: 12px 16px; } form.checkout .input-text:focus, form.checkout select:focus, form.checkout textarea:focus { border-color: var(--action); outline: none; } /* pole z bledem walidacji */ form.checkout .woocommerce-invalid .input-text, form.checkout .woocommerce-invalid select { border-color: var(--blad-obwodka); } form.checkout .woocommerce-invalid label { color: var(--blad); } /* wysylka na inny adres / uwagi */ #ship-to-different-address { font-size: 16px; margin: 0 0 16px; } #ship-to-different-address label { display: flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; } #ship-to-different-address input { width: 18px; height: 18px; accent-color: var(--sliwka); margin: 0; } /* tabela zamowienia w kasie */ .woocommerce-checkout-review-order-table th, .woocommerce-checkout-review-order-table td { padding: 12px 0; border-bottom: 1px solid var(--border-divider); font-size: 14px; letter-spacing: 0; text-transform: none; text-align: left; font-weight: 400; color: var(--text-body); } .woocommerce-checkout-review-order-table td.product-total, .woocommerce-checkout-review-order-table tfoot td { text-align: right; font-weight: 600; } .woocommerce-checkout-review-order-table tfoot th { font-weight: 500; color: var(--text-muted); } .woocommerce-checkout-review-order-table .order-total td { font-size: 18px; color: var(--text-brand); } .woocommerce-checkout-review-order-table .product-name .product-quantity { font-weight: 400; color: var(--text-muted); } /* platnosci */ ul.wc_payment_methods { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } ul.wc_payment_methods li.wc_payment_method { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; padding: 16px 18px; border: 1.5px solid var(--border-divider); border-radius: var(--radius-card); background: var(--surface-page); transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } ul.wc_payment_methods li.wc_payment_method:has(input:checked) { border-color: var(--action); background: var(--surface-tint); } ul.wc_payment_methods input.input-radio { width: 18px; height: 18px; accent-color: var(--sliwka); margin: 0; } ul.wc_payment_methods label { font-size: 15px; font-weight: 600; color: var(--text-body); cursor: pointer; margin: 0; } ul.wc_payment_methods .payment_box { grid-column: 2; margin: 6px 0 0; } ul.wc_payment_methods .payment_box p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-muted); } .woocommerce-checkout #payment { margin: 24px 0 0; background: transparent; } .woocommerce-terms-and-conditions-wrapper { margin: 20px 0 0; font-size: 13px; color: var(--text-muted); } .woocommerce-terms-and-conditions-wrapper a { color: var(--action); font-weight: 600; } #place_order { width: 100%; height: 52px; margin-top: 20px; border: 0; border-radius: var(--radius-pill); background: var(--action); color: var(--text-inverse); font-family: var(--font-ui); font-size: 15px; font-weight: 600; cursor: pointer; transition: background var(--dur-fast) var(--ease); } #place_order:hover { background: var(--action-hover); } #place_order:active { background: var(--action-pressed); } /* select2 (selectWoo) w duchu systemu */ .select2-container--default .select2-selection--single { height: 48px; border: 1.5px solid var(--border-input); border-radius: var(--radius-input); background: var(--surface-page); } .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 45px; padding-left: 16px; font-size: 15px; color: var(--text-body); } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px; right: 8px; } .select2-dropdown { border: 1.5px solid var(--border-input); border-radius: var(--radius-input); } .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--action); } @media (max-width: 1023px) { .orn-strona { padding: 24px 0 64px; } .orn-strona .entry-title { font-size: 32px; margin-bottom: 20px; } .woocommerce-cart .entry-content .woocommerce { grid-template-columns: 1fr; gap: 32px; } .cart-collaterals { position: static; } /* tabela koszyka: naglowek znika, uklad kart pozycji definiuje blok "koszyk czytelny na telefonie" na dole pliku */ table.cart thead { display: none; } table.cart tr { border-bottom: 1px solid var(--border-divider); } table.cart td { border: 0; } table.cart td.actions .coupon { float: none; margin-bottom: 12px; } table.cart td.actions .coupon .input-text { flex: 1; width: auto; } table.cart td.actions .button[name="update_cart"] { float: none; width: 100%; } /* Kasa na telefonie: jedna kolumna, ale trzeba zdjac TAKZE przypisanie do wierszy z ukladu desktopowego. Tam dane klienta zajmuja `grid-row: 1 / span 2`, naglowek podsumowania siedzi w wierszu 1, a tabela zamowienia w wierszu 2, bo stoja w drugiej kolumnie. Po zwezeniu do jednej kolumny te same wiersze zaczely sie nakladac: naglowek "Twoje zamowienie" ladowal na "Dane rozliczeniowe" (dwa napisy jeden na drugim), a tabela zamowienia na polach formularza, przez co lista wyboru kraju wychodzila na wierzch tabeli. Samo `grid-column: 1` tego nie leczy, bo wiersze zostawaly narzucone. */ .woocommerce-checkout form.checkout { grid-template-columns: 1fr; grid-template-rows: auto; } .woocommerce-checkout .col2-set#customer_details, .woocommerce-checkout #order_review_heading, .woocommerce-checkout #order_review { grid-column: 1; grid-row: auto; position: static; } /* Trzecia siatka, o ktorej regula mobilna zapominala: pole "Uwagi do zamowienia" zostawalo w ukladzie dwukolumnowym i mialo 180 px zamiast pelnej szerokosci, przez co wygladalo na male okienko na tekst. */ .woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-additional-fields__field-wrapper { grid-template-columns: 1fr; } } /* ============================================================ moje konto */ /* logowanie / rejestracja (fabryczny form-login) */ .woocommerce-form-login, .woocommerce-form-register { max-width: 480px; background: var(--surface-paper); border: 1px solid var(--border-divider); border-radius: var(--radius-card); padding: 32px; } .woocommerce-form-login p.form-row, .woocommerce-form-register p.form-row { margin: 0 0 20px; } .woocommerce-form-login label, .woocommerce-form-register label { display: block; font-size: 14px; font-weight: 600; color: var(--text-body); margin-bottom: 8px; } .woocommerce-form-login .input-text, .woocommerce-form-register .input-text { width: 100%; height: 48px; padding: 0 16px; box-sizing: border-box; border: 1.5px solid var(--border-input); border-radius: var(--radius-input); background: var(--surface-page); font-family: var(--font-ui); font-size: 15px; color: var(--text-body); } .woocommerce-form-login .input-text:focus, .woocommerce-form-register .input-text:focus { border-color: var(--action); outline: none; } .woocommerce-form-login__rememberme { display: flex !important; align-items: center; gap: 10px; cursor: pointer; } .woocommerce-form-login__rememberme input { width: 18px; height: 18px; margin: 0; accent-color: var(--sliwka); } .woocommerce-form-login__rememberme span { font-weight: 400; font-size: 14px; } .woocommerce-form-login .woocommerce-button, .woocommerce-form-register .woocommerce-button, .woocommerce-ResetPassword .woocommerce-Button { width: 100%; height: 52px; border: 0; border-radius: var(--radius-pill); background: var(--action); color: var(--text-inverse); font-family: var(--font-ui); font-size: 15px; font-weight: 600; cursor: pointer; transition: background var(--dur-fast) var(--ease); } .woocommerce-form-login .woocommerce-button:hover { background: var(--action-hover); } .woocommerce-LostPassword { margin: 16px 0 0; font-size: 14px; } .woocommerce-LostPassword a { color: var(--action); font-weight: 600; } /* uklad konta: nawigacja + tresc */ .woocommerce-account .woocommerce { display: grid; grid-template-columns: 260px 1fr; gap: 56px; align-items: start; } .woocommerce-account .woocommerce-notices-wrapper { grid-column: 1 / -1; } /* wylogowany: formularz bez siatki */ .woocommerce-account:not(.logged-in) .woocommerce { display: block; } /* Nawigacja konta wedlug projektu: pozycje jako pastylki, aktywna wypelniona kremem. Wczesniej kazda pozycja miala kreske pod spodem, co robilo z menu tabele. Kreska zostaje jedna, nad wylogowaniem, bo to inna kategoria akcji. */ .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .woocommerce-MyAccount-navigation li a { display: flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--radius-input); font-size: 14px; font-weight: 500; color: var(--text-body); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .woocommerce-MyAccount-navigation li a:hover { color: var(--action); text-decoration: none; background: var(--surface-paper); } .woocommerce-MyAccount-navigation li.is-active a { color: var(--action); font-weight: 600; background: var(--surface-tint); } .woocommerce-MyAccount-navigation-link--customer-logout { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-divider); } .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--text-muted); } .woocommerce-MyAccount-content { min-width: 0; } .woocommerce-MyAccount-content p { font-size: 15px; line-height: 1.65; } .woocommerce-MyAccount-content a { color: var(--action); font-weight: 600; } .woocommerce-MyAccount-content .woocommerce-Button, .woocommerce-MyAccount-content .button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 24px; border: 1.5px solid var(--action); border-radius: var(--radius-pill); background: transparent; color: var(--action); font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; transition: background var(--dur-fast) var(--ease); } .woocommerce-MyAccount-content .button:hover { background: var(--surface-tint); } /* tabela zamowien */ .woocommerce-orders-table td, .woocommerce-orders-table th { font-size: 14px; } .woocommerce-orders-table td { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--border-divider); } .woocommerce-orders-table .woocommerce-button { min-height: 36px !important; padding: 0 16px !important; font-size: 13px !important; } /* adresy */ /* Karty adresow wedlug projektu: etykieta u gory, tresc, akcja na dole. Karta bez adresu ma papierowe tlo i wyjasnia, co sie stanie bez niej. */ .woocommerce-Addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; } .orn-adres { display: flex; flex-direction: column; gap: 14px; border: 1px solid var(--border-divider); border-radius: var(--radius-card); padding: 24px; background: var(--surface-page); } .orn-adres--pusty { background: var(--surface-paper); } /* Eyebrow w koncie musi bic reguly naglowkow (.woocommerce-MyAccount-content h3 ma 0-1-1 i wygrywa z sama klasa 0-1-0). Bez tego etykieta karty wychodzi w Cormorancie i rozpycha karte. */ .woocommerce-MyAccount-content h2.orn-eyebrow, .woocommerce-MyAccount-content h3.orn-eyebrow { font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); margin: 0; } .orn-adres address { font-style: normal; font-size: 15px; line-height: 1.7; color: var(--text-body); margin: 0; } .orn-adres__brak { font-size: 15px; line-height: 1.65; color: var(--text-muted); margin: 0; max-width: 34ch; } .orn-adres .orn-btn { align-self: flex-start; margin-top: auto; } .woocommerce-Address { background: var(--surface-paper); border: 1px solid var(--border-divider); border-radius: var(--radius-card); padding: 24px; float: none !important; width: auto !important; } .woocommerce-Address-title { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } /* Tytul karty adresu to etykieta, nie naglowek wystawowy. W Cormorancie z wersalikami "ADRES ROZLICZENIOWY" lamalo sie na dwie linie i wypychalo odnosnik "Dodaj" w pionowy pasek liter. Stad font UI i zero wersalikow. */ /* Fabryczny szablon daje tu h2 (nie h3 - na tym sie wczesniej przejechalem). */ .woocommerce-MyAccount-content .woocommerce-Address-title h2, .woocommerce-MyAccount-content .woocommerce-Address-title h3 { font-family: var(--font-ui); font-size: 15px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text-body); margin: 0; } .woocommerce-Address-title a { flex: none; white-space: nowrap; } .woocommerce-Address address { font-style: normal; font-size: 15px; line-height: 1.7; } /* formularze konta (adres, dane) - te same reguly co kasa */ .woocommerce-MyAccount-content .form-row label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; } .woocommerce-MyAccount-content .input-text, .woocommerce-MyAccount-content select { width: 100%; height: 48px; padding: 0 16px; box-sizing: border-box; border: 1.5px solid var(--border-input); border-radius: var(--radius-input); background: var(--surface-page); font-family: var(--font-ui); font-size: 15px; } /* ================================================== potwierdzenie zamowienia */ .woocommerce-order .woocommerce-thankyou-order-received { font-family: var(--font-display); font-size: 28px; font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-heading); color: var(--text-brand); margin: 0 0 28px; } ul.woocommerce-order-overview { list-style: none; margin: 0 0 40px; padding: 20px 24px; display: flex; flex-wrap: wrap; gap: 16px 40px; background: var(--surface-paper); border: 1px solid var(--border-divider); border-radius: var(--radius-card); } ul.woocommerce-order-overview li { font-size: 12px; font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); border: 0; margin: 0; padding: 0; } ul.woocommerce-order-overview li strong { display: block; margin-top: 4px; font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--text-body); } .woocommerce-order h2, .woocommerce-customer-details h2 { font-size: 24px; margin: 32px 0 16px; } .woocommerce-table--order-details td, .woocommerce-table--order-details th { font-size: 14px; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--border-divider); } .woocommerce-customer-details address { font-style: normal; font-size: 15px; line-height: 1.7; background: var(--surface-paper); border: 1px solid var(--border-divider); border-radius: var(--radius-card); padding: 20px 24px; } .woocommerce-bacs-bank-details { margin: 24px 0; } @media (max-width: 1023px) { .woocommerce-account .woocommerce { grid-template-columns: 1fr; gap: 24px; } .woocommerce-Addresses { grid-template-columns: 1fr; } .woocommerce-form-login, .woocommerce-form-register { padding: 20px 16px; } } /* =============================================================== cookies */ .orn-cookies { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90; max-width: 560px; margin-inline: auto; background: var(--surface-page); border: 1px solid var(--border-divider); border-radius: var(--radius-card); box-shadow: var(--shadow-2); padding: 20px 24px; } .orn-cookies p { margin: 0 0 16px; font-size: 13px; line-height: 1.6; color: var(--text-body); } .orn-cookies p a { color: var(--action); font-weight: 600; } .orn-cookies__akcje { display: flex; gap: 10px; flex-wrap: wrap; } .orn-cookies__akcje .orn-btn { min-height: 40px; padding: 0 20px; font-size: 13px; } /* ================================================== logowanie: kompozycja */ /* Ekran logowania to dwie kolumny: intro po lewej, formularz po prawej. Kształty z brandbooka celowo nie wchodzą (wytyczne: nie w formularzach), rytm daje papierowe tło sekcji i oddech. */ .woocommerce-account:not(.logged-in) .orn-strona .entry-title { display: none; } .woocommerce-account:not(.logged-in) .woocommerce { padding: 8px 0 32px; } /* Siatka idzie po kolumnach z szablonu, nie po kolejnych dzieciach. Fabryczny szablon wypuszczal

obok formularza, wiec siatka liczaca dzieci wsadzala w prawa kolumne sam naglowek. */ .orn-logowanie { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: stretch; } .orn-logowanie--sam-login { grid-template-columns: minmax(0, 520px); justify-content: center; } .orn-logowanie__kolumna { min-width: 0; display: flex; flex-direction: column; padding: 40px; background: var(--surface-page); border: 1px solid var(--border-divider); border-radius: var(--radius-card); box-shadow: var(--shadow-1); } /* Lewa kolumna, czyli logowanie, dostaje delikatny krem. Dwie biale karty obok siebie nie mowily, ktora jest ta glowna dla wracajacego klienta. */ .orn-logowanie__kolumna:first-child { background: var(--surface-paper); } .orn-logowanie__kolumna--rejestracja { background: var(--surface-page); box-shadow: none; } .orn-logowanie-intro { min-width: 0; margin: 0 0 28px; } .orn-logowanie-intro__tytul { font-size: 34px; line-height: 1.15; margin: 8px 0 16px; } .orn-logowanie-intro__tekst { font-size: 15px; line-height: 1.7; color: var(--text-body); max-width: 46ch; margin: 0; } .orn-logowanie-intro__tekst--maly { font-size: 14px; color: var(--text-muted); margin-bottom: 0; } .orn-logowanie__nota { font-size: 14px; line-height: 1.6; color: var(--text-muted); margin: 0 0 20px; } /* Formularz wypelnia reszte kolumny, zeby oba przyciski staly w jednej linii. */ .orn-logowanie__kolumna form { display: flex; flex-direction: column; flex: 1; margin: 0; } .orn-logowanie__akcje { margin-top: auto; } .woocommerce-account:not(.logged-in) .woocommerce-form-login, .woocommerce-account:not(.logged-in) .woocommerce-form-register { max-width: none; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; } .woocommerce-form-login h2, .woocommerce-form-register h2 { font-size: 24px; margin: 0 0 24px; } /* rejestracja obok logowania, gdy Woo pokazuje oba */ .woocommerce-account .u-column1, .woocommerce-account .u-column2 { width: auto; float: none; } /* ------------------------------------------------------ kokpit i zakladki */ .orn-konto__naglowek { font-size: 28px; margin: 0 0 24px; } .woocommerce-MyAccount-content > p:first-child { font-size: 16px; } .woocommerce-MyAccount-content .woocommerce-info { background: var(--surface-paper); border-color: var(--border-divider); color: var(--text-body); } /* ================================================== KOKPIT KONTA (projekt) Kokpit niesie tresc, nie skroty do menu. Poprzednia wersja miala trzy kafle prowadzace do Zamowien, Adresow i Szczegolow konta, czyli powtarzala lewa kolumne i wygladala na pusta nawigacje. */ .woocommerce-MyAccount-content { display: flex; flex-direction: column; gap: 40px; } .orn-kokpit__powitanie { display: flex; flex-direction: column; gap: 8px; } .orn-kokpit__witaj { font-size: 22px; font-weight: 600; color: var(--text-brand); margin: 0; } .orn-kokpit__lead { font-size: 15px; color: var(--text-muted); margin: 0; } /* karta ostatniego zamowienia */ .orn-ost { background: var(--surface-paper); border: 1px solid var(--border-divider); border-radius: var(--radius-card); padding: 28px 28px 24px; } .orn-ost__gora { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 20px; } .orn-ost__numer { font-size: 24px; font-weight: 600; color: var(--text-body); margin: 8px 0 4px; white-space: nowrap; font-variant-numeric: tabular-nums; } .orn-ost__data { font-size: 14px; color: var(--text-muted); margin: 0; } .orn-ost__prawa { text-align: right; } .orn-ost__kwota { font-size: 24px; font-weight: 600; color: var(--text-body); margin: 14px 0 0; white-space: nowrap; font-variant-numeric: tabular-nums; } .orn-ost__kwota .woocommerce-Price-amount { font-weight: 600; } .orn-ost__pozycje { display: flex; align-items: center; gap: 20px; padding: 18px 0; border-top: 1px solid var(--border-divider); border-bottom: 1px solid var(--border-divider); margin-bottom: 20px; } .orn-ost__miniatury { flex: none; display: flex; gap: 8px; } .orn-ost__miniatury img { width: 54px; height: 74px; object-fit: cover; border-radius: 6px; display: block; } .orn-ost__nazwy { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; } .orn-ost__nazwy span { font-size: 14px; font-weight: 500; color: var(--text-body); } /* sciezka realizacji */ .orn-etapy { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); } .orn-etapy__krok { display: flex; flex-direction: column; gap: 10px; } .orn-etapy__pasek { display: flex; align-items: center; } .orn-etapy__kropka { flex: none; width: 26px; height: 26px; border-radius: 50%; font-size: 13px; font-weight: 700; line-height: 26px; text-align: center; background: var(--surface-page); border: 1.5px solid var(--border-input); box-sizing: border-box; } .orn-etapy__linia { flex: 1; height: 1px; background: var(--border-divider); } .orn-etapy__nazwa { font-size: 13px; font-weight: 500; color: var(--text-muted); } .orn-etapy__teraz { font-weight: 500; color: var(--text-muted); } .orn-etapy__krok--zrobiony .orn-etapy__kropka { background: var(--action); border-color: var(--action); color: var(--text-inverse); } .orn-etapy__krok--zrobiony .orn-etapy__linia { background: var(--action); } .orn-etapy__krok--zrobiony .orn-etapy__nazwa { font-weight: 600; color: var(--text-body); } .orn-etapy__krok--biezacy .orn-etapy__kropka { border: 2px solid var(--action); color: var(--action); line-height: 22px; } .orn-etapy__krok--biezacy .orn-etapy__nazwa { font-weight: 600; color: var(--action); } /* karta zapraszajaca dla klienta bez zamowien */ .orn-zacznij { position: relative; overflow: hidden; background: var(--surface-paper); border: 1px solid var(--border-divider); border-radius: var(--radius-card); padding: 32px; } .orn-zacznij__monogram { position: absolute; top: 18px; right: 28px; font-family: var(--font-znak); font-size: 76px; line-height: 1; color: var(--brzoskwinia); pointer-events: none; } .orn-zacznij__tytul { font-size: 26px; margin: 0 0 12px; position: relative; } .orn-zacznij__tekst { font-size: 15px; line-height: 1.65; color: var(--text-muted); margin: 0 0 24px; max-width: 46ch; position: relative; } .orn-zacznij__akcje { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 24px; } /* adres wysylki w kokpicie */ .orn-kokpit__adres { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; border: 1px solid var(--border-divider); border-radius: var(--radius-card); padding: 20px 24px; } .orn-kokpit__adres address { font-style: normal; font-size: 15px; line-height: 1.7; color: var(--text-body); } .orn-kokpit__adres--pusty { align-items: center; } .orn-kokpit__adres--pusty p { margin: 0; font-size: 15px; color: var(--text-muted); max-width: 48ch; } .orn-link-strzalka { flex: none; font-size: 14px; font-weight: 600; color: var(--action); padding: 6px 0; } .orn-link-strzalka::after { content: " \2192"; } /* Kafel kategorii: jeden komponent na cala strone (kokpit, pusty koszyk, sklep, pusta kategoria, wyszukiwarka, 404). Zdjecie u gory, nazwa na dole. Kategorie nie maja jeszcze zdjec, wiec zamiast pustej ramki idzie zaslepka marki. Wgranie miniatury kategorii w panelu podmienia ja bez zmiany w CSS. */ .orn-kafle-kat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .orn-kafel-kat { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border-divider); border-radius: var(--radius-card); background: var(--surface-page); color: var(--text-body); transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .orn-kafel-kat:hover { border-color: var(--action); color: var(--action); text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-1); } .orn-kafel-kat__obraz { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--krem); } .orn-kafel-kat__obraz img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 420ms var(--ease); } .orn-kafel-kat:hover .orn-kafel-kat__obraz img { transform: scale(1.04); } /* Zaslepka: papierowe tlo i monogram, ten sam jezyk co pustka na 404. */ .orn-kafel-kat__obraz--zaslepka { display: grid; place-items: center; background: radial-gradient(circle at 78% 22%, rgba(226,177,157,.45), transparent 58%), var(--krem); } .orn-kafel-kat__monogram { font-family: var(--font-znak); font-size: 40px; font-weight: 500; letter-spacing: var(--tracking-heading); color: var(--sliwka); opacity: .3; } .orn-kafel-kat__stopka { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; } .orn-kafel-kat__nazwa { font-size: 14px; font-weight: 600; line-height: 1.4; } .orn-kafel-kat__strzalka { color: var(--action); display: inline-flex; flex: none; } @media (max-width: 760px) { .orn-etapy { grid-template-columns: 1fr; gap: 14px; } .orn-etapy__linia { display: none; } .orn-etapy__krok { flex-direction: row; align-items: center; gap: 12px; } .orn-kafle-kat { grid-template-columns: 1fr; } .orn-ost__gora { flex-direction: column; gap: 14px; } .orn-ost__prawa { text-align: left; } .orn-ost__kwota { margin-top: 10px; } .orn-kokpit__adres { flex-direction: column; gap: 16px; } .orn-zacznij__monogram { font-size: 56px; top: 12px; right: 18px; } } /* tabela zamowien: karty na mobile, tabela na desktopie */ .woocommerce-orders-table thead th { font-size: 12px; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); padding-bottom: 12px; } .woocommerce-orders-table__cell-order-number a { font-weight: 600; } .woocommerce-orders-table__cell-order-status { color: var(--text-muted); } /* stan pusty w zakladkach konta */ .orn-konto-pusto { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; background: var(--surface-paper); border: 1px solid var(--border-divider); border-radius: var(--radius-card); padding: 40px; } .orn-konto-pusto__tytul { font-family: var(--font-display); font-size: 24px; font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-heading); color: var(--text-brand); margin: 0; } .orn-konto-pusto p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--text-muted); max-width: 52ch; } @media (max-width: 1023px) { .orn-logowanie { grid-template-columns: 1fr; gap: 24px; } .orn-logowanie-intro__tytul { font-size: 28px; } .orn-logowanie__kolumna { padding: 24px 20px; } .orn-kokpit { grid-template-columns: 1fr; } } /* ============================================ pusty koszyk, 404, szukanie */ .orn-pusty-koszyk { padding: 8px 0 32px; } .orn-pusty-koszyk__gora { position: relative; overflow: hidden; display: grid; grid-template-columns: 220px 1fr; gap: 48px; align-items: center; background: var(--surface-paper); border: 1px solid var(--border-divider); border-radius: var(--radius-card); padding: 56px 56px 56px 0; } .orn-pusty-koszyk__znak { display: flex; align-items: center; justify-content: center; font-family: var(--font-znak); font-size: 180px; line-height: 1; color: var(--krem); } .orn-pusty-koszyk__gora h2 { font-size: 34px; margin: 0 0 16px; } .orn-pusty-koszyk__tekst { font-size: 17px; line-height: 1.7; color: var(--text-body); max-width: 46ch; margin: 0 0 28px; } .orn-pusty-koszyk__akcje { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .orn-pusty-koszyk__kafle { margin-top: 40px; } .orn-404 { position: relative; overflow: hidden; } .orn-404__znak { position: absolute; right: 4%; top: -80px; font-family: var(--font-znak); font-size: 420px; line-height: 1; color: var(--krem); opacity: .55; pointer-events: none; user-select: none; } .orn-404__inner { position: relative; padding: 80px 0 96px; } .orn-404__inner h1 { font-size: 56px; line-height: 1.12; margin: 0 0 24px; } .orn-404__tekst { font-size: 17px; line-height: 1.7; color: var(--text-body); max-width: 48ch; margin: 0 0 32px; } .orn-404__szukaj, .orn-szukanie__form { display: flex; gap: 12px; max-width: 480px; margin: 0 0 24px; } /* Ten sam uklad co pola newslettera: na telefonie rzad staje sie kolumna (regula nizej), wiec samo flex:1 przestaje sterowac szerokoscia. Potrzebne jawne width:100% plus box-sizing, bo motyw nie ma globalnego resetu. */ .orn-404__szukaj input, .orn-szukanie__form input { flex: 1 1 auto; width: 100%; min-width: 0; box-sizing: border-box; height: 52px; padding: 0 18px; border: 1.5px solid var(--border-input); border-radius: var(--radius-input); background: var(--surface-page); font-family: var(--font-ui); font-size: 15px; color: var(--text-body); outline: none; } .orn-404__szukaj input:focus, .orn-szukanie__form input:focus { border-color: var(--action); } .orn-404__akcje { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .orn-404__kafle { margin-top: 64px; max-width: 900px; } .orn-szukanie { padding: 56px 0 96px; } .orn-szukanie__naglowek { margin-bottom: 56px; } .orn-szukanie__naglowek h1 { font-size: 44px; margin: 0 0 8px; } .orn-szukanie__licznik { font-size: 14px; color: var(--text-muted); margin: 0 0 28px; } .orn-szukanie__sekcja { margin-bottom: 64px; } .orn-szukanie__sekcja h2 { font-size: 24px; margin: 0 0 24px; } .orn-siatka-produktow--3 { grid-template-columns: repeat(3, 1fr); } .orn-szukanie__lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-divider); } .orn-szukanie__lista li { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--border-divider); } .orn-szukanie__lista a { font-size: 16px; font-weight: 600; color: var(--text-body); } .orn-szukanie__lista a:hover { color: var(--action); text-decoration: none; } .orn-szukanie__lista span { flex: none; font-size: 13px; color: var(--text-muted); } .orn-szukanie__brak { max-width: 900px; } .orn-szukanie__brak-tekst { font-size: 17px; line-height: 1.7; color: var(--text-body); max-width: 52ch; margin: 0 0 40px; } .orn-szukanie__brak-akcje { margin-top: 40px; } @media (max-width: 1023px) { .orn-pusty-koszyk__gora { grid-template-columns: 1fr; padding: 32px 24px; gap: 16px; } .orn-pusty-koszyk__znak { font-size: 110px; justify-content: flex-start; } .orn-pusty-koszyk__gora h2 { font-size: 26px; } .orn-404__znak { font-size: 220px; right: -20px; top: -40px; } .orn-404__inner { padding: 48px 0 64px; } .orn-404__inner h1 { font-size: 36px; } .orn-szukanie { padding: 32px 0 64px; } .orn-szukanie__naglowek h1 { font-size: 30px; } .orn-404__szukaj, .orn-szukanie__form { flex-direction: column; } /* pod polem, wiec ta sama wysokosc co pole */ .orn-404__szukaj .orn-btn, .orn-szukanie__form .orn-btn { width: 100%; min-height: 52px; } .orn-siatka-produktow--3 { grid-template-columns: repeat(2, 1fr); } } /* Plakietki statusu zamowienia: KOLOR PLUS GLIF, nigdy sam kolor. Status musi byc czytelny takze bez rozrozniania barw i po wydruku czarno-bialym. Poprzednia wersja miala do tego odwrocone role: "oczekiwanie na platnosc" swiecilo sliwka jak stan normalny, a "w realizacji" ostrzegawcza musztarda. */ .orn-status { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: var(--radius-pill); font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; white-space: nowrap; border: 1px solid var(--border-divider); background: var(--surface-paper); color: var(--text-muted); } /* Kolor glifu idzie wlasna zmienna, nie przez currentColor. Przy currentColor deklaracje `background: currentColor` i `color: ...` na TYM SAMYM elemencie zapetlaja sie: tlo bierze kolor tekstu, ktory wlasnie nadpisujemy na bialy, i wychodzi biale kolko z bialym znakiem, czyli nic. */ .orn-status { --orn-status-kolor: var(--text-muted); } .orn-status__glif { flex: none; width: 15px; height: 15px; border-radius: 50%; background: var(--orn-status-kolor); color: var(--surface-page); font-size: 10px; line-height: 15px; text-align: center; letter-spacing: 0; } .orn-status--pending { --orn-status-kolor: var(--uwaga); background: var(--uwaga-tlo); border-color: var(--uwaga-obwodka); color: var(--uwaga); } .orn-status--on-hold { --orn-status-kolor: var(--uwaga); background: var(--uwaga-tlo); border-color: var(--uwaga-obwodka); color: var(--uwaga); } .orn-status--processing { --orn-status-kolor: var(--info); background: var(--info-tlo); border-color: var(--info-obwodka); color: var(--info); } .orn-status--completed { --orn-status-kolor: var(--sukces); background: var(--sukces-tlo); border-color: var(--sukces-obwodka); color: var(--sukces); } .orn-status--cancelled, .orn-status--failed { --orn-status-kolor: var(--blad); background: var(--blad-tlo); border-color: var(--blad-obwodka); color: var(--blad); } .orn-status--refunded { --orn-status-kolor: var(--gliniany); background: var(--surface-page); border: 1.5px solid var(--gliniany); color: var(--oberzyna); } .woocommerce-pagination--without-numbers { display: flex; gap: 12px; margin-top: 28px; } /* Przycisk pokazywania hasla WooCommerce: fabryczny markup to , pusty element bez tresci - caly wyglad niosl arkusz Woo, ktory jest wylaczony. Pierwsza proba rysowala samą soczewke obwodka i czytalo sie to jako przypadkowe kolko przy polu. Teraz jest prawdziwe oko z zrenica, wpuszczone maska, wiec bierze kolor z `color` i ma stan przekreslony. */ .woocommerce .password-input { display: block; position: relative; --orn-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='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.8 12S5.4 5.6 12 5.6 22.2 12 22.2 12 18.6 18.4 12 18.4 1.8 12 1.8 12Z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/svg%3E"); --orn-oko-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.8 12S5.4 5.6 12 5.6 22.2 12 22.2 12 18.6 18.4 12 18.4 1.8 12 1.8 12Z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M3.5 20.5 20.5 3.5'/%3E%3C/svg%3E"); } .woocommerce .password-input input { padding-right: 48px; } .woocommerce .show-password-input { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; cursor: pointer; border: 0; padding: 0; color: var(--gliniany); background-color: currentColor; -webkit-mask: var(--orn-oko) center / 22px 22px no-repeat; mask: var(--orn-oko) center / 22px 22px no-repeat; transition: color var(--dur-fast) var(--ease); } .woocommerce .show-password-input:hover { color: var(--action); } .woocommerce .show-password-input.display-password { color: var(--action); -webkit-mask-image: var(--orn-oko-off); mask-image: var(--orn-oko-off); } .woocommerce-account:not(.logged-in) .orn-konto__naglowek { font-size: 24px; margin: 0 0 20px; } .woocommerce-privacy-policy-text p { font-size: 13px; line-height: 1.6; color: var(--text-muted); } .orn-konto__wstep { font-size: 14px; line-height: 1.65; color: var(--text-muted); margin: 0 0 24px; max-width: 56ch; } /* Adresy: fabryczny naglowek "Adres rozliczeniowy" w karcie */ .woocommerce-Address header.woocommerce-Address-title a.edit { font-size: 13px; font-weight: 600; } /* Formularze w koncie: te same dwie kolumny co w kasie, ograniczona szerokosc kolumny tresci. Pole na 960 px jest nieczytelne. */ .woocommerce-MyAccount-content { max-width: 720px; } .woocommerce-address-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } /* Szczegoly konta: imie i nazwisko obok siebie, reszta na cala szerokosc. Poprzednia reguła celowala w `.orn-para`, klase ktorej zaden szablon nie renderuje - dlatego caly formularz stal jedna kolumna pol po 720 px. Teraz idziemy po fabrycznych `form-row-first` i `form-row-last`. */ .woocommerce-EditAccountForm { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; } .woocommerce-EditAccountForm > * { grid-column: 1 / -1; } .woocommerce-EditAccountForm > p.form-row-first { grid-column: 1; } .woocommerce-EditAccountForm > p.form-row-last { grid-column: 2; } .woocommerce-EditAccountForm > .clear { display: none; } .woocommerce-address-fields p.form-row, .woocommerce-EditAccountForm p.form-row { margin: 0 0 20px; } .woocommerce-address-fields__field-wrapper p.form-row { margin: 0; } .woocommerce-address-fields__field-wrapper p.form-row-wide { grid-column: 1 / -1; } .woocommerce-address-fields .form-row:last-child, .woocommerce-address-fields > p:last-child { margin-bottom: 0; } /* przyciski zapisu: akcja glowna wypelniona */ .woocommerce-MyAccount-content button[type="submit"], .woocommerce-MyAccount-content .woocommerce-Button--next { background: var(--action) !important; color: var(--text-inverse) !important; border-color: var(--action) !important; min-height: 52px !important; padding: 0 32px !important; font-size: 15px !important; margin-top: 8px; } .woocommerce-MyAccount-content button[type="submit"]:hover { background: var(--action-hover) !important; border-color: var(--action-hover) !important; } /* fieldset zmiany hasla */ .woocommerce-EditAccountForm fieldset { border: 1px solid var(--border-divider); border-radius: var(--radius-card); padding: 24px; margin: 8px 0 24px; } .woocommerce-EditAccountForm legend { padding: 0 8px; font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); } .woocommerce-EditAccountForm fieldset p.form-row:last-child { margin-bottom: 0; } .woocommerce-EditAccountForm .woocommerce-Address-title h3 { font-size: 20px; } .woocommerce-address-fields h3, .woocommerce-MyAccount-content h3 { font-size: 22px; margin: 0 0 20px; } @media (max-width: 1023px) { .woocommerce-address-fields__field-wrapper, .woocommerce-EditAccountForm { grid-template-columns: 1fr; } } /* pusty koszyk: jedna kolumna, bez siatki podsumowania */ body.orn-koszyk-pusty .entry-content .woocommerce { display: block; } /* potwierdzenie: komunikat jako lead, nie drugi naglowek */ .woocommerce-order .woocommerce-thankyou-order-received { font-family: var(--font-ui); font-size: 17px; font-weight: 400; text-transform: none; letter-spacing: 0; line-height: 1.7; color: var(--text-body); max-width: 56ch; margin: 0 0 32px; } .woocommerce-order .woocommerce-thankyou-order-received strong { font-weight: 600; color: var(--text-brand); } /* Wyroznienia w zdaniu o statusie zamowienia: domyslne zolte tlo przegladarki nie ma nic wspolnego z paleta. Zero czystej zolci. */ .woocommerce mark, .woocommerce-MyAccount-content mark { background: transparent; color: var(--text-brand); font-weight: 600; } .woocommerce-order-details__title, .woocommerce-column__title { font-size: 24px; margin: 32px 0 16px; } /* zdanie o statusie jako lead nad szczegolami */ .woocommerce-MyAccount-content > p:first-of-type { font-size: 16px; line-height: 1.7; color: var(--text-body); padding-bottom: 4px; } /* ======================================= logowanie, haslo, szczegoly konta */ /* Intro przy logowaniu: trzy powody, dla ktorych konto ma sens, jako lista, nie jako akapit. Krotka lista czyta sie szybciej niz zdanie zlozone. */ .orn-logowanie-intro__lista { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .orn-logowanie-intro__lista li { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--text-body); } .orn-logowanie-intro__lista li::before { content: "\2713"; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-cream); color: var(--action); font-size: 11px; font-weight: 700; line-height: 22px; text-align: center; } /* Odzyskiwanie hasla: dwa kroki widoczne od razu, zeby nikt nie czekal na natychmiastowe zalogowanie po wyslaniu adresu. */ .orn-haslo { max-width: 560px; } .orn-haslo__tytul { font-size: 30px; margin: 0 0 20px; } .orn-haslo__kroki { list-style: none; margin: 0 0 28px; padding: 0; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } .orn-haslo__krok { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--text-muted); } .orn-haslo__krok span { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--border-input); background: var(--surface-page); font-size: 12px; font-weight: 700; line-height: 21px; text-align: center; box-sizing: border-box; } .orn-haslo__krok--biezacy { color: var(--action); font-weight: 600; } .orn-haslo__krok--biezacy span { border-color: var(--action); color: var(--action); } .orn-haslo__krok--zrobiony span { background: var(--action); border-color: var(--action); color: var(--text-inverse); } .orn-haslo p { font-size: 15px; line-height: 1.65; color: var(--text-muted); margin: 0 0 20px; } .orn-haslo__akcje { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 8px; } /* Podpowiedz pod polem formularza. Fabrycznie WooCommerce daje tu , co w Montserracie wyglada jak pomylka, a nie jak wyjasnienie. */ .orn-pole__podpowiedz { display: block; margin-top: 8px; font-size: 13px; line-height: 1.55; color: var(--text-muted); font-style: normal; } .orn-pole__podpowiedz--sekcja { margin: 4px 0 0; } .woocommerce-EditAccountForm fieldset .orn-pole__podpowiedz--sekcja { grid-column: 1 / -1; } /* Ekran odzyskiwania hasla stoi poza rama panelu, wiec nie lapie stylow pol zawezonych do `.woocommerce-MyAccount-content`. Ubieramy go osobno. */ .orn-haslo .form-row { display: flex; flex-direction: column; gap: 8px; margin: 0 0 20px; float: none; width: auto; } .orn-haslo label { font-size: 14px; font-weight: 600; color: var(--text-body); } .orn-haslo .input-text, .orn-haslo input[type="text"], .orn-haslo input[type="password"] { width: 100%; box-sizing: border-box; height: 48px; padding: 0 16px; border: 1.5px solid var(--border-input); border-radius: var(--radius-input); background: var(--surface-page); font-family: var(--font-ui); font-size: 15px; color: var(--text-body); } .orn-haslo .input-text:focus, .orn-haslo input[type="password"]:focus { outline: 2px solid var(--action); outline-offset: 1px; border-color: var(--action); } .orn-haslo .password-input { display: block; position: relative; } /* Wiersz akcji musi bic reguleogolna `.orn-haslo .form-row` (0-2-0), inaczej przyciski ustawiaja sie w kolumne i uciekaja na srodek. */ .orn-haslo .orn-haslo__akcje { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; flex-wrap: wrap; margin: 8px 0 0; } .orn-haslo__akcje .orn-btn { width: auto; } .orn-haslo .woocommerce-Button, .orn-haslo button[type="submit"] { width: auto !important; min-width: 160px; } /* ================================================ potwierdzenie zamowienia */ .orn-podziek__zdanie { display: block; font-size: 20px; line-height: 1.5; color: var(--text-body); margin-bottom: 10px; } .orn-podziek__mail { display: block; font-size: 15px; line-height: 1.65; color: var(--text-muted); max-width: 60ch; } /* Tytul i kwota przelewu to pola, ktore klient przepisuje do bankowosci, wiec dostaja te sama uwage co numer konta. */ ul.wc-bacs-bank-details li.orn_tytul strong, ul.wc-bacs-bank-details li.orn_kwota strong { font-size: 17px; color: var(--text-body); } /* "Co sie teraz stanie": cztery kroki, numer w kole, opis pod tytulem. */ .orn-dalej { margin: 40px 0 32px; } .orn-dalej__lista { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .orn-dalej__krok { display: flex; flex-direction: column; gap: 10px; } .orn-dalej__numer { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-cream); color: var(--action); font-size: 13px; font-weight: 700; line-height: 28px; text-align: center; } .orn-dalej__tresc { display: flex; flex-direction: column; gap: 4px; } .orn-dalej__tytul { font-size: 14px; font-weight: 600; color: var(--text-body); } .orn-dalej__opis { font-size: 13px; line-height: 1.6; color: var(--text-muted); } .orn-dalej__akcje { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0 0 8px; } @media (max-width: 860px) { .orn-dalej__lista { grid-template-columns: 1fr; gap: 16px; } .orn-dalej__krok { flex-direction: row; align-items: flex-start; gap: 14px; } } /* =============================================== stany puste: jeden wzorzec Pusty koszyk, 404 i brak wynikow wygladaja tak samo, bo to ten sam moment: klient nie znalazl tego, po co przyszedl. Zaden z nich nie jest koncem drogi, kazdy prowadzi do konkretnych kategorii. Monogram to jedyna dekoracja. */ .orn-pusto { position: relative; overflow: hidden; max-width: 720px; padding: 8px 0 8px; } .orn-pusto__monogram { position: absolute; top: -6px; right: 0; font-family: var(--font-znak); font-size: 108px; line-height: 1; color: var(--brzoskwinia); pointer-events: none; user-select: none; } .orn-pusto__tytul { font-size: 30px; margin: 10px 0 12px; max-width: 20ch; position: relative; } .orn-pusto__tekst { font-size: 15px; line-height: 1.7; color: var(--text-muted); margin: 0 0 28px; max-width: 56ch; position: relative; } .orn-pusto__eyebrow { margin: 0 0 12px; } .orn-pusto__akcje { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 28px; } .orn-pusto__szukaj { display: flex; gap: 12px; margin: 0 0 32px; max-width: 480px; } .orn-pusto__szukaj input[type="search"] { flex: 1; min-width: 0; height: 48px; box-sizing: border-box; padding: 0 16px; border: 1.5px solid var(--border-input); border-radius: var(--radius-input); background: var(--surface-page); font-family: var(--font-ui); font-size: 15px; color: var(--text-body); } .orn-pusto__szukaj .orn-btn { flex: none; } .orn-pusto--szukanie { margin-top: 8px; } /* Pusty koszyk nie ma siatki koszyka, wiec widok dostaje pelna szerokosc. */ body.orn-koszyk-pusty .entry-content .woocommerce { display: block; } /* Pusty koszyk i pusta lista zyczen niosa cztery kafle (trzy kategorie plus karta zapisu), wiec nie mieszcza sie w kolumnie 720 px jak krotkie stany 404 i braku wynikow. */ .orn-pusto--koszyk, .orn-pusto--lz { max-width: none; } .orn-pusto__siatka { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: stretch; position: relative; } .orn-pusto__siatka .orn-kafel-kat { height: 100%; } /* Karta rabatu bierze dwie kolumny, wiec pole na e-mail i przycisk mieszcza sie obok siebie, a zgoda ma szerokosc na dwie linijki zamiast szesciu. */ .orn-pusto__siatka .orn-powiadomienie--rabat { grid-column: span 2; } .orn-pusto__siatka .orn-powiadomienie--rabat .orn-zgoda { margin-top: 14px; } /* Pole i przycisk obok siebie dopiero, gdy jest na to miejsce. Ta regula ma wyzsza specyficznosc niz kolumna z wariantu kafla, wiec bez media query wygrywala tez na telefonie i pole na e-mail kurczylo sie do paska. */ @media (min-width: 641px) { .orn-pusto__siatka .orn-powiadomienie--rabat .orn-powiadomienie__rzad { flex-direction: row; align-items: center; } .orn-pusto__siatka .orn-powiadomienie--rabat .orn-powiadomienie__rzad .orn-btn { width: auto; flex: none; } } .orn-pusto--koszyk .orn-pusto__monogram { right: auto; left: 0; top: -14px; opacity: .5; } .orn-pusto--koszyk .orn-pusto__tytul, .orn-pusto--koszyk .orn-pusto__tekst { margin-left: 132px; } .orn-pusto--koszyk .orn-pusto__eyebrow { margin-left: 132px; } /* Tytul strony nad "Koszyk jest pusty" powtarza to samo slowo dwa razy. */ body.orn-koszyk-pusty .orn-strona > .entry-header { display: none; } @media (max-width: 1100px) { .orn-pusto__siatka { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .orn-pusto__siatka { grid-template-columns: 1fr; } /* Bez tego karta rabatu dalej prosila o dwie kolumny (`span 2`), a siatka majaca tylko jedna dorabiala sobie druga, niejawna. Kafle kategorii rozjezdzaly sie wtedy na rozne szerokosci: pierwszy sciskal sie do ~180 px i ucinal nazwe kategorii, drugi zajmowal reszte. */ .orn-pusto__siatka .orn-powiadomienie--rabat { grid-column: auto; } .orn-pusto--koszyk .orn-pusto__tytul, .orn-pusto--koszyk .orn-pusto__tekst, .orn-pusto--koszyk .orn-pusto__eyebrow { margin-left: 0; } .orn-pusto--koszyk .orn-pusto__monogram { position: static; display: block; } } @media (max-width: 640px) { .orn-pusto__monogram { font-size: 72px; } .orn-pusto__szukaj { flex-direction: column; } .orn-pusto__szukaj .orn-btn { width: 100%; } } /* ============================================================ lista zyczen */ /* Serce na kaflu i na karcie produktu. Stan "wybrane" wypelnia ksztalt, bo sam kolor obwodki na malej ikonie jest za slabym sygnalem. */ .orn-produkt__serce.orn-serce--wybrane svg, .orn-lista-zyczen.orn-serce--wybrane svg { fill: var(--action); stroke: var(--action); } .orn-produkt__serce.orn-serce--wybrane { color: var(--action); } .orn-lista-zyczen.orn-serce--wybrane { color: var(--action); border-color: var(--action); } @keyframes orn-serce-puls { 0% { transform: scale(1); } 45% { transform: scale(1.28); } 100% { transform: scale(1); } } .orn-serce--puls svg { animation: orn-serce-puls 400ms var(--ease); } /* Licznik przy ikonie w naglowku: ten sam jezyk co licznik koszyka. */ .orn-iconbtn--lz { position: relative; } .orn-iconbtn__licznik { position: absolute; top: -4px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); background: var(--action); color: var(--text-inverse); font-size: 11px; font-weight: 700; line-height: 1; } .orn-lz__naglowek { max-width: 62ch; margin: 0 0 32px; } .orn-lz__tytul { font-size: 40px; line-height: 1.15; margin: 8px 0 12px; } .orn-lz__lead { font-size: 16px; line-height: 1.7; color: var(--text-muted); margin: 0; } .orn-lz__laduje { font-size: 14px; color: var(--text-muted); margin: 0 0 24px; } .orn-lz__siatka { margin: 0; padding: 0; } .orn-lz__znika { opacity: 0; transform: scale(.97); transition: opacity 240ms var(--ease), transform 240ms var(--ease); } .orn-pusto--lz { padding-top: 8px; } /* ====================================================== nawigacja kategorii */ /* Nad filtrami, zeby z kartek urodzinowych dalo sie przejsc do gratulacyjnych bez wracania do mega menu w naglowku. */ .orn-katnav { margin: 0 0 28px; } .orn-katnav__tytul { margin: 0 0 12px; } .orn-katnav__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .orn-katnav__link { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 7px 10px; margin: 0 -10px; border-radius: var(--radius-card); font-size: 14px; line-height: 1.4; color: var(--text-body); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .orn-katnav__link:hover { background: var(--surface-tint); color: var(--action); text-decoration: none; } .orn-katnav__link--biezaca { background: var(--surface-cream); color: var(--text-brand); font-weight: 600; } .orn-katnav__ile { font-size: 12px; color: var(--text-muted); flex: none; font-variant-numeric: tabular-nums; } .orn-katnav__link--biezaca .orn-katnav__ile { color: var(--text-brand); } /* Na telefonie ta sama kolumna, co na duzym ekranie. Wczesniej lista zmieniala sie tu w pigulki zawijane w rzedy: nazwy maja od 6 do 23 znakow, wiec kazdy rzad wychodzil innej dlugosci i konczyl sie ragged edge w przypadkowym miejscu. Kolumna czyta sie jak spis, bo wszystkie nazwy startuja z tej samej linii, a liczniki stoja rowno przy prawej krawedzi. Rosna tylko wiersze: 44 px to minimalne pole dotyku (WCAG 2.5.5). */ @media (max-width: 1023px) { .orn-katnav__link, .orn-katnav__wiecej > summary { /* box-sizing: motyw nie ma globalnego resetu, wiec bez tego min-height liczy sie od pudelka tresci i wiersz rosl do 66 px zamiast 44. */ box-sizing: border-box; min-height: 44px; padding: 10px 12px; margin: 0 -12px; font-size: 15px; } .orn-katnav__ile { font-size: 13px; } } /* Rozwiniecie z reszta okazji: szesnascie pozycji w kolumnie to spis tresci, nie nawigacja, wiec widac tylko te z towarem. */ .orn-katnav__wiecej { margin-top: 8px; } .orn-katnav__wiecej > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 7px 10px; margin: 0 -10px; border-radius: var(--radius-card); font-size: 14px; font-weight: 600; color: var(--action); } .orn-katnav__wiecej > summary::-webkit-details-marker { display: none; } .orn-katnav__wiecej > summary:hover { background: var(--surface-tint); } .orn-katnav__wiecej[open] > summary { margin-bottom: 2px; } /* ================================================== koszyk: wysylka i ilosc */ /* Ilosc dla pozycji sprzedawanych pojedynczo. WooCommerce chowa tam pole, przez co kolumna zostawala pusta i tabela tracila rytm cena / ilosc / kwota. */ .orn-ilosc-stala { display: inline-flex; flex-direction: column; gap: 2px; line-height: 1.2; } .orn-ilosc-stala__liczba { font-size: 16px; font-weight: 600; color: var(--text-body); } .orn-ilosc-stala__opis { font-size: 12px; color: var(--text-muted); } /* Podpis pod darmowa dostawa: mowi, ze nizej sa jeszcze inne opcje. */ /* Dwukropek i kwota jako jeden nielamliwy kawalek: przy dlugiej nazwie metody lamie sie nazwa, a cena zostaje w jej ostatniej linii. */ .orn-wysylka__cena { white-space: nowrap; } .orn-wysylka__nota { display: block; margin-top: 4px; font-size: 12px; line-height: 1.5; color: var(--text-muted); font-weight: 400; } #shipping_method li:first-child .orn-wysylka__nota { max-width: 34ch; } /* Kalkulator kosztow wysylki. Pola byly prostokatne i ostre, bo fabryczny arkusz Woo jest wylaczony, a te selecty nie mialy zadnej reguly w motywie. */ .woocommerce-shipping-calculator { margin-top: 12px; } .woocommerce-shipping-calculator p { margin: 0 0 12px; } .woocommerce-shipping-calculator .select2-container, .woocommerce-shipping-calculator input[type="text"], .woocommerce-shipping-calculator select { width: 100%; box-sizing: border-box; height: 44px; padding: 0 14px; border: 1.5px solid var(--border-input); border-radius: var(--radius-input); background: var(--surface-page); font-family: var(--font-ui); font-size: 14px; color: var(--text-body); } .woocommerce-shipping-calculator select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; background-image: linear-gradient(45deg, transparent 49%, var(--border-input) 50%, var(--border-input) 62%, transparent 63%), linear-gradient(-45deg, transparent 49%, var(--border-input) 50%, var(--border-input) 62%, transparent 63%); background-size: 9px 9px, 9px 9px; background-position: calc(100% - 21px) calc(50% + 2px), calc(100% - 15px) calc(50% + 2px); background-repeat: no-repeat; } .woocommerce-shipping-calculator input[type="text"]:focus, .woocommerce-shipping-calculator select:focus { border-color: var(--action); outline: none; } .woocommerce-shipping-calculator button[type="submit"], .woocommerce-shipping-calculator .button { width: 100%; min-height: 44px; padding: 0 20px; border: 0; cursor: pointer; border-radius: var(--radius-pill); background: var(--action); color: var(--text-inverse); font-family: var(--font-ui); font-size: 14px; font-weight: 600; transition: background var(--dur-fast) var(--ease); } .woocommerce-shipping-calculator button[type="submit"]:hover, .woocommerce-shipping-calculator .button:hover { background: var(--action-hover); } /* Select2, ktore Woo podklada pod wybor kraju i wojewodztwa. */ .woocommerce-shipping-calculator .select2-selection--single { height: 42px !important; border: 0 !important; background: transparent !important; } .woocommerce-shipping-calculator .select2-selection__rendered { line-height: 42px !important; padding-left: 0 !important; color: var(--text-body) !important; } .woocommerce-shipping-calculator .select2-selection__arrow { height: 42px !important; } /* Checkbox marki w formularzach WooCommerce (zapamietaj mnie, zgody w kasie). Ten sam ksztalt co w newsletterze, konfiguratorze i formularzu kontaktowym. */ .woocommerce form .form-row input[type="checkbox"], .woocommerce-form__input-checkbox { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 0 8px 0 0; cursor: pointer; vertical-align: -4px; border: 1.5px solid var(--border-input); border-radius: 5px; background: var(--surface-page); display: inline-grid; place-content: center; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .woocommerce form .form-row input[type="checkbox"]::before, .woocommerce-form__input-checkbox::before { content: ""; width: 10px; height: 5px; border-left: 2px solid var(--text-inverse); border-bottom: 2px solid var(--text-inverse); transform: rotate(-45deg) translate(1px, -1px) scale(.4); opacity: 0; transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .woocommerce form .form-row input[type="checkbox"]:hover, .woocommerce-form__input-checkbox:hover { border-color: var(--action); } .woocommerce form .form-row input[type="checkbox"]:checked, .woocommerce-form__input-checkbox:checked { background: var(--action); border-color: var(--action); } .woocommerce form .form-row input[type="checkbox"]:checked::before, .woocommerce-form__input-checkbox:checked::before { opacity: 1; transform: rotate(-45deg) translate(1px, -1px) scale(1); } .woocommerce form .form-row input[type="checkbox"]:focus-visible, .woocommerce-form__input-checkbox:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } /* Mobile dla nowych blokow. Cyryl omawia telefon osobno, ale te reguly sa konieczne juz teraz: bez nich siatki lamia sie w poziomie. */ @media (max-width: 760px) { .orn-kafle-kat { grid-template-columns: 1fr; } .orn-pusta__siatka { grid-template-columns: 1fr; } .orn-lz__tytul { font-size: 30px; } .orn-ilosc-stala { flex-direction: row; align-items: baseline; gap: 6px; } } .orn-lz__awaria { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 24px 28px; border-radius: var(--radius-card); background: var(--surface-paper); border: 1px solid var(--border-divider); max-width: 720px; } .orn-lz__awaria-tekst { margin: 0; font-size: 15px; line-height: 1.65; color: var(--text-body); } /* Naglowki sekcji kokpitu. "Adres wysylki" stalo tuz nad ramka boksa, przyklejone do niej jak podpis, a nie jak naglowek nad trescia. */ .orn-kokpit__naglowek { margin: 40px 0 18px; } /* Blad kuponu ladowal na gorze strony, w pelnej szerokosci, kilkaset pikseli od pola, ktorego dotyczyl. Teraz siedzi pod polem i ma jego szerokosc: .coupon zawija, a komunikat bierze cala linie. */ table.cart td.actions .coupon { flex-wrap: wrap; } .orn-kupon-blad { flex-basis: 100%; margin: 10px 0 0; display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.55; font-weight: 600; color: var(--blad); } .orn-kupon-blad p { margin: 0; } .orn-kupon-blad__znak { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--blad); color: #fff; font-size: 12px; line-height: 18px; text-align: center; font-weight: 700; } /* ================================================================= mobile Zasady: cele dotykowe min 44 px (WCAG 2.5.5 / Apple HIG), pola formularzy 16 px na telefonie (iOS przybliza ekran przy fokusie kazdego pola z mniejsza czcionka), tresc plynie do 320 px bez poziomego przewijania (WCAG 1.4.10). */ @media (max-width: 1023px) { /* iOS: kazde pole z czcionka < 16 px wywoluje zoom przy fokusie. Dotyczy WSZYSTKICH pol, takze selecta sortowania i pola kuponu. */ input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="search"], input[type="date"], input[type="url"], input[type="file"], select, textarea, table.cart td.actions .coupon .input-text, .woocommerce-ordering select { font-size: 16px !important; } } /* ------------------------------------------ kafle produktow na telefonie */ @media (max-width: 640px) { /* Dwie kolumny po ~165 px: "Dodaj do koszyka" (14 px, nowrap, padding 56 px) mial ~176 px i ramka wychodzila poza kafel. Przycisk bierze cala szerokosc kafla i ciasniejszy padding, wiec zawsze miesci sie w ramce. */ ul.products li.product .button { align-self: stretch; margin: 0 12px 12px; margin-top: auto; padding: 0 8px; font-size: 13px; min-height: 44px; } ul.products li.product .woocommerce-loop-product__title { margin: 12px 12px 4px; font-size: 14px; } ul.products li.product .price { margin: 0 12px 12px; } } /* --------------------------- stan "dodano do koszyka" na kaflu produktu Po dodaniu AJAX-em WooCommerce dokleja pod przyciskiem goly odnosnik Zobacz koszyk bez zadnego stylu: wygladal jak przypadkowy tekst. Ubieramy go w pelny przycisk marki, a przycisk dodawania dostaje stan wczytywania i potwierdzenie. */ ul.products li.product .add_to_cart_button.loading { opacity: .55; pointer-events: none; } ul.products li.product .add_to_cart_button.added { display: none; } ul.products li.product a.added_to_cart { margin: 0 16px 16px; margin-top: auto; align-self: center; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 24px; white-space: nowrap; background: var(--action); border: 1.5px solid var(--action); border-radius: var(--radius-pill); color: var(--text-inverse); font-size: 14px; font-weight: 600; text-decoration: none; transition: background var(--dur-fast) var(--ease); } ul.products li.product a.added_to_cart::before { content: "\2713"; font-size: 13px; } ul.products li.product a.added_to_cart:hover { background: var(--action-hover); text-decoration: none; color: var(--text-inverse); } @media (max-width: 640px) { ul.products li.product a.added_to_cart { align-self: stretch; margin: 0 12px 12px; margin-top: auto; padding: 0 8px; font-size: 13px; } } /* --------------------------------------------- koszyk czytelny na telefonie Fabryczny uklad "etykieta po lewej, wartosc po prawej" robil z kazdej pozycji pionowa liste luznych wierszy: zdjecie osobno, nazwa osobno, kwoty rozstrzelone. Zamiast tego jedna karta pozycji: miniatura w lewej kolumnie, nazwa i sklad po prawej, usuwanie w rogu, ilosc i suma w jednym rzedzie pod spodem. */ @media (max-width: 1023px) { table.cart { display: block; } table.cart tbody { display: block; } table.cart tbody tr.cart_item { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 4px 16px; position: relative; padding: 18px 0; } /* Selektory celowo z pelnym przedrostkiem tbody tr.cart_item: ogolne "td { display:block }" wyzej ma te sama baze i bez tego wygrywalo z regulami szczegolowymi (cena zostawala widoczna, etykiety Ilosc/Razem nie wchodzily). */ table.cart tbody tr.cart_item td { display: block; padding: 0; } table.cart tbody tr.cart_item td[data-title]::before { content: none; } table.cart tbody tr.cart_item td.product-remove { position: absolute; top: 18px; right: 0; } table.cart tbody tr.cart_item td.product-thumbnail { grid-column: 1; grid-row: 1 / span 3; } table.cart tbody tr.cart_item td.product-thumbnail img { width: 88px; } table.cart tbody tr.cart_item td.product-name { grid-column: 2; grid-row: 1; padding-right: 40px; /* miejsce na krzyzyk usuwania */ } /* cene jednostkowa pokazuje wiersz ilosci i suma, osobna kolumna "Cena" tylko powtarzala te sama liczbe */ table.cart tbody tr.cart_item td.product-price { display: none; } table.cart tbody tr.cart_item td.product-quantity { grid-column: 2; grid-row: 2; display: flex; align-items: center; gap: 10px; margin-top: 10px; } table.cart tbody tr.cart_item td.product-quantity::before { content: "Ilość"; font-size: 13px; font-weight: 600; color: var(--text-muted); } table.cart tbody tr.cart_item td.product-subtotal { grid-column: 2; grid-row: 3; display: flex; align-items: baseline; justify-content: space-between; margin-top: 10px; } table.cart tbody tr.cart_item td.product-subtotal::before { content: "Razem"; font-size: 13px; font-weight: 600; color: var(--text-muted); } /* sklad zestawu papeterii pod nazwa, w pelnej szerokosci prawej kolumny */ table.cart td.product-name dl.variation { margin-top: 10px; } table.cart .orn-ilosc-stala { display: inline-flex; align-items: baseline; gap: 6px; } table.cart td.actions { display: block; padding: 20px 0 0; } } /* Na waskim ekranie przycisk kuponu pod polem, oba na pelna szerokosc: 44 px wysokosci przycisku obok pola 16 px robilo ciasny, krzywy rzad. */ @media (max-width: 560px) { table.cart td.actions .coupon { flex-wrap: wrap; } table.cart td.actions .coupon .input-text { flex: 1 0 100%; } table.cart td.actions .coupon .button { flex: 1 0 100%; } }