.block__pop .container {
    display: flex;
    gap: var(--padding-grid);
}

.block__pop h2 {
    margin-bottom: 3rem;
}

.pop__filter {
    width: 25%;
    max-width: 34rem;
    display: flex;
    flex-flow: column;
    gap: var(--padding);
}

    .pop__filter p {
        font-weight: 700;
    }

    .pop__filter .productfilter__active {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        align-items: flex-start;
        justify-content: flex-start;
        margin-bottom: 2rem;
    }

        .pop__filter .productfilter__active p {
            width: 100%;
            margin-bottom: 1rem;
        }

        .pop__filter .productfilter__active button {
            border: none;
            background-color: var(--beige);
            padding: .4rem .8rem .4rem 1rem;
            border-radius: .5rem;
            font-family: var(--fontbody);
            font-size: var(--fontsize-body-ms);
            line-height: var(--lineheight-body);
            color: var(--black);
            display: inline-flex;
            align-items: flex-start;
            gap: 1rem;
            margin-bottom: .5rem;
        }

            .pop__filter .productfilter__active button svg {
                width: 1.6rem;
                height: 1.6rem;
                flex-shrink: 0;
                margin-top: .1rem;
            }

@media(pointer: fine) {
    .pop__filter .productfilter__active button,
    .pop__filter .productfilter__active button svg path {
        transition: var(--transition-default);
        cursor: pointer;
    }

        .pop__filter .productfilter__active button:hover {
            background-color: var(--beige-hover);
        }

            .pop__filter .productfilter__active button:hover svg path {
                fill: var(--orange);
            }
}

.pop__filter details summary {
    position: relative;
    cursor: pointer;
}

    .pop__filter details summary::marker {
        content: none;
    }

    .pop__filter details summary:after {
        content: "";
        width: 2.4rem;
        height: 2.4rem;
        position: absolute;
        top: -.2rem;
        right: -.4rem;
        background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.843 10.211C16.951 10.07 17 9.911 17 9.755C17 9.366 16.694 9 16.251 9H7.75C7.305 9 7 9.367 7 9.755C7 9.912 7.05 10.071 7.159 10.212C8.362 11.766 10.411 14.411 11.417 15.71C11.559 15.894 11.777 16 12.009 16C12.239 16 12.458 15.893 12.6 15.709C13.602 14.41 15.644 11.764 16.843 10.211Z' fill='%233F4443'/%3E%3C/svg%3E%0A");
        transition: var(--transition-default);
    }

.pop__filter details:open summary:after {
    transform: rotate(-180deg);
}

.pop__filter details summary p {
    min-height: 3rem;
    margin-right: 2rem;
}

    .pop__filter details summary p span {
        margin-right: .2rem;
    }

    .pop__filter details summary p button {
        width: 1.5rem;
        height: 1.5rem;
        padding: 0;
        border: none;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        transform: translateY(.2rem);
    }

@media(pointer: fine) {
    .pop__filter details summary p button,
    .pop__filter details summary p button svg path {
        transition: var(--transition-default);
    }

        .pop__filter details summary p button:hover {
            transform: scale(1.2);
        }

            .pop__filter details summary p button:hover svg path {
                fill: var(--orange-hover);
            }
}

.pop__filter .filter__options {
    display: flex;
    flex-flow: column;
    gap: 1rem;
    font-size: var(--fontsize-body-ms);
    padding-top: 1rem;
}

.pop__filter details label {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

    .pop__filter details label span {
        color: var(--grey);
        font-weight: 400;
        font-size: var(--fontsize-body-sm);
    }

.pop__items {
    width: 100%;
    max-width: 100%;
    column-gap: 2rem;
    row-gap: 5rem;
}

.pop__item {
    position: relative;
}

    .pop__item .pop__image {
        background-color: var(--beige);
        aspect-ratio: 1/1;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
    }

        .pop__item .pop__image:after {
            content: "";
            width: 200%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-color: var(--black);
            opacity: .05;
            transform-origin: 50% 50%;
            transform: rotate(-45deg) translate(-15%, 15%);
        }

        .pop__item .pop__image img {
            width: calc(100% - 4rem);
            height: auto;
            aspect-ratio: 1/1;
        }

    .pop__item .pop__label {
        position: absolute;
        top: 1.5rem;
        left: 1.5rem;
    }

    .pop__item .pop__text {
        padding: 1rem 0 0;
        display: flex;
        flex-flow: column;
        gap: .75rem;
        position: relative;
    }

        .pop__item .pop__text h3 {
            font-size: var(--fontsize-header-xs);
        }

        .pop__item .pop__text .pop__sub {
            font-size: var(--fontsize-body-sm);
            color: var(--grey);
        }

        .pop__item .pop__text .pop__price {
            font-size: var(--fontsize-body-md);
            font-weight: 600;
        }

    .pop__item .button--cart {
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: 2;
    }

    .pop__item > a {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

@media(pointer: fine) {
    .pop__item .pop__image:after {
        transition: var(--transition-default);
    }

    .pop__item:has(>a:hover) .pop__image:after {
        opacity: .1;
        transform: rotate(-45deg) translate(-15%, 0%);
    }
}