/* ==========================================================================
   1. WYGLĄD NAGŁÓWKA (HEADER)
   ========================================================================== */
body.single-product .site-header.header-one {
    /* Ustawia tło nagłówka: warstwa przyciemniająca + zdjęcie palmy */
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
                url('https://www.projektpodrozy.pl/wp-content/uploads/2024/08/Czerwona-Palma-1.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
    border-bottom: none !important; /* Usuwa linię pod nagłówkiem */
}

/* ==========================================================================
   2. GŁÓWNY PRZYCISK "DODAJ DO KOSZYKA"
   ========================================================================== */
/* Podstawowy wygląd przycisku */
body.single-product button.single_add_to_cart_button.button.alt {
    background-color: #ff6900 !important; /* Twój główny pomarańczowy */
    color: #ffffff !important;            /* Biały tekst */
    border: none !important;              /* Usunięcie obramowania motywu */
    border-radius: 5px !important;        /* Zaokrąglenie rogów */
    font-weight: bold !important;         /* Pogrubiona czcionka */
    font-size: 18px !important;           /* Rozmiar tekstu */
    padding: 15px 40px !important;        /* Wielkość przycisku (wewnętrzne odstępy) */
    text-transform: none !important;      /* Wyłączenie wielkich liter */
    transition: all 0.3s ease !important; /* Płynna animacja */
    width: 100%;                          /* Przycisk na szerokość kontenera */
    max-width: 400px;                     /* Maksymalna szerokość (żeby nie był za duży na PC) */
    margin-top: 10px;                     /* Odstęp od ceny */
}

/* Wygląd przycisku po najechaniu myszką (Hover) */
body.single-product button.single_add_to_cart_button.button.alt:hover {
    background-color: #e65c00 !important;          /* Ciemniejszy pomarańcz */
    transform: translateY(-2px);                   /* Lekkie uniesienie */
    box-shadow: 0 5px 15px rgba(255, 105, 0, 0.3); /* Cień pod przyciskiem */
    color: #ffffff !important;
}

/* ==========================================================================
   3. CENA PRODUKTU
   ========================================================================== */
/* Kwota (np. 49.99) */
body.single-product p.price .woocommerce-Price-amount {
    color: #333333 !important;   /* Ciemny kolor */
    font-weight: 800 !important; /* Bardzo gruba czcionka */
    font-size: 26px !important;  /* Powiększenie ceny */
}

/* Symbol waluty (zł) */
body.single-product p.price .woocommerce-Price-currencySymbol {
    font-size: 0.7em !important; /* Symbol mniejszy od kwoty */
    vertical-align: top;         /* Wyrównanie do góry */
}

/* ==========================================================================
   4. CZYSZCZENIE ELEMENTÓW WOOCOMMERCE (SKU, Kategorie, Tagi)
   ========================================================================== */
/* Ukrywa cały blok pod przyciskiem (SKU, Kategoria itp.) */
body.single-product .product_meta {
    display: none !important;
}

/* ==========================================================================
   5. UKŁAD OPISU (Zastąpienie zakładek długą treścią + Separator)
   ========================================================================== */
/* Ukrywa przyciski zakładek (te, w które się klika: "Opis", "Opinie") */
body.single-product .woocommerce-tabs ul.tabs {
    display: none !important;
}

/* Stylizacja kontenera z opisem - tutaj dodajemy linię oddzielającą */
body.single-product .woocommerce-tabs {
    border-top: 1px solid #e6e6e6 !important; /* Szara linia oddzielająca */
    padding-top: 60px !important;              /* Odstęp wewnątrz (nad tekstem) */
    margin-top: 60px !important;               /* Odstęp na zewnątrz (nad linią) */
    clear: both !important;                    /* Zabezpieczenie układu */
}

/* Wymuszenie widoczności treści opisu (otwiera panel na stałe) */
body.single-product .woocommerce-tabs .panel {
    display: block !important;          /* Pokazuje treść */
    border: none !important;            /* Usuwa ramki motywu */
    box-shadow: none !important;        /* Usuwa cienie motywu */
    background: transparent !important; /* Przezroczyste tło */
    padding: 0 !important;              /* Reset marginesów */
}

/* Ukrywa sekcję opinii (jeśli nie chcesz komentarzy pod opisem) */
body.single-product #reviews {
    display: none !important;
}

/* Usuwa nagłówek "Opis", który WooCommerce dodaje automatycznie */
body.single-product .woocommerce-Tabs-panel--description h2 {
    display: none !important;
}

/* ==========================================================================
   6. ZDJĘCIA I GALERIA (Blokada lupy/zoomu)
   ========================================================================== */
/* Ukrywa ikonkę lupy w rogu zdjęcia */
.woocommerce-product-gallery__trigger {
    display: none !important;
}

/* Fizycznie ukrywa warstwę powiększającą zdjęcie */
.woocommerce-product-gallery .zoomImg {
    display: none !important;
}

/* Blokuje klikanie w zdjęcie (nie otworzy się Lightbox/Galeria pełnoekranowa) */
.woocommerce-product-gallery__image a {
    cursor: default !important; /* Zwykły kursor zamiast "łapki" */
    pointer-events: none;       /* Całkowita blokada kliknięcia */
}

/* ==========================================================================
   7. STYLIZACJA KOMUNIKATÓW I ALERTÓW (POPRAWIONA WERSJA V2)
   ========================================================================== */

/* 1. Ustawienie głównego kontenera */
.woocommerce-error, 
.woocommerce-info, 
.woocommerce-message {
    display: flex !important;                 /* Ustawia elementy w rzędzie */
    flex-wrap: wrap !important;               /* Pozwala na zawijanie na małych ekranach */
    align-items: center !important;           /* Centruje w pionie */
    background-color: #fff8e5 !important;     /* Jasne tło */
    border-top: 3px solid #ff6900 !important; /* Pomarańczowy pasek */
    color: #333333 !important;
    border-radius: 5px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
    list-style: none !important;
    margin-bottom: 20px !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
}

/* 2. Ikona przed tekstem */
.woocommerce-error::before, 
.woocommerce-info::before, 
.woocommerce-message::before {
    margin-right: 15px !important;
    color: #ff6900 !important;
    font-size: 1.2em !important;
    order: -1 !important; /* Zawsze pierwsza */
}

/* 3. Naprawa tekstów wewnątrz (dla błędów, które używają <li>) */
.woocommerce-error li,
.woocommerce-info li,
.woocommerce-message li {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 4. PRZYCISK "ZOBACZ KOSZYK" */
.woocommerce-error .button, 
.woocommerce-info .button, 
.woocommerce-message .button {
    background-color: #ff6900 !important;
    color: #ffffff !important;
    border-radius: 5px !important;
    font-weight: bold !important;
    text-transform: none !important;
    padding: 10px 20px !important;
    
    /* KLUCZOWE ZMIANY DLA POZYCJONOWANIA: */
    position: static !important;  /* To usuwa "brzydką ramkę" motywu! */
    float: none !important; 
    margin-left: auto !important; /* To magiczna linia: dociąga przycisk do prawej */
    margin-right: 0 !important;
    margin-top: 5px !important;   /* Odstęp na mobilkach */
    margin-bottom: 5px !important;
    
    border: none !important;      /* Usuwa ramkę */
    outline: none !important;     /* Usuwa obrys */
    transition: all 0.3s ease !important;
}

/* 5. Hover na przycisku (Usuwamy brzydkie ramki) */
.woocommerce-error .button:hover, 
.woocommerce-info .button:hover, 
.woocommerce-message .button:hover {
    background-color: #e65c00 !important;
    color: #ffffff !important;
    border: none !important;        /* Upewniamy się, że nie ma ramki */
    outline: none !important;       /* Upewniamy się, że nie ma obrysu */
    box-shadow: none !important;    /* Upewniamy się, że nie ma dziwnego cienia */
    text-decoration: none !important;
}

/* 6. Linki tekstowe */
.woocommerce-error a:not(.button),
.woocommerce-info a:not(.button),
.woocommerce-message a:not(.button) {
    color: #ff6900 !important;
    text-decoration: underline;
}

/* ==========================================================================
   8. POPRAWKA SZEROKOŚCI PRZYCISKÓW W OPISIE
   ========================================================================== */
/* Dzięki temu przyciski "Chcę tę mapę" w treści nie rozciągają się na 100% */
.woocommerce-tabs form.cart button.single_add_to_cart_button {
    width: auto !important;
    display: inline-block !important;
    margin-top: 0 !important;
}

/* ==========================================================================
   9. GALERIA - POPRAWKA WIDOCZNOŚCI + KWADRAT + WYRÓWNANIE MINIATUREK
   ========================================================================== */

/* --- GŁÓWNE ZDJĘCIE --- */
.woocommerce-product-gallery .flex-viewport {
    height: auto !important;
    min-height: 100px !important;
}

.woocommerce-product-gallery__image {
    aspect-ratio: 1 / 1 !important; /* Kwadrat */
    max-height: 550px !important;   /* Bezpiecznik wysokości */
    display: block !important; 
    position: relative !important;
    overflow: hidden !important;
    margin: 0 !important;
    background-color: #fff !important;
}

.woocommerce-product-gallery__image a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}

.woocommerce-product-gallery__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    margin: 0 !important;
    opacity: 1 !important; 
    visibility: visible !important;
    display: block !important;
}

/* --- WYRÓWNANIE MINIATUREK DO LEWEJ --- */
/* Kontener paska miniaturek */
.woocommerce-product-gallery .flex-control-thumbs {
    display: flex !important;           /* Ustawia w rzędzie */
    flex-wrap: wrap !important;         /* Zawija do nowej linii jak braknie miejsca */
    justify-content: flex-start !important; /* Dociąga do LEWEJ */
    text-align: left !important;
    padding-left: 0 !important;         /* Usuwa wcięcie z lewej */
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

/* Pojedyncza miniaturka */
.flex-control-thumbs li {
    aspect-ratio: 1 / 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    
    /* Odstępy */
    margin-right: 10px !important; /* Odstęp między miniaturkami */
    margin-left: 0 !important;     /* Brak odstępu z lewej */
    margin-bottom: 10px !important; /* Odstęp w pionie */
    
    padding: 2px !important; 
    max-width: 80px !important;    /* Rozmiar miniaturki (możesz zmienić) */
    float: none !important;        /* Wyłącza stare floatowanie */
}

.flex-control-thumbs li img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    opacity: 1 !important;
    margin: 0 !important;
}

.flex-control-thumbs li img.flex-active {
    border: 1px solid #ff6900 !important;
}