:root{
  --after-content: '2';
}

header{
  padding: .5rem;
}

nav{
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  right: 0;
  left:0;
  padding: 1.5rem 1rem;
  background: rgb(255, 255, 255);
  box-shadow: 1px 1px 1px .5px rgba(147, 147, 147, 0.2);
  z-index: 1000;
}

#mobile{
  display: none;
}

ul li a{
  text-decoration: none;
  list-style: none;
}

.header__menu-logo{
  display: flex;
  list-style: none;
}

.header__logo{
color: rgb(59, 59, 59);
font-weight: 600;
}

.logo__number4{
  color: rgb(255, 135, 55);
}

.header__menu{
  display: flex;
  gap: 2rem;
  list-style: none;
  text-decoration: none;
}

.header__link a{
  color: rgb(50, 50, 50, .8);
  font-weight: 400;
}

.header__link a:hover,
.header__link a.active{
  color: rgb(255, 135, 55);
  font-weight: 500;
  transition: .15s;
}

.header__menu-right{
  display: flex;
  list-style: none;
}

.header__link-right{
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.header__search-icon:hover{
  opacity: .8;
  cursor: pointer;
}

.header__search-icon:active{
  opacity: 1;
}

.header__cart{
  text-decoration: none;
  color: rgb(50, 50, 50, .85);
  font-weight: 300;
  cursor: pointer;
  position: relative;
}

.header__cart:hover{
  opacity: .8;
}

.header__cart{
  opacity: 1;
  right: 0;
}


.cart__icon-quantity{
  font-size: 10px;
  width: 24px;
  background: rgb(255, 135, 55);
  color: white;
  font-weight: 900;
  border-radius: 50%;
  padding: 5px;
  position: absolute;
  bottom: 12px;
  left: 10px;
  opacity: .9;
  text-align: center;
  justify-content: center;
  
}

.fa-solid,
.fa-regular{
  color: rgb(50, 50, 50, .8);
}

#cart__menu{
  position: fixed;
  top: 0;
  right: -300px;
  width: 300px;
  min-height: 100vh;
  padding: 20px;
  background-color: white;
  transition: .7s;
}

#cart__menu.active{
  right: 0;
  box-shadow: 10px 20px 45px rgb(255, 135, 55, .25);
}

.cart__title{
  color: rgb(50, 50, 50, .85);
}

.cart__box{
  display: grid;
  grid-template-columns: 30% 50% 18%;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}

.cart__img{
  width: 100%;
  height: 100px;
  object-fit: contain;
  padding: 10px;
}

.cart__remove{
  color: rgb(255, 135, 55, .85);
  cursor: pointer;
}

.item__remove{
  cursor: pointer;
  color: red;
}

.details__box{
  display: grid;
}

.cart__quantity{
  border: 1px solid rgb(50, 50, 50);
  outline-color: rgb(255, 135, 55, .85);
  width: 2rem;
  text-align: center;
}

.total{
  display: flex;
  justify-content: flex-end;
  margin-top: .5rem;
  border-top: 1px solid rgb(50, 50, 50);
}

.total__title{
  font-size: 1rem;
  font-weight: 600;
  margin-top: .5rem;
}

.total__price{
  margin-left: .5rem;
  margin-top: .5rem;
}

.checkout__btn-div{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1rem;
}

.checkout__btn{
  width: 100%;
  cursor: pointer;
}

.checkout__btn:hover{
  background: inherit;
  color: black;
  font-weight: 600;
  border: 1px solid rgb(255, 135, 55);
  transition: .1s;
}

.close__cart{
  position: absolute;
  top: 22px;
  right: 10px;
  font-size: 2rem;
  cursor: pointer;
  color: rgb(255, 135, 55, .9);
}

.close__cart:hover{
  opacity: .7;
}

.search__container{
  width: 100%;
  height: 12vh;
  display: none;
  justify-content:center;
  align-self: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
  background-color: rgb(255, 255, 255);
  transition: 2s ease-in forwards;
}

.search__container.active{
display: flex;
transition: 2s ease-in forwards;
box-shadow: 1px -10px 45px rgba(50, 50, 50, 0.5);
}

.search__container form{
  width: 100%;
  display: flex;
  align-items: center;
}

.search__input{
  border: none;
  outline: none;
  box-shadow: none;
  width: 75%;
  font-size: 1rem;
  margin-left: 1rem;
  padding: 10px;
}


.search__icon{
  margin-left: 2rem;
  cursor: pointer;
}

.search__icon-close{
  cursor: pointer;
  margin-left: 1rem;
}



/* xs */
/* @media (max-width: 475px) {} */

/* sm */
@media (max-width: 640px) {

  #mobile{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.5rem;
  
  }


  #navbar{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2rem;
    list-style: none;
    text-decoration: none;
    position: fixed;
    top: 0;
    right: -200px;
    height: 100vh;
    width: 200px;
    background-color: white;
    padding: 80px 0 0 20px;
    transition: .7s ease-in forwards;
  }

  #navbar.active{
    right: 0;
    box-shadow: 10px 20px 45px rgb(22, 22, 122, .7);
    transition: 7s ease-in-out forwards;
    /* z-index: 2; */
  }


  .fa-magnifying-glass{
    display: none !important;
  }

.hamburger__menu-btn{
  margin-left: 1rem;
}

  .hamburger__btn{
    width: 20px;
    fill: rgb(50, 50, 50, .85);
    border-radius: 2px;
    position: relative;
    top: 4px;
    right: 0;
    left: 0;
    bottom: 0;
    transition: 1s ease-in forwards;
    cursor: pointer;
  }
  
  .hamburger__btn.close :is(.top, .bottom){
    y: 45;
  }
  
  .hamburger__btn.close .top{
    rotate: 45deg;
    fill: rgb(255, 135, 55, .85);
  }
  
  .hamburger__btn.close .middle{
    fill: rgb(255, 135, 55, .85);
    opacity: 0;
  }
  
  .hamburger__btn.close .bottom{
    rotate: -45deg;
    fill: rgb(255, 135, 55, .85);
  }
  
  .hamburger__btn .line{
    transition: 
    y 250ms ease-in 250ms,
    rotate 250ms ease-in,
    fill 1s,
    opacity 0ms 250ms;
    transform-origin: center;
  }
  
  .hamburger__btn.close .line{
    transition: 
    y 250ms ease-in,
    rotate 250ms ease-in 250ms,
    fill 1s,
    opacity 0ms 250ms;
  }

  .hamburger__btn.close{
  
    left: -150px;
  }
}



/* md */
@media (max-width: 768px) {
  #navbar{
    gap: 1.1rem;
  }
}

/* Lg */
/* @media (max-width: 1024px) {} */

/* xL */
/* @media (max-width: 1288px) {} */

/* 2xL */
/* @media (max-width: 1536px) {}   */