/**
 * Generic webshop styles
 * Prodctlist, Product detail page
 */

.webshop-icon-shopping-cart::before {
    content: '\e812';
}

.add-to-shopping-cart-link::before {
    content: '\57';
}

.webshop-icon-shopping-cart::after {
    display: none !important;
}

.webshop-shopping-cart .form-bc,
.shoppingCart__header .shoppingCart__row,
.shoppingCart:not(.first) .shoppingCart__header,
.shoppingCart__footer .shoppingCart__row.total-price-category {
    display: none;
}

.shoppingCart {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

.shoppingCart__title {
    font-size: var(--txtSize-2);
    font-family: var(--fam-regular);
}

table + .shoppingCart__title {
    display: none;
}

/*
* Header
 */

.shoppingCart__header {
    font-size: .9rem;
    font-weight: bold;
}

/*
* Body
 */

.shoppingCart__column {
    text-align: left;
    background-color: #f2f2f2;
}

.shoppingCart .product-image {
    display: block;
    width: 120px;
}

.shoppingCart__data--title a {
    font-size: var(--txtSize-4);
    text-decoration: none;
    color: inherit;
}

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

.shoppingCart__column--price {
    text-align: right;
}

/*
* Footer
 */

.shoppingCart__row.subtotal-price,
.shoppingCart__row.total-price-shipping-fee,
.shoppingCart__row.total-price-vat {
    font-size: .9rem;
}

.shoppingCart__data--totalTitle {
    font-family: var(--fam-medium);

}

.shoppingCart__data--totalPrice {
    font-size: var(--txtSize-5);
    font-family: var(--fam-medium);
}

.shoppingCart__row.total-price .shoppingCart__data--totalTitle,
.shoppingCart__row.total-price .shoppingCart__data--totalPrice {
    color: var(--clr1-normal);
    font-size: var(--txtSize-2);
}

/*
* Remove product button (delete)
 */

.button-delete,
.button-delete:hover {
    display: block;
    color: inherit;
    text-decoration: none;
    opacity: .6;
    font-size: 1.5rem;
    text-align: center;
}

.button-delete:hover {
    opacity: 1;
}

.button-delete::before {
    font-family: var(--fam-icon);
    content: '\232b';
}

/*
*  Buttons
 */

.clear-shopping-cart,
.webshop-back-to-shop {
    display: none;
}

.clearShoppingCartButton {
    padding: 0;
    color: inherit;
    border: none;
    background-color: transparent;
}

#shopping-cart-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

#shopping-cart-buttons_next {
    margin-right: 0;
    background: var(--clr1-light);
    color: #fff;
}

#shopping-cart-buttons_next::after {
    margin-left: .3em;
    content: '>';
    font-family: var(--fam-icon);
}

/**
 * Login/register section
 */

#cc_login fieldset {
    margin: 0;
}

#cc_login tr {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    border: none;
}

#cc_login input[type='text'],
#cc_login input[type='password'] {
    width: 100%;
}

@media (min-width: 768px) {
    #cc_login tr {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}

/**
 * Product section
 */

#s-page-products legend {
    display: none;
}

/**
 * Payment section
 */

#s-page-payment-methods .proFormRadio {
    margin-right: 1em;
    margin-top: .1em;
}

/**
 * Responsiveness
 */

@media (max-width: 767px) {
    .shoppingCart__body .shoppingCart__row {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin-bottom: 2rem;
        padding-left: 120px;
        border: 1px solid var(--clr-brdr-light);
        border-radius: var(--radius-xl);
    }

    .shoppingCart tbody .shoppingCart__column,
    .shoppingCart tbody .shoppingCart__data {
        padding: .5rem;
    }

    .shoppingCart__data--image  {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 120px;
    }

    .shoppingCart__data--image a {
        display: block;
        height: 100%;
    }

    tbody .shoppingCart__data--title,
    tbody .shoppingCart__data--quantity,
    tbody .shoppingCart__data--totalPrice {
        width: calc(100% - 2rem);
    }

    .shoppingCart__data--title a {
        font-size: var(--txtSize-6);
    }

    .shoppingCart__data--quantity::after {
        margin-top: .5em;
        margin-left: -1em;
        font-size: 11px;
    }

    .shoppingCart__data--delete {
        position: absolute;
        right: 0;
        width: 2rem;
    }

    .shoppingCart__footer .shoppingCart__row {
        display: flex;
        flex-wrap: wrap;
    }

    .shoppingCart__data--totalCoupon {
        flex: 0 100%;
    }

    .shoppingCart__footer .shoppingCart__data--totalTitle {
        flex: 1;
    }

    .shoppingCart__footer .shoppingCart__data--totalPrice {
        flex: 0 4em;
        text-align: right
    }
}

@media (min-width: 768px) {
    .shoppingCart {
        border-collapse: separate;
        border-spacing: 0 20px;
    }

    .shoppingCart__body .shoppingCart__column,
    .shoppingCart__body .shoppingCart__data {
        padding-block: 2rem;
    }

    .shoppingCart__body .shoppingCart__data--image {
        width: 9rem;
        padding-left: 1.5rem;
    }

    .shoppingCart__data--title {
        padding-left: 1.5rem;
        font-size: var(--txtSize-4);
        font-family: var(--fam-medium);
    }

    .shoppingCart__data--quantity {
        width: 9rem;
    }

    .shoppingCart__body .shoppingCart__data--delete {
        position: static;
        width: 5rem;
    }

    .shoppingCart__data--totalPrice {
        width: 10rem;
        text-align: right;
        font-family: var(--fam-medium);
    }

    tbody .shoppingCart__data--totalPrice {
        font-size: var(--txtSize-3);
    }

    .shoppingCart__body .shoppingCart__data,
    .shoppingCart__footer .total-price td {
        border: solid var(--clr-brdr-light);
        border-width: 1px 0 1px;
    }

    .shoppingCart__body .shoppingCart__data:first-child,
    .shoppingCart__footer .total-price td:first-child {
        border-left-width: 1px;
        border-radius: var(--radius-xl) 0 0 var(--radius-xl);
    }

    .shoppingCart__body .shoppingCart__data:last-child,
    .shoppingCart__footer .total-price td:last-child {
        border-right-width: 1px;
        border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
    }

    .shoppingCart__footer .total-price td {
        padding-block: 1rem;
    }
}