@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

/*---------------------------------------
 *          VARIABLES  order_footer
 *---------------------------------------*/
:root{
	/*   COLOURS	*/
    --orange: #fd830de0;/*    #FD830D;*/
    --light-background: #e7ebf3;
    --white: #FFFFFF;
    --moon-white: #E9F4FF;
    --night-blue: #607FF2;
    --gorgonzola-blue: #4C51C6;
    --blue: dodgerblue;
    --dark-blue: #0A021C;
    --dark-gray: #7c899a;
    --light-gray: #f2f3f5;
    --dark: #0a021c;
    --green: #3fb65f;
    --light-green: #dc5;
    --red: #F00;
    --gray: hsl(252, 30%, 65%);
    --second-color-blue: #62b4ff;
    --light: hsl(252, 30%, 95%);
    --secoundry: hsl(252, 100%, 90%);

    --main-bg: #FFFFFF;
    --second-bg: #fafafb;
    --txt-color: #455560;
    --txt-white: #FFFFFF;
    --main-color: #349Eff;
    --second-color: #62b4ff;
    --border-cl: #e5e8ec;

	/*  GRADIENTS  */
    --grad-green: linear-gradient(to right, #3fb65f, #76ff03);
    --grad-red: linear-gradient(to right, #fb5285, #ff3527);
    --grad-blue: linear-gradient(to right, #48c5f2, #6692d9);
    --grad-yellow: linear-gradient(to right, #ffb62c, #f58157);

	/*   FONTS	*/
    --ff-p: "Poppins", sans-serif;

    --font-small: 12px;
    --font-smaller: 11px;

    --fw3: 300;
    --fw4: 400;
    --fw5: 500;
    --fw6: 600;
    --fw7: 700;
    --fw8: 800;
    --fw9: 900;


    --cubic: cubic-bezier(0.175, 0.885, 0.32, 1.275);

}

/*---------------------------------------
 *          SET CORE ROOT DEFAULT
 *---------------------------------------*/
*,*::before,*::after{
	margin: 0;
	padding: 0;
}
html:focus-within,
html {
    font-size: 13px;
    scroll-behavior: smooth;
}
body {
    font-family: var(--ff-p);
    font-weight: var(--fw4);
    color: var(--dark-gray);
    background: var(--main-bg);
    min-height: 100vh;
    height: auto;
    width: 100vw;
    overflow-x: hidden;
    overflow-y: hidden;
}
ul,
ol {
    list-style: none;
}
a {
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}
img,
picture {
    max-width: 100%;
    vertical-align: middle;
    display: block;
    object-fit: contain;
}
input,
textarea,
select,
button {
    border: 2px solid var(--moon-white);
    font: inherit;
    outline: none;
    width: inherit;
}
input:focus{
    border: 2px solid var(--main-color);
}
/*---------------------------------------
 *          UTILITY CLASSES
 *---------------------------------------*/

.icon-img {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 2rem;
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 0.5rem;
    margin-right: 1em;
}
.icon-img img {
    height: inherit;
    object-fit: cover;
}
.obj-cover img {
    position: absolute;
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
}
.products .media {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
}
.fw3 {
    font-weight: var(--fw3);
}
.fw4 {
    font-weight: var(--fw4);
}
.fw5 {
    font-weight: var(--fw5);
}
.fw6 {
    font-weight: var(--fw6);
}
.fw7 {
    font-weight: var(--fw7);
}
.fw8 {
    font-weight: var(--fw8);
}
.fw9 {
    font-weight: var(--fw9);
}
.bg-og{
    background: var(--grad-yellow);
    color: var(--white);
}
.bg-rg{
    background: var(--grad-red);
    color: var(--white);
}
.bg-gg{
    background: var(--grad-green);
    color: var(--white);
}
.bg-bg{
    background: var(--grad-blue);
    color: var(--white);
}
.bg-success{
    background: var(--green) !important;
}
.bg-white{
    background: var(--white);
}
.bg-danger{
    background: var(--red);
}
.bg-blue{
    background: var(--blue);
}
.bg-primary{
    background: var(--orange);
}
.cl-success{
    color: var(--green) !important;
}
.cl-white{
    color: var(--white);
}
.cl-danger{
    color: var(--red);
}
.cl-blue{
    color: var(--blue);
}
.cl-orange{
    color: var(--orange);
}
.disapear{
    display: none !important;
}
.hide{
    opacity: 0;
    pointer-events: none;
    display: flex;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    position: absolute;
    overflow: hidden;
}
.pointable {
    cursor: pointer;
}
.flex {
    display: flex;
}
.flexwrap {
    display: flex;
    flex-wrap: wrap;
}
.flexcenter {
    display: flex;
    align-items: center;
    justify-content: center;
}
.flexspace {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    width: 100%;
}
.flexitem {
    display: flex;
    align-items: center;
}
.flexcol {
    display: flex;
    flex-direction: column;
}
.grid {
    display: grid;
}
.row-2{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.container {
    width: 96%;
    margin-inline: auto;
}
.gap-half{
    gap: .5em;
}
.gap-1{
    gap: 1em;
}
.gap-half-1{
    gap: 1.5em;
}

.input-box{
    display: flex;
    flex-direction: column;
    border: 2px solid var(--blue);
    background: var(--white);
    width: 100%;
    box-sizing: border-box;
    padding: .5rem 1rem;
    padding-bottom: .2rem;
    padding-top: 1rem;
    position: relative;
    margin-top: 1rem;
    border-radius: 20px 30px;
    color: var(--dark-gray);
    animation: to_bottom_fade .5s forwards;
}
.input-box.hide *,
.input-box.hide{
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: -1;
    opacity: 0;
    border-radius: 0;
}
.input-box label{
    position: absolute;
    top: -30%;
    left: 1rem;
    padding: .2rem .5rem;
    border-radius: 20px 30px;
    background: var(--grad-blue);
    color: var(--white);
    font-size: .9rem;
}
.input-box input,
.input-box select{
    background: transparent;
    padding: 0 .5rem;
    border: 0;
}
.title{
    height: max-content;
    background: var(--grad-blue);
    padding: .5rem 1rem;
    color: var(--white);
    border-radius: 20px 30px;
    width: inherit;
    grid-column: 1/-1;
}
.title *{
    font-weight: var(--fw3);
}
/*UTILITY CLASSES------------------------
 *  BACKGROUDS AND COLOURS
 *---------------------------------------*/
.bg-b{
    background: var(--night-blue);
}
.bg-o{
    background: var(--orange);
}
.bg-r{
    background: var(--red);
}
.bg-g{
    background: var(--green);
}
.bg-w{
    background: var(--white);
}
.cl-b{
    color: var(--night-blue);
}
.cl-o{
    color: var(--orange);
}
.cl-r{
    color: var(--red);
}
.cl-g{
    color: var(--green);
}
.cl-w{
    color: var(--white);
}
.desktop-hide{
    display: flex;
}
.centerp1{
    padding: 0 1rem;
}
/* --------------------------------------
 *          HEADER STYLES
 * --------------------------------------*/
header{
    width: 100vw;
    margin: 0;
    position: fixed;
    top: 0;
    background: var(--main-bg);
    opacity: 0;
    animation: to_bottom_fade .5s forwards;
    height: 160px;
    z-index: 2000;
}

/* HEADER STYLES--------------------------
 * HEADER TOP
 * --------------------------------------*/
.header-top{
    padding-bottom: 1rem;
    z-index: 5;
    opacity: 0;
    animation: to_bottom_fade .5s forwards;
    width: 100vw;
}
.header-top .wrapper{
    justify-content: space-between;
}
.header-top a{
    padding: .5rem;
}

/* HEADER STYLES--------------------------
 * HEADER NAV
 * --------------------------------------*/

.header-nav {
    padding: 0.5rem 0;
    z-index: 4;
    opacity: 0;
    animation: to_bottom_fade .5s forwards;
    width: 100vw;
}
.header-nav .wrapper .right{
    margin-left: auto;
}
.header-nav .logo {
    display: flex;
    align-items: flex-end;
    width: 11rem;
    height: 4rem;
    margin-right: 2rem;
    margin-left: 1rem;
    opacity: 0;
    animation: fade_in .5s forwards .3s;
}
.header-nav .logo img{
    width: inherit;
    height: 6rem;
}
.header-nav nav{
    position: absolute;
    left: -200px;
    border-radius: 1rem;
    width: 120px;
    top: 4rem;
    background: var(--white);
    border: 1px solid var(--dark-gray);
    display: flex;
    flex-direction: column;
    transition: .5s var(--cubic);
}
.header-nav nav.active{
    left: .5rem;
}
.header-nav nav ul{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.header-nav nav ul.detacheable{
    position: fixed;
    top: 4.2rem;
    border: 2px solid var(--light-gray);
    border-radius: .5rem;
    min-width: 150px;
    left: -300px;
    z-index: 5000;
    background: var(--white);
    transition: .5s var(--cubic);
}
.header-nav nav ul.detacheable.active{
    left: 1rem;
}
.header-nav nav li a{
    padding: .5rem;
    align-items: center;
    opacity: 0;
    animation: pop .5s forwards .3s;
}
.header-nav nav li a i{
    margin-right: .4rem;
    height: 2rem;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: var(--dark);
    opacity: .5;

}
.header-nav nav li a *{
    pointer-events: none;
}
.trigger  *{
    pointer-events: none;
}
.trigger i{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    aspect-ratio: 1/1;
    overflow: hidden;
    border: 1px solid;
    margin-left: .5rem;
    border-radius: 50%;
}

.header-nav .right li a i{
    font-size: 1.8rem;
    display: flex;
    width: 2.8rem;
    aspect-ratio: 1/1;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.header-nav .right li:last-child a i{
    background: var(--grad-red);
    color: var(--white);
}
.header-nav .right li a#notification,
.header-nav .right li a#shopping_cart{
    position: relative;
}
.header-nav .right li a#notification sup,
.header-nav .right li a#shopping_cart sup{
    position: absolute;
    right: 0;
    top: -.5rem;
    width: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    aspect-ratio: 1/1;
    background: var(--grad-red);
    color: var(--white);
    border: 1px solid var(--white);
}
.header-nav .right li a#notification sup{
    background: var(--grad-yellow);
}
/* HEADER STYLES--------------------------
 * HEADER MAIN
 * --------------------------------------*/
.header-main {
    background: var(--grad-blue);
    padding: 0.6rem 0;
    bottom: 0;
    z-index: 3;
    height: 3rem;
    opacity: 0;
    animation: to_bottom_fade 1s forwards;
}
.header-main .wrapper{
    justify-content: space-between;
}
.search-box{
    display: flex;
    align-items: center;
    background: transparent;
    overflow: hidden;
    height: 100%;
    opacity: 0;
    animation: to_right_fade 1s forwards .3s;
}

.search-box form{
    margin-left: auto;
    display: flex;
    border: 1px solid var(--white);
    height: 2.8rem;
    position: relative;
    width: 310px;
    background: var(--white);
    border-radius: 2rem;
    overflow: hidden;
}
.search-box form i{
    position: absolute;
    color: var(--dark-gray);
    top: 50%;
    transform: translateY(-50%);
    left: .5rem;
    z-index: 1;
    background: transparent;
}
.search-box form input{
    width: inherit;
    z-index: 2;
    border: 0;
    background: transparent;
    padding: .3rem 6rem .3rem 3rem;
    height: inherit;
}
.search-box form button{
    cursor: pointer;
    position: absolute;
    color: var(--white);
    right: 0;
    top: 0;
    bottom: 0;
    border: 0;
    width: 6rem;
    z-index: 3;
    background: var(--grad-yellow);
}
.header-main .left{
    position: relative;
    width: 300px;
    background: transparent;
    opacity: 0;
    animation: to_left_fade 1s forwards;
    z-index: 2000;
    transition: all .3s var(--cubic);
}

.filter-head{
    position: absolute;
    z-index: 2000;
    background: var(--grad-yellow);
    padding:  0.7rem 0.5rem;
    width: 2rem;
    height: 3px;
    overflow: hidden;
    border-radius: 7px 7px 0 0;
    color: var(--white);
    margin-bottom: -2.15rem;
    min-height: 2.5rem;
    justify-content: space-between;
    transition: .5s var(--cubic);
}
.filter-head .user_session{
    width: calc(100% - 2rem);
    display: flex;
    padding-left: 1rem;
    flex-direction: column;
    align-items: flex-start;
}
#aside_production{
    display: flex;
    margin-top: 1.5rem;
    border-radius: 1rem;
    flex-direction: column;
    border: 2px solid var(--light-gray);
    padding: .5rem;
}
#aside_production .production_section{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: .5rem;
    width: 0;
    height: 0;
    overflow: hidden;
}
#aside_production .production_section a{
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--light-gray);
    color: var(--dark);
    border-radius: 20px 30px;
    cursor: pointer;
    padding: .3rem .2rem;
    border: 2px solid var(--light-gray)

}
#aside_production .production_section a.active{
    background: var(--orange);
    color: var(--white);
}
.filter-trigger{
    cursor: pointer;
}
.filter-trigger *{
    pointer-events: none;
}
.filter-head.active{
    width: 275px; 
    position: absolute;
    z-index: 2000;
}
article,
aside{
    position: fixed;
    top: 4rem;
    left: -500px;
    width: 288px;
    height: auto;
    max-height: calc(100vh - 190px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: .5s var(--cubic);
    background: var(--white);
    z-index: 1;
}
article.active,
aside.active{
    left: 0;
    background: rgba(225, 225, 225, .7);
    z-index: 1;
}
article:hover,
aside:hover{
    overflow-y: auto;
}
article.active{
    z-index: 2;
    max-height: calc(100vh - 190px);

}
article{
    max-height: calc(100vh - 190px);
    position: fixed;
    padding: 1rem .5rem;
    padding-top: 3rem;
}
.m_links{
    display: flex;
    flex-direction: row;
    gap: .5rem;
    flex-wrap: nowrap;
    padding: .5rem 0;
    position: absolute;
    top: 0;
}
.m_links a{
    display: grid;
    grid-template-columns: 2rem 4.5rem;
    gap: .4rem;
    align-items: center;
}
.product_entry_form .row{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem;
}
.product_entry_form .row .input-box{
    min-width: 8rem;
}
.product_entry_form .row > div:first-child{
    grid-column: 1/-1;
}
.title_action{
    display: grid;
    grid-template-columns: auto 2rem 2rem;
    width: 100%;
    padding: .2rem;
    background: var(--dark);
    font-weight: var(--fw5);
    font-size: 1.5rem;
}
/*---------------------------------------
 *          SHOPING SECTION
 *---------------------------------------*/
.landing_section{
    background: url('../images/design/bg-img.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 200px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    z-index: 1;
}
.bg-styles{
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 200px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    z-index: 1;
}

.landing_section::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 8%;
    width: 300px;
    height: 100px;
    background: var(--dark-gray);
    z-index: 0;
    filter: blur(20px);
    opacity: 0.6;
}
.landing_section h4 {
    font-size: 13px;
    font-weight: var(--fw3);
    width: fit-content;
    padding: 4px 10px;
    background-color: var(--dark);
    color: var(--white);
    border-radius: 4px;
    z-index: 2;
}
.landing_section h3{
    font-weight: var(--fw3);
    color: var(--white);
    text-shadow: 2px 2px 0 var(--dark);
    z-index: 2;

}
.shopping .container.product_listing{
    margin-top: .5rem;
}
/*---------------------------------------
 *          SIDE BAR
 *---------------------------------------*/
.section{
    width: calc(100% - 15px);
    opacity: 0;
    animation: to_left_fade 1s forwards .3s;
    transition: all 1s linear;
    padding-top: .5rem;
}
.section .title > input{
    display: flex;
    justify-content: center;
    border-radius: 1rem;
    width: 3rem;
    padding: .2rem .5rem;
    border: 2px solid var(--light-gray);
    outline: none;
}
.section .title{
    display: grid;
    grid-template-columns: 4rem auto 4rem;
    align-items: center;
    border: 1px solid var(--light-background);
    color: var(--dark-gray);
    gap: .2rem;
    border-radius: 20px 30px;
    padding: .5rem;
    width: 275px;
    background: var(--main-bg);
    overflow: hidden;
    transition: .5s ease-in-out;

}
.section .title label,
.section .title i{
    display: flex;
    justify-content: center;
    background: transparent;
    pointer-events: none;
}
.section .title :nth-child(3){
    transform: rotate(45deg);
    pointer-events: all;
    cursor: pointer;
}
.section .title > form,
.section .title > div{
    display: flex;
    justify-content: space-between;
    height: 100%;
    align-items: center;
    font-size: 1rem;
    font-weight: var(--fw4);
    background: transparent;

}
.section .title > form input{
    width: 100%;
    outline: none;
    border: 0;
}
.section .title * {
    opacity: 0;
    animation: to_top_fade 1s forwards .5s;
}
.section-wrapper{
    border: 1px solid var(--light-background);
    margin-top: .5rem;
    min-height: 8rem;
    border-radius: 20px;
    width: 285px;
    overflow: hidden;
    background: var(--white);
    opacity: 0;
    animation: to_left_fade 1s forwards;
    position: relative;
}
.section .products,
.section .colors,
.options {
    width: 285px;
    height: auto;
    background: var(--main-bg);
    padding: 1rem 0;
}
.section .products > ul > li > a,
.section .colors > ul > li > a,
.options > ul > li > a {
    font-weight: var(--fw5);
    margin-top: 0.5em;
    display: flex;
}
.section .products > ul > li > a{
    padding: .5em;
}
.section .products > ul > li{
    width: 100%;
    position: relative;
}
.options > ul > li > a span{
    position: relative;
    width: 4rem;
    height: 2rem;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.options > ul > li > a span:first-child i{
    font-size: 1.5rem;
}
.products > ul > li > a span:last-child,
.options > ul > li > a span:last-child{
    position: absolute;
    right: .5rem;
}
.options > ul > li > a span b{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2rem;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: var(--dark-gray);
    color: var(--white);

}
.section .products > ul > li > a,
.section .colors > ul > li > a,
.options > ul > li > a {
    font-size: var(--font-small);
    align-items: center;
}
.section .products > ul,
.section .colors > ul{
    display: flex;
    flex-wrap: wrap;
    padding: 0 1rem;
}
.section .colors > ul > li{
    background: var(--light-background);
    margin-right: 0.5em;
    margin-top: 0.5em;
    min-width: 70px;
    flex: 1;
}
.section .colors > ul > li > a{
    padding: .5rem;
    margin-top: 0;
}
.section .colors > ul > li:last-child{
    margin-right: 0;
}
.section .colors > ul > li > a.active,
.section .colors > ul > li > a:hover,
.section .products > ul > li > a.active,
.section .products > ul > li > a:hover{
    background: var(--orange);
    color: var(--white);
}

/*SIDE BAR-------------------------------
 *  QUICK LINKS
 *---------------------------------------*/
#aside_quick_links .section-wrapper{
    gap: 0;
    padding: 0;
    min-height: auto;
}
.quick-links{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem;
    padding: .5rem;
}
.quick-links a{
    display: grid;
    grid-template-columns: 1.8rem auto;
    align-items: center;
    background: var(--white);
    border-radius: 20px 30px;
    cursor: pointer;
    padding: .3rem .2rem;
    border: 1px solid var(--light-background);
}
.quick-links a.active{
    background: var(--grad-yellow);
    color: var(--white);
}
.quick-links a i{
    width: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1/1;
    overflow: hidden;
    font-size: 1.5rem;
    pointer-events: none;
}
.quick-links a span{
    padding-left: .5rem;
    pointer-events: none;
}
/*---------------------------------------
 *          MAIN SECTION HOME PAGE
 *---------------------------------------*/
main{
    position: relative;
    width: inherit;
    height: 70vh;
    overflow: hidden;
}
main > *{
    overflow: hidden;
}
/*---------------------------------------
 *          SLIDER ON HOME PAGE
 *---------------------------------------*/
.slider{
    width: 100%;
    padding: 0;
    margin: 0;
}
.slider .container{
    width: 100%;
}
.slider .item {
    position: relative;
    height: 400px;
}
.slider .item::before {
    content: "";
    position: absolute;
    top: 30%;
    left: 8%;
    width: 400px;
    height: 300px;
    background: var(--white);
    z-index: 1;
    filter: blur(50px);
    opacity: 0.6;
}
.slider .text-content {
    position: relative;
    height: 100%;
    justify-content: center;
    padding: 5% 0 0 15%;
    z-index: 1;
}
.slider h4 {
    font-size: 13px;
    font-weight: var(--fw3);
    width: fit-content;
    padding: 4px 10px;
    background-color: var(--dark);
    color: var(--white);
    border-radius: 4px;
}
.text-content :where(h2, h3) span:first-child {
    font-weight: var(--fw3);
    color: var(--dark);
    text-shadow: 2px 2px 0 var(--white);
}
.text-content :where(h2, h3) span:last-child {
    font-weight: var(--fw3);
    color: var(--dark);
    text-transform: uppercase;
    letter-spacing: -1px;
    text-shadow: 2px 2px 0 var(--white);
}
.swiper-pagination .swiper-pagination-bullet {
    border: 2px solid var(--white);
    padding: 0.1rem;
    opacity: 1;
    background-color: var(--white);
}
.swiper-pagination .swiper-pagination-bullet-active {
    background-color: var(--dark-gray);
    border: 2px solid var(--white);
}
.swiper-button-next::after,
.swiper-button-prev::after {
    content: "\2190";
    padding: 0.5rem;
    color: var(--dark);
    background: rgba(255, 255, 255, .5);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    border-radius: 1rem;
}

/*---------------------------------------
 *          MAIN SECTION HOME PAGE
 *---------------------------------------*/
section{
    position: fixed;
    top: 150vh;
    left: 0;
    right: 0;
    bottom: 0;
/*    opacity: 0;*/
    transition: all .5s linear;
    z-index: 1 !important;
    width: 100vw;
    box-sizing: border-box;
    height: auto;
    overflow-x: hidden;
    background: var(--white);
    overflow-y: auto;
}
section.active{
    top: 160px;
/*    opacity: 1;*/
    z-index: 2 !important;
}
.action_button{
    display: flex;
}
.action_button a *{
    pointer-events: none;
}
.action_button span{
    display: flex;
}
.action_button a{
    color: var(--white);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: .5rem;
    border-radius: 1rem;
    background: var(--grad-yellow);

}
/*---------------------------------------
 *          BRANDS SECTION
 *---------------------------------------*/
.brands .container{
    padding: 0;
    margin: 0;
}
.brands .wrapper {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 1em 0;
}
.brands .wrapper > .brand{ 
    display: flex;
    position: relative;
    height: 4.5rem;
}
.brands .brand img {
    height: inherit;
    object-fit: cover;
    opacity: 0.7;
    transition: opacity 0.3s;
}
.brands .brand:hover img {
    opacity: 1;
}

/*---------------------------------------
 *          SEPERATOR SECTION
 *---------------------------------------*/
.section_sep{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 8rem;
    position: relative;
}
.section_sep::before,
.section_sep::after{
    content: "";
    top: 4.3rem;
    position: absolute;
    height: .2rem;
    background: var(--grad-blue);
    min-width: 280px;
}
.section_sep::before{
    left: 15%;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
}
.section_sep::after{
    right: 15%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
}
.section_sep h2{
    font-size: 2rem;
    font-weight: var(--fw3);
    text-shadow: 2px 2px 0 silver;
}
.section_sep span{
    font-size: 1.5rem;
    letter-spacing: -1px;
    color: var(--orange);
    opacity: .5;
}

/*---------------------------------------
 *          PRODUCT SECTION
 *---------------------------------------*/
.shopping .container.product_listing,
.featured_products .container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .5rem;
    justify-content: center;
    align-items: center;
}
.shopping .container.product_listing a.product,
.featured_products a.product{
/*    height: 330px;*/
    border: 1px solid var(--light-background);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 200px;
    margin: 0 auto;
    align-self: start;
    position: relative;
}
.shopping .container.product_listing a.product *{
    pointer-events: none;
}
.shopping .container.product_listing a.product span,
.featured_products a.product span{
    color: var(--dark-gray);
    padding: .5rem;
}
.shopping .container.product_listing a.product i,
.featured_products a.product i{
    position: absolute;
    right: 1rem;
    top: 190px;
    padding: .5rem;
    background: var(--white);
    color: var(--orange);
    border-radius: 50%;
}
.shopping .container.product_listing a.product b,
.featured_products a.product b{
    padding: 0 .5rem;
    font-weight: var(--fw3);
    color: var(--blue);
}
.shopping .container.product_listing a.product label,
.featured_products a.product label{
    color: var(--dark-gray);
    padding: .5rem;
    font-weight: var(--fw5);
}
.shopping .container.product_listing a.product .image,
.featured_products a.product .image{
    width: 100%;
    height: 250px;
}
.shopping .container.product_listing a.product img,
.featured_products a.product img{
    width: 100%;
    height: 100%;
    object-fit: cover;

}
.bunner{
    width: inherit;
    height: 40rem;
    background: var(--white);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    overflow: unset;
    position: relative;
}
.bunner .intro{
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 25rem;
    height: 100%;
}
.bunner .intro h1{
    font-size: 3.4em;
    letter-spacing: 1px;
    text-transform: capitalize;
    font-weight: 700;
    color: var(--gray);
    line-height: 1;
}
.bunner .intro h1 b{
    font-size: 3rem;
    font-weight: 400;
}
.bunner .intro h1 b span {
    color: var(--warning);
    font-size: .8em;
    letter-spacing: 1px;
}
.bunner .intro h3{
    font-size: 1.1rem;
    color: #727272;
    padding: 1.5rem 0;
    max-width: 25rem;
    font-weight: var(--fw4);
}
.bunner .intro .filter{
    padding: 1rem;
    background: var(--light);
    max-width: 30rem;
    border-radius: 55px;
    height: 4rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
}
.bunner .intro .filter label{
    color: var(--dark);
    padding: 0 .2rem;
}
.bunner .intro .filter a{
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    padding: .5rem 1rem;
    border-radius: 55px;
    color: var(--white);
    background: var(--grad-yellow);
}
.bunner .intro .stats{
    display: flex;
    justify-content: space-around;
    max-width: 30rem;
}
.bunner .intro .stats .box{
    padding: .5rem;
    font-size: 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #727272;
}
.bunner .intro .stats .box b{
    font-size: 2.5rem;
    font-weight: 700;
}
.bunner .intro .stats .box label{
    font-size: .95rem;
}
.bunner .show-case{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    overflow: hidden;
    object-fit: cover;
}
.bunner .show-case img{
    width: 100%;
    border-radius: 53% 48% 75% 25% / 66% 40% 50% 34% ;
    z-index: 1;
}
/* ____________________________________________________ARRIVALS___________ */
.arrivals{
    width: 100%;
    background: var(--main-bg);

    display: grid;
    grid-template-columns: 30rem auto;
    gap: 1rem;
}

.arrivals .left{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    max-width: 400px;
}
.arrivals .left .image{
    width: 20rem;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    object-fit: cover;
    position: relative;
    z-index: 1;
    background: var(--light);
    border-radius: 50%;
}
.arrivals .left .image::before{
    content: "";
    width: 18rem;
    aspect-ratio: 1/1;
    background: ghostwhite;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    z-index: 0;
}
.arrivals .left .image img{
    height: 100%;
    object-fit: cover;
    border: 2px solid var(--light);
    z-index: 1;
    border-radius: 50%;
}
.arrivals .left .color-palete{
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: .2rem;
    background: var(--light);
    min-width: 12rem;
    height: 5rem;
    align-self: flex-start;
    align-items: center;
    margin: auto 0;
    padding: .5rem 2.5rem;
    position: relative;
    left: -2rem;
    border-top-right-radius: 3rem;
    border-bottom-right-radius: 3rem;
    transform: rotate(-4deg);
}
.arrivals .left .color-palete :first-child{
    grid-column: 1/-1;
    padding: .5rem;
    font-size: 1rem;
    font-weight: 500;
    color: #727272;
}
.arrivals .left .color-palete::before{
    content: "";
    position: absolute;
    left: -1rem;
    right: 0;
    top: -1rem;
    background: var(--light);
    height: 3rem;
    transform: rotate(4deg);
    border-top-right-radius: 3rem;
}
.arrivals .left .color-palete :first-child{
    transform: rotate(4deg);
    margin-top: -2rem;
    z-index: 1;
}
.arrivals .left .color-palete span{
    display: flex;
    height: 1.5rem;
    aspect-ratio: 1/1;
    border: 1px solid var(--gray);
    border-radius: 50%;
    margin-top: -2rem;
    z-index: 1;
}
.arrivals .middle{
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .5rem;
    height: 100%;
}
.arrivals .middle h4{
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--gray);
    margin-bottom: 1.5rem !important;
}
.featured{

    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
    justify-content: center;
}
.featured .items .item-box .details h1,
.arrivals .middle h1{
    font-weight: 700;
    font-size: 1.5rem;
    text-transform: capitalize;
    color:#727272;
}

.featured .items .item-box .details label,
.clarification .clarification-det .details label,
.arrivals .middle label{
    display: flex;
    margin-top: 1rem;
    flex-direction: row;
    align-items: center;
    height: 2rem;
}
.featured .items .item-box .details span,
.clarification .clarification-det .details label span,
.arrivals .middle label span{
    padding: .1rem;
    color: var(--warning);
    font-size: 1.5rem;
}
.featured .items .item-box .details small,
.clarification .clarification-det .details label small,
.arrivals .middle label small{
    font-size: .9rem;
    color: var(--main-color-orange);
}
.featured .items .item-box .details h2,
.featured .items .item-box .details h2 sup,
.clarification .clarification-det .details h2,
.clarification .clarification-det .details h2 sup,
.arrivals .middle h2 sup,
.arrivals .middle h2{
    color: #727272;
    font-weight: 700;
}
.featured .items .item-box .details h2 b,
.clarification .clarification-det .details h2 b,
.arrivals .middle h2 b{
    font-size: 2rem;
    letter-spacing: 1px;
    font-weight: 900;
}
.featured .items .item-box .details a,
.clarification .clarification-det .details a,
.arrivals .middle a{
    width: 10rem;
    height: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 55px;
    color: var(--white);
    background: var(--warning);
}
.featured .items .item-box .details a b,
.clarification .clarification-det .details a b,
.arrivals .middle a b{
    font-size: 1rem;
    font-weight: 700;
}
.featured .items .item-box .details h2 a span,
.clarification .clarification-det .details a span,
.arrivals .middle a span{
    padding: .5rem;
    font-size: 1.5rem;
}


/* _______________________________________FEATURED________________________ */
.outlet_locations{
    padding-top: 1rem;
    background: var(--white);
    width: 100%;
    display: grid;
    grid-template-columns: auto 30rem;
}
.outlet_locations .items{
    display: flex;
    flex-direction: column;
}
.outlet_locations .items .item-box{
    display: grid;
    grid-template-columns: 300px auto;
}
.outlet_locations .items .item-box .details{
    display: flex;
    flex-direction: column;
    width: 380px;
}
.outlet_locations .items .item-box .details label{
    margin-bottom: 1rem;
}
.outlet_locations .items .item-box .details .imgs{
    display: flex;
    align-items: flex-end;
    height: 8rem;
    gap: .3rem;
}
.outlet_locations .items .item-box .details .imgs .img{
    width: 7rem;
    height: 8rem;
    border-radius: 1rem;
    background: var(--light);
    border: 1px solid var(--light);
    display: grid;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
}
.outlet_locations .items .item-box .details .imgs .img img{
    height: 8rem;
    object-fit: cover;
}
.outlet_locations .outlet_side{
    display: flex;
    flex-direction: column;
    position: relative;
}
.outlet_locations .outlet_side h4{
    font-size: 1.1rem;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--gray);
    margin: 1.5rem 0 !important;
}
.outlet_locations .outlet_side label{
    display: flex;
    align-items: center;
    padding: .3rem .5rem;
    cursor: pointer;
    transition: .5s var(--transition-cubic);
    margin-left: 0;
    color: #727272;
    position: relative;
}
.outlet_locations .outlet_side label::before{
    content: "";
    position: absolute;
    left: -1rem;
    border: 2px solid;
    padding: .5rem;
    background: transperant;
    border-radius: 50%;
    opacity: 0;
    transition: inherit;
}
.outlet_locations .outlet_side label::before,
.outlet_locations .outlet_side label:hover::before{
    opacity: 1;
}
.outlet_locations .outlet_side label,
.outlet_locations .outlet_side label:hover{
    margin-left: 1rem;
    color: var(--dark);
}
.outlet_locations .outlet_side label b{
    display: inline-block;
    min-width: 10rem;
    font-weight: 300;
    font-size: 1.2rem;
    pointer-events: none;
}
.outlet_locations .outlet_side label span{
    font-size: 2rem;
    opacity: .5;
    pointer-events: none;
}
/*---------------------------------------
 *          CONTACT SECTION
 *---------------------------------------*/
.contact{
    border-radius: 1.5rem;
}
.own-design{
    width: inherit;
    min-height: 25rem;
    padding: 3rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/design/bg-img.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-radius: 1.5rem;
    color: var(--white);
}
.contact_data{
    display: flex;
    flex-direction: column;
    margin-right: 3rem;
}
.contact_data label{
    display: flex;
    align-items: center;
}
.contact_data label span{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    aspect-ratio: 1/1;
    padding: .5rem;
    overflow: hidden;
}
.own-design .box{
    padding-top: 3rem;
    display: flex;
    flex-direction: column;
    width: 18rem;
}
.own-design .box > h1{
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 1px;
    margin-bottom: .5rem;
}
.own-design .box p{
    color: var(--white);
    padding: .5rem 0;
}
.own-design .work-hours{
    display: flex;
    flex-direction: column;
    padding: .5rem 2rem;
    height: 20rem;
    border: 1px solid;
    border-radius: .5rem;
}
.own-design .work-hours h1{
    padding: .5rem;
    font-size: 1.3rem;
    font-weight: 700;
}
.own-design .work-hours label{
    padding: .3rem 0;
    display: flex;
    justify-content: space-between;
    font-size: 1.1rem;
}

/*---------------------------------------
 *          ENTRY SECTION PAGE
 *---------------------------------------*/
.signin_form{
    display: flex;
    justify-content: center;
    height: auto;
    align-items: center;
    position: relative;
    box-sizing: border-box;
}

.login h1,
.login p{
    opacity: 0;
}
.login{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;

    height: calc(100vh - 110px);
    width: 100%;
}
.login{
    background: var(--white);
}
.login form{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 0;
    width: 250px;
}
.login form label{
    display: flex;
    width: 100%;
    border-bottom: 2px solid var(--blue);
    position: relative;
    padding: .3rem 0;
    margin-bottom: 1rem;
    opacity: 0;
    border-radius: 0;
}
.login form label i{
    position: absolute;
    right: 0;
    color: var(--blue);
    font-size: 1.5rem;
}
.login form label input{
    border: 0;
    width: calc(100% - 2rem);
    padding: .2rem;
    opacity: 0;
    background: transparent;
}
.login.active form label{
    animation: to_top_fade .3s forwards .3s;
}
.login form input[type="submit"]{
    background: var(--grad-blue);
    color: var(--white);
    padding: .5rem;
    border-radius: 2rem;
    opacity: 0;
}

.login > label,
    display: flex;
    width: 93%;
}
.login.active label{
    animation: to_top_fade .3s forwards .38s;
}
.login.active p{
    animation: to_top_fade .3s forwards .35s;
}
.login.active h1{
    animation: to_top_fade .3s forwards .3s;
}
.login.active input{
    animation: to_top_fade .3s forwards .4s;
}
.login label{
    padding: .3rem 1rem;
    display: grid;
    grid-template-columns: auto 2rem 2rem 2rem;
    align-items: center;
    background: var(--light-gray);
    border: 2px solid var(--light-gray);
    margin: .3rem 1rem;
    border-radius: 20px 30px;
}
.login > label > i{
    cursor: pointer;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    aspect-ratio: 1/1;
}
.login > label > i.active{
    background: var(--grad-yellow);
    color: var(--white);
}
.submit_btn{
    grid-column: 1/-1;
    width: 100%;
    padding: .5rem;
    border-radius: 3rem;
    color: var(--white);
    background: var(--grad-yellow);
}
.statistics{
    background: var(--light-gray);
    border-radius: 1rem;
    padding: 1rem;
    margin-top: 4rem;
    background: linear-gradient(to top, var(--dark-gray), var(--light-gray), var(--white));
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 150px;
    justify-content: flex-end;
}
.order_summery,
.transaction_summery{
    position: relative;
    margin-top: -4.5rem;
    padding: 1rem 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .5rem;
}
.order_summery .box,
.transaction_summery .box{
    border-radius: 10px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    min-width: 150px;
    background: var(--orange);
    color: var(--white);
    box-sizing: border-box;
}
.transaction_summery .box:nth-child(1){
    background: var(--green);
}
.transaction_summery .box:nth-child(2){
    background: var(--grad-yellow);
}
.transaction_summery .box:nth-child(3){
    background: var(--grad-blue);
}
.transaction_summery .box:nth-child(4){
    background: #e98df5;
}
.transaction_summery .box:nth-child(5){
    background: hotpink;
}
.transaction_summery .box:nth-child(6){
    background: #02e6ee;
}
.transaction_summery .box:nth-child(7){
    background: #ff5a3a;
}
.transaction_summery .box:nth-child(8){
    background: var(--grad-green);
}
.order_summery .box b,
.transaction_summery .box b{
    display: flex;
    width: 100%;
}
.order_summery .box span,
.transaction_summery .box span{
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--white);
    color: var(--dark);
    font-weight: var(--fw7);
    margin: .2rem 0;
    border-radius: 10px 15px;
}
.filter_inventory,
.filter_orders,
.filter_sales{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .2rem;
}
.filter_inventory h1,
.filter_orders h1,
.filter_sales h1{
    display: grid;
    grid-column: 1/-1;
    padding: 0 1rem;
}
.filter_sales h1{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
#export_items,
.filter_sales h1 a{
    display: grid;
    grid-template-columns: 2rem auto;
    padding: .3rem .5rem;
    border-radius: 20rem 30rem;
    background: var(--grad-blue);
    color: var(--white);
    font-size: 1rem;
    align-items: center;
    cursor: pointer;
    margin-right: 1rem;
}
#export_items *,
.filter_sales h1 a *{
    pointer-events: none;
}
.filter_inventory label,
.filter_orders label,
.filter_sales label{
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    min-width: 200px;
    background: var(--white);
}
.filter_inventory label.date_selectors,
.filter_orders label.date_selectors,
.filter_sales label.date_selectors{
    grid-column: 1/3;
    display: grid;
    grid-template-columns: auto 3rem auto;
    gap: 0;
}
.filter_inventory label.date_selectors span,
.filter_orders label.date_selectors span,
.filter_sales label.date_selectors span{
    text-transform: uppercase;
    text-align: center;
    font-weight: var(--fw7);
}
.filter_inventory label input,
.filter_inventory label select,
.filter_orders label select,
.filter_sales label select,
.filter_orders label input,
.filter_sales label input{
    display: flex;
    width: 100%;
    border: none;
    outline: none;
    padding: .2rem .5rem;
}
.filter_inventory label.date_selectors input,
.filter_orders label.date_selectors input,
.filter_sales label.date_selectors input{
    width: 92%;
}

.filter_inventory th label,
.table_container th label,
.table_container td label{
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: inherit;
}
.table_container th label span,
.table_container td label span{
    font-size: .2rem;
    cursor: pointer;
    color: inherit;
}
.table_container th label b,
.table_container td label b{
    font-size: 1rem;
    color: inherit;
}
.table_container table { 
    width: 100%; 
    border-collapse: collapse; 
}
.table_container tr{
    cursor: pointer;
    color: var(--dark);
}
.table_container tr:nth-of-type(even) { 
    background: var(--light-gray);
}
.table_container tr:hover{
    background: var(--grad-blue); 
    color: var(--white);
}
.table_container th { 
    background: var(--gorgonzola-blue); 
    color: var(--white); 
    font-weight: bold; 
}
.table_container td, .table_container th { 
    padding: 6px; 
    border-bottom: .2rem solid var(--light-gray);
    text-align: left; 
}
.table_container table tr td label.counter span,
.table_container table tr th label.counter span{
    font-size: 1.5rem;
}

.table_container{
    width: 100%;
    height: max-content;
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
    padding: 1rem;
}
.table_container table tr th label.counter,
.table_container table tr td label.counter{
    width: 2rem;
    text-align: center;
}
.table_container table tr th label.quantity,
.table_container table tr td label.quantity{
    width: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.table_container table tr td label.report_name,
.table_container table tr th label.report_name{
    width: 25rem;
}
.table_container table tr th label.short-fixed,
.table_container table tr td label.short-fixed{
    width: 8rem !important;
}
.table_container table tr th label.action{
    width: 4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.table_container table tr td label.action{
    width: 4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.table_container table tr th label.short-fixed.invoice_number,
.table_container table tr td label.short-fixed.invoice_number{
    width: 12rem !important;
}
.table_container table tr:hover td label.short-fixed,
.table_container table tr:hover td label.action *{
    color: var(--white) !important;
}
.table_container table tr th label input,
.table_container table tr th label input:disabled{
    border: 0 !important;
    background: transparent;
    color: inherit;
    border-color: transparent;
}
.info_container{
    box-sizing: border-box;
    width: 100%;
    background: var(--bg-main);
    border-radius: 1rem;
    padding: 1rem;
    opacity: 0;
    animation: to_bottom_fade .5s forwards 0s;
}
.info_title{
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    width: inherit;
    height: 5rem;
    padding: 1rem;
    opacity: 0;
    animation: to_bottom_fade 1s forwards .3s;
}
.info_title label{
    font-size: 1.2rem;
    font-weight: 700;
}
.clickables{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 3rem;
}
.clickable{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .3rem .5rem;
    width: 8rem;
    margin: 0 .2rem;
    cursor: pointer;
    border: 2px solid;
    border-radius: 5rem;
}
.clickable * {
    pointer-events: none;
}
.clickable b{
    padding: 0 .5rem;
    font-size: 1.1rem;
    color: inherit;
    font-weight: 600;
}
.clickable span{
    font-size: 2rem;
    color: inherit;
    width: 1.6rem;
    height: 1.6rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.table_container{
    width: 100%;
    height: max-content;
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
    padding: 1rem;
    min-height: 25rem;
}

.info_details{
    height: max-content;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    scroll-behavior: smooth;
}
/*---------------------------------------
 *          PRODUCT DETAILS
 *---------------------------------------*/
#details{
    display: flex;
    flex-direction: column;
    padding: .5rem;
    background: var(--white);
}
#details > b{
    padding: .3rem 1rem;
}
#details b.price{
    color: var(--orange);
    font-size: 1.5rem;
}
#add_to_cart * {
    pointer-events: none;
}
#details .product_image{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 18rem;
    overflow: hidden;
}
#details .description{
    padding: .3rem 1rem;
}
#details .product_image img{
    height: 80%;
    object-fit: contain;
    border-radius: 2rem;
}
#details .product_colors{
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    padding: .3rem 1rem;
}
#details .product_colors span{
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 5rem;
    border: 2px solid var(--light-gray);
    border-radius: 20px 30px;
    padding: .3rem .5rem;
    cursor: pointer;
}
#details .product_sizes{
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .3rem 1rem;
}
#details .product_sizes span{
    padding: .3rem;
    width: 5rem;
    height: 3rem;
/*    aspect-ratio: 1/1;*/
    border-radius: .5rem; /*50%;*/
    overflow: hidden;
    border: 2px solid var(--light-gray);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
#details .product_colors span.active,
#details .product_sizes span.active{
    background: var(--grad-blue);
    color: var(--white);
}

#details button{
    background: var(--orange);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 1rem);
    padding: 0 1rem;
    border-radius: 20px 30px;
    cursor: pointer;
}
#details button i{
    padding: .3rem 1rem;
    font-size: 2rem;
}
/*---------------------------------------
 *          CART DETAILS
 *---------------------------------------*/
.cart_items{
    padding: .5rem .8rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
}
.cart_items > span {
    margin: 0 1rem;
    padding: .5rem;
    background: var(--grad-yellow);
    color: var(--white);
}
.cart_items *{
    box-sizing: border-box;

}
.cart_item{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    max-height: 22rem !important;
    max-width: 35rem;
    overflow: hidden;
    padding: .8rem;
    background: var(--white);
    border-radius: 1rem;
    border: 1px solid #ccc;
    position: relative;
}
.remove_from_cart{
    position: absolute;
    top: 1rem;
    border-radius: .5rem;
    right: 1rem;
    font-size: 1.5rem;
    background: var(--grad-red);
    color: var(--white);
    cursor: pointer;
}
.cart_item_image{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    object-fit: contain;
    border-radius: .5rem;
    overflow: hidden;
}
.cart_item_image img{
    width: 100%;
    object-fit: contain;
}
.cart_item_general_info{
    display: flex;
    flex-direction: column;
    align-self: flex-end;
    gap: .3rem;
    padding-left: .5rem;
}
.cart_item_price{
    display: flex;
    flex-direction: column;
    gap: .3rem;
}
.cart_overall_price,
.cart_per_item_price{
    display: grid;
    grid-template-columns: 5rem auto;
    align-items: center;
}
.cart_overall_price label,
.cart_per_item_price label{
    position: relative;
    display: grid;
    grid-template-columns: 2rem auto;
    flex-direction: row;
    align-items: center;
    width: 8rem;
    overflow: hidden;
    background: var(--light-gray);
    border-radius: 1rem;
    padding: .3rem;
}
.cart_per_item_price label input{
    outline: none;
    border: 0;
    padding-left: 2rem;
    display: flex;
    width: 7rem !important;
    border-radius: 1rem;
    z-index: 1;
}
.cart_overall_price label span,
.cart_per_item_price label span{
    font-size: 1.5rem;
    position: absolute;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
    height: 2rem;
    aspect-ratio: 1/1;
    background: var(--light-gray);
    border-radius: 50%;
}
.cart_per_item_price > b,
.cart_overall_price > b{
    display: flex;
    width: 6rem;
}
.cart_overall_price b.total_price{
    display: flex;
    padding-left: 2rem;
    width: 8rem;
}
.cart_overall_price label small.carancy_symbol{
    font-size: .9rem;
    position: absolute;
    right: 0;
    left: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
    height: 2rem;
    aspect-ratio: 1/1;
}
.cart_quantity_adjuster{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}
.cart_quantity_adjuster label{
    display: grid;
    grid-template-columns: 2rem 2rem 2rem;
    width: 8rem;
    gap: 0;
    margin-left: 1rem;
}
.cart_quantity_adjuster label input{
    text-align: center;
    width: 2rem;
    border: 1px solid;
    border-color:  var(--light-gray) transparent  var(--light-gray) transparent;
}
.cart_quantity_adjuster label span{
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
    display: flex;
    width: 2rem;
    color: var(--white);
    cursor: pointer;
    font-size: 1.5rem;
}
.cart_quantity_adjuster label span:first-child{
    background: var(--grad-yellow);
}
.cart_quantity_adjuster label span:last-child{
    background: var(--grad-green);
}
.desc{
    grid-column: 1/-1;
    gap: .3rem;
    display: flex;
    flex-direction: column;
}
.desc textarea{
    border: 2px solid var(--light-gray);
    width: 100%;
    padding: .3rem;
    min-width: 100%;
    max-width: 100%;
}
.check_outs{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .2rem;
}
.billing_processing{
    display: flex;
    flex-direction: column;
    padding: 1rem;
}
.billing_processing > label{
    display: grid;
    grid-template-columns: auto 2rem 2rem;
    gap: 1rem;
    align-items: center;
    background: var(--light-gray);
    border: 2px solid var(--light-gray);
    margin: .5rem 0;
    border-radius: 20px 30px;
    padding: .3rem;
}
.surmmery{
    background: var(--orange);
    border-radius: 1rem;
    color: var(--white);
    padding: 1.5rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.surmmery span{
    display: flex;
    padding: .3rem 0;
}
.surmmery button{
    background: transparent;
    border-radius: 20px 30px;
    color: var(--white);
    border: 2px solid var(--white);
    font-weight: var(--fw5);
    padding: 0rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
    cursor: pointer;
}
.message{
    padding: .5rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.message span{
    background: var(--grad-blue);
    text-align: center;
    color: var(--white);
    padding: .5rem;
    border-radius: 1rem;
}
.product_limit{
    background: var(--light-gray);
    padding: .5rem;
}
.product_limit input{
    padding: .5rem;
    border: 0;
    background: var(--white);
}
.upload_csv{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .3rem .5rem;
    border: 2px solid;
    border-radius: 2rem;
    color: var(--white);
    background: var(--grad-blue);
}
#save * {
    pointer-events: none;
}
/*---------------------------------------
 *          DETAILS inventory_products
 *---------------------------------------*/
section.slide-container#details{
    right: 0;
    left: 0;
    bottom: 0;
    height: 80vh !important;
    min-height: 80vh !important;
    overflow: unset !important;
}
.order_summery,
.transaction_summery{
   /*display: flex;
    flex-direction: row;
    gap: 1rem;
    flex-wrap: wrap;
    flex: 1;*/
}
.inventory_products{
    display: grid;
    grid-template-columns: 1fr;
    position: relative;
    padding: 1rem 0;
    margin: 0;
    width: 100%;
    height: auto;
    min-height: calc(100% - 4rem);
    overflow-y: auto;
}
.inventory_products .product_selection_details{
    padding: 5rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: auto;
    min-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--white);
    opacity: 0;
    z-index: 0;
}
.inventory_products .product_selection_details.active{
    opacity: 1;
    z-index: 1;
}

}
.inventory_products .product_selection_details .product_image_display{
    display: flex;
    align-items: center;
    justify-content: flex-end;
/*    width: 100%;*/
    object-fit: cover;
    padding-top: 1rem;
}
.inventory_products .product_selection_details .product_image_display h1{
    position: absolute;
    top: 1rem;
    left: 1rem;
    font-weight: var(--fw7);
    color: var(--dark-gray);
    text-transform: uppercase;
    z-index: 2;
}
.inventory_products .product_selection_details .product_image_display img{
    z-index: 1;
    height: calc(60vh - 2rem);
}
.inventory_products .product_selection_details .summery{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    object-fit: cover;
    padding-top: 1rem;
}
.inventory_products .product_selection_details .summery > span{
    font-size: 2rem;
    padding: .5rem;
}
.inventory_products .product_selection_details .summery > span small{
    font-weight: var(--fw7);
    color: var(--orange);
}
.color_selection,
.size_selection{
    display: flex;
    flex-direction: column;
    padding: .5rem;
}
.size_list,
.color_list{
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 1rem 0;
}
.color_list span{
    position: relative;
    padding: .5rem;
    border-radius: 30px 20px;
    background: var(--light-gray);
    color: var(--dark);
    border: 1px solid var(--dark-gray);
    cursor: pointer;
}
.size_list span{
    padding: .5rem;
    width: 4rem;
    text-align: center;
    background: var(--light-gray);
    color: var(--dark);
    border: 1px solid var(--dark-gray);
    border-radius: 30px 20px;
    position: relative;
    cursor: pointer;
}
.color_list span sup,
.size_list span sup{
    background: var(--white);
    position: absolute;
    top: -1rem;
    right: -1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    aspect-ratio: 1/1;
    color: var(--orange);
    border-radius: 50%;
    border: 1px solid var(--dark-gray);
    font-weight: var(--fw4);
}
.color_list span.active,
.size_list span.active{
    background: var(--grad-blue);
    color: var(--white);
}
.color_list span *,
.size_list span *{
    pointer-events: none;
}

.user_details{
    display: grid;
    grid-template-columns: 1fr;
    padding: .5rem;
}
.highliter{
    display: flex;
    align-items: flex-end;
    width: 100%;
    height: 5rem;
    position: relative;
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('../images/design/bg-img.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 200px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    z-index: 1;
}
.highliter > label{
    position: relative;
    display: flex;
    width: 150px;
    aspect-ratio: 1/1;
    overflow: hidden;
    object-fit: contain;
    background: transparent;
    border: 0;
    margin-bottom: 1rem;
    cursor: pointer;
}
.highliter > label img{
    width: 150px;
    object-fit: cover;
    aspect-ratio: 1/1;
    border-radius: 50%;
    border: 4px solid var(--white);
    z-index: 1;
}
.highliter > label > span.image_display{
    position: absolute;
    z-index: 2;
    right: 2rem;
    padding: .5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    color: var(--dark);
}
.p_pic{
    display: flex;
    width: 4.5rem;
    aspect-ratio: 1/1;
    overflow: hidden;
    object-fit: contain;
    cursor: pointer;
    border-radius: 50%;
}
/*---------------------------------------
 *          RESPONSIVENESS
 *---------------------------------------*/
@media screen and (min-width: 650px) {
    .user_details{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .header-nav nav{
        position: relative;
        left: unset;
        top: unset;
        background: transparent;
        border-color: transparent;
        flex-direction: row;
        width: unset;
    }
    .header-nav nav ul.detacheable,
    .header-nav nav ul{
        position: relative;
        display: flex;
        flex-direction: row;
    }
    .desktop-hide{
        display: none;
    }
    .header-nav .logo {
        margin-left: 0;
    }
    .search-box form{
        width: 350px;
    }
    .inventory_products .product_selection_details{
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
    .cart_items{
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    }
}
@media screen and (min-width: 992px) {
    .container {
        padding: 0 2rem;
        width: 90%;
    }
    #aside_production .production_section{
        width: unset;
        height: unset;
    }
    article,
    article.active,
    aside,
    aside.active{
        background: var(--white);
    }

    .slider{
        gap: 0;
        margin: 0;
        padding: 0 ;
        padding: 1rem 0;
    }
    .slide-container{
        position: fixed;
/*        padding-left: calc(300px + 5%);product_list
product*/
/*        padding: 5%;*/
/*        width: calc(100vw - (350px + 5%));*/
        padding: 1rem 5%;
        width: 100vw;
        transform: .5s var(--cubic);
        right: 0;
        left: 0;
        padding-left: calc(300px + 5%);
    }
    .slide-container.max{
        padding: 1rem 5%;
/*        padding-left: 5%;*/

    }
    .slide-container > * {
/*        width: calc(100% - (350px + 5%));*/
    }
    .slide-container.max{
        position: fixed;
        padding-left: 0;
        width: 100vw;
        right: 0;
        left: 0;
        padding: 0 5%;
    }
    .slide-container.max .slider{
        padding: 0;
    }
    .shopping .container{
        padding: 0;
        width: 100%;

    }
    .slider .container{
        padding: 0;
    }

    .slider h4 {
        font-size: 16px;
    }
    .slider .text-content{
        font-size: 18px;
    }
    [class="btn"]{
        font-size: 13px;
    }
    .shopping .container.product_listing,
    .featured_products .container{
        padding: 0;
        width: 100%;
    }
}

@media screen and (min-width: 1500px) {

    .slider .item {
        height: 60vh;
    }

    .setting-section{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    }
}

/*---------------------------------------
 *          ANIMATION
 *---------------------------------------*/

@keyframes to_right{
    0%{
        left: -50%;

    }
    100%{
        left: 120%;

    }
}
@keyframes pop{
    0%{
        transform: scale(0);
        opacity: 0;
    }
    100%{
        transform: scale(1);        
        opacity: 1;
    }
}
@keyframes fade_in{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@keyframes to_top_fade{
    0%{
        transform: translateY(100%);
        opacity: 0;
    }
    100%{
        transform: translateY(0);        
        opacity: 1;
    }
}
@keyframes to_bottom_fade{
    0%{
        transform: translateY(-100%);
        opacity: 0;
    }
    100%{
        transform: translateY(0);        
        opacity: 1;
    }
}
@keyframes to_right_fade{
    0%{
        transform: translateX(100%);
        opacity: 0;
    }
    100%{
        transform: translateX(0);        
        opacity: 1;
    }
}
@keyframes to_left_fade{
    0%{
        transform: translateX(-100%);
        opacity: 0;
    }
    100%{
        transform: translateX(0);        
        opacity: 1;
    }
}

/*---------------------------------------
 *          MESSAGE/NOTIFICATION
 *---------------------------------------*/
.message_wrapper{
    position: fixed;
    top: 5rem;
    right: .2rem;
    z-index: 9000;
}
.message_wrapper :where(.column, .message_line){
    display: flex;
    align-items: center;
    position: relative;
}
.message_wrapper .message_line{
    width: 290px;
    list-style: none;
    border-radius: 4px;
    padding: 1rem;
    background: var(--white);
    justify-content: space-between;
    position: relative;
    margin: .2rem 0;
    border: 2px solid #e7ebf3;
    animation: show_modified_message .3s ease forwards;
}
.message_wrapper .message_line.hide{
    animation: hide_modified_message .3s ease forwards;
}
.message_wrapper .message_line > span{
    cursor: pointer;
    position: absolute;
    right: 5px;
    top: 0;
    padding: .5rem;
    color: var(--red);
}
.message_wrapper .message_line .column span{
    font-size: 1.75rem;
    padding-right: .3rem;
}

.message_wrapper .message_line .column .action {
    position: absolute;
    left: -3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 2rem;
    height: 3rem;
    width: 8rem;
    cursor: pointer;
    box-shadow: 2px 2px 4px rgb(0,0,0,.5);
}
.message_wrapper .message_line.success .column .action{
    background: var(--grad-green);
}
.message_wrapper .message_line.warning .column .action{
    background: var(--grad-yellow);
}
.message_wrapper .message_line.info .column .action{
    background: var(--grad-blue);
}
.message_wrapper .message_line.error .column .action{
    background: var(--grad-red);
}
.message_wrapper .message_line .column .action span,
.message_wrapper .message_line .column .action b{
    font-weight: 300;
    color: var(--white);
}
.message_wrapper .message_line .column .info{
    display: flex;
    flex-direction: column;
    width: 90%;
    padding-left: 6rem;
}
.message_wrapper .message_line.success b {
    color: var(--green);
}
.message_wrapper .message_line.info b {
    color: var(--blue);
}
.message_wrapper .message_line.warning b {
    color: var(--orange);
}
.message_wrapper .message_line.error b {
    color: var(--red);
}
.message_wrapper .message_line .column .info * {
    display: flex;
    align-items: center;
    width: 100%;
}
.message_wrapper .message_line::before{
    position: absolute;
    content: "";
    height: 3px;
    width: 100%;
    left: 0px;
    bottom: 0px;
    animation:  progress 60s linear forwards;
}
.message_wrapper .message_line.success::before{
    background: var(--grad-green);
}
.message_wrapper .message_line.info::before{
    background: var(--grad-blue);
}
.message_wrapper .message_line.warning::before{
    background: var(--grad-yellow);
}
.message_wrapper .message_line.error::before{
    background: var(--grad-red);
}
button.querySearch{
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    height: 1.5rem;
    cursor: pointer;
}
.query{
    background: var(--grad-yellow);
    padding: 0;
    border-color: var(--orange);
}
.query label{
    margin-top: 1.5rem;
    background: transparent;
    pointer-events: none;
}
button.querySearch i{
    margin-top: .5rem;
    height: unset;
    padding: 0;
    padding-left: 2rem;
    color: var(--white);
}

/* ************************************ PAGINATION ************************** */
.pagination_link{
    background: transparent;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 3rem;
    padding: 0 .5rem;
}
.pagination_link span{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border: 1px solid #ccc;
    background: var(--light-gray);
    color: var(--blue);
    cursor: pointer;
    border-radius: 50%;
    font-size: .9rem;
    margin: .1rem;
}
.pagination_link span.hide{
    display: none;
    pointer-events: none;
}
.pagination_link span:hover{
    background: var(--grad-blue);
    filter: brightness(150%);
    color: var(--white);
}
.pagination_link span.active:hover,
.pagination_link span.active{
    background: var(--grad-blue);
    color: var(--white);

}
.loader{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.5);
    z-index: 8000;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.loader span{
    display: flex;
    width: 5.5rem;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.loader span::before{
    content: "";
    position: absolute;
    left: -.5rem;
    right: -.5rem;
    top: -.5rem;
    bottom: -.5rem;
    border-radius: 50%;
    border: 5px solid;
    border-color: transparent var(--blue);
    background: transparent;
    animation: rotation .5s infinite;
}
@keyframes rotation{
    0%{
        transform: rotate(45deg);
    }
    15%{
        transform: rotate(90deg);
    }
    30%{
        transform: rotate(135deg);
    }
    45%{
        transform: rotate(180deg);
    }
    60%{
        transform: rotate(225deg);
    }
    75%{
        transform: rotate(270deg);
    }
    90%{
        transform: rotate(315deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
@keyframes progressrevense{
    100%{
        width: 0%;
    }
}
@keyframes progressforward{
    100%{
        left: 0%;
        right: 0%;
        width: 100%;
    }
}
@keyframes progress{
    100%{
        width: 0%;
    }
}
@keyframes show_modified_message{
    0%{
        transform: translateX(100%);
    }
    40%{
        transform: translateX(-5%);
    }
    80%{
        transform: translateX(0%);
    }
    100%{
        transform: translateX(-10%);
    }
}
@keyframes hide_modified_message{
    0%{
        transform: translateX(-10%);
    }
    40%{
        transform: translateX(0%);
    }
    80%{
        transform: translateX(-5%);
    }
    100%{
        transform: translateX(calc(100% + 12px));
    }
}
/*cart_items cancel add_to_cart input-box loader*/
/*transaction_summery*/