/* 상품 목록 - 뱃지 */
.badge-area,
.badge-list{ height: auto; max-height: 44px; display: flex; flex-wrap: wrap; gap: 4px; overflow: hidden; }

.badge-area [class^="badge-"],
.badge-list [class^="badge-"]{
  height: 20px;
  padding: 0px 6px;
  font-family: "Roboto";
  font-size: 10px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: -0.6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.badge-g{
  background-color: #D9DADB;
  color: black;
}
.badge-best{
  background-color: #ED174D;
  color: #FFF;
}
.badge-new{
  background-color: #BFE10E;
  color: black;
}

@media screen and (max-width: 1159px) {
  .swiper .badge-area,
  .swiper .badge-list{ height: 44px; align-items: flex-start; }
}


/* 상품 리스트 */
.prod-list-container{ color: black; }
.prod-list-container strong{ font-weight: bold; }
.prod-list-container .prod-list{ display: grid; }
.prod-list-container .prod-list button{ width: 100%; }
.prod-list-container .prod-list .img-wrap{ margin-bottom: 8px; }
.prod-list-container .prod-list .img-wrap img{ width: 100%; height: 100%; border-radius: inherit; }
.prod-list-container .prod-list .info-wrap{ text-align: left; font-family: "Noto Sans KR"; letter-spacing: -0.6px; }
.prod-list-container .prod-list .info-wrap .brand-name{ display: block; }
.prod-list-container .prod-list .info-wrap .product-name{ margin: 0 0 8px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 14px; word-break: break-all; }
.prod-list-container .prod-list .info-wrap .cost{ display: flex; align-items: flex-end; column-gap: 4px; }
.prod-list-container .prod-list .info-wrap .cost-after{ font-family: "Roboto"; }
.prod-list-container .prod-list .info-wrap .cost-before{ color: #a9a9a9; display: flex; }
.prod-list-container .prod-list .info-wrap .cost-before span{ margin: 0 0 0 2px; font-family: "Roboto"; text-decoration: line-through; }
/* .prod-list-container .prod-list .info-wrap .badge-list{ display: flex; align-items: center; flex-wrap: wrap; gap: 4px;}
.prod-list-container .prod-list .info-wrap .badge-list [class^="badge-"]{ height: 20px; margin: 0; display: flex; justify-content: center; align-items: center; } */

@media screen and (min-width: 1160px) {
  .prod-list-container .prod-list{ grid-template-columns: repeat(4, 1fr); gap: 50px 28px; }
  .prod-list-container .prod-list .img-wrap{ height: 228px; border-radius: 8px; }
  .prod-list-container .prod-list .info-wrap{ font-size: 14px; line-height: 24px; }
  .prod-list-container .prod-list .info-wrap .product-name{ height: 48px; line-height: 24px; font-weight: 300; }
  .prod-list-container .prod-list .info-wrap .cost{ margin: 0 0 12px; }
  .prod-list-container .prod-list .info-wrap .cost-after{ font-size: 20px; line-height: 30px; }
  .prod-list-container .prod-list .info-wrap .cost-after span{ font-weight: 300; }
  .prod-list-container .prod-list .info-wrap .cost-before{ font-size: 14px; font-weight: 300; line-height: 20px; }
  .prod-list-container .prod-list .info-wrap .cost-before span{ line-height: 24px; }
}

@media screen and (max-width: 1159px) {
  .prod-list-container .prod-list{ grid-template-columns: repeat(2, 1fr); gap: 40px 20px; }
  .prod-list-container .prod-list .img-wrap{ height: 134px; }
  .prod-list-container .prod-list .img-wrap img{ object-fit: contain; }
  .prod-list-container .prod-list .info-wrap{ font-size: 12px; line-height: 18px; }
  .prod-list-container .prod-list .info-wrap .product-name{ height: 36px; line-height: 18px; font-family: "Noto Sans KR"; font-weight: 400; font-size: 12px;}
  .prod-list-container .prod-list .info-wrap .cost{ margin: 2px 0 0; flex-wrap: wrap; }
  .prod-list-container .prod-list .info-wrap .cost-after{ font-size: 16px; line-height: 24px; }
  .prod-list-container .prod-list .info-wrap .cost-after span{ font-weight: 400; }
  .prod-list-container .prod-list .info-wrap .cost-before{ margin: 0 0 1px; font-size: 12px; font-weight: 400; line-height: 18px; }
  .prod-list-container .prod-list .info-wrap .cost-before span{ line-height: 20px; }
  .prod-list-container .prod-list .info-wrap .badge-list{ margin-top: 4px; }
}