/* Menu */



.eshop-menu {

    display: flex;

    flex-direction: row;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    padding: 3em 10em;

    background-color: var(--bg-section-1);

}



.eshop-menu ul {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 2em;

}



.eshop-menu li {

    list-style: none;

    color: black;

}



.eshop-menu li a {

    text-decoration: none;

    padding: 0.8em;

    border-radius: 0.5em;

    color: black;

}



.eshop-menu li a:hover {

    background-color: var(--active-bg-color);

    color: white;

}



.eshop-menu-active {

    background-color: var(--active-bg-color);

    color: white !important;

}



/* Responsive - napevno nastavený padding: 3em 10em nechával na úzké obrazovce

   na obsah pár pixelům a názvy kategorií se lámaly přes více řádků. */

@media (max-width: 1250px) {

    .eshop-menu {

        padding: 2em;

    }

    .eshop-menu ul {

        gap: 1em;

    }

}



@media (max-width: 750px) {

    .eshop-menu {

        padding: 1.5em 1em;

    }

    /* Svislý seznam přes celou šířku - každá kategorie na jednom řádku. */

    .eshop-menu ul {

        flex-direction: column;

        gap: 0.4em;

        width: 100%;

    }

    .eshop-menu li {

        width: 100%;

    }

    .eshop-menu li a {

        display: block;

        text-align: center;

        white-space: nowrap;

    }

}





/* Products */



.products {

    display: flex;

    flex-direction: row;

    gap: 1em;

    background-color: var(--bg-section-1);

}



.products .card {

    display: flex;

    justify-content: center;

    align-items: center;

    max-width: 15em;

    border-radius: 8px;

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

    padding: 0;

}



.products .card a {

    display: flex;

    flex-direction: column;

    gap: 1em;

    color: black;

    text-decoration: none;

    padding: 1em;

}



.products .card * {

    border-radius: 8px;

}



.products .card:hover {

    transform: scale(1.1);

    transition: transform .2s;

    background-color: white;

    z-index: 100;

}



.products .card img {

    width: 100%;

    /* Rezervované místo (poměr 3:4 jako náhledy ze starého webu) – bez posunu při líném načítání;

       nové fotky jiného poměru se ořežou na střed místo nerovných karet. */

    height: auto;

    aspect-ratio: 3 / 4;

    object-fit: cover;

}