.woo-main__single-product div.product .product_title {
	font-size: 3.1rem;
	margin-bottom: 1rem;
	font-weight: 700;
}

/* 7. Gwiazdki i opinie */
.woo-main__single-product div.product .woocommerce-product-rating {
	margin-bottom: 0;
}

.woo-main__single-product div.product .woocommerce-product-rating .star-rating {
    display: inline-flex;
    align-items: center;
    font-size: 1.6rem;
    margin-bottom: 0;
}
.woo-main__single-product div.product .woocommerce-product-rating .star-rating::before { color: var(--bg-2); }
.woo-main__single-product div.product .woocommerce-product-rating .star-rating span::before { color: var(--woo-star); }

.woo-main__single-product div.product .woocommerce-product-rating .woocommerce-review-link {
	color: var(--font-color-3);
	font-size: 1.6rem;
}
.woo-main__single-product div.product .woocommerce-product-rating .woocommerce-review-link:hover {
	color: var(--woo-star);
}

/*Cena*/
/* ==========================================================================
   STYLe CENY NA STRONIE PRODUKTU (wszystkie warianty)
   ========================================================================== */

/* 1. Główny kontener ceny <p class="price"> - wspólne style dla wszystkich */
.woo-main__single-product .summary p.price ins {
	text-decoration: none; 
	background: none;
}

.woo-main__single-product .summary p.price bdi {
    font-size: 3.1rem;
    font-weight: 700;
    color: var(--color-1); /* Domyślny kolor ceny */
    margin: 0 0 2rem 0;
    padding: 0;
    line-height: 1.2;
}

/* ==========================================================================
   Stylizacja formularza "Dodaj do koszyka" na stronie produktu
   ========================================================================== */

/* 1. Kontener główny formularza */
.woo-main__single-product form.cart {
    display: flex; /* Ustawiamy elementy w jednej linii */
    align-items: stretch; /* Rozciągamy elementy, by miały tę samą wysokość */
    margin-top: 2rem; /* Odstęp od elementów powyżej */
}

/* 2. Pole do wpisywania ilości */
.woo-main__single-product form.cart .quantity .input-text.qty {
    /* Wygląd i wymiary */
    width: 80px; /* Stała, optymalna szerokość dla pola ilości */
    height: 100%; /* Dopasowanie wysokości do przycisku */
    padding: 1.1rem 3rem; /* Używamy tego samego paddingu co w przycisku dla spójności */
    border: 1px solid var(--bg-2); /* Subtelna ramka pasująca do tła */
    border-radius: var(--btn-radius); /* Ten sam border-radius co w przycisku */
    background-color: var(--bg-0); /* Jasne tło pasujące do strony */
    text-align: center; /* Wyśrodkowanie liczby */
    
    /* Typografia */
    font-family: var(--btn-family); /* Używamy tej samej czcionki co w przycisku */
    font-size: var(--btn-size);
    font-weight: var(--btn-weight);
    color: var(--font-color-1);
    
    /* Zachowanie */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    
    /* Resetujemy domyślny wygląd pola numerycznego */
    -moz-appearance: textfield;
    appearance: textfield;
	
	margin-right: 1rem;
}

/* Ukrywamy strzałki w polu numerycznym (Chrome, Safari, Edge) */
.woo-main__single-product form.cart .quantity .input-text.qty::-webkit-inner-spin-button,
.woo-main__single-product form.cart .quantity .input-text.qty::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Stan :focus dla pola ilości - podświetlenie na kolor główny */
.woo-main__single-product form.cart .quantity .input-text.qty:focus {
    outline: none;
    border-color: var(--color-1);
    box-shadow: 0 0 0 2px rgba(233, 66, 53, 0.2); /* Delikatna poświata w kolorze głównym */
}

/* 3. Przycisk "Dodaj do koszyka" */
.woo-main__single-product form.cart .single_add_to_cart_button {
    /* Resetowanie domyślnych stylów WooCommerce */
    margin: 0 !important;
    float: none !important;

    /* Wygląd i typografia z Twoich zmiennych */
    background-color: var(--color-1);
    color: var(--white-1);
    border: none;
    padding: var(--btn-padding);
    border-radius: var(--btn-radius);
    font-family: var(--btn-family);
    font-weight: var(--btn-weight);
    font-size: var(--btn-size);
    line-height: var(--btn-lh);
    text-transform: uppercase; /* Dodajemy wielkie litery dla spójności z innymi przyciskami */
    
    /* Zachowanie */
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* Stan :hover dla przycisku */
.woo-main__single-product form.cart .single_add_to_cart_button:hover {
    background-color: var(--color-1_hover);
}



/* ==========================================================================
   Naprawa i stylizacja sekcji "Podobne produkty"
   ========================================================================== */

/* 1. Kluczowa reguła naprawiająca layout */
.woo-main__single-product section.related.products {
    clear: both; /* To jest najważniejsza linijka! Mówi sekcji, by zignorowała poprzednie floaty. */
    width: 100%; /* Upewniamy się, że sekcja zajmuje całą dostępną szerokość. */
	padding-top: 2rem;
}

/* 2. Stylizacja nagłówka "Podobne produkty" */
.woo-main__single-product section.related.products h2 {
    font-size: 2.5rem; /* Możesz dostosować rozmiar */
    color: var(--font-color-1); /* Używamy koloru z Twoich zmiennych */
    margin-bottom: 2rem; /* Odstęp między tytułem a listą produktów */
    text-align: left; /* Wyrównanie do lewej (lub center, jeśli wolisz) */
    width: 100%; /* Upewniamy się, że tytuł też zajmuje całą szerokość */
}

/* 3. (Opcjonalnie) Usuwamy dziwne style inline z przycisku "Load More" */
.woo-main__single-product section.related.products .lmp_load_more_button a {
    background-color: var(--color-1) !important;
    color: var(--white-1) !important;
    /* Tutaj możesz dodać inne style, aby przycisk pasował do reszty */
}

/* ==========================================================================
   Stylizacja "Okruszków" (Breadcrumbs) WooCommerce
   ========================================================================== */

/* 1. Główny kontener nawigacji */
.woocommerce .woocommerce-breadcrumb {
    margin-bottom: 1.5rem; /* Zapewnia odstęp od treści poniżej */
    font-size: 1.5rem; /* Ustawia czytelny, ale nie dominujący rozmiar tekstu */
    color: var(--font-color-3); /* Domyślny, stonowany kolor dla separatorów i nazwy bieżącej strony */
}

/* 2. Stylizacja klikalnych linków w "okruszkach" */
.woocommerce .woocommerce-breadcrumb a {
    color: var(--font-color-2); /* Linki są nieco ciemniejsze, aby sugerować interaktywność */
    text-decoration: none; /* Usuwamy domyślne podkreślenie */
    transition: color 0.3s ease; /* Płynne przejście koloru dla efektu hover */
}

/* 3. Efekt "podświetlenia" po najechaniu myszką */
.woocommerce .woocommerce-breadcrumb a:hover {
    color: var(--color-1); /* Po najechaniu link przyjmuje główny, czerwony kolor marki */
    text-decoration: underline; /* Dodajemy podkreślenie jako dodatkowy, wyraźny wskaźnik */
}

/*wtyczka  dodatkami*/
.woo-main__single-product #wapo-total-price-table {
	display: none;
}

.woo-main__single-product .wapo-addon-description {
	margin-bottom: 1.5rem;
}
.woo-main__single-product .wapo-addon-title {
	margin-bottom: 1rem;
}

.woo-main__single-product .options-container {
	margin-bottom: 2rem;
}

/* ==========================================================================
   Stylizacja powiadomień WooCommerce (np. "Dodano do koszyka")
   ========================================================================== */

/* 1. Główny kontener (bez zmian) */
.woocommerce-notices-wrapper {
    margin: 3rem 0;
}

/* 2. Stylizacja samego komunikatu */
.woocommerce-message {
    display: flex;
	flex-wrap: wrap;
	gap: 2rem;
    align-items: center;
    padding: 2rem;
    
    /* KLUCZOWA ZMIANA: Używamy kolorów Twojej marki! */
    background-color: var(--bg-1); /* Jasne beżowe tło */
    border-left: 5px solid var(--color-1); /* Czerwony akcent po lewej */
    border-top: none; /* Naprawia podwójną ramkę widoczną na screenie */
    color: var(--font-color-2); /* Ciemny, czytelny tekst */
    border-radius: var(--radius-3);
    font-size: 1.6rem;
}

/* 3. Ikona "ptaszka" - teraz w kolorze marki */
.woocommerce-message::before {
    color: var(--color-1); /* Czerwona ikona */
    font-size: 2.2rem;
	position: relative;
	top: unset;
	left: unset;
}

/* 4. Przycisk "Zobacz koszyk" - teraz w kolorach marki */
.woocommerce-message .button.wc-forward {
    margin: 0;
    white-space: nowrap;
    background-color: transparent;
    border: 2px solid var(--color-1);
    color: var(--color-1);
    padding: 1rem 2rem;
    font-family: var(--btn-family);
    font-weight: var(--btn-weight);
    font-size: 1.5rem;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

/* 5. Efekt hover dla przycisku */
.woocommerce-message .button.wc-forward:hover,
.woocommerce-message .button.wc-forward:focus {
    background-color: var(--color-1);
    color: var(--white-1);
}

/* 6. Stylizacja stanu :focus */
.woocommerce-message:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(233, 66, 53, 0.4); /* Czerwona poświata */
}

.woocommerce-message .button.wc-forward:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(233, 66, 53, 0.4);
}

.woo-main__single-product .woocommerce-product-details__short-description {
	margin-top: 1rem;
}

/*tooltip*/
.woo-main__single-product .yith-wapo-block .yith-wapo-addon .yith-wapo-option .tooltip span {
	background-color: var(--color-1);
	color: var(--white-1);
	font-family: "Inter";
	font-size: 1.6rem;
}
.woo-main__single-product .yith-wapo-block .yith-wapo-addon .yith-wapo-option .tooltip span:after {
	border-top-color: var(--color-1);
}

.option-container .required {
	color: var(--alert-danger);
}


/* ==========================================================================
   NOWOCZESNY WYGLĄD WARIANTÓW PRODUKTU - PROPOZYCJA 1
   ========================================================================== */

/* --- Etykiety (Kolor, Rozmiar, Styl) --- */
.woo-main .woo-main__single-product div.product form.cart .variations {
	margin-bottom: 3rem;
}

.woo-main .woo-main__single-product div.product form.cart .variations th,
.woo-main .woo-main__single-product div.product form.cart .variations td {
	line-height: 1.8;
}

.woo-main .woo-main__single-product div.product form.cart .variations label {
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--font-color-2);
    margin: 0;
	line-height: 1.8;
}

.woo-main .woo-main__single-product div.product form.cart .variations tr .value  {
    margin-bottom: 1rem;
}
.woo-main .woo-main__single-product div.product form.cart .variations tr:last-child .value  {
    margin-bottom: 0;
}

.woo-main .woo-main__single-product div.product form.cart .variations ul {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.woo-main .woo-main__single-product div.product form.cart .variations ul li {
	box-shadow: unset !important;
    background: unset;
    height: unset;
    width: unset;
    border: unset;
	margin: 0;
	padding: 0;
}

.woo-main .woo-main__single-product div.product form.cart .variations ul li .variable-item, 
.woo-main .woo-main__single-product div.product form.cart .variations ul li .variable-item-span {
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border-radius: var(--radius-2);
    border: 2px solid var(--bg-1);
    min-height: 5rem;
	min-width: 5rem;
    padding: 5px 15px;
    background-color: var(--bg-1);
	
	display: inline-flex;
	align-items: center;
    justify-content: center;
}
.woo-main .woo-main__single-product div.product form.cart .variations ul li .variable-item-image {
	border-radius: var(--radius-2);
    border: 2px solid var(--bg-2);
	transition: all 0.2s ease-in-out;
}
.woo-main .woo-main__single-product div.product form.cart .variations ul li:hover .variable-item-contents > * {
    border-color: var(--color-1);
}

.woo-main .woo-main__single-product div.product form.cart .variations ul li .variable-item-contents:before {
	background-size: 40% !important;
}
.woo-main .woo-main__single-product .variable-item:not(.radio-variable-item).button-variable-item.selected:not(.no-stock) .variable-item-span {
	border-color: var(--font-color-1) !important;
}

.woo-main__single-product [data-wvstooltip]:before {
	background-color: var(--color-1);
	box-shadow: unset;
}
.woo-main__single-product [data-wvstooltip]:after {
	border-top-color: var(--color-1);
}

.woo-main__single-product .reset_variations {
	display: none !important;
}

.woo-main__single-product .woocommerce-variation-price {
	display: none;
}

.woo-main__single-product .yith-wapo-block .yith-wapo-addon.yith-wapo-addon-type-text .yith-wapo-option .tooltip span {
	transform: translateX(0%) translateY(0px) !important;
}
