@font-face {
    font-family: "SF-Pro-Text";
    src: url('../assets/fonts/SFProText-Bold.woff2');
    font-weight: 700;
}
@font-face {
    font-family: "SF-Pro-Text";
    src: url('../assets/fonts/SFProText-Medium.woff2');
    font-weight: 500;
}
@font-face {
    font-family: "SF-Pro-Text";
    src: url('../assets/fonts/SFProText-Regular.woff2');
    font-weight: 400;
}



*{
    --clr_navy:#23262b;
    --clr_blue:#1a7ff3;
    --clr_white:#f7f7f7;
    --clr_grey1:#363940;
    --clr_grey2:#9e9ea6;
    --clr_grey3:#5c5f66;
    --clr_grey4:#2a2a2c;
    --clr_green:#3db383;
    --clr_green:#e26f76;
}

body{
    margin: auto;
	height: 100%;
	width: 100%;
	overflow: hidden;
	font-family: Helvetica, Arial, sans-serif;
    background:#0e0e0e;
}


#ui_container{
    position:absolute;
    width:100%;
    height:100%;
    left:0px;
    top:0px;
    background:#0e0e0e;
    font-family:"SF-Pro-Display", helvetica;
    text-rendering: geometricPrecision;
    pointer-events:none;
}


    #cart-tab{
        z-index:10;
        position:absolute;
        right:10px;
        top:10px;
        background:var(--clr_navy);
        width:45px;
        height:45px;
        border-radius:10px;
        box-shadow:0px 0px 5px rgba(35, 38, 43, 0.5);
        pointer-events: all;
        opacity:1;
        transition: 0.2s;
    }

    #cart-tab.hidden{
        opacity:0!important;
        pointer-events:none!important;
    }
   
        #cart-tab > .quan{
            display:none;
            position:absolute;
            width:100%;
            height:calc(50% - 1px);
            top:0px;
            border-bottom:1px solid var(--clr_grey3);
            text-align:center;
            line-height:50px;
            color:var(--clr_grey2);
            font-size:18px;
            font-weight:500;
        }
        #cart-tab > .icon{
            position:absolute;
            width:100%;
            height:100%;
            top:0%;
        }
        #cart-tab > .icon::after{
            content:'';
            position:absolute;
            width:100%;
            height:100%;
            background: url('../assets/icons/cart-shopping-regular_grey.svg');
            background-position: center;
            background-size: 50% auto;
            background-repeat: no-repeat;
        }

    #map {
        position:absolute;
        height: calc(100% + 20px);
        width:100%;
        pointer-events:all;
        background:black;
    }


    #ref{
        display:none;
        opacity:0.3;
        z-index:10;
        position:absolute;
        height:100%;
        width:auto;
        left:50%;
        transform: translateX(-50%);
        pointer-events:none;
        
    }

    #ui_inner{
        position:absolute;
        height:100%;
        width:100%;
        max-width:600px;
        left:50%;
        top:0px;
        transform: translateX(-50%);
        pointer-events:none;
        /* border:1px solid red; */
    }

        #cart{
            z-index:100;
            position:absolute;
            width:100%;
            height:calc(100% - 20px);
            top:calc(100% - 360px);
            left:0px;
            border-radius: 15px 15px 0px 0px;
            background:var(--clr_navy);
            pointer-events:all;
            transform:translateY(100%);
            transition:0.2s;
        }
        #cart.open{
            transform: translateY(0%)!important;
        }
        #cart.up{
            top:20px;
        }
        #cart::after{
            content: '';
            position:absolute;
            z-index:1;
            top:6px;
            left:50%;
            transform: translateX(-50%);
            background:var(--clr_grey3);

            width:40px;
            height:5px;
            border-radius:10px;
        }

            #cart_exit{
                position: absolute;
                right:18px;
                top:18px;
                width:30px;
                height:30px;
                border-radius:100%;
                border:none;
                outline: none;
                cursor:pointer;
                
                background:url('../assets/icons/xmark-solid_grey.svg');
                background-position:center;
                background-repeat: no-repeat;
                background-color:var(--clr_grey1);
                background-size: 70% 70%;
            }

            #cart_title{
                position:relative;
                left:20px;
                top:20px;
                width:calc(100% - 20px - 100px);
                color:var(--clr_white);
                font-size:32px;
                text-align:left;
                text-transform: capitalize;
                font-weight:700;
                margin-bottom:23px;
                
                pointer-events:none;
                user-select: none;
            }
            

            #cart{
                --foot_height: 40px;
                --foot_pad: 10px;
            }

            #cart_body{
                position:absolute;
                top: 70px;
                width:calc(100% - 40px);
                left:20px;
                bottom:calc(60px + 20px + var(--foot_pad) + var(--foot_height) + var(--foot_pad));
                /* background:red; */
                overflow-y:scroll;
                overflow-x:hidden;
                border-bottom:1px solid var(--clr_grey1);
                border-top:1px solid var(--clr_grey1);
            }
            #cart_body::-webkit-scrollbar {
                width: 1px;
            }
            #cart_body::-webkit-scrollbar-track {
                background: transparent;
            }
            #cart_body::-webkit-scrollbar-thumb {
                background: transparent;
            }
            #cart_body::-webkit-scrollbar-thumb:hover {
                background: transparent;
            }

                .blurb{
                    position:relative;
                    width:100%;
                    text-align:Center;
                    color:var(--clr_grey2);
                    font-size:12px;
                    margin-top:10px;
                }
                

                .cart_item{
                    position:relative;
                    width:100%;
                    height:auto;
                    margin-bottom:35px;
                }

                    .cart_item > .item_img{
                        position:absolute;
                        height:80px;
                        width:auto;
                        left:0px;
                    }

                    .cart_item > .title{
                        position:relative;
                        left:calc(80px + 15px);
                        width:calc(100% - 80px - 10px);
                        height:auto;
                        color:var(--clr_white);
                        font-size:12px;
                        margin-top:10px;
                        margin-bottom:3px;
                    }

                    .cart_item > .subtitle{
                        position:relative;
                        left:calc(80px + 15px);
                        width:calc(100% - 80px - 10px);
                        height:auto;
                        color:var(--clr_grey2);
                        font-size:12px;
                        margin-bottom:8px;
                    }

                    .cart_item > .item_btns{
                        position:relative;
                        left:calc(80px + 15px);
                        /* width:90px; */
                        width:32px;
                        height:32px;
                        background:var(--clr_grey1);
                        border-radius:15px;
                    }

                        .cart_item > .item_btns > button{
                            position:absolute;
                            height:100%;
                            width:32px;
                            border-radius:100%;
                            border:none;
                            outline:none;
                            background:var(--clr_grey1);
                            color:var(--clr_white);
                            font-size:20px;
                            font-weight:500;
                            cursor:pointer;
                        }
                        .cart_item > .item_btns > .minus{
                            left:0px;
                            /* background:url('../assets/icons/minus-solid_white.svg'); */
                            background:url('../assets/icons/trash-regular_wht.svg');
                            
                            background-position: center;
                            background-size:50% 50%;
                            background-repeat: no-repeat;
                        }
                        .cart_item > .item_btns > .plus{
                            right:0px;
                            background:url('../assets/icons/plus-solid_white.svg');
                            background-position: center;
                            background-size:50% 50%;
                            background-repeat: no-repeat;
                        }
                        .cart_item > .item_btns > .quan{
                            position:absolute;
                            height:100%;
                            left:32px;
                            right:32px;
                            width:auto;
                            line-height:32px;
                            text-align:center;
                            color:var(--clr_white);
                            font-size:16px;
                            font-weight:500;
                        }

                        .cart_item > .total{
                            position:absolute;
                            
                            right:10px;
                            bottom:5px;
                            width:100px;
                            height:auto;
                            text-align:right;
                            color:var(--clr_grey2);
                            font-weight:700;
                        }
                    

            #cart_footer{
                position:absolute;
                width:calc(100% - 40px);
                height:var(--foot_height);

                left:20px;
                bottom:calc(60px + 20px + var(--foot_pad));
            }

                #cart_footer > .blurb{
                    position:absolute;
                    left:50%;
                    bottom:calc(100% + 35px);
                    transform: translateX(-50%);
                    width:auto;
                    /* background:red; */
                    color:var(--clr_grey2);
                    height:auto;
                    font-size:12px;

                }

                #cart_footer > .title, #cart_footer > .subtotal{
                    position:absolute;
                    width:50%;
                    color:var(--clr_grey2);
                    font-size:16px;
                    font-weight:500;
                }
                #cart_footer > .title{
                    
                }
                #cart_footer > .subtotal{
                    color:var(--clr_white);
                    font-weight:700;
                    font-size:24px;
                }
                #cart_footer > .title{
                    left:0px;
                    right:auto;
                }
                #cart_footer > .subtotal{
                    left:auto;
                    right:0px;
                    text-align:right;
                }
                #cart_footer > .misc{ 
                    position:absolute;
                    width:80%;
                    color:var(--clr_grey3);
                    top:20px;
                    text-align:left;
                    font-size:12px;
                }

            #cart_btns{
                --btn_margin:5px;
                --btn_left:15px;
                position:absolute;
                bottom:20px;
                /* top:138px; */
                left:calc(var(--btn_left) - var(--btn_margin));
                width:calc(100% - (2*(var(--btn_left) - var(--btn_margin))) );
                height:60px;
                margin:0px;
                /* background:Red; */
                /* margin-bottom:23px; */
            }

                #cart_btns > a > .btn{
                    position:relative;
                    height:100%;
                    width:calc(100% - (var(--btn_margin)*2));
                    /* width:calc(50% - (var(--btn_margin)*2)); */
                    border-radius:12px;
                    border:none;
                    outline:none;
                    overflow:hidden;
                    color:var(--clr_white);
                    text-align:center;
                    cursor:pointer;
                    text-transform: capitalize;
                    float:left;
                    margin:0px var(--btn_margin) 0px var(--btn_margin);
                    background:var(--clr_grey1);
                }

                    #cart_btns > a > .btn > .txt{
                        position:absolute;
                        top:50%;
                        /* bottom:8px; */
                        width:100%;
                        left:0px;
                        font-size:22px;
                        font-weight:500;
                        transform:translateY(-50%);
                    }

                    #checkout{
                        background:var(--clr_blue)!important;
                    }


        #bottom-tab_container{
            position:absolute;
            width:100%;
            /* min-height:360px; */
            height:calc(100% - 120px);
            /* bottom:0px; */
            top:calc(100% - 360px);
            left:0px;
            border-radius: 15px 15px 0px 0px;
            background:var(--clr_navy);
            pointer-events:all;
            transform:translateY(100%);
            transition:0.2s;

            overflow-y:scroll;
            overflow-x:hidden;
            /* border:1px solid var(--clr_navy); */
            /* box-shadow:0px -3px 5px -1px rgb(0,0,0,0.5); */
        }
        #bottom-tab_container.open{
            transform: translateY(0%)!important;
        }
        #bottom-tab_container.up{
            top:120px;
        }
        #bottom-tab_container::after{
            content: '';
            position:absolute;
            z-index:1;
            top:6px;
            left:50%;
            transform: translateX(-50%);
            background:var(--clr_grey3);

            width:40px;
            height:5px;
            border-radius:10px;
        }
        #bottom-tab_container::-webkit-scrollbar {
            width: 1px;
        }
        #bottom-tab_container::-webkit-scrollbar-track {
            background: transparent;
        }
        #bottom-tab_container::-webkit-scrollbar-thumb {
            background: transparent;
        }
        #bottom-tab_container::-webkit-scrollbar-thumb:hover {
            background: transparent;
        }

        

            #bt_exit{
                position: absolute;
                right:18px;
                top:18px;
                width:30px;
                height:30px;
                border-radius:100%;
                border:none;
                outline: none;
                cursor:pointer;
                
                background:url('../assets/icons/xmark-solid_grey.svg');
                background-position:center;
                background-repeat: no-repeat;
                background-color:var(--clr_grey1);
                background-size: 70% 70%;
            }

            #bt_title{
                position:relative;
                left:20px;
                top:20px;
                width:calc(100% - 20px - 100px);
                color:var(--clr_white);
                font-size:32px;
                text-align:left;
                text-transform: capitalize;
                font-weight:700;
                margin-bottom:23px;
                
                pointer-events:none;
                user-select: none;
            }
        

            #bt_subtitle{
                position:relative;
                left:20px;
                width:calc(100% - 20px - 100px);
                height:auto;
                text-transform: capitalize;
                font-size:18px;
                font-weight:500;
                margin-bottom:23px;
                color:var(--clr_blue);
                
                pointer-events:none;
                user-select: none;
            }

            #bt_btns{
                --btn_margin:5px;
                --btn_left:15px;
                position:relative;
                left:calc(var(--btn_left) - var(--btn_margin));
                width:calc(100% - (2*(var(--btn_left) - var(--btn_margin))) );
                height:60px;
                margin:0px;
                margin-bottom:23px;
            }

                #bt_btns > .btn{
                    position:relative;
                    height:100%;
                    width:calc(50% - (var(--btn_margin)*2));
                    border-radius:12px;
                    border:none;
                    outline:none;
                    overflow:hidden;
                    color:var(--clr_white);
                    text-align-last:center;
                    cursor:pointer;
                    text-transform: capitalize;
                    float:left;
                    margin:0px var(--btn_margin) 0px var(--btn_margin);
                    background:var(--clr_grey1);
                }

                    #bt_btns > .btn > img{
                        position:absolute;
                        height:38%;
                        width:100%;
                        top:10px;
                        left:50%;
                        transform: translateX(-50%);
                    }

                    #bt_btns > .btn > .txt{
                        position:absolute;
                        bottom:8px;
                        width:100%;
                        left:0px;
                        font-size:12px;
                        font-weight:500;
                    }

                /*  */

                #add_cart.btn{
                    background:var(--clr_blue);
                }
                #add_cart.btn.soldout{
                    pointer-events:none!important;
                    background:var(--clr_grey4);
                    color:var(--clr_grey2);
                }
                    #add_cart.btn > .txt{
                        /* text-transform: none; */
                    }

                #etc.btn{
                    
                }
                    #etc.btn > img{
                        top:8px;
                    }

                /*  */


                #select_size.btn > select{
                    -moz-appearance:none;
                    -webkit-appearance:none;
                    appearance:none;

                    position:absolute;
                    z-index:1;
                    border:none;
                    outline:none;
                    left:0px;
                    bottom:8px;
                    width:100%;
                    height:100%;
                    background:transparent;
                    padding-top:44px;

                    text-transform: capitalize;
                    text-align:center;
                    font-size:13px;
                    font-weight:500;
                    color:var(--clr_white);
                }

                    #select_size.btn > img{
                        top: 8px;
                        height:36%;
                    }


            /*  */

            #bt_images{
                position:relative;
                left:20px;

                width:1200px;
                height:350px;

                margin-bottom:23px;
                clear:both;
            }
            #bt_images > img{
                display: inline-block;
                position:relative;
                height:100%;
                width:auto;
                margin-right:5px;
                background:var(--clr_grey1);
                border-radius:10px;
            }

            /*  */

            #bt_desc{
                --pad:20px;
                --neg:4px;

                position:relative;
                left:20px;

                width:calc(100% - 20px - 20px);
                height:auto;
                text-transform: capitalize;
                font-size:18px;
                font-weight:500;
    
                color:var(--clr_white);

                margin-bottom:23px;
            }



                #bt_desc > .title{
                    position:relative;
                    width:100%;
                    font-size:24px;
                    font-weight:500;
                    margin-bottom:10px;
                }

                #bt_desc > .subtitle{
                    z-index:1;
                    position:absolute;
                    width:calc(100% - (2*(var(--pad) - var(--neg))));
                    font-size:16px;
                    font-weight:500;
                    margin:0px;
                    padding:0px;
                    left:calc(var(--pad) - 0px);
                    top:16px;
                    color:var(--clr_grey2);
                }

                #bt_desc > .body{
                    position:relative;
                    border-radius:10px;
                    width:calc(100% - (var(--pad)*2) + (var(--neg)*2));
                    background:var(--clr_grey4);
                    padding:calc(var(--pad) - 12px) var(--pad);
                    left:calv(var(--neg) * -1);
                    font-size:14px;
                }