/* ENOFIRA FINAL HEADER FIX
   Built from the real tpl_header.php structure. */

/* Right-hand header container. */
.headLogoRightPartshow {
  position: relative !important;
  float: right !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto 260px !important;
  grid-template-rows: 34px 20px 32px !important;
  column-gap: 16px !important;
  row-gap: 0 !important;
  align-items: center !important;
  width: 720px !important;
  max-width: calc(100% - 340px) !important;
  height: 86px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

.headLogoRightPartshow > .clearBoth {
  display: none !important;
}

/* First row: email, currency and search. */
.headLogoRightPartshow .headerShowEmailbox {
  grid-column: 1 !important;
  grid-row: 1 !important;
  float: none !important;
  display: block !important;
  width: auto !important;
  height: 34px !important;
  line-height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  text-align: right !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

.headLogoRightPartshow .currency-change {
  position: relative !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  float: none !important;
  display: block !important;
  width: auto !important;
  height: 34px !important;
  line-height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  z-index: 20000 !important;
}

.headLogoRightPartshow .currency-change .lcurrence,
.headLogoRightPartshow .currency-change .topcurrencies,
.headLogoRightPartshow .currency-change #dollar {
  position: relative !important;
  display: block !important;
  height: 34px !important;
  line-height: 34px !important;
  margin: 0 !important;
  overflow: visible !important;
}

.headLogoRightPartshow .currency-change .pcurrence {
  top: 32px !important;
  left: 0 !important;
  right: auto !important;
  z-index: 30000 !important;
  background: #fffdfb !important;
  border: 1px solid #ddcec7 !important;
  box-shadow: 0 8px 22px rgba(38, 28, 32, .14) !important;
}

/* Search occupies the first row. */
.headLogoRightPartshow #headermiddeserach {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  float: none !important;
  grid-column: 3 !important;
  grid-row: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: 260px !important;
  height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

.headLogoRightPartshow #headersearchpart {
  position: relative !important;
  width: 260px !important;
  height: 34px !important;
  margin: 0 !important;
}

.headLogoRightPartshow #headersearchpart input[type="text"] {
  width: 260px !important;
  height: 34px !important;
  line-height: 34px !important;
  box-sizing: border-box !important;
}

/* Second row: keep the promotion, but make it compact. */
.headLogoRightPartshow .showWebDiscountCode {
  grid-column: 1 / 4 !important;
  grid-row: 2 !important;
  float: none !important;
  display: block !important;
  width: 100% !important;
  height: 20px !important;
  line-height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  text-align: right !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  font-size: 11px !important;
  letter-spacing: .02em !important;
}

/* Account and cart share one clean second row. */
.headLogoRightPartshow .headAccountInfobox {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  float: none !important;
  clear: both !important;
  grid-column: 1 / 4 !important;
  grid-row: 3 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 20px !important;
  width: 100% !important;
  height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* Put cart first, followed by Wishlist and Sign In. */
.headLogoRightPartshow .othermenuForShopCart {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  float: none !important;
  clear: none !important;
  display: block !important;
  flex: 0 0 auto !important;
  order: 1 !important;
  width: auto !important;
  min-width: 0 !important;
  height: 32px !important;
  line-height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  white-space: nowrap !important;
}

.headLogoRightPartshow .headsameFirstlevel {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  float: none !important;
  clear: none !important;
  display: flex !important;
  flex: 0 0 auto !important;
  order: 2 !important;
  align-items: center !important;
  gap: 18px !important;
  width: auto !important;
  height: 32px !important;
  line-height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  white-space: nowrap !important;
}

.headLogoRightPartshow .headsameFirstlevel > a,
.headLogoRightPartshow .headercartshow,
.headLogoRightPartshow .headercartnum,
.headLogoRightPartshow .headercartnum a.hecartlink {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  float: none !important;
  clear: none !important;
  display: block !important;
  width: auto !important;
  height: 32px !important;
  line-height: 32px !important;
  margin: 0 !important;
  white-space: nowrap !important;
  transform: none !important;
}

.headLogoRightPartshow .headercartdetails {
  top: 32px !important;
  right: 0 !important;
  left: auto !important;
  z-index: 99999 !important;
}

@media only screen and (max-width: 900px) {
  .headLogoRightPartshow {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: minmax(0, 1fr) auto 260px !important;
    height: 90px !important;
    margin: 0 auto !important;
  }

  .headLogoRightPartshow #headermiddeserach,
  .headLogoRightPartshow .headAccountInfobox {
    justify-content: center !important;
  }

  .headLogoRightPartshow .headerShowEmailbox {
    display: none !important;
  }
}

@media only screen and (max-width: 480px) {
  .headLogoRightPartshow .headAccountInfobox {
    gap: 10px !important;
    font-size: 11px !important;
  }

  .headLogoRightPartshow .headsameFirstlevel {
    gap: 10px !important;
  }

  .headLogoRightPartshow #headersearchpart,
  .headLogoRightPartshow #headersearchpart input[type="text"] {
    width: 220px !important;
    max-width: calc(100vw - 32px) !important;
  }

  .headLogoRightPartshow {
    grid-template-columns: auto 220px !important;
  }
  .headLogoRightPartshow .currency-change {grid-column: 1 !important}
  .headLogoRightPartshow #headermiddeserach {grid-column: 2 !important;width:220px!important}
  .headLogoRightPartshow .showWebDiscountCode,
  .headLogoRightPartshow .headAccountInfobox {grid-column:1 / 3!important}
}

/* Product detail: the old two fixed-width floats exceed the padded container.
   Use a real two-column layout based on tpl_product_info_display.php. */
#ProductInfoMainPage .proinfouppart {
  display: grid !important;
  grid-template-columns: minmax(0, 44fr) minmax(0, 56fr) !important;
  column-gap: 34px !important;
  align-items: start !important;
  width: 100% !important;
  margin: 0 0 50px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#ProductInfoMainPage .proinfolupartleft,
#ProductInfoMainPage .proinfolupartright {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  float: none !important;
  clear: none !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#ProductInfoMainPage .proinfolupartleft {
  grid-column: 1 !important;
}

#ProductInfoMainPage .proinfolupartright {
  grid-column: 2 !important;
}

#ProductInfoMainPage #productMainImage {
  float: none !important;
  width: 100% !important;
  max-width: 480px !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 10px !important;
  box-sizing: border-box !important;
}

#ProductInfoMainPage #productMainImage img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

#ProductInfoMainPage #productAdditionalImages {
  float: none !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 480px !important;
  margin: 15px auto 0 !important;
  padding: 0 !important;
}

#ProductInfoMainPage #productAdditionalImages .additionalImages {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}

#ProductInfoMainPage .infoNameAndListNextPre,
#ProductInfoMainPage .proinfoname_price,
#ProductInfoMainPage .atributs_addtocartbox,
#ProductInfoMainPage .attributesAndAddCartbox,
#ProductInfoMainPage .infoatributsleftbox,
#ProductInfoMainPage .infoadtocart_rightbox {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

#ProductInfoMainPage h2#productName,
#ProductInfoMainPage .infonamedetailspart h2#productName {
  font-size: 30px !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere !important;
}

#ProductInfoMainPage .addbuttunimg input[type="image"] {
  max-width: 100% !important;
  height: auto !important;
}

@media only screen and (max-width: 900px) {
  #ProductInfoMainPage .proinfouppart {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 30px !important;
  }

  #ProductInfoMainPage .proinfolupartleft,
  #ProductInfoMainPage .proinfolupartright {
    grid-column: 1 !important;
  }

  #ProductInfoMainPage h2#productName,
  #ProductInfoMainPage .infonamedetailspart h2#productName {
    font-size: 25px !important;
  }
}

@media only screen and (max-width: 520px) {
  #ProductInfoMainPage .proinfouppart {
    row-gap: 22px !important;
    margin-bottom: 32px !important;
  }

  #ProductInfoMainPage #productMainImage {
    padding: 6px !important;
  }

  #ProductInfoMainPage h2#productName,
  #ProductInfoMainPage .infonamedetailspart h2#productName {
    font-size: 22px !important;
  }
}

/* Desktop navigation dropdown: keep the parent hovered while the pointer moves
   from the top-level link into its submenu. */
@media only screen and (min-width: 901px) {
  .headercatmainshow,
  .headercatmainshow #navCatTabsWrapper,
  .headercatmainshow #navCatTabsWrapper ul.hairyiji {
    overflow: visible !important;
  }

  .headercatmainshow #navCatTabsWrapper ul.hairyiji > li.hairyijizi {
    position: relative !important;
    z-index: 10000 !important;
  }

  .headercatmainshow #navCatTabsWrapper ul.hairyiji > li.hairyijizi > ul.hairerji {
    top: 100% !important;
    bottom: auto !important;
    margin-top: -1px !important;
    pointer-events: auto !important;
    z-index: 10001 !important;
  }

  .headercatmainshow #navCatTabsWrapper ul.hairyiji > li.hairyijizi:hover > ul.hairerji,
  .headercatmainshow #navCatTabsWrapper ul.hairyiji > li.hairyijizi:focus-within > ul.hairerji,
  .headercatmainshow #navCatTabsWrapper ul.hairyiji > li.hairyijizi > ul.hairerji:hover {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .headercatmainshow #navCatTabsWrapper ul.hairyiji > li.hairyijizi > ul.hairerji li,
  .headercatmainshow #navCatTabsWrapper ul.hairyiji > li.hairyijizi > ul.hairerji a {
    pointer-events: auto !important;
  }
}