/* ============================================================ PAPAGIANNI — SPÓJNY WYGLĄD WSZYSTKICH PODSTRON Plik: mu-plugins/papagianni-site/assets/papagianni-site.css Ładowany na końcu , po „Dodatkowym CSS”, dlatego skutecznie nadaje tym samym klasom docelowy wygląd. ============================================================ */ /* ============================================================ 1. PODSTAWOWE KOMPONENTY MARKI (.pap-*) Zgodne z sekcjami strony „Manufaktura Drewna”. Zduplikowane celowo — aby wygląd nie zależał od „Dodatkowego CSS”. ============================================================ */ .pap-hero, .pap-page-hero { text-align: center; padding: 44px 24px 34px; margin-bottom: 30px; background: linear-gradient(135deg, #fff8f0 0%, #fdf0e0 100%); border-radius: 18px; border: 1px solid #f0e0cc; box-shadow: 0 10px 30px rgba(90, 58, 26, 0.06); } .pap-hero-title { font-size: 2.4em; margin: 0 0 12px; color: #5a3a1a; letter-spacing: 0.5px; line-height: 1.2; } .pap-hero-subtitle { font-size: 1.2em; color: #7a5a3a; max-width: 700px; margin: 0 auto; line-height: 1.6; } .pap-section { margin-bottom: 50px; } .pap-section h2 { font-size: 1.8em; color: #5a3a1a; margin-bottom: 15px; position: relative; padding-bottom: 10px; } .pap-section h2:after { content: ''; display: block; width: 60px; height: 3px; background: #b85c00; border-radius: 2px; margin-top: 8px; } .pap-section-intro { font-size: 1.1em; color: #6a4a2a; margin-bottom: 25px; } .pap-closing { text-align: center; padding: 30px 20px; } .pap-closing h2:after { margin-left: auto; margin-right: auto; } .pap-closing p { max-width: 750px; margin: 0 auto 15px; line-height: 1.7; color: #4a3a2a; } /* ============================================================ 2. ETYKIETA + „CHIPSY” W SEKCJI POWITALNEJ PODSTRON ============================================================ */ .pap-eyebrow { display: inline-block; margin-bottom: 16px; padding: 7px 16px 8px; border-radius: 999px; background: #ffffff; border: 1px solid #f0e0cc; color: #b85c00; font-size: 0.74em; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; } .pap-hero-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; } .pap-hero-chips a, .pap-hero-chips span { display: inline-flex; align-items: center; gap: 7px; background: #ffffff; border: 1px solid #f0e0cc; border-radius: 999px; padding: 9px 16px; font-size: 0.92em; color: #6a4a2a !important; text-decoration: none !important; box-shadow: 0 2px 8px rgba(90, 58, 26, 0.05); transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } .pap-hero-chips a:hover { transform: translateY(-2px); border-color: rgba(184, 92, 0, 0.35); box-shadow: 0 6px 14px rgba(90, 58, 26, 0.1); } /* ============================================================ 3. PRZYCISKI MARKI ============================================================ */ .pap-button, .pap-page-closing .pap-button, .pap-page-hero .pap-button { display: inline-flex; align-items: center; gap: 8px; padding: 12px 26px; border-radius: 999px; background: linear-gradient(135deg, #c96b0a 0%, #a64f00 100%); border: 1px solid rgba(255, 255, 255, 0.18); color: #ffffff !important; font-weight: 600; text-decoration: none !important; box-shadow: 0 6px 16px rgba(184, 92, 0, 0.28); transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease; } .pap-button:hover, .pap-page-closing .pap-button:hover, .pap-page-hero .pap-button:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 10px 22px rgba(184, 92, 0, 0.34); } .pap-button--ghost { background: #ffffff; color: #5a3a1a !important; border: 1px solid #e6d6c2; box-shadow: 0 4px 12px rgba(90, 58, 26, 0.06); } .pap-button--ghost:hover { background: #fff8f0; } .pap-page-closing { margin-top: 20px; } .pap-page-closing .pap-button { margin: 8px 6px 0; } @media (max-width: 600px) { .pap-page-closing .pap-button { display: flex; justify-content: center; width: 100%; margin: 8px 0 0; } } /* ============================================================ 4. STRONY OZDOBIONE PRZEZ MU-PLUGIN (body.pap-styled) Wspólna, „ciepła” typografia i czytelność treści. ============================================================ */ /* Domyślny nagłówek strony (tytuł w edytorze) jest zastępowany sekcją hero */ body.pap-styled .entry-header, body.pap-styled header.entry-header, body.pap-styled h1.entry-title { display: none !important; } /* Breadcrumb („Strona główna / …”) widoczny — jak na Manufakturze, dzięki czemu odstęp menu → treść na podstronach jest identyczny. */ body.pap-styled .entry-content { color: #4a3a2a; font-size: 1.02em; } body.pap-styled .entry-content p { line-height: 1.75; margin: 0 0 1.1em; } body.pap-styled .entry-content a { color: #b85c00 !important; text-decoration: underline; text-decoration-color: rgba(184, 92, 0, 0.35); text-underline-offset: 3px; } body.pap-styled .entry-content a:hover { color: #944800 !important; text-decoration-color: #944800; } body.pap-styled .entry-content img { border-radius: 14px; max-width: 100%; height: auto; } /* ============================================================ 5. PODSTRONA „KONTAKT” (Jetpack Contact Form) ============================================================ */ /* Ukrycie surowych, domyślnych akapitów edytora wokół formularza */ body.page-id-69 .entry-content > p:first-of-type, body.page-id-69 .entry-content > p:last-of-type { display: none; } /* Karta wokół całego formularza — spójna z kartami .pap-* */ body.page-id-69 .jetpack-contact-form-container { background: #fffaf5; border: 1px solid #f0e0cc; border-radius: 18px; padding: clamp(20px, 4vw, 38px); margin: 8px auto 40px; box-shadow: 0 8px 26px rgba(90, 58, 26, 0.06); max-width: 860px; } body.page-id-69 .jetpack-contact-form-container .contact-form-submission { margin-bottom: 18px; } /* Komunikat sukcesu */ body.page-id-69 .contact-form-submission h4 { color: #5a3a1a; font-size: 1.25em; margin: 0 0 6px; } /* Etykiety pól */ body.page-id-69 .contact-form .grunion-field-label, body.page-id-69 .wp-block-jetpack-field-name label, body.page-id-69 .wp-block-jetpack-field-email label, body.page-id-69 .wp-block-jetpack-field-textarea label, body.page-id-69 .wp-block-jetpack-field-text label, body.page-id-69 .wp-block-jetpack-field-consent label { color: #5a3a1a !important; font-weight: 600 !important; font-size: 0.98em !important; margin-bottom: 6px; } body.page-id-69 .wp-block-jetpack-field-consent label { color: #7a6a5a !important; font-weight: 400 !important; font-size: 0.92em !important; line-height: 1.55 !important; display: block; } /* Pola formularza */ body.page-id-69 .contact-form input[type="text"], body.page-id-69 .contact-form input[type="email"], body.page-id-69 .contact-form input[type="tel"], body.page-id-69 .contact-form input[type="url"], body.page-id-69 .contact-form textarea, body.page-id-69 .contact-form select { width: 100%; background: #ffffff; border: 1px solid #e6d8c6; border-radius: 12px; padding: 12px 14px; color: #4a3a2a; font-size: 1rem; font-family: inherit; box-shadow: none; transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; } body.page-id-69 .contact-form input:focus, body.page-id-69 .contact-form textarea:focus, body.page-id-69 .contact-form select:focus { outline: none; border-color: #b85c00; background: #fffdf9; box-shadow: 0 0 0 3px rgba(184, 92, 0, 0.12); } body.page-id-69 .wp-block-jetpack-contact-form { gap: 18px; } body.page-id-69 .contact-form .grunion-field-wrap { margin: 0; } /* Przycisk „Wyślij” */ body.page-id-69 .contact-form .wp-block-button { text-align: center; margin-top: 22px; } body.page-id-69 .contact-form .wp-block-button .wp-block-button__link { display: inline-flex; align-items: center; gap: 8px; padding: 13px 34px; border-radius: 999px; background: linear-gradient(135deg, #c96b0a 0%, #a64f00 100%); border: 1px solid rgba(255, 255, 255, 0.18); color: #ffffff !important; font-weight: 600; text-decoration: none !important; box-shadow: 0 6px 16px rgba(184, 92, 0, 0.26); transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease; } body.page-id-69 .contact-form .wp-block-button .wp-block-button__link:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 10px 22px rgba(184, 92, 0, 0.32); } /* Komunikaty błędów / walidacja */ body.page-id-69 .contact-form__input-error, body.page-id-69 .contact-form__error { color: #a33b1e; font-size: 0.9em; } body.page-id-69 .contact-form .wp-block-jetpack-option input[type="checkbox"] { accent-color: #b85c00; transform: scale(1.15); margin-right: 4px; } @media (max-width: 600px) { body.page-id-69 .jetpack-contact-form-container { padding: 18px 16px; } body.page-id-69 .contact-form .wp-block-button .wp-block-button__link { width: 100%; justify-content: center; } } /* ============================================================ 6. PODSTRONA „REGULAMIN / POLITYKA PRYWATNOŚCI” Czytelny, „papierowy” dokument — spójny z marką. ============================================================ */ /* Ukrycie powtórzonego tytułu H1 dokumentu (tytuł jest już w hero) */ body.privacy-policy .entry-content > h1.wp-block-heading { display: none; } body.privacy-policy .entry-content { max-width: 900px; margin-left: auto; margin-right: auto; font-size: 1.02em; } body.privacy-policy .entry-content .pap-page-hero { margin-bottom: 40px; } /* Dokument w „papierowej” karcie */ body.privacy-policy .entry-content { background: #fffdf9; border: 1px solid #f0e0cc; border-radius: 20px; padding: clamp(18px, 4vw, 44px); box-shadow: 0 8px 28px rgba(90, 58, 26, 0.05); } /* Nagłówki rozdziałów */ body.privacy-policy .entry-content h2.wp-block-heading { color: #5a3a1a; font-size: 1.42em; margin: 2em 0 0.7em; padding-bottom: 10px; position: relative; } body.privacy-policy .entry-content h2.wp-block-heading::after { content: ''; display: block; width: 56px; height: 3px; border-radius: 2px; background: #b85c00; margin-top: 10px; } /* Pierwszy nagłówek po hero — bez nadmiarowego marginesu */ body.privacy-policy .entry-content .pap-page-hero + h2.wp-block-heading { margin-top: 0.4em; } body.privacy-policy .entry-content h3.wp-block-heading { color: #8a5216; font-size: 1.14em; margin: 1.7em 0 0.5em; font-weight: 700; } body.privacy-policy .entry-content h1 + p, body.privacy-policy .entry-content .wp-block-heading + p { color: #6a5a4a; } body.privacy-policy .entry-content strong { color: #5a3a1a; font-weight: 700; } /* Listy punktowane / numerowane */ body.privacy-policy .entry-content ol.wp-block-list, body.privacy-policy .entry-content ul.wp-block-list { margin: 0 0 1.2em; padding-left: 1.4em; } body.privacy-policy .entry-content ol.wp-block-list li, body.privacy-policy .entry-content ul.wp-block-list li { margin-bottom: 0.45em; line-height: 1.7; } body.privacy-policy .entry-content ol.wp-block-list li::marker, body.privacy-policy .entry-content ul.wp-block-list li::marker { color: #b85c00; font-weight: 700; } /* Separatory */ body.privacy-policy .entry-content hr.wp-block-separator { border: 0; border-top: 1px solid #f0e0cc; margin: 2.2em auto; width: 100%; opacity: 1; } /* Adresy e-mail / linki w treści dokumentu */ body.privacy-policy .entry-content a { color: #b85c00 !important; text-decoration-color: rgba(184, 92, 0, 0.35); text-underline-offset: 3px; overflow-wrap: anywhere; } body.privacy-policy .entry-content a:hover { color: #944800 !important; } /* Wyróżnienie daty obowiązywania dokumentu */ body.privacy-policy .entry-content h1 + p strong, body.privacy-policy .entry-content .wp-block-heading + p strong { color: #b85c00; } /* Szablon formularza odstąpienia (załącznik) */ body.privacy-policy .entry-content em { color: #8a6a4a; } /* Drobne ekrany */ @media (max-width: 600px) { body.privacy-policy .entry-content { padding: 16px 14px; border-radius: 14px; } body.privacy-policy .entry-content h2.wp-block-heading { font-size: 1.24em; } } /* ============================================================ 7. PODSTRONA „MOJE KONTO” (WooCommerce) ============================================================ */ /* Wylogowany widok logowania — karta pośrodku */ body.woocommerce-account:not(.logged-in) .entry-content > .woocommerce { max-width: 560px; margin: 10px auto 40px; background: #fffaf5; border: 1px solid #f0e0cc; border-radius: 18px; padding: clamp(22px, 4vw, 38px); box-shadow: 0 8px 26px rgba(90, 58, 26, 0.06); } body.woocommerce-account:not(.logged-in) .entry-content > .woocommerce h2 { color: #5a3a1a; font-size: 1.5em; margin: 0 0 18px; padding-bottom: 10px; position: relative; } body.woocommerce-account:not(.logged-in) .entry-content > .woocommerce h2::after { content: ''; display: block; width: 56px; height: 3px; border-radius: 2px; background: #b85c00; margin-top: 10px; } body.woocommerce-account:not(.logged-in) .woocommerce-form-row label { color: #5a3a1a; font-weight: 600; margin-bottom: 6px; display: block; } body.woocommerce-account:not(.logged-in) .woocommerce-form-row input.input-text { width: 100%; background: #ffffff; border: 1px solid #e6d8c6; border-radius: 12px; padding: 12px 14px; color: #4a3a2a; font-size: 1rem; box-shadow: none; } body.woocommerce-account:not(.logged-in) .woocommerce-form-row input.input-text:focus { outline: none; border-color: #b85c00; box-shadow: 0 0 0 3px rgba(184, 92, 0, 0.12); } body.woocommerce-account:not(.logged-in) .woocommerce-form-login__rememberme { color: #6a5a4a; } body.woocommerce-account:not(.logged-in) .woocommerce-form-login__rememberme input { accent-color: #b85c00; transform: scale(1.15); margin-right: 4px; } body.woocommerce-account:not(.logged-in) .woocommerce-form-login__submit { width: 100%; justify-content: center; margin-top: 6px; } body.woocommerce-account:not(.logged-in) .lost_password a { color: #b85c00 !important; } /* Zalogowany widok — nawigacja konta i treść */ body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li a { display: block; padding: 12px 16px; background: #ffffff; border: 1px solid #f0e0cc; border-radius: 12px; color: #5a3a1a !important; font-weight: 500; text-decoration: none !important; transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease; } body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li.is-active a, body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li a:hover { background: #fff1e3; border-color: rgba(184, 92, 0, 0.35); color: #944800 !important; transform: translateX(3px); } body.woocommerce-account.logged-in .woocommerce-MyAccount-content { background: #fffaf5; border: 1px solid #f0e0cc; border-radius: 16px; padding: clamp(18px, 3vw, 28px); box-shadow: 0 6px 22px rgba(90, 58, 26, 0.05); } body.woocommerce-account.logged-in .woocommerce-MyAccount-content h2, body.woocommerce-account.logged-in .woocommerce-MyAccount-content h3 { color: #5a3a1a; } /* ============================================================ 8. WOOCOMMERCE — WSPÓLNE ELEMENTY (koszyk, checkout, formularze) ============================================================ */ /* Pola formularzy WooCommerce */ .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce-page form .form-row input.input-text, .woocommerce-page form .form-row textarea, .woocommerce-page form .form-row select { background: #ffffff; border: 1px solid #e6d8c6; border-radius: 12px; padding: 12px 14px; color: #4a3a2a; font-size: 0.98rem; box-shadow: none; } .woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus, .woocommerce form .form-row select:focus, .woocommerce-page form .form-row input.input-text:focus, .woocommerce-page form .form-row textarea:focus, .woocommerce-page form .form-row select:focus { outline: none; border-color: #b85c00; box-shadow: 0 0 0 3px rgba(184, 92, 0, 0.12); } /* Przyciski WooCommerce */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce-page a.button, .woocommerce-page button.button, .woocommerce-page input.button, .woocommerce-page #respond input#submit, .woocommerce .wc-proceed-to-checkout a.checkout-button, .woocommerce button.button.alt, .woocommerce a.button.alt { background: linear-gradient(135deg, #c96b0a 0%, #a64f00 100%) !important; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; color: #ffffff !important; font-weight: 600; padding: 12px 26px; box-shadow: 0 6px 16px rgba(184, 92, 0, 0.24) !important; transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover, .woocommerce-page a.button:hover, .woocommerce-page button.button:hover, .woocommerce-page input.button:hover, .woocommerce-page #respond input#submit:hover, .woocommerce .wc-proceed-to-checkout a.checkout-button:hover, .woocommerce button.button.alt:hover, .woocommerce a.button.alt:hover { transform: translateY(-2px); filter: brightness(1.05); color: #ffffff !important; } /* Komunikaty (powiadomienia) */ .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-page .woocommerce-message, .woocommerce-page .woocommerce-info, .woocommerce-page .woocommerce-error { background: #fff8f0; border: 1px solid #f0e0cc; border-radius: 12px; color: #5a3a1a; padding: 14px 16px 14px 48px; box-shadow: 0 4px 14px rgba(90, 58, 26, 0.05); } .woocommerce-message { border-left: 4px solid #7a9b3f; } .woocommerce-info { border-left: 4px solid #b85c00; } .woocommerce-error { border-left: 4px solid #b3261e; background: #fff5f3; } .woocommerce-message a.button, .woocommerce-info a.button, .woocommerce-error a.button { background: #5a3a1a !important; } /* Tabele koszyka i zamówienia */ .woocommerce table.shop_table, .woocommerce-page table.shop_table, .woocommerce table.shop_table_responsive, .woocommerce-page table.shop_table_responsive { background: #ffffff; border: 1px solid #f0e0cc; border-radius: 14px; overflow: hidden; color: #4a3a2a; } .woocommerce table.shop_table th, .woocommerce-page table.shop_table th { background: #fff6ec; color: #5a3a1a; font-size: 0.82em; text-transform: uppercase; letter-spacing: 0.06em; } .woocommerce .cart_totals, .woocommerce-page .cart_totals, .woocommerce .cart-collaterals, .woocommerce-page .cart-collaterals { background: #fffaf5; border: 1px solid #f0e0cc; border-radius: 16px; padding: 18px 22px; } /* Karty produktów */ .woocommerce ul.products li.product { background: #ffffff; border: 1px solid #f0e0cc; border-radius: 16px; padding: 14px; text-align: center; box-shadow: 0 4px 14px rgba(90, 58, 26, 0.05); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .woocommerce ul.products li.product:hover { transform: translateY(-5px); box-shadow: 0 14px 30px rgba(90, 58, 26, 0.1); border-color: #e4cfae; } .woocommerce ul.products li.product img { border-radius: 12px; margin-bottom: 10px; } .woocommerce ul.products li.product .woocommerce-loop-product__title { color: #5a3a1a; font-size: 1.02em; } .woocommerce ul.products li.product .price { color: #b85c00; font-weight: 600; } .woocommerce ul.products li.product .button { width: 100%; justify-content: center; margin-top: 6px; } .woocommerce ul.products li.product .star-rating { margin-left: auto; margin-right: auto; } /* Paginacja sklepu */ .woocommerce nav.woocommerce-pagination ul { border: 0; } .woocommerce nav.woocommerce-pagination ul li { border: 0; } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { border-radius: 999px; margin: 0 3px; color: #5a3a1a; font-weight: 500; } .woocommerce nav.woocommerce-pagination ul li span.current, .woocommerce nav.woocommerce-pagination ul li a:hover { background: #fff1e3 !important; color: #944800 !important; } /* ============================================================ 9. STRONA GŁÓWNA / SKLEP — tryb „Coming soon” (WooCommerce) ============================================================ */ .wp-block-woocommerce-coming-soon.woocommerce-coming-soon-store-only { background: linear-gradient(135deg, #fff8f0 0%, #fdf0e0 100%) !important; border: 1px solid #f0e0cc; border-radius: 22px; margin: 8px auto 46px !important; max-width: 980px; padding: clamp(20px, 5vw, 50px) clamp(14px, 4vw, 40px); box-shadow: 0 12px 34px rgba(90, 58, 26, 0.07); text-align: center; } /* Pasek ozdobny nad nagłówkiem */ .wp-block-woocommerce-coming-soon.woocommerce-coming-soon-store-only > .wp-block-group::before { content: '✦ PAPAGIANNI · HANDMADE ✦'; display: block; color: #b85c00; font-size: 0.78em; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 6px; } .wp-block-woocommerce-coming-soon.woocommerce-coming-soon-store-only .wp-block-group { gap: 0 !important; } /* Redukcja pustych odstępów blokowych */ .wp-block-woocommerce-coming-soon.woocommerce-coming-soon-store-only .wp-block-spacer { height: 20px !important; } /* Nagłówek */ .wp-block-woocommerce-coming-soon.woocommerce-coming-soon-store-only h1 { color: #5a3a1a !important; font-family: inherit !important; font-weight: 700 !important; font-size: clamp(1.9rem, 5vw, 2.7rem) !important; line-height: 1.25 !important; letter-spacing: 0.2px !important; margin: 0 0 14px !important; text-align: center !important; text-transform: none !important; } /* Podtytuł */ .wp-block-woocommerce-coming-soon.woocommerce-coming-soon-store-only p { color: #7a5a3a !important; font-family: inherit !important; font-size: clamp(1rem, 2.5vw, 1.18rem) !important; line-height: 1.65 !important; max-width: 620px !important; margin-left: auto !important; margin-right: auto !important; } /* Ukrycie ewentualnego koła/szkieletu WC */ .wp-block-woocommerce-coming-soon .wc-coming-soon-banner, .wp-block-woocommerce-coming-soon .components-spinner, .wp-block-woocommerce-coming-soon .wp-block-woocommerce-coming-soon__loader { display: none !important; } /* ============================================================ 10. PASEK „DEMO STORE” / OGŁOSZENIE SKLEPU ============================================================ */ .woocommerce-store-notice.demo_store { background: linear-gradient(90deg, #5a3a1a 0%, #7a4a1a 100%) !important; color: #fff8f0 !important; padding: 10px 46px 10px 16px !important; font-size: 0.85em; letter-spacing: 0.02em; } .woocommerce-store-notice.demo_store a, .woocommerce-store-notice.demo_store button, .woocommerce-store-notice.demo_store .woocommerce-store-notice__dismiss-link { color: #ffe9d2 !important; text-decoration: underline; text-underline-offset: 2px; } /* ============================================================ 11. RESPONSYWNOŚĆ — GLOBALNE DOSTROJENIA ============================================================ */ @media (max-width: 768px) { .pap-hero, .pap-page-hero { padding: 30px 18px 26px; border-radius: 14px; } .pap-hero-title { font-size: 1.8em; } .pap-hero-subtitle { font-size: 1.05em; } body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation, body.woocommerce-account.logged-in .woocommerce-MyAccount-content { width: 100% !important; float: none !important; } body.woocommerce-account.logged-in .woocommerce-MyAccount-content { margin-top: 18px; } } /* ============================================================ 12. PRZYCISKI CTA POD STRONĄ GŁÓWNĄ „COMING SOON” ============================================================ */ .pap-coming-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; } .pap-coming-cta .pap-button { padding: 12px 28px; } @media (max-width: 600px) { .pap-coming-cta { flex-direction: column; align-items: stretch; } .pap-coming-cta .pap-button { justify-content: center; } } /* ============================================================ 13. POPRAWKI (v2) — czytelność przycisków i wyrównanie ============================================================ */ /* Przyciski marki — napisy zawsze czytelne (nadpisują ogólny kolor linków) */ body.pap-styled .entry-content a.pap-button, body.pap-styled .pap-page-closing a.pap-button, body.pap-styled .entry-content .pap-button, .pap-page-closing a.pap-button, a.pap-button { color: #ffffff !important; } body.pap-styled .entry-content a.pap-button--ghost, body.pap-styled .pap-page-closing a.pap-button--ghost, a.pap-button--ghost { color: #5a3a1a !important; } body.pap-styled .entry-content a.pap-button:hover, a.pap-button:hover { color: #ffffff !important; } body.pap-styled .entry-content a.pap-button--ghost:hover, a.pap-button--ghost:hover { color: #5a3a1a !important; } /* Chipsy w hero — spójny ciemny tekst, niezależnie od ogólnych stylów linków */ body.pap-styled .entry-content .pap-hero-chips a, .pap-hero-chips a { color: #6a4a2a !important; } body.pap-styled .entry-content .pap-hero-chips a:hover, .pap-hero-chips a:hover { color: #944800 !important; } /* Każdy przycisk marki — zawartość (w tym ikony) wyśrodkowana */ a.pap-button, .pap-button, .woocommerce button.button, .woocommerce a.button, .woocommerce-page button.button, .woocommerce-page a.button, .woocommerce .wc-proceed-to-checkout a.checkout-button, .woocommerce-form-login__submit { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; text-align: center !important; line-height: 1.3 !important; } /* Nawigacja konta — przyciski z ewentualnymi ikonami na środku */ body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li a { display: flex; align-items: center; justify-content: flex-start; gap: 10px; } body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li a svg, body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li a i, body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li a img, body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li a .icon { margin: 0; flex: 0 0 auto; } /* Przycisk „pokaż hasło” (ikona oka) — wyśrodkowana w pionie */ .woocommerce .password-input, .woocommerce-page .password-input { position: relative; display: block; } .woocommerce .password-input .show-password-input, .woocommerce-page .password-input .show-password-input { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: auto; height: auto; padding: 4px; background: transparent !important; color: #8a6a4a !important; border: 0 !important; box-shadow: none !important; line-height: 1; z-index: 2; } .woocommerce .password-input input.input-text, .woocommerce-page .password-input input.input-text { padding-right: 44px; } /* ============================================================ 14. JASNA KOLORYSTYKA PRODUKTÓW I PRZYCISKÓW SKLEPU (v2) ============================================================ */ /* Główna akcja produktu — ciepły pomarańcz z białym tekstem */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce-page a.button, .woocommerce-page button.button, .woocommerce-page input.button, .woocommerce a.add_to_cart_button, .woocommerce-page a.add_to_cart_button, .woocommerce a.button.product_type_simple, .woocommerce-page a.button.product_type_simple, .woocommerce a.button.product_type_variable, .woocommerce-page a.button.product_type_variable, ul.products li.product .button, .woocommerce ul.products li.product .button, .woocommerce-page ul.products li.product .button, .woocommerce .wc-block-components-button, .woocommerce #respond input#submit { background: linear-gradient(135deg, #d97706 0%, #b85c00 100%) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; border-radius: 999px !important; color: #ffffff !important; font-weight: 600 !important; box-shadow: 0 6px 14px rgba(184, 92, 0, 0.25) !important; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce-page a.button:hover, .woocommerce-page button.button:hover, .woocommerce-page input.button:hover, .woocommerce a.add_to_cart_button:hover, ul.products li.product .button:hover, .woocommerce #respond input#submit:hover { background: linear-gradient(135deg, #b85c00 0%, #944800 100%) !important; color: #ffffff !important; box-shadow: 0 8px 18px rgba(184, 92, 0, 0.32) !important; transform: translateY(-1px); } /* Ikony na przyciskach produktów (koszyk itp.) — na środku */ .woocommerce ul.products li.product .button::before, .woocommerce a.add_to_cart_button::before, ul.products li.product .button::before { content: '' !important; } /* Karty produktów — jasne tło, ciepłe akcenty */ .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { background: #ffffff; border: 1px solid #eeddC6; border-radius: 16px; padding: 16px 14px 18px; box-shadow: 0 4px 14px rgba(90, 58, 26, 0.07); } .woocommerce ul.products li.product img, .woocommerce-page ul.products li.product img { border-radius: 12px; } .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce-page ul.products li.product .woocommerce-loop-product__title { color: #5a3a1a; font-weight: 700; padding: 8px 0 2px; } .woocommerce ul.products li.product .price, .woocommerce-page ul.products li.product .price { color: #b85c00 !important; font-weight: 700; } /* Kategorie produktów (kafelki) — jasne, nie ciemne */ ul.products li.product-category a, .woocommerce ul.products li.product-category a { display: block; background: #fffaf2; border-radius: 16px; padding: 14px; color: #5a3a1a !important; } ul.products li.product-category a img, .woocommerce ul.products li.product-category a img { border-radius: 12px; background: #fff6ea; } ul.products li.product-category a h2, .woocommerce ul.products li.product-category a h2, ul.products li.product-category .woocommerce-loop-category__title, .woocommerce ul.products li.product-category .woocommerce-loop-category__title { color: #5a3a1a !important; font-size: 1.05em !important; padding-top: 10px; text-align: center; } /* Sekcje „storefront" na stronie głównej — tytuły ciepłe */ .storefront-product-section .section-title { color: #5a3a1a; font-size: 1.6em; text-align: center; position: relative; padding-bottom: 12px; margin: 30px 0 22px; } .storefront-product-section .section-title::after { content: ''; display: block; width: 60px; height: 3px; background: #b85c00; border-radius: 2px; margin: 10px auto 0; } /* Ogólne tło strony — jasny, ciepły odcień (nie czysta biel) */ html, body { background: #fdf9f2 !important; } body.pap-styled #page, body.pap-styled .site-content, body.pap-styled .site-main { background: #ffffff !important; } body.woocommerce #page, body.woocommerce-page #page, body.post-type-archive-product #page { background: #fdf9f2 !important; } body.woocommerce .content-area, body.woocommerce-page .content-area, body.woocommerce .site-main, body.woocommerce-page .site-main { background: transparent !important; } /* ============================================================ 15. ROZBUDOWANA TREŚĆ STRONY GŁÓWNEJ / „COMING SOON” (v2) ============================================================ */ .pap-home-extra { max-width: 980px; margin: 10px auto 50px; } .pap-home-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; } .pap-home-card { display: flex; flex-direction: column; align-items: center; text-align: center; background: #ffffff; border: 1px solid #eeddc6; border-radius: 18px; padding: 28px 20px 22px; text-decoration: none !important; box-shadow: 0 6px 18px rgba(90, 58, 26, 0.06); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .pap-home-card:hover { transform: translateY(-5px); border-color: #e2c89e; box-shadow: 0 14px 30px rgba(90, 58, 26, 0.12); } .pap-home-card-icon { font-size: 2.3em; line-height: 1; margin-bottom: 12px; display: block; } .pap-home-card h3 { color: #5a3a1a; font-size: 1.15em; margin: 0 0 8px; } .pap-home-card p { color: #6a5a4a; font-size: 0.95em; line-height: 1.6; margin: 0 0 14px; flex: 1 1 auto; } .pap-home-card-link { display: inline-flex; align-items: center; gap: 6px; color: #b85c00; font-weight: 600; font-size: 0.95em; } .pap-home-banner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 28px; background: linear-gradient(135deg, #fff4e4 0%, #ffe9d0 100%); border: 1px solid #f0dcc0; border-radius: 18px; padding: 28px 30px; } .pap-home-banner h3 { color: #5a3a1a; font-size: 1.3em; margin: 0 0 6px; } .pap-home-banner p { color: #6a5a4a; margin: 0; line-height: 1.6; max-width: 560px; } .pap-home-banner .pap-button { flex: 0 0 auto; } @media (max-width: 700px) { .pap-home-cards { grid-template-columns: 1fr; } .pap-home-banner { flex-direction: column; text-align: center; padding: 24px 18px; } .pap-home-banner .pap-button { width: 100%; justify-content: center; } } /* ============================================================ 16. TWARDE NADPISANIE PRZYCISKU „WYŚLIJ” (Jetpack) — v3 Rozwiązuje biały napis na białym tle (konflikt z regułą @media (prefers-color-scheme: dark) w „Dodatkowym CSS”). ============================================================ */ .contact-form .wp-block-button .wp-block-button__link, body.page-id-69 .contact-form .wp-block-button .wp-block-button__link, .wp-block-button .wp-block-button__link.wp-element-button, .jetpack-contact-form button.wp-block-button__link { background: linear-gradient(135deg, #e8871e 0%, #c45d00 100%) !important; background-color: #c45d00 !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; border-radius: 999px !important; box-shadow: 0 6px 16px rgba(184, 92, 0, 0.35) !important; text-shadow: 0 1px 2px rgba(90, 45, 0, 0.25); padding: 13px 34px !important; } .contact-form .wp-block-button .wp-block-button__link:hover, body.page-id-69 .contact-form .wp-block-button .wp-block-button__link:hover, .wp-block-button .wp-block-button__link.wp-element-button:hover, .jetpack-contact-form button.wp-block-button__link:hover { background: linear-gradient(135deg, #d97706 0%, #a64f00 100%) !important; background-color: #a64f00 !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.35) !important; } /* Pola formularza Jetpack — wymuszony ciemny tekst (Gutenberg nadaje polom kolor „luminous vivid orange", który jest słabo czytelny) */ .contact-form input.wp-block-jetpack-input, .contact-form .grunion-field, body.page-id-69 .contact-form input[type='text'], body.page-id-69 .contact-form input[type='email'], body.page-id-69 .contact-form input[type='tel'], body.page-id-69 .contact-form textarea, body.page-id-69 .contact-form select { color: #3f3328 !important; } /* ============================================================ 17. PRZYCISKI „DODAJ DO KOSZYKA” — JASNY POMARAŃCZ (v3) Szerokie selektory: klasyczny sklep, bloki WooCommerce oraz widok zalogowanego właściciela. ============================================================ */ ul.products li.product a.button, .woocommerce ul.products li.product a.button, .woocommerce-page ul.products li.product a.button, a.add_to_cart_button, a.add_to_cart_button.ajax_add_to_cart, .woocommerce a.add_to_cart_button, .woocommerce-page a.add_to_cart_button, .woocommerce a.button.product_type_simple, .woocommerce a.button.product_type_variable, .woocommerce a.button.product_type_grouped, button.single_add_to_cart_button, .woocommerce button.single_add_to_cart_button, .woocommerce-page button.single_add_to_cart_button, .wc-block-grid__product-add-to-cart .wp-block-button__link, .wc-block-components-product-button .wp-block-button__link, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button { background: linear-gradient(135deg, #e8871e 0%, #c45d00 100%) !important; background-color: #c45d00 !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.28) !important; border-radius: 999px !important; box-shadow: 0 5px 14px rgba(184, 92, 0, 0.3) !important; text-shadow: 0 1px 2px rgba(90, 45, 0, 0.2); padding: 11px 22px !important; } ul.products li.product a.button:hover, a.add_to_cart_button:hover, .woocommerce a.add_to_cart_button:hover, button.single_add_to_cart_button:hover, .woocommerce button.single_add_to_cart_button:hover, .wc-block-grid__product-add-to-cart .wp-block-button__link:hover, .wc-block-components-product-button .wp-block-button__link:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background: linear-gradient(135deg, #d97706 0%, #a64f00 100%) !important; background-color: #a64f00 !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.4) !important; box-shadow: 0 8px 18px rgba(184, 92, 0, 0.38) !important; } /* Treść przycisków zawsze wyśrodkowana (tekst / ikony) */ .contact-form .wp-block-button .wp-block-button__link, .wp-block-button .wp-block-button__link.wp-element-button, .jetpack-contact-form button.wp-block-button__link, ul.products li.product a.button, .woocommerce ul.products li.product a.button, a.add_to_cart_button, .woocommerce a.add_to_cart_button, button.single_add_to_cart_button, .woocommerce button.single_add_to_cart_button, .wc-block-grid__product-add-to-cart .wp-block-button__link, .wc-block-components-product-button .wp-block-button__link { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; text-align: center !important; line-height: 1.35 !important; white-space: normal !important; } /* ============================================================ 18. NAWIGACJA „MOJE KONTO” — IKONA I TEKST WYŚRODKOWANE (v3) Dotyczy pigułek: Kokpit, Zamówienia, Adresy, Konto itp. ============================================================ */ body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li a { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 10px !important; text-align: center !important; width: 100% !important; box-sizing: border-box !important; } /* Ikony wewnątrz pigułek — stały rozmiar, nie „uciekają” na prawo */ body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li a::before, body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li a::after { margin: 0 !important; position: static !important; float: none !important; } body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li a svg, body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li a img, body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li a i, body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li a [class*='icon'], body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li a [class*='dashicons'], body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li a em, body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li a span { margin-left: 0 !important; margin-right: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; float: none !important; flex: 0 0 auto !important; width: auto !important; max-width: 22px; max-height: 22px; vertical-align: middle; } /* ============================================================ 19. UJEDNOLICENIE PRZYCISKÓW CTA + CENTROWANIE „WYŚLIJ” (v4) ============================================================ */ /* Oba przyciski w sekcji domknięcia (i na stronie głównej) — ten sam wygląd */ body.pap-styled .entry-content .pap-page-closing a.pap-button, body.pap-styled .entry-content .pap-page-closing a.pap-button--ghost, body.pap-styled .pap-page-closing a.pap-button, body.pap-styled .pap-page-closing a.pap-button--ghost, .pap-page-closing a.pap-button, .pap-page-closing a.pap-button--ghost, .pap-coming-cta a.pap-button, .pap-coming-cta a.pap-button--ghost { background: linear-gradient(135deg, #e8871e 0%, #c45d00 100%) !important; background-color: #c45d00 !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; box-shadow: 0 6px 16px rgba(184, 92, 0, 0.32) !important; text-shadow: 0 1px 2px rgba(90, 45, 0, 0.2); } body.pap-styled .entry-content .pap-page-closing a.pap-button:hover, body.pap-styled .entry-content .pap-page-closing a.pap-button--ghost:hover, .pap-page-closing a.pap-button:hover, .pap-page-closing a.pap-button--ghost:hover, .pap-coming-cta a.pap-button:hover, .pap-coming-cta a.pap-button--ghost:hover { background: linear-gradient(135deg, #d97706 0%, #a64f00 100%) !important; background-color: #a64f00 !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.4) !important; } /* Wyśrodkowanie przycisku „Wyślij” w formularzu kontaktowym */ body.page-id-69 .wp-block-jetpack-contact-form .wp-block-button, body.page-id-69 .contact-form .wp-block-button { display: flex !important; justify-content: center !important; align-self: center !important; width: 100% !important; margin: 22px 0 0 !important; text-align: center !important; } body.page-id-69 .wp-block-jetpack-contact-form .wp-block-button .wp-block-button__link, body.page-id-69 .contact-form .wp-block-button .wp-block-button__link { margin: 0 auto !important; } /* ============================================================ 20. KASA — WYBÓR PACZKOMATU / PUNKTU ODBIORU (Furgonetka) Czytelna sekcja: kupujący od razu wie, że musi wybrać paczkomat na mapie. ============================================================ */ #select-point-container { display: block; position: relative; background: linear-gradient(135deg, #fff8f0 0%, #fdf0e0 100%); border: 1px solid #e8d3b0; border-radius: 16px; padding: 16px 18px 14px; margin: 12px 0; text-align: center; box-shadow: 0 5px 16px rgba(90, 58, 26, 0.1); } /* Nagłówek sekcji — jasna informacja dla kupującego */ #select-point-container::before { content: '📦 Dostawa do paczkomatu — wybierz punkt odbioru'; display: block; color: #5a3a1a; font-weight: 700; font-size: 0.98em; line-height: 1.5; margin-bottom: 12px; } /* Przycisk „Wybierz / Zmień punkt odbioru” */ #select-point { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; background: linear-gradient(135deg, #e8871e 0%, #c45d00 100%) !important; background-color: #c45d00 !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; border-radius: 999px !important; padding: 11px 24px !important; font-weight: 700 !important; text-decoration: none !important; box-shadow: 0 6px 16px rgba(184, 92, 0, 0.32) !important; text-shadow: 0 1px 2px rgba(90, 45, 0, 0.2); line-height: 1.35 !important; } #select-point::before { content: '📍 '; } #select-point:hover { background: linear-gradient(135deg, #d97706 0%, #a64f00 100%) !important; background-color: #a64f00 !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.45) !important; transform: translateY(-1px); } /* Wybrany punkt odbioru */ #selected-point { display: block; color: #6a4a2a; font-size: 0.95em; line-height: 1.6; margin-top: 9px; } #selected-point:not(:empty) { font-weight: 600; } #selected-point:not(:empty)::before { content: 'Wybrany punkt: '; color: #5a3a1a; font-weight: 700; } #selected-point:empty::after { content: 'Nie wybrałeś jeszcze paczkomatu — kliknij przycisk i wskaż punkt na mapie.'; color: #9a6a2a; font-weight: 600; } /* Drobne ekrany */ @media (max-width: 600px) { #select-point-container { padding: 14px 12px 12px; } #select-point { width: 100% !important; } } /* ============================================================ 21. KASA BLOKOWA (WooCommerce Blocks) — WYBÓR PACZKOMATU Oraz czytelny komunikat przy wyborze punktu odbioru. ============================================================ */ /* Kontener blokowej kasy (furgonetka pickup point) */ .furgonetka-wc-blocks-pickup-point-block-container { display: block; position: relative; background: linear-gradient(135deg, #fff8f0 0%, #fdf0e0 100%); border: 1px solid #e8d3b0; border-radius: 16px; padding: 16px 18px 14px; margin: 10px 0; text-align: center; box-shadow: 0 5px 16px rgba(90, 58, 26, 0.1); } .furgonetka-wc-blocks-pickup-point-block-container::before { content: '📦 Dostawa do paczkomatu — wybierz punkt odbioru'; display: block; color: #5a3a1a; font-weight: 700; font-size: 0.98em; line-height: 1.5; margin-bottom: 12px; } /* Przycisk w kase blokowej */ .furgonetka-wc-blocks-pickup-point-block-container button, .furgonetka-wc-blocks-pickup-point-block-container .wc-block-components-button, .furgonetka-wc-blocks-pickup-point-block-button-container button, .furgonetka-wc-blocks-pickup-point-block-button-container .wc-block-components-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; background: linear-gradient(135deg, #e8871e 0%, #c45d00 100%) !important; background-color: #c45d00 !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; border-radius: 999px !important; padding: 11px 24px !important; font-weight: 700 !important; text-decoration: none !important; box-shadow: 0 6px 16px rgba(184, 92, 0, 0.32) !important; text-shadow: 0 1px 2px rgba(90, 45, 0, 0.2); line-height: 1.35 !important; } .furgonetka-wc-blocks-pickup-point-block-container button::before, .furgonetka-wc-blocks-pickup-point-block-button-container button::before { content: '📍'; margin-right: 4px; } .furgonetka-wc-blocks-pickup-point-block-container button:hover, .furgonetka-wc-blocks-pickup-point-block-container .wc-block-components-button:hover, .furgonetka-wc-blocks-pickup-point-block-button-container button:hover { background: linear-gradient(135deg, #d97706 0%, #a64f00 100%) !important; background-color: #a64f00 !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.45) !important; transform: translateY(-1px); } /* Tekst wewnątrz przycisku blokowego */ .furgonetka-wc-blocks-pickup-point-block-container button span, .furgonetka-wc-blocks-pickup-point-block-button-container button span, .furgonetka-wc-blocks-pickup-point-block-container .wc-block-components-button__text { color: #ffffff !important; } /* Wybrany punkt — etykieta blokowa */ .furgonetka-wc-blocks-pickup-point-block-label { display: block; margin: 9px 0 0 !important; color: #6a4a2a; font-weight: 600; font-size: 0.95em; line-height: 1.5; } .furgonetka-wc-blocks-pickup-point-block-label::before { content: 'Wybrany punkt: '; color: #5a3a1a; font-weight: 700; } /* Komunikat o konieczności wybrania właściwego paczkomatu (widoczny przy obu wariantach: klasycznym i blokowym) */ #select-point-container::after, .furgonetka-wc-blocks-pickup-point-block-container::after { content: '⚠️ Pamiętaj: bez wybrania właściwego paczkomatu nie dokończysz zamówienia. Wybierz punkt, z którego realnie odbierzesz paczkę.'; display: block; margin-top: 11px; padding-top: 10px; border-top: 1px dashed #e3c9a4; color: #9a5210; font-size: 0.85em; font-weight: 600; line-height: 1.55; } @media (max-width: 600px) { .furgonetka-wc-blocks-pickup-point-block-container { padding: 14px 12px 12px; } .furgonetka-wc-blocks-pickup-point-block-container button, .furgonetka-wc-blocks-pickup-point-block-button-container button { width: 100% !important; } } /* ============================================================ 22. REGULAMIN — WYGLĄD JAK NA STRONIE „MANUFAKTURA DREWNA” ============================================================ */ /* Tło strony — biel jak na Manufakturze (bez kremowej „karty”) */ body.privacy-policy, body.privacy-policy #page, body.privacy-policy .site-content, body.privacy-policy .site-main, body.privacy-policy .content-area { background: #ffffff !important; } /* Treść dokumentu — bez papierowej karty, na szerokość jak u Manufaktury */ body.privacy-policy .entry-content { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; max-width: 980px !important; margin-left: auto !important; margin-right: auto !important; } body.privacy-policy .pap-page-hero { margin: 6px auto 44px; } /* Nagłówki rozdziałów — identyczne z sekcjami Manufaktury */ body.privacy-policy .entry-content h2.wp-block-heading { color: #5a3a1a; font-size: 1.7em; margin: 46px 0 16px; padding-bottom: 10px; position: relative; } body.privacy-policy .entry-content h2.wp-block-heading::after { content: ''; display: block; width: 60px; height: 3px; background: #b85c00; border-radius: 2px; margin-top: 10px; } body.privacy-policy .entry-content h3.wp-block-heading { color: #7a4a12; font-size: 1.16em; margin: 26px 0 10px; } /* Pierwszy nagłówek tuż po hero bez nadmiarowego odstępu */ body.privacy-policy .entry-content h2.wp-block-heading:first-of-type { margin-top: 8px; } /* Tekst dokumentu */ body.privacy-policy .entry-content p { color: #4a3a2a; line-height: 1.75; margin: 0 0 16px; } body.privacy-policy .entry-content strong { color: #5a3a1a; font-weight: 700; } /* Listy jak w sekcjach Manufaktury */ body.privacy-policy .entry-content ol.wp-block-list, body.privacy-policy .entry-content ul.wp-block-list { margin: 0 0 22px; padding-left: 1.5em; } body.privacy-policy .entry-content ol.wp-block-list li, body.privacy-policy .entry-content ul.wp-block-list li { margin-bottom: 6px; line-height: 1.7; color: #4a3a2a; } body.privacy-policy .entry-content ol.wp-block-list li::marker, body.privacy-policy .entry-content ul.wp-block-list li::marker { color: #b85c00; font-weight: 700; } /* Separatory */ body.privacy-policy .entry-content hr.wp-block-separator { border: 0; border-top: 1px solid #f0e0cc; margin: 34px auto; width: 100%; } /* Data obowiązywania i linki */ body.privacy-policy .entry-content a { color: #b85c00 !important; text-decoration: underline; text-decoration-color: rgba(184, 92, 0, 0.35); text-underline-offset: 3px; } body.privacy-policy .entry-content h1 + p strong, body.privacy-policy .entry-content .wp-block-heading + p strong { color: #b85c00; } /* Ukrycie powtórzonego tytułu dokumentu (jest w hero) */ body.privacy-policy .entry-content > h1.wp-block-heading { display: none !important; } /* Domknięcie strony — identyczne z sekcją końcową Manufaktury */ body.privacy-policy .pap-page-closing { margin-top: 46px; padding: 34px 20px 20px; border-top: 1px solid #f0e0cc; } body.privacy-policy .pap-page-closing .pap-button { margin-top: 12px; } /* Responsywność */ @media (max-width: 600px) { body.privacy-policy .entry-content h2.wp-block-heading { font-size: 1.35em; margin-top: 34px; } body.privacy-policy .pap-page-closing .pap-button { width: 100%; justify-content: center; } } /* ============================================================ 23. „MOJE KONTO” i „KONTAKT” — WYGLĄD JAK MANUFAKTURA ============================================================ */ /* Treść na białym tle, bez dodatkowych ramek kontenera */ body.page-id-16 .entry-content, body.page-id-69 .entry-content { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; } /* Hero — marginesy jak sekcja powitalna Manufaktury */ body.page-id-16 .pap-page-hero, body.page-id-69 .pap-page-hero { margin-top: 8px; margin-bottom: 38px; } /* Ukrycie domyślnych sekcji produktowych / kategorii, które strona „Kontakt” pokazuje przez szablon „Homepage” */ body.page-id-69 .storefront-product-section { display: none !important; } /* Nagłówki na tych stronach w stylu sekcji Manufaktury */ body.page-id-16 .entry-content h2, body.page-id-69 .entry-content h2 { color: #5a3a1a; position: relative; padding-bottom: 10px; } body.page-id-16 .entry-content h2::after, body.page-id-69 .entry-content h2::after { content: ''; display: block; width: 60px; height: 3px; background: #b85c00; border-radius: 2px; margin-top: 8px; } /* Karta logowania „Moje konto” — jak karty sekcji Manufaktury */ body.woocommerce-account:not(.logged-in) .entry-content > .woocommerce { background: #fffaf5; border: 1px solid #f0e0cc; border-radius: 18px; box-shadow: 0 8px 24px rgba(90, 58, 26, 0.08); margin: 4px auto 40px; } /* Formularz kontaktowy — karta jak na Manufakturze */ body.page-id-69 .jetpack-contact-form-container { background: #fffaf5; border: 1px solid #f0e0cc; border-radius: 18px; box-shadow: 0 8px 24px rgba(90, 58, 26, 0.08); } /* Chipsy i etykiety — spójne kolory z Manufakturą */ body.page-id-16 .pap-eyebrow, body.page-id-69 .pap-eyebrow { background: #fffaf5; border: 1px solid #f0e0cc; color: #b85c00; } /* Sekcja domknięcia na „Moje konto” — jak końcówka Manufaktury */ body.page-id-16 .pap-page-closing { margin-top: 34px; } /* Drobne ekrany */ @media (max-width: 600px) { body.page-id-16 .pap-page-hero, body.page-id-69 .pap-page-hero { margin-top: 4px; margin-bottom: 28px; } } /* ============================================================ 24. JEDNOLITE KARTY PRODUKTÓW — IDENTYCZNE PROPORCJE Każdy produkt (obraz, tytuł, cena, przycisk) wyświetla się w tych samych proporcjach, niezależnie od długości nazwy czy braku ceny/opisu. ============================================================ */ .woocommerce ul.products li.product, .woocommerce-page ul.products li.product, ul.products li.product { display: flex !important; flex-direction: column !important; align-items: stretch !important; text-align: center !important; box-sizing: border-box !important; } /* Link produktu (obraz + tytuł + cena) rozciąga kartę równo */ .woocommerce ul.products li.product .woocommerce-LoopProduct-link, .woocommerce-page ul.products li.product .woocommerce-LoopProduct-link, ul.products li.product .woocommerce-LoopProduct-link, .woocommerce ul.products li.product > a:first-child, ul.products li.product > a:first-child { display: flex !important; flex: 1 1 auto !important; flex-direction: column !important; align-items: stretch !important; } /* Obrazek — stałe proporcje 4:3, wypełnia pole bez „skakania” */ .woocommerce ul.products li.product img, .woocommerce-page ul.products li.product img, ul.products li.product img { width: 100% !important; height: auto !important; aspect-ratio: 4 / 3 !important; object-fit: cover !important; object-position: center !important; display: block !important; background: #f7efe3; } /* Tytuł — zawsze co najmniej dwie linie (równa wysokość) */ .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce-page ul.products li.product .woocommerce-loop-product__title, ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product h2, ul.products li.product h2 { min-height: 2.9em !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 12px 10px !important; margin: 0 !important; line-height: 1.35 !important; } /* Cena — zarezerwowane miejsce (gdy produkt jej nie ma) */ .woocommerce ul.products li.product .price, .woocommerce-page ul.products li.product .price, ul.products li.product .price { min-height: 1.7em !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 2px 6px 12px !important; margin: 0 !important; } /* Oceny / pozostałe elementy też wyrównane */ .woocommerce ul.products li.product .star-rating, ul.products li.product .star-rating { margin: 2px auto 6px !important; } /* Przycisk zawsze na dole karty, pełna szerokość */ .woocommerce ul.products li.product .button, .woocommerce-page ul.products li.product .button, ul.products li.product .button { margin-top: auto !important; width: 100% !important; align-self: stretch !important; box-sizing: border-box !important; } /* ============================================================ 25. WYRÓWNANIE HERO I PIERWSZYCH LINII TREŚCI „Moje konto” i „Regulamin” — układ identyczny z Manufakturą: wyśrodkowany tytuł + podtytuł, bez „plakietki” nad tytułem. ============================================================ */ /* Ukrycie plakietki (eyebrow) — hero jak na Manufakturze */ body.page-id-16 .pap-page-hero .pap-eyebrow, body.page-id-69 .pap-page-hero .pap-eyebrow, body.page-id-163 .pap-page-hero .pap-eyebrow { display: none !important; } /* Wyśrodkowanie i rytm pionowy sekcji hero */ body.page-id-16 .pap-page-hero, body.page-id-69 .pap-page-hero, body.page-id-163 .pap-page-hero { text-align: center !important; padding: 44px 24px 36px; } body.page-id-16 .pap-page-hero .pap-hero-title, body.page-id-69 .pap-page-hero .pap-hero-title, body.page-id-163 .pap-page-hero .pap-hero-title { margin: 0 0 14px !important; text-wrap: balance; } body.page-id-16 .pap-page-hero .pap-hero-subtitle, body.page-id-69 .pap-page-hero .pap-hero-subtitle, body.page-id-163 .pap-page-hero .pap-hero-subtitle { max-width: 760px !important; margin: 0 auto !important; } /* Regulamin: ukrycie zdublowanej daty tuż pod hero (data jest już w podtytule sekcji hero) */ body.privacy-policy .entry-content > h1.wp-block-heading + p { display: none !important; } /* Czytelny odstęp pierwszej sekcji treści pod hero */ body.page-id-16 .pap-page-hero + *, body.page-id-163 .pap-page-hero + * { margin-top: 6px; } /* „Moje konto” — karta logowania idealnie na środku pod hero */ body.page-id-16 .pap-page-hero + .woocommerce { max-width: 620px; margin-left: auto !important; margin-right: auto !important; } /* ============================================================ 26. SIATKA SKLEPU — STAŁA LICZBA KOLUMN W KAŻDYM RZĘDZIE (desktop: zawsze 4 produkty w poziomie, tablet: 2, telefon: 1) ============================================================ */ /* Desktop i większe ekrany: dokładnie 4 kolumny — żaden rząd nie może mieć „dziury” ani innej liczby produktów. */ .woocommerce ul.products, .woocommerce-page ul.products, ul.products { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; column-gap: 24px !important; row-gap: 40px !important; margin: 0 0 2.5em !important; } .woocommerce ul.products li.product, .woocommerce-page ul.products li.product, ul.products li.product { width: 100% !important; max-width: none !important; float: none !important; margin: 0 !important; height: 100% !important; box-sizing: border-box !important; } /* Karty w jednym rzędzie zawsze równej wysokości */ .woocommerce ul.products li.product, .woocommerce-page ul.products li.product, ul.products li.product { display: flex !important; flex-direction: column !important; align-items: stretch !important; } /* Tablet: 2 kolumny */ @media (max-width: 900px) { .woocommerce ul.products, .woocommerce-page ul.products, ul.products { grid-template-columns: repeat(2, 1fr) !important; } } /* Telefon: 1 kolumna */ @media (max-width: 520px) { .woocommerce ul.products, .woocommerce-page ul.products, ul.products { grid-template-columns: 1fr !important; } } /* Reguła ochronna: jeśli na początku listy pojawi się pusta karta (bez linku do produktu) — np. „fantom” po wtyczce — nie może ona zostawiać pustej komórki w pierwszym rzędzie. */ .woocommerce ul.products li.product:empty, .woocommerce-page ul.products li.product:empty, ul.products li.product:empty, .woocommerce ul.products li.product:not(:has(a)), .woocommerce-page ul.products li.product:not(:has(a)), ul.products li.product:not(:has(a)) { display: none !important; } /* WAŻNE: wyłączenie clearfix WooCommerce/Storefront (ul.products::before/::after). Przy display:grid te pseudoelementy stają się pustymi „kafelkami” siatki — ::before zajmuje wtedy pierwszą komórkę pierwszego rzędu, przez co widać 3 produkty zamiast 4. */ .woocommerce ul.products::before, .woocommerce-page ul.products::before, ul.products::before, .woocommerce ul.products::after, .woocommerce-page ul.products::after, ul.products::after { content: none !important; display: none !important; } /* ============================================================ 27. KASA (CHECKOUT BLOCK) — WYRAŹNY PRZYCISK „KUPUJĘ I PŁACĘ” Strona /kasa/ używa bloku WooCommerce Checkout, więc przycisk końcowy ma klasę .wc-block-components-checkout-place-order-button (nie klasyczny #place_order / .button.alt). Bez stylu wygląda jak zwykły tekst — nadajemy mu formę głównego CTA sklepu. ============================================================ */ /* Pojemnik przycisku — pełna szerokość */ .wc-block-checkout .wc-block-components-checkout-place-order-button__container, .wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button__container { width: 100% !important; } /* Przycisk finalizacji zakupu */ .wc-block-checkout .wc-block-components-checkout-place-order-button, .wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button { width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; background: linear-gradient(135deg, #c96b0a 0%, #a64f00 100%) !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.22) !important; border-radius: 999px !important; font-size: 1.08rem !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: 0.02em; text-transform: uppercase; padding: 18px 30px !important; margin: 10px 0 6px; box-shadow: 0 10px 26px rgba(184, 92, 0, 0.35) !important; cursor: pointer !important; transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease !important; } .wc-block-checkout .wc-block-components-checkout-place-order-button:hover, .wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:hover { transform: translateY(-2px); filter: brightness(1.06); color: #ffffff !important; } .wc-block-checkout .wc-block-components-checkout-place-order-button:focus-visible, .wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(184, 92, 0, 0.35), 0 10px 26px rgba(184, 92, 0, 0.35) !important; } /* Stan zablokowany (gdy dane nie są kompletne) — przycisk ma pozostać wyraźny, tylko delikatnie przygaszony */ .wc-block-checkout .wc-block-components-checkout-place-order-button:disabled, .wc-block-checkout .wc-block-components-checkout-place-order-button[disabled], .wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:disabled { background: linear-gradient(135deg, #d89a5a 0%, #c07f3a 100%) !important; box-shadow: none !important; opacity: 1 !important; cursor: not-allowed !important; } /* ============================================================ 28. STRONA PRODUKTU — PRZYCISK „WRÓĆ DO SKLEPU” (wstrzykiwany na górze strony produktu przez MU-plugin) ============================================================ */ .pap-back-to-shop { margin: 0 0 20px; } .pap-back-to-shop__link { display: inline-flex !important; align-items: center !important; gap: 9px; background: #fff8f0 !important; border: 1px solid #e6d8c6 !important; border-radius: 999px !important; color: #5a3a1a !important; font-size: 0.95rem !important; font-weight: 600 !important; line-height: 1.2 !important; padding: 10px 20px !important; text-decoration: none !important; box-shadow: 0 2px 8px rgba(90, 58, 26, 0.06); transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease !important; } .pap-back-to-shop__link:hover, .pap-back-to-shop__link:focus { background: #fff1df !important; border-color: #c96b0a !important; color: #8a4a00 !important; transform: translateX(-2px); text-decoration: none !important; } .pap-back-to-shop__link:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(201, 107, 10, 0.25); } .pap-back-to-shop__arrow { font-size: 1.15em; line-height: 1; } /* ============================================================ 29. KASA — LINK „WRÓĆ DO KOSZYKA” POD PODSUMOWANIEM (wstrzykiwany przez MU-plugin po pojawieniu się podsumowania) ============================================================ */ .pap-back-to-cart { margin: 16px 0 0; text-align: left; } .wc-block-checkout__sidebar .pap-back-to-cart, .wc-block-components-order-summary + .pap-back-to-cart { margin: 18px 4px 4px; } .pap-back-to-cart__link { display: inline-flex !important; align-items: center !important; gap: 9px; background: #fff8f0 !important; border: 1px solid #e6d8c6 !important; border-radius: 999px !important; color: #5a3a1a !important; font-size: 0.95rem !important; font-weight: 600 !important; line-height: 1.2 !important; padding: 11px 20px !important; text-decoration: none !important; box-shadow: 0 2px 8px rgba(90, 58, 26, 0.06); transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease !important; } .pap-back-to-cart__link:hover, .pap-back-to-cart__link:focus { background: #fff1df !important; border-color: #c96b0a !important; color: #8a4a00 !important; transform: translateX(-2px); text-decoration: none !important; } .pap-back-to-cart__link:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(201, 107, 10, 0.25); } .pap-back-to-cart__arrow { font-size: 1.15em; line-height: 1; } /* ============================================================ 30. MOJE KONTO — NAPRAWA PIGUŁEK: IKONA I TEKST BEZ NACHODZENIA (Kokpit, Zamówienia, Adresy, Konto, Wyloguj…) ============================================================ */ /* Link = kontener flex: ikona ma własny, stały „kafelek”, a tekst stoi obok — nigdy pod/na ikonie. */ body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul { align-items: flex-start !important; } body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li { width: auto !important; max-width: 100% !important; flex: 0 0 auto !important; } body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li a { display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; align-content: center !important; gap: 8px !important; text-align: left !important; line-height: 1.35 !important; white-space: nowrap !important; width: auto !important; min-width: 0 !important; min-height: 42px !important; padding: 10px 20px !important; box-sizing: border-box !important; font-size: 0.86rem !important; overflow: hidden; } /* Ikona (Font Awesome / dashicons) jako pseudoelement ::before — mały, stały kwadrat; zero marginesów, floatów i przezroczystości, które w motywie powodowały nakładanie. */ body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li a::before { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 18px !important; width: 18px !important; height: 18px !important; margin: 0 !important; padding: 0 !important; float: none !important; position: static !important; opacity: 1 !important; text-align: center !important; line-height: 1 !important; font-size: 14px !important; vertical-align: middle; color: #b85c00 !important; } /* Gdyby motyw/wtyczka dodała drugą ikonę po treści — usuwamy. */ body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li a::after { content: none !important; display: none !important; } /* Ikony wstawiane jako osobne znaczniki (svg/i/img/span.icon) — też dostają stały kafelek, a tekstu nie zmniejszamy. */ body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li a > svg, body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li a > i, body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li a > img, body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li a > span[class*='icon'], body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li a > span[class*='dashicons'], body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li a > [class*='icon'] { flex: 0 0 18px !important; width: 18px !important; height: 18px !important; margin: 0 !important; float: none !important; } /* Etykiety tekstowe (gdyby były w ) — jedna linia obok ikony, bez zawijania pod ikonę. */ body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li a > span:not([class*='icon']):not([class*='dashicons']) { flex: 0 1 auto !important; width: auto !important; max-width: none !important; max-height: none !important; min-width: 0; white-space: nowrap !important; } /* ============================================================ 31. SEO + STOPKA + KOSZYK + INFORMACJE O PRODUKCIE ============================================================ */ /* 31a. Nagłówek strony sklepu — nadpisanie ukrycia z „Dodatkowego CSS”. Kontener zostaje widoczny (mieści wstęp nad katalogiem), a tytuł „Sklep” jest ukrywany wizualnie w sekcji 32a (zostaje w kodzie dla SEO). */ body.woocommerce .woocommerce-products-header, body.woocommerce-page .woocommerce-products-header, body.post-type-archive-product .woocommerce-products-header { display: block !important; visibility: visible !important; height: auto !important; margin: 0 0 14px !important; padding: 0 !important; overflow: visible !important; } body.woocommerce h1.page-title, body.woocommerce-page h1.page-title, body.post-type-archive-product h1.page-title, body.woocommerce .woocommerce-products-header__title, body.woocommerce-page .woocommerce-products-header__title, body.post-type-archive-product .woocommerce-products-header__title { display: block !important; visibility: visible !important; height: auto !important; margin: 0 0 6px !important; padding: 0 !important; overflow: visible !important; color: #5a3a1a !important; font-size: clamp(1.6rem, 3vw, 2.2rem) !important; line-height: 1.2 !important; } /* 31b. Koszyk w nagłówku — bardziej widoczny jako „pigułka”. */ .site-header-cart .cart-contents { display: inline-flex !important; align-items: center !important; gap: 7px !important; background: #fff8f0 !important; border: 1px solid #e6d8c6 !important; border-radius: 999px !important; color: #5a3a1a !important; font-weight: 600 !important; padding: 8px 16px !important; line-height: 1.3 !important; box-shadow: 0 2px 8px rgba(90, 58, 26, 0.07); } .site-header-cart .cart-contents:hover { background: #fff1df !important; border-color: #c96b0a !important; color: #8a4a00 !important; } /* 31b-mobile. Na telefonach chowamy „pigułkę” koszyka z ceną (lądowała pod logo) i pokazujemy małą ikonę koszyka z licznikiem — bez ceny. */ .pap-mobile-cart { display: none; } @media (max-width: 66.5em) { .site-header-cart { display: none !important; } .site-header > .col-full { position: relative; } .pap-mobile-cart { display: inline-flex !important; align-items: center; justify-content: center; position: absolute; top: 50%; right: 14px; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; background: #fff8f0 !important; border: 1px solid #e6d8c6 !important; color: #5a3a1a !important; box-shadow: 0 2px 8px rgba(90, 58, 26, 0.1); text-decoration: none !important; z-index: 40; } .pap-mobile-cart:hover { background: #fff1df !important; border-color: #c96b0a !important; } .pap-mobile-cart svg { display: block; } .pap-mobile-cart__count { position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: #c96b0a; color: #ffffff !important; font-size: 0.7rem; font-weight: 700; line-height: 19px; text-align: center; box-sizing: border-box; } } /* 31c. Pasek informacji o produkcie (pod opisem produktu). */ .pap-product-info { margin: 14px 0 18px; background: #fffaf3; border: 1px solid #f0e0cc; border-left: 4px solid #c96b0a; border-radius: 12px; padding: 12px 16px; } .pap-product-info ul { margin: 0; padding: 0; list-style: none; } .pap-product-info li { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 7px; padding: 0; color: #4a3a2a; font-size: 0.92rem; line-height: 1.45; } .pap-product-info li:last-child { margin-bottom: 0; } .pap-product-info li span[aria-hidden='true'] { flex: 0 0 auto; } /* 31d. Stopka — linki i poprawny kontakt. */ .custom-footer-content.pap-footer { display: flex !important; justify-content: center !important; align-items: center !important; gap: 10px 28px !important; flex-wrap: wrap !important; text-align: center !important; padding: 16px 0 !important; } .pap-footer-brand { color: #5a3a1a !important; font-weight: 600; } .pap-footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; } .pap-footer-nav__link { color: #7a5a3a !important; font-size: 0.9rem; font-weight: 500; text-decoration: none !important; border-bottom: 1px solid transparent; } .pap-footer-nav__link:hover { color: #b85c00 !important; border-bottom-color: rgba(184, 92, 0, 0.4); } /* ============================================================ 32. STRONA SKLEPU — KRÓTKI WSTĘP NAD KATALOGIEM (treść wstrzykiwana przez MU-plugin) ============================================================ */ /* Kontener wstępu — odstęp przed siatką produktów. */ .pap-shop-front { margin: 0 0 clamp(32px, 5vw, 56px); } /* 32a. Tytuł „Sklep” (H1 WooCommerce) — ukryty wizualnie, ale obecny w kodzie (SEO, czytniki ekranu). */ body.woocommerce .woocommerce-products-header__title, body.woocommerce-page .woocommerce-products-header__title, body.post-type-archive-product .woocommerce-products-header__title { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* 32b. Breadcrumb WooCommerce na stronie sklepu — ukryty (minimalizm). */ body.post-type-archive-product .woocommerce-breadcrumb { display: none !important; } /* --- Krótki wstęp nad katalogiem --- */ .pap-shop-intro { max-width: 780px; margin: 0 auto; text-align: center; color: #5f4529; font-size: 1.08rem; line-height: 1.8; } .pap-footer-mail { color: #5a3a1a !important; font-weight: 600; text-decoration: none !important; } .pap-footer-mail:hover { color: #b85c00 !important; } /* ============================================================ 33. NAGŁÓWEK — LOGO NA TABLECIE I TELEFONIE „Dodatkowy CSS” skaluje logo („LOGO +20%”, transform: scale(1.2)), co na wąskich ekranach wypycha je poza obszar nagłówka. Tu logo jest wymuszane do widoczności i poprawnego, wyśrodkowanego rozmiaru. ============================================================ */ @media (max-width: 66.5em) { .site-header .site-branding, .site-branding { display: block !important; visibility: visible !important; opacity: 1 !important; float: none !important; width: 100% !important; max-width: 100% !important; margin: 0 auto 4px !important; padding: 8px 10px 4px !important; text-align: center !important; overflow: visible !important; box-sizing: border-box !important; } .site-branding .custom-logo-link, .site-header .custom-logo-link, .custom-logo-link { display: inline-block !important; visibility: visible !important; opacity: 1 !important; margin: 0 auto !important; overflow: visible !important; } .site-branding img.custom-logo, .site-header .custom-logo-link img, .custom-logo-link img, .site-branding img { display: block !important; visibility: visible !important; opacity: 1 !important; width: auto !important; height: auto !important; max-width: 220px !important; max-height: 128px !important; margin: 0 auto !important; object-fit: contain; transform: none !important; transform-origin: center center !important; box-shadow: none !important; } } /* ============================================================ 33. MOJE KONTO — FINALNY, CZYSTY UKŁAD (v5) Jeden kompletny zestaw reguł na koniec pliku — nadpisuje wszystkie wcześniejsze wersje (7, 8, 18, 19, 23, 30 itd.). ============================================================ */ /* --- 33a. Kontener: nawigacja (lewa) + treść (prawa) --- */ body.woocommerce-account.logged-in .entry-content > .woocommerce { display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; gap: 24px !important; margin: 6px auto 40px !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; max-width: 1080px !important; } body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation { flex: 0 0 250px !important; width: 250px !important; min-width: 0 !important; position: sticky !important; top: 18px !important; align-self: flex-start !important; } body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul { display: flex !important; flex-direction: column !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; align-items: stretch !important; } body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li { width: 100% !important; margin: 0 !important; } /* Przycisk nawigacji: ikona (emoji) + tekst, jedna linia, idealnie w pionie. */ body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li a { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; gap: 12px !important; width: 100% !important; min-height: 48px !important; box-sizing: border-box !important; margin: 0 !important; padding: 10px 16px 10px 14px !important; background: #ffffff !important; border: 1px solid #eee0cc !important; border-radius: 14px !important; color: #4a3a2a !important; font-size: 0.95rem !important; font-weight: 600 !important; line-height: 1.3 !important; text-align: left !important; text-decoration: none !important; white-space: normal !important; overflow-wrap: anywhere !important; box-shadow: 0 1px 0 rgba(0,0,0,0.03) !important; transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease !important; } /* Ikona jako pseudoelement o stałej szerokości — nigdy nie nachodzi na tekst. */ body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li a::before { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 22px !important; width: 22px !important; height: 22px !important; margin: 0 !important; padding: 0 !important; font-size: 18px !important; line-height: 1 !important; text-align: center !important; position: static !important; float: none !important; opacity: 1 !important; content: "•"; } /* Dublujące się ikony z innych wtyczek — chowamy, używamy tylko naszych. */ body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li a > svg, body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li a > i, body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li a > img, body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li a > [class*="icon"], body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li a > [class*="dashicons"], body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li a::after { display: none !important; content: none !important; } /* Konkretne ikony dla pozycji konta. */ body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation-link--dashboard a::before { content: "🏠"; } body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation-link--orders a::before { content: "📦"; } body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation-link--downloads a::before { content: "⬇️"; } body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation-link--edit-address a::before { content: "📍"; } body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation-link--payment-methods a::before { content: "💳"; } body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation-link--edit-account a::before { content: "⚙️"; } body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation-link--customer-logout a::before { content: "🚪"; } /* Aktywna pozycja i hover — subtelny pomarańczowy. */ body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li.is-active a, body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li a:hover, body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li a:focus-visible { background: #fff1e3 !important; border-color: rgba(184, 92, 0, 0.45) !important; color: #944800 !important; transform: translateX(3px) !important; } /* --- 33b. Obszar treści konta --- */ body.woocommerce-account.logged-in .woocommerce-MyAccount-content { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; background: #fffdf8 !important; border: 1px solid #eee0cc !important; border-radius: 18px !important; padding: clamp(18px, 3vw, 30px) !important; box-shadow: 0 8px 26px rgba(90, 58, 26, 0.06) !important; } body.woocommerce-account.logged-in .woocommerce-MyAccount-content h2, body.woocommerce-account.logged-in .woocommerce-MyAccount-content h3 { color: #5a3a1a !important; margin: 0 0 16px !important; font-weight: 700 !important; line-height: 1.3 !important; } body.woocommerce-account.logged-in .woocommerce-MyAccount-content h2 { padding-bottom: 10px !important; border-bottom: 1px solid #f0e2cc !important; } /* Tabele zamówień i adresy — czytelne, przewijalne na wąskich ekranach */ body.woocommerce-account.logged-in .woocommerce-MyAccount-content table.shop_table { background: #ffffff !important; border: 1px solid #eee0cc !important; border-radius: 12px !important; overflow: hidden !important; width: 100% !important; margin: 0 0 22px !important; } body.woocommerce-account.logged-in .woocommerce-MyAccount-content table.shop_table th, body.woocommerce-account.logged-in .woocommerce-MyAccount-content table.shop_table td { padding: 10px 12px !important; vertical-align: middle !important; } body.woocommerce-account.logged-in .woocommerce-MyAccount-content .button, body.woocommerce-account.logged-in .woocommerce-MyAccount-content a.button { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; border-radius: 999px !important; margin: 2px 4px 6px 0 !important; } /* Adresy — dwie kolumny kafelków */ body.woocommerce-account.logged-in .woocommerce-MyAccount-content .addresses, body.woocommerce-account.logged-in .woocommerce-MyAccount-content .col2-set { display: flex !important; flex-wrap: wrap !important; gap: 18px !important; } body.woocommerce-account.logged-in .woocommerce-MyAccount-content .addresses .col-1, body.woocommerce-account.logged-in .woocommerce-MyAccount-content .addresses .col-2 { flex: 1 1 280px !important; min-width: 0 !important; margin: 0 !important; padding: 16px !important; background: #ffffff !important; border: 1px solid #eee0cc !important; border-radius: 14px !important; } /* Formularze w treści konta (dane, adresy, hasło) */ body.woocommerce-account.logged-in .woocommerce-MyAccount-content form .form-row { margin: 0 0 14px !important; } body.woocommerce-account.logged-in .woocommerce-MyAccount-content form .form-row label { display: block !important; margin-bottom: 5px !important; font-weight: 600 !important; color: #4a3a2a !important; } /* --- 33c. Widok niezalogowany — czytelna karta logowania --- */ body.woocommerce-account:not(.logged-in) .entry-content > .woocommerce { max-width: 620px !important; margin: 6px auto 40px !important; background: #fffdf8 !important; border: 1px solid #eee0cc !important; border-radius: 20px !important; padding: clamp(22px, 4vw, 36px) !important; box-shadow: 0 8px 26px rgba(90, 58, 26, 0.06) !important; } body.woocommerce-account:not(.logged-in) .woocommerce-form-login .form-row { display: flex !important; flex-direction: column !important; align-items: stretch !important; margin-bottom: 14px !important; } body.woocommerce-account:not(.logged-in) .woocommerce-form-login .woocommerce-form-login__rememberme { order: 3 !important; margin: 4px 0 10px !important; } body.woocommerce-account:not(.logged-in) .woocommerce-form-login .woocommerce-form-login__submit { order: 4 !important; width: 100% !important; } body.woocommerce-account:not(.logged-in) .woocommerce-form-login .lost_password { order: 5 !important; margin: 10px 0 0 !important; text-align: center !important; } /* --- 33d. Responsywność: tablet i telefon --- */ @media (max-width: 900px) { body.woocommerce-account.logged-in .entry-content > .woocommerce { flex-direction: column !important; gap: 18px !important; } body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation { flex: 1 1 auto !important; width: 100% !important; position: static !important; } body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul { flex-direction: row !important; flex-wrap: wrap !important; } body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li { flex: 1 1 auto !important; width: auto !important; min-width: 150px !important; } body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li a { justify-content: center !important; text-align: center !important; white-space: nowrap !important; } } @media (max-width: 600px) { body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul { flex-direction: column !important; } body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li { min-width: 0 !important; } body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li a { justify-content: flex-start !important; text-align: left !important; } body.woocommerce-account.logged-in .woocommerce-MyAccount-content table.shop_table { display: block !important; overflow-x: auto !important; } } /* ============================================================ 34. DOMKNIĘCIE PODSTRON — wyrównanie nagłówka, tekstu i przycisków („Potrzebujesz pomocy…”, „Zajrzyj do Manufaktury…”) ============================================================ */ /* Cała sekcja domknięcia wyśrodkowana i w tej samej osi co hero. */ body.pap-styled .pap-page-closing, .pap-page-closing { text-align: center !important; } /* Nagłówek sekcji domknięcia — linia pod spodem dokładnie pod środkiem. */ body.pap-styled .pap-page-closing h2, .pap-page-closing h2 { text-align: center !important; max-width: 680px !important; margin: 0 auto 14px !important; padding-bottom: 10px !important; } body.pap-styled .pap-page-closing h2::after, .pap-page-closing h2::after, body.page-id-16 .entry-content .pap-page-closing h2::after, body.page-id-69 .entry-content .pap-page-closing h2::after, body.page-id-163 .entry-content .pap-page-closing h2::after { content: '' !important; display: block !important; width: 64px !important; height: 3px !important; background: #b85c00 !important; border-radius: 2px !important; margin: 10px auto 0 auto !important; } /* Akapit — w tej samej szerokości co karta nad sekcją (spójna oś). */ body.pap-styled .pap-page-closing p, .pap-page-closing p { text-align: center !important; max-width: 620px !important; margin: 0 auto 18px !important; line-height: 1.7 !important; color: #4a3a2a !important; } /* Przyciski — równo obok siebie na środku, stały odstęp. */ body.pap-styled .pap-page-closing .pap-button, .pap-page-closing .pap-button, body.pap-styled .pap-page-closing .pap-button--ghost, .pap-page-closing .pap-button--ghost { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 10px 6px 0 !important; vertical-align: middle !important; } /* Telefon: przyciski pełna szerokość, jeden pod drugim. */ @media (max-width: 600px) { body.pap-styled .pap-page-closing .pap-button, .pap-page-closing .pap-button, body.pap-styled .pap-page-closing .pap-button--ghost, .pap-page-closing .pap-button--ghost { display: flex !important; width: 100% !important; max-width: 360px !important; margin: 8px auto 0 !important; } }