#title-bar {
    height: var(--title-bar-height);
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    text-align: center;
    border-bottom: 1px solid var(--theme-gray-2);
    position:relative;

    position: absolute;
    z-index: 100;
    background: var(--theme-light);

    & h1 {
        font-family: "Mordova";
        font-size: 34px;
        margin-top: 6px;
        text-transform:none;
    }
    & .open-menu {
        position:absolute;
        left:0;
        top:0;
        height:100%;
        padding-left:16px;
        padding-right:16px;
        display:flex;
        align-items: center;
        justify-content: center;
        flex-direction:column;
    }
    & .open-menu div {
        width:32px;
        background:var(--theme-gray-1);
        height:1px;
        
    }
    & .open-menu div:nth-child(2){
        margin:8px 0;
    }
}

#nav {
    position:fixed;
    z-index:1000000;
    width:100%;
    height:100dvh;
    top:0;
    left:0;
    opacity:0;
    pointer-events:none;
    background:var(--theme-light);
    transition: opacity 0.4s ease;
    color:var(--theme-dark);

    & .close-menu {
        text-align:right;
        padding:16px;
        font-size:16px;
        line-height:32px;
        margin-bottom:16px;
    }
    & .top-img {
        padding:16px;
        width:100%;
    }

    & .link-list {
        display: flex;
        flex-direction: column;
    }
    & .link-list a {
        padding: 8px;
        border-bottom: 1px solid var(--theme-gray-2);
        text-decoration: none;
        display: flex;
        align-items: center;
        
    }
    & .link-list a.active {
        text-decoration:underline;
    }
    & .link-list a:first-child {
        border-top: 1px solid var(--theme-gray-2);
    }
}
#nav.active {
    opacity:1;
    pointer-events:all;
}


#cart-popup {
    position:fixed;
    bottom:0;
    z-index:102;
    pointer-events:none;
    opacity:0;
}
#cart-popup.active {
    opacity:1;
    pointer-events:all;
}

/* #tabs {
	position:fixed;
	bottom:0;
	width:100%;
	display:flex;
    z-index:0;
	height:var(--tab-bar-height);
	border-top:1px solid var(--tab-seperator-color);
}
#tabs a {
    background: var(--tab-bg);
    color: var(--tab-color);
    width: 100%;
    text-align: center;
	text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
	font-size:12px;
	text-transform: uppercase;
	border-right:1px solid var(--tab-seperator-color);	
	font-size:10px;
	font-family:var(--tab-bar-font);
	font-weight:600;
	flex-direction:column;
	padding-bottom:24px;
	position:relative;
}
#tabs a:last-child {
	border-right:none;
}
#tabs a img {
	max-height:100%;
}
#tabs a.active {
	background:var(--tab-active-bg);
}

#tabs .cart-count {
    background: var(--theme-light);
    height: 24px;
    width: 24px;
    border-radius: 100px;
    font-size: 16px;
    color: var(--theme-dark);
    font-weight: 400;
    position: absolute;
    right: 22%;
    top: 15%;
    display: flex;
    justify-content: center;
    align-items: center;
	opacity:0;
	transition: opacity 0.18s;
}
@keyframes bouncePopIn {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}
#tabs .cart-count.active {
	opacity:1;
	animation: bouncePopIn 0.5s ease forwards;
} */