/* ==========================================================================
   Outtabounds — Collection page layout  v1  |  2026-07-13
   Styles the top filter bar and the full-width product listing. Only applies on
   collection pages (body.ob-collection, added by ob-collection.js).
   Load after ob-header.css on both layouts.
   ========================================================================== */

/* full-width product listing on collection pages */
body.ob-collection #content > .container {
  max-width: none;
  width: auto;
  padding-left: 30px;
  padding-right: 30px;
}

/* horizontal filter bar above the products */
body.ob-collection .ob-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 20px 44px;
  padding: 0 0 18px;
  margin: 0 0 22px;
  border-bottom: 1px solid #e6e6e6;
}
body.ob-collection .ob-filterbar .block { margin: 0; }
body.ob-collection .ob-filterbar .block h4,
body.ob-collection .ob-filterbar .block .title {
  margin: 0 0 8px;
  font-family: 'Dosis','Hind',sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .4px;
}
/* price slider + brand select sizing in the bar */
body.ob-collection .ob-filterbar #collection-filter-price,
body.ob-collection .ob-filterbar .ui-slider { width: 260px; max-width: 60vw; }
body.ob-collection .ob-filterbar select { min-width: 190px; }

@media (max-width: 767.98px) {
  body.ob-collection #content > .container { padding-left: 15px; padding-right: 15px; }
  body.ob-collection .ob-filterbar { gap: 16px 28px; }
}