/* ==========================================================================
   PRODUCTPAGE.CSS - Style karty pojedynczego produktu
   ========================================================================== */

/* =========================================
   1. GŁÓWNY UKŁAD STRONY
   ========================================= */

.nowoczesna-karta-produktu {
    max-width: 1200px; 
    margin: 0 auto;
    padding: 20px;
}

.product-top-section {
    display: grid;
    grid-template-columns: 1.2fr 1fr; /* 55% Galeria / 45% Podsumowanie */
    gap: 50px;
    margin-bottom: 60px;
    align-items: start; 
}


/* =========================================
   2. PODSUMOWANIE (Prawy Panel Sticky)
   ========================================= */

.sticky-summary-content {
    position: sticky;
    top: 30px; 
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.06);
    border: 1px solid #eee;
}

.product_title {
    font-size: 2.2em;
    color: var(--textMain);
    margin-bottom: 10px;
    line-height: 1.2;
}

/* --- Cenówka: Wariant B (bold inline) --- */
.sticky-summary-content .price-line {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.sticky-summary-content .price-line p.price {
    font-size: 2.4em !important;
    color: var(--textMain) !important;
    font-weight: 800;
    margin: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.sticky-summary-content p.price ins {
    text-decoration: none !important;
}

.sticky-summary-content p.price del {
    opacity: 0.5;
    font-size: 0.45em;
    font-weight: 400 !important;
    display: inline-block;
}

.sticky-summary-content .price-badge {
    display: inline-block;
    vertical-align: middle;
}

.sticky-summary-content .save-note {
    font-size: 0.85em;
    color: var(--assistThemeDark);
    font-weight: 600;
    margin-bottom: 18px;
}

.sticky-summary-content p.stock {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85em;
    font-weight: 600;
    margin-bottom: 22px !important;
}

.sticky-summary-content p.stock::before {
    content: "";
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-size: contain;
}

.sticky-summary-content p.stock.in-stock {
    color: #2e8b57 !important;
}

.sticky-summary-content p.stock.in-stock::before {
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%232e8b57%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206L9%2017l-5-5%22%2F%3E%3C%2Fsvg%3E");
}

.sticky-summary-content p.stock.out-of-stock {
    color: #d63031 !important;
}

.sticky-summary-content p.stock.out-of-stock::before {
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23d63031%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%206L6%2018M6%206l12%2012%22%2F%3E%3C%2Fsvg%3E");
}

.woocommerce span.onsale {
    display: none !important; /* Całkowite ukrycie domyślnego badge'a Woo - zastąpione przez .price-badge */
}

/* --- Opis i Meta --- */
.woocommerce-product-details__short-description {
    margin-bottom: 25px;
    color: #666;
    line-height: 1.6;
}

.product_meta {
    font-size: 0.85em;
    color: #999;
    border-top: 1px solid #eee;
    padding-top: 15px;
}

.product_meta > span {
    display: block;
    margin-bottom: 5px;
}

.product_meta a {
    color: var(--leadThemeDark);
    text-decoration: none;
}


/* =========================================
   3. KOSZYK I ILOŚĆ
   ========================================= */

form.cart {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.quantity input {
    height: 45px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 1.1em;
    width: 70px;
    text-align: center;
    color: #333;
}

.single_add_to_cart_button {
    background-color: var(--leadTheme) !important;
    color: white !important;
    border: none;
    padding: 0 30px;
    height: 45px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 1.1em;
    cursor: pointer;
    flex-grow: 1;
    transition: 0.3s;
}

.single_add_to_cart_button:hover {
    background-color: var(--leadThemeDim) !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(78, 210, 250, 0.4);
}

/* --- Koszyk i CTA: Wariant B (bold inline) --- */
.sticky-summary-content form.cart {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* !important, bo WooCommerce ma własny '.woocommerce div.product form.cart
       { margin-bottom: 2em }' o wyższej specyficzności. */
    margin-bottom: 16px !important;
    flex-wrap: nowrap;
}

/* Produkty z wariantami: WooCommerce zagnieżdża Ilość i przycisk jeden poziom głębiej
   (w .woocommerce-variation-add-to-cart wewnątrz .single_variation_wrap), więc gap
   z form.cart ich nie obejmuje - trzeba powtórzyć tu, inaczej dotykają się bez odstępu. */
.sticky-summary-content .woocommerce-variation-add-to-cart {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sticky-summary-content .qty-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--borderColor);
    border-radius: 8px;
    height: 48px;
    padding: 0 16px;
}

.sticky-summary-content .qty-row .qty-label {
    font-size: 0.9em;
    color: #777;
    font-weight: 600;
}

.sticky-summary-content .quantity {
    display: flex;
    align-items: center;
    gap: 4px;
    border: none;
    height: auto;
    padding: 0;
}

.sticky-summary-content .quantity .qty-btn {
    background: none;
    border: none;
    font-size: 1.3em;
    color: var(--textMain);
    cursor: pointer;
    width: 24px;
}

.sticky-summary-content .quantity input.qty {
    border-left: 1px solid var(--borderColor) !important;
    border-right: 1px solid var(--borderColor) !important;
}

.sticky-summary-content .single_add_to_cart_button {
    width: 100%;
    height: 54px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--leadTheme) 0%, var(--leadThemeDark) 100%) !important;
    font-weight: 800;
    font-size: 1.1em;
    flex-grow: 0;
    box-shadow: 0 8px 20px rgba(78, 210, 250, 0.4);
    letter-spacing: 0.01em;
    transition: background 0.2s, box-shadow 0.2s, opacity 0.2s, transform 0.2s;
    /* Trochę niżej - by przycisk był wizualnie wyśrodkowany między panelem
       ilości a poziomą kreską poniżej (dopełnienie do margin-bottom form.cart). */
    margin-top: 16px !important;
}

/* Produkt wariantowy bez wybranego rozmiaru/koloru - przycisk jest faktycznie
   zablokowany (klasa .disabled, cursor:not-allowed), ale musi też WYGLĄDAĆ
   jak nieaktywny, inaczej klient próbuje klikać "martwy" przycisk. */
.sticky-summary-content .single_add_to_cart_button.disabled,
.sticky-summary-content .single_add_to_cart_button:disabled {
    background: #ccc !important;
    color: #888 !important;
    box-shadow: none;
    cursor: not-allowed;
}

.sticky-summary-content .single_add_to_cart_button.disabled:hover,
.sticky-summary-content .single_add_to_cart_button:disabled:hover {
    transform: none;
    box-shadow: none;
}


/* =========================================
   4. GALERIA ZDJĘĆ WOOCOMMERCE
   ========================================= */

.product-gallery-wrapper {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.woocommerce-product-gallery {
    opacity: 1 !important;
    margin: auto;
    position: relative;
    margin-bottom: 30px;
    display: grid;
    grid-template-columns: 1fr;
}

/* Galeria używa grid, żeby strzałki (dodawane przez FlexSlider jako kolejne
   rodzeństwo .flex-viewport, a nie jego potomek) mogły zajmować ten sam "wiersz"
   co zdjęcie główne i centrować się względem jego wysokości, a nie całej galerii
   z miniaturkami. Trzeba jawnie umieścić WSZYSTKICH bezpośrednich potomków
   (.flex-viewport zawiera samo zdjęcie; przycisk lupki jest position:absolute,
   ale w grid i tak bierze udział w auto-rozmieszczeniu) - inaczej przeglądarka
   doda dodatkowe, niepotrzebne wiersze. */
.woocommerce-product-gallery > .flex-viewport {
    grid-row: 1;
    grid-column: 1;
}

.woocommerce-product-gallery > .woocommerce-product-gallery__trigger {
    grid-row: 1;
    grid-column: 1;
}

.woocommerce-product-gallery > ol.flex-control-thumbs {
    grid-row: 2;
    grid-column: 1;
}

.woocommerce-product-gallery .flex-viewport {
    margin-bottom: 15px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px #eee; 
    transform: translateZ(0);
}

.woocommerce-product-gallery__image img {
    display: block;
    margin: 0 auto;
    width: 100% !important;
    height: auto;
    object-fit: cover;
    transform: scale(1.001); 
    border-radius: 8px;
}

/* Naprawa wbudowanej funkcji Zoom */
.woocommerce-product-gallery__image img.zoomImg {
    max-width: none !important;
    max-height: none !important;
    width: auto !important;
    height: auto !important;
}

.woocommerce-page div.product div.images {
    width: 100% !important; 
}

/* --- Miniaturki (Zgrupowane i oczyszczone z dubli) --- */
.woocommerce div.product div.images .flex-control-thumbs,
.woocommerce-product-gallery ol.flex-control-thumbs {
    list-style-type: none !important; 
    padding: 0 !important; 
    margin: 15px 0 0 0 !important;
    display: flex !important; 
    flex-wrap: wrap !important; 
    gap: 12px !important; 
    justify-content: flex-start; 
}

.woocommerce div.product div.images .flex-control-thumbs li,
.woocommerce-product-gallery ol.flex-control-thumbs li {
    width: 80px !important; 
    height: 80px !important; 
    flex: 0 0 auto !important;
    margin: 0 !important; 
    border: 2px solid transparent !important; 
    border-radius: 6px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    box-sizing: border-box !important; 
    clear: none !important;
}

.woocommerce div.product div.images .flex-control-thumbs li img,
.woocommerce-product-gallery ol.flex-control-thumbs li img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; 
    display: block !important;
    opacity: 0.6 !important; 
    transition: border-color 0.2s ease, opacity 0.2s ease !important;
}

/* Aktywne / Hover miniaturki */
.woocommerce div.product div.images .flex-control-thumbs li:hover img,
.woocommerce div.product div.images .flex-control-thumbs li.flex-active img,
.woocommerce-product-gallery ol.flex-control-thumbs li:hover img,
.woocommerce-product-gallery ol.flex-control-thumbs li.flex-active img {
    opacity: 1 !important;
}

.woocommerce-product-gallery ol.flex-control-thumbs li.flex-active {
    border-color: var(--leadTheme) !important;
}

/* --- Strzałki nawigacji głównego zdjęcia (FlexSlider) ---
   FlexSlider dokleja .flex-direction-nav jako rodzeństwo .flex-viewport (czyli faktycznego
   kontenera zdjęcia), a nie jako jego potomka. Żeby strzałki centrowały się względem samego
   zdjęcia (a nie całej galerii łącznie z miniaturkami), umieszczamy je w tym samym "wierszu"
   grida co .flex-viewport (patrz grid-row na .woocommerce-product-gallery powyżej) i dopiero
   w nim pozycjonujemy. */
.woocommerce-product-gallery .flex-direction-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    grid-row: 1;
    grid-column: 1;
    position: relative;
    pointer-events: none;
}

.woocommerce-product-gallery .flex-direction-nav li {
    margin: 0;
}

.woocommerce-product-gallery .flex-direction-nav a {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: auto;
    z-index: 5;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-indent: -9999px;
    overflow: hidden;
    transition: 0.2s;
}

.woocommerce-product-gallery .flex-direction-nav a::before {
    content: "";
    text-indent: 0;
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-size: contain;
}

.woocommerce-product-gallery .flex-direction-nav a.flex-prev {
    left: 14px;
}

.woocommerce-product-gallery .flex-direction-nav a.flex-next {
    right: 14px;
}

.woocommerce-product-gallery .flex-direction-nav a.flex-prev::before {
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23333%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%2018l-6-6%206-6%22%2F%3E%3C%2Fsvg%3E");
}

.woocommerce-product-gallery .flex-direction-nav a.flex-next::before {
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23333%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2018l6-6-6-6%22%2F%3E%3C%2Fsvg%3E");
}

.woocommerce-product-gallery .flex-direction-nav a:hover {
    background: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.woocommerce-product-gallery .flex-direction-nav a.flex-disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}


/* =========================================
   5. WARIANTY (ROZMIAR/KOLOR)
   ========================================= */

table.variations {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 25px;
}

table.variations th.label,
table.variations td.value {
    padding: 10px 0;
    vertical-align: middle;
    border: none;
}

table.variations th.label {
    width: 25%;
    text-align: left;
    color: var(--textMain, #333);
    font-weight: 600;
    font-size: 0.95rem;
    padding-right: 15px;
}

/* Nowoczesny dropdown dla wariantów */
table.variations select {
    width: 100%;
    max-width: 320px;
    appearance: none; 
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fcfcfc;
    border: 1px solid #ddd;
    border-radius: 8px; 
    padding: 12px 40px 12px 15px;
    font-size: 0.95rem;
    color: #444;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.3s ease;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 10px auto;
}

table.variations select:focus,
table.variations select:hover {
    border-color: var(--leadTheme, #333);
    outline: none;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

/* Natywny select jest ukrywany przez JS (late.js) po zbudowaniu własnego dropdownu
   poniżej - zostaje w DOM/formularzu (logika wariantów/sortowania WooCommerce go
   potrzebuje), ale wizualnie niewidoczny. Jeśli JS się nie wykona, zwykły select
   (styl wyżej) zostaje widoczny jako fallback. Reguła jest ogólna (nie tylko
   table.variations), bo ten sam dropdown jest też używany np. przy sortowaniu. */
select.wc-select-hidden {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    pointer-events: none;
}

/* --- Własny dropdown wariantów (zastępuje natywną rozwijaną listę opcji,
   której nie da się ostylować w przeglądarkach) --- */
.custom-select {
    position: relative;
    width: 100%;
    max-width: 320px;
    font-size: 0.95rem;
}

.custom-select-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fcfcfc;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px 15px;
    font-size: 0.95rem;
    color: #444;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.3s ease;
}

.custom-select-trigger:focus-visible {
    outline: 2px solid var(--leadTheme);
    outline-offset: 2px;
}

.custom-select-trigger svg {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    margin-left: 10px;
    color: #333;
    transition: transform 0.2s ease;
}

.custom-select.open .custom-select-trigger {
    border-color: var(--leadTheme);
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(78, 210, 250, 0.12);
}

.custom-select.open .custom-select-trigger svg {
    transform: rotate(180deg);
}

.custom-select-list {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 20;
    background: #fff;
    border: 1px solid var(--borderColor);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
    padding: 6px;
    margin: 0;
    list-style: none;
    max-height: 70vh; /* scroll tylko gdy lista realnie zajęłaby większość ekranu */
    overflow-y: auto;
}

.custom-select.open .custom-select-list {
    display: block;
}

.custom-select-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--textMain);
}

.custom-select-list li:hover {
    background: rgba(78, 210, 250, 0.12);
}

.custom-select-list li.active {
    background: var(--leadTheme);
    color: #fff;
    font-weight: 600;
}

.custom-select-list li.active svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.custom-select-list li.disabled {
    color: #bbb;
    cursor: not-allowed;
}

/* Przycisk "Wyczyść" */
a.reset_variations {
    display: none !important; /* Ukryty, usuń tą linijkę i odkomentuj poniższą by wyświetlać */
    /* display: inline-block; */
    margin-top: 8px;
    margin-left: 10px;
    font-size: 0.85rem;
    color: #ff4757; 
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    visibility: hidden; 
}

a.reset_variations:hover {
    color: #d63031;
    text-decoration: underline;
}


/* =========================================
   6. ZAKŁADKI (TABS) I OPINIE
   ========================================= */

.product-bottom-section {
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    margin-top: 40px;
}

.woocommerce-tabs ul.tabs {
    border-bottom: 2px solid #eee;
    padding: 0;
    margin: 0 0 30px 0;
    list-style: none;
    display: flex;
    gap: 30px;
}

.woocommerce-tabs ul.tabs li {
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
}

.woocommerce-tabs ul.tabs li a {
    padding: 10px 0;
    font-weight: bold;
    color: #999;
    text-decoration: none;
    display: block;
    position: relative;
    font-size: 1.1em;
    transition: 0.3s;
}

.woocommerce-tabs ul.tabs li.active a {
    color: var(--textMain);
}

.woocommerce-tabs ul.tabs li.active a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--leadTheme);
}

/* --- Układ Opinii --- */
#reviews {
    margin: 0;
    padding: 0;
    display: grid;
    gap: 40px;
    grid-template-columns: 1fr 1fr;
}

#comments {
    width: 100%;
    /* min-width: 0 - element grida może zwęzić się do toru; bez tego min-content
       treści opinii rozpychał #comments ~4px poza prawą krawędź (asymetria). */
    min-width: 0;
}

.woocommerce-Reviews-title {
    font-size: 1.4em;
    margin: 0 0 20px 0;
    color: var(--textMain);
    padding-bottom: 10px;
    border-bottom: 2px solid #eee;
}

.woocommerce-noreviews {
    color: #777;
    font-style: italic;
    background: #f9f9f9;
    padding: 15px;
    border-radius: 6px;
    border-left: 3px solid #ccc;
}

/* Lista napisanych opinii */
.commentlist {
    list-style: none;
    padding: 0 10px 0 0;
    margin: 0;
    max-height: 750px !important;
    overflow-y: auto !important;
}

.commentlist li {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    flex-direction: column;
}

/* Awatary (ikony) w opiniach ukryte - zajmują zbędne miejsce.
   !important, bo WooCommerce ma własne reguły o wysokiej specyficzności. */
.commentlist li .avatar,
.commentlist li img.avatar {
    display: none !important;
}

.comment-text {
    flex-grow: 1;
}

/* Treść opinii wyrównana do lewej - WooCommerce domyślnie odsuwa ją w prawo
   marginesem (margin-left:50px) robiącym miejsce na awatar, którego już nie ma.
   box-sizing: border-box - padding mieści się w szerokości, więc równy padding
   (także z lewej, by tekst nie przyklejał się do ramki) nie poszerza karty. */
.commentlist li .comment-text {
    box-sizing: border-box;
    margin-left: 0 !important;
    padding: 16px 16px 0 16px !important;
}

.comment-text .meta {
    font-size: 0.85em;
    color: #999;
    margin-bottom: 8px;
}

/* Formularz wprowadzania opinii */
#review_form_wrapper {
    margin-top: 40px;
    background: #fcfcfc; 
    padding: 25px;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    height: fit-content;
}

#reply-title {
    display: block;
    font-size: 1.2em;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--textMain);
}

.comment-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.comment-form label {
    display: block;
    font-weight: 600;
    font-size: 0.9em;
    margin-bottom: 5px;
    color: var(--textMain);
}

/* Customowe zachowanie Gwiazdek (Rating) */
.comment-form-rating { margin-bottom: 10px; }
#rating { display: none; }
/* white-space: nowrap - gwiazdki nigdy się nie zawijają do drugiego rzędu */
p.stars { margin-top: 5px; font-size: 1.6em; white-space: nowrap; }
p.stars a {
    display: inline-block;
    /* Stała szerokość gwiazdki - bez tego <a> przyjmuje szerokość ukrytego tekstu
       etykiety ("1 z 5 gwiazdek" ~80px) i 5 gwiazdek nie mieści się w jednym rzędzie. */
    width: 1.4em;
    height: 1.4em;
    overflow: hidden;
    font-weight: 700;
    margin-right: 0.3em;
    text-indent: -9999px;
    position: relative;
    color: #ccc;
    text-decoration: none;
    transition: 0.2s;
}

p.stars a::before {
    content: "★"; 
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    text-indent: 0; text-align: center;
}

/* Hover na formularzu */
p.stars:hover a { color: var(--assistTheme); }
p.stars a:hover ~ a { color: #ccc; }

/* Zaznaczone gwiazdki formularza */
p.stars.selected a.active { color: var(--assistTheme); }
p.stars.selected a.active ~ a { color: #ccc; }

/* Gwiazdki WooCommerce (Domyślne wygładzenie logiki) */
.woocommerce p.stars a::before {
    color: var(--assistTheme) !important; 
    transition: color 0.2s ease-in-out;
}
.woocommerce p.stars:hover a::before { color: #ffc107 !important; }
.woocommerce p.stars a:hover ~ a::before { color: var(--assistTheme) !important; }
.woocommerce p.stars.selected a::before { color: #ffc107 !important; }
.woocommerce p.stars.selected a.active ~ a::before { color: var(--assistTheme) !important; }

.star-rating { color: orange !important; }

.woocommerce-review-link {
    font-size: 0.75em;
    color: #777 !important;
    font-style: italic;
}

/* Pola wejściowe formularza opinii (Niezalogowani) */
#commentform .required {
    color: #ff4757;
    font-weight: bold;
}

#comment {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 12px;
    font-family: inherit;
    min-height: 120px;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

#commentform input[type="text"],
#commentform input[type="email"] {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px; 
    font-size: 0.95rem;
    color: var(--textMain, #333);
    background-color: #ffffff;
    transition: all 0.3s ease;
    box-sizing: border-box;
    font-family: inherit;
}

#comment:focus,
#commentform input[type="text"]:focus,
#commentform input[type="email"]:focus {
    border-color: var(--leadTheme, #333);
    outline: none;
    box-shadow: 0 0 0 3px rgba(78, 210, 250, 0.1);
}

/* Checkbox zgody (Cookies) */
.comment-form-cookies-consent {
    display: flex;
    align-items: flex-start; 
    gap: 10px;
    margin-top: 15px;
    margin-bottom: 25px;
    clear: both; 
}

.comment-form-cookies-consent input[type="checkbox"] {
    margin: 0;
    margin-top: 3px; 
    width: 18px;
    height: 18px;
    accent-color: var(--leadTheme, #333);
}

.comment-form-cookies-consent label {
    margin-bottom: 0;
    font-weight: 400;
    font-size: 0.85rem;
    color: #777;
    display: inline;
    line-height: 1.5;
    cursor: pointer; 
}

/* Przycisk wysyłania opinii - gradientowe CTA jak reszta motywu.
   !important, bo WooCommerce ma własny '.woocommerce #respond input#submit'
   o wysokiej specyficzności (szary domyślny przycisk). */
#submit {
    background: linear-gradient(135deg, var(--leadTheme) 0%, var(--leadThemeDark) 100%) !important;
    color: #fff !important;
    border: none !important;
    padding: 14px 28px !important;
    border-radius: 8px !important;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 0.9em;
    box-shadow: 0 8px 18px rgba(78, 210, 250, 0.35);
}

#submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(78, 210, 250, 0.45);
}


/* =========================================
   7. POWIĄZANE PRODUKTY I PODOBNE
   ========================================= */

.related.products h2,
.related.products > h2 {
    font-size: 1.6em;
    margin-top: 40px;
    margin-bottom: 20px;
    text-align: center;
}

.related.products > h2 {
    margin: 50px 0 30px 0;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--leadTheme);
    display: inline-block;
}

.related.products ul.products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 30px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.related.products ul.products li {
    width: 100%; 
    margin: 0;  
}

.related.products .n-kafelek {
    height: 100%; 
}

.woocommerce section.related ul.products::before {
    display: none !important; 
}

.woocommerce section.related li .kafelek-add-cart {
    width: 50%;
    margin-left: 10px;
    text-align: center;
}


/* =========================================
   8. LIGHTBOX ZDJĘĆ (PHOTOSWIPE)
   ========================================= */

.pswp__bg {
    background: rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: blur(10px); 
}

.pswp__top-bar {
    background: transparent !important;
    max-width: 900px !important; 
    margin: 0 auto !important;  
    left: 0 !important;
    right: 0 !important;
    padding-top: 15px !important; 
}

.pswp__button {
    filter: invert(1); 
    opacity: 0.7 !important;
    transition: opacity 0.2s ease !important;
}

.pswp__button:hover {
    opacity: 1 !important;
}

.pswp__button--share {
    display: none !important;
}

.pswp__counter {
    color: #333 !important;
    font-weight: 600;
    font-size: 1rem !important;
    font-family: inherit;
}

.pswp__caption__center {
    color: #333 !important;
    text-shadow: none !important;
    font-size: 0.9rem;
}

/* Nowoczesne pływające strzałki */
.pswp__button--arrow--left, 
.pswp__button--arrow--right {
    background-color: rgba(255, 255, 255, 0.85) !important;
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    margin-top: -22px !important; 
}

.pswp__button--arrow--left {
    left: 12vw !important; 
}

.pswp__button--arrow--right {
    right: 12vw !important; 
}

.pswp__button--arrow--left::before, 
.pswp__button--arrow--right::before {
    background-color: transparent !important; 
    top: 0 !important;
    left: 0 !important;
    width: 44px !important;
    height: 44px !important;
}

/* =========================================
   9. WYGLĄD KOMUNIKATU OMNIBUS (WC Price History)
   ========================================= */


div.wc-price-history {
    display: block;
    font-size: 0.85rem;
    color: #888;
    margin-top: 4px;
    margin-bottom: 16px;
    padding-left: 8px;
    border-left: 2px solid #ddd;
    line-height: 1.4;
}

/* Wewnętrzny span z ceną musi zostać w tej samej linii */
span.wc-price-history {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Pogrubienie samej kwoty */
div.wc-price-history .woocommerce-Price-amount {
    color: #888;
    font-weight: 700;
}


/* =========================================
   10. RESPONSYWNOŚĆ
   ========================================= */

@media (min-width: 768px) {
    /* Formularz wprowadzania autora i maila opinii */
    .comment-form-author {
        float: left;
        width: 48%;
        margin-right: 4%;
    }
    
    .comment-form-email {
        float: left;
        width: 48%;
    }
    
    .comment-form-email::after {
        content: "";
        display: table;
        clear: both;
    }
}

@media (max-width: 900px) {
    /* Mniejszy padding sekcji dolnej na telefonie (40px zjadałoby zbyt dużo) */
    .product-bottom-section {
        padding: 20px;
    }

    .product-top-section {
        grid-template-columns: 1fr; /* Jeden panel pod drugim */
        gap: 30px;
    }
    
    .sticky-summary-content {
        position: static; /* Wyłączenie przyklejania na mobile */
        padding: 20px;
    }
    
    .product_title {
        font-size: 1.8em;
    }
    
    /* Układ blokowy zamiast grida na mobile: panele po prostu jeden pod drugim.
       Grid z torem 1fr rozpychał się do min-content treści (tytuł/formularz),
       przez co blok opinii wystawał ~4px w prawo (asymetria). */
    #reviews {
        display: block;
    }

    /* Lista opinii: bez zagnieżdżonego scrolla (na mobile płynie naturalnie) */
    .commentlist {
        max-height: none !important;
        overflow: visible !important;
        padding-right: 0;
    }

    /* Mniejsze wcięcie odpowiedzi (zagnieżdżonych komentarzy) - 50px to za dużo
       na wąskim ekranie. !important, bo WooCommerce ustawia to z wyższą specyficznością. */
    .commentlist .children {
        margin-left: 16px !important;
    }

    /* Formularz opinii: mniejszy padding, przycisk na pełną szerokość */
    #review_form_wrapper {
        padding: 18px;
    }

    #submit {
        width: 100%;
    }

    /* Większe, łatwiej dotykalne gwiazdki oceny na telefonie */
    p.stars {
        font-size: 1.9em;
    }
}

@media (max-width: 576px) {
    /* Rozbijanie tabeli wariantów na telefonach */
    table.variations tbody,
    table.variations tr,
    table.variations th,
    table.variations td {
        display: block; 
        width: 100%;
        text-align: left;
    }
    
    table.variations th.label {
        padding-bottom: 5px; 
    }
    
    table.variations select {
        max-width: 100%;
    }

    .custom-select {
        max-width: 100%;
    }

    a.reset_variations {
        margin-left: 0;
        margin-top: 12px;
    }
}