/* Menu Toggler */
    
    input#menu-toggle,
    label.menu-toggle-label {
        display: none;
    }
        input#menu-toggle {
            height: 0;
            margin: 0;
            padding: 0;
        }

    @media screen and (max-width:60rem){
    
        label.menu-toggle-label {
            display: grid;
            place-items: center;
            grid-template-areas: "stack";
            position: fixed;
            top: 0rem;
            right: 1rem;
            height: 4rem;
            padding-inline: 1rem;
            align-items: center;
            z-index: 999999;
            cursor: pointer;
            
        }

        label.menu-toggle-label.announcement {
            top: 2.5rem;
        }

        label.menu-toggle-label i {
            grid-area: stack;
            transition: all .4s ease-in-out;
        }

    }

    label.menu-toggle-label i.fa-xmark {
        opacity: 0;
    }
    input#menu-toggle:checked + label.menu-toggle-label i.fa-xmark {
        color: #FF8C00;
        opacity: 1;
        transform: rotate(-180deg);
    }

    input#menu-toggle:checked + label.menu-toggle-label i.fa-bars {
        opacity: 0;
        transform: rotate(180deg);
    }


	input#menu-toggle + label.menu-toggle-label + header.site-header.mobile {
		transition: all .4s ease-in-out;
	}
    

    input#menu-toggle:checked + label.menu-toggle-label + header.site-header.mobile  {
        height: 100vh;
        /* background-color: #333333; */
        border-block-end: 0 none;
		background-color: #333333;
    }





/* Header */

    header.site-header {
        position: relative;
        height: 12.5rem;
        /* transition: position 0.3s ease-in-out 0.4s; */
        will-change: transform, opacity;
    }

     header.site-header.scroll {
        position: sticky;
        top: 0;
		/* height: 3.5rem; */
        background-image: none;
		z-index: 2;
        /* transition: all .6s ease-in-out 0.4s; */
        transform: scaleY(3.5rem);
    }

    @media screen and (max-width:60.1rem){

        header.site-header.mobile {
            position: sticky;
            top: 0;
            height: 4rem;
            /* background-color: #333333e2; */
            overflow: hidden;
            z-index: 999998;
            border-block-end: 2px solid #222222;
            transition: height .4s ease-in-out .4s;
        }

    }
    
    /* Site Announcement Bar */

    header.site-header.mobile.announcement {
        height: 6.5rem;
    }

    header div.site-announcement {
        position: relative;
        height: 2.5rem;
        color: white;
        background-color: #222222;
        z-index: 1;
    }

    header div.site-announcement p {
        display: grid;
        place-items: center;
        margin: 0;
        padding: 0;
        line-height: 2.5rem;
        font-family: "Bebas Neue", sans-serif;
    }

    header div.site-announcement p a {
        transition: all .4s ease-in-out;
    }

    header div.site-announcement p a:hover {
        color: #EEEEEE;
    }

    header div.site-announcement p i {
        color: #FFFFFF;
        padding-inline: 0.5rem;
    }

    header.scroll div.site-announcement {
        height: 0;
        overflow: hidden;
    }




    /*  */

    header div.nav-bg {
        background-image: linear-gradient(180deg,rgb(0 0 0/0.75),rgb(0 0 0/0.35) 50%,rgb(0 0 0/0) 100%);
		z-index: 100000;
    }

    header.mobile div.nav-bg {
        background-image: none;
    }

    header.scroll div.nav-bg div.site-nav {
        padding: 0 2rem;
        background: #333333ca;
        border-bottom: 2px solid #222222;
    }
    
    header div.nav-bg div.site-nav {
        padding: 1rem 2rem;
        font-family: "Bebas Neue", sans-serif;
        transition: all 0.3s ease-in-out;
    }

    header.mobile div.nav-bg div.site-nav {
        padding-inline: 0;
    }

    header.mobile div.nav-bg div.site-nav {
        height: 100vh;
        background-color: #333333e2;
        transition: background-color .3s ease-in-out;
    }

    input#menu-toggle:checked + label.menu-toggle-label + header.site-header.mobile + div.site-nav {
        background-color: red;
    }

    header div.nav-bg div.site-nav div.inner {
        display: flex;
        max-width: var(--full-width);
        margin: 0 auto;
        padding-inline: 2rem;
        justify-content: space-between;
        align-items: center;
    }

    header.mobile div.nav-bg div.site-nav div.inner {
        flex-direction: column;
        justify-content: flex-start;
        align-items: normal;
    }

    header.mobile div.nav-bg div.site-nav div.inner div.site-logo {
        display: flex;
        align-items: center;
        height: 3rem;
        padding-block-end: 1rem;
        
    }

    /* Navigation Links */

    header div.nav-bg div.site-nav div.inner div.site-logo {
        display: block;
        z-index: 1;
     }

    header div.nav-bg div.site-nav div.inner div.site-logo a {
        display: block;
    }
    
    header div.nav-bg div.site-nav div.inner div.site-logo img {
        max-width: 200px;
        transition: all 0.3s ease;
    }
    header.mobile div.nav-bg div.site-nav div.inner div.site-logo img,
    header.scroll div.nav-bg div.site-nav div.inner div.site-logo img {
        display: flex;
        max-width: 120px;
        margin-block: auto;
    }

    header.mobile div.nav-bg div.site-nav div.inner nav.main-nav {
        display: flex;
        justify-content: center;
        margin-block-end: 2rem;
        padding-block: 2rem;
        border-block-start: 1px solid #666666;
    }

    header div.nav-bg div.site-nav div.inner nav.main-nav ul {
        display: flex;
        margin: 0;
        padding: 0;
        gap: 2.25rem;
        list-style: none;
    }

    header.mobile div.nav-bg div.site-nav div.inner nav.main-nav ul {
        flex-direction: column;
    }

    header div.nav-bg div.site-nav div.inner nav.main-nav ul li {
        position: relative;
        /* height: 1.5rem; */
        /* line-height: 1.0rem; */
    }

    @media screen and (min-width:60rem){
    
        header div.nav-bg div.site-nav div.inner nav.main-nav ul li.shop-link {
            /* padding-inline: 1rem; */
        }

    }

    header.mobile div.nav-bg div.site-nav div.inner nav.main-nav ul li {
        max-width: 90ch;
        text-align: center;
    }



    header div.nav-bg div.site-nav div.inner nav.main-nav ul li a {
        display: block;
        padding-block: 0.5rem;
        /* padding-inline:1rem; */
        /* transition: all .3s ease-in-out; */
    }

    header div.nav-bg div.site-nav div.inner nav.main-nav ul li.shop-link a {
        /* padding-block: 0.125rem; */
    }


  
    header.mobile div.nav-bg div.site-nav div.inner nav.main-nav ul li a,
    header.mobile div.nav-bg div.site-nav div.inner nav.main-nav ul li a span {
        padding: 0.5rem;
        font-size: 2rem;
    }

    header:not(.mobile) div.nav-bg div.site-nav div.inner nav.main-nav ul li.current-page {
        border-bottom: 1px solid #FFF0AD;
    }

    header div.nav-bg div.site-nav div.inner nav.main-nav ul li.current-page a,
    header.mobile div.nav-bg div.site-nav div.inner nav.main-nav ul li.current-page a {
        color: #FFF0AD;
    }


    header.mobile div.nav-bg div.site-nav div.inner nav.main-nav ul li a i {
        display: none;
    }

    header.mobile div.nav-bg div.site-nav div.inner nav.main-nav ul li a:hover {
        color: #FF8C00;
    }

    @media screen and (min-width:60rem){

        header div.nav-bg div.site-nav div.inner nav.main-nav ul li.shop-link a {
            padding-inline: 1rem;
            background-color: #3333339d;
            border: 1px solid #FF8C00;
            transition: background-color .4s ease-in-out;
        }

        header div.nav-bg div.site-nav div.inner nav.main-nav ul li.shop-link a:hover {
            color: #333333;
            background-color: #FF8C00;
        }

        header div.nav-bg div.site-nav div.inner nav.main-nav ul li.search-link {
            padding: 0;
        }

         header div.nav-bg div.site-nav div.inner nav.main-nav ul li.search-link:hover {
            /* width: 4rem; */
         }

        header div.nav-bg div.site-nav div.inner nav.main-nav ul li.search-link a {
            transition: color .3s ease-in-out;
        }

        header div.nav-bg div.site-nav div.inner nav.main-nav ul li.search-link a i {
            margin-top: -0.25rem;
        }


        header.mobile div.nav-bg div.site-nav div.inner nav.main-nav ul li {
            max-width: 70ch;
            display: none;
        }
        
        
        header.mobile div.nav-bg div.site-nav div.inner nav.main-nav ul li.search-link a i {
            display: none;
        }

        header div.nav-bg div.site-nav div.inner nav.main-nav ul li.search-link a:hover {
            color: #FF8C00;
        }

        header div.nav-bg div.site-nav div.inner nav.main-nav ul li.search-link span {
            display: flex;
            height: 0;
            width: 0;
            text-indent: -1000rem;
            overflow: hidden;
        }
        
        header div.nav-bg div.site-nav div.inner nav.main-nav ul li.main-link::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            /* bottom: -0.5rem; */
            height: 0.5rem;
            width: 0%;
            background: #FF8C00;
            /* background: #FF8C00; */
            /* border-radius: .25rem; */
            transition: all 0.25s ease-in-out;
        }

        header div.nav-bg div.site-nav div.inner nav.main-nav ul li.main-link.current-page::before {
            height: 0;
        }

        header div.nav-bg div.site-nav div.inner nav.main-nav ul li:hover::before {
            height: 0.125rem;
            width: 100%;
        }

        header.mobile div.nav-bg div.site-nav div.inner nav.main-nav ul li.main-link {
            height: 0;
            overflow: hidden;
        }

    }

    header div.nav-bg div.site-nav div.inner nav.main-nav ul li:hover::after {
        height: 0.25rem;
        width: 100%;
    }

    header div.nav-bg div.site-nav div.inner nav.main-nav ul li a {
        color: #eeeeee;
        text-decoration: none;
    }