.productList {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(125px, 30vw, 220px), 1fr));
    align-items: flex-start;
    grid-gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.productListItem {
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    gap: .8rem;
}

.productListItem:hover {
    opacity: .8;
}

.productListItem__contentWrapper {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    flex: 1 1 75%;
}

.productListItem__imageWrapper {
    flex: 1 1 20%;
}

.productList .product-image {
    display: block;
    width: 100%;
    height: auto;
    box-shadow: 0 0 0 1px #f2f2f2;
}

.productListItem__link,
.productListItem__link:hover {
    color: inherit;
    text-decoration: none;
}

.productListItem__link::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: '';
}

.productListItem__price {
    font-size: 1.2rem;
    font-weight: bold;
}

.productListItem__price .regular {
    font-size: .9rem;
    font-weight: normal;
    text-decoration: line-through;
    opacity: .5;
}

.productListItem__price > .currency-symbol,
.productListItem__price .action .currency-symbol {
    font-size: 1rem;
}

.productListItem__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: bold;
}

.actionList {
    margin: 0;
    padding: 0;
    list-style: none;
}

.actionListItem:not(:first-child) {
    display: none;
}

.productList .show-product-details::after {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    content: '';
}

@media (min-width: 768px) {
    .productList {
        gap: 2rem;
    }

    .actionList {
        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-end;
        align-items: center;
        gap: 1rem;
    }

    .actionList .actionListItem {
        display: inline-block;
    }

    .productList .product-quantity {
        width: 4rem;
        text-align: center;
    }

    .productList .add-to-shopping-cart-link {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0;
        padding: .5rem 1rem;
    }

    .productList .add-to-shopping-cart-link-text {
        position: absolute;
        clip-path: inset(100%);
        clip: rect(1px, 1px, 1px, 1px);
        height: 1px;
        overflow: hidden;
        white-space: nowrap;
        width: 1px;
    }

    .productList .add-to-shopping-cart {
        display: flex;
        gap: 1rem;
    }

    .productList .add-to-shopping-cart,
    .productList .add-to-shopping-cart:hover,
    .productList .product-add-to-favorites,
    .productList .product-add-to-favorites:hover,
    .productList .product-remove-from-favorites,
    .productList .product-remove-from-favorites:hover {
        position: relative;
        z-index: 1;
        text-decoration: none;
    }

    .productList .add-to-shopping-cart-link.webshop-icon-shopping-cart::before,
    .productList .add-to-shopping-cart-link.webshop-icon-shopping-cart::after {
        right: 1.5em;
        margin: 0;
        opacity: 1;
    }

    .productList .add-to-shopping-cart-link.webshop-icon-shopping-cart::before,
    .productList .product-in-shopping-cart .webshop-icon-shopping-cart::before {
        margin-right: .8rem;
        content: '\e835';
    }

    .productList .product-in-shopping-cart .webshop-icon-shopping-cart::before {
        content: '\e828';
    }

    .productList .product-in-shopping-cart .add-to-shopping-cart-link {
        color: inherit;
        background-color: transparent;
    }
}