/* * Stylowanie stron WooCommerce (karta produktu, archiwum sklepu) w duchu motywu. * Osobny plik, bo css/styles.min.css jest budowany z gulpa i nadpisywany przy buildzie. * Ładowany tylko na stronach sklepu - patrz fundacja_veritas_woocommerce_styles(). */ /* .header jest position:absolute, więc nie rezerwuje miejsca - bez zapasu u góry okruszki chowają się pod menu. */ .woo-main { padding: 160px 0 80px; } .woo-main img { max-width: 100%; height: auto; } /* --- Okruszki --------------------------------------------------------- */ .woo-main .woocommerce-breadcrumb { font-size: 14px; color: var(--Gray); margin-bottom: 32px; } .woo-main .woocommerce-breadcrumb a { color: var(--Blue); text-decoration: none; } .woo-main .woocommerce-breadcrumb a:hover { text-decoration: underline; } /* --- Układ karty produktu --------------------------------------------- */ /* WooCommerce układa galerię i opis na floatach. Grid daje równe kolumny i pozwala uniknąć czyszczenia floatów pod sekcją produktów powiązanych. */ .woo-main div.product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-column-gap: 48px; align-items: start; } /* Prefiks .woocommerce (klasa na ) jest konieczny: reguły wtyczki mają postać `.woocommerce div.product div.images` i bez niego wygrywają. */ .woocommerce .woo-main div.product div.woocommerce-product-gallery, .woocommerce .woo-main div.product div.summary { float: none; width: auto; margin: 0; } /* Clearfix wtyczki (::before/::after z display:table) w kontenerze grid staje się pełnoprawną komórką i rozpycha układ. */ .woo-main div.product::before, .woo-main div.product::after, .woo-main ul.products::before, .woo-main ul.products::after { display: none; } .woo-main div.product .woocommerce-product-gallery { background: var(--White); border-radius: 20px; padding: 24px; } .woo-main div.product .woocommerce-product-gallery img { border-radius: 12px; } /* Blok tytułu i ikon udostępniania z wtyczki biletowej ma zostać nad kolumnami, a nie stać się trzecią kolumną gridu. */ .woo-main div.product .wps_etmfw_title_and_social_share_icon, .woo-main div.product .woocommerce-product-details__short-description, .woo-main div.product .woocommerce-tabs, .woo-main div.product .related, .woo-main div.product .upsells { grid-column: 1 / -1; } /* --- Kolumna opisu ---------------------------------------------------- */ .woo-main .product_title { font-size: 40px; letter-spacing: -1.2px; line-height: 110%; margin: 0 0 16px; } .woo-main .summary p.price, .woo-main .summary p.price .amount { color: var(--Blue); font-size: 28px; font-weight: 600; } .woo-main .summary p.price { margin: 0 0 24px; } .woo-main .summary .quantity input.qty { border: 1px solid var(--Blue); border-radius: 10px; padding: 10px; color: var(--Blue); } .woo-main .summary form.cart { margin-bottom: 24px; } /* --- Przyciski -------------------------------------------------------- */ /* Kształt zgodny z .button-orange-light z arkusza motywu. */ .woo-main .button, .woo-main button.button, .woo-main a.button, .woo-main .single_add_to_cart_button { display: inline-block; width: max-content; background: var(--Orange); color: var(--White) !important; border: none; border-radius: 50px; padding: 16px 26px; font-size: 18px; font-weight: 500; line-height: 1; letter-spacing: -0.352px; text-align: center; text-decoration: none; transition: background 0.2s ease; max-width: 100%; } .woo-main .button:hover, .woo-main .button:active, .woo-main .single_add_to_cart_button:hover, .woo-main .single_add_to_cart_button:active { background: var(--Purple); } .woo-main .button:disabled, .woo-main .single_add_to_cart_button:disabled { background: var(--Gray); } /* --- Meta i komunikat o wygaśnięciu ----------------------------------- */ .woo-main .product_meta { font-size: 14px; color: var(--Gray); border-top: 1px solid var(--GrayLight); padding-top: 16px; margin-top: 8px; } .woo-main .product_meta a { color: var(--Blue); } .woo-main .etmfw_expiration_message { background: var(--GrayLight); border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; color: var(--Blue); } /* --- Produkty powiązane / listing ------------------------------------- */ .woo-main .related > h2, .woo-main .upsells > h2 { font-size: 32px; margin: 64px 0 24px; } .woocommerce .woo-main ul.products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-gap: 24px; list-style: none; margin: 0; /* Motyw ma globalne `ul{padding-left:20px!important}` - inaczej siatka produktów jest przesunięta o 20px względem reszty treści. */ padding: 0 !important; } .woocommerce .woo-main ul.products li.product { float: none; width: auto; margin: 0; background: var(--White); border-radius: 20px; padding: 24px; text-align: center; } .woo-main ul.products li.product img { border-radius: 12px; margin-bottom: 16px; } .woo-main ul.products li.product .woocommerce-loop-product__title { font-size: 20px; font-weight: 600; margin-bottom: 8px; } .woo-main ul.products li.product .price { display: block; color: var(--Blue); font-weight: 600; margin-bottom: 16px; } /* --- Komunikaty ------------------------------------------------------- */ .woo-main .woocommerce-message, .woo-main .woocommerce-info, .woo-main .woocommerce-error { border-top-color: var(--Blue); border-radius: 10px; } /* --- Tablet / mobile -------------------------------------------------- */ @media (max-width: 991px) { .woo-main { padding: 110px 0 48px; } .woo-main div.product { grid-template-columns: minmax(0, 1fr); grid-row-gap: 24px; } .woo-main .product_title { font-size: 32px; } /* Prefiks .woocommerce musi być też tutaj - inaczej reguła bazowa (.woocommerce .woo-main ul.products) jest bardziej specyficzna. */ .woocommerce .woo-main ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } .woo-main .related > h2, .woo-main .upsells > h2 { font-size: 24px; margin: 40px 0 16px; } } @media (max-width: 575px) { .woocommerce .woo-main ul.products { grid-template-columns: minmax(0, 1fr); } }