/* * Skórka koszyka, kasy, konta i strony podziękowania. * ----------------------------------------------------------------------------- * Ładowana tylko na stronach WooCommerce. Paletę bierze ze zmiennych z klasy * `smf-tokens` doklejanej do (patrz functions.php) — dzięki temu jedno * miejsce steruje kolorami całego serwisu. * * Celowo nie przebudowujemy układu WooCommerce, tylko dopasowujemy wygląd: * przyciski, pola, tabelę zamówienia i komunikaty. Mniej rzeczy do naprawienia * przy każdej aktualizacji wtyczki. */ .smf-tokens { --smf-woo-radius: .75rem; } /* * Pola i przyciski liczą wymiary razem z obramowaniem. * * Hello Elementor ustawia box-sizing globalnie, ale nie chcemy się na tym * opierać — bez tego `min-height: 3rem` plus padding dawało pola wysokie * na 72 px zamiast 48 i cała kasa robiła się rozdęta. */ .smf-tokens input, .smf-tokens textarea, .smf-tokens select, .smf-tokens button, .smf-tokens .button { box-sizing: border-box; } /* Nagłówki i tekst ---------------------------------------------------------- */ .smf-tokens h1, .smf-tokens h2, .smf-tokens h3 { font-family: Montserrat, Inter, system-ui, sans-serif; color: var(--smf-navy); } /* Przyciski ----------------------------------------------------------------- */ .smf-tokens .woocommerce a.button, .smf-tokens .woocommerce button.button, .smf-tokens .woocommerce input.button, .smf-tokens .woocommerce #respond input#submit, .smf-tokens .wc-block-components-button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; padding: .75rem 1.5rem; border: 2px solid transparent; border-radius: 999px; background: var(--smf-navy); color: #fff; font-family: Inter, system-ui, sans-serif; font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease; } .smf-tokens .woocommerce a.button:hover, .smf-tokens .woocommerce button.button:hover, .smf-tokens .woocommerce input.button:hover, .smf-tokens .wc-block-components-button:hover { background: var(--smf-navy-2); color: #fff; transform: translateY(-2px); } /* * Główny przycisk akcji — „Kupuję i płacę" oraz „Przejdź do kasy". * Złoto z granatowym tekstem: biel na złocie daje 2,1:1, czyli poniżej normy. */ .smf-tokens .woocommerce button.button.alt, .smf-tokens .woocommerce a.button.alt, .smf-tokens .woocommerce input.button.alt, .smf-tokens #place_order, .smf-tokens .wc-block-components-checkout-place-order-button { background: var(--smf-gold); color: var(--smf-navy); box-shadow: 0 10px 24px -10px rgba(245, 158, 11, .9); } .smf-tokens .woocommerce button.button.alt:hover, .smf-tokens .woocommerce a.button.alt:hover, .smf-tokens #place_order:hover, .smf-tokens .wc-block-components-checkout-place-order-button:hover { background: #fbbf24; color: var(--smf-navy); } .smf-tokens .woocommerce .button:disabled, .smf-tokens .woocommerce .button.disabled { opacity: .45; cursor: not-allowed; transform: none; } /* Pola formularzy ----------------------------------------------------------- */ .smf-tokens .woocommerce form .form-row input.input-text, .smf-tokens .woocommerce form .form-row textarea, .smf-tokens .woocommerce form .form-row select, .smf-tokens .select2-container--default .select2-selection--single { width: 100%; min-height: 3rem; padding: .75rem 1rem; border: 1px solid #cbd5e1; border-radius: var(--smf-woo-radius); background: #f8fafc; font-size: 1rem; /* 16px — blokuje automatyczne przybliżanie w iOS */ line-height: 1.4; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; } .smf-tokens .woocommerce form .form-row input.input-text:focus, .smf-tokens .woocommerce form .form-row textarea:focus, .smf-tokens .woocommerce form .form-row select:focus { outline: none; background: #fff; border-color: var(--smf-blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, .18); } .smf-tokens .woocommerce form .form-row label { font-weight: 600; font-size: .875rem; color: #334155; margin-bottom: .375rem; } .smf-tokens .woocommerce form .form-row .required { color: #b91c1c; text-decoration: none; } .smf-tokens .woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: #dc2626; background: #fef2f2; } /* Sekcje kasy i koszyka ----------------------------------------------------- */ .smf-tokens #customer_details, .smf-tokens .woocommerce-checkout-review-order, .smf-tokens .cart_totals, .smf-tokens .woocommerce-MyAccount-content { padding: var(--smf-s3); border: 1px solid var(--smf-line); border-radius: var(--smf-radius); background: #fff; box-shadow: var(--smf-shadow-sm); } .smf-tokens #customer_details h3, .smf-tokens .cart_totals h2, .smf-tokens #order_review_heading { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; } /* Tabela podsumowania ------------------------------------------------------- */ .smf-tokens .woocommerce table.shop_table { border: 1px solid var(--smf-line); border-radius: var(--smf-radius); border-collapse: separate; border-spacing: 0; overflow: hidden; } .smf-tokens .woocommerce table.shop_table th, .smf-tokens .woocommerce table.shop_table td { padding: .875rem 1rem; border-top: 1px solid var(--smf-line); } .smf-tokens .woocommerce table.shop_table thead th { background: var(--smf-bg); border-top: 0; font-weight: 700; color: var(--smf-navy); } .smf-tokens .woocommerce table.shop_table tfoot th, .smf-tokens .woocommerce table.shop_table tfoot td { background: var(--smf-bg); font-weight: 700; } .smf-tokens .woocommerce table.shop_table .order-total .amount, .smf-tokens .woocommerce .cart_totals .order-total .amount { font-family: Montserrat, sans-serif; font-size: 1.375rem; color: var(--smf-navy); font-variant-numeric: tabular-nums; } .smf-tokens .woocommerce .amount { font-variant-numeric: tabular-nums; } /* Metody płatności ---------------------------------------------------------- */ .smf-tokens #payment { background: var(--smf-bg); border: 1px solid var(--smf-line); border-radius: var(--smf-radius); } .smf-tokens #payment ul.payment_methods { border-bottom: 1px solid var(--smf-line); padding: 1rem; } .smf-tokens #payment ul.payment_methods li { padding: .25rem 0; } /* * Domyślny radio ma ok. 13 px — za mało na wybór metody płatności palcem. * Cały wiersz etykiety robimy klikalnym celem o wysokości 44 px. */ .smf-tokens #payment ul.payment_methods li label { display: flex; align-items: center; gap: .625rem; min-height: 2.75rem; margin: 0; font-weight: 600; color: var(--smf-navy); cursor: pointer; } .smf-tokens #payment ul.payment_methods input[type="radio"] { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; accent-color: var(--smf-blue); cursor: pointer; } .smf-tokens #payment div.payment_box { background: #fff; border: 1px solid var(--smf-line); border-radius: var(--smf-woo-radius); font-size: .875rem; color: var(--smf-muted); } .smf-tokens #payment div.payment_box::before { border-bottom-color: #fff; } /* Komunikaty ---------------------------------------------------------------- */ .smf-tokens .woocommerce-message, .smf-tokens .woocommerce-info, .smf-tokens .woocommerce-error { display: flex; align-items: flex-start; gap: .625rem; padding: 1rem 1.25rem; border-radius: var(--smf-radius); border: 1px solid; border-top-width: 1px; font-size: .9375rem; list-style: none; } .smf-tokens .woocommerce-message { background: var(--smf-green-50); border-color: #bbf7d0; color: #14532d; } .smf-tokens .woocommerce-info { background: var(--smf-blue-50); border-color: #bfdbfe; color: #1e3a8a; } .smf-tokens .woocommerce-error { background: #fef2f2; border-color: #fecaca; color: #7f1d1d; } .smf-tokens .woocommerce-message::before, .smf-tokens .woocommerce-info::before, .smf-tokens .woocommerce-error::before { position: static; flex: 0 0 auto; } /* Strona podziękowania ------------------------------------------------------ */ .smf-tokens .woocommerce-thankyou-order-received { padding: 1.25rem 1.5rem; border-radius: var(--smf-radius); background: var(--smf-green-50); border: 1px solid #bbf7d0; color: #14532d; font-size: 1.0625rem; font-weight: 600; } .smf-tokens .woocommerce-order-overview { display: grid; gap: .75rem; margin: 1.5rem 0; padding: 1.25rem; border-radius: var(--smf-radius); background: var(--smf-bg); border: 1px solid var(--smf-line); list-style: none; } .smf-tokens .woocommerce-order-overview li { border: 0; padding: 0; font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em; color: var(--smf-muted); } .smf-tokens .woocommerce-order-overview li strong { display: block; margin-top: .25rem; font-size: 1rem; text-transform: none; letter-spacing: 0; color: var(--smf-navy); } /* Strona produktu ----------------------------------------------------------- */ /* * Produkty są wirtualne i nie mają zdjęć, więc galeria pokazywałaby tylko * szary placeholder. Chowamy ją i oddajemy całą szerokość opisowi. */ .smf-tokens div.product .woocommerce-product-gallery { display: none; } .smf-tokens div.product .summary.entry-summary { width: 100%; float: none; margin: 0; } .smf-tokens div.product .product_title { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: .75rem; } .smf-tokens div.product p.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; font-family: Montserrat, sans-serif; font-size: 2.25rem; font-weight: 800; color: var(--smf-navy); line-height: 1; } .smf-tokens div.product p.price del { font-size: 1.125rem; font-weight: 400; color: var(--smf-muted); } .smf-tokens div.product p.price ins { text-decoration: none; } .smf-woo-period { font-family: Inter, sans-serif; font-size: .9375rem; font-weight: 500; color: var(--smf-muted); } .smf-tokens div.product .woocommerce-product-details__short-description { font-size: 1.0625rem; color: #475569; max-width: 38rem; margin-bottom: 1.5rem; } .smf-tokens div.product form.cart { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; /* Bez limitu przycisk rozciągał się na całą szerokość strony (1140 px) */ max-width: 34rem; margin-bottom: 1.5rem; } .smf-tokens div.product form.cart .quantity { display: none; } .smf-tokens div.product form.cart button.single_add_to_cart_button { flex: 1 1 16rem; background: var(--smf-gold); color: var(--smf-navy); box-shadow: 0 10px 24px -10px rgba(245, 158, 11, .9); } .smf-tokens div.product form.cart button.single_add_to_cart_button:hover { background: #fbbf24; color: var(--smf-navy); } /* Pasek zaufania pod przyciskiem zakupu */ .smf-woo-trust { max-width: 34rem; margin-bottom: 2rem; padding: var(--smf-s3); border-radius: var(--smf-radius); background: var(--smf-bg); border: 1px solid var(--smf-line); box-sizing: border-box; } .smf-woo-trust ul { display: grid; gap: .625rem; margin-bottom: 1rem; } .smf-woo-trust li { display: flex; align-items: flex-start; gap: .625rem; font-size: .875rem; color: var(--smf-muted); } .smf-woo-trust li .smf-icon { width: 1.0625rem; height: 1.0625rem; margin-top: .125rem; flex: 0 0 auto; color: var(--smf-green); } .smf-woo-call { display: flex; align-items: flex-start; gap: .5rem; margin-top: .875rem; font-size: .875rem; color: var(--smf-muted); } .smf-woo-call .smf-icon { width: 1rem; height: 1rem; margin-top: .1875rem; color: var(--smf-blue); flex: 0 0 auto; } /* Zakładki pod opisem */ .smf-tokens .woocommerce-tabs ul.tabs { padding: 0; margin: 0 0 1.5rem; border-bottom: 1px solid var(--smf-line); } .smf-tokens .woocommerce-tabs ul.tabs::before { display: none; } .smf-tokens .woocommerce-tabs ul.tabs li { background: none; border: 0; border-radius: 0; margin: 0; padding: 0; } .smf-tokens .woocommerce-tabs ul.tabs li::before, .smf-tokens .woocommerce-tabs ul.tabs li::after { display: none; } .smf-tokens .woocommerce-tabs ul.tabs li a { display: inline-block; padding: .75rem 1.25rem; font-weight: 700; color: var(--smf-muted); border-bottom: 3px solid transparent; } .smf-tokens .woocommerce-tabs ul.tabs li.active a { color: var(--smf-navy); border-bottom-color: var(--smf-blue); } .smf-tokens .woocommerce-Tabs-panel h2 { font-size: 1.375rem; font-weight: 700; margin: 2rem 0 .875rem; } .smf-tokens .woocommerce-Tabs-panel h2:first-child { margin-top: 0; } .smf-tokens .woocommerce-Tabs-panel p { color: #334155; line-height: 1.75; margin-bottom: 1rem; max-width: 40rem; } .smf-tokens .woocommerce-Tabs-panel ul { display: grid; gap: .625rem; margin: 0 0 1.5rem; padding-left: 1.5rem; max-width: 40rem; } .smf-tokens .woocommerce-Tabs-panel ul li { list-style: disc; color: #334155; line-height: 1.7; } /* Pozostałe kursy */ .smf-woo-others { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--smf-line); } .smf-woo-others h2 { font-size: 1.375rem; font-weight: 700; margin-bottom: 1.25rem; } /* Okruszki WooCommerce */ .smf-crumbs--woo { margin-bottom: 1.5rem; } .smf-crumbs__sep { color: #cbd5e1; padding-inline: .375rem; } /* Notka przy pozycji koszyka */ .smf-cart-note { display: block; font-size: .8125rem; color: var(--smf-muted); font-weight: 400; margin-top: .25rem; } /* Blok „co dalej" na stronie podziękowania ---------------------------------- */ /* Blok „co dalej" na stronie podziękowania WooCommerce --------------------- */ .smf-thanks { margin: 2rem 0; padding: var(--smf-s4); border-radius: var(--smf-radius-lg); background: var(--smf-bg); border: 1px solid var(--smf-line); } .smf-thanks .smf-h3 { margin-bottom: var(--smf-s3); } .smf-steps { display: grid; gap: var(--smf-s3); } .smf-steps__item { display: flex; gap: 1rem; align-items: flex-start; } .smf-steps__num { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex: 0 0 auto; border-radius: 50%; background: var(--smf-blue); color: #fff; font-family: Montserrat, sans-serif; font-weight: 700; font-size: .9375rem; } .smf-steps__body strong { display: block; color: var(--smf-navy); margin-bottom: .25rem; } .smf-steps__body span { display: block; font-size: .9375rem; color: var(--smf-muted); } .smf-thanks__contact { display: flex; gap: .625rem; align-items: flex-start; margin-top: var(--smf-s3); padding-top: var(--smf-s3); border-top: 1px solid var(--smf-line); font-size: .9375rem; color: var(--smf-muted); } .smf-thanks__contact .smf-icon { margin-top: .1875rem; color: var(--smf-blue); flex: 0 0 auto; } /* Widoczny focus, tak samo jak na landingu ---------------------------------- */ .smf-tokens .woocommerce :focus-visible, .smf-tokens .woocommerce-page :focus-visible { outline: 3px solid var(--smf-blue); outline-offset: 3px; border-radius: 6px; } /* ========================================================================== KOSZYK ========================================================================== Uwaga na formę selektorów: `woocommerce-cart`, `woocommerce-account` i `woocommerce-order-received` to klasy — czyli TEGO SAMEGO elementu co `smf-tokens`. Dlatego zapis bez odstępu (`.a.b`), nie potomka (`.a .b`). -------------------------------------------------------------------------- */ /* * Pudełka, w których WooCommerce trzyma szerokie tabele, przewijają się same. * * Na produkcji arkusz WooCommerce dla małych ekranów rozkłada te tabele na * bloki i przewijanie nie jest potrzebne. Ale gdyby ktoś ten arkusz wyłączył * albo motyw go nie wczytał, tabela koszyka (531 px) rozpychała całą stronę * w bok przy 375 px ekranu. Tu przewinie się we własnej ramce. */ .smf-tokens .woocommerce-cart-form, .smf-tokens .woocommerce-checkout-review-order, .smf-tokens .woocommerce-order-details, .smf-tokens .cart_totals { max-width: 100%; overflow-x: auto; } .smf-tokens table.shop_table.cart { margin-bottom: var(--smf-s3); } .smf-tokens table.shop_table.cart th { font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase; } .smf-tokens td.product-name a { font-weight: 700; color: var(--smf-navy); } .smf-tokens td.product-name a:hover { color: var(--smf-blue); } /* Miniatura produktu — kursy nie mają zdjęć, więc kolumna tylko zwęża tabelę. */ .smf-tokens .product-thumbnail { display: none; } .smf-tokens td.product-price, .smf-tokens td.product-subtotal { font-weight: 700; color: var(--smf-navy); } /* Kursy są sprzedawane pojedynczo, więc pole ilości jest zablokowane. */ .smf-tokens td.product-quantity .quantity input.qty { width: 4.5rem; min-height: 2.75rem; padding: .5rem; font-size: 1rem; /* 16px — poniżej tego iOS przybliża stronę przy kliknięciu */ border: 1px solid #cbd5e1; border-radius: var(--smf-woo-radius); background: #f8fafc; text-align: center; font-variant-numeric: tabular-nums; } .smf-tokens td.product-remove a.remove { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: #fef2f2; color: #b91c1c !important; font-size: 1.25rem; line-height: 1; transition: background-color .15s ease; } .smf-tokens td.product-remove a.remove:hover { background: #fecaca; color: #7f1d1d !important; } /* Kupon i akcje pod tabelą */ .smf-tokens td.actions { padding: 1rem; background: var(--smf-bg); } .smf-tokens td.actions .coupon { display: flex; flex-wrap: wrap; gap: .625rem; align-items: center; } .smf-tokens td.actions .coupon label { display: none; } .smf-tokens td.actions .coupon input#coupon_code { flex: 1 1 12rem; min-height: 3rem; padding: .75rem 1rem; border: 1px solid #cbd5e1; border-radius: var(--smf-woo-radius); background: #fff; font-size: 1rem; } .smf-tokens .wc-proceed-to-checkout { padding-top: 1.25rem; } .smf-tokens .wc-proceed-to-checkout a.checkout-button { display: flex; width: 100%; font-size: 1.0625rem; } /* Pusty koszyk */ .smf-tokens .cart-empty, .smf-tokens .wc-empty-cart-message .woocommerce-info { display: block; padding: var(--smf-s4); border-radius: var(--smf-radius); background: var(--smf-bg); border: 1px solid var(--smf-line); text-align: center; font-size: 1.0625rem; color: var(--smf-navy); } .smf-tokens .return-to-shop { text-align: center; margin-top: 1.25rem; } /* ========================================================================== MOJE KONTO ========================================================================== */ /* Logowanie i rejestracja obok siebie — dwie równorzędne ścieżki. */ /* * minmax(0, …) wszędzie tam, gdzie w siatce ląduje tabela. * * Niejawna kolumna `auto` przyjmuje szerokość min-content, a tabela zamówień * ma jej sporo — bez tego limitu panel konta rozpychał się do 671 px przy * 375 px ekranu i cała strona jechała w bok. */ .smf-tokens #customer_login { display: grid; gap: var(--smf-s3); grid-template-columns: minmax(0, 1fr); } .smf-tokens #customer_login > div { min-width: 0; padding: var(--smf-s4); border-radius: var(--smf-radius-lg); background: #fff; border: 1px solid var(--smf-line); box-shadow: var(--smf-shadow-sm); float: none; width: auto; } .smf-tokens #customer_login h2 { font-size: 1.375rem; font-weight: 800; margin-bottom: .375rem; } .smf-tokens .woocommerce-form-login, .smf-tokens .woocommerce-form-register, .smf-tokens .woocommerce-ResetPassword, .smf-tokens .woocommerce-EditAccountForm { border: 0; padding: 0; margin: 0; } .smf-tokens .woocommerce-form-login__rememberme { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; font-size: .875rem; color: var(--smf-muted); } .smf-tokens .woocommerce-form-login__rememberme input { width: 1.25rem; height: 1.25rem; accent-color: var(--smf-blue); } .smf-tokens .woocommerce-form-login__submit, .smf-tokens .woocommerce-form-register__submit { width: 100%; justify-content: center; } .smf-tokens .woocommerce-LostPassword { margin-top: .875rem; font-size: .875rem; } .smf-tokens .woocommerce-LostPassword a { color: var(--smf-blue); font-weight: 600; } .smf-tokens .woocommerce-LostPassword a:hover { text-decoration: underline; } /* Panel konta: nawigacja obok treści */ .smf-tokens.woocommerce-account .woocommerce { display: grid; gap: var(--smf-s3); grid-template-columns: minmax(0, 1fr); } /* Ekran logowania ma jedną kolumnę — nie ma jeszcze nawigacji konta. */ .smf-tokens.woocommerce-account.logged-in .woocommerce { align-items: start; } .smf-tokens .woocommerce-MyAccount-navigation { width: auto; float: none; min-width: 0; padding: .5rem; border-radius: var(--smf-radius); background: var(--smf-bg); border: 1px solid var(--smf-line); } .smf-tokens .woocommerce-MyAccount-navigation ul { display: grid; gap: .125rem; } .smf-tokens .woocommerce-MyAccount-navigation li a { display: block; padding: .75rem 1rem; border-radius: .75rem; color: #334155; font-weight: 600; font-size: .9375rem; transition: background-color .15s ease, color .15s ease; } .smf-tokens .woocommerce-MyAccount-navigation li a:hover { background: #fff; color: var(--smf-blue); } .smf-tokens .woocommerce-MyAccount-navigation li.is-active a { background: var(--smf-navy); color: #fff; } /* Wylogowanie oddzielone od reszty — to działanie innego rodzaju. */ .smf-tokens .woocommerce-MyAccount-navigation-link--customer-logout { margin-top: .375rem; padding-top: .375rem; border-top: 1px solid var(--smf-line); } /* * Selektor musi zawierać `li`, bo reguła ogólna niżej to * `.smf-tokens .woocommerce-MyAccount-navigation li a` — (0,2,2). Wersja bez * `li` miała (0,2,1) i przegrywała, przez co wylogowanie renderowało się * w kolorze pozostałych pozycji. */ .smf-tokens .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a { color: #b91c1c; } .smf-tokens .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a:hover { background: #fef2f2; color: #7f1d1d; } .smf-tokens .woocommerce-MyAccount-content { width: auto; float: none; min-width: 0; /* * Zabezpieczenie: gdyby arkusz WooCommerce dla małych ekranów nie został * załadowany, szeroka tabela przewinie się w tym pudełku, a nie rozjedzie * całej strony. */ overflow-x: auto; } .smf-tokens .woocommerce-MyAccount-content > p:first-child { margin-top: 0; } /* Tabela zamówień */ .smf-tokens .woocommerce-orders-table__cell-order-number a { font-weight: 700; color: var(--smf-blue); } .smf-tokens .woocommerce-orders-table__cell-order-number a:hover { text-decoration: underline; } .smf-tokens .woocommerce-orders-table__cell-order-status { font-weight: 700; color: var(--smf-navy); } /* Adresy */ .smf-tokens .woocommerce-Addresses { display: grid; gap: var(--smf-s3); grid-template-columns: minmax(0, 1fr); } .smf-tokens .woocommerce-Address { width: auto; float: none; padding: var(--smf-s3); border-radius: var(--smf-radius); background: #fff; border: 1px solid var(--smf-line); } .smf-tokens .woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .875rem; } .smf-tokens .woocommerce-Address-title h2, .smf-tokens .woocommerce-Address-title h3 { font-size: 1.125rem; font-weight: 700; margin: 0; } .smf-tokens .woocommerce-Address address { font-style: normal; color: var(--smf-muted); line-height: 1.7; } /* ========================================================================== SZCZEGÓŁY ZAMÓWIENIA (podziękowanie i podgląd w koncie) ========================================================================== */ .smf-tokens .woocommerce-order-details, .smf-tokens .woocommerce-customer-details { margin-top: var(--smf-s4); } .smf-tokens .woocommerce-order-details__title, .smf-tokens .woocommerce-column__title { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; } .smf-tokens .woocommerce-customer-details address { font-style: normal; padding: var(--smf-s3); border-radius: var(--smf-radius); background: var(--smf-bg); border: 1px solid var(--smf-line); color: #334155; line-height: 1.8; } .smf-tokens .woocommerce-order .woocommerce-notice--success { margin-bottom: 1.25rem; } /* Notka pozakupowa przy pozycji zamówienia */ .smf-tokens .wc-item-meta, .smf-tokens .product-purchase-note { font-size: .875rem; color: var(--smf-muted); } /* ========================================================================== PUNKTY ŁAMANIA ========================================================================== */ @media (min-width: 768px) { .smf-tokens #customer_login { grid-template-columns: repeat(2, minmax(0, 1fr)); } .smf-tokens .woocommerce-Addresses { grid-template-columns: repeat(2, minmax(0, 1fr)); } .smf-tokens td.actions .coupon input#coupon_code { flex: 0 1 16rem; } } @media (min-width: 1024px) { /* * Nawigacja konta z lewej, treść z prawej. Stała szerokość kolumny menu, * bo pozycje mają krótkie, przewidywalne nazwy, a treść ma dostać resztę. */ .smf-tokens.woocommerce-account .woocommerce { grid-template-columns: 16rem minmax(0, 1fr); gap: var(--smf-s4); } /* Ekran logowania nie ma nawigacji — wtedy jedna kolumna na pełną szerokość. */ .smf-tokens.woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) { grid-template-columns: minmax(0, 1fr); } .smf-tokens .wc-proceed-to-checkout a.checkout-button { font-size: 1.125rem; } } @media (min-width: 768px) { .smf-tokens .woocommerce-order-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .smf-tokens .woocommerce-order-overview { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (prefers-reduced-motion: reduce) { .smf-tokens .woocommerce .button { transition-duration: .01ms !important; } .smf-tokens .woocommerce .button:hover { transform: none; } } /* Wstęp na ekranie logowania ------------------------------------------------ */ .smf-account-intro { margin-bottom: var(--smf-s3); padding: var(--smf-s3); border-radius: var(--smf-radius); background: var(--smf-blue-50); border: 1px solid #bfdbfe; } .smf-account-intro h2 { font-size: 1.25rem; font-weight: 800; margin-bottom: .5rem; } .smf-account-intro p { font-size: .9375rem; color: #1e3a8a; max-width: 44rem; }