/* ==============================================================
   product-list.css — page-specific styles for product_list.php
   Loaded only on the list/category page via $PAGE_EXTRA_HEAD.
   Works WITH .pc product-card classes already defined in
   style-home.css, and adds its own grid + sidebar layout.
   ============================================================== */

.pl-wrap{
  max-width:1280px;
  margin:0 auto;
  padding:28px clamp(16px,4vw,24px) 60px;
}

/* ── Page heading ── */
.pl-head{
  text-align:center;
  margin:0 0 26px;
}
.pl-breadcrumb{
  font-size:12px;
  color:#888;
  letter-spacing:.02em;
  margin-bottom:10px;
}
.pl-breadcrumb a{color:#888;text-decoration:none}
.pl-breadcrumb a:hover{color:#C9A24B}
.pl-breadcrumb span.sep{margin:0 6px;color:#bbb}
.pl-title{
  font-family:'Playfair Display', Georgia, serif;
  font-size:clamp(26px,4vw,40px);
  color:#18110A;
  margin:0;
  letter-spacing:.01em;
}
.pl-title::after{
  content:'';
  display:block;
  width:60px;
  height:2px;
  background:linear-gradient(90deg,#C9A24B,#F4D58D);
  margin:12px auto 0;
  border-radius:2px;
}
.pl-subtitle{
  font-size:.88rem;
  color:#777;
  margin:12px 0 0;
  letter-spacing:.02em;
}

/* ── Layout: sidebar + main ── */
.pl-grid{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:28px;
  align-items:start;
}

/* ── Sidebar ── */
.pl-sidebar{
  background:#fff;
  border:1px solid #f1eee5;
  border-radius:16px;
  padding:22px 20px;
  box-shadow:0 6px 24px rgba(15,23,42,.04);
  position:sticky;
  top:90px;
}
.pl-facet{margin-bottom:22px;padding-bottom:22px;border-bottom:1px dashed #efe8d6}
.pl-facet:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}
.pl-facet h3{
  font-family:'Playfair Display', Georgia, serif;
  font-size:1.05rem;
  color:#18110A;
  margin:0 0 12px;
  letter-spacing:.01em;
}
.pl-cat-list{list-style:none;margin:0;padding:0;max-height:260px;overflow-y:auto}
.pl-cat-list::-webkit-scrollbar{width:4px}
.pl-cat-list::-webkit-scrollbar-thumb{background:rgba(201,162,75,.3);border-radius:2px}
.pl-cat-list li{margin:0}
.pl-cat-list a{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:7px 10px;
  color:#444;
  text-decoration:none;
  font-size:.88rem;
  border-radius:8px;
  transition:background .15s ease, color .15s ease;
}
.pl-cat-list a:hover{background:#faf5e8;color:#C9A24B}
.pl-cat-list li.active a{background:#18110A;color:#F4D58D;font-weight:500}
.pl-cat-list a .count{font-size:.75rem;color:#aaa}
.pl-cat-list li.active a .count{color:rgba(244,213,141,.7)}

.pl-avail-list{list-style:none;margin:0;padding:0}
.pl-avail-list li{padding:6px 0;font-size:.88rem;color:#444;display:flex;align-items:center;gap:8px;cursor:pointer}
.pl-avail-list input[type=radio]{accent-color:#C9A24B;cursor:pointer}
.pl-avail-list label{cursor:pointer;flex:1;display:flex;justify-content:space-between;align-items:center}
.pl-avail-list label .count{font-size:.75rem;color:#aaa}

.pl-price-row{display:flex;gap:8px;align-items:center;margin-top:8px}
.pl-price-row input{
  width:100%;
  padding:8px 10px;
  border:1px solid #e3ddd0;
  border-radius:8px;
  font-size:.85rem;
  color:#18110A;
  background:#fff;
  outline:none;
  font-family:inherit;
}
.pl-price-row input:focus{border-color:#C9A24B}
.pl-price-sep{color:#aaa;font-weight:600;flex-shrink:0}
.pl-price-apply{
  margin-top:10px;
  width:100%;
  background:#18110A;
  color:#F4D58D;
  border:0;
  padding:9px 12px;
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  border-radius:999px;
  cursor:pointer;
  transition:background .15s;
}
.pl-price-apply:hover{background:#2a1d11;color:#fff}

.pl-clear-all{
  display:block;
  text-align:center;
  font-size:.78rem;
  color:#c0392b;
  text-decoration:underline;
  letter-spacing:.02em;
  margin-top:4px;
}
.pl-clear-all:hover{color:#8b1d12}

/* Mobile filter toggle */
.pl-filter-toggle{
  display:none;
  width:100%;
  padding:12px 16px;
  background:#18110A;
  color:#F4D58D;
  border:0;
  border-radius:999px;
  font-weight:600;
  letter-spacing:.04em;
  font-size:.85rem;
  cursor:pointer;
  margin-bottom:16px;
  text-align:center;
}
.pl-filter-toggle:hover{background:#2a1d11;color:#fff}

/* ── Main (right) column ── */
.pl-main{min-width:0}

.pl-controls{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:20px;
  padding:14px 18px;
  background:#fff;
  border:1px solid #f1eee5;
  border-radius:12px;
  box-shadow:0 4px 12px rgba(15,23,42,.03);
}
.pl-result-count{
  font-size:.85rem;
  color:#666;
}
.pl-result-count strong{color:#18110A;font-weight:600}
.pl-sort-wrap{display:flex;align-items:center;gap:10px}
.pl-sort-wrap label{font-size:.82rem;color:#888;letter-spacing:.02em}
.pl-sort-select{
  padding:8px 34px 8px 14px;
  border:1px solid #e3ddd0;
  border-radius:999px;
  font-size:.85rem;
  color:#18110A;
  background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23C9A24B' d='M5 6L0 0h10z'/></svg>") no-repeat right 12px center;
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  font-family:inherit;
  letter-spacing:.01em;
}
.pl-sort-select:focus{outline:0;border-color:#C9A24B}

/* ── Active-filter chips ── */
.pl-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.pl-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#faf5e8;
  border:1px solid #e9dfbf;
  color:#8a6a1f;
  font-size:.78rem;
  font-weight:500;
  padding:5px 10px 5px 12px;
  border-radius:999px;
  text-decoration:none;
  transition:background .15s;
}
.pl-chip:hover{background:#f4ebc9}
.pl-chip b{color:#18110A}
.pl-chip span.x{
  width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;background:#fff;color:#c0392b;font-weight:700;font-size:.75rem;
}

/* ── Grid: uses .pc cards from style-home.css ── */
.pl-prod-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.pl-prod-grid .pc{min-width:unset;max-width:unset;scroll-snap-align:unset;flex-shrink:unset}

/* ── Empty state ── */
.pl-empty{
  text-align:center;
  padding:60px 20px;
  background:#fff;
  border:1px solid #f1eee5;
  border-radius:16px;
  box-shadow:0 6px 24px rgba(15,23,42,.04);
}
.pl-empty-icon{font-size:48px;margin-bottom:14px;opacity:.8}
.pl-empty h2{
  font-family:'Playfair Display', Georgia, serif;
  font-size:24px;
  color:#18110A;
  margin:0 0 10px;
}
.pl-empty p{color:#666;font-size:.92rem;max-width:480px;margin:0 auto 22px;line-height:1.6}
.pl-empty-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.pl-empty-actions a{
  display:inline-block;
  padding:11px 24px;
  border-radius:50px;
  font-weight:600;
  font-size:.85rem;
  text-decoration:none;
  letter-spacing:.02em;
  transition:transform .15s ease,box-shadow .15s ease;
}
.pl-btn-gold{
  background:linear-gradient(135deg,#C9A24B 0%,#F4D58D 50%,#C9A24B 100%);
  color:#18110A;
}
.pl-btn-gold:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(201,162,75,.3)}
.pl-btn-outline{background:transparent;color:#18110A;border:1px solid #18110A}
.pl-btn-outline:hover{background:#18110A;color:#fff}

/* ── Out-of-stock card overlay ── */
.pl-prod-grid .pc.out-of-stock{opacity:.6}
.pl-prod-grid .pc.out-of-stock::after{
  content:'Out of stock';
  position:absolute;
  top:12px;right:12px;
  background:rgba(24,17,10,.85);
  color:#F4D58D;
  font-size:10px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:4px 10px;
  border-radius:999px;
  z-index:3;
}

/* ── Pagination ── */
.pl-pagination{
  display:flex;
  justify-content:center;
  gap:6px;
  list-style:none;
  margin:32px 0 0;
  padding:0;
  flex-wrap:wrap;
}
.pl-pagination li{margin:0}
.pl-pagination a,
.pl-pagination span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:38px;
  height:38px;
  padding:0 12px;
  border-radius:8px;
  border:1px solid #e3ddd0;
  background:#fff;
  color:#18110A;
  text-decoration:none;
  font-weight:500;
  font-size:.88rem;
  transition:all .15s ease;
}
.pl-pagination a:hover{
  background:#faf5e8;
  border-color:#C9A24B;
  color:#C9A24B;
}
.pl-pagination li.active span{
  background:#18110A;
  color:#F4D58D;
  border-color:#18110A;
}
.pl-pagination li.disabled span{opacity:.4;cursor:not-allowed}
.pl-pagination span.ellipsis{border:0;background:transparent;color:#aaa}

/* ── Responsive ── */
@media (max-width:1199.98px){
  .pl-prod-grid{grid-template-columns:repeat(3,1fr);gap:16px}
}
@media (max-width:991.98px){
  .pl-grid{grid-template-columns:1fr;gap:16px}
  .pl-sidebar{
    position:static;
    display:none;
    padding:18px 16px;
  }
  .pl-sidebar.open{display:block}
  .pl-filter-toggle{display:block}
  .pl-prod-grid{grid-template-columns:repeat(3,1fr);gap:14px}
}
@media (max-width:640px){
  .pl-wrap{padding:18px 12px 40px}
  .pl-prod-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .pl-controls{padding:12px 14px;gap:10px}
  .pl-result-count{width:100%;text-align:center}
  .pl-sort-wrap{width:100%;justify-content:space-between}
  .pl-sort-select{flex:1}
}