/* =========================================================
   products.php (상품 리스트) 전용 스타일
   style.css :root 변수 + style4.css 헤더/드로어 스타일 이어받아 사용
   ========================================================= */

.plist-page{ padding:36px 0 80px; }

/* ---------- 필터 영역 ---------- */
.plist-filter{
  padding-bottom:30px; margin-bottom:38px; border-bottom:1px solid var(--line);
}
.plist-filter::before{
  content:'SEARCH & FILTER'; display:block; font-size:11px; letter-spacing:.3em;
  color:var(--gold-dark); margin-bottom:22px;
}
.chip-groups{ display:flex; flex-direction:column; }
.chip-group{ display:flex; align-items:center; gap:22px; padding:12px 0; border-top:1px solid var(--line); }
.chip-groups .chip-group:first-child{ border-top:none; padding-top:0; }
.chip-group-label{
  flex:0 0 64px; font-family:'Playfair Display',serif;
  font-size:14px; color:var(--ink); letter-spacing:.02em;
}

/* 브랜드가 많아도 한 줄 유지: 가로 스크롤 (메인 브랜드관 슬라이더와 같은 방식) */
.chip-row{
  display:flex; flex-wrap:nowrap; gap:8px; flex:1; min-width:0;
  overflow-x:auto; scrollbar-width:none; padding:4px 0;
  -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 44px), transparent);
          mask-image:linear-gradient(to right, #000 calc(100% - 44px), transparent);
}
.chip-row::-webkit-scrollbar{ display:none; }

/* 브랜드 칩: 원형 미니 썸네일 + 텍스트 알약형 */
.chip{
  display:inline-flex; flex:0 0 auto; align-items:center; gap:8px;
  padding:5px 15px 5px 6px; border:1px solid var(--line); border-radius:30px;
  background:#fff; font-size:12px; color:var(--ink-soft);
  letter-spacing:.02em; transition:.15s; white-space:nowrap;
}
.chip-thumb{
  width:30px; height:30px; border-radius:50%; overflow:hidden; background:var(--bg-alt); flex:0 0 auto;
}
.chip-thumb img{ width:100%; height:100%; object-fit:cover; }
.chip:hover{ border-color:var(--gold-dark); color:var(--ink); }
.chip.active{ background:var(--ink); border-color:var(--ink); color:#fff; }

/* '전체 상품'은 이미지 없는 텍스트 알약 */
.chip.all-chip{ padding:10px 20px; }

.filter-row{ display:flex; flex-wrap:wrap; align-items:flex-end; padding-top:28px; margin-top:20px; border-top:1px solid var(--line); }
.ffield{ padding:0 24px; border-left:1px solid var(--line); }
.ffield:first-child{ border-left:none; padding-left:0; }
.ffield.grow{ flex:1; min-width:220px; max-width:420px; }
.ffield label{ display:block; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:10px; }
.ffield input{
  font-family:inherit; font-size:13.5px; padding:2px 2px 9px; border:none; border-bottom:1px solid var(--line);
  border-radius:0; background:transparent; color:var(--ink); width:100%;
}
.ffield input::placeholder{ color:var(--ink-mute); }
.ffield input:focus{ outline:none; border-bottom-color:var(--gold-dark); }
.price-range{ display:flex; align-items:center; gap:7px; }
.price-range input{ width:78px; }
.price-range span{ color:var(--ink-mute); font-size:12px; }
.ffield.actions{ display:flex; align-items:center; gap:18px; margin-left:auto; border-left:none; padding-left:24px; }
.btn-search{
  font-family:inherit; font-size:12px; letter-spacing:.1em; padding:12px 32px; border-radius:30px;
  background:var(--ink); color:#fff; border:none; cursor:pointer; transition:.2s;
}
.btn-search:hover{ background:var(--gold-dark); }
.btn-reset{
  font-size:12.5px; color:var(--ink-mute); text-decoration:underline; text-underline-offset:3px;
}
.btn-reset:hover{ color:var(--ink); }

/* ---------- 결과 요약 ---------- */
.plist-summary{ font-size:13px; color:var(--ink-mute); margin-bottom:18px; }
.plist-summary strong{ color:var(--ink); font-weight:600; }
.plist-empty{ text-align:center; padding:80px 0; color:var(--ink-mute); font-size:14px; }

/* ---------- 상품 그리드 (4열) ---------- */
.plist-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px 18px; }
@media(min-width:640px){ .plist-grid{ grid-template-columns:repeat(3,1fr); gap:24px 22px; } }
@media(min-width:1024px){ .plist-grid{ grid-template-columns:repeat(4,1fr); } }

.plist-card{ position:relative; }
.plist-card-link{ display:block; }
.plist-img{
  position:relative; display:block; width:100%; aspect-ratio:1/1.1; overflow:hidden;
  background:var(--bg-alt); border-radius:4px; margin-bottom:12px;
}
.plist-img img{ width:100%; height:100%; object-fit:cover; transition:.4s; }
.plist-card-link:hover .plist-img img{ transform:scale(1.04); }
.plist-badge{
  position:absolute; top:9px; left:9px; font-size:10px; letter-spacing:.06em;
  padding:5px 9px; border-radius:20px; color:#fff; background:var(--ink);
}
.plist-badge.special{ background:var(--gold-dark); }

.plist-wish{
  position:absolute; top:9px; right:9px; z-index:2; width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,.9); display:flex; align-items:center; justify-content:center;
  color:var(--ink-soft); transition:.15s; box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.plist-wish svg{ width:17px; height:17px; }
.plist-wish:hover{ color:#c0392b; background:#fff; }
.plist-wish.active{ color:#c0392b; }
.plist-wish.active svg{ fill:#c0392b; }
.plist-brand{ display:block; font-size:10.5px; letter-spacing:.08em; color:var(--ink-mute); margin-bottom:4px; }
.plist-name{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-size:13px; line-height:1.4; margin-bottom:6px; min-height:2.5em;
}
.plist-price{ font-size:13px; display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
.plist-price .now{ font-weight:600; }
.plist-price .now.sale{ color:var(--gold-dark); }
.plist-price .old{ color:var(--ink-mute); text-decoration:line-through; font-size:11.5px; }

/* ---------- 무한스크롤 상태 ---------- */
.plist-loading{
  text-align:center; padding:30px 0; font-size:12.5px; color:var(--ink-mute); letter-spacing:.04em;
}
#plistSentinel{ height:1px; }

@media(max-width:560px){
  .chip-group{ flex-direction:column; align-items:stretch; gap:8px; }
  .chip-group-label{ flex:none; }
  .filter-row{ flex-direction:column; align-items:stretch; gap:20px; }
  .ffield{ border-left:none; padding:0; }
  .ffield.grow{ max-width:none; }
  .ffield.actions{ margin-left:0; padding-left:0; justify-content:space-between; }
  .price-range input{ width:0; flex:1; }
}