.vz1s_ {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  gap: 1rem;
}

.Jv15a {
  /* display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: var(--rootContainerHeight);
  padding: 1rem;
  margin: 0.5rem;
  gap: 0.5rem; */
}

* {
  font-family: var(--globalFontFamily);
}

.KI9tY {
  font-size: 12px;
  color: red;
  margin-left: 2px;
  margin-top: 5px;
}

.QUkiE {
  white-space: pre-wrap;
  font-size: 12px;
  color: red;
  font-weight: 500;
}

.O8gYp {
  border-radius: var(--addToCartBtnBorderRadius);
  background: var(--addToCartBtnBgColor);
  color: var(--addToCartBtnLabelColor);
  font-size: var(--addToCartBtnFontSize);
  height: var(--addToCartBtnHeight);
  text-align: var(--addToCartBtnTextAlignment);
  border: 1.5px solid var(--addToCartBtnBorderColor);
  padding: 0.25rem 0.75rem;
  cursor: pointer;
  font-weight: 400;
  word-wrap: break-word;
  margin-bottom: 8px;
  width: var(--addToCartBtnWidthPercentage);
}

.O8gYp:hover {
  background-color: var(--addToCartBtnHoverBgColor);
  color: var(--addToCartBtnLabelHoverColor);
}

._wyfZ {
  width: 22px;
  height: 22px;
}

._wyfZ circle {
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 90 150;
  stroke-dashoffset: 0;
}

.cP9ij {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.zkxh3 {
  border-radius: var(--selectVariantBtnBorderRadius);
  background: var(--selectVariantBtnBgColor);
  color: var(--selectVariantBtnLabelColor);
  font-size: var(--selectVariantBtnFontSize);
  height: var(--selectVariantBtnHeight);
  text-align: var(--selectVariantBtnTextAlignment);
  border: 1.5px solid var(--selectVariantBtnBorderColor);
  padding: 0.25rem 0.75rem;
  cursor: pointer;
  font-weight: 400;
  word-wrap: break-word;
  margin-bottom: 8px;
  width: 90%;
}

.zkxh3:hover {
  background-color: var(--selectVariantBtnHoverBgColor);
}


.IXMRz {
  width: fit-content;
  display: flex;
  flex-direction: column;
}

.epI8w {
  width: fit-content;
  display: flex;
  flex-direction: row;
  padding: var(--cardPadding);
  margin: var(--cardMargin);
  box-shadow: var(--cardBoxShadow);
  border: 1px solid var(--cardBorderColor);
  border-radius: var(--cardBorderRadius);
  background-color: var(--cardBackgroundColor);
}

.I9JW2 {
  width: fit-content;
  display: flex;
  flex-direction: row-reverse;
  padding: var(--cardPadding);
  margin: var(--cardMargin);
  border: 1px solid var(--cardBorderColor);
  box-shadow: var(--cardBoxShadow);
  border-radius: var(--cardBorderRadius);
  background-color: var(--cardBackgroundColor);
}

.TyDMt {
  padding: 20px;
  position: sticky;
  top: 0px;
}

.TyDMt > .q3zIE {
  overflow: auto;
  margin: 0px 30px;
}

@media screen and (max-width: 500px) {
  .TyDMt {
    padding: 0;
  }
  
  .TyDMt > .q3zIE {
    margin: 0;
  }
}

.q3zIE {
  display: flex;
}

.oSm5M {
  grid-column-gap: 15px;
}

.vwcEf {
  position: relative;
  padding-top: 1rem;
}

.Rjdul {
  position: absolute;
  cursor: pointer;
  right: 2px;
  top: 2px;
}

#jkarE {
  height: 100%;
}

.OipA8 {
  height: 100%;
  width: 100%;
}

.hk0Qb {
  display: flex;
  flex-grow: 1;
  height: 100%;
}

.ZVO4c {
  display: flex;
  flex-grow: 1;
  margin: 0.5rem;
}

.IIrwk {
  flex-grow: 1;
}

.q3zIE {
  display: flex;
}

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

.AwD2a {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

.xN1OD {
  margin: 0px 10px 0px 30px;
}

@media screen and (max-width: 500px) {
  .xN1OD {
    margin: 0px 10px 0px 10px;
  }
}

.I9vAB {
  flex: 0 0 calc(18% - 10px);
  position: relative;
  margin-bottom: 15px;
  padding: var(--cardPadding);
  margin: var(--cardMargin);
  border: 1px solid var(--cardBorderColor);
  box-shadow: var(--cardBoxShadow);
  border-radius: var(--cardBorderRadius);
  background-color: var(--cardBackgroundColor);
}

.L5t2G {
  position: relative;
  display: flex;
  justify-content: center;
  margin: auto;
  width: 100%;
  overflow: hidden;
  border-radius: var(--cardBorderRadius) var(--cardBorderRadius) 0 0;
}

.IXMRz .L5t2G {
  background-color: var(--cardBackgroundColor);
}

.L5t2G .F2jnU {
  height: var(--imageHeight) !important;
  object-fit: contain;
  max-width: calc(var(--imageHeight) * 0.819) !important;
}

.L5t2G img:not(.F2jnU) {
  height: var(--imageHeight) !important;
  object-fit: fill;
  width: 100%;
  overflow: hidden;
}

.aBo4O {
  position: absolute;
  top: 12px;
  z-index: 10;
  cursor: pointer;
}

.ywSlA {
  position: absolute;
  top: 12px;
  z-index: 10;
  cursor: pointer;
}

.FEwB8 {
  transition: fill 0.2s ease;
  border: #000
}

.FEwB8:hover {
  border: #fff;
  fill: var(--wishlistIconHoverColor) !important; /* hover color */
}

.xkVdo {
  width: fit-content;
  flex-direction: column;
  justify-content: start;
  flex-wrap: nowrap;
  display: flex;
  align-content: center;
  padding-left: var(--contentBoxLeftPadding);
  padding-top: var(--contentBoxTopPadding);
  padding-right: var(--contentBoxRightPadding);
  padding-bottom: var(--contentBoxBottomPadding);
  margin: var(--contentBoxMargin);
}

.xkVdo.yFCtL {
  flex-direction: row;
  margin: 4px;
}

.vz_99 {
  margin-top: 2px;
  display: flex;
  align-items: center;
}

.vz_99 span {
  margin-top: -2px;
  margin-right: 2px;
  margin-left: 2px;
  display: flex;
}
.vz_99 span .NBe7v {
  margin-left: -2.5px;
}

.vz_99 span .VKVP3 {
  margin-top: -3.4px;
  margin-left: -3.8px;
}

.vz_99 .y4hwp {
  font-size: var(--totalRatingCountFontSize);
  color: var(--totalRatingCountFontColor);
}

.dXY6A {
  font-size: var(--namebrandSize);
  /* line-height: 17px; */
  /* color: var(--namebrandColor); */
  white-space: var(--breakWhiteSpace);
  line-height: 1;
  overflow: var(--overflowVisible);
  text-overflow: ellipsis;
  width: var(--nameWidth);
  text-align: var(--productNameAlignment);
  font-weight: 400;
  margin: 0;
  margin-top: 5px;
}

.pmWVs {
  display: -webkit-box;
  min-width: var(--nameWidth);
  width: var(--nameWidth);
  max-width: 100%;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--noOfLines);
  height: calc(var(--noOfLines) * var(--namebrandSize));
}

.wYYZC {
  width: var(--nameWidth);
  min-width: var(--nameWidth);
}

.dXY6A._EPta span {
  display: inline;
}

.dXY6A._EPta span.b5z_R {
  margin-top: 6px;
}

.dXY6A .rQaV3 {
  margin: 0px 3px;
  color: var(--nameproductColor);
}

.HJY8c {
  font-weight: var(--brandFontWeight);
  color: var(--namebrandColor);
}

.b5z_R {
  color: var(--nameproductColor);
}

.GFfh2 {
  font-size: var(--pricefontSize);
  margin-top: 5px;
  font-weight: 600;
  text-align: var(--priceAligment);
  font-weight: var(--priceFontWeight);
}

.GFfh2 .O_Dzk {
  text-decoration: line-through;
}

.GZnQK {
  margin-top: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qDFqW {
  display: block;
  font-weight: 400;
  font-size: var(--highlightfontSize);
  color: var(--highlightColor);
  margin-top: var(--highlightMarginTop);
  border-bottom: var(--highlightBorderBottom) solid #e0e0e0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  min-height: 17px;
}

.hRewY {
  float: left;
  display: flex;
  align-items: center;
  visibility: var(--leftArrowVisibility);
  position: absolute;
  left: 2.5%;
  top: 50%;
  z-index: 10;
  cursor: pointer;
  margin-left: 3px;
}

@media screen and (max-width: 500px) {
  .hRewY {
    display: none !important;
  }
}

._pF2H {
  float: left;
  overflow: auto;
  white-space: nowrap;
  width: 100%;
}
@media screen and (max-width: 500px) {
  ._pF2H {
    padding: 0 1rem;
    float: left;
    overflow: auto;
    white-space: nowrap;
    width: 100%;
  }
}

.eFkrO {
  align-items: center;
  visibility: var(--rightArrowVisibility);
  position: absolute;
  right: 0%;
  top: 50%;
  z-index: 10;
  cursor: pointer;
  margin-right: 3px;
}

@media screen and (max-width: 500px) {
  .eFkrO {
    display: none !important;
  }
}

.PVBrn {
  background-color: #fff0 !important;
  left: 10px !important;
  border-radius: unset !important;
  box-shadow: none !important;
  margin-left: 0 !important;
}

.joKzc {
  border-radius: 50%;
  box-shadow:
    rgb(17 17 26 / 5%) 0px 1px 0px,
    rgb(17 17 26 / 10%) 0px 0px 8px;
  background: #fff;
}

.pDj1a {
  background-color: #fff0 !important;
  right: 10px !important;
  border-radius: unset !important;
  box-shadow: none !important;
  margin-right: 0 !important;
}
.mVt4d {
  transform: rotate(180deg);
  /* .arrow:hover {
    box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset,
      rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
  } */
  /* .left-arrow {
    margin-left: 3px;
  } */
}

/* margin-right: 3px; */
.sYUab {
  visibility: hidden;
}

.tL7x1 {
  display: contents;
}

#eIQ5I {
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  scrollbar-width: none; /* Firefox */
}

#eIQ5I::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}

.y4hwp {
  font-size: var(--reviewFontSize);
  color: var(--reviewFontColor);
}

.vz_99 .zPe10 {
  font-size: var(--ratingAverageFontSize);
  color: var(--ratingAverageFontColor);
  font-weight: 600;
}

.vz_99 .zJ4e0 {
  font-size: var(--totalRatingCountFontSize);
  color: var(--totalRatingCountFontColor);
}

.dXY6A .rQaV3 {
  margin: 0px 3px;
  color: var(--nameproductColor);
}

.HJY8c {
  font-weight: var(--brandFontWeight);
  color: var(--namebrandColor);
}
.b5z_R {
  color: var(--nameproductColor);
}
.GFfh2 {
  font-size: var(--pricefontSize);
  margin-top: 5px;
  font-weight: 600;
}
.GFfh2 .O_Dzk {
  text-decoration: line-through;
}

.GZnQK {
  margin-top: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qDFqW {
  display: block;
  font-weight: 400;
  font-size: var(--highlightfontSize);
  color: var(--highlightColor);
  margin-top: var(--highlightMarginTop);
  border-bottom: var(--highlightBorderBottom) solid #e0e0e0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  min-height: 17px;
}

.hRewY {
  float: left;
  display: flex;
  align-items: center;
  visibility: var(--leftArrowVisibility);
  position: absolute;
  left: 2.5%;
  top: 50%;
  z-index: 10;
  cursor: pointer;
  margin-left: 3px;
}

._pF2H {
  float: left;
  overflow: auto;
  white-space: nowrap;
  width: 100%;
}

.eFkrO {
  align-items: center;
  visibility: var(--rightArrowVisibility);
  position: absolute;
  right: 0%;
  top: 50%;
  z-index: 10;
  cursor: pointer;
  margin-right: 3px;
}

.PVBrn {
  background-color: #fff0 !important;
  left: 10px !important;
  border-radius: unset !important;
  box-shadow: none !important;
  margin-left: 0 !important;
}

.joKzc {
  border-radius: 50%;
  box-shadow:
    rgb(17 17 26 / 5%) 0px 1px 0px,
    rgb(17 17 26 / 10%) 0px 0px 8px;
  background: #fff;
}

.pDj1a {
  background-color: #fff0 !important;
  right: 10px !important;
  border-radius: unset !important;
  box-shadow: none !important;
  margin-right: 0 !important;
}

.mVt4d {
  transform: rotate(180deg);
  /* .arrow:hover {
  box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset,
    rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
} */
  /* .left-arrow {
  margin-left: 3px;
} */
}

/* margin-right: 3px; */
.sYUab {
  visibility: hidden;
}

.tL7x1 {
  display: contents;
}

#eIQ5I {
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  scrollbar-width: none; /* Firefox */
}

#eIQ5I::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}

.y4hwp {
  font-size: var(--reviewFontSize);
}

.GiMo_ {
  display: flex;
  margin-left: 30px;
  overflow: auto;
}

.i6GSQ {
  margin-right: 8px;
  margin-bottom: 10px;
}

.i6GSQ img {
  height: 50px;
}

.ga3wt {
  font-weight: var(--titleFontWeight);
  font-size: var(--titleFontSize);
  color: var(--titleColor);
  text-align: var(--titleAlignment);
  margin-bottom: 8px;
}

.zl6FN {
  opacity: 0.4;
  font-weight: var(--subtitleFontWeight);
  font-size: var(--subtitleFontSize);
  color: var(--subtitleColor);
  text-align: var(--subtitleAlignment);
  margin-bottom: 18px;
}

.IYD6T {
  width: 100%;
  margin-bottom: var(--subTitleBottomSpacing);
}

@media (max-width: 768px) {
  .GiMo_ {
    margin-left: auto;
  }

  .IYD6T {
    margin-left: 0.75rem;
    margin-right: 0.75rem;
  }
}
.rhuDQ {
  position: relative;
  display: flex;
}
.XQmq7 {
  display: flex;
  flex-direction: column;
}
.pHruw {
  position: relative;
  display: flex;
  justify-content: center;
  margin: auto;
  width: 100%;
  overflow: hidden;
  border-radius: var(--cardBorderRadius) var(--cardBorderRadius) 0 0;
}
.XQmq7 .pHruw {
  background-color: var(--cardBackgroundColor);
}
.pHruw .UjVWo {
  height: var(--imageHeight) !important;
  object-fit: contain;
  max-width: calc(var(--imageHeight) * 0.819) !important;
}
.pHruw img:not(.UjVWo) {
  height: var(--imageHeight) !important;
  object-fit: fill;
  width: 100%;
  overflow: hidden;
}
.yqayj {
  height: 30px;
  width: 90px;
  position: absolute;
  overflow: hidden;
}

.v5Wp8 {
  margin-top: -36px;
}

.WW4tF {
  font-size: calc(0px + min(16px, var(--discountSize)));
  font-weight: 500;
  color: var(--discountColor);
  overflow: hidden;
  display: flex;
  height: 30px;
  width: 77px;
  justify-content: center;
  align-items: center;
}

.N5F_m {
  bottom: 0;
  left: calc(0px - var(--cardPadding));
}

.T5LQ7 {
  fill: var(--discountbgColor);
}
._cfQR {
  height: 90px;
  width: 36px;
  position: absolute;
  overflow: hidden;
}

.UOMT0 {
  height: 90px;
}

.c0MOW {
  display: flex;
  width: 70px;
  justify-content: center;
}

.BoXfD {
  font-size: calc(0px + min(15px, var(--discountSize)));
  font-weight: 500;
  color: var(--discountColor);
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotate(90deg) translate(calc(4px), calc(27px));
  margin-top: -75px;
  width: 70px;
  height: 35px;
  margin-left: 10px;
}

._QEPm {
  top: -2px;
  left: calc(4px + max(4px, var(--cardBorderRadius)));
}

.gWlf0 {
  top: -2px;
  right: calc(4px + max(4px, var(--cardBorderRadius)));
}

.i78Mg {
  fill: var(--discountbgColor);
}
.w5070 {
  font-size: calc(0px + min(23px, var(--discountSize)));
  font-weight: 500;
  color: var(--discountColor);
  top: 20px;
  margin-top: -77px;
  height: 58px;
  width: 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.cuUYG {
  height: 74px;
  width: 52px;
  position: absolute;
  overflow: hidden;
}

.u1not {
  top: -1px;
  left: calc(4px + max(4px, var(--cardBorderRadius)));
}

.tx6yb {
  top: -1px;
  right: calc(4px + max(4px, var(--cardBorderRadius)));
}

.xiNdy {
  fill: var(--discountbgColor);
}
.ZAf9e {
  height: 30px;
  width: 90px;
  position: absolute;
  overflow: hidden;
}

.zWIuP {
  top: calc(4px + max(4px, var(--cardBorderRadius)));
  left: 0px;
}
.TnKxY {
  top: calc(4px + max(4px, var(--cardBorderRadius)));
  right: 0px;
}
.TnKxY div {
  transform: scaleX(-1);
}

.vdPNl {
  font-size: calc(0px + min(16px, var(--discountSize)));
  font-weight: 500;
  color: var(--discountColor);
  overflow: hidden;
  display: flex;
  height: 30px;
  width: 77px;
  justify-content: center;
  align-items: center;
}

.Oq9Jc {
  left: 0px;
  bottom: calc(2px + max(6px, var(--cardBorderRadius)));
}

.hmRuv {
  fill: var(--discountbgColor);
}

.xXocS {
  margin-top: -36px;
}
.al4e6 {
  font-size: var(--pricefontSize);
  text-align: var(--priceAlignment);
  margin-top: 5px;
  font-weight: var(--priceFontWeight);
}

.al4e6 .x16gE {
  text-decoration: line-through;
}

.EJIob {
  color: var(--primaryPriceColor);
  margin-right: 3px;
}

.x16gE {
  font-weight: 400;
  color: var(--secondaryPriceColor);
}
.SUaMM {
  margin-top: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ZEadT {
  display: block;
  font-weight: 400;
  font-size: var(--highlightfontSize);
  color: var(--highlightColor);
  margin-top: var(--highlightMarginTop);
  border-bottom: var(--highlightBorderBottom) solid #e0e0e0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  min-height: 17px;
}

ul {
  padding-inline-start: 0;
}

.F8nT6 {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.IAZ1Q {
  position: relative;
  padding-left: 8px;
  color: black;
  cursor: pointer;
  border-radius: 5px;
  width: 100%;
  height: 2.5rem;
  background: transparent;
  border: 0.4px solid black;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.gd963 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 30px);
  margin: 0;
}

.IAZ1Q:hover {
  /* background-color: #2980b9; */
}

.mZZ5C {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-top: 5px;
  width: 100%;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 1;
  max-height: 12rem;
  overflow-y: scroll;
}

.eKtLA {
  margin-bottom: 4px;
}

.mZZ5C li {
  padding-left: 10px;
  padding-right: 10px;
  cursor: pointer;
  min-height: 2.8rem;
  display: flex;
  align-items: center;
  white-space: normal;
}

.mZZ5C li:not(:last-child) {
  border-bottom: 0.4px solid black;
}

.vGEzv {
  height: 80px;
  width: auto;
  padding-right: 8px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.mZZ5C li:hover {
  background-color: #f1f1f1;
}

.Yen7M {
  margin-left: 10px;
  border: solid #333;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  transition: transform 0.2s;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.Yen7M.wfkxk {
  transform: rotate(-135deg);
}
* {
  font-family: var(--globalFontFamily);
}

.Edu_G {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

.Ztgdf {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  width: 60%;
}

.YBaqu {
  padding: 0.25rem 0.75rem;
  cursor: pointer;
  transition: background-color 0.3s; /* For smooth color transition */
  border-radius: var(--addToCartBtnBorderRadius);
  background: var(--addToCartBtnBgColor);
  color: var(--addToCartBtnLabelColor);
  font-size: var(--addToCartBtnFontSize);
  height: var(--addToCartBtnHeight);
  width: var(--addToCartBtnWidth);
  text-align: var(--addToCartBtnTextAlignment);
  border: 1.5px solid var(--addToCartBtnBorderColor);
}

.YBaqu:hover {
  background-color: var(--addToCartBtnHoverBgColor);
}

.p_ynY {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  height: 100%;
  border-radius: var(--cardBorderRadius);
  border: 1px solid var(--cardBorderColor);
  background: var(--cardBackgroundColor);
  box-shadow: var(--cardBoxShadow);
  padding: var(--cardPadding);
  margin: var(--cardMargin);
}

.Ty62v {
  display: flex;
  flex-direction: row;
  overflow: hidden;
  justify-content: space-between;
  margin-top: 0.5rem;
  margin-right: 0.5rem;
  align-items: center;
  overflow: visible;
}

.ev5L5 {
  display: none;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.VYjd6 {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.YTUtm {
  color: red;
  font-size: var(--highlightfontSize, 0.875rem);
  font-style: normal;
  font-weight: 400;
}

.rbCb9 {
  color: var(--highlightColor, #365660);
  font-size: var(--highlightfontSize, 0.875rem);
  font-style: normal;
  font-weight: 600;
}

.vrdkt {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 4rem;
}

.jNXW1 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 2.25rem;
  background: white;
  width: 2.25rem;
  border-radius: 0.25rem;
  border: 1px solid #414350;
  cursor: pointer;
}

.Z_jCI {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
}

.zLVyz {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 0.3rem;
  cursor: pointer;
}

.ezmuI {
  width: 20%;
  display: flex;
  overflow: hidden;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 0.5rem;
  margin-left: 0.5rem;
  margin-bottom: 0.5rem;
}

.ByDU1:hover .CTRGt {
  transform: scale(1.5);
}

.Bs_YH {
  height: var(--imageHeight);
  object-fit: contain;
  object-fit: cover;
  object-position: center;
}

.HWCg_ {
  width: 95%;
  padding: 5px;
  margin-left: 0.5rem;
}

.OW98V {
  color: #41434c;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 900;
  /* line-height: normal; */
}

.F6b6P {
  color: var(--nameproductColor, #365660);
  font-size: calc(var(--namebrandSize) - 4px);
  font-style: normal;
  font-weight: 400;
  margin-bottom: 0.5rem;
  width: 50%;
}

.rbnB8 {
  color: var(--namebrandColor, #365660);
  font-size: var(--namebrandSize, 10px);
  font-style: normal;
  font-weight: 500;
  margin-bottom: 0.8rem;
  width: 50%;
}

.zVrg8 {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
}

.rcDBq {
  color: var(--primaryPriceColor);
  font-size: var(--pricefontSize);
  font-style: normal;
  font-weight: var(--priceFontWeight);
}

.TtX9X {
  color: var(--secondaryPriceColor);
  font-size: var(--pricefontSize);
  font-style: normal;
  font-weight: 700;
  line-height: 22.4px;
  word-wrap: break-word;
  text-decoration: line-through;
}

.BYNeB {
  color: #ee468d;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 800;
}

.Nw4_i {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 2rem;
  gap: 0.3rem;
  border-radius: 0.3rem;
  border: 1px solid var(--discountColor);
  background: var(--discountbgColor);
  padding-left: 0.5rem;
  padding-right: 0.2rem;
  margin-right: 0.5rem;
}

.MrO1F {
  width: 1.5rem;
  padding-bottom: 0.1rem;
}

.sw5bK {
  color: var(--discountColor, #1e9ea3);
  font-size: var(--discountSize);
  font-style: normal;
  font-weight: 400;
}

.jcdci {
  display: flex;
  flex-direction: row;
  height: 2rem;
  justify-content: space-between;
  align-items: center;
}

.YTPlk {
  color: var(--nameproductColor, #365660);
  font-size: calc(var(--namebrandSize) - 4px);
  font-style: normal;
  font-weight: 400;
  width: 50%;
}

.o_rVL {
  display: flex;
  padding: 0 0.5rem 0 0.5rem;
  align-items: center;
  gap: 0.5rem;
  height: 2rem;
  border-radius: 1.5rem;
  cursor: pointer;
  border: 1px solid var(--porcelain, #e9f1f8);
  background: var(--alabaster, #f8fcfe);
  white-space: nowrap; /* Prevent text from wrapping */
  overflow: hidden; /* Hide overflowing text */
  text-overflow: ellipsis; /* Show ellipsis for cut-off text */
}

.IFysV {
  color: var(--primary, #365660);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 400;
}

.Mo4Wb {
  border: none;
  cursor: pointer;
  background: transparent;
}

.Mo4Wb option {
  color: #333;
  background-color: #f5f5f5;
  padding: 5px 10px;
}

.Mo4Wb option.ny6Mr {
  color: #999;
  background-color: #eee;
}

.Mo4Wb {
  max-height: 200px; /* Adjust the height as needed */
  overflow-y: auto;
}


/* // Responsiveness Code - Potrait 414px */
@media (max-width: 414px) {
  .Edu_G {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }

  .ezmuI {
    width: 35%;
    align-items: center; 
  }

  .Bs_YH {
    margin-left: 0.6rem;
    border-radius: 8px;
    object-fit: fill; /* Scale the image as needed to cover the entire container */
    object-position: center; /* Center the image within the container */
  }

  .F6b6P {
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 160%;
    margin-bottom: 0.3rem;
    width: 90%;
  }

  .rbnB8 {
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 1.2rem */
    margin-bottom: 0.3rem;
    width: 90%;
  }

  .YTPlk {
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    margin-bottom: 0.5rem;
    width: 90%;
  }

  .rcDBq {
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 700;
    line-height: 160%;
  }

  .YTUtm {
    font-size: 0.75rem;
  }

  .rbCb9 {
    font-size: 0.875rem;
  }

  .zLVyz {
    display: none;
  }

  .Nw4_i {
    visibility: hidden;
  }

  .TtX9X {
    font-size: 0.875rem;
  }

  .jcdci {
    margin-bottom: 0.5rem;
  }

  .VYjd6 {
    margin-bottom: 1.2rem;
  }

  .ev5L5 {
    display: flex;
    flex-wrap: wrap;
  }

  .Ty62v {
    display: none;
  }
}

@media (max-width: 360px) {
  .ezmuI {
    width: 50% !important;
    overflow: hidden;
  }
}

ul {
  padding-inline-start: 0;
}

.G5TGX {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 6rem;
}

.RwA5X {
  position: relative;
  padding-left: 8px;
  color: black;
  cursor: pointer;
  border-radius: 1.5rem;
  width: 100%;
  height: 2rem;
  background: var(--alabaster, #f8fcfe);
  border: 1px solid var(--porcelain, #e9f1f8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.DCbSp {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 30px);
  margin: 0;
  color: #365660;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 400;
}

.RwA5X:hover {
  /* background-color: #2980b9; */
}

.rScz0 {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-top: 5px;
  width: 100%;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 1;
  max-height: 12rem;
  overflow-y: scroll;
  width: 150%;
}

.KCw3O {
  margin-bottom: 4px;
}

.rScz0 li {
  padding-left: 10px;
  padding-right: 10px;
  cursor: pointer;
  min-height: 2.8rem;
  display: flex;
  align-items: center;
  white-space: normal;
}

.rScz0 li:not(:last-child) {
  border-bottom: 0.4px solid black;
}

.zHKrU {
  height: 80px;
  width: auto;
  padding-right: 8px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.rScz0 li:hover {
  background-color: #f1f1f1;
}

.yOh0G {
  margin-left: 10px;
  border: solid #365660;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  transition: transform 0.2s;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.yOh0G.X2LmZ {
  transform: rotate(-135deg);
}

.pljWU {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;       /* Fixes the container to the viewport */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);  /* Semi-transparent background */
  z-index: 1000;        /* Makes sure the loader is on top */
}

.QCPqO {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #3498db;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: y1hNh 1s linear infinite;
}

@keyframes y1hNh {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}