/* -------------------------------------------------------------------------
>>> Theme: Goose & Lavender
>>> TABLE OF CONTENTS:
----------------------------------------------------------------------------
1.0 GENERAL
2.0 Typography
3.0 Elements - hr ul ol
4.0 Forms - buttons
5.0 Navigation
5.1 Links
5.2 Menus
6.0 Footer
7.0 Pages
7.1 Index
7.2 About
7.3 Kategorie: Prem, Komfort, Poduchy
7.4 Zwroty i reklamacje
7.5 Kategorie (zbiorczy)
7.6 Kontakt
7.7 Blog
7.8 Single-post
7.9 Certyfikaty
7.10 Mailchimp
7.11 flowers
8.0 Media
9.0 Content
9.1 Posts and pages
9.2 ddd
9.3 Comment
10.0 Infinite scroll
11.0 Clearings
11.1 Captions
11.2 Galeries
12.0 Theme Specific Styles
13.0 Woocommerce
14.0 Media Queries
------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------
1.0 GENERAL
--------------------------------------------------------------------------*/
/* colors */
:root {
--primary-color: #b5a7d6; /* Delikatny Lawendowy */
--accent-color: #c1a16b; /* Ciepłe Złoto/Mosiądz */
--text-color: #1e1d1d; /* Ciemnoszary dla czytelności */
--light-bg: #f8f8f8; /* Delikatne tło */
}
body {
font-family: 'Montserrat', sans-serif;
color: var(--text-color);
background-color: #fff;
}
/* Ustawienia globalne dla linków */
a {
color: rgb(93, 58, 86);
text-decoration: none;
transition: color 0.3s ease;
}
a:hover {
color: var(--primary-color);
}
/* -------------------------------------------------------------------------
2.0 Typography
--------------------------------------------------------------------------*/
/* fonts */
h1, h2, h3, h4, h5, h6 {
font-family: 'Cormorant Garamond', serif;
}
/* -------------------------------------------------------------------------
3.0 Elements - hr ul ol
--------------------------------------------------------------------------*/
/* Plik style.css lub stylizacja wewnętrzna */
/* Stylizacja Obrazków w Sekcjach */
.section-img {
max-height: 450px;
object-fit: cover;
}
/* Podkreślenie sekcji i nagłówków */
.post-title {
color: #c1a16b; /* Użycie koloru marki */
}
/* Wyróżnienie tekstu (np. kluczowych fraz) */
.post-content strong {
color: #4a4a4a;
font-weight: 700;
}
/* Poprawa czytelności długiego tekstu */
.post-content p {
line-height: 1.8;
margin-bottom: 1.5rem;
font-size: 1.05rem;
}
/* Styl listy atutów */
.list-group-item {
border: none;
padding-left: 0;
}
/* -------------------------------------------------------------------------
4.0 Forms - buttons
--------------------------------------------------------------------------*/
.btn-primary {
background-color: var(--primary-color);
border-color: var(--primary-color);
}
.btn-primary:hover {
background-color: #9b8bc7;
border-color: #9b8bc7;
}
/* -------------------------------------------------------------------------
5.0 Navigation
--------------------------------------------------------------------------*/
/* -------------------------------------------------------------------------
6.0 Footer
--------------------------------------------------------------------------*/
.logoFooter {
width: 72%;
}
footer a {
text-decoration: none;
transition: color 0.3s;
}
footer a:hover {
color: var(--primary-color) !important;
}
.col-md-3 h5 {
color: var(--accent-color)
}
/* -------------------------------------------------------------------------
7.0 Pages
--------------------------------------------------------------------------*/
/* ===============================================================================================================================================================================
7.1 INDEX
=============================================================================================================================================================================== */
/* HEADER = B. CAROLUSEL
1. ANIMATION OD CAROLUSEL
--------------------*/
#carouselExampleFade .carousel-inner .carousel-item {
height: 100svh;
min-height: 300px;
position: relative; /* Umożliwia pozycjonowanie nakładek */
overflow: hidden; /* Ukrywa nadmiar obrazu z animacji */
}
/* -----------------------
2. ANIMATION OF "pan-zoom"
-------------------------*/
@keyframes pan-zoom {
0% { transform: scale(1.0) translateX(0); }
100% { transform: scale(1.1) translateX(-50px); }
}
#carouselExampleFade .carousel-item.active img {
animation: pan-zoom 17s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
#carouselExampleFade .carousel-item.active img { animation: none; } /* [2025-08-20] */
}
#carouselExampleFade .carousel-item img {
width: 120%; /* Wystarczy, że obrazek ma 100%, skalowanie zrobi resztę */
height: 120%;
object-fit: cover;
/* [2025-08-20] SEO/LCP: pamiętaj o width/height w HTML i lazy-loading poza LCP EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE*/
}
/* -----------------------
3. Przyciemnienie zdjęć
-------------------------*/
#carouselExampleFade .carousel-item::before {
content: "";
position: absolute;
inset: 0; /* [2025-08-20] skrócony zapis top/left/width/height EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE*/
background-color: rgba(0, 0, 0, 0.125); /* Ciemniejsza nakładka z przezroczystością */
z-index: 1;
}
/* -----------------------
4. Pozycjonowanie i stylizacja napisów
-------------------------*/
#carouselExampleFade .carousel-caption {
position: absolute;
z-index: 2; /* Napisy zawsze nad nakładką przyciemniającą */
/*background-color: rgba(0, 0, 0, 0.4);
border-radius: 10px;*/
padding: 1.5rem;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
/* -----------------------
Ustawienie pozycji dla każdego slajdu indywidualnie
-------------------------*/
#carouselExampleFade .slide-1 .carousel-caption img {
right: 5%;
bottom: 35%;
}
#carouselExampleFade .slide-1 .carousel-caption,
#carouselExampleFade .slide-2 .carousel-caption,
#carouselExampleFade .slide-3 .carousel-caption {
left: 12%;
bottom: 35%;
opacity: 1;
transition: transform 0.8s, opacity 0.8s;
}
#carouselExampleFade .slide-1 .carousel-caption:hover,
#carouselExampleFade .slide-1 .carousel-caption:focus-within {
transform: scale(1.1);
opacity: 1;
}
#carouselExampleFade .slide-2 .carousel-caption {
/*right: 50%;*/
bottom: 40%;
opacity: 1;
transition: transform 0.8s, opacity 0.8s;
}
#carouselExampleFade .slide-2 .carousel-caption:hover,
#carouselExampleFade .slide-2 .carousel-caption:focus-within {
transform: scale(1.1);
opacity: 1;
}
/* #carouselExampleFade .slide-3 .carousel-caption {
left: 40%;
top: 35%;
/*transform: translateX(-50%); Centrowanie poziome *
opacity: 0.7;
transition: transform 0.8s, opacity 0.8s;
} */
#carouselExampleFade .slide-3 .carousel-caption:hover,
#carouselExampleFade .slide-3 .carousel-caption:focus-within {
transform: scale(1.1);
opacity: 1;
}
#ferstSlaczekHeader {
transition: none !important;
animation: none !important;
}
nav a:hover {
color: var(--primary-color) !important;
}
/* ------------------ SECTION - animowana reklama w 1 slajdzie ------------------------------------------------ */
/* Kontener dla animacji w rogu */
.animated-info-box {
position: absolute;
top: 20%;
left: 10%;
z-index: 3;
display: flex;
flex-direction: row;
gap: 15px;
/* Media query dla mniejszych ekranów - ukrywamy element,
aby nie zaslanial obrazka */
@media (max-width: 768px) {
display: none !important;
}
}
/* Styl dla pojedynczego kółka z tekstem */
.circle-animation-container {
width: 150px;
height: 150px;
border-radius: 50%;
background-color: rgba(91, 75, 138, 0.5); /* Lekko fioletowe, przezroczyste tło 144, 114, 185, 0.6*/
display: flex;
justify-content: center;
align-items: center;
position: relative; /* Umożliwia pozycjonowanie wewnętrznego elementu */
overflow: hidden; /* Ukrywa obramowanie, które wykracza poza kontener */
z-index: 1; /* Na wierzchu względem innych elementów w kontenerze */
}
/* Pseudo-element do animacji obramowania */
.circle-animation-container.first-circle::before,
.circle-animation-container.second-circle::before,
.circle-animation-container.third-circle::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
border: 2px dotted rgba(255, 255, 255, 0.7); /* Kolor animowanego obramowania */
animation: rotate 15s linear infinite; /* Animacja obrotu */
box-sizing: border-box;
z-index: 2; /* Na wierzchu względem tła kontenera */
}
/* Styl dla tekstu wewnątrz kółka */
.circle-animation-container p {
color: #fff;
font-family: 'Montserrat', sans-serif;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
margin: 0;
padding: 0 10px;
z-index: 3; /* Upewniamy się, że tekst jest zawsze na wierzchu */
}
/* Animacja obrotu dla ::before */
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* Lekkie opóźnienie animacji dla drugiego i trzeciego kółka */
.second-circle::before {
animation-delay: 5s;
}
.third-circle::before {
animation-delay: 10s;
}
/* ------------------------------------------------ SECTION - skrót najważniejsze cechy charakterystyczne prod. ------------------------------------------------ */
/* Styl dla sekcji z atutami */
.feature-box {
background-color: #f8f9fa44; /* Jasne tło */
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.feature-box:hover {
transform: translateY(-5px); /* Delikatne podniesienie w górę po najechaniu */
box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important; /* Lepszy cień */
}
/* Animacja ikonek */
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.icon-animation {
animation: pulse 2s infinite ease-in-out;
}
/* ------------------------------------------------ SECTION - category / certyfikats ------------------------------------------------ */
.row:hover .col {
opacity: 0.7;
transition: opacity 0.8s;
}
.row .col:hover {
transform: scale(1.1);
opacity: 1;
transition: transform 0.8s, opacity 0.8s;
will-change: transform; /* micro-opt przy hover */
}
/* ------------------- kategorie ------------------- */
#categories .justify-content-between img {
max-height: 600px;
max-width: 443px;
}
/* ------------------- Sekcja Wideo ------------------- */
#video-section {
position: relative;
height: 70vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.bg-video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
transform: translate(-50%, -50%);
object-fit: cover;
}
.overlay-dark {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
z-index: 0;
}
.video-caption {
z-index: 1;
}
/* ------------------- Sekcja Subskrypcji ------------------- */
#subscribe {
background-color: var(--light-bg);
}
.btn-subscribe {
background-color: var(--primary-color);
color: white;
padding: 7px 30px;
border: none;
transition: background-color 0.3s;
}
.btn-subscribe:hover {
background-color: #9b8bc7;
color: white;
}
/* ===============================================================================================================================================================================
7.2 About
=============================================================================================================================================================================== */
#about {
background-image: url("/wp-content/themes/goose-and-lavender/assets/img/aboutImg.png");
width: 100%;
background-attachment: fixed; /* kluczowe dla efektu parallax */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
max-height: 700px;
margin-top: 40px;
}
#products {
background-color: var(--light-bg);
}
.card-title {
font-family: 'Playfair Display', serif;
font-weight: 300;
}
#about-section .about-class-img-height-max {
width: auto !important;
height: auto !important;
/* Ustawienie Twojego wymagania (Maksymalna wysokość) */
max-height: 500px !important;
max-width: 100% !important;
/* Upewnienie się, że proporcje są zachowane */
object-fit: contain;
}
/* ===============================================================================================================================================================================
7.3 Kategorie - 3 sztuki
=============================================================================================================================================================================== */
.entry-content h2 {
/* Zmniejszenie rozmiaru, aby były mniej dominujące */
font-size: 1.8rem; /* Desktop */
line-height: 1.3;
/* Dodanie elegancji zamiast czystej wielkości */
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 500; /* Zamiast super-bold, użyjemy średniego. */
/* Zmniejszenie odstępów, aby nie "przesyłały" treści */
margin-top: 3.5rem;
margin-bottom: 2rem;
}
/* -------------------------------------------------------------------------
7.4 Zwroty i reklamacje
--------------------------------------------------------------------------*/
/* kiedyś zmiana kolotu ramki */
/* -------------------------------------------------------------------------
7.5 Kategorie (zbiorczy)
--------------------------------------------------------------------------*/
/* 1. Ukrywamy wadliwe szlaczki na sztukę, aby nie straszyły */
#categories img[alt="flowers"],
#categories img[src*="szlaczek"] {
display: none !important;
}
/* 2. Ustawienia dla zdjęć w kolekcjach - centrowanie i dopasowanie */
#categories .collection-class-img-height-max,
#collectionPremium_1 .collection-class-img-height-max,
#collectionPremium_2 .collection-class-img-height-max {
display: block !important;
width: auto !important;
height: auto !important;
max-width: 100% !important; /* Wykorzystaj pełną szerokość kolumny */
margin: 0 auto 20px auto !important; /* Centrowanie w poziomie i odstęp od napisu */
object-fit: contain;
}
/* 3. Wymuszenie centrowania całej zawartości kolumn w sekcji kategorii */
#categories .col {
display: flex !important;
flex-direction: column !important;
align-items: center !important; /* Centrowanie elementów w poziomie */
justify-content: flex-start !important;
text-align: center !important;
padding: 2rem !important; /* Optymalny odstęp wewnętrzny */
}
/* Usunięcie zbędnych marginesów bocznych, które mogą rozpychać layout na mniejszych ekranach */
#categories .row .col {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* -------------------------------------------------------------------------
7.6 Kontakt - stylizacja formularza
--------------------------------------------------------------------------*/
/* dodałam css do widok -> dodatkowy css */
/* -------------------------------------------------------------------------
7.7 Blog
--------------------------------------------------------------------------*/
/* 1. Ustawiamy sztywne ramy dla kontenera obrazka */
.card-image-container {
max-height: 400px !important; /* Ustawiamy stałą wysokość */
width: 100%; /* Szerokość na cały dostępny obszar */
overflow: hidden; /* Wszystko co wystaje poza 400px ucinamy */
}
/* 2. Mówimy obrazkowi, jak ma się zachować wewnątrz tych ram */
.card-image-container img {
width: 100%;
height: 100%;
object-fit: cover; /* To jest MAGIA. Obrazek wypełni całe pudełko, przycinając boki, zamiast się spłaszczać */
object-position: center; /* Centrujemy obrazek, żeby środek był zawsze widoczny */
}
header.post-header .post-meta {
display: none;
}
/* -------------------------------------------------------------------------
7.8 Single post
--------------------------------------------------------------------------*/
a.first-button-post {
padding-top: 5% !important;
padding-bottom: 30px !important;
}
a.secend-button-post {
padding-top: 5% !important;
padding-bottom: 35px !important;
}
/* -------------------------------------------------------------------------
7.9 Certyfikaty
--------------------------------------------------------------------------*/
.certificates a {
display: block !important; /* Sprawia, że link ma wymiary obrazka */
cursor: pointer !important; /* Wymusza ikonę rączki */
position: relative;
z-index: 5; /* Wyciąga link nad tło */
text-decoration: none;
}
.certificates img {
pointer-events: none; /* Sprawia, że kliknięcie "przechodzi" przez obrazek do linku pod spodem */
}
/* -------------------------------------------------------------------------
ffffffffffffffffffffffffff POPUP - reklama nad górnym nav
--------------------------------------------------------------------------*/
#promo-bar {
background-color: #A93226; /* Ciemna, świąteczna czerwień */
color: #FFFFFF;
text-align: center;
padding: 10px 20px;
font-size: 16px;
font-weight: 500;
display: flex;
justify-content: center;
align-items: center;
position: relative !; /* Ważne, jeśli ma być zamykana */
z-index: 9999 !important; /* Zapewnij, że jest nad innymi elementami */
}
#promo-bar .promo-text {
cursor: pointer; /* Zmienia kursor, sugerując kliknięcie/interakcję */
padding: 0 10px;
letter-spacing: 0.5px;
}
#promo-bar .promo-text i {
color: #F7DC6F; /* Złoty kolor dla ikonek */
margin: 0 8px;
font-size: 18px;
}
#close-promo-bar {
background: none;
border: none;
color: #F7DC6F;
cursor: pointer;
font-size: 18px;
position: absolute;
right: 15px;
padding: 5px;
}
#close-promo-bar:hover {
color: #ffffff;
}
/* Opcjonalnie: Stylizacja tekstu dla lepszej czytelności */
#promo-bar strong {
font-weight: 800;
text-transform: uppercase;
}
/* ========================================================= */
/* 1. STYLIZACJA KONTENERA FORMUARZA (EMULACJA CARD & SHADOW) */
/* ========================================================= */
/* Nadanie delikatnego cienia i marginesu formularzowi - celujemy w główny DIV CF7 */
.wpcf7 {
padding: 30px; /* Dodatkowe wewnętrzne odstępy (jak p-4) */
background-color: #fff;
border-radius: 6px; /* Lekkie zaokrąglenie krawędzi karty */
/* Emulacja shadow-sm - subtelny cień */
box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
max-width: 650px; /* Ograniczamy maksymalną szerokość formularza */
margin-left: auto;
margin-right: auto;
}
/* ========================================================= */
/* 2. STYLIZACJA PÓL WEJŚCIOWYCH I ETYKIET (EMULACJA FORM-CONTROL) */
/* ========================================================= */
/* Ustawienie marginesu na dole dla każdego elementu formularza (mb-3) */
.wpcf7 p {
margin-bottom: 1rem; /* 1rem to ok. 16px */
}
/* Stylizacja wszystkich inputów (tekst, email) i textarea - EMULACJA form-control */
.wpcf7-form-control:not(.wpcf7-submit) {
/* Ustawienia szerokości i wyświetlania */
display: block;
width: 100%;
/* Ustawienia wizualne */
padding: 0.375rem 0.75rem; /* Standardowy padding Bootstrapa */
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529; /* Kolor tekstu w polu */
background-color: #fff;
/* Obramowanie i zaokrąglenia */
border: 1px solid #ced4da;
border-radius: 0.375rem;
/* Płynne przejście na focus */
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
/* Stylizacja etykiet (Label) - EMULACJA form-label text-muted */
.wpcf7-form label {
display: block; /* Ustawienie na osobnej linii */
margin-bottom: 0.5rem;
color: #6c757d; /* Kolor text-muted */
font-weight: 400;
}
/* Styl na Focus (aktywne pole) */
.wpcf7-form-control:focus {
color: #212529;
background-color: #fff;
border-color: #86b7fe; /* Podświetlenie standardowe Bootstrap */
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, .25);
}
/* ========================================================= */
/* 3. STYLIZACJA PRZYCISKU (EMULACJA BTN BTN-PRIMARY W-100) */
/* ========================================================= */
/* Użyłem koloru z Twojego zrzutu (delikatny fiolet) */
.wpcf7-submit {
/* Ustawienie pełnej szerokości */
width: 100%;
display: inline-block;
/* Kolory i padding (standard Bootstrap) */
background-color: #AF9BD4; /* Jasny fiolet z obrazka */
color: #fff; /* Biały tekst */
padding: 0.5rem 1rem;
font-size: 1rem;
line-height: 1.5;
/* Obramowanie i zaokrąglenia */
border: 1px solid #AF9BD4;
border-radius: 0.375rem;
cursor: pointer;
font-weight: 500;
/* Efekt wizualny */
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
/* Efekt najechania myszą (Hover) */
.wpcf7-submit:hover {
background-color: #947FBC; /* Nieco ciemniejszy fiolet */
border-color: #947FBC;
color: #fff;
}
/* ----------------------------
* 7.10 mailchimp
* --------------------------- */
.mc4wp-form {
width: 100%;
max-width: 600px; /* Ogranicz szerokość na desktopie */
margin: 0 auto;
}
/* Usunięcie domyślnych marginesów wtyczki, jeśli istnieją */
.mc4wp-form-fields {
display: flex;
justify-content: center;
}
/* -------------------------------------------------------------------------
13.0 WOOCOMMERCE - POPRAWKA WYŚRODKOWANIA I STYLIZACJI GLOBALNEJ
--------------------------------------------------------------------------*/
/* 1. Reset i naprawa centrowania kontenera głównego */
.woocommerce-page .content-area,
.woocommerce-page .site-main {
max-width: 1320px !important; /* Szerokość dopasowana do Twojego projektu */
margin-left: auto !important;
margin-right: auto !important;
padding-left: 20px !important;
padding-right: 20px !important;
display: block;
float: none; /* Zapobiega uciekaniu do lewej przez floaty */
}
/* 2. Usunięcie szkodliwych zerowych marginesów, które powodowały błąd */
.woocommerce-page .site-content {
padding-top: 40px !important;
padding-bottom: 60px !important;
}
/* 3. Stylizacja nagłówków stron (Sklep, Koszyk, Moje Konto) */
.woocommerce-products-header__title.page-title,
.woocommerce-page h1,
.woocommerce h2 {
font-family: 'Cormorant Garamond', serif; /* Spójność z Twoją typografią */
font-weight: 500;
text-align: center;
margin-bottom: 40px !important;
color: var(--text-color);
width: 100%;
}
/* 4. Naprawa siatki produktów w sklepie */
.woocommerce ul.products {
display: flex;
flex-wrap: wrap;
justify-content: center; /* Centruje produkty, jeśli jest ich mniej w rzędzie */
margin-left: auto;
margin-right: auto;
}
/* 5. Estetyka przycisków "Wybierz opcje" / "Dodaj do koszyka" */
.woocommerce ul.products li.product .button {
background-color: var(--light-bg) !important;
color: var(--text-color) !important;
border: 1px solid #ddd !important;
border-radius: 0;
text-transform: uppercase;
font-size: 0.85rem;
letter-spacing: 1px;
padding: 12px 20px !important;
transition: all 0.3s ease;
}
.woocommerce ul.products li.product .button:hover {
background-color: var(--primary-color) !important;
color: white !important;
border-color: var(--primary-color) !important;
}
/* 6. Breadcrumbs (Okruszki) - wyśrodkowanie */
.woocommerce-breadcrumb {
text-align: 0;
margin-bottom: 20px !important;
font-size: 0.9rem;
color: #888;
}
/* -----------------------------------
* SKLEP
* ----------------------------------- */
/* Celuje w obrazki miniatur w siatce produktów WooCommerce */
.woocommerce ul.products li.product a img.attachment-woocommerce_thumbnail {
/* Wymuszamy automatyczne obliczanie wysokości i szerokości */
width: auto !important;
height: auto !important;
/* Ustawiamy maksymalną wysokość, aby obrazki nie były za duże */
max-height: 280px; /* Zwiększyłem wysokość, aby lepiej pasowała do podglądu, możesz ją zmienić (np. 300px) */
/* Zapewniamy, że obrazek zajmuje maksymalnie 100% szerokości swojego kontenera, ale zachowuje proporcje */
max-width: 100%;
}
/* 1. Ukrycie sekcji STROPY (pagenav) */
#sidebar {
display: none !important;
}
/* -----------------------------------
* KASA (CHECKOUT)
* ----------------------------------- */
/* Tytuły sekcji Kasy (Adres, Twoje zamówienie) */
.woocommerce-checkout h3 {
font-family: 'Playfair Display', serif;
font-weight: 600;
color: var(--primary-color);
margin-top: 30px;
margin-bottom: 20px;
border-bottom: 1px solid #eee;
padding-bottom: 10px;
}
/* Pola Formularza - Czystość i Fokus Luksusu */
.woocommerce-form-row input[type="text"],
.woocommerce-form-row input[type="email"],
.woocommerce-form-row input[type="tel"],
.woocommerce-form-row select,
.woocommerce-form-row textarea {
border: 1px solid #ddd !important;
border-radius: 0;
padding: 10px 15px;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.woocommerce-form-row input:focus,
.woocommerce-form-row select:focus,
.woocommerce-form-row textarea:focus {
border-color: var(--primary-color) !important; /* Lawendowe podświetlenie */
box-shadow: 0 0 0 2px rgba(181, 167, 214, 0.2);
outline: none;
}
/* Podsumowanie zamówienia - wyróżnienie */
#order_review_heading {
text-align: left !important;
border-bottom: none !important;
}
#order_review {
background-color: rgba(181, 167, 214, 0.05); /* Lawendowe tło (5% krycia) */
padding: 20px;
}
/* Ostatni przycisk akcji na Kasie */
#place_order {
background-color: var(--accent-color) !important; /* Złoty akcent */
color: #fff !important;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 700;
padding: 15px 40px;
border-radius: 0;
border: none;
width: 100%;
margin-top: 20px;
transition: background-color 0.3s ease;
}
#place_order:hover {
background-color: #a3855a !important; /* Ciemniejsze złoto */
}
/* Metody płatności: Wyróżnienie opcji */
.payment_methods label {
font-weight: 600;
color: var(--text-color);
}
.payment_box {
background-color: #fcfcfc;
border: 1px dashed var(--primary-color);
}
/* -----------------------------------
* MOJE KONTO
* ----------------------------------- */
/* Płynna nawigacja po lewej stronie */
.woocommerce-MyAccount-navigation {
padding: 20px;
background-color: var(--light-bg); /* Jasne tło dla kontrastu */
border: 1px solid #eee;
margin-bottom: 30px;
}
.woocommerce-MyAccount-navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
.woocommerce-MyAccount-navigation li {
margin-bottom: 5px;
}
.woocommerce-MyAccount-navigation li a {
font-family: 'Montserrat', sans-serif;
color: var(--text-color);
padding: 8px 10px;
display: block;
transition: background-color 0.3s ease, color 0.3s ease;
}
/* Aktywny i najechany link */
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover {
background-color: var(--primary-color); /* Lawendowy akcent */
color: #fff;
font-weight: 600;
}
/* Treść sekcji: Więcej odstępów */
.woocommerce-MyAccount-content {
padding-left: 30px;
}
/* Tytuły w treści konta (np. 'Adresy') */
.woocommerce-MyAccount-content h3 {
font-family: 'Playfair Display', serif;
color: var(--accent-color); /* Złoty akcent dla tytułów sekcji */
}
/* -------------------------
* breadcrambs
* -----------------------*/
.woocommerce-breadcrumb {
}
/* -------------------------
* odsunięcie tytułu od górnej
* ------------------------- */
.container.custom-page-container .status-publish .entry-header,
.product_title.entry-title {
/* Ustawienie górnego marginesu */
padding-top: 30px !important;
margin-top: 30px !important;
}
/* -------------------------
* Produkt - usunięcie SKU i zapisu kategorii
* ------------------------- */
/* Ukrywa wrapper SKU używając nadrzędnego kontenera produktu */
.product .summary .product_meta .sku_wrapper {
display: none !important;
}
/* Ukrywa wrapper Kategorii używając nadrzędnego kontenera produktu
.product .summary .product_meta .posted_in {
display: none !important;
}*/
/* -------------------------
* Produkt - input z liczbą wybranych sztuk
* ------------------------- */
#quantity_69297d6a9c675 {
margin-top: 5px;
}
.product_title.entry-title {
margin-top: 30px !important;
}
/* Zmiana szerokości obrazka i próba wyśrodkowania */
.products .product .woocommerce-LoopProduct-link img {
max-width: 70% !important;
width: 70% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
display: block !important;
}
/* =========================================================================
1.0 MEDIA QUERIES (RESPONSYWNOŚĆ) - CZYSTY I ZOPTYMALIZOWANY KOD
Zasada: Desktop First, przechodzimy w dół do Mobile.
=========================================================================*/
/* -------------------------------------------------------------------------
TABLETY I MNIEJSZE LAPTOPY (do 1280px)
--------------------------------------------------------------------------*/
@media (max-width: 1280px) {
#mainlogo {
max-width: 180px !important;
display: center !important;
}
#sidebar {
display: none !important;
}
/* 2. Ukrycie dodatkowych elementów wizualnych, jeśli to są 'Trzy Kółka' */
/* Zmień ten selektor na Twój faktyczny, jeśli to nie jest .animated-info-box */
.animated-info-box {
display: none !important;
}
/* 3. Zmniejszenie tekstu w karuzeli */
#carouselExampleFade .carousel-caption h1 {
font-size: 2.4rem;
}
/* 4. Dostosowanie sekcji wideo/header */
#video-section {
height: 50vh;
}
/* 5. Ustawienie górnego paddingu dla głównej treści (Site Main) */
.site-main {
padding-top: 150px !important; /* Dajemy więcej miejsca na nagłówek/nawigację */
}
#carouselExampleFade .carousel-item img {
animation: none !important;
transform: scale(1.0) translateX(0) !important;
}
}
/* -------------------------------------------------------------------------
TABLETY PIONOWO / DUŻE TELEFONY (do 992px)
--------------------------------------------------------------------------*/
@media (max-width: 992px) {
#mainlogo {
margin: 0 !important;
margin-left: 150% !important;
max-width: 170px !important;
position: relative; /* Wyprowadzamy element z flow Flexbox */
left: 50%; /* Przesuwamy lewą krawędź do środka rodzica (.navbar) */
transform: translateX(-50%); /* Cofamy element o połowę jego własnej szerokości */
z-index: 100;
}
/* Upewnienie się, że elementy te są ukryte (np. flagi, dodatkowy tekst) */
.flags-and-text.d-none.d-lg-flex.me-4 {
display: none !important;
}
/* Korekta paddingu w głównym kontenerze */
.site-main {
padding-top: 100px !important;
}
/* navigacja - główna */
.navbar-collapse {
margin-left: 30px; /* ODSUNIĘCIE: Dodaj margines między logo a startem menu. Dostosuj wartość (np. 30px). */
}
/* Celuje w listę UL głównego menu, które ma się rozciągać */
.navbar-nav.justify-content-start.flex-grow-1 {
flex-grow: 1 !important; /* Wymuś rozciągnięcie tego bloku */
}
}
/* -------------------------------------------------------------------------
TELEFONY KOMÓRKOWE (do 767px) - KLUCZOWA SEKCJA DLA MENU
--------------------------------------------------------------------------*/
@media (max-width: 767px) {
/* 1. WYŚRODKOWANIE LOGO i ZARZĄDZANIE NAGŁÓWKIEM */
.navbar {
display: flex;
/* PRZYWRACAMY space-between - dzięki temu logo będzie na środku,
jeśli damy elementom po bokach (np. innym ikonom) odpowiednie flex:1 */
justify-content: space-between;
align-items: center;
padding: 10px 15px;
position: relative; /* Upewniamy się, że jest bazą dla elementów absolutnych */
}
.navbar .container-fluid {
display: flex;
/* Używamy space-between, ale teraz, gdy mamy 3 kolumny:
1. Hamburger (lewo)
2. Logo (środek)
3. Pusty div (prawo)
Logo będzie idealnie wyśrodkowane.
*/
justify-content: space-between;
align-items: center;
width: 100%;
}
/* 1a. Pozycjonowanie hamburgera na skraju */
.navbar .navbar-toggler { /* Używamy selektora dla przycisku hamburgera (typowe dla Bootstrapa) */
position: relative;
margin: 0;
z-index: 100;
/* Upewniamy się, że jest na lewo i jest mały */
padding: 0.5rem;
margin-right: auto; /* Opcjonalnie, ale ułatwia Flexboxowi */
z-index: 100;
/* 💡 DODATEK: Blokujemy interakcję, dopóki menu nie jest aktywne, aby nie zepsuć flexboxa */
pointer-events: auto;
}
/* 1c. Ukrycie widoku desktopowego menu
.navbar-nav {
display: none;
} */
.menu--right.navbar .navbar-collapse {
display: none !important; /* Wymuszamy ukrycie całego bloku na mobilnym */
}
/* 2. NAPRAWA ROZWIJANEGO MENU MOBILNEGO (off-canvas/hamburger) */
/* Zwykle te selektory kontrolują rozwijane menu (zmień .mobile-menu-wrap na Twój selektor) */
.offcanvas-menu,
.mobile-menu-wrap {
position: fixed;
top: 0;
left: 0; /* KLUCZOWE: Zaczynamy od lewej krawędzi */
width: 100%; /* Zajmuje całą szerokość ekranu */
height: 100vh;
z-index: 1000;
padding-top: 50px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
/* Upewnienie się, że treść nagłówka (h2) na stronach mobilnych jest czytelna */
.entry-content h2 {
font-size: 1.5rem;
}
.flex-fill {
flex: 1 1 auto;
}
}
/* -------------------------------------------------------------------------
BARDZO MAŁE EKRANY (do 480px)
--------------------------------------------------------------------------*/
@media (max-width: 480px) {
/* Dalsza korekta paddingu na bardzo małych telefonach */
.site-main {
padding-top: 80px !important;
}
}
/* ======================================================================================================================================================================================================
usun
======================================================================================================================================================================================================
.flag-icon.pl {
background-image: url('data:image/svg+xml;utf8,');
}
.flag-icon.uk {
background-image: url('data:image/svg+xml;utf8,');
}
*/