@charset "UTF-8";

/* ========================================
   Cart / Checkout
======================================== */

.cart-section{

    padding:7rem 0 6rem;

}

.cart-layout{

    display:grid;

    grid-template-columns:1fr;

    gap:2rem;

}

@media(min-width:900px){

    .cart-layout{

        grid-template-columns:2fr 1fr;

        align-items:start;

    }

}

/* ---- Empty state ---- */

.cart-empty{

    text-align:center;

    padding:4rem 1rem;

    background:var(--color-white);

    border-radius:var(--radius-medium);

    box-shadow:var(--shadow-small);

}

.cart-empty p{

    color:var(--color-sub);

    margin-bottom:1.5rem;

}

/* ---- Cart items ---- */

.cart-items{

    display:flex;
    flex-direction:column;

    gap:1rem;

}

.cart-item{

    display:grid;

    grid-template-columns:80px 1fr auto;

    gap:1rem;

    align-items:center;

    background:var(--color-white);

    border-radius:var(--radius-medium);

    padding:1rem;

    box-shadow:var(--shadow-small);

}

.cart-item-image{

    width:80px;
    height:80px;

    border-radius:var(--radius-small);

    overflow:hidden;

    background:var(--color-primary-pale);

}

.cart-item-image img{

    width:100%;
    height:100%;

    object-fit:cover;

}

.cart-item-name{

    font-weight:700;

    margin-bottom:.3rem;

}

.cart-item-unit{

    font-size:.8rem;

    color:var(--color-sub);

    margin-bottom:.6rem;

}

.cart-item-qty{

    display:inline-flex;

    align-items:center;

    border:1px solid var(--color-accent);

    border-radius:999px;

    overflow:hidden;

}

.cart-item-qty button{

    width:1.9rem;
    height:1.9rem;

    background:none;
    border:none;

    font-size:1rem;

    color:var(--color-primary);

}

.cart-item-qty input{

    width:2.4rem;

    border:none;

    text-align:center;

    font-size:.9rem;

    font-family:inherit;

}

.cart-item-right{

    display:flex;
    flex-direction:column;

    align-items:flex-end;

    gap:.7rem;

    text-align:right;

}

.cart-item-price{

    font-weight:700;

}

.cart-item-remove{

    background:none;
    border:none;

    font-size:.78rem;

    color:var(--color-sub);

    text-decoration:underline;

}

.cart-item-remove:hover{

    color:var(--color-primary);

}

/* ---- Summary ---- */

.cart-summary{

    background:var(--color-white);

    border-radius:var(--radius-medium);

    padding:1.6rem;

    box-shadow:var(--shadow-small);

    position:sticky;

    top:6.5rem;

}

.cart-summary h2{

    font-size:1.05rem;

    margin-bottom:1.1rem;

}

.cart-summary-row{

    display:flex;

    justify-content:space-between;

    font-size:.9rem;

    color:var(--color-sub);

    margin-bottom:.7rem;

}

.cart-summary-row.total{

    font-size:1.1rem;

    font-weight:700;

    color:var(--color-text);

    border-top:1px solid var(--color-accent);

    padding-top:.8rem;

    margin-top:.4rem;

}

.cart-summary-note{

    font-size:.75rem;

    color:var(--color-sub);

    margin:.8rem 0 1.3rem;

}

.cart-summary .btn-purchase{

    width:100%;

    text-align:center;

    border:none;

}

/* ========================================
   Checkout form
======================================== */

.checkout-form{

    display:flex;
    flex-direction:column;

    gap:1.1rem;

    background:var(--color-white);

    border-radius:var(--radius-medium);

    padding:1.6rem clamp(1rem,4vw,2rem);

    box-shadow:var(--shadow-small);

}

.checkout-form .form-row{

    display:grid;

    grid-template-columns:1fr;

    gap:1.1rem;

}

@media(min-width:600px){

    .checkout-form .form-row.two{

        grid-template-columns:1fr 1fr;

    }

}

.checkout-form label{

    display:block;

    font-size:.85rem;

    font-weight:700;

    margin-bottom:.4rem;

}

.checkout-form input[type="text"],
.checkout-form input[type="email"],
.checkout-form input[type="tel"],
.checkout-form select{

    width:100%;

    padding:.8rem 1rem;

    border:1px solid var(--color-accent);

    border-radius:var(--radius-small);

    font-family:inherit;

    font-size:.9rem;

}

.payment-options{

    display:flex;
    flex-direction:column;

    gap:.6rem;

}

.payment-option{

    display:flex;

    align-items:center;

    gap:.6rem;

    padding:.8rem 1rem;

    border:1px solid var(--color-accent);

    border-radius:var(--radius-small);

    font-size:.9rem;

    cursor:pointer;

}

.payment-option input{

    accent-color:var(--color-primary);

}

.checkout-form .btn-purchase{

    border:none;

    width:100%;

}

.form-error{

    color:#d1435b;

    font-size:.78rem;

    display:none;

}

.form-error.show{

    display:block;

}

/* ---- Order confirmation ---- */

.order-confirm{

    text-align:center;

    padding:5rem 1rem 6rem;

}

.order-confirm .icon{

    font-size:3rem;

    margin-bottom:1rem;

}

.order-confirm h1{

    font-size:1.7rem;

    margin-bottom:.8rem;

}

.order-confirm p{

    color:var(--color-sub);

    margin-bottom:.4rem;

}

.order-number{

    display:inline-block;

    margin:1.2rem 0 2rem;

    padding:.6rem 1.4rem;

    background:var(--color-primary-pale);

    border-radius:999px;

    font-weight:700;

    letter-spacing:.05em;

}