/* ===================================
   LAYOUT
=================================== */

/* Header */

#header{

position:sticky;
top:0;
left:0;
right:0;

z-index:1000;

height:72px;

display:flex;
align-items:center;
justify-content:space-between;

padding:0 18px;

background:#f7f7f9;

border-bottom:3px solid #111;

}

#logo{

    display:flex;
    align-items:center;
    justify-content:center;

}

#logo img{

    height:34px;
    display:block;

}

/* Header Buttons */

#menu-btn,
#cart-btn{

    width:46px;
    height:46px;

    display:flex;
    align-items:center;
    justify-content:center;

    position:relative;

    background:var(--white);

    border:3px solid var(--text);

    box-shadow:4px 4px 0 var(--text);

    transition:.15s;

}

#menu-btn:active,
#cart-btn:active{

    transform:translate(3px,3px);

    box-shadow:none;

}

#menu-btn img,
#cart-btn img{

    width:22px;
    height:22px;

}

#cart-count{

    position:absolute;

    top:-8px;
    right:-8px;

    width:22px;
    height:22px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:var(--primary);

    color:var(--white);

    font-size:11px;

}

#cart-count:empty{

    display:none;

}

/* Drawer */

#cart-drawer{

    position:fixed;
    top:0;
    right:0;

    width:min(420px,100%);
    height:100vh;

    display:flex;
    flex-direction:column;

    background:var(--surface);

    transform:translateX(100%);
    transition:.3s;

    z-index:2000;

    box-shadow:-10px 0 40px rgba(0,0,0,.35);

}

#cart-drawer.open{

    transform:translateX(0);

}

#overlay{

    position:fixed;
    inset:0;

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

    opacity:0;
    visibility:hidden;

    transition:.3s;

    z-index:1900;

}

#overlay.show{

    opacity:1;

    visibility:visible;

}

/* Drawer Header */

.drawer-header{

    height:74px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:20px;

    border-bottom:3px solid var(--text);

}

.drawer-header h2{

    font-family:"Space Grotesk",sans-serif;

    font-weight:700;

    color:var(--text);

    font-size:22px;

}

#close-cart{

    width:42px;
    height:42px;

    background:var(--white);

    border:3px solid var(--text);

    box-shadow:4px 4px 0 var(--text);

}

/* Drawer Body */

#cart-items{

    flex:1;

    overflow:auto;

    padding:20px;

    display:flex;
    flex-direction:column;

    gap:16px;

}

/* Drawer Footer */

.drawer-footer{

    padding:20px;

    border-top:3px solid var(--text);

}

.total-row{

    display:flex;
    justify-content:space-between;

    margin-bottom:20px;

    color:var(--text);

    font-weight:bold;

}

.drawer-footer{

    position:sticky;
    bottom:0;

    background:var(--surface);

    z-index:5;

}