/*kdnToX(kdnToX) nav tag. navbar-kdnToX*/
.navbar-kdnToX {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;

  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;

  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;

  color: rgb(255, 255, 255);

  height: 48px;
  background: linear-gradient(rgb(25, 28, 32) 23%, rgba(25, 28, 32, 0));
  padding: 0; /*0px calc(1rem - 12px) 0px 1rem;*/
  top: 0px;
  width: 100%;
  z-index: 4;
}

/*
.navbar-kdnToX svg {
    display: block;
    fill: currentcolor;
}
*/

.navbar-kdnToX div.focus-lock {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;

  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;

  height: 100%;
}

@media (min-width: 768px) {
  .navbar-kdnToX {
    height: 64px;
  }
}

@media (min-width: 768px) {
  .navbar-kdnToX {
    height: 64px;
    padding: 0px calc(1.5rem - 12px) 0px 1.5rem;
  }
}

@media (min-width: 1024px) {
  .navbar-kdnToX {
    height: 72px;
    padding: 0px 1rem;
  }
}

/*fJvVHI(fJvVHI) nav tag. sticky-nav-fJvVHI*/
.sticky-nav-fJvVHI {
  background-color: rgb(24, 26, 29);
  position: sticky;
}

/*div tag. logo-section */
.logo-section {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;

  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;

  flex: 1 1 0%;
}

/* a tag. logo-link */
.logo-link {
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
}

/*gLYEcu(gLYEcu) svg tag. logo-svg-gLYEcu 
display when w < 768 px OR 1024 <= w < 1280 px
*/

/*
.logo-svg-gLYEcu {
    height: 28px;
    fill: rgb(255, 255, 255);
}

@media (min-width: 768px) {
    .logo-svg-gLYEcu {
        display: none;
    }
}

@media (min-width: 1024px) {
    .logo-svg-gLYEcu {
        display: block;
    }
}

@media (min-width: 1280px) {
    .logo-svg-gLYEcu {
        display: none;
    }
}
*/

/*euZINs(euZINs) svg tag. logo-svg-largeScreen-euZINs
display when 768 <= w < 1024 px OR w >= 1280 px;
*/

/*
.logo-svg-largeScreen-euZINs {
    width: 120px;
    display: none;
    fill: rgb(255, 255, 255);
}

@media (min-width: 768px) {
    .logo-svg-largeScreen-euZINs {
        display: block;
    }
}

@media (min-width: 1024px) {
    .logo-svg-largeScreen-euZINs {
        display: none;
    }
}

@media (min-width: 1280px) {
    .logo-svg-largeScreen-euZINs {
        display: block;
    }
}
*/

.zoharn-logo-img {
  width: 240px;
  height: auto;
}

@media (max-width: 800px) {
  .zoharn-logo-img {
    margin-left: 10px;
    width: 150px;
    height: auto;
  }
}

/* Below 1024px of screen width, the .navbar-textbutton-display-wrapper will disappear */
.navbar-textbutton-display-wrapper {
  display: none;
}

@media (min-width: 1024px) {
  .navbar-textbutton-display-wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}

/* div tag. navbar-textbutton-flex */
.navbar-textbutton-flex {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 0%;
  -ms-flex: 1 1 0%;
  flex: 1 1 0%;
  position: relative;
}

@media (min-width: 1280px) {
  .navbar-textbutton-flex {
    padding: 0 0 0 2rem;
  }
}

/* navbar-productsMenuList */
.navbar-productsMenuList {
  margin: 0px auto;
  height: 56px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

/* navbar-productsMenu-span */
.navbar-productsMenu-span {
  position: inherit !important;
}

.navbar-productsMenu-span::before {
  content: "";
  display: block;
  position: absolute;
  width: 0px;
  height: 0px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid rgb(255, 255, 255);
  bottom: -25px;
  left: 50%;
  transform: rotate(90deg);
  opacity: 0;
}

/*gDRBgt(gDRBgt) button tag. navbar-productsMenu-gDRBgt */
.navbar-productsMenu-gDRBgt {
  font-weight: 700;
  font-family: "Microsoft Yahei", brandon-grotesque, sans-serif;
  letter-spacing: 0.1em;
  line-height: 1.375em;
  text-transform: uppercase;
  font-size: 12px;
  position: relative;
  color: rgb(255, 255, 255);
  width: auto;
  height: 56px;
  padding: 0px 16px;
  display: inline-block;
  cursor: pointer;
  transition-property: all;
  transition-duration: 250ms;
  transition-timing-function: ease;

  background-color: transparent !important;
  border-color: transparent !important;
  width: auto !important;
  height: 56px !important;
  padding: 0px 16px !important;
}

@media not all, (pointer: fine), not all, not all {
  .navbar-productsMenu-gDRBgt:hover {
    color: rgb(168, 172, 177);
  }
}

.navbar-productsMenu-gDRBgt div {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.navbar-productsMenu-gDRBgt svg {
  pointer-events: none;
  transition-property: transform;
  transition-duration: 250ms;
  transition-timing-function: ease;
  fill: rgb(168, 172, 177) !important;
  margin: -2px 0px 0px 3px !important;
}

@media (min-width: 1280px) {
  .navbar-productsMenu-gDRBgt {
    font-weight: 700;
    font-family: "Microsoft Yahei", brandon-grotesque, sans-serif;
    letter-spacing: 0.1em;
    line-height: 1.375em;
    text-transform: uppercase;
    font-size: 14px;
  }
}

/* down-arrow-icon */
.down-arrow-icon {
  overflow: visible;
  transform: rotate(270deg);
}

/*navbar-productLink-without-menu */
.navbar-productLink-without-menu::after {
  content: none;
}

/*navbar-productLink-style-wrapper */
.navbar-productLink-style-wrapper {
  font-weight: 700;
  font-family: "Microsoft Yahei", brandon-grotesque, sans-serif;
  letter-spacing: 0.1em;
  line-height: 1.375em;
  text-transform: uppercase;
  font-size: 12px;
  position: relative;
  color: rgb(255, 255, 255);
  width: auto;
  padding: 0px 16px;
  cursor: pointer;
  transition-property: all;
  transition-duration: 250ms;
  transition-timing-function: ease;
}

@media (min-width: 1280px) {
  .navbar-productLink-style-wrapper {
    font-size: 14px;
  }
}

@media (pointer: fine) {
  /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer */
  .navbar-productLink-style-wrapper:hover {
    color: rgb(168, 172, 177);
  }
}

.navbar-productLink-style-wrapper::before {
  content: "";
  display: block;
  position: absolute;
  width: 0px;
  height: 0px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid rgb(255, 255, 255);
  bottom: -8px;
  left: calc((100% - 16px) / 2);
  transform: rotate(90deg);
  opacity: 0;
}

.navbar-productLink-style-wrapper div {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.navbar-productLink-style-wrapper span {
  position: relative;
}

.navbar-productLink-style-wrapper span::after {
  color: rgb(255, 255, 255);
  transition-property: opacity;
  transition-duration: 250ms;
  transition-timing-function: ease;
  border: 1px solid currentcolor;
  border-radius: 1px;
  background: currentcolor;
  content: "";
  height: 2px;
  width: 100%;
  left: 0px;
  opacity: 0;
  position: absolute;
  top: calc(50% + 12px);
}

.navbar-productLink-style-wrapper span.active::after,
.navbar-productLink-style-wrapper span:active::after {
  /* when right click span, the :after element shows, which is a white line */
  opacity: 1;
}

/* when w >= 1024 px, display is list-item, otherwise display is none */
.hideListItemWhenLess1024 {
  display: none;
}

@media (min-width: 1024px) {
  .hideListItemWhenLess1024 {
    display: list-item;
  }
}

/* when w >= 1024 px, display is none, otherwise display */

@media (min-width: 1024px) {
  .showListItemWhenLess1024 {
    display: none;
  }
}

/* div tag. navbar-svgbutton-flex */
.navbar-svgbutton-flex {
  /*flex: 1 1 0%; */
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

/* ul tag. navbar-svgbutton-ul */
.navbar-svgbutton-ul {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  height: 100%;
}

.navbar-svgbutton-ul > li {
  height: 100%;
}

@media (min-width: 1024px) {
  .navbar-svgbutton-ul > li:not(:first-child) {
    margin-left: 1.5rem;
  }
}

.navbar-svgbutton-ul button {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100%;
  width: calc(2rem + 24px);
  cursor: pointer;
}

.navbar-svgbutton-ul button svg {
  height: 1.75rem;
  pointer-events: none;
  width: 1.75rem;
  fill: none;
}

@media (min-width: 768px) {
  .navbar-svgbutton-ul button svg {
    height: 2rem;
    width: 2rem;
  }
}

@media (min-width: 1024px) {
  .navbar-svgbutton-ul button {
    width: 2rem;
  }
}

/* navbar-svgbutton-iemeqy */
.navbar-svgbutton-iemeqy {
  position: relative;
}

/*DCMqf(DCMqf) div tag. fullwidth-container-DCMqf */
.fullwidth-container-DCMqf {
  display: block;
  width: 100%;
}

/*kbbWQF(kbbWQF) svg tag. overflow-visibile-kbbWQF */
.overflow-visibile-kbbWQF {
  overflow: visible;
}

/*gPAwpd(gPAwpd) div tag. navbar-cart-container-gPAwpd */
.navbar-cart-container-gPAwpd {
  position: relative;
  width: auto;
}

.navbar-cart-container-gPAwpd svg {
  fill: none;
  display: block;
}

/*div tag. viewport-background */
.viewport-background {
  content: "";
  background: linear-gradient(rgb(25, 28, 32), rgba(25, 28, 32, 0) 69%);
  position: absolute;
  height: 100vh;
  width: 100vw;
  top: 0px;
  left: 0px;
  transition: opacity 200ms ease 0s;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}

/*eTZRTO(eTZRTO) main tag. main-flex-eTZRTO it is below the sticky navbar*/
.main-flex-eTZRTO {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.navbar-kdnToX + * {
  margin-top: -48px;
}

@media (min-width: 768px) {
  .navbar-kdnToX + * {
    margin-top: -64px;
  }
}

@media (min-width: 1024px) {
  .navbar-kdnToX + * {
    margin-top: -72px;
  }
}

/*

If use rem, the style will go wrong if the browser's default font is not default since the unit is in rem.

.navbar-kdnToX + * {
    margin-top: -3rem;
}

@media (min-width: 768px) {
    .navbar-kdnToX + * {
        margin-top: -4rem;
    }
}

@media (min-width: 1024px) {
    .navbar-kdnToX + * {
        margin-top: -4.5rem;
    }
}
*/