:root{ --wf-gap:16px; }
.wf-wrapper{ width:100%; }
.wf-row{ display:flex; gap: var(--wf-gap); align-items:start; }
.wf-col{ background:#fff; }

/* Filters (right) */
.wf-filters{ border:1px solid #e5e7eb; border-radius:8px; padding:16px; position:sticky; top:20px; grid-column: 2; width:320px; flex: 0 0 320px; }
.wf-filter-toggle{ display:none; margin-bottom:10px; padding:8px 12px; border:1px solid #e5e7eb; border-radius:999px; background:var(--wf-filter-bg,#fff); cursor:pointer; color:#111827; box-shadow:0 2px 6px rgba(0,0,0,.06); gap:8px; }
.wf-filter-toggle .wf-ic{ color: var(--wf-filter-ic,#111827); display:inline-flex; }
.wf-filter-toggle .wf-ic svg{ fill: currentColor; stroke: currentColor; }
.wf-filter-toggle .wf-label{ line-height:1; }
.wf-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:9998; }
.wf-overlay[hidden]{ display:none; }
.wf-filters.is-modal{ position:fixed; right:0; top:0; height:100vh; width:min(92vw, 360px); max-width:92vw; overflow:auto; z-index:9999; background:#fff; border-left:1px solid #e5e7eb; border-radius:0; padding:20px; }
.wf-filter-group{ margin-bottom:16px; }
.wf-filter-title{ font-weight:600; margin-bottom:8px; }
.wf-checkbox{ display:flex; align-items:center; gap:8px; margin:6px 0; cursor:pointer; }
.wf-checkbox input{ width:16px; height:16px; }
.wf-price-inputs{ display:flex; align-items:center; gap:8px; }
.wf-price-inputs input{ width:100%; max-width:120px; padding:6px 8px; border:1px solid #e5e7eb; border-radius:6px; }
.wf-sep{ opacity:0.6; }
.wf-price-bounds{ display:flex; justify-content:space-between; gap:8px; font-size:12px; color:#6b7280; margin-bottom:8px; }
.wf-price-slider{ position:relative; height:36px; display:flex; align-items:center; gap:8px; margin:8px 0 12px; }
.wf-price-slider input[type=range]{
  -webkit-appearance:none; appearance:none; position:absolute; left:0; right:0; width:100%; height:4px; background:transparent; outline:none; pointer-events:none; /* allow thumbs only */
}
.wf-price-slider .wf-slider-track{ position:absolute; left:0; right:0; height:4px; background:#e5e7eb; border-radius:4px; }
.wf-price-slider .wf-slider-range{ position:absolute; height:4px; background:var(--wf-accent,#0ea5e9); border-radius:4px; left:0; right:0; }
.wf-price-slider input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:16px; height:16px; border-radius:50%; background:var(--wf-accent,#0ea5e9); cursor:pointer; border:none; box-shadow:0 0 0 2px #fff; position:relative; z-index:2; pointer-events:auto; /* enable dragging */
}
.wf-price-slider input[type=range]::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%; background:var(--wf-accent,#0ea5e9); cursor:pointer; border:none; position:relative; z-index:2;
}

/* Products (left) */
.wf-products{ grid-column: 1; width: 100%; flex: 1 1 auto;}
.wf-grid{ display:grid; grid-template-columns: repeat(var(--wf-columns,4), minmax(0,1fr)); gap: var(--wf-gap); }
.wf-item{ display:block; border:1px solid #e5e7eb; border-radius:8px; overflow:hidden; text-decoration:none; color:inherit; background:#fff; }
.wf-thumb img{ width:100%; height:auto; display:block; }
.wf-title{ padding:8px 10px; font-size:14px; min-height:44px; }
.wf-price{ padding:0 10px 10px; color:#111827; font-weight:600; }

/* Pagination */
.wf-pagination{ display:flex; justify-content:center; margin-top:16px; }
.wf-pages{ display:flex; gap:6px; align-items:center; }
.wf-page, .wf-nav{ height:32px; min-width:32px; padding:0 10px; border:1px solid #e5e7eb; background:#fff; border-radius:8px; cursor:pointer; color:#374151; display:inline-flex; align-items:center; justify-content:center; font-size:13px; }
.wf-page.active{ border-color: var(--wf-accent,#7c3aed); color: var(--wf-accent,#7c3aed); font-weight:600; box-shadow: 0 0 0 2px rgba(124,58,237,0.12); }
.wf-nav[disabled]{ opacity:.4; cursor:not-allowed; }
.wf-ellipsis{ padding:0 4px; color:#9ca3af; }

/* Helpers */
.wf-loading, .wf-empty{ padding:20px; text-align:center; color:#6b7280; }
.wf-loading-img{ display:flex; align-items:center; justify-content:center; padding:32px; }
.wf-loading-img img{ max-width:96px; height:auto; animation:wf-pulse 1.2s ease-in-out infinite alternate; opacity:.85; }
@keyframes wf-pulse{ from{ opacity:.5; } to{ opacity:1; } }

/* Responsive */
@media (max-width:1024px){
  .wf-filters{ width:280px; flex-basis:280px; }
}
@media (max-width:768px){
  .wf-row{ flex-direction:column; }
  .wf-filter-toggle{ display:inline-flex; align-items:center; gap:8px; }
  .wf-filters{ display:none; position:static; width:auto; flex-basis:auto; }
  .wf-filters.is-modal{ display:block; }
}

/* Floating sticky toggle on mobile */
@media (max-width:768px){
  .wf-filter-toggle.is-sticky{ position:fixed; bottom: var(--wf-offy,16px); z-index: 10000; }
  .wf-wrapper .wf-filter-toggle.right.is-sticky{ right: var(--wf-offx,16px); }
  .wf-wrapper .wf-filter-toggle.left.is-sticky{ left: var(--wf-offx,16px); }
}

/* Responsive grid columns via CSS variables */
.wf-grid{ --wf-columns: var(--wf-col-d, 4); }
@media (max-width:1024px){ .wf-grid{ --wf-columns: var(--wf-col-t, 2); } }
@media (max-width:768px){ .wf-grid{ --wf-columns: var(--wf-col-m, 1); } }