﻿.cartWrapper {display:flex; justify-content:space-between; margin: 0 0 180px 0; }
.leftColumn {width:800px;}
.rightColumn {width:411px;}

.cart {}
    .cart .cartRow { display: flex; justify-content: flex-start; align-items: center; font-size: 16px; border-bottom: 1px solid #ddd; padding: 20px 0; }
        .cart .cartRow:first-child { border-top: 1px solid #ddd; }
    .cart .cartRow .image {width:108px; height:108px; background:#fff; border-radius:20px; display:flex; justify-content:center; align-items:center;}
    .cart .cartRow .image img {display:block; max-width:90%; max-height:90%; object-fit:contain;}
    .cart .cartRow .name {width:210px; margin: 0 0 0 40px;}
        .cart .cartRow .name a { color: #4a1b18; font-weight: bold; display:block; text-decoration:none; margin: 0 0 15px 0;}
        .cart .cartRow .name .category { color: #717171; font-size:16px; }
        .cart .cartRow .amount { width: 120px; height:44px; display:flex; justify-content:space-between; align-items:center; color: #4a1b18; border: 1px solid #f3ded9; border-radius: 20px; box-sizing:border-box; margin: 0 0 0 40px; }
            .cart .cartRow .amount a.left,
            .cart .cartRow .amount span { height: 100%; text-decoration: none; width: 32px; text-align: center; border-right: 1px solid #f3ded9; display: flex; justify-content:center; align-items:center; border-top-left-radius:20px; border-bottom-left-radius: 20px; }
            .cart .cartRow .amount div.middle { height: 100%; width: 47px; text-align: center; display: flex; justify-content: center; align-items: center; }
            .cart .cartRow .amount a.right { height: 100%; text-decoration: none; width: 32px; text-align: center; border-left: 1px solid #f3ded9; display: flex; justify-content: center; align-items: center; border-top-right-radius: 20px; border-bottom-right-radius: 20px; }
                .cart .cartRow .amount a.left:hover,
                .cart .cartRow .amount a.right:hover,
                .cart .cartRow .amount a.delete:hover { background-color: #f3ded9; }
        .cart .cartRow .price {width:182px; color:#4a1b18; font-weight:bold; margin: 0 0 0 40px;}
        .cart .cartRow .remove {width:20px; margin: 0 0 0 45px;}

.orderSummary {background:#fff; border-radius:20px; padding:35px; width:100%; box-sizing:border-box; overflow:hidden;}
.orderSummary h3 {margin: 10px 0 30px 0; border-bottom:1px solid #ddd; padding: 0 0 25px 0;}
    .orderSummary .orderSummaryRow { display: flex; justify-content: space-between; }
    .orderSummary .orderSummaryRow p { color: #4a1b18; font-size: 16px; font-weight: bold;  }
    .orderSummary .orderSummaryRow p .small {font-size:14px; font-weight:normal; font-style:italic;}
    .orderSummary .orderSummaryRow.orderSummaryTotalRow {border-top: 1px solid #ddd; padding: 30px 0 0 0; margin: 20px 0 0 0;}
        .orderSummary .orderSummaryRow.orderSummaryTotalRow p {font-size:18px; margin:0;}
        .orderSummary .orderSummaryRow.orderSummaryTotalRow p:first-child { font-weight: normal; }
.goToCheckout { background: #f3ddd8; color: #502220; font-size:16px; padding: 25px 65px; border-radius: 100px; margin: 55px 0 0 0; display:inline-block; float:right; font-weight:600; text-decoration:none; }
    .goToCheckout:hover { background: #F4C7BE; }


@media only screen and (max-width: 1400px) {
    .leftColumn { width: 66%; }
    .rightColumn { width: 30%; }
}

@media only screen and (max-width: 1000px) {
    .cartWrapper { flex-direction:column; margin: 0; gap: 40px;}

    .leftColumn { width: 100%; }
    .rightColumn { width: 100%; }

    .cart { overflow: auto; box-shadow: inset -10px 0 10px -8px rgba(0, 0, 0, 0.4); }
        .cart.scrolling-right { box-shadow: inset -10px 0 10px -10px rgba(0, 0, 0, 0.3), inset 10px 0 10px -10px rgba(0, 0, 0, 0.3); /* Skugga i båda kanter */ }

        .cart.no-scroll { box-shadow: none; }
    .cart .cartRow{width:800px;}
    .cart .cartRow .name a { font-size:14px;}
    .cart .cartRow .name .category {font-size:14px;}

    .orderSummary {padding: 25px;}
        .orderSummary .orderSummaryRow p {font-size:14px;}
        .orderSummary .orderSummaryRow.orderSummaryTotalRow p {font-size:16px;}
}