.product-section {
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    padding: var(--3xl);

    .heading-wrapper {
        display: flex;
        justify-content: center;
        flex-direction: row;
        padding-bottom: var(--3xl);
        font-size: var(--l);

        .filter-mobile {
            display: none;
        }
    }

    .product-wrapper {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        gap: var(--3xl);
        width: 80vw;

        .filter {
            position: sticky;
            left: 0;
            top: 0;
            width: 15vw;
            min-width: 200px;

            h3 {
                font-size: var(--xl);
            }

            .filters {
                list-style-type: none;
                padding: var(--s);
                padding-left: 0;

                .filter-object-wrapper {
                    margin-bottom: var(--xs);
                    .filter-object {
                        display: flex;
                        flex-direction: row;
                        justify-content: space-between;

                        p {
                            font-size: var(--l);
                        }

                        input[type="checkbox"] {
                            appearance: none;
                            -webkit-appearance: none;
                            width: 18px;
                            height: 18px;
                            border: 1px solid #000000;
                            border-radius: 4px;
                            background-color: white;
                            cursor: pointer;
                        }

                        input[type="checkbox"]:checked {
                            background-color: black;
                        }
                    }
                }
            }
        }

        .products-container {
            display: flex;
            flex-wrap: wrap;
            gap: var(--3xl);
            justify-content: center;
            flex: 1;
            min-height: 40vh;

            .product {
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-bottom: var(--3xl);
                cursor: pointer;
                background-color: white;
                color: black;

                .product-img-container {
                    position: relative;
                    width: 300px;
                    height: 300px;
                    margin-bottom: var(--s);
                    overflow: hidden;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        transition: transform 0.3s ease;
                    }

                    .product-nr {
                        position: absolute;
                        bottom: 10px;
                        left: 10px;
                        color: rgba(0, 0, 0, 0.5);
                    }
                }

                .product-info {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: var(--s);

                    .product-name {
                        font-size: var(--l);
                    }

                    .product-price {
                        font-size: var(--xl);
                        font-weight: 400;
                        color: var(--primary-color);
                    }
                }
            }

            .product:hover {
                .product-img-container img {
                    transform: scale(1.1);
                }
                .product-info {
                    .product-name {
                        text-decoration: underline;
                    }
                }
            }
        }
    }
}

@media (max-width: 768px) {
    .heading-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: var(--s);

        .filter-mobile {
            display: flex !important;
            font-size: var(--xl);
            border: none;
            background-color: transparent;
        }

        #filter-mobile-popup {
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border: 1px solid black;
            padding: var(--s);
            width: 70%;

            &::backdrop {
                background-color: rgba(255, 255, 255, 0.299);
            }

            .filters {
                padding-top: var(--s);
                display: flex;
                flex-direction: column;
                gap: var(--xs);
                
                .filter-object-wrapper {

                    .filter-object {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                    }
                }

            }

            .accept-changes {
                margin-top: var(--m);
                width: 100%;
                height: var(--xxl);
                color: black;
                background-color: white;
                border: 1px solid black;

                &:hover {
                    background-color: black;
                    color: white;
                }
            }
        }
    }

    .product-section {
        .product-wrapper {
            margin: 0 auto;

            .filter {
                display: none;
            }
        }

        .products-container {
            .product {
                margin-bottom: 0 !important;
            }
        }
    }
}