/*
|--------------------------------------------------------------------------
| OVERLAY
|--------------------------------------------------------------------------
*/

#mmc-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:99998;

}

#mmc-overlay.active{

    opacity:1;

    visibility:visible;

}

/*
|--------------------------------------------------------------------------
| SIDEBAR
|--------------------------------------------------------------------------
*/

#mmc-sidebar{

    position:fixed;

    top:0;

    right:0;

    width:430px;

    max-width:100%;

    height:100vh;

    background:#fff;

    z-index:99999;

    transform:translateX(100%);

    transition:.35s cubic-bezier(.22,.61,.36,1);

    display:flex;

    flex-direction:column;

    box-shadow:-10px 0 30px rgba(0,0,0,.12);

}

#mmc-sidebar.active{

    transform:translateX(0);

}

/*
|--------------------------------------------------------------------------
| HEADER
|--------------------------------------------------------------------------
*/

.mmc-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:24px;

    border-bottom:1px solid #ececec;

}

.mmc-title{

    font-size:22px;

    font-weight:700;

}

.mmc-count{

    margin-top:6px;

    color:#888;

    font-size:13px;

}

.mmc-close{

    border:0;

    background:none;

    font-size:26px;

    cursor:pointer;

    transition:.2s;

}

.mmc-close:hover{

    transform:rotate(90deg);

}

/*
|--------------------------------------------------------------------------
| BODY
|--------------------------------------------------------------------------
*/

.mmc-body{

    flex:1;

    overflow:auto;

    padding:20px;

}

.mmc-body::-webkit-scrollbar{

    width:5px;

}

.mmc-body::-webkit-scrollbar-thumb{

    background:#ddd;

    border-radius:50px;

}

/*
|--------------------------------------------------------------------------
| ITEM
|--------------------------------------------------------------------------
*/

.mmc-item{
    display:flex;
    gap:12px;
    padding:16px 0;
    border-bottom:1px solid #f2f2f2;
    align-items:flex-start;
}

.mmc-image{

    width:72px;

    flex-shrink:0;

}

.mmc-image img{

    width:100%;

    display:block;

    border-radius:8px;

}

.mmc-content{

    flex:1;

    display:flex;

    flex-direction:column;

}

.mmc-name{
    font-size:14px;
    font-weight:700;
    line-height:1.35;
    margin-bottom:2px;
}

.mmc-name:hover{

    color:#0B2C48;

}

.mmc-variation{
    font-size:11px;
    margin-bottom:4px;
}

.mmc-price{
    font-size:14px;
    font-weight:700;
    margin-bottom:8px;
}

/*
|--------------------------------------------------------------------------
| QTY
|--------------------------------------------------------------------------
*/

.mmc-qty{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:82px;
    height:24px;
    border:1px solid #ddd;
    border-radius:0;
    overflow:hidden;
}

.mmc-minus,
.mmc-plus{
    width:24px;
    height:24px;
    padding:0;
    margin:0;
    border:0;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:1;
    flex:0 0 24px;
}

.mmc-minus:hover,

.mmc-plus:hover{

    background:#f5f5f5;

}

.mmc-input{
    width:34px;
    height:24px;
    padding:0;
    margin:0;
    border-left:1px solid #ddd;
    border-right:1px solid #ddd;
    border-top:0;
    border-bottom:0;
    text-align:center;
    font-size:12px;
    line-height:24px;
    box-sizing:border-box;
    flex:0 0 34px;
}

.mmc-input::-webkit-outer-spin-button,

.mmc-input::-webkit-inner-spin-button{

    appearance:none;

    margin:0;

}

/*
|--------------------------------------------------------------------------
| REMOVE
|--------------------------------------------------------------------------
*/

.mmc-right{

    display:flex;

    align-items:flex-start;

}

.mmc-remove{

    width:24px;

    height:24px;

    border:0;

    background:transparent;

    border-radius:50%;

    cursor:pointer;

    transition:.2s;

    font-size:14px;

}

.mmc-remove:hover{

    background:#111;

    color:#fff;

}

/*
|--------------------------------------------------------------------------
| FOOTER
|--------------------------------------------------------------------------
*/

.mmc-footer{

    border-top:1px solid #ececec;

    padding:18px 20px;

    background:#fff;

}

.mmc-summary-row{

    font-size:18px;

    color:#0F3556;

    font-weight:500;
    margin-bottom: 20px;

}

.mmc-summary-row strong{

    font-size:14px;

    color:#0F3556;

    font-weight:700;

}

.mmc-shipping{

    color:#8C8C8C;

    font-size:13px;

    line-height:1.6;

}

/*
|--------------------------------------------------------------------------
| BUTTONS
|--------------------------------------------------------------------------
*/

.mmc-actions{

    display:flex;

    gap:12px;

}

.mmc-btn{

    flex:1;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    font-size:12px;

    font-weight:700;

    border-radius:0;

    transition:.25s;

}

.mmc-cart{

    background:#fff;

    color:#111;

    border:1px solid #0F3556;

}

.mmc-cart:hover{

    background:#0F3556;

    color:#fff;

}

.mmc-checkout{

    background:#fff;

    color:#111;

    border:1px solid #0F3556;

}

.mmc-checkout:hover{

    background:#0F3556;

    color:#fff;

}

.mmc-shop{

    width:100%;

    background:#111;

    color:#fff;

}

/*
|--------------------------------------------------------------------------
| EMPTY
|--------------------------------------------------------------------------
*/

.mmc-empty{

    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:40px;

}

.mmc-empty-icon{

    font-size:64px;

    margin-bottom:20px;

}

.mmc-empty h3{

    font-size:22px;

    margin-bottom:10px;

}

.mmc-empty p{

    color:#888;

    line-height:1.6;

}

/*
|--------------------------------------------------------------------------
| BADGE
|--------------------------------------------------------------------------
*/

.mmc-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:18px;

    height:18px;

    padding:0 5px;

    border-radius:50px;

    background:#111;

    color:#fff;

    font-size:11px;

    font-weight:700;

}

/*
|--------------------------------------------------------------------------
| RESPONSIVE
|--------------------------------------------------------------------------
*/

@media(max-width:768px){

    #mmc-sidebar{

        width:100%;

    }

    .mmc-header{

        padding:18px;

    }

    .mmc-body{

        padding:16px;

    }

    .mmc-footer{

        padding:18px;

    }

    .mmc-image{

        width:78px;

    }

}

/*
|--------------------------------------------------------------------------
| FREE SHIPPING
|--------------------------------------------------------------------------
*/

.mmc-free{

    margin-bottom:20px;

}

.mmc-free-text{

    font-size:15px;

    color:#0F3556;

    font-weight:500;

}

.mmc-progress{

    height:4px;

    background:#E9E9E9;

}

.mmc-progress-fill{

    background:#0F3556;

}

#mmc-sidebar{
    position: fixed;
}

#mmc-sidebar.loading .mmc-body{
    pointer-events:none;
}

#mmc-sidebar.loading .mmc-body::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(255,255,255,.65);
    backdrop-filter:blur(2px);
    z-index:20;
}

#mmc-sidebar.loading .mmc-body::after{
    content:"";
    position:absolute;
    width:34px;
    height:34px;
    border:3px solid #ddd;
    border-top-color:#0F3556;
    border-radius:50%;
    top:50%;
    left:50%;
    margin-left:-17px;
    margin-top:-17px;
    animation:mmc-spin .8s linear infinite;
    z-index:21;
}

@keyframes mmc-spin{
    to{
        transform:rotate(360deg);
    }
}

/*
|--------------------------------------------------------------------------
| BODY
|--------------------------------------------------------------------------
*/

body.mmc-open{

    overflow:hidden;

}

/*
|--------------------------------------------------------------------------
| OPEN ANIMATION
|--------------------------------------------------------------------------
*/

#mmc-sidebar{

    will-change:transform;

}

#mmc-overlay{

    will-change:opacity;

}