/* ==============================================================
   NOWY WYGLĄD UPSELL: POZIOMA LISTA POD GALERIĄ ZDJĘĆ
   ============================================================== */

/* 1. Odstęp od galerii zdjęć */
.woocommerce div.product section.upsells,
.woocommerce div.product .woosl-wrap {
    margin-top: 40px !important;
    padding-top: 0 !important;
    border-top: none !important;
    width: 100% !important;
    clear: both !important;
}

/* 2. Nagłówek sekcji - jak u konkurencji */
.woocommerce div.product section.upsells h2,
.woocommerce div.product .woosl-wrap h2 {
    font-size: 18px !important;
    text-transform: none !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
    text-align: left !important;
    letter-spacing: 0 !important;
    color: #222 !important;
}

/* 3. Zmiana układu na pionową kolumnę (lista zamiast siatki) */
.woocommerce div.product section.upsells ul.products,
.woocommerce div.product section.upsells ul.loops-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important; /* Odstęp między proponowanymi produktami */
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* 4. POZIOMA KARTA PRODUKTU (Kluczowa zmiana) */
.woocommerce div.product section.upsells ul.products li.product,
.woocommerce div.product section.upsells ul.loops-wrapper li.product {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 10px !important;
    background: transparent !important;
    float: none !important;
    clear: none !important;
}

/* 5. Miniaturowe zdjęcie po lewej stronie */
.woocommerce div.product section.upsells ul.products li.product > a:first-child,
.woocommerce div.product section.upsells ul.products li.product .post-image,
.woocommerce div.product section.upsells ul.products li.product img {
    width: 70px !important; /* Mały kwadrat */
    min-width: 70px !important;
    height: auto !important;
    margin: 0 20px 0 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* Ułożenie tekstów i przycisku w prawym bloku (obok zdjęcia) */
.woocommerce div.product section.upsells ul.products li.product .product-content,
.woocommerce div.product section.upsells ul.products li.product .product-content-inner-wrapper,
.woocommerce div.product section.upsells ul.products li.product .product-content-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* Wszystko do lewej krawędzi */
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 6. Kompresja tekstów (Tytuł i cena) */
.woocommerce div.product section.upsells ul.products li.product .woocommerce-loop-product__title,
.woocommerce div.product section.upsells ul.products li.product h2,
.woocommerce div.product section.upsells ul.products li.product h3 {
    font-size: 13px !important;
    line-height: 1.3 !important;
    margin: 0 0 5px 0 !important;
    white-space: normal !important;
    font-weight: 700 !important;
    text-align: left !important;
    text-transform: none !important;
    color: #000 !important;
}

.woocommerce div.product section.upsells ul.products li.product .price {
    font-size: 14px !important;
    margin: 0 0 10px 0 !important;
    text-align: left !important;
    display: block !important;
    color: #222 !important;
}

/* 7. Dyskretny przycisk "Dodaj do koszyka" - pod ceną, dosunięty do lewej */
.woocommerce div.product section.upsells ul.products li.product a.button,
.woocommerce div.product section.upsells ul.products li.product .add_to_cart_button {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 15px !important;
    font-size: 11px !important;
    width: auto !important; /* Pozwalamy mu zająć tylko tyle miejsca, ile potrzebuje napis */
    max-width: none !important;
    margin: 0 !important;
    align-self: flex-start !important; /* Dociąga przycisk do lewej strony */
}

/* ==============================================================
   8. WERSJA MOBILNA: Zachowanie poziomego układu
   ============================================================== */
@media screen and (max-width: 768px) {
    .woocommerce div.product section.upsells ul.products li.product > a:first-child,
    .woocommerce div.product section.upsells ul.products li.product .post-image,
    .woocommerce div.product section.upsells ul.products li.product img {
        width: 60px !important; /* Odrobinę mniejsze zdjęcie na telefonie */
        min-width: 60px !important;
        margin-right: 15px !important;
    }
}
/* ==============================================================
   KOMPRESJA PUSTYCH PRZESTRZENI NA KARCIE PRODUKTU
   ============================================================== */

/* 1. GÓRNA STRZAŁKA: Likwidacja dziury pod stanem magazynowym / ceną */
.woocommerce div.product p.price,
.woocommerce div.product p.stock {
    margin-bottom: 10px !important; /* Przycina domyślny margines dolny */
}

.woocommerce div.product form.cart,
.woocommerce div.product .variations_form {
    margin-top: 5px !important; /* Podciąga cały blok wyboru opcji do góry */
}

/* 2. DOLNA STRZAŁKA: Likwidacja dziury pod przyciskiem "Dodaj do koszyka" */
.woocommerce div.product form.cart {
    margin-bottom: 15px !important; /* Domyślnie Woo daje tu gigantyczny odstęp */
    padding-bottom: 0 !important;
}

/* 3. Podciągnięcie sekcji proponowanych (nadpisuje nasz poprzedni kod) */
.woocommerce div.product section.upsells,
.summary.entry-summary section.upsells,
.summary.entry-summary .woosl-wrap {
    margin-top: 5px !important; /* Zmniejszono z 30/40px z poprzedniej wersji */
    padding-top: 10px !important;
}

/* 4. Dociśnięcie nagłówka "Może spodoba się również" */
.summary.entry-summary section.upsells h2,
.woocommerce div.product section.upsells h2,
.summary.entry-summary .woosl-wrap h2 {
    margin-bottom: 10px !important; 
}