.product_list-layout {
    --inactive-bg: var(--noix-almond);
    --active-bg: var(--noix-off-almond);
    --icon-inactive: color-mix(in srgb, var(--noix-blue) 30%, transparent);
    --icon-active: var(--noix-chestnut);
    --foldout-duration: 300ms;
    --layout-spacing: var(--pk-row-spacing);
    padding-block: var(--layout-spacing);
}

.product_list-layout .item-container {
    gap: 1rem;
}

.product_list-layout .content-col {
    display: flex;
    flex-direction: column;
    gap: max(1.5rem, calc(2 * var(--su)));
    padding-right: max(2rem, calc(2.5 * var(--su)));
}

.product_list-layout .content-col > .content {
    display: flex;
    flex-direction: column;
    gap: max(1rem, calc(1 * var(--su)));
}

.product_list-layout .items {
    display: flex;
    flex-direction: column;
    gap: max(1rem, calc(1 * var(--su)));
}

.product_list-layout .items .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: max(1rem, calc(1 * var(--su)));
    border-radius: 1rem;
    padding: max(1rem, calc(1.5 * var(--su))) max(2rem, calc(2 * var(--su)));
    background-color: var(--inactive-bg);
    cursor: pointer;
    transition: background-color var(--foldout-duration) ease-in-out;
}

.product_list-layout .item.active {
    background-color: var(--active-bg);
}

.product_list-layout .item h3 {
    margin-block: 0;
}

.product_list-layout .item .arrow {
    --arrow-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
    position: relative;
    flex-shrink: 0;
    width: max(2rem, calc(2 * var(--su)));
    height: max(2rem, calc(2 * var(--su)));
    border-radius: 50%;
    border: 1px solid var(--icon-inactive);
    transition: background-color var(--foldout-duration) ease-in-out, border-color var(--foldout-duration) ease-in-out;
}

.product_list-layout .item .arrow::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 45%;
    height: 45%;
    background-color: var(--icon-inactive);
    mask: var(--arrow-mask) no-repeat center / contain;
    -webkit-mask: var(--arrow-mask) no-repeat center / contain;
    transition: background-color var(--foldout-duration) ease-in-out;
}

.product_list-layout .item.active .arrow {
    background-color: var(--icon-active);
    border-color: var(--icon-active);
}

.product_list-layout .item.active .arrow::after {
    background-color: var(--noix-almond);
}

.product_list-layout .products {
    display: grid;
    grid-template-areas: "stack";
    border-radius: max(1.5rem, calc(1.5 * var(--su)));
    overflow: clip;
}

.product_list-layout .products .product {
    grid-area: stack;
    display: flex;
    flex-direction: column;
    gap: max(1rem, calc(1 * var(--su)));
    padding: max(1.5rem, calc(1.5 * var(--su)));
    background-color: var(--active-bg);
}

.product_list-layout .products .product .image {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: max(1rem, calc(1 * var(--su)));
}

.product_list-layout .products .product-content {
    display: flex;
    flex-direction: column;
    gap: max(.5rem, calc(.5 * var(--su)));
}

@media screen and (max-width: 992px) {

    .product_list-layout .content-col {
        padding-right: 0;
    }

}