@import 'assets/css/main.css';

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

html, body {
    background: #ffffff;
    font-family: Arial, sans-serif;
    color: #111;
    line-height: 1.6;
}

/* Kontener strony */
.site-content,
#content {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* ===== HEADER (Camashopping style) ===== */
.site-header {
    background-color: #ffffff;
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    flex-wrap: wrap;
    position: relative;
    z-index: 1000;
}

/* Logo */
.site-header .site-branding img {
    max-height: 60px;
}

.site-header .site-branding a {
    font-size: 26px;
    font-weight: bold;
    color: #000;
    text-decoration: none;
}

/* ===== NAVIGATION ===== */
.site-navigation {
    flex: 1;
    text-align: center;
}

.site-navigation ul {
    list-style: none;
}

.site-navigation ul li {
    display: inline-block;
    margin: 0 10px;
}

.site-navigation a {
    color: #111;
    text-decoration: none;
    font-weight: 500;
    padding: 5px 10px;
}

.site-navigation a:hover {
    color: #ff4d4d;
}

/* ===== HEADER IKONY (konto + koszyk) ===== */
.header-icons {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-icons a {
    position: relative;
    font-size: 22px;
    color: #000;
    text-decoration: none;
}

.cart-count {
    position: absolute;
    top: -6px;
    right: -10px;
    background: #ff4d4d;
    color: white;
    border-radius: 50%;
    font-size: 12px;
    width: 18px;
    height: 18px;
    text-align: center;
    line-height: 18px;
}

/* ===== MINI KOSZYK ===== */
.cart-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 48px;
    width: 320px;
    background: white;
    border: 1px solid #ddd;
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
    padding: 15px;
    z-index: 1001;
}

.cart:hover .cart-dropdown {
    display: block;
}

/* ===== MENU MOBILNE ===== */
.menu-toggle {
    display: none;
    /* cursor: pointer; */
    font-size: 28px;
}

@media (max-width: 900px) {
    .site-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
    }

    .menu-toggle {
        display: block;
        margin-left: auto;
        margin-right: 10px;
    }

    .site-navigation {
        display: none;
        width: 100%;
        margin-top: 15px;
        text-align: left;
    }

    .site-navigation.active {
        display: block;
    }

    .site-navigation ul li {
        display: block;
        margin: 10px 0;
    }

    .article{
        width:90% !important;
    }

    .woocommerce-MyAccount-navigation{
        float: none !important;
        width:100% !important;
    }
}



@media (max-width: 770px) {
 
    .woocommerce-MyAccount-navigation{
        float: none !important;
        width:100% !important;
        margin-bottom: 20px !important;
    }


    /* 5. PRZYCISK ZAPISZ (Złota pigułka) */
.woocommerce-edit-account .button,
.woocommerce-address-fields .button {
    margin-bottom: 20px;
}
}



/* ===== FOOTER ===== */
.site-footer,
footer {
    background: #111;
    color: #fff;
    padding: 40px 20px;
    text-align: center;
    margin-top: 40px;
}

.site-footer a {
    color: #fff;
    text-decoration: none;
}

.site-footer a:hover {
    text-decoration: underline;
}


/* Animowane tło */
.info-bar {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 10px 20px;
    color: white;
    animation: bgCycle 6s infinite alternate; 
	 text-align: center;
	 background-color:black; 
}

/* Animacja zmiany tła */
@keyframes bgCycle {
    0% {
        background-color: #000000; /* czarny */
    }
    100% {
        background-color: #ff4fa3; /* różowy */
    }
}

/* Animacja tekstu “WYSYŁKA W 24H” */
.highlight {
    font-weight: bold;
    animation: textPulse 2s infinite ease-in-out;
}

@keyframes textPulse {
    0% {
        color: #ffffff;
        transform: scale(1);
    }
    50% {
        color: #ffe2f1; /* jaśniejszy róż */
        transform: scale(1.05);
    }
    100% {
        color: #ffffff;
        transform: scale(1);
    }
}

/* WYMUSZENIE STYLÓW DLA TWENTY SEVENTEEN */

/* ==========================================================================
   FORMULARZ LOGOWANIA - STYLIZACJA NA ZAMÓWIENIE
   ========================================================================== */

/* 1. Ukrycie etykiet (Label) */
.woocommerce-form-login label {
    display: none !important;
}

/* 2. Nagłówek "ZALOGUJ SIĘ" */
.woocommerce-account .u-column1 h2 {
    font-family: "Playfair Display", serif; /* Szeryfowy font */
    font-style: italic;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 32px;
    margin-bottom: 40px;
    color: #000;
}

/* 3. Stylizacja pól (Placeholdery) */
.woocommerce-form-login .form-row input.input-text {
    border: 1px solid #e0e0e0 !important;
    padding: 15px 20px !important;
    border-radius: 0 !important;
    font-size: 16px;
    margin-bottom: 10px;
    background-color: #fff;
    width: 100%;
}

/* Kolor tekstu w placeholderze */
.woocommerce-form-login .form-row input.input-text::placeholder {
    color: #a0a0a0;
}

/* 4. Przycisk ZALOGUJ SIĘ */
.woocommerce-form-login .button {
    background-color:black !important; /* Złoty/Beżowy */
    color: #ffffff !important;
    border-radius: 50px !important; /* Zaokrąglone rogi */
    padding: 15px 45px !important;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    border: none !important;
    /* cursor: pointer; */
    display: inline-block;
    width: auto !important;
    margin-top: 10px;
}

.woocommerce-form-login .button:hover {
    background-color:  #ff4081 !important;
      /* cursor: pointer; */
}

/* 5. Link "Zapomniałem hasła" */
.woocommerce-LostPassword.lost_password {
    display: inline-block !important;
    margin-left: 20px !important;
    vertical-align: middle;
}

.woocommerce-LostPassword.lost_password a {
    color: black !important;
    text-decoration: underline !important;
    font-size: 15px;
}

.woocommerce-LostPassword.lost_password a:hover {
    color: black !important;
}

/* 6. Ukrycie "Zapamiętaj mnie" i kontenera */
.woocommerce-form-login__rememberme {
    display: none !important;
}

/* Fix dla Twenty Seventeen - wyrównanie przycisku i linku */
.woocommerce-form-login .form-row:last-child {
    display: flex;
    align-items: center;
}


/* Stylizacja linku rejestracji pod formularzem */
.custom-register-link {
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px solid #eee; /* Delikatna linia oddzielająca */
    font-size: 14px;
    color: #666;
}

.custom-register-link a {
    color: black !important; /* Złoty kolor jak w przycisku */
    font-weight: bold;
    text-decoration: underline !important;
    margin-left: 5px;
}

.custom-register-link a:hover {
    color: #ff4081 !important;
      /* cursor: pointer; */
}

/* Ukrycie tytułu strony "Moje konto" */
.woocommerce-account .entry-title {
    display: none !important;
}

/* Usunięcie pustego miejsca po ukrytym tytule */
.woocommerce-account .entry-header {
    padding: 0 !important;
    border-bottom: none !important;
    margin: 0 !important;
}

/* Stylizacja nagłówka ZALOGUJ SIĘ (wymuszenie wielkich liter) */
.woocommerce-account .u-column1 h2 {
    text-transform: uppercase !important;
    font-weight: 400 !important;
    letter-spacing: 2px;
    /* Jeśli chcesz dokładnie taki font jak na screenie, dodaj: */
    font-family: serif; 
}

/* Stylizacja przycisku rejestracji WooCommerce */
.woocommerce-Button.woocommerce-button.button.woocommerce-form-register__submit {
    background-color: black !important; /* Twój różowy #ff4081 */
    color: #ffffff !important;
    border-radius: 50px !important; /* Kształt pigułki */
    padding: 16px 50px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    border: none !important;
    cursor: pointer;
    display: inline-block !important;
    width: auto !important; /* Zapobiega rozciąganiu na całą szerokość */
    float: right; /* Wyrównanie do prawej strony jak na screenie */
    transition: background-color 0.3s ease, transform 0.2s ease !important;
    box-shadow: 0 4px 15px rgba(255, 64, 129, 0.2) !important; /* Delikatny cień w kolorze przycisku */
}

/* Efekt po najechaniu myszką */
.woocommerce-Button.woocommerce-button.button.woocommerce-form-register__submit:hover {
    background-color: #ff4081 !important; /* Ciemniejszy róż */
    box-shadow: 0 6px 20px rgba(255, 64, 129, 0.3) !important;
}

/* Ukrycie kolumny logowania na stronie rejestracji */
.page-template-page-register .u-column1.col-1 {
    display: none !important;
}

.page-template-page-register .u-column2.col-2 {
    width: 100% !important;
    float: none !important;
}

/* Nagłówek REJESTRACJA */
.page-template-page-register h2 {
    font-family: "Playfair Display", serif !important;
    font-style: italic !important;
    text-transform: uppercase !important;
    font-size: 32px !important;
    margin-bottom: 40px !important;
}

/* Pola wejściowe */
.page-template-page-register .input-text {
    border: 1px solid #e0e0e0 !important;
    padding: 15px !important;
    border-radius: 0 !important;
    margin-bottom: 10px !important;
}

/* Checkboxy */
.page-template-page-register .checkbox span {
    font-size: 13px;
    line-height: 1.4;
    color: #555;
    display: block;
}



/* Ukrycie etykiet dla Email i Hasła w rejestracji */
.woocommerce-form-register label[for="reg_email"],
.woocommerce-form-register label[for="reg_password"] {
    display: none !important;
}

/* Upewnienie się, że pola mają identyczny styl jak reszta */
#reg_email, #reg_password {
    border: 1px solid #d3d3d3 !important;
    padding: 15px 20px !important;
    border-radius: 0 !important;
    margin-bottom: 15px !important;
    width: 100% !important;
    font-size: 15px !important;
    background: #fff !important;
}
/* Stylizacja wskaźnika zgodności haseł */
#password-match-indicator {
    font-size: 12px;
    margin-top: -10px;
    margin-bottom: 15px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.match-success {
    color: #4CAF50; /* Zielony */
}

.match-error {
    color: var(--main-color); /* Twój główny różowy #ff4081 lub czerwony */
}

/* Wizualne wyróżnienie pola gdy hasła się zgadzają */
#reg_password_2:focus {
    outline: none !important;
}

a:hover{
    cursor: pointer;
}

/* ==========================================================================
   STYLIZACJA PÓL I WYRÓWNANIE DO LEWEJ
   ========================================================================== */

/* 1. Kontener strony - przesunięcie na lewo */
.page-template-page-register .wrap {
    /* margin-left: 0 !important; */
    margin-right: auto !important;
    max-width: 700px !important; /* Ograniczenie szerokości dla lepszej czytelności */
}

/* 2. Stylizacja pól tekstowych (input-text) */
.page-template-page-register .input-text {
    border: 1px solid #e0e0e0 !important; /* Jasnoszara ramka */
    padding: 16px 20px !important;
    border-radius: 4px !important; /* Bardzo delikatne zaokrąglenie */
    width: 100% !important;
    font-size: 15px !important;
    color: #333 !important;
    background-color: #fafafa !important; /* Bardzo jasne tło */
    transition: all 0.3s ease-in-out !important;
    box-shadow: none !important;
}

/* Efekt po kliknięciu w pole (Focus) */
.page-template-page-register .input-text:focus {
    border-color: var(--main-color) !important; /* Twój różowy kolor */
    background-color: #fff !important;
    outline: none !important;
    box-shadow: 0 0 8px rgba(255, 64, 129, 0.1) !important;
}

/* 3. Wyrównanie przycisku REJESTRACJA do lewej */
.page-template-page-register .woocommerce-form-register {
    display: block !important; /* Zmiana z flex, aby elementy szły naturalnie od lewej */
}

.page-template-page-register .woocommerce-form-register__submit {
    float: left !important; /* Przesunięcie przycisku na lewo */
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    align-self: flex-start !important;
}

/* 4. Wyrównanie linku pod przyciskiem do lewej */
.back-to-login-link {
    text-align: left !important;
    clear: both; /* Przejście pod przycisk */
    padding-top: 10px;
}

/* 5. Wyrównanie klauzul do lewej */
.checkbox-row span {
    text-align: left !important; /* Usunięcie wyjustowania */
}

/* Wymuszenie pełnej szerokości dla stron WooCommerce w Twenty Seventeen */
@media screen and (min-width: 48em) {
    body.page-two-column.woocommerce-account:not(.archive) #primary .entry-content, 
    body.page-two-column.woocommerce-cart:not(.archive) #primary .entry-content, 
    body.page-two-column.woocommerce-checkout:not(.archive) #primary .entry-content {
        width: 100% !important; /* Rozciągnięcie do pełnej szerokości */
        float: none !important;  /* Usunięcie pływania do prawej */
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    /* Opcjonalnie: Ukrycie lewej kolumny z tytułem, która robi "dziurę" po lewej */
    body.page-two-column.woocommerce-account .entry-header {
        width: 100% !important;
        float: none !important;
        margin-bottom: 20px !important;
    }
}


/* ==========================================================================
   CAŁKOWITE USPÓJNIENIE WYGLĄDU (LOGOWANIE + REJESTRACJA)
   ========================================================================== */

/* 1. Nagłówki - oba identyczne (Serif, Italic, Uppercase) */
.woocommerce-account h2, 
.custom-register-title,
.u-column1 h2, 
.u-column2 h2 {
    font-family: "Playfair Display", serif !important;
    font-style: italic !important;
    text-transform: uppercase !important;
    font-weight: 400 !important;
    font-size: 32px !important;
    letter-spacing: 2px !important;
    margin-bottom: 30px !important;
    color: #000 !important;
}

/* 2. Wszystkie pola tekstowe (Identyczne obramowanie i padding) */
.woocommerce-page .input-text {
    border: 1px solid #d3d3d3 !important; /* Jednolity jasny kolor ramki */
    padding: 15px 20px !important;
    border-radius: 0 !important;
    font-size: 15px !important;
    background-color: #fff !important;
    box-shadow: none !important;
    transition: border-color 0.3s ease !important;
}

.woocommerce-page .input-text:focus {
    border-color: black !important; /* Twoja zmienna #ff4081 */
    outline: none !important;
}

/* 3. Wszystkie przyciski (Zaloguj się i Zarejestruj się) */
.woocommerce-page .button {
    background-color: black !important; /* Ten sam kolor dla obu */
    color: #fff !important;
    border-radius: 50px !important; /* Kształt pigułki */
    padding: 16px 45px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    border: none !important;
    cursor: pointer !important;
    display: inline-block !important;
    width: auto !important;
    transition: opacity 0.3s ease !important;
}

.woocommerce-page .button:hover {
    opacity: 0.9 !important;
    background-color: var(--main-color-hover) !important;
}

/* 4. Linki (Zapomniałem hasła i Masz już konto) */
.woocommerce-LostPassword a, 
.back-to-login-link a,
.custom-register-link a {
    color: black!important; /* Czarny tekst jak na screenie */
    text-decoration: underline !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

/* 5. Układ przycisków */
/* Logowanie: przycisk i link obok siebie */
.login .form-row:last-of-type {
    display: flex !important;
    align-items: center !important;
    gap: 20px;
}

/* Rejestracja: przycisk do prawej (jak na screenie rejestracji) */
.woocommerce-form-register {
    display: flex !important;
    flex-direction: column !important;
}

.woocommerce-form-register__submit {
    align-self: flex-end !important; /* Przycisk na prawo */
}

/* 6. Fix szerokości pól (aby nie były za szerokie na 100%) */
.woocommerce-form-login, 
.woocommerce-form-register {
    max-width: 500px !important; /* Optymalna szerokość dla czytelności */
}

/* ==========================================================================
   STRONA EDYCJI DANYCH - USPÓJNIENIE ZE WZOREM
   ========================================================================== */

/* 1. Układ: Menu po lewej, Treść po prawej */
@media screen and (min-width: 48em) {
    .woocommerce-account .woocommerce {
        display: flex;
        gap: 40px;
        align-items: flex-start;
    }

    .woocommerce-MyAccount-navigation {
        width: 25% !important;
        float: none !important;
    }

    .woocommerce-MyAccount-content {
        width: 70% !important;
        float: none !important;
        border-left: 1px solid #eee;
        padding-left: 40px;
    }
}

/* 2. Stylizacja Menu (lewa strona) */
.woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
}

.woocommerce-MyAccount-navigation ul li {
    padding: 10px 0;
    border: none;
}

.woocommerce-MyAccount-navigation ul li a {
    color: #999;
    text-decoration: none;
    font-size: 16px;
    transition: color 0.3s;
}

.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li a:hover {
    color: #333;
    font-weight: bold;
}

/* 3. Tytuł: DANE KONTAKTOWE */
.woocommerce-edit-account legend,
.woocommerce-MyAccount-content h3,
.woocommerce-address-fields h3 {
    font-family: "Playfair Display", serif !important;
    font-style: italic !important;
    text-transform: uppercase !important;
    color: var(--main-color) !important; /* Złoty kolor ze zdjęcia */
    font-size: 24px !important;
    letter-spacing: 1px;
    border-bottom: none;
    margin-bottom: 30px;
}

/* 4. Ukrycie etykiet i stylizacja pól */
.woocommerce-edit-account label,
.woocommerce-address-fields label {
    display: none !important;
}

.woocommerce-MyAccount-content .input-text {
    border: 1px solid #e0e0e0 !important;
    padding: 15px !important;
    border-radius: 0 !important;
    margin-bottom: 10px !important;
    font-size: 15px;
    color: #666;
    background: #fff;
}

/* 5. PRZYCISK ZAPISZ (Złota pigułka) */
.woocommerce-edit-account .button,
.woocommerce-address-fields .button {
    background-color: var(--main-color) !important;
    color: #fff !important;
    border-radius: 50px !important;
    padding: 15px 50px !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
    border: none !important;
    margin-top: 20px;
}

.woocommerce-edit-account .button:hover {
    background-color: var(--main-color-hover) !important;
}

/* Usunięcie domyślnych obramowań Twenty Seventeen */
.woocommerce-MyAccount-content fieldset {
    border: none;
    padding: 0;
}

/* ==========================================================================
   NAWIGACJA MOJE KONTO - CZYSZCZENIE I HOVER
   ========================================================================== */

/* 1. Usunięcie strzałek/ikon przed i po elementach listy */
.woocommerce-MyAccount-navigation ul li::before,
.woocommerce-MyAccount-navigation ul li::after {
    content: none !important;
    display: none !important;
}

/* 2. Stylizacja bazowa linków w menu */
.woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 10px 0;
    color: #999 !important; /* Szary kolor dla nieaktywnych */
    text-decoration: none !important;
    font-size: 16px;
    transition: all 0.3s ease; /* Płynne przejście koloru */
    border: none !important;
}

/* ==========================================================================
   AKTYWNY LINK W MENU - RÓŻOWE TŁO
   ========================================================================== */

/* Styl dla elementu, który jest aktualnie wybrany */
.woocommerce-MyAccount-navigation ul li.is-active a {
    background-color: var(--main-color) !important; /* Twój różowy #ff4081 */
    color: #ffffff !important;                     /* Biały tekst dla kontrastu */
    border-left: none !important;                  /* Usuwamy brązową/pionową ramkę */
    border-radius: 4px;                            /* Delikatne zaokrąglenie rogów tła */
    padding-left: 15px !important;                 /* Margines wewnętrzny, aby tekst nie dotykał brzegu */
    padding-right: 15px !important;
    font-weight: 600 !important;
    display: block;                                /* Upewnienie się, że tło wypełnia linię */
}

/* Opcjonalnie: zmiana koloru hover, aby pasował do tła */
.woocommerce-MyAccount-navigation ul li a:hover {
    color: white !important;
    background-color: var(--main-color-hover) !important; /* Bardzo delikatny różowy cień pod kursor */
    /* border-radius: 4px; */
    border: none !important; 
    border-bottom: none !important;
        padding-left: 15px !important;                 /* Margines wewnętrzny, aby tekst nie dotykał brzegu */
    padding-right: 15px !important;
    font-weight: 600 !important;
}

/* Usunięcie domyślnych obramowań list w Twenty Seventeen */
.woocommerce-MyAccount-navigation ul {
    border: none !important;
    list-style: none !important;
    margin-left: 0 !important;
}

.woocommerce-MyAccount-navigation ul li {
    border-bottom: 1px solid #f9f9f9 !important; /* Bardzo delikatna linia oddzielająca */
}

/* ==========================================================================
   KOMUNIKATY O BŁĘDACH (WOOCOMMERCE ERROR)
   ========================================================================== */

/* 1. Ustawienie błędu na pełną szerokość nad formularzami */
.woocommerce-error {
    width: 100% !important;
    clear: both !important;
    float: none !important;
    margin: 0 0 40px 0 !important; /* Odstęp od breadcrumbs i formularzy */
    background-color: #fff !important; /* Białe tło zamiast czerwonego */
    border: none !important;
    border-left: 4px solid #ff4081 !important; /* Różowy pasek z boku */
    padding: 20px 25px !important;
    list-style: none !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05); /* Delikatny cień */
    color: #333 !important;
    font-size: 14px !important;
}

/* 2. Stylizacja linków wewnątrz błędu (np. "Nie pamiętasz hasła?") */
.woocommerce-error a {
    color: #ff4081 !important; /* Różowy kolor linku */
    text-decoration: none !important; /* Brak podkreślenia */
    font-weight: 600;
}

.woocommerce-error a:hover {
    color: #d81b60 !important; /* Ciemniejszy róż na hover */
    text-decoration: none !important;
}

/* 3. Usunięcie domyślnej ikonki błędu WooCommerce (opcjonalnie) */
.woocommerce-error::before {
    display: none !important;
}

/* 4. Usunięcie marginesów listy wewnątrz błędu */
.woocommerce-error li {
    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================================
   STYLIZACJA STRONY: ZAPOMNIANE HASŁO
   ========================================================================== */

/* ==========================================================================
   STRONA ZAPOMNIANE HASŁO - UKŁAD PIONOWY
   ========================================================================== */

/* 1. Ustawienie formularza w kolumnie */
.lost_reset_password {
    display: flex !important;
    flex-direction: column !important; /* Wymusza ustawienie pod sobą */
    align-items: flex-start !important; /* Wyrównanie do lewej */
}

/* 2. Stylizacja akapitu z polem input */
.lost_reset_password .form-row-first {
    width: 100% !important; /* Pole zajmuje całą dostępną szerokość */
    margin-bottom: 15px !important;
    float: none !important;
}

/* 3. Stylizacja akapitu z przyciskiem */
.lost_reset_password .form-row-last {
    width: auto !important;
    float: none !important;
    clear: both !important;
}

/* 4. Pole wejściowe - ujednolicenie */
.lost_reset_password .input-text {
    width: 100% !important;
    max-width: 500px !important; /* Ograniczenie szerokości dla estetyki */
    padding: 15px !important;
    border: 1px solid #d3d3d3 !important;
}

/* 5. Przycisk - różowa pigułka pod spodem */
.lost_reset_password .button {
    background-color: var(--main-color) !important; /* Różowy kolor */
    color: #fff !important;
    border-radius: 50px !important;
    padding: 16px 50px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    display: inline-block !important;
    margin-top: 10px !important;
    border: none !important;
}

/* ==========================================================================
   STRONA ZAPOMNIANE HASŁO - POPRAWA WIDOCZNOŚCI TEKSTU
   ========================================================================== */

/* 1. Stylizacja głównego komunikatu */
.lost_reset_password p:first-of-type {
    font-family: "Playfair Display", serif !important; /* Spójność z nagłówkami */
    font-style: italic !important;
    font-size: 24px !important; /* Większy i bardziej widoczny */
    color: #333 !important;
    line-height: 1.2 !important;
    margin-bottom: 25px !important;
    display: block !important;
    text-transform: none !important;
    letter-spacing: 0.5px;
}

/* 2. Opcjonalnie: Jeśli chcesz, aby tylko "Zapomniane hasło?" było duże, 
   a reszta tekstu mniejsza, użyjemy poniższej sztuczki (wymaga PHP poniżej) */
.custom-lost-intro {
    font-weight: 600;
    display: block;
    margin-bottom: 10px;
}

.custom-lost-instructions {
    
    /* Dodanie odstępu na dole */
    padding-bottom: 10px !important; /* Opcjonalny padding */
}


/* ==========================================================================
   HISTORIA ZAMÓWIEŃ - PRZYCISK POD KOMUNIKATEM
   ========================================================================== */
/* 1. Zmiana układu niebieskiego boksu na pionowy */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info {
    display: flex !important;
    flex-direction: column !important; /* Wymusza układ jeden pod drugim */
    align-items: flex-start !important; /* Wyrównanie tekstu do lewej */
    padding: 25px !important;
    background-color: #4a6ee0 !important; /* Kolor ze screena */
    border: none !important;
}

/* 2. Stylizacja tekstu wewnątrz (aby nie był obok przycisku) */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info::before {
    margin-bottom: 15px !important; /* Odstęp od ikonki, jeśli istnieje */
}

/* 3. Przycisk: Przeniesienie pod tekst i stylizacja */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info .button {
    display: inline-block !important;
    margin-top: 20px !important; /* Wyraźny odstęp od tekstu powyżej */
    position: relative !important;
    right: auto !important;
    top: auto !important;
    float: none !important; /* Wyłączenie pływania do prawej */
    background-color: #000 !important; /* Czarny przycisk ze screena */
    color: #fff !important;
    border-radius: 50px !important; /* Zaokrąglenie jak w pigułce */
    padding: 15px 35px !important;
    width: auto !important;
    border-bottom: none !important;
}

/* 2. EFEKT PO NAJECHANIU MYSZKĄ */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info .button:hover {
    background-color: var(--main-color-hover)!important; /* Zmiana na Twój różowy kolor */
    transform: translateY(-2px);         /* Delikatne uniesienie przycisku */
    box-shadow: 0 5px 15px rgba(255, 64, 129, 0.4) !important; /* Różowa poświata */
    text-decoration: none !important;
}

.woocommerce-breadcrumb a:hover{
    cursor: pointer !important;
}

/* ==========================================================================
   STYLIZACJA PRZYCISKU DODAJ DO KOSZYKA - CZARNA PIGUŁKA
   ========================================================================== */
/* PRZYCISK DODAJ - CZARNA PIGUŁKA */
.add-to-cart-btn-luxury {
    background: #000 !important;
    color: #fff !important;
    border: none !important;
    padding: 16px 50px !important;
    border-radius: 50px !important; /* Pełna pigułka */
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    cursor: pointer;
    transition: all 0.3s ease !important;
    font-size: 13px !important;
}

/* EFEKT NAJECHANIA NA PRZYCISK */
.add-to-cart-btn-luxury:hover:not(:disabled) {
    background: #ff4081 !important; /* Zmiana na różowy */
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 64, 129, 0.3);
}

.add-to-cart-btn-luxury:disabled {
    background: #ccc !important;
    cursor: not-allowed;
}



.product-badges-container {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.badge {
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Specyficzne świecenie dla NOWOŚĆ */
.badge-new {
    background-color: white; /* Twoje złoto */
    box-shadow: 0 0 15px white;
    color:black;
    animation: badge-glow 2s infinite alternate;
}

.badge-sale { background-color: #000; }
.badge-bestseller { background-color: #b38e5d; border: 1px solid #fff; }

@keyframes badge-glow {
    from { box-shadow: 0 0 5px rgba(179, 142, 93, 0.4); }
    to { box-shadow: 0 0 20px rgba(179, 142, 93, 0.9); }
}

/* Kontener główny */
.custom-empty-cart {
    text-align: center;
    padding: 60px 20px;
    max-width: 600px;
    margin: 0 auto;
}

/* Ikona */
.empty-cart-icon {
    font-size: 80px;
    color: #eee; /* Delikatny szary */
    margin-bottom: 30px;
    display: block;
}

/* Nagłówek */
.custom-empty-cart h2 {
    font-size: 28px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
    color: #000;
}

/* Opis */
.custom-empty-cart p {
    font-size: 16px;
    color: #666;
    margin-bottom: 40px;
    font-style: italic;
}

/* Złoty przycisk powrotu */
.btn-gold-empty {
    display: inline-block;
    background-color: transparent;
    color: #b38e5d;
    border: 1px solid #b38e5d;
    padding: 15px 40px;
    text-decoration: none;
    font-weight: bold;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.btn-gold-empty:hover {
    background-color: #b38e5d;
    color: #fff;
    box-shadow: 0 5px 15px rgba(179, 142, 93, 0.3);
}

/* Stylizacja sekcji "Nowe w sklepie" pod koszykiem */
.cart-empty ~ .cross-sells, 
.cart-empty ~ .upsells,
h2:contains("Nowe w sklepie") {
    margin-top: 80px;
}

/* Ukrycie standardowej smutnej buźki jeśli nadal się pojawia */
.woocommerce-Info.woocommerce-info {
    display: none !important;
}


/* --- STYL PUSTEGO KOSZYKA --- */
.empty-cart-premium {
    text-align: center;
    padding: 80px 20px;
}

.empty-cart-header i {
    font-size: 60px;
    color: #b38e5d; /* Twoje złoto */
    margin-bottom: 20px;
}

.empty-cart-header h2 {
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.btn-return-shop {
    display: inline-block;
    margin-top: 30px;
    padding: 15px 45px;
    background: #000;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    letter-spacing: 1px;
    transition: 0.3s;
}

.btn-return-shop:hover {
    background: #b38e5d;
}

/* --- BADGE W LEWYM GÓRNYM ROGU --- */
.product-image-wrapper {
    position: relative !important; /* Baza dla badge */
}

.product-badges-container {
    position: absolute;
    top: 10px;     /* Zawsze w lewym górnym rogu */
    left: 10px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 5px;
    pointer-events: none; /* Żeby nie przeszkadzały w klikaniu w zdjęcie */
}

.badge {
    background: #b38e5d; /* Złoty dla Nowości */
    color: #fff;
    font-size: 10px;
    padding: 5px 12px;
    font-weight: bold;
    text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Specyficzny kolor dla Wyprzedaży */
.badge-sale {
    background: #000;
}

/* --- POPRAWKA ZDJĘĆ POD KOSZYKIEM --- */
.main-product-img {
    width: 100%;
    aspect-ratio: 3/4; /* Ujednolica wysokość zdjęć na Twoim screenie */
    object-fit: contain;
}



/* --- STYL PUSTEGO KOSZYKA --- */
.empty-cart-premium {
    text-align: center;
    padding: 80px 20px;
}

.empty-cart-header i {
    font-size: 60px;
    color: #b38e5d; /* Twoje złoto */
    margin-bottom: 20px;
}

.empty-cart-header h2 {
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.btn-return-shop {
    display: inline-block;
    margin-top: 30px;
    padding: 15px 45px;
    background: #000;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    letter-spacing: 1px;
    transition: 0.3s;
}

.btn-return-shop:hover {
    background: #b38e5d;
}

/* --- BADGE W LEWYM GÓRNYM ROGU --- */

.product-badges-container {
    position: absolute;
    top: 10px;     /* Zawsze w lewym górnym rogu */
    left: 10px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 5px;
    pointer-events: none; /* Żeby nie przeszkadzały w klikaniu w zdjęcie */
}

.badge {
    background: #b38e5d; /* Złoty dla Nowości */
    color: #fff;
    font-size: 10px;
    padding: 5px 12px;
    font-weight: bold;
    text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Specyficzny kolor dla Wyprzedaży */
.badge-sale {
    background: #000;
}

/* --- POPRAWKA ZDJĘĆ POD KOSZYKIEM --- */
.wc-block-grid__products{
 
    text-align: center;
    transition: transform 0.3s ease;
    padding:20px;
    margin:auto;
}

.wc-block-grid__product{
   margin-top:10px;
}

.wc-block-grid__product a{
   margin-top:10px;
}

.wc-block-grid__product:hover{
    transform: translateY(-5px);
box-shadow: 0 4px 15px black;
/* cursor:pointer */
}

.wp-block-button a:hover{
/* cursor: pointer !important; */
background-color: var(--main-color-hover) !important;
}
.wp-block-heading{
    margin-top:20px;
}

/* Styl dla wszystkich placeholderów w sklepie */
::placeholder {
    color: #999 !important;
    font-style: italic;
    font-size: 0.9em;
}

/* Specyficznie dla formularzy Moje Konto */
.woocommerce-EditAccountForm input.input-text::placeholder,
.woocommerce-address-fields input.input-text::placeholder {
    color: #b38e5d; /* Złoty kolor jeśli chcesz zachować spójność */
    opacity: 0.6;
}


.wc-block-components-button__text{
    background-color: var(--main-color);
    color:white;
  padding:20px 40px;
    border-radius:50px;
}


.wc-block-components-button__text:hover{
    background-color: var(--main-color-hover);
}


.woocommerce-pagination span.page-numbers {
    background-color: var(--main-color);
    color:white;
}


.woocommerce-pagination a.page-numbers:hover {
    background-color: var(--main-color-hover);
    color:white;
}

        .filter-container { margin-bottom: 25px; clear: both;
           font-family: 'PlayfairDisplay', serif !important;
    text-transform: uppercase; 
    letter-spacing: 1px;     
    color: #333;   
        }
        .filter-title { 
            font-size: 14px; 
            font-weight: bold; 
            text-transform: uppercase; 
            margin-bottom: 12px; 
            padding-bottom: 6px; }
        .filter-list { list-style: none !important; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 !important; }
        .filter-list li { list-style: none !important; margin: 0 !important; padding: 0 !important; }
        .filter-list li a { 
            display: flex !important; align-items: center; justify-content: center;
            min-width: 45px; height: 45px; border: 2px solid #ddd !important; 
            text-decoration: none !important; color: #333 !important; font-size: 13px; font-weight: 700;
            background-color: #ffffff !important; transition: 0.1s;
        }
        .filter-list li.is-active-filter a { 
            background-color: #000000 !important; color: #ffffff !important; border-color: #000000 !important; 
        }
/* Kontener wrapper */
.wc-block-product-filter-checkbox-list__input-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px; /* Rozmiar checkboxa */
    height: 24px;
}

/* Sam kwadracik inputa */
.wc-block-product-filter-checkbox-list__input {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    width: 100%;
    height: 100%;
    border: 1px solid #757575; /* Kolor ramki gdy nieaktywny */
    border-radius: 2px;
    background-color: #fff;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Stan po zaznaczeniu - czarne tło */
.wc-block-product-filter-checkbox-list__input:checked {
    background-color: #000;
    border-color: #000;
}

/* Ptaszek SVG */
.wc-block-product-filter-checkbox-list__mark {
    position: absolute;
    width: 12px;
    height: 10px;
    color: #fff; /* Kolor ptaszka */
    pointer-events: none;
    opacity: 0;
    transform: scale(0.5);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Pokaż ptaszka gdy checkbox jest zaznaczony */
.wc-block-product-filter-checkbox-list__input:checked + .wc-block-product-filter-checkbox-list__mark {
    opacity: 1;
    transform: scale(1);
}

/* Stylizacja tekstu obok */
.wc-block-product-filter-checkbox-list__label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-family: inherit;
    font-size: 16px;
    line-height: 24px;
}

/* Celujemy precyzyjnie w tekst filtrów i ich nagłówki */
.universal-filters-wrapper .wc-block-product-filter-checkbox-list__text,
.universal-filters-wrapper .filter-title,
.universal-filters-wrapper label span {
    font-family: 'PlayfairDisplay', serif !important;
    text-transform: uppercase !important; 
    letter-spacing: 1px !important;     
    color: #333 !important;
    /* Dodatkowo warto upewnić się, że styl czcionki jest załadowany */
    font-style: normal;
}