﻿.basket {padding-bottom:5rem}
.basket h1 {font-family:Freeman, Montserrat, sans-serif;font-weight:400;color:#000;font-size:260%;padding:4rem 0 2rem}
.basket .ss_button {background-color:#DB297A;border:0;color:#fff;font-family:Freeman, Montserrat, sans-serif;font-size:140%;display:block;padding:1rem 5rem;box-shadow:4px 4px #000;line-height:90%;cursor:pointer;text-decoration:none}

.basket-item {display:flex;gap:15px;border-bottom:1px solid #ddd;padding:15px 0;align-items:center}
.basket-item:last-child {border-bottom:none}
.basket-img img {width:90px;height:auto;display:block}
.basket-info {flex:1}
.basket-info strong {display:block;font-weight:600;margin-bottom:5px}
.basket-meta {font-size:90%;color:#666;line-height:120%;font-style:italic}
.basket-qty {display:flex;align-items:center;gap:10px}
.basket-qty button {width:28px;height:28px;border:1px solid #ccc;background:#fff;cursor: pointer}
.basket-qty span {min-width:20px;text-align:center}
.basket-price {width:90px;text-align:right;font-weight:bold}
.basket-footer .basket-footer-inner {margin-top:2rem;text-align:right;display:flex;flex-direction:column;align-items:flex-end}
.basket-total {font-size:140%;margin-bottom:2rem;color:#DB297A;display:flex;column-gap:1rem;align-items:center}
.basket-total strong {color:#000;font-weight:800;font-family:Freeman, Montserrat, sans-serif;font-size:150%}
.checkout-btn:disabled {opacity:0.5;cursor:not-allowed}
.empty {padding:40px;text-align:center;color:#666}



/**Mobile**/
@media screen and (max-width: 990px) {
    .ss_page-body-content {margin:0 5% !important}
    .ss_header-content .ss_page-body-content {margin:0 !important}
    .basket h1 {padding:2rem 0}
    .basket-item {display:grid;grid-template-columns:repeat(3, auto);gap:0.5rem}
    .basket-item .basket-img {grid-row: span 2 / span 2;justify-items:center}
    .basket-item .basket-qty {grid-column-start:2;grid-row-start:2}
    .basket-item .basket-price {grid-row: span 2 / span 2;grid-column-start:3;grid-row-start:1}
    .basket-item .basket-img img {width:100px}
    .basket-total {width:100%;border-top:solid 1px #DB297A;justify-content:center;padding-top:1rem}
    button.checkout-btn {width:100%}
}

/**Tablet**/
@media screen and (min-width: 650px) and (max-width: 990px) {
    button.checkout-btn {width:50%;margin:0 auto}
    }