/**
 *  Style definitions for the products overview.
 *
 *  @copyright  2025 Vinacles BV
 *  @author     Anouar Jaama
 *  @author     Clyde Semeleer
 */
@layer components {
    ul.products-overview {
        --product-per-column: 4;
        @apply my-12 mb-20 p-0 list-none;
        display: grid;
        grid-gap: 2rem 3rem;
        grid-template-columns: repeat(var(--product-per-column), 1fr);
    }

    @media (max-width: 1024px) {
        ul.products-overview {
            --product-per-column: 2;
        }
    }

    @media (max-width: 640px) {
        ul.products-overview {
            --product-per-column: 1;
        }
    }

    .products-overview > li.stretch {
        @apply col-span-full;
    }

    .products-overview > li.category {
        @apply mt-6;

        > h3 {
            @apply inline-block m-0;
            font-family: 'Vinacles', sans-serif;
        }

        > img {
            @apply w-5 h-5 -mt-2.5;
        }
    }

    .products-overview > li.category:first-of-type {
        @apply mt-0;
    }

    .products-overview > li.product {
        @apply border shadow-lg grid grid-cols-1 grid-rows-[max-content_1fr_70px] cursor-pointer border-gray-200;

        > img {
            @apply max-w-full shadow-lg;
        }

        @screen md {
            > img {
                width: 355px;
                height: 186px;
            }
        }

        > div {
            @apply p-2 text-sm bg-white;

            > h4 {
                @apply mb-1;

                &.price {
                    @apply inline-block leading-[30px] p-2;
                }
            }

            > p {
                @apply mb-1;
            }

            > a {
                @apply float-right;
            }
        }
    }

    @screen max-md {
        .products-overview > li.product div h4.price span.price_on_request {
            @apply hidden;
        }
    }

    .products-overview > li.empty > div {
        @apply ml-6 text-gray-400;
    }
}