/* Theme Name: ShopWell Child Theme URI: https://example.com/shopwell-child Description: Child theme for ShopWell Author: Your Name Author URI: https://example.com Template: shopwell Version: 1.0.0 Text Domain: shopwell-child */ /* Tutaj możesz dodawać swoje style CSS — na przykład: */ /* ==== Przyciski Sztuka / Karton === */ /* === POPRAWKI DLA WCBOOST VARIATION SWATCHES - Czarno-biała + prawidłowy stan przycisku Dodaj do koszyka === */ /* 1. Nagłówek atrybutu */ .wcboost-variation-swatches__label, /* ← Selektor dla etykiety wtyczki WCBoost */ .woocommerce-variation-label, /* ← Selektor WooCommerce dla etykiety wariantu */ label[for*="attribute_pa_"], /* ← Selektor dla labeli atrybutów zaczynających się od attribute_pa_ */ form.cart .label, /* ← Selektor dla labeli wewnątrz formularza koszyka */ form.cart > label { /* ← Selektor dla bezpośrednich labeli w formularzu koszyka */ font-size: 1.2em !important; /* ← Rozmiar czcionki nagłówka (1.3em = większy niż standardowy) */ font-weight: 500 !important; /* ← Pogrubienie tekstu 700 (bold) */ color: #000 !important; /* ← Kolor tekstu – czarny */ margin-bottom: 25px !important; /* ← Duży odstęp dolny pod nagłówkiem (żeby nie przyklejał się do przycisków) */ display: block; /* ← Wyświetlenie jako blok (pełna szerokość) */ text-transform: none; /* ← Zmieniłen na normalne (none) Wszystkie litery wielkie (uppercase) */ letter-spacing: 0.8px; /* ← Lekko zwiększony odstęp między literami */ border-bottom: 1px solid #000 !important; /* ← Czarna linia pod nagłówkiem (grubość 2px) */ padding-bottom: 10px; /* ← Odstęp między tekstem a linią dolną */ } .wcboost-variation-swatches .wcboost-variation-swatches__items { /* ← Selektor kontenera z przyciskami swatches */ margin-top: 10px !important; /* ← Dodatkowy odstęp górny nad przyciskami (bezpiecznik) */ } /* 2. Przyciski swatches – bez zmian */ .wcboost-variation-swatches__item { /* ← Główny selektor dla każdego przycisku wyboru (Sztuka / Karton) */ min-width: 140px !important; /* ← Minimalna szerokość przycisku */ /* height: 40px !important; */ /* ← Wysokość przycisku */ padding: 10px 20px !important; /* ← Wewnętrzny odstęp (góra/dół 10px, lewo/prawo 20px) */ margin: 0 15px 15px 0 !important; /* ← Zewnętrzny margines (brak góry, 15px prawo i dół) */ font-size: 1.1em !important; /* ← Rozmiar czcionki wewnątrz przycisku */ font-weight: 700 !important; /* ← Pogrubienie tekstu w przycisku */ line-height: 1.3; /* ← Wysokość linii tekstu */ border-radius: 15px !important; /* ← Lekkie zaokrąglenie rogów */ border: 1px solid #666 !important; /* ← Ciemnoszara ramka o grubości 1px */ /* background-color: #f5f5f5 !important; */ /* ← Jasnoszare tło przycisku */ color: #000 !important; /* ← Czarny kolor tekstu */ /* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important; */ /* ← Delikatny cień pod przyciskiem */ /* transition: all 0.25s ease !important; */ /* ← Płynne przejście wszystkich efektów (hover itp.) */ display: inline-flex !important; /* ← Wyświetlenie jako inline-flex (dla centrowania treści) */ align-items: center !important; /* ← Wyrównanie zawartości pionowo do środka */ justify-content: center !important; /* ← Wyrównanie zawartości poziomo do środka */ text-align: center; /* ← Centrowanie tekstu */ cursor: pointer; /* ← Kursor wskazujący, że przycisk jest klikalny */ position: relative; /* ← Pozycja relative (dla znacznika wyboru) */ overflow: hidden; /* ← Ukrycie ewentualnego przepełnienia */ } /* 🔧 WYMUSZENIE WYSOKOŚCI PRZYCISKÓW – override WCBoost */ .wcboost-variation-swatches__item { min-height: 40px !important; /* ← tu zmieniasz wysokość */ height: auto !important; /* ← nadpisuje wcześniejsze height: 50px */ padding-top: 0 !important; padding-bottom: 0 !important; } .wcboost-variation-swatches__name { /* ← Selektor dla tekstu wewnątrz przycisku swatch */ font-size: 1em; /* ← Rozmiar czcionki tekstu */ font-weight: 500; /* ← Pogrubienie było 700 tekstu */ text-transform: none; /* ← Zmieniłen na normalne (none) - Wszystkie litery wielkie */ letter-spacing: 0.5px; /* ← Odstęp między literami */ } .wcboost-variation-swatches__item:hover { /* ← Efekt po najechaniu myszą na przycisk swatch */ transform: translateY(-3px); /* ← Lekkie podniesienie przycisku */ background-color: #e0e0e0 !important; /* ← Jaśniejsze tło na hover */ /* ❌ WYŁĄCZONE – cień hover */ /* box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2) !important; */ /* ← Mocniejszy cień */ border-width: 2px !important; /* ← Grubsza ramka na hover */ } /* Hover – ZOSTAWIONE UNOSZENIE */ .wcboost-variation-swatches__item.selected { /* ← Styl dla wybranego przycisku swatch */ border-color: #000 !important; /* ← Czarna ramka */ border-width: 2px !important; /* ← Gruba ramka 3px */ /* ❌ WYŁĄCZONE – cień zaznaczenia */ /* box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2), 0 6px 15px rgba(0, 0, 0, 0.25) !important; */ /* ← Podwójny cień (obwódka + pod przyciskiem) */ /* animation: selected-pulse 1.5s ease-in-out infinite; */ /* ← Pulsująca animacja cienia */ } .wcboost-variation-swatches__item.selected:after { /* ← Znacznik wyboru (✓) w prawym górnym rogu wybranego przycisku */ content: "✓"; /* ← Treść znacznika – znak check */ position: absolute; /* ← Pozycjonowanie absolutne względem przycisku */ top: 6px; /* ← Odstęp od góry */ right: 6px; /* ← Odstęp od prawej */ background: #000 !important; /* ← Czarne tło okręgu */ color: white !important; /* ← Biały kolor ✓ */ width: 20px; /* ← Szerokość okręgu */ height: 20px; /* ← Wysokość okręgu */ border-radius: 50%; /* ← Pełne zaokrąglenie (koło) */ font-size: 14px; /* ← Rozmiar ✓ */ line-height: 20px; /* ← Wyśrodkowanie ✓ pionowo */ font-weight: bold; /* ← Pogrubienie ✓ */ z-index: 10; /* ← Na wierzchu innych elementów */ /* ❌ WYŁĄCZONE – cień znacznika */ /* box-shadow: 0 2px 4px rgba(0,0,0,0.3); */ /* ← Delikatny cień pod okręgiem */ } /* 🎯 FINAL: biały tekst na WYBRANYM przycisku (po kliknięciu) */ .wcboost-variation-swatches__item.selected .wcboost-variation-swatches__name { color: #fff !important; } /* ===== POPRAWKA PRZYCISKU "DODAJ DO KOSZYKA" ===== */ /* Zawsze widoczny */ .single_add_to_cart_button { /* ← Główny selektor przycisku „Dodaj do koszyka” */ display: inline-block !important; /* ← Zawsze wyświetlany jako inline-block */ visibility: visible !important; /* ← Zawsze widoczny */ } /* Stan nieaktywny (przed wyborem wariantu) – szary + inny tekst */ .single_add_to_cart_button[disabled], .single_add_to_cart_button.disabled { /* ← Selektor dla przycisku wyłączonego */ background-color: #ccc !important; /* ← Szare tło */ border-color: #999 !important; /* ← Szara ramka */ color: #666 !important; /* ← Szary tekst (nie używany bezpośrednio, bo tekst jest nadpisywany) */ border: 1px solid #666 !important; /* ← Ciemnoszara ramka o grubości 1px */ /* background-color: #f5f5f5 !important; /* ← Jasnoszare tło przycisku */ */ cursor: not-allowed !important; /* ← Kursor „zakaz” */ pointer-events: none !important; /* ← Przycisk nie reaguje na kliknięcia */ } .single_add_to_cart_button[disabled], .single_add_to_cart_button.disabled { position: relative; /* ← Pozycja relative, żeby pseudo-element :after mógł się pozycjonować */ } .single_add_to_cart_button[disabled]:after, .single_add_to_cart_button.disabled:after { /* ← Nakładka z tekstem „Wybierz rodzaj zakupu” */ content: "Wybierz rodzaj zakupu" !important; /* ← Nowy tekst wyświetlany na przycisku */ position: absolute; /* ← Pozycjonowanie absolutne */ left: 0; top: 0; /* ← Pokrywa cały przycisk */ width: 100%; height: 100%; /* ← Pełne pokrycie */ display: flex; /* ← Flex do centrowania */ align-items: center; /* ← Centrowanie pionowe */ justify-content: center; /* ← Centrowanie poziome */ color: #666 !important; /* ← Szary kolor nowego tekstu */ font-weight: 700; /* ← Pogrubienie nowego tekstu */ } /* Ukrycie oryginalnego tekstu gdy disabled */ .single_add_to_cart_button[disabled] span, .single_add_to_cart_button.disabled span { /* ← Ukrycie oryginalnego tekstu „Dodaj do koszyka” */ visibility: hidden; /* ← Tekst niewidoczny, ale zajmuje miejsce */ } /* Stan aktywny (po wyborze wariantu) – czarny */ .single_add_to_cart_button:not([disabled]):not(.disabled) { /* ← Selektor tylko dla aktywnego przycisku */ background-color: #000 !important; /* ← Czarne tło */ color: #fff !important; /* ← Biały tekst */ border-color: #000 !important; /* ← Czarna ramka */ } /* Hover dla aktywnego */ .single_add_to_cart_button:not([disabled]):hover { /* ← Efekt hover tylko na aktywnym przycisku */ background-color: #333 !important; /* ← Ciemniejszy czarny na hover */ } /* Resposywność */ @media (max-width: 768px) { /* ← Media query dla ekranów ≤768px (tablety i mniejsze) */ .wcboost-variation-swatches__item { /* ← Dostosowanie przycisków swatch na mniejszych ekranach */ min-width: 120px !important; /* ← Mniejsza minimalna szerokość */ height: 45px !important; /* ← Niższa wysokość */ padding: 8px 15px !important; /* ← Mniejszy padding */ font-size: 1em !important; /* ← Mniejsza czcionka */ margin: 0 8px 8px 0 !important; /* ← Mniejsze marginesy */ display: block !important; /* ← Przyciski jeden pod drugim */ width: 100% !important; /* ← Pełna szerokość */ max-width: 200px !important; /* ← Maksymalna szerokość */ } .wcboost-variation-swatches__label { /* ← Mniejszy nagłówek na mobile */ font-size: 1.2em !important; /* ← Trochę mniejsza czcionka */ margin-bottom: 20px !important; /* ← Mniejszy odstęp dolny */ } } @media (max-width: 480px) { /* ← Media query dla bardzo małych ekranów (telefony) */ .wcboost-variation-swatches__item { /* ← Dalsze zmniejszenie przycisków */ min-width: 110px !important; /* ← Jeszcze mniejsza szerokość */ height: 40px !important; /* ← Niższa wysokość */ padding: 6px 12px !important; /* ← Minimalny padding */ font-size: 0.95em !important; /* ← Mniejsza czcionka */ margin: 0 6px 6px 0 !important; /* ← Mniejsze marginesy */ } }