@charset "UTF-8";

@font-face{
    font-family: "Cerebri Sans";
    font-style: normal;
    font-weight: 400;
    font-display: auto;
    src: url(../fonts/CerebriSans/CerebriSans-Regular.woff2) format("woff2");
}

@font-face{
    font-family: "Cerebri Sans";
    font-style: normal;
    font-weight: 500;
    font-display: auto;
    src: url(../fonts/CerebriSans/CerebriSans-Medium.woff2) format("woff2");
}

@font-face{
    font-family: "Cerebri Sans";
    font-style: normal;
    font-weight: 600;
    font-display: auto;
    src: url(../fonts/CerebriSans/CerebriSans-SemiBold.woff2) format("woff2");
}

@font-face{
    font-family: "Cerebri Sans";
    font-style: normal;
    font-weight: 700;
    font-display: auto;
    src: url(../fonts/CerebriSans/CerebriSans-Bold.woff2) format("woff2");
}

:root{
    --primary-color:#46aad5;
    --primary-color-rgb:70,170,213;
    --secondary-color:#9bb1ad;
    --secondary-color-rgb:155,177,173;
    --alt-color:#647589;
    --alt-color-rgb:100,117,137;
    --light-color:#eaeaea;
    --dark-color:#333333;
    --zeta-font:"Cerebri Sans";
    --zeta-theme-color-text:#9b9b9b;
}

::selection{
    background-color:var(--alt-color);
    color:#fff;
}

*{
    outline:0;
}

nav{
    bottom:-100%;
    transition:bottom .25s ease-in-out;

    &.explorer{
        z-index:var(--zeta-index-2);
    }

    & ul{
        margin:0;
        padding:0;
        height:inherit;
        list-style-type:none;
        display:grid;
        grid-template-columns:repeat(5,1fr);

        & li{
            height:inherit;

            & a{
                height:inherit;
                display:block;
                align-content:center;
                text-align:center;
                font-size:1.5rem;
                color:#fff;
                transition:0.3s ease-in-out;

                &:hover,
                &:focus,
                &:active{
                    background-color:var(--secondary-color);
                    color:#fff;
                }
            }
        }
    }
}

h1{
    font-weight:500;
    text-transform:capitalize;
    letter-spacing:-1px;
    color:var(--dark-color);
    line-height:1.1;
}

h3,h4,h5{
    font-weight:500;
}

h6{
    margin:0;
    padding:.35rem .75rem;
    width:fit-content;
    font-size:.9rem;
    font-weight:700;
    background-color:var(--secondary-color);
    border-radius:5px;
    text-transform:uppercase;
    color:#fff;
    transition:.3s ease;

    & > i{
        margin-left:.5rem;
    }
}

header{
    height:auto;
    background-image:url(../img/slider-hero-bg.jpg);
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    & p{
        padding-left:20px;
        border-left:4px solid var(--secondary-color);
        font-size:1rem;
        color:var(--alt-color);
    }
}

p{
    &:last-child{
        margin-bottom:0;
    }

    & > a{
        display:inline-block;
        font-weight:500;
        text-decoration:none;
        color:var(--dark-color);
        position:relative;
        
        &::after{
            content:"";
            width:100%;
            height:2px;
            background-color:var(--primary-color);
            position:absolute;
            bottom:-1px;
            left:0;
        }

        &:hover,
        &:focus,
        &:active{
            color:var(--dark-color);
        }
    }
}

figure{
    margin:0;
    padding:0;
}

menu{
    margin:0;
    padding:0;
}

details{
    -webkit-appearance:none;
            appearance:none;
    padding:0 1.5rem;
    border:1px solid var(--light-color);
    border-bottom:0;
    color:var(--dark-color);
    font-weight:400;

    & summary{
        padding:2rem 0;
        padding-right:2rem;
        position:relative;
        transition:margin 150ms ease-out;

        &::marker{
            content:none;
        }

        &::-webkit-details-marker{
            display:none;
        }

        &::before{
            content:"\f0fe";
            display:block;
            font-family:"Font Awesome 5 Pro";
            font-size:2rem;
            font-weight:300;
            position: absolute;
            top:50%;
            right:0;
            transform:translateY(-50%);
            color:var(--secondary-color);
        }

        & h3{
            margin-bottom:0;
        }
    }

    /*& summary::marker,
    &:is(::-webkit-details-marker){
        content:"\f745";
        display:block;
        font-family:"Font Awesome 5 Pro";
        font-size:1.5rem;
        font-weight:600;
    }*/

    &[open]{
        padding-bottom:2rem;

        & summary{
            margin-bottom:1rem;

            &::before{
                content:"\f146";
            }
        }
    }

    &:first-child{
        border-top-left-radius:8px;
        border-top-right-radius:8px;
    }

    &:last-child{
        border-bottom:1px solid var(--light-color);
        border-bottom-left-radius:8px;
        border-bottom-right-radius:8px;
    }
}

table{
    width:100%;
    display:table;
    color:var(--dark-color);
    vertical-align:top;
    border:1px solid var(--light-color);
    caption-side:bottom;
    border-collapse:collapse;
    
    & thead{
        vertical-align:bottom;

        & th{
            padding:.75rem;
            font-weight:450;
            font-size:1rem;
            text-transform:capitalize;
            vertical-align:top;
            color:var(--dark-color);
        }
    }

    & tbody{
        & td{
            padding:.75rem;
            font-weight:350;
            color:#676B84;
            vertical-align:middle;

            & figure{
                display:inline-block;
            }

            & .button{
                & span{
                    margin-left:0;
                }
            }
        }
    }
}

form{
    & fieldset{
        padding:0;

        &.inline{
            position:relative;

            & button{
                margin-top:0;
                position:absolute;
                top:50%;
                right:.5rem;
                transform:translateY(-50%);
            }

            & input[type=search]{
                padding-right:calc(55px + .5rem);
            }
        }

        & label{
            font-size:.8rem;
            font-weight:500;
            color:var(--secondary-color);
        }

        & input,
        & select,
        & textarea{
            padding:0 1rem;
            height:70px;
            background-color:#fff;
            border-width:2px;
            font-size:1rem;
            font-weight:500;
            color:var(--alt-color-rgb);
            transition:border-color .3s ease-in-out;

            &:focus{
                border-color:var(--secondary-color);
            }

            &:disabled{
                background-color:inherit;
                color:#ccc;
            }

            &::placeholder{
                color:#ccc;
            }
        }

        & textarea{
            padding:1rem;
            resize:none;
        }

        & button{
            margin-top:1rem;
        }
    }
}

dialog{
    margin:auto;
    padding:2rem;
    width:90vw;
    max-width:575px;
    border:none;
    border-radius:8px;
    background-color:#fff;
    box-shadow:0 8px 28px rgba(0,0,0,.28);
    opacity:0;
    transition-property:opacity;
    transition-duration:.25s;
    transition-behavior:allow-discrete;

    &[open]{
        opacity:1;
    }

    &::backdrop{
        background-color:var(--dark-color);
        opacity:.55;
    }

    &.alert{
        max-width:480px;
    }

    & .trigger-dialog:not(.button){
        width:60px;
        height:60px;
        font-size:1.5rem;
        background:transparent;
        color:var(--zeta-theme-color-text);
        position:absolute;
        top:0;
        right:0;
    }

    & h6{
        margin-bottom:.5rem;
        background-color:var(--primary-color);
    }

    & h3{
        text-transform:capitalize;
    }
}

@starting-style{
    dialog{
        &[open]{
            opacity:0;
        }
    }
}

.row,
.container,
.nav-wrapper{
    margin-left:auto;
    margin-right:auto;
    max-width:1400px;
}

.background{
    &.color{
        --alpha:1;

        &.primary{
            background-color:rgba(
                var(--primary-color-rgb),
                var(--alpha)
            );
        }
        &.secondary{
            background-color:rgba(
                var(--secondary-color-rgb),
                var(--alpha)
            );
        }
        &.alt{
            background-color:rgba(
                var(--alt-color-rgb),
                var(--alpha)
            );
        }
    }
}

.align{
    &.right{
        text-align:right;
    }

    &.justify{
        text-align:justify;
    }

    &.center{
        text-align:center;
    }
}

.button{
    --height:55px;

    padding:0 2rem;
    width:fit-content;
    height:var(--height);
    display:inline-block;
    align-content:center;
    border-radius:calc(var(--height)/2);
    font-weight:600;
    font-size:1.1rem;
    text-decoration:none;
    text-transform:capitalize;
    position:relative;
    overflow:hidden;

    &::after{
        content:"";
        width:100%;
        height:inherit;
        background-color:transparent;
        border-radius:inherit;
        border:4px solid rgba(255,255,255,0.5);
        position:absolute;
        top:0;
        left:0;
        bottom:0;
        right:0;
        pointer-events:none;
        transition:0.3s ease-in-out;
    }

    & > i{
        margin-left:.25rem;
    }

    &.icon{
        padding:0;
        width:55px;
        text-align:center;

        & > i{
            margin-left:0;
        }
    }

    &.full{
        width:100%;
        text-align:center;
    }

    &.primary{
        background-color:var(--primary-color);
        color:#fff;
    }

    &.secondary{
        background-color:var(--secondary-color);
        color:#fff;
    }

    &.remove{
        padding:0;
        width:30px;
        height:30px;
        border-radius:50%;
        border:2px solid #333;
        background-color:transparent;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        font-size:1rem;

        & > i{
            margin-left:0;
        }
    }

    &:hover,
    &:focus,
    &:active{
        &.primary{
            &::after{
                border-color:var(--primary-color);
            }
        }

        &.secondary{
            &::after{
                border-color:var(--secondary-color);
            }
        }
    }

    &:disabled{
        opacity:.5;
        pointer-events:none;
    }
}

.fab{
    font:var(--fa-font-brands);
}

.title{
    padding-bottom:1rem;
    border-bottom:1px solid var(--light-color);

    &:has(p){
        margin-bottom:2rem;
    }

    & h2{
        margin:0 0 .5rem;
    }

    & h6{
        margin-bottom:.5rem;
        background-color:var(--primary-color);
    }
}

.social{
    margin-top:1.5rem;

    & .button{
        margin:0 0.1rem;

        &:first-child{
            margin-left:0;
        }

        &:last-child{
            margin-right:0;
        }
    }
}

.empty-products{
    &:not(:has(h1)){
        text-align:center;

        & h6{
            margin:1rem auto;
        }

        & p{
            margin-bottom:1rem;
        }
    }
}

.spinner{
    --size:48px;

    width:var(--size);
    height:var(--size);
    border-radius:50%;
    position:relative;

    &::before {
        content:"";
        box-sizing:border-box;
        position:absolute;
        inset:0px;
        border-radius:50%;
        border:5px solid rgba(var(--secondary-color-rgb),0.35);
        animation:prixClipFix 2s linear infinite ;
    }
}

@keyframes prixClipFix{
    0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
    25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
    50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
    75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
    100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
}

.box-product{
    --height:250px;

    padding:1.25rem;
    background-color:rgba(
        var(--secondary-color-rgb),0.1
    );
    border-radius:10px;
    overflow:hidden;
    position:relative;

    &::before,
    &::after{
        content:"";
        position:absolute;
        border-radius:50%;
        z-index:-1;
    }

    &::before{
        width:300px;
        height:300px;
        background-color:rgba(
            var(--primary-color-rgb),0.12
        );
        top:-150px;
        right:-150px;
        transition:all .5s ease-in-out;
    }

    &::after{
        width:350px;
        height:350px;
        background-color:rgba(
            var(--primary-color-rgb),0.1
        );
        top:-175px;
        right:-175px;
        transition:all .3s ease-in-out;
    }

    & h6{
        margin-bottom:1rem;
    }

    & figure{
        margin-bottom:1rem;
        width:100%;
        height:var(--height);
        max-height:var(--height);
        overflow:hidden;
        position:relative;

        & > .spinner{
            opacity:0;
            position:absolute;
            top:50%;
            left:50%;
            z-index:1;
            transform:translateX(-50%) translateY(-50%);
            transition:opacity .3s ease-in-out;
        }

        & > img{
            width:100%;
            height:100%;
            object-fit:contain;
            object-position:center;
            opacity:1;
            transition:opacity .3s ease-in-out;
        }

        & > .buttons{
            display:flex;
            align-items:center;
            justify-content:center;
            opacity:0;
            visibility:hidden;
            position:absolute;
            bottom:0;
            left:0;
            z-index:2;
            transition:all 0.3s ease-in-out;

            & > .button{
                margin:0 0.25rem;
            }
        }
    }

    & h5{
        margin-bottom:1rem;
        text-align:center;
    }

    & p{
        margin-bottom:1rem;
        text-align:justify;
        color:var(--alt-color);
    }

    &:hover,
    &:focus,
    &:active{
        &::before{
            top:-135px;
            right:-135px;
        }

        &::after{
            top:-160px;
            right:-160px;
        }

        & h6{
            background-color:var(--primary-color);
        }

        & figure{
            & > .buttons{
                opacity:1;
                visibility:visible;
                bottom:0.5rem;
            }
        }
    }

    &.loading{
        & figure{
            & > .spinner{ opacity:1; }
            & > img{ opacity:0; }
        }
    }
}

#infoBar{
    border-bottom:1px solid var(--light-color);

    & a{
        font-size:1rem;
        font-weight:500;
        text-decoration:none;
        color:var(--alt-color);

        & i{
            color:var(--primary-color);
        }

        &:last-child{
            margin-left:.5rem;
        }
    }
}

#menuBar{
    & figure{
        & img.fluid{
            max-width:220px;
        }
    }

    & .buttons{
        display:flex;
        align-items:center;
        justify-content:end;

        & button{
            width:fit-content;
            display:inline-block;

            &:not(.button){
                padding:0 .5rem;
                height:55px;
                font-size:1.8rem;
                background-color:transparent;
                color:var(--alt-color);
            }

            &.button{
                margin-left:.5rem;
                font-size:1rem;
            }
        }
    }

    & menu{
        display:flex;
        gap:1.5rem;
        justify-content:center;
        list-style-type:none;
        
        & li{
            & a{
                font-size:1.1rem;
                font-weight:500;
                color:var(--secondary-color);
                text-decoration:none;
                transition:.3s ease;

                &:hover{
                    color:var(--primary-color);
                }
            }

            &.current{
                & a{
                    color:var(--alt-color);
                }
            }
        }
    }
}

#menuCart,
#menuMain{
    padding:1.75rem;
    width:350px;
    height:100dvh;
    background-color:#fff;
    box-shadow:0 0 25px rgba(var(--secondary-color-rgb),.25);
    position:fixed;
    top:0;
    right:-100%;
    z-index:var(--zeta-index-1);
    transition:all .25s ease-in-out;
    overflow-y:auto;

    &.active{
        right:0;
    }

    & > button{
        position:absolute;
        top:.5rem;
        right:.5rem;
    }

    & > a{
        margin-top:1rem;
    }

    & .title{
        margin-bottom:2rem;

        & h2{
            font-weight:500;
        }
    }
}

#menuMain{
    & form{
        margin-bottom:1.5rem;
    }

    & ul{
        margin:0;
        padding:0;
        list-style-type:none;

        & li{
            & a{
                width:100%;
                height:45px;
                display:flex;
                align-items:center;
                font-size:1.1rem;
                font-weight:500;
                color:var(--secondary-color);
                text-decoration:none;
                transition:.3s ease-in-out;

                & > i{
                    margin-right:.5rem;
                    color:var(--primary-color);
                }

                &:hover,
                &:focus,
                &:active{
                    color:var(--alt-color);
                }
            }

            &.current{
                & a{
                    color:var(--alt-color);
                }
            }
        }
    }

    & .social{
        margin-bottom:1.5rem;
        text-align:center;
    }
}

#menuCart{
    & #itemsCart{
        & .item-cart{
            margin-bottom:2rem;
            position:relative;

            & figure{
                & img{
                    object-fit:contain;
                    object-position:center;
                    width:100%;
                    height:100%;
                }
            }

            & a{
                margin-bottom:.5rem;
                font-size:1.25rem;
                font-weight:500;
                text-decoration:none;
                line-height:1.1;
                color:var(--dark-color);
                display:block;

                /*&:hover,
                &:focus,
                &:active{
                    color:var(--primary-color);
                }*/
            }

            & > button{
                position:absolute;
                top:-15px;
                right:0;
            }

            & > span{
                padding:0 .5rem;
                width:fit-content;
                height:20px;
                background-color:var(--secondary-color);
                border-radius:10px;
                font-weight:500;
                color:#fff;
                position:absolute;
                top:-15px;
                left:0;
            }
        }
    }
}

#searchBar{
    padding:2rem;
    background-color:#fff;
    box-shadow:0 0 25px rgba(var(--secondary-color-rgb),.25);
    position:fixed;
    bottom:-100%;
    left:0;
    z-index:var(--zeta-index-1);
    transition:bottom .5s ease-in-out;

    &.active{
        bottom:0;
    }

    & .title{
        margin-bottom:1rem;
        border-bottom:0;
    }
}

footer{
    position:relative;

    &::before{
        content:"";
        width:50%;
        height:100%;
        background-color:rgba(var(--primary-color-rgb),0.1);
        position:absolute;
        bottom:0;
        right:0;
        z-index:-1;
    }

    & figure{
        margin-bottom:2rem;
    }

    & h4{
        margin-bottom:2.5rem;
        color:var(--dark-color);
        text-transform:capitalize;

        & > span{
            color:var(--primary-color);
        }
    }

    & p{
        color:var(--alt-color);

        & b{
            display:block;
            font-weight:600;
            font-size:1rem;
        }
    }

    & ul{
        margin:0;
        padding:0;
        list-style-type:none;
        /*display:grid;
        grid-template-columns:repeat(2,1fr);*/

        & li{
            & a{
                padding:.25rem 0.25rem 0.25rem 1rem;
                width:100%;
                display:block;
                font-weight:500;
                text-decoration:none;
                color:var(--alt-color);
                position:relative;
                transition:color .3s;

                & span{
                    margin-right:.25rem;
                    color:var(--primary-color);
                }

                &::before{
                    content:"\f067";
                    font-family:"Font Awesome 5 Pro";
                    color:var(--primary-color);
                    position:absolute;
                    top:50%;
                    left:0;
                    transform:translateY(-50%);
                }

                &:hover,
                &:focus,
                &:active{
                    color:var(--primary-color);
                }
            }
        }
    }

    & .info{
        & i{
            margin-top:5px;
            font-size:1.5rem;
            color:var(--primary-color);
        }
    }

    & #copyright{
        & p{
            font-size:1rem;
            color:var(--alt-color);
        }
    }
}

@media(max-width:1199px){
    #menuBar{
        & .row{
            & .col-12{
                display:none;
            }
        }
    }
}

@media(max-width:991px){
    table{
        border:0;

        & thead{
            margin:-1px;
            padding:0;
            width:1px;
            height:1px;
            border:none;
            clip:rect(0 0 0 0);
            overflow:hidden;
            position:absolute;
        }

        & tbody{
            display:grid;
            grid-template-columns:repeat(2, 1fr);
            gap:.75rem;
        }

        & tr{
            display:block;
            border:1px solid var(--light-color);
            border-radius:8px;

            &:last-child{
                margin-bottom:0;
            }

            & td{
                border:0;
                display:block;
                font-size:.85rem;
                text-align:right;

                &::before{
                    content:attr(data-label);
                    color:var(--dark-color);
                    font-weight:450;
                    float:left;
                }

                &:last-child{
                    border-bottom:0;
                }

                &.not-label{
                    text-align:center;
                }
            }
        }
    }

    #infoBar{
        & p,
        & .right{
            text-align:center;
        }
    }
}

@media(max-width:767px){
    footer{
        &::before{
            width:0;
            height:0;
        }
    }
}

@media(max-width:575px){
    nav{
        bottom:0;
    }

    table{
        & tbody{
            grid-template-columns:repeat(1, 1fr);
        }
    }

    footer{
        & figure,
        & h4,
        & .social{
            text-align:center;
        }

        & #copyright{
            & p{
                margin-bottom:var(--navigation-h-1);
            }
        }
    }

    #menuCart,
    #menuMain{
        width:100%;
        height:calc(100dvh - var(--navigation-h-1));
    }

    #menuBar{
        & .buttons{
            & button{
                &:not(.button){
                    font-size:2rem;
                }

                &.button{
                    display:none;
                }
            }
        }
    }

    #searchBar{
        padding:2rem .75rem;

        &.active{
            bottom:calc(var(--navigation-h-1) - 1px);
        }
    }
}