/* =========================================================
   RECOMMENDED ROW
   single horizontal strip on all screen sizes
========================================================= */

.recommended-row{
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.recommended-row__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.recommended-row__eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: #f7f9fc;
  border: 1px solid var(--border);
  color: var(--brand-700);
  font-size: 0.82rem;
  font-weight: 700;
}

.recommended-row__grid{
  display: flex;
  flex-wrap: nowrap;
  gap: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 2px 12px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: #c3cedc transparent;
}

.recommended-row__grid::-webkit-scrollbar{
  height: 8px;
  display: block;
}

.recommended-row__grid::-webkit-scrollbar-track{
  background: transparent;
}

.recommended-row__grid::-webkit-scrollbar-thumb{
  background: #c3cedc;
  border-radius: 999px;
}

.recommended-row__item{
  flex: 0 0 320px;
  max-width: 320px;
  min-width: 320px;
  min-width: 0;
  scroll-snap-align: start;
}

.recommended-row__item .pcard{
  height: 100%;
}

@media (max-width: 767.98px){
  .recommended-row{
    margin-top: 14px;
    gap: 12px;
  }

  .recommended-row__grid{
    gap: 14px;
    padding-bottom: 10px;
  }

  .recommended-row__item{
    flex: 0 0 260px;
    max-width: 260px;
    min-width: 260px;
  }

  .recommended-row__eyebrow{
    min-height: 28px;
    padding: 0 11px;
    font-size: 0.78rem;
  }
}
.recommended-card{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.recommended-card__topline{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.recommended-card__badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #eef6ff;
  border: 1px solid #cfe1ff;
  color: #1f5fbf;
  font-size: 0.76rem;
  font-weight: 700;
}

.recommended-card__reasons{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.recommended-card__reason{
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: #f7f9fc;
  border: 1px solid var(--border);
  color: var(--text-muted, #5f6b7a);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1;
}
/* =========================================================
   RECOMMENDED PRODUCT CARD
========================================================= */

.pcard--recommended{
  display: flex;
  flex-direction: column;
}

.pcard--recommended .pcard__body{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.recommended-why{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: -2px;
}

.recommended-why__label{
  font-size: 0.82rem;
  font-weight: 700;
  color: #405066;
  line-height: 1.2;
}

.recommended-why__list{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.recommended-why__chip{
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #f7f9fc;
  border: 1px solid #d9e2ef;
  color: #49607d;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1;
}

.pcard--recommended .pcard__price{
  margin-top: 2px;
}

@media (max-width: 767.98px){
  .recommended-why{
    gap: 7px;
  }

  .recommended-why__label{
    font-size: 0.78rem;
  }

  .recommended-why__chip{
    min-height: 26px;
    padding: 0 9px;
    font-size: 0.72rem;
  }
}
/* recommended cards use the normal product card, only add explanation styling */

.pcard--recommended .pcard__why{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
}

.pcard--recommended .pcard__whyLabel{
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
  color: #405066;
}

.pcard--recommended .pcard__whyList{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pcard--recommended .pcard__whyChip{
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #f7f9fc;
  border: 1px solid #d9e2ef;
  color: #49607d;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1;
}

.pcard--recommended .rating-row{
  display: none;
}

@media (max-width: 767.98px){
  .pcard--recommended .pcard__whyLabel{
    font-size: 0.78rem;
  }

  .pcard--recommended .pcard__whyChip{
    min-height: 26px;
    padding: 0 9px;
    font-size: 0.72rem;
  }
}