/* === USTAWIENIA GLOBALNE I NOWA PALETA KOLORÓW === */

:root {
    --color-primary: #b08f5c; /* Elegancki, zgaszony złoty */
    --color-primary-hover: #8a6f47; /* Ciemniejszy złoty do hoverów */
    --color-dark: #2b2b2b; /* Ciemny, prawie czarny dla tekstu */
    --color-light: #ffffff; /* Czysta biel */
    --color-bg-light: #f9f8f6; /* Bardzo jasny beż tła */
    --color-border: #eee;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Helvetica', 'Arial', sans-serif;
    line-height: 1.6;
    background-color: var(--color-light);
    color: var(--color-dark);
}

/* Dodajemy płynne przewijanie do całej strony */
html {
    scroll-behavior: smooth;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

h1, h2, h3, h4, h5, h6 {
    margin-bottom: 15px;
    color: var(--color-primary);
    font-family: 'Georgia', serif;
}

p {
    margin-bottom: 10px;
}

/* === NAGŁÓWEK (HEADER) Z NOWYM LOGO === */

header {
    background-color: var(--color-light);
    border-bottom: 1px solid var(--color-border);
    padding: 10px 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-img {
    height: 70px;
    width: auto;
    display: block;
}

nav ul {
    list-style-type: none;
}

nav ul li {
    display: inline-block;
    margin-left: 25px;
}

nav ul li a {
    text-decoration: none;
    color: var(--color-dark);
    font-weight: bold;
    padding: 5px;
    font-size: 16px;
    transition: color 0.3s ease;
}

nav ul li a.active,
nav ul li a:hover {
    color: var(--color-primary);
}

/* === SEKCJA 'HERO' (STRONA GŁÓWNA) Z TŁEM === */

.hero {
    background-color: var(--color-bg-light); 
    padding: 100px 0;
    text-align: center;
    margin-bottom: 30px;
    
    /* Tło obrazkowe (pamiętaj zmienić nazwę pliku!) */
    background-image: url('images/naturalne-mydla-handmade-kompozycja-flatlay-spa.png'); 
    background-size: cover;
    background-position: center;
    color: var(--color-light); 
    position: relative; 
    z-index: 1;
}

/* Nakładka dla czytelności tekstu */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); 
    z-index: -1; 
}

/* Teksty w sekcji 'hero' */
.hero h1,
.hero p {
    color: var(--color-light); 
}

.hero h1 {
    font-size: 48px;
    margin-bottom: 20px;
}

.hero p {
    font-size: 20px;
    margin-bottom: 30px;
}

.przycisk {
    display: inline-block;
    background-color: var(--color-primary);
    color: var(--color-light);
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 20px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.przycisk:hover {
    background-color: var(--color-primary-hover);
}


/* === SEKCJA "OPINIE" NA STRONIE PRODUKTU === */

.opinie-klientow {
    padding: 40px 0;
    background-color: var(--color-bg-light); /* Jasne tło dla wyróżnienia */
    margin-top: 40px; /* Odstęp od sekcji opakowań */
}

.opinie-klientow h2 {
    text-align: center;
    font-size: 32px;
    margin-bottom: 30px;
    color: var(--color-dark);
}

.opinie-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.opinia-karta {
    background-color: var(--color-light); /* Białe tło karty */
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    text-align: center; /* Wyśrodkujemy wszystko */
    
    /* Użyjemy flexboxa, aby autor był zawsze na dole,
       nawet jeśli cytaty mają różną długość */
    display: flex; 
    flex-direction: column;
    justify-content: space-between;
}

.opinia-gwiazdki {
    font-size: 24px;
    margin-bottom: 15px;
}

.opinia-tekst {
    font-size: 16px;
    color: #444;
    font-style: italic; /* Kursywa dla cytatu */
    line-height: 1.6;
    flex-grow: 1; /* Sprawia, że tekst wypełnia wolne miejsce */
}

.opinia-autor {
    display: block;
    font-weight: bold;
    color: var(--color-primary); /* Złoty autor */
    margin-top: 20px;
    font-style: normal; /* Usuwamy kursywę z autora */
}

/* === KARTY PRODUKTÓW (WSPÓLNE DLA WIELU STRON) === */

.polecane {
    padding: 30px 0;
}

.polecane h2 {
    text-align: center;
    font-size: 32px;
    margin-bottom: 30px;
}

.produkty-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

/* Karta produktu z obrazkiem */
/* Nowy, poprawiony kod */
.produkt-karta {
    background-color: var(--color-light);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0;
    text-align: left;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    overflow: hidden; 
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
    
    /* --- DODAJ TE DWIE LINIE PONIŻEJ --- */
    display: flex;
    flex-direction: column;
    /* ----------------------------------- */
}

/* Efekt uniesienia całej karty po najechaniu */
.produkt-karta:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.produkt-karta img {
    width: 100%;
    height: 250px; 
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease; /* Płynne powiększanie zdjęcia */
}

/* Efekt ZOOM na zdjęciu po najechaniu na kartę */
.produkt-karta:hover img {
    transform: scale(1.08); /* Powiększamy zdjęcie o 8% */
}

.karta-tresc {
    padding: 20px;
    /* Te 3 linie sprawią, że karta rozciągnie się, by wyrównać cenę */
    display: flex; 
    flex-direction: column; 
    flex-grow: 1; 
}

.produkt-karta h3 {
    color: var(--color-dark);
    font-size: 20px;
}

.produkt-karta span {
    display: block;
    font-size: 18px;
    font-weight: bold;
    color: var(--color-primary);
    /* To "magiczna" linijka - wypycha cenę na sam dół */
    margin-top: auto; 
    padding-top: 15px;
}

/* Link dla całej karty produktu */
.link-karty-produktu {
    text-decoration: none;
    color: inherit; 
    display: block; 
}

.link-karty-produktu .produkt-karta {
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.link-karty-produktu:hover .produkt-karta {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

/* === STYLE OGÓLNE DLA PODSTRON === */

.strona-podstawowa {
    padding: 40px 0;
}

.strona-podstawowa h2 {
    font-size: 36px;
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 10px;
}

/* === STRONA MYDŁA (mydla.html) - NOWY UKŁAD KATEGORII === */

.kategoria-produktow {
    padding: 40px 30px;
    margin-top: 30px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    overflow: hidden;
}

.strona-podstawowa > .kategoria-produktow:nth-of-type(even) {
    background-color: var(--color-bg-light);
    border: 1px solid transparent;
}

.kategoria-header {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 30px;
}

.kategoria-obrazek {
    flex: 1;
    min-width: 300px;
}

.kategoria-obrazek img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.kategoria-opis {
    flex: 1;
    min-width: 300px;
}

.kategoria-opis h3 {
    font-size: 32px;
}

.kategoria-opis p {
    font-size: 16px;
    color: #555;
    max-width: 600px;
}

.strona-podstawowa > .kategoria-produktow:nth-of-type(even) .kategoria-header {
    flex-direction: row-reverse; 
}

.kategoria-produktow .produkty-grid {
    margin-top: 20px;
    border-top: 1px solid var(--color-border);
    padding-top: 30px;
}

/* === STRONA O NAS (onas.html) === */

.onas-container {
    display: flex;
    flex-wrap: wrap; 
    gap: 30px; 
    margin-top: 20px;
}

.onas-text {
    flex: 2; 
    min-width: 300px; 
}

.onas-image {
    flex: 1; 
    min-width: 300px;
}

.onas-image img {
    width: 100%;
    height: auto;
    border-radius: 8px; 
}

.onas-text ul {
    list-style-type: disc;
    margin-left: 20px;
    margin-bottom: 15px;
}

/* === STRONA FAQ (faq.html) === */

.faq-header-img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 25px; 
}

.faq-item {
    background-color: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: 5px;
    margin-bottom: 10px;
}

.faq-item summary {
    font-size: 18px;
    font-weight: bold;
    padding: 15px;
    cursor: pointer;
    color: var(--color-primary); 
}

.faq-item p {
    padding: 0 15px 15px 15px;
    border-top: 1px solid var(--color-border);
}

/* === STRONA POJEDYNCZEGO PRODUKTU (z szablonu) === */

.strona-produktu {
    padding: 40px 0;
}

.produkt-szczegoly-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 40px; 
}

.produkt-obraz-glowny img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.produkt-info-szczegoly h1 {
    font-size: 40px;
    color: var(--color-dark);
    margin-bottom: 15px;
}

.produkt-cena {
    font-size: 32px;
    font-weight: bold;
    color: var(--color-primary);
    display: block; 
    margin-bottom: 15px;
}

.produkt-dostepnosc {
    display: inline-block;
    padding: 5px 10px;
    font-weight: bold;
    border-radius: 5px;
    margin-bottom: 20px;
}

.produkt-dostepnosc.dostepny {
    background-color: #e8f5e9;
    color: #2c5e1a;
}

.produkt-dostepnosc.niedostepny {
    background-color: #ffebee;
    color: #c62828; 
}

.produkt-opis-krotki {
    font-size: 18px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 20px;
}

.produkt-lista-detali {
    list-style-type: none; 
    margin-bottom: 30px;
}

.produkt-lista-detali li {
    margin-bottom: 8px;
    font-size: 16px;
}

.produkt-lista-detali li strong {
    color: var(--color-primary);
    min-width: 80px;
    display: inline-block;
}

.produkt-instagram-zamow {
    background-color: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 25px;
}

.produkt-instagram-zamow h3 {
    margin-bottom: 10px;
    color: var(--color-dark);
}

.produkt-instagram-zamow p {
    margin-bottom: 20px;
}

/* === PROSTA SEKCJA OPISU PRODUKTU (na dole strony produktu) === */

.opis-szczegolowy {
    background-color: var(--color-bg-light); 
    padding: 40px 0;
    margin-top: 40px; 
    margin-bottom: -40px; 
}

.opis-szczegolowy .container-opis {
    max-width: 900px; 
    margin: 0 auto;
    padding: 0 20px;
}

.opis-szczegolowy h2 {
    font-size: 32px;
    text-align: left; /* Tytuł wyrównany do lewej */
    margin-bottom: 20px;
    color: var(--color-primary); /* Tytuł złoty (jak przycisk) */
}

.opis-szczegolowy p {
    font-size: 17px; 
    line-height: 1.7; 
    margin-bottom: 15px;
    color: #444; 
}

.podsumowanie-opis {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    color: var(--color-primary);
    padding-top: 10px;
}

/* === STYLE DLA SEKCJI WYBORU OPAKOWAŃ === */

.sekcja-wyboru-opakowan {
    padding: 40px 0;
    margin-top: 20px;
    margin-bottom: -40px; /* "Przykleja" się do stopki */
}

.wybierz-opakowanie {
    font-size: 18px !important; 
    font-weight: bold;
    color: var(--color-dark) !important;
    text-align: center;
    margin-top: 20px;
}

.opakowania-opcje {
    margin: 30px 0;
}

.opcja-opakowania {
    display: flex;
    align-items: flex-start;
    gap: 25px; 
    margin-bottom: 25px;
    background-color: var(--color-light); 
    padding: 20px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

.opcja-obrazek {
    flex-basis: 180px; 
    flex-shrink: 0; 
}

.opcja-obrazek img {
    width: 100%;
    border-radius: 8px;
    display: block;
}

.opcja-tresc {
    flex-grow: 1; 
}

.opcja-tresc h3 {
    color: var(--color-primary); 
    font-size: 22px;
    margin-bottom: 5px;
}

.opcja-tresc p {
    font-size: 15px; 
    margin-bottom: 10px;
    color: #444;
}

.opcja-cena {
    display: block;
    font-size: 20px;
    font-weight: bold;
    color: var(--color-dark);
    margin-top: 10px;
}

/* === STYLE DLA MINI-GALERII OPAKOWAŃ (OPCJA VIP) === */

.opcja-obrazek-galeria {
    flex-basis: 180px; 
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap; 
    gap: 6px; 
    align-content: flex-start; 
}

.opcja-obrazek-galeria img {
    width: calc(33.33% - 4px); /* 3 zdjęcia w rzędzie */
    max-width: 100px;
    height: auto;
    aspect-ratio: 1 / 1; 
    object-fit: cover; 
    border-radius: 4px; 
    display: block;

    /* Dodatki dla efektu hover (zoom) */
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

/* Efekt "lupy" (zoom) na zdjęciach w galerii opakowań */
.opcja-obrazek-galeria img:hover {
    transform: scale(1.8); /* Powiększa obrazek o 80% */
    z-index: 10; /* Wysuwa obrazek na sam wierzch */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* Dodaje cień */
}

/* === SEKCJA KATEGORII NA STRONIE GŁÓWNEJ === */

/* === SEKCJA KATEGORII (W JEDNYM RZĘDZIE Z ZACHOWANIEM LINKÓW) === */

.kategorie-glowne {
    padding: 40px 0;
    background-color: var(--color-bg-light);
}

.kategorie-glowne h2 {
    text-align: center;
    font-size: 32px;
    margin-bottom: 30px;
    color: #5a4a42;
}

/* KONTENER FLEX - Ustawia linki obok siebie */
.kategorie-flex-row {
    display: flex;            /* To robi jeden rząd */
    justify-content: space-between;
    gap: 20px;                /* Odstępy między elementami */
}

/* STYL DLA LINKU (To on jest teraz kolumną) */
.kategorie-flex-row .link-karty-produktu {
    flex: 1;                  /* Każdy link zajmuje tyle samo miejsca */
    text-decoration: none;    /* Usuwa podkreślenie linku */
    color: inherit;           /* Tekst dziedziczy kolor */
    display: flex;            /* Żeby karta w środku rozciągała się na całą wysokość */
}

/* WYGLĄD KARTY W ŚRODKU */
.kategorie-flex-row .produkt-karta {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    width: 100%;              /* Karta wypełnia cały link */
    display: flex;
    flex-direction: column;   /* Układ pionowy wewnątrz karty (foto nad tekstem) */
}

.kategorie-flex-row .produkt-karta:hover {
    transform: translateY(-5px);
}

.kategorie-flex-row .produkt-karta img {
    width: 100%;
    height: 200px;            /* Stała wysokość zdjęć, żeby było równo */
    object-fit: cover;
}

.kategorie-flex-row .karta-tresc {
    padding: 20px;
    text-align: center;
    flex-grow: 1;             /* Dopycha tekst ładnie */
}

/* --- RESPONSYWNOŚĆ (TELEFONY) --- */
@media (max-width: 900px) {
    .kategorie-flex-row {
        flex-direction: column; /* Na telefonie jeden pod drugim */
    }
    
    .kategorie-flex-row .produkt-karta img {
        height: 250px;
    }
}

/* --- RESPONSYWNOŚĆ (Telefony i Tablety) --- */
/* Poniżej 900px szerokości ekranu, zmień układ na kolumnę */
@media (max-width: 900px) {
    .categories-row {
        flex-direction: column; /* Elementy jeden pod drugim */
    }

    .category-card img {
        height: 250px; /* Nieco wyższe zdjęcia na telefonie */
    }
}



/* === SEKCJA "DLACZEGO WARTO" (2 KOLUMNY) NA STRONIE GŁÓWNEJ === */

.wartosci-glowne-dwie-kolumny {
    padding: 40px 0;
    background-color: var(--color-bg-light); /* Dajemy jasne tło dla całej sekcji */
}

/* Używamy Flexboxa do stworzenia 2 kolumn */
.wartosci-glowne-dwie-kolumny .container {
    display: flex;
    justify-content: center; /* Wyśrodkuj zawartość kontenera */
    align-items: center; 
    gap: 40px; 
}

/* Kolumna ze zdjęciem */
.wartosci-zdjecie {
    /* flex: 1;  <-- USUŃ TĘ LINIJKĘ */
    width: 400px; /* ZMIANA: Ustawiamy stałą szerokość dla zdjęcia */
    flex-shrink: 0; /* Nie pozwalamy, by się kurczyło poniżej tej szerokości */
    margin-right: 40px; /* Dodajemy odstęp po prawej, aby tekst się nie "przykleił" */
    min-width: 300px; /* Pozostawiamy min-width dla mniejszych ekranów */
}

.wartosci-zdjecie img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Kolumna z tekstem */
.wartosci-tekst {
    flex: 1; /* Zajmuje 50% miejsca */
    min-width: 300px;
}

.wartosci-tekst h2 {
    text-align: left; /* Tytuł do lewej */
    font-size: 32px;
    margin-bottom: 30px;
    color: var(--color-dark);
}

/* Lista z wartościami (już nie siatka) */
.wartosci-lista {
    display: flex;
    flex-direction: column; /* Układamy elementy w pionie */
    gap: 25px; /* Odstęp między każdą wartością */
}

/* Pojedynczy element (ikona + tekst) */
.wartosc-item {
    display: flex; /* Układamy ikonę obok tekstu */
    align-items: flex-start; /* Wyrównujemy do góry */
    gap: 20px; /* Odstęp między ikoną a tekstem */
    text-align: left; /* Tekst do lewej */
    padding: 0; /* Kasujemy stary padding */
}

.wartosc-ikona {
    font-size: 30px; /* Mniejsza, bardziej subtelna ikona */
    margin-bottom: 0;
    color: var(--color-primary); /* Dajemy ikonie złoty kolor */
}

/* Dodatkowy kontener na tekst (h3 i p), aby poprawnie się układały */
.wartosc-item-tekst {
    flex: 1;
}

.wartosc-item h3 {
    font-size: 20px;
    color: var(--color-dark); /* Ciemny nagłówek, będzie czytelniejszy */
    margin-bottom: 5px;
}

.wartosc-item p {
    font-size: 16px;
    color: #555;
    line-height: 1.5;
}

/* Responsywność: na telefonie kolumny będą jedna pod drugą */
@media (max-width: 768px) {
    .wartosci-glowne-dwie-kolumny .container {
        flex-direction: column; /* Zmieniamy na układ pionowy */
    }
}

/* === STOPKA (FOOTER) === */

footer {
    background-color: var(--color-dark); 
    color: #bbb;
    padding: 30px 0;
    margin-top: 40px;
}

.footer-content {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    flex-wrap: wrap; 
    gap: 15px;
}

.footer-content p {
    margin: 0;
}

.social-links a {
    color: #bbb;
    text-decoration: none;
    font-weight: bold;
    margin-left: 20px;
    transition: color 0.3s ease;
}

.social-links a:hover {
    color: var(--color-light); 
}

/* === RESPONSIVE (poprawki dla telefonów) === */

@media (max-width: 800px) {
    /* Strona produktu - 1 kolumna */
    .produkt-szczegoly-grid {
        grid-template-columns: 1fr; 
    }
}

@media (max-width: 768px) {
    /* Strona "Mydła" - nagłówek kategorii jeden pod drugim */
    .kategoria-header,
    .strona-podstawowa > .kategoria-produktow:nth-of-type(even) .kategoria-header {
        flex-direction: column; 
    }
    
    .kategoria-produktow {
        padding: 20px 15px;
    }
}

@media (max-width: 600px) {
    /* Stopka - jedna pod drugą */
    .footer-content {
        flex-direction: column; 
        justify-content: center;
        text-align: center;
    }
    
    .social-links a {
        margin: 0 10px; 
    }

    /* Nagłówek - logo nad nawigacją (prosta wersja) */
    header .container {
        flex-direction: column;
        gap: 15px;
    }

    /* Opcje opakowań - obrazek nad treścią */
    .opcja-opakowania {
        flex-direction: column; 
    }

    .opcja-obrazek {
        flex-basis: auto; 
        width: 100%; 
    }

    /* Galeria VIP - poprawka na telefon (zdjęcia blisko siebie) */
.opcja-obrazek-galeria {
    flex-direction: row;
    justify-content: flex-start; /* Dosuwamy zdjęcia do lewej (zamiast rozrzucać) */
    gap: 10px; /* Stały, ładny odstęp między nimi */
}

.opcja-obrazek-galeria img {
    /* Obliczamy szerokość tak, żeby 3 zdjęcia zmieściły się idealnie w rzędzie z odstępami */
    width: calc(33.33% - 7px); 
    max-width: none;
}
}

/* ========================================= */
/* === WERSJA MOBILNA (TELEFONY) - POPRAWIONA === */
/* ========================================= */

@media (max-width: 600px) {

    /* 1. Nagłówek i Menu */
    header .container {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    nav ul {
        padding: 0;
        margin: 0;
    }

    nav ul li {
        display: block;
        margin: 10px 0;
        margin-left: 0;
    }

    /* 2. Zmniejszenie wielkich napisów */
    .hero {
        padding: 60px 0;
    }
    .hero h1 {
        font-size: 32px;
    }
    .produkt-info-szczegoly h1 {
        font-size: 28px;
    }

    /* 3. Poprawka galerii VIP (To o co pytasz) */
    .opcja-obrazek-galeria {
        display: flex;
        flex-direction: row; /* Wymuszamy rząd (poziomo) */
        justify-content: flex-start; /* Dosuwamy do lewej (żeby nie było dziury) */
        gap: 10px; /* Mały odstęp między zdjęciami */
        width: 100%;
    }
    
    .opcja-obrazek-galeria img {
        width: 30%; /* Każde zdjęcie zajmuje około 1/3 szerokości */
        height: auto;
        max-width: none; /* Usuwamy ograniczenia */
        aspect-ratio: 1 / 1; /* Kwadratowe */
    }
    
    /* 4. Układ kart opakowań na telefonie (obrazek pod tekstem) */
    .opcja-opakowania {
        flex-direction: column;
    }
    
    .opcja-obrazek {
        width: 100%;
    }

    /* --- NAPRAWA MARGINESÓW NA TELEFONIE --- */
    
    /* Dodajemy marginesy do głównego kontenera strony */
    .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
        width: auto; /* Upewniamy się, że szerokość się dopasuje */
    }

    /* Dodatkowo upewniamy się, że sekcja ze szczegółami produktu ma odstęp */
    .produkt-info-szczegoly {
        padding: 0 10px; /* Dodatkowy lekki odstęp dla tekstu produktu */
    }

    
    
}

/* ========================================= */
/* === WERSJA MOBILNA (TELEFONY) === */
/* ========================================= */

@media (max-width: 600px) {

    /* 1. Nagłówek i Menu */
    header .container {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    nav ul {
        padding: 0;
        margin: 0;
    }

    nav ul li {
        display: block;
        margin: 10px 0;
        margin-left: 0;
    }

    /* 2. Zmniejszenie wielkich napisów */
    .hero {
        padding: 60px 0;
    }
    .hero h1 {
        font-size: 32px;
    }
    .produkt-info-szczegoly h1 {
        font-size: 28px;
    }

    /* 3. Poprawka galerii VIP */
    .opcja-obrazek-galeria {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        gap: 10px;
        width: 100%;
    }
    
    .opcja-obrazek-galeria img {
        width: 30%;
        height: auto;
        max-width: none;
        aspect-ratio: 1 / 1;
    }
    
    /* 4. Układ kart opakowań na telefonie */
    .opcja-opakowania {
        flex-direction: column;
    }
    
    .opcja-obrazek {
        width: 100%;
    }

    /* Naprawa marginesów */
    .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
        width: auto;
    }

    .produkt-info-szczegoly {
        padding: 0 10px;
    }

    /* --- NAPRAWA STRONY DOSTAWY NA TELEFONIE --- */
    
    /* Wyśrodkowanie treści w kartach */
    .info-box-dostawa {
        text-align: center; /* Ikonka, nagłówki i tekst lądują na środku */
        padding: 20px; /* Nieco mniejszy padding na małym ekranie */
    }

    /* Dodatkowa poprawka dla listy metod dostawy, żeby się ładnie układała pionowo */
    .metoda-item {
        flex-direction: column; /* Cena ląduje pod nazwą metody */
        gap: 5px;
        text-align: center;
    }

    /* Upewniamy się, że elementy listy też są na środku */
    .lista-platnosci li, .metoda-nazwa span {
        text-align: center;
        display: block; /* Żeby span zachowywał się jak blok i słuchał centrowania */
    }

    /* --- NAPRAWA ZDJĘCIA NA STRONIE GŁÓWNEJ (Dlaczego warto) --- */
    
    .wartosci-glowne-dwie-kolumny .container {
        flex-direction: column; /* Układa zdjęcie nad tekstem */
        padding: 0 20px; /* Marginesy bezpieczeństwa */
    }

    .wartosci-zdjecie {
        width: 100%;       /* KLUCZOWE: Zmienia sztywne 400px na pełną szerokość ekranu */
        min-width: auto;   /* Resetuje blokadę minimalnej szerokości */
        margin-right: 0;   /* Usuwa margines po prawej (potrzebny tylko na komputerze) */
        margin-bottom: 30px; /* Dodaje odstęp pod zdjęciem, żeby nie stykało się z tekstem */
    }

} /* <--- KONIEC MEDIA QUERY (Wersji mobilnej) */


/* ========================================= */
/* === NOWA SEKCJA ZAMAWIANIA (GEOMETRIA) === */
/* ========================================= */

.produkt-instagram-zamow {
    text-align: left;
    background-color: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-sizing: border-box;
    
    /* ZMIANA TUTAJ: (Góra 25, Prawa 25, Dół 10, Lewa 25) */
    padding: 25px 25px 10px 25px; 
}

.produkt-instagram-zamow h3 {
    margin-bottom: 10px;
    color: var(--color-dark);
}

.produkt-instagram-zamow p {
    margin-bottom: 20px;
}

/* --- GŁÓWNY PRZYCISK (GÓRNY) --- */
.przycisk-insta-duzy {
    display: block;        /* Rozciąga się na całą dostępną szerokość */
    width: 100%;
    max-width: 340px;      /* Maksymalna szerokość */
    box-sizing: border-box;
    
    background-color: var(--color-primary);
    color: white;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    padding: 14px;
    
    margin-bottom: 15px !important; /* Wymuszony odstęp */
    
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.3s, transform 0.2s;
    border: none;
    cursor: pointer;
}

.przycisk-insta-duzy:hover {
    background-color: var(--color-primary-hover);
    transform: translateY(-2px);
    color: white;
}

/* --- KONTENER NA DOLNE PRZYCISKI --- */
.przyciski-dolne-kontener {
    display: flex;         /* Układ obok siebie */
    gap: 12px;             /* Odstęp między przyciskami */
    width: 100%;
    max-width: 340px;      /* Ta sama szerokość co górny! */
    box-sizing: border-box;
}

/* --- MAŁE PRZYCISKI --- */
/* --- MAŁE PRZYCISKI (POPRAWIONE CENTROWANIE) --- */
.przycisk-maly {
    flex: 1;                /* Każdy zajmuje połowę dostępnego miejsca */
    display: flex;
    justify-content: center; /* Centrowanie w poziomie (całego bloku) */
    align-items: center;     /* Centrowanie w pionie */
    
    text-align: center;      /* !!! TO JEST KLUCZOWE: centruje tekst, gdy się złamie */
    
    padding: 10px 5px;       /* Zmniejszyłem padding z 12px na 10px/5px, żeby było więcej miejsca na tekst */
    font-size: 14px;         /* Odrobinę mniejsza czcionka dla bezpieczeństwa */
    font-weight: bold;
    
    background-color: var(--color-primary);
    color: white;
    text-decoration: none;
    border-radius: 6px;
    transition: background-color 0.3s, transform 0.2s;
    box-sizing: border-box;
}

.przycisk-maly:hover {
    background-color: var(--color-primary-hover);
    transform: translateY(-2px);
}

/* Kolory specyficzne (wszystkie złote) */
.przycisk-sms, .przycisk-tel {
    background: var(--color-primary);
}

.numer-info {
    font-size: 13px;
    color: #888;
    margin-top: 15px;
    text-align: left;
    font-style: italic;
}


/* ========================================= */
/* === LINKI POD ZDJĘCIEM (STYL BUTTONÓW) === */
/* ========================================= */

.linki-pod-zdjeciem {
    margin-top: 20px;       /* Większy odstęp od zdjęcia */
    display: flex;          /* Układamy obok siebie */
    gap: 15px;              /* Odstęp między przyciskami */
    justify-content: space-between;
}

.maly-link {
    flex: 1;                /* Każdy zajmuje połowę miejsca */
    display: flex;          /* Żeby wyśrodkować tekst i ikonę */
    justify-content: center;
    align-items: center;
    
    padding: 12px 10px;     /* Wygodne pole kliknięcia */
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    
    /* Wygląd "Ramkowy" (Outline) */
    background-color: transparent;      /* Przezroczyste tło */
    border: 2px solid var(--color-primary); /* Złota, solidna ramka */
    color: var(--color-primary);        /* Złoty tekst */
    
    text-decoration: none;  /* Bez podkreślenia */
    border-radius: 6px;     /* Zaokrąglone rogi (jak w innych przyciskach) */
    transition: all 0.3s ease;
}

/* Efekt po najechaniu myszką */
.maly-link:hover {
    background-color: var(--color-primary); /* Wypełnia się złotem */
    color: white;                           /* Tekst zmienia się na biały */
    transform: translateY(-2px);            /* Lekko się unosi */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);  /* Dodaje cień */
}


/* ========================================= */
/* === NOWA STRONA DOSTAWY (GRID & KARTY) === */
/* ========================================= */

.naglowek-sekcji-dostawa {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 40px auto;
}

.naglowek-sekcji-dostawa p {
    font-size: 18px;
    color: #666;
}

/* Układ siatki (Grid) - WYŚRODKOWANY */
.dostawa-grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsywne kolumny */
    gap: 25px;
    
    /* --- TE 3 LINIE CENTRUJĄ KARTY: --- */
    max-width: 850px; /* Ograniczamy szerokość, żeby karty nie były gigantyczne */
    margin: 0 auto;   /* To centruje cały kontener na środku ekranu */
    justify-content: center; /* Dodatkowe zabezpieczenie */
}

/* Wygląd pojedynczego kafelka */
.info-box-dostawa {
    background-color: #fff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03); /* Bardzo delikatny cień */
    transition: transform 0.3s ease;
}

.info-box-dostawa:hover {
    transform: translateY(-5px); /* Lekkie uniesienie po najechaniu */
    border-color: var(--color-primary); /* Złota ramka po najechaniu */
}

/* Ikona na górze kafelka */
.ikona-duza {
    font-size: 40px;
    margin-bottom: 15px;
    display: block;
}

.info-box-dostawa h3 {
    color: var(--color-primary);
    font-size: 24px;
    margin-bottom: 20px;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 10px;
}

/* Styl listy metod dostawy */
.metoda-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px dotted #eee;
}

.metoda-nazwa strong {
    display: block;
    color: var(--color-dark);
}

.metoda-nazwa span {
    font-size: 13px;
    color: #888;
}

.metoda-cena {
    font-weight: bold;
    color: var(--color-primary);
    font-size: 18px;
    white-space: nowrap; /* Cena się nie łamie */
}

.darmowa-dostawa-info {
    margin-top: 15px;
    font-weight: bold;
    color: #2c5e1a; /* Ciemna zieleń */
    text-align: center;
    background: #e8f5e9;
    padding: 8px;
    border-radius: 5px;
}

/* Lista płatności */
.lista-platnosci {
    list-style: none;
    padding: 0;
}

.lista-platnosci li {
    margin-bottom: 15px;
}

.lista-platnosci strong {
    display: block;
    color: var(--color-dark);
}

.lista-platnosci span {
    font-size: 14px;
    color: #666;
}

/* Kafelek "Pełna szerokość" dla sekcji EKO */
.pelna-szerokosc {
    grid-column: 1 / -1; /* Rozciąga się na całą szerokość siatki */
    text-align: center;
    background-color: var(--color-bg-light); /* Lekko beżowe tło dla wyróżnienia */
}

.eko-cechy {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin: 20px 0;
    font-weight: bold;
    color: #5a4a42;
}

.maly-tekst-eko {
    font-style: italic;
    color: #777;
}

/* Responsywność dla EKO sekcji na telefonie */
@media (max-width: 600px) {
    .eko-cechy {
        flex-direction: column;
        gap: 10px;
    }
}


/* ================================================== */
/* === NOWE MENU MOBILNE (Kapsułki & Mniejsze Logo) === */
/* ================================================== */

@media (max-width: 600px) {

    /* 1. Zmniejszamy logo na telefonie (żeby nie zajmowało pół ekranu) */
    .logo-img {
        height: 50px !important; /* Mniejsze, zgrabniejsze logo */
        width: auto;
    }

    /* 2. Zmieniamy układ nagłówka */
    header .container {
        gap: 10px !important; /* Mniejszy odstęp między logo a menu */
        padding-bottom: 5px;  /* Odrobinę miejsca na dole */
    }

    /* 3. Nowy układ linków (Obok siebie, a nie pod sobą) */
    nav ul {
        display: flex !important;       /* Układ elastyczny */
        flex-wrap: wrap !important;     /* Pozwala linkom spadać do nowej linii, jeśli się nie zmieszczą */
        justify-content: center !important; /* Wyśrodkowanie */
        gap: 10px !important;           /* Odstępy między przyciskami */
        width: 100%;
    }

    /* 4. Wygląd "Kapsułki" dla każdego linku */
    nav ul li {
        display: inline-block !important;
        margin: 0 !important; /* Kasujemy stare marginesy */
    }

    nav ul li a {
        display: block;
        font-size: 13px !important;    /* Nieco mniejszy tekst */
        padding: 8px 15px !important;  /* Wygodne pole do kliknięcia */
        
        background-color: var(--color-bg-light); /* Jasne tło "kapsułki" */
        border: 1px solid var(--color-border);   /* Delikatna ramka */
        border-radius: 20px;           /* Zaokrąglone boki (pastylka) */
        
        color: var(--color-dark) !important;
        text-decoration: none;
        transition: all 0.2s;
    }

    /* Wyróżnienie aktywnej strony (np. jesteś w "O nas") */
    nav ul li a.active {
        background-color: var(--color-primary) !important; /* Złote tło */
        color: white !important; /* Biały tekst */
        border-color: var(--color-primary) !important;
    }
}

/* === IKONA KOSZYKA W MENU === */
.menu-koszyk {
    position: relative; /* Żeby licznik mógł być pozycjonowany względem ikony */
    display: inline-block;
}

#licznik-koszyka {
    background-color: #dc2743; /* Czerwone kółeczko */
    color: white;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 50%; /* Robi idealne kółko */
    position: absolute;
    top: -8px;
    right: -10px;
    display: none; /* Ukryty, gdy koszyk jest pusty */
}


/* ========================================= */
/* === NOWY UKŁAD PRZYCISKÓW (UKŁAD PUZZLE) === */
/* ========================================= */

/* Kontener trzymający lewą i prawą stronę */
.uklad-przyciskow-puzzle {
    display: flex;          /* Układamy elementy obok siebie */
    gap: 10px;              /* Odstęp między lewą a prawą stroną */
    margin-top: 15px;
    height: 110px;          /* Ustalamy sztywną wysokość całej sekcji */
}

/* LEWA STRONA: Duży przycisk (ZMNIEJSZONY TEKST I IKONA) */
.przycisk-koszyk-big {
    flex: 0.6 !important;    
    background-color: var(--color-primary); 
    color: white;
    border: none;
    border-radius: 8px;
    
    /* USTAWIAMY ROZMIAR TAKI SAM JAK W MAŁYCH PRZYCISKACH: */
    font-size: 17px !important;  /* Zmniejszamy (było 20/22px) */
    font-weight: bold;           /* Zmieniamy z 800 na bold (trochę lżej) */
    
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: background-color 0.3s;
    height: 100%;
    padding: 5px;
    line-height: 1.2;
}

/* Zmniejszamy też ikonę wózka, żeby pasowała do mniejszego tekstu */
.przycisk-koszyk-big span {
    font-size: 28px !important; /* Zmniejszamy z 42px na 28px */
    margin-bottom: 5px;
    display: block;
}

.przycisk-koszyk-big:hover {
    filter: brightness(0.9);
}

/* PRAWA STRONA: Kolumna na małe przyciski (TERAZ DŁUŻSZE) */
.prawa-kolumna-stack {
    /* ZMIANA TUTAJ: Zwiększamy z 1 na 1.4 */
    flex: 1.4 !important;    /* Zajmuje aż 65% szerokości -> przyciski będą długie */
    
    display: flex;
    flex-direction: column; 
    gap: 10px;
    height: 100%;
}

/* PRAWA STRONA: Małe przyciski (POWIĘKSZONY TEKST) */
.przycisk-stack-maly {
    flex: 1;                
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    
    /* Kolory (możesz tu wpisać swoje specyficzne, jeśli używasz klas .btn-sms itp.) */
    background-color: #d4c5a9; 
    color: white;
    
    /* POWIĘKSZAMY TEKST DO ROZMIARU DUŻEGO PRZYCISKU: */
    font-size: 17px !important;  /* Powiększamy (było ok. 14px) */
    font-weight: bold;
    
    text-decoration: none;
    border-radius: 8px;
    transition: transform 0.2s;
}

/* Opcjonalnie: kolory specyficzne dla SMS i Tel, jeśli chcesz */
.btn-sms { background-color: var(--color-primary); opacity: 0.9; }
.btn-tel { background-color: var(--color-primary); opacity: 0.9; }

.przycisk-stack-maly:hover {
    transform: translateY(-2px);
    opacity: 1;
}

/* --- WERSJA NA TELEFON (Responsywność) --- */
/* Na bardzo małych ekranach przyciski mogą być za wąskie, więc wracamy do pionu */
@media (max-width: 350px) {
    .uklad-przyciskow-puzzle {
        flex-direction: column; /* Jeden pod drugim */
        height: auto;           /* Wysokość automatyczna */
    }
    .przycisk-koszyk-big {
        height: 60px;           /* Stała wysokość na telefonie */
    }
    .prawa-kolumna-stack {
        height: auto;
    }
    .przycisk-stack-maly {
        height: 50px;           /* Stała wysokość małych */
    }
}


/* ========================================= */
/* === WYGLĄD LISTY W KOSZYKU (ZDJĘCIA) === */
/* ========================================= */

.koszyk-item {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding: 15px 0;
    gap: 15px; /* Odstęp między zdjęciem a tekstem */
}

/* Kontener na zdjęcie (żeby było kwadratowe) */
.koszyk-img-wrapper {
    width: 60px;
    height: 60px;
    flex-shrink: 0; /* Zapobiega zgniataniu zdjęcia */
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #ddd;
    background: #fff;
}

/* Samo zdjęcie */
.koszyk-miniatura {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Dopasowuje zdjęcie bez rozciągania */
}

/* Nazwa i cena */
.koszyk-info {
    flex-grow: 1; /* Zajmuje dostępne miejsce */
    display: flex;
    flex-direction: column;
}

.koszyk-cena-jedn {
    font-size: 13px;
    color: #888;
}

/* Przyciski +/- */
.koszyk-kontrola {
    display: flex;
    align-items: center;
    gap: 8px;
}

.koszyk-kontrola button {
    width: 28px;
    height: 28px;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
    border-radius: 4px;
    font-weight: bold;
}

.koszyk-kontrola .usun-btn {
    border: none;
    background: transparent;
    font-size: 18px;
    margin-left: 5px;
}

/* Responsywność dla małych telefonów */
@media (max-width: 400px) {
    .koszyk-item {
        flex-wrap: wrap; /* Pozwoli zawijać elementy */
    }
    .koszyk-kontrola {
        margin-left: auto; /* Przesunie kontrolki na prawo */
    }
}

/* ========================================= */
/* === PRZYCISKI W KOSZYKU (FINALIZACJA) === */
/* ========================================= */

.akcje-koszyka {
    margin-top: 30px;
    display: flex;
    flex-direction: column; /* Układa elementy jeden pod drugim (tekst nad przyciskami) */
    align-items: flex-end;  /* Wyrównuje wszystko do prawej strony */
    gap: 15px;              /* Odstęp między napisem a przyciskami */
}

/* Kontener na same przyciski */
.koszyk-final-btns {
    display: flex;          /* Układa przyciski obok siebie */
    gap: 15px;              /* Odstęp między nimi */
    width: 100%;            /* Kontener zajmuje dostępną szerokość... */
    max-width: 400px;       /* ...ale nie więcej niż 400px (żeby nie były gigantyczne) */
}

/* Wygląd wspólny dla obu przycisków */
.btn-final {
    flex: 1;                /* KLUCZOWE: Oba przyciski dzielą się miejscem po równo! */
    padding: 15px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;  /* Dla linków */
    display: flex;          /* Żeby wyśrodkować tekst i ikonki */
    justify-content: center;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s, background-color 0.2s;
}

/* Kolory (możesz zmienić) */
.btn-final-insta { background-color: var(--color-primary); }
.btn-final-sms { background-color: var(--color-primary); } /* Nieco jaśniejszy dla kontrastu, lub taki sam */

.btn-final:hover {
    transform: translateY(-3px); /* Lekkie uniesienie */
    filter: brightness(0.9);
}

/* Na telefonie ustawiamy je jeden pod drugim dla wygody */
@media (max-width: 500px) {
    .akcje-koszyka {
        align-items: center; /* Na telefonie centrujemy wszystko */
    }
    .koszyk-final-btns {
        max-width: 100%;
        flex-direction: column; /* Jeden pod drugim */
    }
}


/* Styl dla ceny stojącej obok przycisków */
.cena-przy-ilosci {
    font-weight: bold;           /* Pogrubienie */
    color: var(--color-primary); /* Twój złoty kolor */
    font-size: 16px;             /* Wyraźny rozmiar */
    margin-right: 15px;          /* Odstęp od przycisku "-" */
}

/* Na bardzo małych telefonach cena może spaść do nowej linii, żeby nie było ciasno */
@media (max-width: 400px) {
    .koszyk-kontrola {
        flex-wrap: wrap;       /* Pozwala elementom się zawijać */
        justify-content: flex-end;
    }
    .cena-przy-ilosci {
        width: 100%;           /* Cena zajmie całą linię */
        text-align: right;     /* Wyrównana do prawej */
        margin-right: 0;
        margin-bottom: 5px;    /* Odstęp od przycisków pod nią */
    }
}


/* ========================================= */
/* === FORMULARZ I PASEK W KOSZYKU === */
/* ========================================= */

/* Wygląd pól formularza */
.input-dane {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit; /* Żeby czcionka była taka sama jak na stronie */
    box-sizing: border-box; /* Żeby padding nie rozpychał szerokości */
    transition: border-color 0.3s;
}

/* Po kliknięciu w pole robi się złote */
.input-dane:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 5px rgba(212, 197, 169, 0.5);
}

/* Pasek postępu - animacja sukcesu */
.pasek-pelny {
    background-color: #4CAF50 !important; /* Zielony kolor gdy 100% */
}