/* ── Banner ── */
.vp-banner {
  background: var(--primary-dk);
  padding: 100px 0 36px;
  position: relative;
  overflow: hidden;
}
.vp-banner::before {
  content:''; position:absolute; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23C9A84C' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
}
.vp-breadcrumb { position:relative; z-index:1; margin-bottom:14px; }
.vp-breadcrumb .breadcrumb-item,
.vp-breadcrumb .breadcrumb-item a { color:rgba(255,255,255,0.5); font-size:0.8rem; }
.vp-breadcrumb .breadcrumb-item.active { color:rgba(255,255,255,0.75); }
.vp-breadcrumb .breadcrumb-item+.breadcrumb-item::before { color:rgba(255,255,255,0.3); }
.vp-banner-title {
  font-family:'Playfair Display',serif; font-size:clamp(1.8rem,3.5vw,2.6rem);
  color:#fff; font-weight:700; margin-bottom:6px; position:relative; z-index:1;
}
.vp-banner-title em { color:var(--accent); font-style:italic; }
.vp-banner-sub { color:rgba(255,255,255,0.55); font-size:0.9rem; position:relative; z-index:1; }

/* ── Main layout ── */
.vp-main { padding-top:36px; padding-bottom:60px; }

/* ── Filter Sidebar ── */
.vp-filter-card {
  background:var(--bg-white); border-radius:var(--radius-lg);
  border:1px solid var(--border-light);
  overflow:hidden; position:sticky; top:86px;
  /*max-height: calc(100vh - 100px);*/
  /*overflow-y: auto;*/
}
.vp-filter-header {
  padding:16px 20px; border-bottom:1px solid var(--border-light);
  background:var(--bg);
}
.vp-filter-title { font-weight:600; font-size:0.9rem; color:var(--text); }
.vp-clear-btn {
  font-size:0.75rem; color:var(--primary); background:none;
  border:none; cursor:pointer; padding:0; font-weight:500;
  transition:opacity 0.2s;
}
.vp-clear-btn:hover { opacity:0.7; }
.vp-filter-group {
  padding:16px 20px;
  border-bottom:1px solid var(--border-light);
}
.vp-filter-group-title {
  font-size:0.72rem; letter-spacing:1.8px; text-transform:uppercase;
  color:var(--text-muted); font-weight:500; margin-bottom:12px;
}
.vp-filter-list { display:flex; flex-direction:column; gap:6px; max-height:220px; overflow-y:auto; }
.vp-filter-list::-webkit-scrollbar { width:3px; }
.vp-filter-list::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }
.vp-check-label {
  display:flex; align-items:center; gap:8px; cursor:pointer;
  padding:5px 6px; border-radius:6px; transition:background 0.15s;
  font-size:0.84rem;
}
.vp-check-label:hover { background:rgba(139,26,47,0.05); }
.vp-checkbox { accent-color:var(--primary); width:15px; height:15px; cursor:pointer; flex-shrink:0; }
.vp-check-text { flex:1; color:var(--text); }
.vp-check-count { font-size:0.7rem; color:var(--text-muted); }

/* range slider */
.vp-range {
  width:100%; accent-color:var(--primary);
  height:4px; cursor:pointer; display:block; margin-bottom:6px;
}
.vp-range-val { font-size:0.78rem; font-weight:500; color:var(--primary); }
.vp-budget-labels { display:flex; justify-content:space-between; font-size:0.68rem; color:var(--text-muted); margin-top:4px; }

/* ── Toolbar ── */
.vp-toolbar {
  background:var(--bg-white); border-radius:var(--radius-md);
  border:1px solid var(--border-light);
  padding:14px 18px;
}
.vp-result-count { font-size:0.875rem; color:var(--text-muted); }
.vp-result-count strong { color:var(--text); }
.vp-sort-select {
  border:1px solid var(--border-light); border-radius:var(--radius-sm);
  padding:7px 32px 7px 12px; font-size:0.83rem; color:var(--text);
  background:var(--bg); cursor:pointer; outline:none;
  appearance:auto;
}
.vp-view-toggle {
  display:flex; gap:4px; background:var(--bg);
  border:1px solid var(--border-light); border-radius:var(--radius-sm); padding:3px;
}
.vp-view-btn {
  width:32px; height:32px; border:none; background:none;
  border-radius:6px; cursor:pointer; font-size:0.9rem;
  color:var(--text-muted); transition:all 0.2s;
  display:flex; align-items:center; justify-content:center;
}
.vp-view-btn.active {
  background:var(--primary); color:#fff;
}
.vp-filter-toggle {
  background:var(--primary); color:#fff; border:none;
  border-radius:var(--radius-sm); padding:8px 16px;
  font-size:0.83rem; font-weight:500; cursor:pointer;
}

/* ── Active filter tags ── */
.vp-tag {
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(139,26,47,0.08); color:var(--primary);
  border:1px solid rgba(139,26,47,0.18);
  border-radius:20px; font-size:0.7rem; padding:2px 10px 2px 8px;
  cursor:pointer; transition:background 0.15s;
}
.vp-tag:hover { background:rgba(139,26,47,0.15); }

/* ── Grid layout ── */
.vp-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  transition:all 0.3s;
}
.vp-grid.list-view {
  grid-template-columns:1fr;
  gap:16px;
}

/* List card */
.vp-card-list {
  background:var(--bg-white); border-radius:var(--radius-lg);
  border:1px solid var(--border-light);
  display:flex; overflow:hidden;
  transition:var(--transition);
}
.vp-card-list:hover { box-shadow:var(--shadow-md); border-color:rgba(201,168,76,0.45); transform:translateY(-3px); }
.vp-list-img {
  width:220px; flex-shrink:0; position:relative; overflow:hidden;
}
.vp-list-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.4s; }
.vp-card-list:hover .vp-list-img img { transform:scale(1.05); }
.vp-list-body { padding:20px 22px; flex:1; display:flex; flex-direction:column; justify-content:space-between; }
.vp-list-name { font-family:'Playfair Display',serif; font-size:1.1rem; font-weight:700; margin:2px 0 8px; }
.vp-list-desc { font-size:0.84rem; color:var(--text-muted); line-height:1.65; margin-bottom:0; }
.vp-list-price strong { color:var(--primary); font-size:0.9rem; }
.vcity-inline { font-size:0.75rem; color:var(--text-muted); }

/* badge extra */
.vbadge.success { background:#198754; color:#fff; }

/* ── No results ── */
.vp-no-results {
  text-align:center; padding:60px 20px;
  color:var(--text-muted);
}
.vp-link-btn { background:none; border:none; color:var(--primary); cursor:pointer; font-weight:500; padding:0; text-decoration:underline; }

/* ── Loader ── */
/*.vp-loader { display:flex; align-items:center; justify-content:center; gap:12px; padding:32px; color:var(--text-muted); font-size:0.875rem; }
.vp-spinner {
  width:22px; height:22px; border:2.5px solid var(--border);
  border-top-color:var(--primary); border-radius:50%;
  animation:spin 0.7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }*/
.vp-pagination { flex-wrap:wrap; }
.vp-page-btn {
  min-width:38px; height:38px; padding:0 12px;
  border:1px solid var(--border-light); border-radius:var(--radius-sm);
  background:var(--bg-white); color:var(--text);
  font-size:0.85rem; font-weight:500; cursor:pointer;
  transition:var(--transition); display:flex; align-items:center; justify-content:center;
}
.vp-page-btn:hover { border-color:var(--primary); color:var(--primary); }
.vp-page-btn.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.vp-page-btn:disabled { opacity:0.4; cursor:not-allowed; pointer-events:none; }
.vp-page-btn.dots { cursor:default; border-color:transparent; background:none; }
.vp-page-btn.dots:hover { color:var(--text); border-color:transparent; }

/* ── Mobile backdrop ── */
.vp-backdrop {
  position:fixed; inset:0; background:rgba(0,0,0,0.45);
  z-index:998; backdrop-filter:blur(2px);
}

/* ── Fade in animation ── */
.vp-item { animation:vItemIn 0.35s ease both; }
@keyframes vItemIn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
.vp-item.hidden { display:none !important; }

/* ── Responsive ── */
@media (max-width:1100px) { .vp-grid:not(.list-view) { grid-template-columns:repeat(2,1fr); } }
@media (max-width:991px) {
  #filterSidebar {
    position:fixed; top:0; left:-320px; width:300px; height:100vh;
    z-index:999; overflow-y:auto; transition:left 0.3s ease;
    background:var(--bg-white); padding:16px;
    box-shadow:4px 0 24px rgba(0,0,0,0.15);
  }
  #filterSidebar.open { left:0; }
  .vp-filter-card { position:static; border:none; box-shadow:none; }
  .vp-grid:not(.list-view) { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:576px) {
  .vp-grid:not(.list-view) { grid-template-columns:1fr; }
  .vp-list-img { width:120px; }
  .vp-banner { padding:90px 0 28px; }
}