@charset "UTF-8";
/* 상품목록 페이지 스타일 파일입니다. */
.product-list__display-type-btn {
  background-color: unset;
  border: unset;
}
.product-list__search-keyword-wrap {
  font-weight: 700;
  padding-block-start: 10px;
  padding-block-end: 15px;
  margin-inline: 15px;
  border-block-end: 2px solid var(--color-base-black);
}
.product-list__search-keyword {
  font-style: normal;
  color: var(--color-point);
}
.product-list__sort {
  background-color: var(--color-base-white);
  max-width: max-content;
  height: 32px;
}
.product-list .pagination {
  padding-top: 60px;
}

.product-list-items {
  margin-block-end: 20px;
}
.product-list-items :where(.thumb-LIST) {
  padding-inline: 20px;
}
.product-list-items .skeleton__wrap {
  margin-bottom: 10px;
}
.product-list-items .skeleton__wrap--has-item {
  margin-top: 24px;
}
.product-list-items .skeleton--list .skeleton__media {
  flex: 1;
  height: auto;
}

.product-list-category-slider {
  background-color: var(--gray100);
}
.product-list-category-slider .category-slider__item {
  font-size: 14px;
}
.product-list-category-slider .category-slider__item-count {
  font-size: 12px;
  color: var(--gray600);
}

/* ============================================================================
   상품 뱃지 시스템 스타일 (모바일)
   ============================================================================ */

/* 뱃지 컨테이너 */
.product-badges-container {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 6px 0;
  align-items: flex-start;
  min-height: 18px; /* 뱃지가 없어도 기본 높이 확보 */
}

/* 기본 뱃지 스타일 */
.product-badge {
  display: flex;
  align-items: center;
  padding: 0 6px;
  height: 20px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
  border-radius: 3px;
  text-align: center;
  white-space: nowrap;
  letter-spacing: -0.5px;
  border: 1px solid transparent;
  min-height: 14px;
  box-sizing: border-box;
}

/* 무료배송 뱃지 - 파란색 */
.product-badge--free-shipping {
  background-color: #007bff;
  color: #ffffff;
  font-weight: 500;
}

/* 뱃지 개수 제한 (최대 3개까지만 표시) */
.product-badges-container .product-badge:nth-child(n + 4) {
  display: none;
}