section {
  --gap: 12px;
  --maxheight: 300px;
}

/*@media(max-width: 1000px){
    .showcase-combo {
        flex: 0 0 calc((100% / 2) - var(--gap) / 2) !important;
    }
}
@media(max-width: 500px) {
    .showcase-combo {
        flex: 0 0 calc((100%) - var(--gap) / 2) !important;
    }
}*/
@media (min-width: 1001px) {
  .showcase-combo {
    flex: 0 0 33.3333333333% !important;
    flex: 0 0 calc(33.3333333333% - var(--gap) / 2) !important;
  }
}
.combo-section {
  margin-top: 40px !important;
}

.showcase-combo-list {
  justify-content: space-between;
  width: 100%;
  row-gap: var(--gap);
  min-height: fit-content;
  height: fit-content;
  padding: 0px;
  align-items: stretch;
  display: flex;
}

.showcase-combo {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  padding: 7px;
  max-height: 100%;
  height: 320px;
  max-width: 100%;
  border: 0px solid rgba(112, 112, 112, 0.4);
  border-radius: 5px;
  justify-content: start;
  max-height: var(--maxheight);
  align-items: stretch !important;
  margin: 0px !important;
}
.showcase-combo .combo-header {
  width: 100%;
  align-items: center !important;
  align-content: center;
  justify-content: center;
  justify-items: center;
  display: flex;
  font-weight: 700;
  max-height: 30px;
  height: 30px;
}
.showcase-combo .combo-header .subtitle {
  font-size: 1.3rem;
  white-space: nowrap;
}
.showcase-combo .combo-brandd {
  height: 100%;
  max-width: 90px;
  margin: 0px;
  display: flex;
  object-fit: contain;
}
.showcase-combo .cross {
  --diameter: 35px;
  position: absolute;
  top: calc(50% - var(--diameter) / 2 + 5%);
  left: calc(50% - var(--diameter) / 2);
  background: #f1f1f1;
  color: #353535;
  width: var(--diameter);
  height: var(--diameter);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  --prod-gap: 5px;
}
.showcase-combo .products {
  gap: 7px;
  display: flex;
  max-height: 55%;
  position: relative; /*for cross*/
  align-items: center;
  max-width: 100%;
}
.showcase-combo .prod {
  padding: 8px;
  background: rgba(255, 255, 255, 0.2549019608);
  background: rgba(255, 255, 255, 0.7137254902);
  background: rgba(252, 252, 252, 0.3490196078);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  width: calc(50% - var(--gap) / 2);
  max-height: 100%;
  overflow: hidden;
  height: 52.5%;
}
.showcase-combo .prod .fit-img {
  height: 50%;
}
.showcase-combo .prod img {
  max-height: 100%;
  max-width: 100%;
  display: flex;
}
.showcase-combo .prod .title {
  font-size: 0.9rem;
  color: #ffffff;
  color: #1f1f1f;
  font-family: "Ubuntu", sans-serif;
  font-family: "Assistant", sans-serif;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2 !important;
  word-wrap: break-word;
}
.showcase-combo .combo-pair {
  height: 100%;
}
.showcase-combo .sale-tag {
  margin-inline: 15px;
  display: flex;
  align-items: center;
  width: fit-content;
  height: 20px;
  padding-inline: 5px;
  padding-block: 0px;
  font-size: 0.9rem;
  position: relative;
  background: #ff0000;
  border-radius: 3px;
  color: #e4e4e4;
  font-family: "Bai Jamjuree", sans-serif;
  font-style: italic;
  z-index: 2 !important;
  position: relative;
  font-size: 0.85rem;
  white-space: nowrap;
}
.showcase-combo .recommended-tag {
  background: var(--app-blue);
}
.showcase-combo .bot {
  justify-content: center;
  flex: 1 1;
  display: flex;
  align-items: center;
}

.bg-1 {
  background: linear-gradient(180deg, #ffd800, orange);
  background: linear-gradient(180deg, #ffcf5b, #ff8537);
  background: linear-gradient(150deg, #c9bafb 40%, #ffffff);
  background: linear-gradient(150deg, #ffdf76 30%, #fcfee2);
}

.bg-2 {
  background: linear-gradient(180deg, #c6e0fc, #9bc8ff);
  background: linear-gradient(180deg, #c6e0fc, #d2e3ff);
}

.bg-1, .bg-2 {
  box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.2431372549) !important;
}

.theme-dark .bg-1, .bg-2 {
  box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.6705882353) !important;
}

.combo-fill {
  border-radius: 5px;
  overflow: hidden;
  padding: 0px !important;
  margin-inline: 0px !important;
}
.combo-fill img {
  object-fit: cover !important;
}

.prod-fill {
  background: transparent !important;
}

.prod-fill div {
  width: 100%;
  display: flex;
  justify-content: center;
}

.prod-fill div button {
  width: 100%;
  background: #0064d1;
  font-family: "Nunito", sans-serif;
}