/* Theme Name: xstore-child Theme URI: https://xstore.8theme.com Description: XStore is a multi-purpose theme that offers the ultimate WordPress and WooCommerce synergy, providing a comprehensive, all-in-one solution. Author: 8theme Author URI: https://www.8theme.com Template: xstore Version: 5.4 Text Domain: xstore-child Tags: e-commerce, two-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, custom-logo, featured-images, full-width-template, threaded-comments, accessibility-ready, rtl-language-support, footer-widgets, sticky-post, theme-options, translation-ready, ecommerce, woocommerce, shop, elementor, business, corporate, blog, news, light, dark */ /* ============================================================ Upodobnienie do oryginalnej strony tarabuso.eu (Wix) ============================================================ */ /* ---------- Nagłówek: niższy, jak na Wix ---------- */ /* pełna szerokość wiersza nagłówka: logo maksymalnie do lewej (jak na Wix, x~20px) */ .header-main .et-row-container.et-container { width: 100% !important; max-width: 100% !important; padding-left: 20px; padding-right: 20px; } .et_b_header-logo.align-center { text-align: left !important; } /* górny czarny pasek: ~28px wysokości, tekst 13px jak na Wix */ .header-top .et-wrap-columns, .header-top .et_promo_text_carousel, .header-top .swiper-container, .header-top .swiper-slide { height: 28px !important; min-height: 28px !important; } .header-top { padding: 0 !important; } .header-promo-text, .header-promo-text .text-nowrap { font-size: 13px !important; font-family: "CenturyGothic", sans-serif !important; letter-spacing: .13px; line-height: 28px; } .header-main .et-wrap-columns { min-height: 64px; } .et_b_header-logo img, .header-main .logo img { max-height: 23px; width: auto; } /* ---------- Strona główna: slider hero ---------- */ /* pełna szerokość ekranu niezależnie od kontenerów (jak strip na Wix) */ .elementor-widget-slides.et-hero-slides { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; } .e-con.e-parent:has(.et-hero-slides) { max-width: 100%; padding-left: 0; padding-right: 0; } .e-con.e-parent:has(.et-hero-slides) > .e-con-inner { max-width: 100%; padding: 0; } /* przycisk WSZYSTKIE PRODUKTY nisko, jak na Wix */ .et-hero-slides .swiper-slide-inner { align-items: flex-end !important; padding-bottom: 56px; } /* slajd wideo: film wypełnia cały slajd (cover), bez czarnych pasów */ .elementor-repeater-item-etvid01 .swiper-slide-bg { position: relative; overflow: hidden; } .elementor-repeater-item-etvid01 .swiper-slide-bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; } /* jak na Wix: kremowe półprzezroczyste tło, czarna ramka i czarny napis */ .et-hero-slides .elementor-slide-button { border: 1px solid #000; border-radius: 0; font-size: 13px; letter-spacing: 2px; padding: 13px 34px; background: rgba(255, 255, 255, .6); color: #000 !important; } .et-hero-slides .elementor-slide-button:hover { background: rgba(255, 255, 255, .85); color: #000 !important; } /* ---------- Strona główna: 3 kolumny O MARCE / MINERAŁY / SREBRO ---------- */ /* szerokość bloku jak na Wix (~940px) */ .elementor-element-98ac594 > .e-con-inner { max-width: 940px !important; } /* ikona ✦ zamiast gwiazdki font-awesome */ .elementor-element-98ac594 .elementor-icon svg, .et-3cols .elementor-icon svg { display: none; } .elementor-element-98ac594 .elementor-icon::before, .et-3cols .elementor-icon::before { content: "✦"; color: #BDA76D; font-size: 17px; line-height: 1; } /* pionowe linie rozdzielające kolumny */ .elementor-element-98ac594 > .e-con-inner > .elementor-widget-icon-box + .elementor-widget-icon-box, .et-3cols > .e-con-inner > .elementor-widget-icon-box + .elementor-widget-icon-box { border-left: 1px solid #d9d9d9; padding-left: 32px; } .elementor-element-98ac594 > .e-con-inner > .elementor-widget-icon-box, .et-3cols > .e-con-inner > .elementor-widget-icon-box { padding-right: 32px; } /* Smartfony + tablety w pionie (≤1024px): bez pionowych linii rozdzielających O MARCE / NATURALNE MINERAŁY / SREBRO POZŁACANE. Na telefonie (≤767px, kolumny zwinięte w jedną) zerujemy też padding-left, by po usunięciu linii bloki nie były przesunięte względem pierwszego. */ @media (max-width: 1024px) { .elementor-element-98ac594 > .e-con-inner > .elementor-widget-icon-box + .elementor-widget-icon-box, .et-3cols > .e-con-inner > .elementor-widget-icon-box + .elementor-widget-icon-box { border-left: 0 !important; } } @media (max-width: 767px) { .elementor-element-98ac594 > .e-con-inner > .elementor-widget-icon-box + .elementor-widget-icon-box, .et-3cols > .e-con-inner > .elementor-widget-icon-box + .elementor-widget-icon-box { padding-left: 0 !important; } } /* ---------- Strona główna: newsletter ---------- Wymiary z pomiaru tarabuso.eu: nagłówek 18px (bold "10% zniżki*"), formularz 558px (pole 30px wys., ramka 1px #000, placeholder "e-mail", czarny przycisk "Prześlij" 30px), drobny druk 10px; odstępy 12px i 14px. */ .elementor-element-a5f1024, .et-newsletter { text-align: center; } .elementor-element-a5f1024 .elementor-widget-text-editor, .et-newsletter .elementor-widget-text-editor { font-size: 18px; color: #000; } .elementor-element-a5f1024 .wpforms-container, .et-newsletter .wpforms-container { max-width: 558px; margin: 12px auto 14px !important; } .elementor-element-a5f1024 .wpforms-field-label, .et-newsletter .wpforms-field-label { display: none !important; } .elementor-element-a5f1024 .wpforms-form, .et-newsletter .wpforms-form { display: flex; align-items: stretch; justify-content: center; gap: 0; } .elementor-element-a5f1024 .wpforms-field-container, .et-newsletter .wpforms-field-container { flex: 1 1 auto; } .elementor-element-a5f1024 .wpforms-field, .et-newsletter .wpforms-field { padding: 0 !important; } .elementor-element-a5f1024 .wpforms-field input[type="text"], .elementor-element-a5f1024 .wpforms-field input[type="email"], .et-newsletter .wpforms-field input[type="text"], .et-newsletter .wpforms-field input[type="email"] { width: 100%; border: 1px solid #000; border-radius: 0; height: 30px !important; min-height: 30px !important; font-family: "CenturyGothic", sans-serif !important; font-size: 15px !important; color: #282626 !important; background: transparent !important; padding: 0 10px !important; } .elementor-element-a5f1024 .wpforms-field input::placeholder, .et-newsletter .wpforms-field input::placeholder { color: #282626; opacity: .8; } .elementor-element-a5f1024 .wpforms-submit-container, .et-newsletter .wpforms-submit-container { padding: 0 !important; } .elementor-element-a5f1024 button[type="submit"], .et-newsletter button[type="submit"] { background: #000 !important; color: #fff !important; border: 1px solid #000 !important; border-radius: 0 !important; height: 30px !important; min-height: 30px !important; padding: 0 14px !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 13px !important; letter-spacing: 0; line-height: 1; } /* Smartfony: formularz „Dołącz do newslettera" ma się mieścić na ekranie — wcześniej pole e-mail wychodziło poza krawędź. Węższy kontener zależny od szerokości ekranu (min z 558px i 90vw) + pozwól polom kurczyć się w flexie (min-width:0). */ @media (max-width: 767px) { .elementor-element-a5f1024 .wpforms-container, .et-newsletter .wpforms-container { max-width: min(558px, 90vw) !important; width: 100%; box-sizing: border-box; } .elementor-element-a5f1024 .wpforms-form, .et-newsletter .wpforms-form { max-width: 100%; } .elementor-element-a5f1024 .wpforms-field-container, .et-newsletter .wpforms-field-container { min-width: 0 !important; flex-shrink: 1 !important; } .elementor-element-a5f1024 .wpforms-field input[type="text"], .elementor-element-a5f1024 .wpforms-field input[type="email"], .et-newsletter .wpforms-field input[type="text"], .et-newsletter .wpforms-field input[type="email"] { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; } } /* ---------- Strona główna: sekcja ikon (renowacja/pielęgnacja/pakowanie/dostawa) ---------- Jak na Wix: blok ~760px wycentrowany, bez linii nad sekcją, pod sekcją krótsza linia ~560px wycentrowana, brak linii po tekście SEO. */ .elementor-element-19a5d8f > .e-con-inner { max-width: 760px !important; } .elementor-element-19a5d8f .elementor-widget-image img { width: 100%; height: auto; } .elementor-element-18f4b74, .elementor-element-c1aafca { display: none !important; } .elementor-element-3ff8106 .elementor-divider-separator { max-width: 560px; } /* ---------- Strona główna: tekst SEO ---------- Z pomiaru tarabuso.eu: blok 898px, Century Gothic 12px / lh 21px, czerń, nagłówki śródtekstowe 13px bez pogrubienia (.et-seo-lead), odstępy przez puste akapity 21px, punktory disc, bold tylko w ostatnim zdaniu. */ .elementor-element-555ae32c .elementor-widget-text-editor, .et-seo-text .elementor-widget-text-editor { max-width: 898px !important; margin-left: auto !important; margin-right: auto !important; font-size: 12px; line-height: 21px; color: #000; } .elementor-element-555ae32c .elementor-widget-text-editor p, .et-seo-text .elementor-widget-text-editor p { font-size: 12px; line-height: 21px; margin: 0; color: #000; } .elementor-element-555ae32c .elementor-widget-text-editor p.et-seo-lead, .et-seo-text .elementor-widget-text-editor p.et-seo-lead { font-size: 13px; line-height: 22.75px; } .elementor-element-555ae32c .elementor-widget-text-editor ul, .et-seo-text .elementor-widget-text-editor ul { list-style: disc; padding-left: 18px; margin: 0; } .elementor-element-555ae32c .elementor-widget-text-editor ul li, .et-seo-text .elementor-widget-text-editor ul li { font-size: 12px; line-height: 21px; margin: 0; } /* ---------- Strona O marce (jak tarabuso.eu/omarce) ---------- Pomiar oryginału: kolumna tekstu 407px (x292), nagłówek 14px bold, tekst 13px lh ~1.38, zdjęcie 232x347 (ten sam kadr — plik 1:1), wyrównanie kolumn do góry, blok ~800px wycentrowany. */ .page-id-229 .elementor-element-ea66be4 > .e-con-inner { max-width: 800px !important; align-items: flex-start; justify-content: space-between; } .page-id-229 .elementor-element-f32686b { max-width: 407px !important; font-size: 13px; line-height: 1.38; color: #000; } .page-id-229 .elementor-element-f32686b p { font-size: 13px; line-height: 1.38; margin: 0 0 15px; } .page-id-229 .elementor-element-f32686b p.et-omarce-head { font-size: 14px; margin-bottom: 22px; } .page-id-229 .elementor-element-64d85f7 img { width: 232px !important; max-width: 232px !important; height: 347px !important; object-fit: cover; } /* Tablety w pionie: tekst i zdjęcie razem (2 kolumny), bez łamania zdjęcia do nowej linii. Sekcja to grid Elementora — zwijał się do 1 kolumny już od ≤767px, przez co na mniejszych tabletach w pionie (np. 7", ~600–767px) zdjęcie spadało pod tekst. Wymuszamy 2 kolumny w tym zakresie; telefony (≤599px) zostają w 1 kolumnie. */ @media (min-width: 600px) and (max-width: 767px) { .page-id-229 .elementor-element-ea66be4 { --e-con-grid-template-columns: 1fr 232px !important; } .page-id-229 .elementor-element-ea66be4 > .e-con-inner { grid-template-columns: 1fr 232px !important; /* tekst elastyczny, zdjęcie 232px */ column-gap: 28px !important; max-width: 660px !important; margin-left: auto !important; margin-right: auto !important; justify-content: center !important; align-items: start !important; } } /* przycisk "Sklep" jak na Wix: 219x40, biały, ramka 1px #000, strzałka ⟶ */ .page-id-229 .elementor-element-d28a533 a.etheme-text-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 219px; height: 40px; padding: 0; background: #fff !important; border: 1px solid #000 !important; border-radius: 0 !important; color: #000 !important; font-family: "CenturyGothic", sans-serif; font-size: 14px; font-weight: 400; letter-spacing: 2px; text-transform: none; } .page-id-229 .elementor-element-d28a533 a.etheme-text-button::after { content: "\27F6"; font-size: 17px; line-height: 1; } .page-id-229 .elementor-element-d28a533 a.etheme-text-button:hover, .page-id-229 .elementor-element-d28a533 a.etheme-text-button:focus { background: #fff !important; color: #000 !important; } /* bez animacji motywu (zoom/transition) */ .page-id-229 .elementor-element-d28a533 .etheme-button-wrapper, .page-id-229 .elementor-element-d28a533 .etheme-button-wrapper *, .page-id-229 .elementor-element-d28a533 a.etheme-text-button { animation: none !important; transition: none !important; transform: none !important; } .page-id-229 .elementor-element-d28a533 .etheme-button-wrapper:hover, .page-id-229 .elementor-element-d28a533 .etheme-button-wrapper:hover * { animation: none !important; transform: none !important; } /* wyłącz podkreślenie/animację fill-overline motywu */ .page-id-229 .elementor-element-d28a533 a.fill-overline:before, .page-id-229 .elementor-element-d28a533 a.fill-overline:hover:before { display: none !important; } /* ---------- Strona Targi (jak tarabuso.eu/targi) ---------- Pomiar oryginału: blok ~940px, kolumna tekstu 535px (12px/21px), wideo 367x653 (pion 9:16), kolumny wyrównane do góry. */ .page-id-216 .elementor-element-aa52827 > .e-con-inner { max-width: 940px !important; align-items: flex-start; justify-content: space-between; } .page-id-216 .elementor-element-a3bd9da { max-width: 535px !important; } .page-id-216 .elementor-element-a3bd9da p { font-size: 12px; line-height: 21px; margin: 0; color: #000; } .page-id-216 .elementor-element-ac7c258 { width: 367px !important; max-width: 367px !important; flex-shrink: 0; } .page-id-216 .elementor-element-6480083 { width: 367px !important; max-width: 367px !important; } .page-id-216 .elementor-element-6480083 video { width: 367px; height: 653px; object-fit: cover; } /* Wyśrodkuj film TYLKO na smartfonach i tabletach w pionie (≤1024px). Na desktopie układ to tekst + film obok siebie (film po prawej). Poniżej 1025px układamy kolumny pionowo (tekst na górze) i centrujemy film w poziomie; max-width:100% zapobiega wychodzeniu poza ekran (film skaluje się z zachowaniem proporcji 9:16). Desktop / tablet poziomy (>1024px) bez zmian. */ @media (max-width: 1024px) { .page-id-216 .elementor-element-aa52827 > .e-con-inner { flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; } .page-id-216 .elementor-element-a3bd9da { max-width: 100% !important; width: 100%; } .page-id-216 .elementor-element-ac7c258 { width: 100% !important; max-width: 367px !important; margin-left: auto !important; margin-right: auto !important; } .page-id-216 .elementor-element-6480083 { max-width: 367px !important; margin-left: auto !important; margin-right: auto !important; } .page-id-216 .elementor-element-6480083 video { width: 100% !important; max-width: 367px !important; height: auto !important; aspect-ratio: 367 / 653; } } /* ---------- Bez okruszków i tytułów podstron (cały blok page-heading) ---------- */ .page-heading, .woocommerce-breadcrumb, .et-breadcrumbs { display: none !important; } /* ---------- Blog: listing jak na tarabuso.eu/blog ---------- Wix: 3 kolumny ~301px (blok ~958px), karta = sam obrazek (tytuł wtopiony w grafikę), pod nim cienka linia; bez chipów kategorii, tytułów i zajawek. (Liczników odsłon/serc Wixa nie odtwarzamy — brak takich danych w WP.) */ .blog .container.content-page { max-width: 1010px; } .blog .blog-post .post-categories, .blog .blog-post .grid-post-body { display: none !important; } .blog .blog-post > div { margin-bottom: 64px; } .blog .blog-post .wp-picture { margin-bottom: 0; } /* kadr okładek jak na Wix: 301x341 (nieco wyższe niż kwadrat), cover */ .blog .blog-post .wp-picture img { aspect-ratio: 301 / 341; object-fit: cover; width: 100%; height: auto; } .blog .blog-post .et-post-views { display: flex; align-items: center; gap: 7px; border-top: 1px solid #dcdcdc; margin-top: 44px; padding-top: 13px; font-size: 13px; color: #2b2b2b; font-family: "CenturyGothic", sans-serif; } /* fallback: gdyby licznik był niedostępny, sama linia jak dotąd */ .blog .blog-post > div:not(:has(.et-post-views))::after { content: ""; display: block; border-bottom: 1px solid #dcdcdc; margin-top: 44px; } /* ---------- Sklep: tytuł i opis nad produktami ---------- */ .et-shop-intro { text-align: center; max-width: 660px; margin: 4px auto 34px; } .et-shop-intro__title { font-size: 22px; font-weight: 400; letter-spacing: 1px; margin: 0 0 14px; } .et-shop-intro__description, .et-shop-intro__description p { font-size: 13px; line-height: 1.75; color: #444; margin-bottom: 0; } /* Sekcja 6 szybkich linków kategorii (Wszystkie/Naszyjniki/Łańcuszki/Bransoletki/ Kolczyki/Pierścionki) jak na Wix mobile — siatka 3×2 kafelków z ramką, wersaliki, TYLKO na smartfonach (na desktopie/tablecie jest sidebar z kategoriami). */ .et-shop-catnav { display: none; } @media (max-width: 767px) { .et-shop-catnav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 660px; margin: 6px auto 14px; } .et-shop-catnav a { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 36px; padding: 6px 4px; border: 1px solid #dcdcdc; color: #000; text-decoration: none; font-family: "CenturyGothic", sans-serif; font-size: 11px; letter-spacing: .5px; line-height: 1.15; text-transform: uppercase; } .et-shop-catnav a:hover, .et-shop-catnav a:focus { border-color: #000; } } /* Zdjęcie wyróżniające kategorii/tagu nad tytułem — jak na Wix, TYLKO na smartfonach. Kadrowane do proporcji jak w mobilnym Wix (≈280×383, object-fit: cover). */ .et-shop-hero { display: none; } @media (max-width: 767px) { .et-shop-hero { display: block; margin: 0 auto 16px; } .et-shop-hero__img { display: block; width: 100%; height: auto; aspect-ratio: 280 / 383; object-fit: cover; } } /* ---------- Sklep: pasek narzędzi — zostaje tylko "Sortuj" ---------- */ .woocommerce-shop .filter-content .open-filters-btn, .tax-product_cat .filter-content .open-filters-btn, .tax-product_tag .filter-content .open-filters-btn, .filter-content .view-switcher, .filter-content .products-per-page { display: none !important; } .filter-content form.woocommerce-ordering { margin-left: auto; } /* ---------- Sklep: bez kolorowych badge NOWE/GORĄCE/SALE ---------- */ .products .product .onsale { display: none !important; } /* ---------- Sklep: karta produktu jak na Wix ---------- */ .products .product .product-details.text-center { text-align: left; } .products .product .product-details .product-title { font-size: 14px; letter-spacing: .3px; } .products .product .product-details .price { font-size: 13px; color: #000; } .products .product .product-details .button { background: transparent; border: 1px solid #000; color: #000; border-radius: 0; box-shadow: none; /* jak na Wix: pełna szerokość karty, 40px, tekst 14px bez wersalików */ display: block; width: 100%; height: 40px; line-height: 38px; padding: 0; text-align: center; font-size: 14px; font-family: "CenturyGothic", sans-serif; text-transform: none; letter-spacing: normal; margin-top: 10px; } .products .product .product-details .button:hover { background: #1a1a1a; color: #fff; } /* na listingu sklepu przycisk pojawia się dopiero po najechaniu (na stronie głównej — sekcja bestsellerów — jest widoczny od razu, jak na Wix) */ @media (hover: hover) and (pointer: fine) { .woocommerce-shop .products .product .product-details .button, .tax-product_cat .products .product .product-details .button, .tax-product_tag .products .product .product-details .button { opacity: 0; transition: opacity .2s ease; } .woocommerce-shop .products .product:hover .product-details .button, .tax-product_cat .products .product:hover .product-details .button, .tax-product_tag .products .product:hover .product-details .button { opacity: 1; } } /* ---------- Strona główna: sekcja NAJCZĘŚCIEJ KUPOWANE ---------- Rezerwujemy stałą wysokość 2 linii na tytuł produktu, żeby cena i przycisk "Dodaj do koszyka" nie pływały, gdy tytuł ma 1 lub 2 linijki. (line-height 1.5 * 14px = 21px na linię → 42px na dwie linie) */ .home .products .product .product-details .product-title { line-height: 1.5; min-height: 3em; /* 2 linie */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ---------- Produkt wyprzedany: nieaktywny przycisk "Artykuł niedostępny" (styl wg Wix: szare tło, biały tekst, ramka 1px czarna) ---------- */ .products .product.outofstock .product-details .button, .et-unavailable, button.et-unavailable[disabled] { background: #808080 !important; color: #fff !important; border: 1px solid #000 !important; pointer-events: none; cursor: default; } /* ---------- Sklep: sidebar (KATEGORIE + filtry) ---------- */ .sidebar h4.wp-block-heading, .sidebar .widget-title { font-size: 12px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; } .et-kategorie-list { list-style: none; padding: 0; margin: 0 0 10px; } .et-kategorie-list li { margin: 0 0 12px; } .et-kategorie-list li a { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: #000; } .et-kategorie-list li a:hover { opacity: .6; } /* pokaż pełną listę kamieni (XStore domyślnie ukrywa pozycje powyżej 10) */ .sidebar .sidebar-widget ul:not(.children):not(.sub-menu) > li { display: list-item !important; } .sidebar .sidebar-widget ul { list-style: none; padding-left: 0; } .sidebar .woocommerce-widget-layered-nav-list li { margin-bottom: 8px; } /* wszystkie widgety sidebara sklepu: typografia jak w widgecie "Kategorie" */ .sidebar .sidebar-widget, .sidebar .sidebar-widget ul li, .sidebar .sidebar-widget ul li a, .sidebar .woocommerce-widget-layered-nav-list li a, .sidebar .woocommerce-widget-layered-nav-list li .count, .sidebar .price_slider_amount, .sidebar .price_slider_amount .button, .sidebar .sidebar-widget form label, .sidebar .sidebar-widget input { font-family: "CenturyGothic", sans-serif !important; font-size: 12px !important; letter-spacing: 1.5px; text-transform: uppercase; color: #000; } .sidebar .sidebar-widget ul li a:hover { opacity: .6; } .sidebar .et_widget-show-more { display: none !important; } /* ---------- Stopka: sekcja linków jak na Wix ---------- Oryginał: blok ~560px wycentrowany, 2 wiersze po 4 linki w jednej linii, Century Gothic 14px, czerń, pozioma linia 1px na całą szerokość bloku. */ .et-footer-links { max-width: 560px; margin: 0 auto; font-family: "CenturyGothic", sans-serif; } .et-footer-links__row { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; white-space: nowrap; padding: 0 0 16px; border-bottom: 1px solid #000; } .et-footer-links__row--second { padding: 16px 0 0; border-bottom: none; } .et-footer-links__row a { font-size: 14px; line-height: 1.88; color: #000; text-decoration: none; } .et-footer-links__row a:hover { opacity: .6; } @media (max-width: 640px) { .et-footer-links__row { flex-wrap: wrap; justify-content: center; white-space: normal; } } /* ============================================================ Strona produktu jak na tarabuso.eu (Wix) — pomiary CDP z /product-page/naszyjnik-z-nocą-kairu-i-zawieszką-krzyżyk ============================================================ */ /* tytuł: 16px/400 (Wix), zamiast wielkiego H1 motywu */ .single-product h1.product_title { font-family: "CenturyGothic", sans-serif; font-size: 16px !important; font-weight: 400 !important; line-height: 1.2; color: #000 !important; letter-spacing: 0; margin-bottom: 8px; } /* szerokość treści strony produktu jak na Wix (~890px, kolumny 56/44) — tylko wrappery szablonów single product, żeby nie zwężać stopki */ .elementor-2094 .elementor-section.elementor-section-boxed > .elementor-container, .elementor-2091 .elementor-section.elementor-section-boxed > .elementor-container, .elementor-1019 .elementor-section.elementor-section-boxed > .elementor-container, .elementor-3644 .elementor-section.elementor-section-boxed > .elementor-container, .elementor-2094 .e-con-boxed > .e-con-inner, .elementor-2091 .e-con-boxed > .e-con-inner, .elementor-1019 .e-con-boxed > .e-con-inner, .elementor-3644 .e-con-boxed > .e-con-inner { max-width: 890px; } .single-product .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-woocommerce-product-etheme_product_images) { width: 56%; } .single-product .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-woocommerce-product-etheme_title) { width: 44%; padding-left: 20px; } /* cena: 14px bold, czerń (Wix); dotyczy też ceny wariantu po wyborze opcji */ .single-product .elementor-widget-woocommerce-product-etheme_price .price, .single-product .elementor-widget-woocommerce-product-etheme_price .price .amount, .single-product .elementor-widget-woocommerce-product-etheme_price .price bdi, .single-product .woocommerce-variation-price .price, .single-product .woocommerce-variation-price .price bdi { font-family: "CenturyGothic", sans-serif; font-size: 14px !important; font-weight: 700 !important; color: #000 !important; } /* galeria: pionowy slider miniatur (slick) nie przycinał taśmy — przy >4 zdjęciach miniatury wychodziły poza galerię i nachodziły na notkę o marce (np. komplety); okno slidera ma liczoną wysokość 4 kafli, strzałki przewijają pozostałe */ .single-product .vertical-thumbnails-wrapper .slick-list { overflow: hidden; } /* wszystkie ceny na stronie produktu zawsze pogrubione (cena główna, karty MOGĄ CI SIĘ SPODOBAĆ / NAJCZĘŚCIEJ KUPOWANE, cena wariantu) */ .single-product .price, .single-product .price .amount, .single-product .price bdi { font-weight: 700 !important; } /* krótki opis (nadmiarowy względem Wix — zostaje): typografia jak treść Wix */ .single-product .woocommerce-product-details__short-description, .single-product .woocommerce-product-details__short-description p { font-size: 12px; line-height: 18px; color: #000; } /* warianty: etykieta nad selectem, select na całą szerokość kolumny (Wix: 355x39, ramka 1px rgba(0,0,0,.6), tekst 12px #444) */ .single-product table.variations, .single-product table.variations tbody, .single-product table.variations tr, .single-product table.variations th.label, .single-product table.variations td.value { display: block; width: 100%; padding: 0; border: 0; text-align: left; } .single-product table.variations tr { margin: 0 0 15px; } .single-product table.variations th.label label { display: block; font-family: "CenturyGothic", sans-serif; font-size: 12px; font-weight: 400; color: #000; margin: 0 0 8px; } /* Wix: "Długość naszyjnika *" — wielka litera i gwiazdka wymagalności */ .single-product table.variations th.label label::first-letter { text-transform: uppercase; } .single-product table.variations th.label label::after { content: " *"; } .single-product table.variations td.value select { display: block; width: 100%; max-width: 100%; height: 39px; border: 1px solid rgba(0, 0, 0, .6); border-radius: 0; background-color: #fff; font-family: "CenturyGothic", sans-serif; font-size: 12px; color: #444; padding: 0 32px 0 12px; } .single-product table.variations .reset_variations { font-size: 11px; color: #444; } /* bez zdublowanej ceny wariantu i tekstu "2 w magazynie" nad przyciskami (Wix ich nie pokazuje); przycisk "Artykuł niedostępny" (et-unavailable) dla wyprzedanych wariantów pozostaje widoczny */ .single-product form.cart .woocommerce-variation-price, .single-product form.cart p.stock.in-stock { display: none !important; } /* przycisk "Dodaj do koszyka": biały z czarną ramką (Wix 309x38, tekst 12px) */ .single-product form.cart .single_add_to_cart_button { background: transparent !important; color: #000 !important; border: 1px solid #000 !important; border-radius: 0 !important; box-shadow: none !important; height: 38px; line-height: 36px; padding: 0 24px; font-family: "CenturyGothic", sans-serif; font-size: 12px !important; font-weight: 400; letter-spacing: .5px; text-transform: uppercase; flex-grow: 1; } .single-product form.cart .single_add_to_cart_button:hover { background: #1a1a1a !important; color: #fff !important; } /* bez ikony koszyka w przycisku (Wix: sam napis) */ .single-product form.cart .single_add_to_cart_button svg, .single-product form.cart .single_add_to_cart_button i { display: none !important; } /* serduszko wishlist jak na Wix: kwadrat 38x38 z ramką 1px na prawo od "DODAJ DO KOSZYKA" (element przenoszony JS-em z widgetu etheme_wishlist); wiersz przycisków jako flex, żeby kwadrat stanął obok, a KUP TERAZ (flex 0 0 100%) złamał się do nowej linii */ .single-product form.cart .woocommerce-variation-add-to-cart, .single-product form.cart:not(.variations_form) { display: flex; flex-wrap: wrap; align-items: center; } .single-product form.cart .tara-wishlist-square { flex: 0 0 38px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 38px !important; min-width: 38px !important; max-width: 38px; height: 38px; padding: 0 !important; margin-left: 8px; border: 1px solid #000 !important; border-radius: 0; background: #fff !important; position: relative; text-decoration: none; } /* widget źródłowy schowany od razu w CSS (JS przenosi z niego samo serce; bez tego przed startem JS na moment widać link z napisem) */ .single-product .elementor-widget-woocommerce-product-etheme_wishlist { display: none !important; } .single-product form.cart .tara-wishlist-square .et-icon { font-size: 17px; color: #000; line-height: 1; } .single-product form.cart .tara-wishlist-square:hover { background: #f5f5f5; } /* napis NIGDY nie renderuje się inline obok serca (style .elementor-button drukowane w body po child CSS — stąd !important); widoczny wyłącznie jako dymek na hover (treść span aktualizuje motyw: "Dodaj do listy zakupowej" / "Usuń z listy zakupowej") */ .single-product form.cart .tara-wishlist-square .button-text { position: absolute !important; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%); background: #444 !important; color: #fff !important; font-family: "CenturyGothic", sans-serif; font-size: 11px !important; line-height: 1; letter-spacing: .3px; padding: 6px 10px; white-space: nowrap; opacity: 0 !important; visibility: hidden; transition: opacity .15s ease; pointer-events: none; z-index: 20; } .single-product form.cart .tara-wishlist-square .button-text::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -4px; border: 4px solid transparent; border-top-color: #444; } .single-product form.cart .tara-wishlist-square:hover .button-text { opacity: 1 !important; visibility: visible; } /* czarny "KUP TERAZ" pod spodem, na całą szerokość (Wix 355x41) */ .single-product form.cart .tara-buy-now { flex: 0 0 100%; display: block; width: 100%; height: 41px; margin-top: 10px; background: #000 !important; color: #fff !important; border: 1px solid #000 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "CenturyGothic", sans-serif; font-size: 12px !important; font-weight: 400; letter-spacing: .5px; text-transform: uppercase; } .single-product form.cart .tara-buy-now:hover { background: #333 !important; } /* (celowo bez wygaszania przy niewybranym wariancie — na Wix przycisk od początku jest czarny; klik bez opcji pokaże standardowy komunikat Woo) */ /* ---- TYLKO SMARTFONY: układ zakupu w wąskiej kolumnie ---- Poniżej 768px: - usuwamy wybór ilości sztuk; - kolumna ze zdjęciem węższa o 10% (56%→46%), kolumna z tekstem szersza (44%→54%); - „DODAJ DO KOSZYKA" (kurczy się, flex:1 1 0) + serduszko OD RAZU po prawej (margin 0), razem wypełniają 100% szerokości kolumny — tyle samo co „KUP TERAZ" pod spodem. */ @media (max-width: 767px) { .single-product .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-woocommerce-product-etheme_product_images) { width: 46% !important; } .single-product .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-woocommerce-product-etheme_title) { width: 54% !important; padding-left: 10px !important; } .single-product form.cart .quantity { display: none !important; } .single-product form.cart:not(.variations_form), .single-product form.cart .woocommerce-variation-add-to-cart { column-gap: 3px !important; /* 3px odstępu między przyciskiem a serduszkiem */ } .single-product form.cart .single_add_to_cart_button { flex: 1 1 0 !important; /* wypełnia miejsce obok serduszka */ min-width: 0 !important; margin: 0 !important; padding-left: 8px !important; padding-right: 8px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .single-product form.cart .tara-wishlist-square { margin: 0 !important; /* od razu po prawej, bez odstępu → suma = szerokość KUP TERAZ */ } } /* wyprzedany wariant: przycisk "Artykuł niedostępny" ZASTĘPUJE "KUP TERAZ" — blok dostępności przeniesiony flexem pod wiersz przycisków, KUP TERAZ ukryty (Woo znakuje stan klasą wc-variation-is-unavailable) */ .single-product form.cart .single_variation_wrap { display: flex; flex-direction: column; } .single-product form.cart .single_variation_wrap .woocommerce-variation { order: 2; } .single-product form.cart:has(.wc-variation-is-unavailable) .tara-buy-now { display: none; } .single-product form.cart .woocommerce-variation-availability .et-unavailable { display: block; width: 100%; height: 41px; margin-top: 10px; padding: 0; border-radius: 0; font-family: "CenturyGothic", sans-serif; font-size: 12px !important; font-weight: 400; letter-spacing: .5px; text-transform: uppercase; } /* pasek zakładek produktu: po filtrze zostaje tylko "Opinie" — stylizacja na zwinięty akordeon (nagłówek 12px bold z +/− po prawej, panel widoczny dopiero po kliknięciu; klasę tara-open przełącza JS) */ .single-product .woocommerce-tabs .wc-tabs { display: block; margin: 0; text-align: left; border: 0; } .single-product .woocommerce-tabs .wc-tabs .et-woocommerce-tab { display: flex; justify-content: space-between; align-items: center; width: 100%; margin: 0; padding: 16px 0; cursor: pointer; /* !important: motyw koloruje spód aktywnej zakładki na różowo */ border-bottom: 1px solid #cfcfcf !important; box-shadow: none !important; } /* różowy pasek aktywnej zakładki motywu to ::before na .et-woocommerce-tab */ .single-product .woocommerce-tabs .wc-tabs .et-woocommerce-tab::before { display: none !important; } .single-product .woocommerce-tabs .wc-tabs .et-woocommerce-tab::after { content: "+"; font-family: "CenturyGothic", sans-serif; font-size: 17px; font-weight: 400; line-height: 1; color: #000; } .single-product .woocommerce-tabs.tara-open .wc-tabs .et-woocommerce-tab::after { content: "−"; } .single-product .woocommerce-tabs .wc-tabs .et-woocommerce-tab a { font-family: "CenturyGothic", sans-serif; font-size: 12px !important; font-weight: 700; color: #000 !important; text-transform: none; letter-spacing: 0; padding: 0 !important; margin: 0; border: 0 !important; } /* bez podkreślenia aktywnej zakładki motywu (type-underline) */ .single-product .woocommerce-tabs .wc-tabs .et-woocommerce-tab a::before, .single-product .woocommerce-tabs .wc-tabs .et-woocommerce-tab a::after { display: none !important; } .single-product .woocommerce-tabs .woocommerce-Tabs-panel { display: none !important; } .single-product .woocommerce-tabs.tara-open .woocommerce-Tabs-panel { display: block !important; padding-top: 12px; } /* typografia panelu recenzji jak w akordeonach (Regulacja itd.): 12px/18px */ .single-product .woocommerce-tabs .woocommerce-Tabs-panel--reviews, .single-product .woocommerce-tabs .woocommerce-Tabs-panel--reviews p, .single-product .woocommerce-tabs .woocommerce-Tabs-panel--reviews label, .single-product .woocommerce-tabs .woocommerce-Tabs-panel--reviews span, .single-product .woocommerce-tabs .woocommerce-Tabs-panel--reviews a, .single-product .woocommerce-tabs .woocommerce-Tabs-panel--reviews .comment-text, .single-product .woocommerce-tabs .woocommerce-Tabs-panel--reviews .woocommerce-noreviews, .single-product .woocommerce-tabs .woocommerce-Tabs-panel--reviews .comment-reply-title, .single-product .woocommerce-tabs .woocommerce-Tabs-panel--reviews h2, .single-product .woocommerce-tabs .woocommerce-Tabs-panel--reviews h3, .single-product .woocommerce-tabs .woocommerce-Tabs-panel--reviews input, .single-product .woocommerce-tabs .woocommerce-Tabs-panel--reviews textarea, .single-product .woocommerce-tabs .woocommerce-Tabs-panel--reviews button { font-family: "CenturyGothic", sans-serif; font-size: 12px !important; line-height: 18px; color: #000; } /* gwiazdki oceny: tylko ikony — tekst "1 z 5 gwiazdek" ukryty (font-size 0; ikonę rysuje ::before fontem xstore-icons, przywracamy jej rozmiar) */ .single-product .woocommerce-tabs .woocommerce-Tabs-panel--reviews .stars a { font-size: 0 !important; } .single-product .woocommerce-tabs .woocommerce-Tabs-panel--reviews .stars a::before { font-size: 14px !important; } /* przycisk "Wyślij" jak "Dodaj do koszyka": biały z czarną ramką */ .single-product .woocommerce-tabs .woocommerce-Tabs-panel--reviews input.submit, .single-product .woocommerce-tabs .woocommerce-Tabs-panel--reviews #submit { background: #fff !important; color: #000 !important; border: 1px solid #000 !important; border-radius: 0 !important; box-shadow: none !important; height: 38px; padding: 0 24px; font-family: "CenturyGothic", sans-serif; font-size: 12px !important; letter-spacing: .5px; text-transform: uppercase; } .single-product .woocommerce-tabs .woocommerce-Tabs-panel--reviews input.submit:hover, .single-product .woocommerce-tabs .woocommerce-Tabs-panel--reviews #submit:hover { background: #1a1a1a !important; color: #fff !important; } /* akordeony w prawej kolumnie (Wix: nagłówki 12px bold, treść 12px/18px, linie 1px między pozycjami, +/− po prawej) */ .tara-product-info { font-family: "CenturyGothic", sans-serif; margin-top: 34px; } .tara-product-info details + details { border-top: 1px solid #cfcfcf; } .tara-product-info summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 700; color: #000; padding: 16px 0; } .tara-product-info summary::-webkit-details-marker { display: none; } .tara-product-info summary::after { content: "+"; font-size: 17px; font-weight: 400; line-height: 1; } .tara-product-info details[open] > summary::after { content: "−"; } .tara-product-info__content { padding: 2px 0 18px; } .tara-product-info__content p { font-size: 12px; line-height: 18px; color: #000; margin: 0 0 18px; } .tara-product-info__content p:last-child { margin-bottom: 0; } .tara-product-info__content ul { list-style: none; padding: 0; margin: 0 0 18px; } .tara-product-info__content ul li p { margin: 0; } /* linki w treści akordeonów (np. kategorie/tagi) — czarne jak reszta treści */ .tara-product-info__content a { color: #000; } .tara-product-info__content a:hover { opacity: .6; } /* bez SKU na stronie produktu (sekcja Share usunięta z szablonów) */ .single-product .product_meta .sku_wrapper { display: none !important; } /* ---------- Nagłówek: dropdowny listy życzeń i koszyka ---------- przyciski "Dodaj wszystko do koszyka" i "Zamówienie" (motyw: różowe rgb(164,0,79)) na czarno */ .et_b_header-wishlist .button.btn-checkout, .et_b_header-cart .button.btn-checkout { background: #000 !important; border-color: #000 !important; color: #fff !important; } .et_b_header-wishlist .button.btn-checkout:hover, .et_b_header-cart .button.btn-checkout:hover { background: #333 !important; border-color: #333 !important; color: #fff !important; } /* bez linku "Shopping cart (x)" (nieprzetłumaczony napis w stopce dropdownu koszyka; do kasy prowadzi przycisk "Zamówienie") */ .et_b_header-cart .cart-popup-footer .btn-view-cart { display: none !important; } /* ---------- Komunikaty WooCommerce (np. "dodano do koszyka"): ciemnoszare tło, biały tekst ---------- */ .woocommerce-message { background: #444 !important; border-color: #444 !important; color: #fff !important; } .woocommerce-message::before, .woocommerce-message .et-icon { color: #fff !important; } .woocommerce-message a, .woocommerce-message a.button, .woocommerce-message .button { color: #fff !important; } /* notka o marce pod zdjęciem (Wix: 10px/15px, szer. 500px) */ .tara-brand-note, .tara-brand-note p { font-family: "CenturyGothic", sans-serif; font-size: 10px !important; line-height: 15px; color: #000; margin: 0; } .tara-brand-note { max-width: 500px; margin-top: 12px; } /* akapity z gwiazdką pod kolumnami (Wix: 11px, ls .55px, blok ~917px) */ .tara-disclaimer, .tara-disclaimer p { font-family: "CenturyGothic", sans-serif; font-size: 11px !important; letter-spacing: .55px; line-height: 1.5; color: #000; } .tara-disclaimer p { margin: 0 0 16px; } .tara-disclaimer p:last-child { margin-bottom: 0; } .tara-disclaimer a { color: #000; text-decoration: underline; } /* sekcja USP (SZYBKA DOSTAWA / BEZPŁATNA DOSTAWA / BEZPIECZNE PŁATNOŚCI) 1:1 wg pomiaru CDP tarabuso.eu: nagłówki 14px/400 (bez bold) lh 19.3 wycentrowane; treść 10px ls .5px lh 18.8, blok ~200px; odstęp nagłówek→ tekst 33px; pionowe linie 1px #424242 od 37px nad nagłówkami do dołu najwyższej kolumny (kolumny flex wyrównują wysokość jak na Wix) */ .tara-usp > .e-con-inner > .e-con { padding: 37px 20px 0; gap: 0; } .tara-usp > .e-con-inner > .e-con + .e-con { border-left: 1px solid #424242; } /* wewnętrzne kontenery (nagłówek / tekst) bez własnych odstępów; widget nagłówka ma w ustawieniach _margin 30px — zerujemy */ .tara-usp > .e-con-inner > .e-con > .e-con { padding: 0; gap: 0; } .tara-usp .elementor-widget-text-editor { margin: 0 !important; } .tara-usp .elementor-widget-text-editor p { margin: 0; text-align: center; } /* nagłówek kolumny (pierwszy kontener) — 14px, pogrubiony jak na Wix */ .tara-usp > .e-con-inner > .e-con > .e-con:first-child p, .tara-usp > .e-con-inner > .e-con > .e-con:first-child strong { font-family: "CenturyGothic", sans-serif; font-size: 14px !important; font-weight: 700; line-height: 19.3px; letter-spacing: 0; color: #000; } /* treść kolumny (drugi kontener) — 33px pod nagłówkiem, 10px, wąski blok */ .tara-usp > .e-con-inner > .e-con > .e-con:last-child { margin-top: 33px; } .tara-usp > .e-con-inner > .e-con > .e-con:last-child p { font-family: "CenturyGothic", sans-serif; font-size: 10px !important; letter-spacing: .5px; line-height: 18.8px; color: #000; max-width: 205px; margin: 0 auto; } /* nagłówki sekcji produktowych na dole (Wix: 18px/400, wycentrowane) */ .single-product .products-title.related-products-title, .single-product .products-title.related-products-title span, .tara-bestsellers-heading { font-family: "CenturyGothic", sans-serif; font-size: 18px !important; font-weight: 400 !important; color: #000; text-align: center; letter-spacing: 0; text-transform: none; } .tara-bestsellers-heading { margin: 20px 0 25px; } /* karty produktów w karuzeli "MOGĄ CI SIĘ SPODOBAĆ" — jak karty listingu (karuzela nie leży w .products, więc powtarzamy reguły) */ .single-product .content-product .onsale { display: none !important; } .single-product .content-product .product-details { text-align: left; } .single-product .content-product .product-details .product-title { font-size: 14px; letter-spacing: .3px; /* stała wysokość = 2 linie (lh 21px): przycisk "Dodaj do koszyka" ma zawsze ten sam odstęp od zdjęcia, niezależnie od długości tytułu (dotyczy karuzeli MOGĄ CI SIĘ SPODOBAĆ i siatki NAJCZĘŚCIEJ KUPOWANE) */ min-height: 42px; } .single-product .content-product .product-details .price { font-size: 13px; color: #000; } .single-product .content-product .product-details .button { background: transparent; border: 1px solid #000; color: #000; border-radius: 0; box-shadow: none; display: block; width: 100%; height: 40px; line-height: 38px; padding: 0; text-align: center; font-size: 14px; font-family: "CenturyGothic", sans-serif; text-transform: none; letter-spacing: normal; margin-top: 10px; } .single-product .content-product .product-details .button:hover { background: #1a1a1a; color: #fff; } /* ---------- Koszyk (pusty): sekcja "Nowe w sklepie" jak NAJCZĘŚCIEJ KUPOWANE ---------- Sekcja to blok WooCommerce Blocks (wc-block-grid / product-new) z zupełnie inną strukturą HTML niż klasyczna siatka XStore na stronie głównej. Odwzorowujemy wygląd karty bestsellerów (styl Wix): tekst do lewej, tytuł 14px na 2 linie, cena 13px, przycisk biały z czarną ramką na całą szerokość, a nagłówek CenturyGothic 18px wersalikami (jak referencja). */ /* nagłówek "Nowe w sklepie" (drugi h2 w bloku pustego koszyka — nie "Twój koszyk jest pusty"): jak heading NAJCZĘŚCIEJ KUPOWANE */ .woocommerce-cart .wp-block-woocommerce-empty-cart-block h2.wp-block-heading:not(.wc-block-cart__empty-cart__title) { font-family: "CenturyGothic", sans-serif; font-size: 18px; font-weight: 400; letter-spacing: 0; color: #000; text-transform: uppercase; text-align: center; margin: 50px 0 25px; } /* karta produktu: wyrównanie do lewej (jak .product-details.text-center → left) */ .woocommerce-cart .wc-block-product-new .wc-block-grid__product { text-align: left; } /* tytuł: 14px, ciemny, stała wysokość 2 linii (jak .home .product-title) */ .woocommerce-cart .wc-block-product-new .wc-block-grid__product-title { font-size: 14px; letter-spacing: .3px; color: #000; line-height: 1.5; min-height: 3em; /* 2 linie */ margin: 12px 0 6px; text-align: left; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* cena: 13px, czarna, do lewej */ .woocommerce-cart .wc-block-product-new .wc-block-grid__product-price, .woocommerce-cart .wc-block-product-new .wc-block-grid__product-price .amount { font-size: 13px; font-weight: 400; color: #000; text-align: left; justify-content: flex-start; } /* przycisk "Dodaj do koszyka": biały z czarną ramką, pełna szerokość, 40px, prostokątny, CenturyGothic bez wersalików — jak na stronie głównej */ .woocommerce-cart .wc-block-product-new .wp-block-button.wc-block-grid__product-add-to-cart { display: block; width: 100%; margin-top: 10px; text-align: left; } .woocommerce-cart .wc-block-product-new .wc-block-grid__product-add-to-cart .wp-block-button__link { display: block; width: 100%; height: 40px; line-height: 38px; padding: 0; background: transparent; border: 1px solid #000; color: #000; border-radius: 0; box-shadow: none; text-align: center; font-size: 14px; font-family: "CenturyGothic", sans-serif; font-weight: 400; text-transform: none; letter-spacing: normal; } .woocommerce-cart .wc-block-product-new .wc-block-grid__product-add-to-cart .wp-block-button__link:hover { background: #1a1a1a; color: #fff; border-color: #1a1a1a; } /* Tytuł, cena i przycisk nie mogą być szersze niż zdjęcie produktu. Zdjęcie renderuje się w naturalnej szerokości miniatury (woocommerce_thumbnail = 300px), wyrównane do lewej, a kolumna bloku jest szersza — więc ograniczamy pozostałe elementy do szerokości zdjęcia, żeby kończyły się w tej samej linii. */ .woocommerce-cart .wc-block-product-new .wc-block-grid__product-title, .woocommerce-cart .wc-block-product-new .wc-block-grid__product-price, .woocommerce-cart .wc-block-product-new .wp-block-button.wc-block-grid__product-add-to-cart { max-width: 300px; /* = szerokość miniatury produktu */ margin-left: 0; /* wyrównanie do lewej (pod zdjęciem, nie wyśrodkowane) */ margin-right: auto; } /* ---------- Lista życzeń (/moje-konto/?et-wishlist-page): typografia jak na stronie głównej ---------- Krój już jest ten sam (CenturyGothic wszędzie), różniła się wielkość: motyw dawał tytuł ~16px i cenę 14px/#555, a na stronie głównej karta ma tytuł 14px/#222 i cenę 13px/#000. Wyrównujemy do wartości ze strony głównej. */ .xstore-wishlist-table .xstore-wishlist-product .product-title { font-size: 14px; letter-spacing: .3px; color: #222; } .xstore-wishlist-table .xstore-wishlist-price .price, .xstore-wishlist-table .xstore-wishlist-price .price .amount, .xstore-wishlist-table .xstore-wishlist-price .price bdi { font-size: 13px; color: #000; } /* usunięcie sekcji "SKU: ..." z kolumny PRODUKT */ .xstore-wishlist-table .xstore-wishlist-product .product_meta { display: none; } /* ================================================================== KARUZELA sekcji produktowych (.tara-carousel) Sekcje: home NAJCZĘŚCIEJ KUPOWANE, koszyk NOWE W SKLEPIE, produkt NAJCZĘŚCIEJ KUPOWANE — shortcode WooCommerce z class="tara-carousel". Pływająca siatka XStore (.products-grid, float) -> jednorzędowy track flex, przewijany o pełną stronę strzałkami na obrzeżach. JS: tara-carousel.js ================================================================== */ .tara-carousel { position: relative; } .tara-carousel__viewport { overflow: hidden; } .tara-carousel .products.products-grid { display: flex !important; flex-wrap: nowrap !important; margin: 0; transition: transform .45s cubic-bezier(.4, 0, .2, 1); will-change: transform; } /* usuń clearfix pływającej siatki (niepotrzebny przy flex, psułby szerokość) */ .tara-carousel .products.products-grid::before, .tara-carousel .products.products-grid::after { content: none !important; display: none !important; } .tara-carousel .products.products-grid > .product { float: none !important; flex-grow: 0 !important; flex-shrink: 0 !important; } /* liczba widocznych kart = kolumny sekcji (4 lub 3), reszta poza viewportem */ .tara-carousel .products.row-count-4 > .product { flex-basis: 25%; max-width: 25%; } .tara-carousel .products.row-count-3 > .product { flex-basis: 33.3333%; max-width: 33.3333%; } @media (max-width: 1024px) { .tara-carousel .products.products-grid > .product { flex-basis: 50% !important; max-width: 50% !important; } } @media (max-width: 600px) { .tara-carousel .products.products-grid > .product { flex-basis: 100% !important; max-width: 100% !important; } } /* strzałki nawigacji na obrzeżach sekcji (widoczne tylko gdy jest co przewijać). Wygląd 1:1 jak przyciski swipera „MOGĄ CI SIĘ SPODOBAĆ" (widget etheme_related, klasa swiper .type-arrow.style-4): białe kółko 50px, bez ramki, miękki cień, cienka szara pałeczka-chevron (#888). Pomiary z getComputedStyle na .swiper-button-next: 50×50, bg #fff, border 0, radius 50%, kolor #888, box-shadow 0 13px 17px rgba(0,0,0,.1). */ .tara-carousel .tara-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 13px 17px rgba(0, 0, 0, .1); cursor: pointer; z-index: 6; display: none; align-items: center; justify-content: center; transition: box-shadow .2s ease; } .tara-carousel.tara-has-nav .tara-nav { display: flex; } .tara-carousel .tara-nav:hover { box-shadow: 0 16px 22px rgba(0, 0, 0, .17); } .tara-carousel .tara-nav span { display: block; width: 12px; height: 12px; border-right: 1.6px solid #888; border-bottom: 1.6px solid #888; transition: border-color .2s ease; } .tara-carousel .tara-nav:hover span { border-color: #222; } .tara-carousel .tara-nav--prev { left: 8px; } .tara-carousel .tara-nav--prev span { transform: rotate(135deg); margin-left: 4px; } .tara-carousel .tara-nav--next { right: 8px; } .tara-carousel .tara-nav--next span { transform: rotate(-45deg); margin-right: 4px; } /* równa wysokość 2 linii tytułu także w karuzelach koszyka/produktu (dotąd tylko .home) — żeby przyciski nie pływały */ .tara-carousel .products .product .product-details .product-title { line-height: 1.5; min-height: 3em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ---------- rotacja zdjęć na karcie: małe strzałki na obrazku ---------- */ .images-slider-wrapper { position: relative; } .tara-img-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .85); border: 1px solid rgba(0, 0, 0, .45); cursor: pointer; z-index: 4; opacity: 0; display: flex; align-items: center; justify-content: center; transition: opacity .2s ease, background .2s ease; } .product-image-wrapper:hover .tara-img-arrow, .content-product:hover .tara-img-arrow { opacity: 1; } .tara-img-arrow:hover { background: #fff; } .tara-img-arrow::before { content: ""; display: block; width: 7px; height: 7px; border-right: 2px solid #222; border-bottom: 2px solid #222; } .tara-img-prev { left: 8px; } .tara-img-prev::before { transform: rotate(135deg); margin-left: 2px; } .tara-img-next { right: 8px; } .tara-img-next::before { transform: rotate(-45deg); margin-right: 2px; } /* ================================================================== Okno "SZYBKI PODGLĄD" (quick view, .quick-view-layout-default) ================================================================== */ /* --- typografia jak na stronie głównej (rodzina już CenturyGothic; korygujemy rozmiary: tytuł 24→18, cena 19.6px/#888 → #000, opis 16→14) --- */ .quick-view-layout-default .product-name, .quick-view-layout-default .product-name a { font-size: 18px; font-weight: 400; color: #222; letter-spacing: normal; } .quick-view-layout-default .price, .quick-view-layout-default .price .amount, .quick-view-layout-default .price bdi { font-size: 15px; font-weight: 400; color: #000; } .quick-view-layout-default .woocommerce-product-details__short-description, .quick-view-layout-default .woocommerce-product-details__short-description p { font-size: 14px; color: #555; } /* --- pierwszy "KUP TERAZ" (.et-single-buy-now, motyw = zielony #339438): biały z czarną ramką i czarną czcionką (nadpisujemy !important motywu) --- */ .quick-view-layout-default .et-single-buy-now.single_add_to_cart_button.button { background: #fff !important; color: #000 !important; border: 1px solid #000 !important; border-style: solid !important; } .quick-view-layout-default .et-single-buy-now.single_add_to_cart_button.button:hover, .quick-view-layout-default .et-single-buy-now.single_add_to_cart_button.button:focus, .quick-view-layout-default .et-single-buy-now.single_add_to_cart_button.button:hover:focus { background: #1a1a1a !important; color: #fff !important; border-color: #1a1a1a !important; } /* --- drugi "KUP TERAZ" (.tara-buy-now) — ukryty (zostawiamy tylko pierwszy) --- */ .quick-view-layout-default .tara-buy-now { display: none !important; } /* --- wishlist (serduszko) + compare jako SAME IKONY obok "DODAJ DO KOSZYKA" (JS przenosi linki do .tara-qv-icons; napisy chowamy) --- */ .quick-view-layout-default .tara-qv-icons { display: inline-flex; gap: 8px; align-self: center; /* nie rozciągaj do wysokości rzędu */ align-items: center; /* rząd ma align-items:center, a przycisk "Dodaj do koszyka" ma margin-bottom:10px — bez tego samego marginesu ikony (jako niższe pudełko marginesu) centrują się ~5px niżej. Wyrównujemy pudełka. */ margin-bottom: 10px; } .quick-view-layout-default .tara-qv-icon { /* domyślnie kwadrat ~ wysokości przycisku "Dodaj do koszyka" (~38px); JS w initQuickView ustawia dokładną wysokość = wysokość przycisku */ width: 38px; height: 38px; min-width: 38px; flex: 0 0 auto; box-sizing: border-box; border: 1px solid #000; border-radius: 0; background: #fff; color: #000; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0; line-height: 1; transition: background .2s ease, color .2s ease; } .quick-view-layout-default .tara-qv-icon:hover { background: #1a1a1a; color: #fff; } .quick-view-layout-default .tara-qv-icon .et-icon { font-size: 18px; margin: 0; color: inherit; } .quick-view-layout-default .tara-qv-icon .button-text, .quick-view-layout-default .tara-qv-icon .et-element-label { display: none !important; } /* puste kontenery po przeniesieniu linków */ .quick-view-layout-default .single-wishlist, .quick-view-layout-default .single-compare { display: none !important; } /* ========================================================================== Wyniki wyszukiwania /search jak na tarabuso.eu (Wix) Klasa .tara-search dokładana do na endpoincie /search (plugin tarabuso-search + hak body_class w functions.php): mały nagłówek do lewej, szeroki pasek wyszukiwania pod nim, sortowanie po prawej, gęsta siatka 5 kolumn z tekstowym linkiem „Do koszyka" — bez sidebara i filtrów. ========================================================================== */ /* bez filtrów i sidebara — na Wix ich nie ma */ .tara-search .shop-filters-area, .tara-search .sidebar, .tara-search .filter-content .open-filters-btn, .tara-search .filter-content .view-switcher, .tara-search .filter-content .products-per-page { display: none !important; } /* pełna szerokość obszaru wyników (bez pustej kolumny po sidebarze) */ .tara-search .content-page, .tara-search .row.products { width: 100% !important; } .tara-search .content.main-products-loop { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; } /* licznik motywu / intro sklepu chowamy — mamy własną głowę */ .tara-search .products-title, .tara-search .et-shop-intro { display: none !important; } /* --- głowa: mały nagłówek do lewej + szeroki pasek wyszukiwania pod nim --- */ .tara-search-head { margin: 0 0 22px; } .tara-search-title { font-family: "CenturyGothic", sans-serif; text-align: left; text-transform: none; font-size: 15px; font-weight: 400; letter-spacing: .3px; color: #000; margin: 0 0 14px; } .tara-search-bar { position: relative; display: flex; align-items: center; width: 100%; background: #fff; border: 1px solid #d9d9d9; } .tara-search-bar__icon { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 0 6px 0 16px; color: #111; } .tara-search-bar input[type="search"] { flex: 1 1 auto; min-width: 0; height: 52px; border: 0; outline: 0; background: transparent; padding: 0 8px; font-family: "CenturyGothic", sans-serif; font-size: 15px; color: #111; } .tara-search-bar input[type="search"]::placeholder { color: #8a8a8a; } .tara-search-bar__submit { flex: 0 0 auto; height: 52px; display: flex; align-items: center; padding: 0 16px; border: 0; background: transparent; color: #111; cursor: pointer; } /* hover: czarne tło (a nie różowy akcent motywu), biała ikona */ .tara-search-bar__submit:hover, .tara-search-bar__submit:focus { background: #000 !important; color: #fff !important; opacity: 1; } /* --- pasek sortowania w stylu Wix: etykieta „Sortuj według:" + select bez ramki. Klasa `.tara-sort-wix` jest na zarówno na /search, jak i na /sklep/ (patrz body_class w functions.php), więc styl jest identyczny w obu miejscach. --- */ .tara-sort-wix .filter-content { justify-content: flex-end; } .tara-sort-wix .filter-content form.woocommerce-ordering { margin-left: auto; display: inline-flex; align-items: center; } .tara-sort-wix form.woocommerce-ordering::before { content: "Sortuj"; font-family: "CenturyGothic", sans-serif; font-size: 14px; color: #000; margin-right: 6px; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; } /* select sortowania identycznie jak na Wix: bez ramki i tła, czarny tekst podkreślony, cienki szary chevron obok (natywny