`assets/dw-hfilter.css`

141 lines
/* ============================================================================
   DW Horizontal Filter Bar — CSS (Approach B)
   Custom chip bar that proxies into Boost's hidden native filter tree.

   STRICT SCOPING (this is what prevents re-breaking the global page layout):
   Only TWO selector families are allowed in this file —
     1. body.dw-filters-horizontal .boost-sd__<specific-class>
        (hide native tree + free the grid to full width; mirrors the proven
         dw-filters-collapsed width rules in dw-boost-overrides.liquid 17-22)
     2. .dw-hfilter-*  (our own unique namespace — these strings exist nowhere
         else in the theme, so they're safe globally)
   NO bare element/body/html/* selectors, NO .shopify-section, NO generic
   [class*=...] substring selectors, NO unprefixed .boost-sd__* rules.
   ============================================================================ */

/* --- 1. Hide Boost's native vertical filter tree + free the grid full-width --- */
body.dw-filters-horizontal .boost-sd__filter-tree-vertical{display:none !important}
body.dw-filters-horizontal .boost-sd__filter-tree-vertical-content{display:none !important}
body.dw-filters-horizontal .boost-sd__filter-tree-vertical-refine-by{display:none !important}
body.dw-filters-horizontal .boost-sd__product-list{width:100% !important;max-width:100% !important}
body.dw-filters-horizontal .boost-sd__filter-products-wrap{display:block !important;max-width:100% !important;width:100% !important}
body.dw-filters-horizontal .boost-sd__filter-products-wrap > div{display:block !important;max-width:100% !important;width:100% !important}
body.dw-filters-horizontal .boost-sd__product-list-wrapper{max-width:100% !important;width:100% !important;flex:1 !important}

/* --- 2. Bar collapse: the toggle pill (in dw-boost-overrides.liquid) hides our bar --- */
body.dw-filters-horizontal.dw-hbar-collapsed .dw-hfilter-bar{display:none !important}

/* --- 3. Our own chip bar --- */
.dw-hfilter-bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  position:relative;z-index:20;
  width:100%;box-sizing:border-box;
  margin:4px 0 14px;padding:0;
  font-family:-apple-system,BlinkMacSystemFont,sans-serif;
}

.dw-hfilter-chip{
  position:relative;
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;
  color:#000;background:#fff;border:1.5px solid #000;border-radius:999px;
  cursor:pointer;user-select:none;white-space:nowrap;line-height:1;
}
.dw-hfilter-chip:hover{background:#f5f5f5}
.dw-hfilter-chip.dw-hfilter-active{background:#000;color:#fff}
.dw-hfilter-chip.dw-hfilter-open{background:#000;color:#fff}

.dw-hfilter-chip-label{display:inline-block}

.dw-hfilter-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:16px;height:16px;padding:0 4px;box-sizing:border-box;
  font-size:10px;font-weight:700;letter-spacing:0;
  background:#9B3B3B;color:#fff;border-radius:999px;
}
.dw-hfilter-chip.dw-hfilter-active .dw-hfilter-badge{background:#fff;color:#000}

.dw-hfilter-caret{
  width:0;height:0;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;
  transition:transform .15s ease;
}
.dw-hfilter-chip.dw-hfilter-open .dw-hfilter-caret{transform:rotate(180deg)}

/* --- 4. Accordion dropdown panel --- */
.dw-hfilter-panel{
  display:none;
  position:absolute;top:calc(100% + 6px);left:0;z-index:30;
  min-width:200px;max-width:320px;max-height:340px;overflow-y:auto;
  padding:8px;box-sizing:border-box;
  background:#fff;border:1.5px solid #000;border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.14);
}
.dw-hfilter-chip.dw-hfilter-open .dw-hfilter-panel{display:block}

.dw-hfilter-opt{
  display:flex;align-items:center;gap:8px;
  padding:7px 9px;margin:1px 0;
  font-size:12px;font-weight:500;text-transform:none;letter-spacing:0;color:#333;
  border-radius:7px;cursor:pointer;white-space:nowrap;
}
.dw-hfilter-opt:hover{background:#f3f3f3}
.dw-hfilter-opt.dw-hfilter-opt-selected{font-weight:700;color:#000}

.dw-hfilter-check{
  display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;flex:0 0 15px;
  border:1.5px solid #999;border-radius:4px;
  font-size:11px;line-height:1;color:#fff;background:#fff;
}
.dw-hfilter-opt.dw-hfilter-opt-selected .dw-hfilter-check{
  background:#000;border-color:#000;
}

.dw-hfilter-swatch{
  display:inline-block;width:15px;height:15px;flex:0 0 15px;
  border-radius:50%;border:1px solid rgba(0,0,0,.2);
}

.dw-hfilter-opt-text{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis}

.dw-hfilter-opt-empty{
  padding:8px 9px;font-size:12px;color:#999;font-style:italic;
}

/* Price passthrough panel: open native control hint */
.dw-hfilter-price-note{
  padding:8px 9px;font-size:11px;color:#666;line-height:1.4;
}

/* --- 5. Fallback toggle (only injected if the liquid pill is absent) --- */
.dw-hfilter-toggle{
  display:inline-flex;align-items:center;gap:6px;padding:6px 14px;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;
  background:#fff;border:1.5px solid #000;border-radius:999px;cursor:pointer;
}
.dw-hfilter-toggle:hover{background:#f5f5f5}

/* --- 6. Responsiveness --- */
@media(max-width:768px){
  .dw-hfilter-bar{
    flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    gap:6px;padding-bottom:4px;margin-bottom:10px;
    scrollbar-width:none;
  }
  .dw-hfilter-bar::-webkit-scrollbar{display:none}
  .dw-hfilter-chip{flex:0 0 auto}

  /* Panels become a fixed bottom-sheet */
  .dw-hfilter-panel{
    position:fixed;top:auto;left:0;right:0;bottom:0;
    width:100%;max-width:100%;min-width:0;max-height:60vh;
    border-radius:16px 16px 0 0;border-width:1.5px 0 0 0;
    box-shadow:0 -8px 28px rgba(0,0,0,.22);
    padding:14px 14px calc(14px + env(safe-area-inset-bottom));
  }
  .dw-hfilter-opt{padding:11px 10px;font-size:14px}
}