/** DEFAULT CSS  */
:root {
  --background-color: #111b33;
  --section-color: #1d273d;
  --div-color: #232b41;
  --nav-color: #2f374c;
  --border-color: #444b5d;

  --input-color: #343d51;
  --button-color: #0091ee;
  --text-input-color: #90949b;

  --price-color: #f75b5b;
  --stock-color: #38b76e;
  --stockLimite-color: #ea8013;

  /* ORANGE : #ffa938 */
  /* VIOLET : #9456b2 */
  --main-color: #005078;
  --second-color: #007cb8;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
}
html {
  scroll-behavior: smooth;
}
body {
  line-height: 1.5;
}
i,
button {
  cursor: pointer;
}
button,
input,
optgroup,
select,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

/** HEADER  */

#allHeader {
  color: whitesmoke;
}
#allHeader a {
  color: whitesmoke;
}
main {
  max-width: 1920px;
  margin: auto;
  background-color: var(--background-color);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flexClass {
  display: flex !important;
  flex-direction: column;
}

.blockClass {
  display: block !important;
}

.iconNavDiv {
  display: flex;
  align-items: center;
  width: 20%;
  justify-content: end;
}

.iconNav {
  padding: 7px;
  cursor: pointer;
}

#logoImg {
  height: 80px;
}

.logo i {
  color: var(--button-color);
}
.logo{
  width: 20%;
}
.iconNav:hover i {
  color: var(--text-input-color);
}

.sectionNav {
  display: flex;
  justify-content: center;
  width: 100%;
  background-color: var(--nav-color);
  padding: 0.5%;
}

.navTop {
  width: 95%;
  display: flex;
  justify-content: space-between;
  /* padding: 1% 0; */
  align-items: center;
}

#searchBar {
  width: 100%;
  border-radius: 5px;
  padding: 1%;
  background-color: whitesmoke;
}

.navTop i,
.iconBurger {
  font-size: 2em;
  padding: 0 5px;
}
.iconBurger {
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
}
.navTop a {
  color: #000;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.categoriesUl li {
  padding: 0.5%;
  list-style: none;
}

.categoriesUl a {
  text-decoration: none;
  color: white;
}

.categoriesUl li:hover {
  background-color: #0091ee;
  border-radius: 5px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #232b41;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  /* padding: 12px 16px; */
  z-index: 2;
  top: 2em;
  left: 0;
}
.dropdown-content li {
  padding: 2%;
  border-radius: 0px !important;
}
.dropdown-content > li > a {
  /* padding: 2%; */
  display: block;
  width: 100%;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.categoriesNav {
  background-color: #4b5d8d;
  width: 100%;
  display: flex;
  justify-content: center;
}

.categoriesUlDiv {
  width: 60%;
  /* margin: auto; */
}

.searchBarDiv {
  width: 60%;
  position: relative;
}

#searchResultsDesktopDiv {
  position: absolute;
  background-color: var(--border-color);
  display: none;
  z-index: 3;
  width: 99%;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  margin: 0;
  padding: 1%;
  left: 22, 5%;
  border: black 1px;
}

/* #searchResultsBurgerDiv {
  position: absolute;
  background-color: lightgreen;
  display: none;
  z-index: 3;
  width: 99%;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  margin: 0;
  padding: 1%;
  left: 22, 5%;
  border: black 1px;
}  */
/* .searchResultBurgerDivChecked{
  background-color: blue;
  position: absolute;
  margin: 0;
  padding: 0;
  top: 4em;
  left: 0;
  z-index: 2;
  width: 100vw;
  height: 100vh;
} */
#cartSpan {
  position: relative;
  padding-bottom: 0;
}
#cart-icon {
  width: 2.5em;
  /* fill: rgb(255, 255, 255); */
}
#cartSpan svg path,
#cartSpan svg g {
  fill: rgb(255, 255, 255) !important;
}
#cartSpan:hover svg path,
#cartSpan:hover #sumQuantity,
#cartSpan:hover svg g {
  color: var(--text-input-color) !important;
  fill: var(--text-input-color) !important;
}

#sumQuantity {
  color: whitesmoke;
  position: absolute;
  top: 0;
  left: 55%;
  transform: translateX(-50%);
  font-size: 0.8rem;
}
.resultsDiv {
  display: flex;
}

.resultsDiv:hover .resultsName {
  color: var(--button-color);
}

.resultsImg {
  width: 50px;
}

.resultsNameDescDiv {
  display: flex;
  flex-direction: column;
}

.resultsLink {
  text-decoration: none;
}

.resultsLink:hover {
  color: red;
}

.resultsName {
  font-weight: bolder;
  margin: 0;
}

.resultsDesc {
  font-size: 0.7em;
}

.categoriesUl {
  display: flex;
  justify-content: space-between;
  padding: 3px;
}

/* icon burger */
.iconBurger {
  display: inline-block;
  cursor: pointer;
  display: none;
}

#searchBarBurger {
  border-radius: 5px;
}

.bar1,
.bar2,
.bar3 {
  width: 25px;
  height: 3px;
  background-color: #fff;
  margin: 6px 0 !important;
  transition: 0.4s;
}

.change .bar1 {
  transform: translate(0, 9px) rotate(-45deg);
}

.change .bar2 {
  opacity: 0;
}

.change .bar3 {
  transform: translate(0, -9px) rotate(45deg);
}

.chevronRight,
.backToCategories,
.searchBarBurgerForm {
  display: none;
}

.dark-mode {
  background-color: whitesmoke;
  color: black;
}

/* fin icon burger */

.userIcon {
  position: relative;
  display: inline-block;
}
.userIcon:hover .userLink {
  display: block;
}

.userLink a {
  text-decoration: none;
  color: black !important;
}
.userLink {
  right: 0;
  display: none;
  flex-direction: column;
  position: absolute;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  z-index: 3;
  border-radius: 10px;
}

@media screen and (max-width: 1024px) and (min-width: 769px) {
  .searchBarDiv {
    width: 50%;
  }
  .iconNavDiv {
    width: 30%;
  }
}
@media screen and (max-width: 768px) {
  .iconBurger,
  .chevronRight,
  .backToCategories,
  .searchBarBurgerForm {
    display: block;
  }
  .logo {
    width: 30%;
  }
  .iconNavDiv {
    width: auto;
  }
  #cart-icon {
    width: 1.5em;
  }
  #logoImg {
    width: 100%;
    object-fit: contain;
  }
  .navTop i,
  .iconBurger {
    font-size: 1.5em;
  }
  .searchBarDiv,
  .categoriesNav,
  .dropdown:hover .dropdown-content {
    display: none;
  }

  .categoriesUl {
    flex-direction: column;
    justify-content: start;
    padding: 0 2%;
  }

  .searchBarBurgerDiv {
    padding: 1% 0% 0% 2%;
  }

  .categoriesNav {
    flex-direction: column;
    height: 100vh;
    justify-content: unset;
    z-index: 1;
    /* width: 100vw; */
    /* padding: 2%; */
  }

  .categoriesUlDiv {
    width: 100%;
    height: 100%;
    margin: auto;
  }

  .dropdown {
    display: flex;
    justify-content: space-between;
    position: initial;
  }

  .dropdown-content {
    height: 100vh;
    width: 100vw;
    top: 2.3em;
    left: 0;
    background-color: lightskyblue;
    padding: 0 2%;
  }

  .dropdown a {
    width: 45%;
  }

  .chevronRight {
    text-align: end;
  }

  .chevronRight,
  .backToCategories {
    cursor: pointer;
    width: 20%;
  }

  .backToCategories {
    text-align: start;
  }
  #sumQuantity {
    font-size: 0.6rem;
  }
}