.cart-container {
    display: flex;
    flex-direction: column;
    gap: var(--tablet-gap);
    margin: var(--desktop-gap) auto;
    padding: 0 var(--default-content-padding);
    width: var(--desktop-shop-content);
}
.cart-container .cart-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 2rem;
    align-items: start;
}
.cart-container .cart-left, 
.cart-container .cart-right {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.cart-container .products-section {
    display: flex;
    flex-direction: column;
    /* gap: 2rem; */
}
.cart-container h2 {
    margin-bottom: 1rem;
    font-size: 1.65rem;
}
.cart-container {
    display: flex;
    flex-direction: column;
    gap: var(--tablet-gap);
    margin: var(--desktop-gap) auto;
    padding: 0 var(--default-content-padding);
    width: var(--desktop-shop-content);
}

.cart-container .cart-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--desktop-gap);
    align-items: stretch;
    position: relative;
}

.cart-container .cart-left, 
.cart-container .cart-right {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.products-section {
    display: flex;
    flex-direction: column;
}
.cart-container h2 {
    margin-bottom: 1rem;
    font-size: 1.65rem;
}
.cart-container .cart-items-header {
    border: 1px solid #ccc;
    display: flex;
    color: var(--main-accent);
    padding: 0.5rem 1rem;
    font-weight: var(--font-secondary-bold-weight);
    gap: 0.5rem;
}
.cart-container  .cart-items {
    border: 1px solid #e6e6e6;
    border-top: 0;
    border-bottom: 0;
}
.cart-container .cart-item {
    display: flex;
    border-bottom: 1px solid #e6e6e6;
    padding: 8px 1rem;
    align-items: center;
    gap: 8px;
}
.cart-container .header-product,
.cart-container .cart-item .item-info {
    flex: 3;
}
.cart-container .header-quantity,
.cart-container .header-price,
.cart-container .header-total,
.cart-container .item-quantity,
.cart-container .item-price,
.cart-container .item-total {
    flex: 1;
    display: flex;
    align-items: center;
}
.item-info {
    display: flex;
    gap: 8px;
    align-items: center;
    transition: .4s;
}
.item-info:hover {
    color: var(--main-accent);
}
.item-image {
    max-width: 76px;
}

.input-number-wrapper {
    display: flex;

    & > .input-number-btn {
        color: #666;
        font-size: 1.25em;
        padding-inline: 0.5em;

        &:hover {
            background-color: #eee;
        }
    }

    & > .input-number {
        -moz-appearance: textfield;
        inline-size: 3em;
        text-align: center;

        &::-webkit-inner-spin-button,
        &::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
    }
}

input.quantity-input {
    border: 1px solid #ccc;
    padding: 0.5em;
    width: 4rem;
    font-size: 0.85rem;
}

span.amount, span.amount span {
    font-weight: var(--font-secondary-bold-weight);
}

.cart-container .main-btn {
    font-size: 1rem;
    padding: 8px 1rem;
    min-width: unset;
}

.cart-right .cart-col-wrapper {
    padding: 2rem;
    box-shadow: var(--default-shadow);
    position: sticky;
    top: 3rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.cart-right {
    position: relative;
}

.order-summary {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.shipping-banner {
    border: 1px solid;
    background: var(--tlo-background);
    padding: 1rem;
    text-align: center;
}


.shipping-banner a {
    color: var(--main-accent);
}
.cart-right {
    position: relative;
}

.order-summary {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.shipping-banner {
    border: 1px solid;
    background: var(--tlo-background);
    padding: 2rem;
    text-align: center;
    margin: 2rem auto;
}

.shipping-banner .amount bdi, .shipping-banner .amount span {
    /* font-size: 1.15rem; */
    font-weight: var(--font-secondary-bold-weight);
}

.shipping-banner a {
    color: var(--main-accent);
}

.shipping-methods-box {
    margin: 1rem 0;
}

.shipping-option {
    padding: 8px 0;
    border-bottom: 1px solid var(--accent-gray)=+7;
}

.cart-actions {
    display: flex;
    justify-content: flex-end;
    gap: 2rem;
    align-items: center;
}
.cart-container .item-total span.price-value {
    font-weight: var(--font-secondary-bold-weight);
}
.cart-container .cart-actions .main-btn {
    margin: unset;
    background: none;
    border: 1px solid var(--main-accent);
    color: var(--main-accent);
}
.checkout-btn .main-btn {
    padding: 1rem 2rem;
    width: 100%;
    display: block;
    margin-top: 1rem;
}
form.coupon-section input[type="text"] {
    border: 1px solid var(--main-accent);
    border-right: 0;
    padding: 8px 12px;
    font-size: 0.85rem;
    border-radius: 35px 0 0 35px;
    flex: .5;
}

form.coupon-section {
    display: flex;
    justify-content: center;
    align-items: stretch;
}

form.coupon-section .main-btn {
    padding: 12px 2rem;
    margin: 0 0 0 -21px;
}
.order-summary-total p, 
.order-summary-total p span, 
.order-summary-total p bdi {
    font-size: 1.45rem;
    font-weight: var(--font-secondary-bold-weight);
}

.order-summary-total {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    font-weight: var(--font-secondary-bold-weight);
    gap: 8px;
}
.order-summary-total  p.vat-info,
.order-summary-total  p.vat-info span,
.order-summary-total  p.vat-info bdi {
    font-size: 1rem;
}



/* empty cart */
.cart-container .empty-cart {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    text-align: center;
}
/* empty cart */

div#shared-cart-box {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    display: flex;
    width: 50%;
    height: fit-content;
    top: 0;
    bottom: 0;
    /* border: 1px solid var(--text); */
    padding: 2rem;
    background: var(--tlo-background);
    z-index: 1000;
    flex-direction: column;
    text-align: center;
    gap: 1rem;
}
.shared-box-wrapper::after {
    content: '';
    position: absolute;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,.35);
    top: 0;
    z-index: 999;
}
.shared-box-wrapper {
    display: none;
}

div#ajax-spinner {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.35);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 998;
}
#ajax-spinner span.spinner {
    width: 3rem;
    height: 3rem;
}
#ajax-spinner svg#loader {
    width: 100%;
    height: 100%;
    display: block!important;
    z-index: 998;
}
#shared-cart-box input#shared-cart-url {
    font-weight: var(--font-secondary-bold-weight);
    text-align: center;
}
#shared-cart-box h3 {
    font-size: 2rem;
}
#shared-cart-box .actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}
#shared-cart-box .actions .main-btn {
    width: fit-content;
    margin: unset;
    padding: 8px 1rem;
}
#shared-cart-box .actions #copy-cart-url {
    background: var(--accent-green);
}
.cart-actions>.button {
    margin: unset;
    background: #f7f7f7;
    border: 1px solid #f7f7f7;
    color: #333;
    font-size: 1rem;
    min-width: unset;
    border-radius: var(--default-radius);
    text-transform: uppercase;
    padding: 8px 1rem;
    width: fit-content;
    transition: transform 0.4s ease-in-out;
    will-change: transform;
}

.cart-actions>.button:hover {
    transform: scale(1.1);
}
#wpcss_copy_url {
    padding: 0 15px;
    max-width: 100%;
    width: 100%;
    height: 42px;
    border: 2px solid rgba(0,0,0,.1);
    border-radius: 5px;
    background-color: transparent;
    box-shadow: none;
    color: inherit;
    vertical-align: middle;
    font-size: 14px;
    transition: border-color .5s ease;
}

.related-products-wrapper .products .products{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 20px;
    align-items: flex-start;
    margin-bottom: 20px;
}

.related-products-wrapper .products .product-box{
    width: 100%;
}

@media all and (max-width: 1366px) {
    .cart-container .cart-row {
        grid-template-columns: 1fr;
        gap: var(--tablet-gap);
    }

    .related-products-wrapper .products .product-box{
        width: 100%;
    }
}
@media all and (max-width: 1024px) {
    div#shared-cart-box {
        width: 72%;
    }

    .related-products-wrapper .products .product-box{
        width:100%;
    }
}

@media (max-width: 991px) {
    .related-products-wrapper .products .products{
        grid-template-columns: repeat(2, 1fr);
    }
}