/* BASIC css start */
/* =================== BEST 50 ( #product-list ) =================== */
/* 0) 타이틀 바: 겹침 방지 + 중앙정렬 */
:root { --gnbH: 52px; } /* 이미 있으면 이 줄은 무시됨 */


:root { --gnbH: 52px; }             /* 실제 GNB 높이에 맞춰 조정: 52~64px */
#product-list .h_title{
  position:sticky; top:var(--gnbH); z-index:260; background:#fff; padding:10px 0;
}
#product-list .list_shopping2x{ margin-top: calc(10px + var(--gnbH)) !important; }




/* 1) 2열 그리드 */
#product-list .list_shopping2x > ul{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  gap:12px !important;
  padding:0 12px !important;
}
#product-list .list_shopping2x > ul > li{
  position:relative !important;
  overflow:hidden !important;
}
#product-list .list_shopping2x img.listPic{
  width:100% !important; display:block !important; border-radius:4px !important;
  aspect-ratio:195/260 !important; object-fit:cover !important;
}

/* 2) 호버 오버레이(PC hover / 모바일은 .hover 클래스로) */
#product-list .list_shopping2x figure .list_shoppingInfo{
  position:absolute !important; left:0; right:0; bottom:0;
  background:rgba(0,0,0,.40) !important; color:#fff !important;
  padding:10px 8px 8px !important;
  min-height:45% !important;
  display:flex !important; flex-direction:column !important; justify-content:flex-start !important;
  opacity:0; transform:translateY(8px); transition:opacity .22s ease, transform .22s ease;
  pointer-events:none !important; z-index:2 !important;
}
#product-list .list_shopping2x li:hover .list_shoppingInfo,
#product-list .list_shopping2x li.hover .list_shoppingInfo{
  opacity:1 !important; transform:translateY(0) !important;
}

/* 3) 텍스트 줄 제한 & 간격 (이름/서브명) */
#product-list .list_shoppingInfo .listName{
  margin:0 0 2px !important; line-height:1.28 !important;
  display:-webkit-box !important; -webkit-box-orient:vertical !important; overflow:hidden !important;
  -webkit-line-clamp:2 !important; word-break:break-all !important;
}
/* 서브명을 HTML에 추가했으면 이 규칙이 적용됨(없어도 무해) */
#product-list .list_shoppingInfo .listSub{
  margin:0 0 4px !important; line-height:1.22 !important; opacity:.9 !important;
  display:-webkit-box !important; -webkit-box-orient:vertical !important; overflow:hidden !important;
  -webkit-line-clamp:2 !important; word-break:break-all !important;
}

/* 4) 가격 라인(항상 맨 아래로 밀착) */
#product-list .list_shoppingInfo .listDiscount,
#product-list .list_shoppingInfo .listPrice,
#product-list .list_shoppingInfo .listReplce{
  margin-top:auto !important;
  padding-bottom:2px !important;  /* 더 붙이고 싶으면 0으로 */
  line-height:1.25 !important; font-weight:600 !important;
}



#product-list .list_shoppingInfo .listDiscount del{
  font-size:11px !important; margin-left:2px !important; opacity:.9 !important;
}
/* 적립/포인트는 숨김(원하면 주석 처리) */
#product-list .list_shoppingInfo .listReserve,
#product-list .list_shoppingInfo .listPoint{ display:none !important; }

/* 5) 좌상단 랭킹 배지   기존 bookmark 규칙 모두 무시하고 새 배지 사용 */
#product-list .ranking{
  position:absolute !important; top:6px !important; left:6px !important;
  z-index:3 !important; pointer-events:none !important;
}
#product-list .rk-badge{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  width:22px !important; height:22px !important; border-radius:6px !important;
  background:#000 !important; color:#fff !important; font-weight:700 !important; font-size:12px !important;
  box-shadow:0 1px 2px rgba(0,0,0,.25) !important;
}
#product-list .rk-badge em{ font-style:normal !important; line-height:1 !important; }

/* (=과거 규칙 무력화) */
#product-list .list_shopping2x li .ranking .fa-bookmark,
#product-list .list_shopping2x li .ranking .numRanking{ display:none !important; }




/* 베스트 가격/할인 한 줄 고정 (우선순위 강제) */
#product-list .list_shopping2x li > a > figure > figcaption.list_shoppingInfo .listPrice,
#product-list .list_shopping2x li > a > figure > figcaption.list_shoppingInfo .listDiscount {
  display: inline-flex !important;      /* 한 줄로 가로 배치 */
  align-items: center !important;       /* 세로 중앙 정렬 */
  white-space: nowrap !important;       /* 줄바꿈 방지 */
  gap: 4px !important;                  /* 간격 */
}

#product-list .list_shopping2x li > a > figure > figcaption.list_shoppingInfo .listDiscount del {
  color: #ccc !important;
  font-size: 11px !important;
}



/* 베스트 가격 한 줄 고정 */
#product-list .list_shopping2x .list_shoppingInfo .listPrice {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

#product-list .list_shopping2x .list_shoppingInfo .listPrice del {
    color: #bbb;
    font-size: 11px;
}
#product-list .list_shopping2x .list_shoppingInfo .listPrice strong {
    font-weight: 700;
}




/* =========================================================
   [BEST 50] 상품 그리드 간격 축소 (가로·세로)
   ========================================================= */
#product-list .list_shopping2x > ul {
  gap: 4px !important;          /* 기존 12px → 4px (가로·세로 간격 모두) */
  padding: 0 4px !important;    /* 좌우 바깥 여백 기존 12px → 4px */
}

/* 상품 카드 내부 여백도 축소 */
#product-list .list_shopping2x > ul > li {
  margin: 0 !important;         /* 카드 주변 마진 제거 */
  padding: 0 !important;        /* 카드 안쪽 패딩 제거 */
}

/* 이미지-텍스트 간격 줄이기 */
#product-list .list_shoppingInfo .listName,
#product-list .list_shoppingInfo .listSub {
  margin-bottom: 2px !important; /* 기존 4px 이상 → 2px */
}

/* 가격 라인 하단 간격 축소 */
#product-list .list_shoppingInfo .listPrice,
#product-list .list_shoppingInfo .listDiscount {
  padding-bottom: 0 !important; /* 기존 2px → 0 */
}




/* BEST 썸네일 좌상단 인기순위 숫자 숨김 */
#product-list .ranking,
#product-list .rk-badge{
  display:none !important;
}
/* BASIC css end */

