/* Dodaj tylko te klasy do istniejącego CSS */

/* Wrapper dla sub-nav z obrazkiem */
.zamel-sub-nav-wrapper {
    display: flex;
    gap: 2rem;
}

/* Kontener na obrazek */
.zamel-sub-nav-image {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

@media (width < 48em) {
    .zamel-sub-nav-wrapper {
        flex-direction: column;
    }

    .zamel-sub-nav-image {
        display: none !important;
    }
}

/* Obrazek */
.zamel-sub-nav-image-element {
    max-width: 100%;
    max-height: 200px;
    object-fit: contain;
    transition: opacity 0.3s ease-in-out;
}

/* Hover na elementach menu - podświetlenie USUNIĘTE */
/* .zamel-sub-nav > li:hover {
    background-color: var(--zamel-c-light-blue);
    padding: 0.25em 0.5em;
    margin: -0.25em -0.5em;
    border-radius: 4px;
} */

.zamel-sub-nav-image-element {
    max-width: 100%;
    max-height: 450px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
}

.zamel-sub-nav-image {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    min-height: 300px;
    /*background-color: #fafafa; !* Lekko szare tło dla kontrastu *!*/
    border-radius: 4px;
    margin: -1rem -1rem -1rem 0; /* Negatywny margin dla lepszego wypełnienia */
}


.zamel-sub-nav-wrapper {
    display: flex;
    gap: 20rem;
}

.zamel-sub-nav-image {
    position: absolute;
    right: -0.5rem; /* Wychodzi poza padding kontenera */
    bottom: 3rem; /* Wychodzi poza padding kontenera */
    width: 900px; /* Stała szerokość */
    height: 450px; /* Stała wysokość */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    /*opacity: 0.9;*/
}

/*.zamel-sub-nav-container.zamel-mobile-p-1.zamel-tablet-up-p-2_5.zamel-sub-nav::after {*/
/*    display: none;*/
/*}*/

/* Obrazek */
.zamel-sub-nav-image-element {
    width: 100%;
    height: 100%;
    display: flex;
    object-fit: contain;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* Kontener podmenu - overflow visible aby obrazek mógł wystawać */
.zamel-sub-nav-container {
    overflow: visible !important;
}


/* Pokaż obrazek tylko gdy jest hover na całym podmenu */
.zamel-has-sub-nav:hover .zamel-sub-nav-image {
    display: flex;
}

/* Alternatywnie - pokaż tylko gdy jest hover na konkretnym elemencie listy */
.zamel-sub-nav li:hover ~ .zamel-sub-nav-image {
    display: flex;
}

.zamel-sub-nav-image-element {
    transition: opacity 0.15s ease-in-out;
}