/* static/css/pages/results.css
   Results page layout only (no shared components here)
*/

/* Headings spacing */
.results-main h2 {
  margin: 0 0 0.75rem 0;
}

/* Grid layout: Filters | Content */
.results-shell{
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin-top: 18px;
}

@media (max-width: 1100px){
  .results-shell{
    grid-template-columns: 240px minmax(0, 1fr);
  }
}

@media (max-width: 900px){
  .results-shell{
    grid-template-columns: 1fr;
  }
}

/* LEFT */
.results-sidebar{
  position: sticky;
  top: 16px;              /* stays near top */
  align-self: start;      /* required for sticky in CSS grid */
  height: calc(100vh - 32px);
  overflow: auto;         /* sidebar can scroll internally if tall */
  padding-right: 4px;
}

/* RIGHT */
.results-main{
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Row containers on the right */
.results-section{
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
  padding: 16px 16px;
}

.results-section--tight{
  padding: 12px 14px;
}

.result-item.is-hidden{
  display: none;
}

/* Products grid */
.grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.25rem;
  margin-top: 1rem;
}

/* Alerts */
.alert{
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  background: #ffe6e6;
  color: #8a1f1f;
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}

.products-head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}

.products-title{
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.products-count{
  font-weight: 600;
  color: #70757a;
}



/* price intelligence */
.market-strip{
  border:1px solid #eee;
  border-radius:14px;
  padding:10px 12px;
  background:#fff;
  margin-bottom:12px;
}

.market-strip__title{
  font-weight:800;
  font-size:13px;
  margin-bottom:4px;
}

.market-strip__meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  font-size:12.5px;
}

.market-strip__sep{ opacity:.5; }

.market-strip__note{
  margin-left:auto;
  font-size:12px;
  opacity:.7;
}


/* Typical groups row (uses your existing mo-* classes) */
.mo-segment-grid{
  display: flex;
  flex-wrap: nowrap;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 10px;
  -webkit-overflow-scrolling: touch;
}

.mo-segment-card{
  flex: 0 0 220px;
  background: #ffffff;
  border-radius: 12px;
  padding: 12px;
  border: 1px solid #eee;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.mo-segment-card:hover{
  border-color: #a27be3;
  box-shadow: 0 4px 12px rgba(162,123,227,0.25);
  transform: translateY(-3px);
}

.mo-seg-img{
  width: 100%;
  height: 130px;
  object-fit: contain;
  border-radius: 8px;
  background: #f7f7f7;
  margin-bottom: 8px;
}

.mo-seg-title{
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 2px;
  color: #4a148c;
  text-align: center;
}

.mo-seg-range{
  font-size: 0.8rem;
}

.mo-seg-count{
  font-size: 0.75rem;
  color: #666;
}

/* Typical group collage (2x2 thumbnails) */
/* Typical group collage (2x2 thumbnails) */
.mo-seg-collage{
  width: 100%;
  aspect-ratio: 4 / 3;     /* <-- key: more height than 130px */
  min-height: 140px;       /* safety for very small cards */
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
  border-radius: 8px;
  background: #f7f7f7;
  margin-bottom: 8px;
  overflow: hidden;
  box-sizing: border-box;
}

.mo-seg-thumb{
  width: 100%;
  height: 100%;
  object-fit: contain;     /* shows whole product image */
  background: #f7f7f7;
  display: block;
}

.mo-segment-card.is-active{
  border-color: rgba(126,87,194,0.75);
  background: rgba(126,87,194,0.08);
  box-shadow: 0 6px 14px rgba(126,87,194,0.18);
}

.active-segment-bar{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.active-segment-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(126,87,194,0.10);
  border: 1px solid rgba(126,87,194,0.25);
  color: #202124;
  font-size: 13px;
}

.active-segment-x{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  text-decoration:none;
  color: rgba(76,29,149,0.95);
  font-weight: 800;
  line-height: 1;
}

.active-segment-x:hover{
  background: rgba(126,87,194,0.18);
}

.active-segment-link{
  font-size: 13px;
  text-decoration:none;
  color: rgba(76,29,149,0.95);
  font-weight: 600;
}

.active-segment-link:hover{
  text-decoration: underline;
}

/* === Compare Drawer === */
.cmp-lock { overflow: hidden; }

.cmp-drawer {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 2000;
}

.cmp-drawer.is-open { display: block; }

.cmp-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
}

.cmp-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(520px, 92vw);
  background: #fff;
  box-shadow: -18px 0 40px rgba(0,0,0,.18);
  display: flex;
  flex-direction: column;
}

.cmp-drawer__hdr {
  padding: 14px 16px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cmp-drawer__title { font-size: 16px; font-weight: 700; }
.cmp-drawer__sub { font-size: 12px; margin-top: 2px; }

.cmp-drawer__close {
  border: 1px solid #e6e6e6;
  background: #fff;
  border-radius: 10px;
  width: 34px;
  height: 34px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.cmp-drawer__body {
  padding: 14px 16px 18px;
  overflow: auto;
}

.cmp-loading, .cmp-empty {
  padding: 16px;
  border: 1px dashed #ddd;
  border-radius: 12px;
  background: #fafafa;
}

/* === Drawer content === */
.cmp-block { margin-bottom: 16px; }
.cmp-kicker { font-size: 12px; font-weight: 700; margin-bottom: 8px; }

.cmp-target {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(91,14,87,.18);
  border-radius: 14px;
  background: #fff;
}

.cmp-target__img {
  width: 92px;
  height: 92px;
  object-fit: cover;
  border-radius: 12px;
  background: #f2f2f2;
}

.cmp-source { font-size: 12px; font-weight: 700; opacity: .75; }
.cmp-title { font-size: 13px; font-weight: 650; margin-top: 4px; }
.cmp-price { margin-top: 6px; font-weight: 800; }
.cmp-actions { margin-top: 10px; display: flex; gap: 10px; flex-wrap: wrap; }

.cmp-section-hdr { margin: 10px 0 10px; }
.cmp-section-title { font-weight: 800; }
.cmp-section-sub { font-size: 12px; margin-top: 2px; }

.cmp-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.cmp-card {
  position: relative;
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 10px;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 14px;
  background: #fff;
}

.cmp-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(91,14,87,.10);
  color: #5b0e57;
}

.cmp-card__img {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: 12px;
  background: #f2f2f2;
}

.cmp-card__source { font-size: 12px; font-weight: 700; opacity: .7; }
.cmp-card__title { font-size: 12.5px; font-weight: 650; margin-top: 3px; }
.cmp-card__price { margin-top: 6px; font-weight: 800; }
.cmp-card__actions { margin-top: 8px; display: flex; gap: 8px; }

.cmp-details { border: 1px solid #eee; border-radius: 14px; padding: 10px; background: #fff; }
.cmp-summary { cursor: pointer; font-weight: 800; }


/* === Results: single column === */
.results-shell--single {
  display: block;
}
.results-shell--single .results-main {
  width: 100%;
}

/* === Products header bar === */
.products-head--bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.products-head__right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.products-sort {
  display: flex;
  align-items: center;
  gap: 8px;
}
.products-sort__lbl {
  font-size: 0.9rem;
  opacity: 0.8;
}
.products-sort__sel {
  border-radius: 10px;
  padding: 8px 10px;
}

/* === Filters drawer inside products === */
.products-filtersDrawer {
  margin: 12px 0 18px;
  border-radius: 14px;
}

/* Remove sidebar-ish look when filters are embedded */
.products-filtersDrawer .filter-panel.section {
  margin: 0;
}

/* === Price intelligence inside products === */
.market-strip--inProducts {
  margin: 12px 0 18px;
}
.market-strip__top {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.market-strip__hist {
  margin-top: 10px;
}
.market-strip__hint {
  margin-top: 8px;
}

/* Make histogram look good in the embedded strip */
.market-strip--inProducts .fh--price {
  padding: 0;
  background: transparent;
}

/* === Typical groups: two rows, bigger cards === */
.mo-segment-grid--2rows{
  display:grid;
  grid-auto-flow: column;
  grid-template-rows: 1fr;              /* one row only */
  grid-auto-columns: minmax(280px, 320px);
  gap:14px;
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:10px;
  scroll-snap-type:x mandatory;
}

.mo-segment-card--big {
  scroll-snap-align: start;
  border-radius: 16px;
  padding: 12px;
}

.mo-seg-collage--big {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 10px;
}
.mo-seg-collage--big .mo-seg-thumb {
  width: 100%;
  height: 78px;
  object-fit: cover;
  display: block;
}

/* Slightly larger text for the typical groups */
.mo-segment-card--big .mo-seg-title {
  font-size: 1.05rem;
  font-weight: 650;
}
/* =========================
   Products header (pro layout)
========================= */
.pfhead{
  padding: 10px 4px 14px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  margin-bottom: 10px;
}

.pfhead__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.pfhead__row--top{
  margin-bottom: 8px;
}

.pfhead__titleWrap{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width: 220px;
}

.pfhead__title{
  margin:0;
  font-size: 1.25rem; /* consistent, not huge */
  line-height: 1.15;
}

.pfhead__count{
  font-size: .9rem;
}

.pfhead__controls{
  display:flex;
  align-items:center;
  gap:10px;
}

.pfhead__sort{
  display:flex;
  align-items:center;
  gap:8px;
}

.pfhead__sortLbl{
  font-size:.9rem;
  opacity:.8;
}

.pfhead__sortSel{
  border-radius:10px;
  padding:8px 10px;
  min-width: 180px;
}

/* Legend small and tidy */
.pfhead__legend{
  display:flex;
  align-items:center;
  gap:14px;
  font-size: .9rem;
  opacity: .9;
}
.pfhead__legend i{
  margin-right: 6px;
}

/* Price position compact so it doesn't dominate */
.pricepos--compact .pricepos__label{
  margin-bottom: 4px;
  font-size: .85rem;
}
.pricepos--compact .pricepos__row{
  gap:8px;
}
.pricepos--compact .pricepos__track{
  height: 8px;
}
.pricepos--compact .pricepos__thumb{
  width: 12px;
  height: 12px;
}
.pricepos--compact .pricepos__pill{
  top: -24px;
  font-size: .78rem;
}

/* Responsive: stack nicely */
@media (max-width: 820px){
  .pfhead__controls{
    width:100%;
    justify-content:flex-start;
  }
  .pfhead__sortSel{ min-width: 160px; }
  .pfhead__row--bottom{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* =========================
   Price position (horizontal)
========================= */
.pricepos{ min-width: 280px; }
.pricepos__label{
  font-size:.9rem;
  opacity:.85;
  margin-bottom:6px;
}
.pricepos__row{
  display:flex;
  align-items:center;
  gap:10px;
}
.pricepos__min, .pricepos__max{
  font-size:.85rem;
  opacity:.8;
  white-space:nowrap;
}
.pricepos__track{
  position:relative;
  flex:1;
  height:10px;
  border-radius:999px;
  background: rgba(0,0,0,.08);
  min-width:180px;
}
.pricepos__thumb{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:14px;
  height:14px;
  border-radius:999px;
  background: rgba(0,0,0,.35);
  border:2px solid rgba(255,255,255,.9);
}
.pricepos__pill{
  position:absolute;
  left:50%;
  top: -26px;
  transform:translateX(-50%);
  font-size:.82rem;
  padding:2px 8px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  white-space:nowrap;
}
/* =========================
   Google-style chip bar
========================= */
.gbar{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 10px 4px 14px;
}

.gbar__filterBtn{
  width:44px;
  height:44px;
  border-radius:14px;
  border: 1px solid rgba(0,0,0,.10);
  background:#fff;
  display:grid;
  place-items:center;
}

.gbar__chips{
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
  overflow-x:auto;
  padding: 2px 2px;
  scroll-snap-type:x mandatory;
}

.gbar__chips::-webkit-scrollbar{ height: 8px; }
.gbar__chips::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.12); border-radius: 999px; }

.gchip{
  scroll-snap-align:start;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background:#fff;
  white-space:nowrap;
}

.gchip--title{
  font-weight: 650;
}
.gchip__muted{
  font-weight: 400;
  opacity:.7;
  margin-left: 8px;
}

.gchip--pricepos{
  gap:12px;
}

.gchip__label{
  font-size:.9rem;
  opacity:.8;
}

/* Price position chip internals */
.gprice{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  padding-right: 46px; /* room for the pill */
}

.gprice__min, .gprice__max{
  font-size:.85rem;
  opacity:.8;
}

.gprice__track{
  width: 220px;
  height: 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.08);
  position:relative;
}

.gprice__thumb{
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  border: 2px solid rgba(255,255,255,.9);
}

.gprice__pill{
  position:absolute;
  right: 0;
  top: -6px;
  transform: translateY(-100%);
  font-size:.78rem;
  padding: 3px 10px;
  border-radius: 999px;
  background:#fff;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  white-space:nowrap;
}

/* Sort on the far right */
.gbar__sort{
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}

.gbar__sortLbl{
  font-size:.95rem;
  opacity:.85;
}

.gbar__sortSel{
  min-width: 200px;
  padding: 10px 12px;
  border-radius: 12px;
}

/* Responsive */
@media (max-width: 900px){
  .gbar{ flex-wrap:wrap; }
  .gbar__sort{ width:100%; justify-content:flex-end; }
  .gprice__track{ width: 170px; }
}

@media (max-width: 640px){
  .gbar__sortSel{ min-width: 160px; }
  .gprice__track{ width: 140px; }
}
/* =========================
   Filters left, grid right (no :has)
========================= */
.products-layout{
  display:grid;
  grid-template-columns: 1fr; /* default: full width grid */
  gap:16px;
  align-items:start;
}

.products-layout.is-filters-open{
  grid-template-columns: 320px 1fr; /* when filters open */
}



.products-filters[hidden]{
  display:none !important;
}

@media (max-width: 1200px){
  .products-layout.is-filters-open{
    grid-template-columns: 300px 1fr;
  }
  .products-filters{ width:300px; }
}

@media (max-width: 820px){
  .products-layout,
  .products-layout.is-filters-open{
    grid-template-columns: 1fr;
  }
  .products-filters{ width:auto; }
}

/* =========================
   Filters: own scroll area
========================= */
.products-filters{
  position: sticky;
  top: calc(var(--app-header-offset) + 12px);
  max-height: calc(100vh - var(--app-header-offset) - 28px);
  overflow: auto;
  padding-right: 6px;
}



/* If your filters container has a big outer padding/margin, neutralize it here */
.products-filters .filter-panel.section{
  max-height: none;
}
/* =========================
   Product grid sizing (smaller)
========================= */
.grid--big{
  display:grid;
  gap:14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1280px){
  .grid--big{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 980px){
  .grid--big{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px){
  .grid--big{ grid-template-columns: 1fr; }
}
#resultsGrid.is-loading {
  opacity: 0.6;
  pointer-events: none;
}
/* =========================
   Grid header (matches filter title)
========================= */
.grid-head{
  display:flex;
  align-items:baseline;
  justify-content:flex-start;
  gap:12px;
  padding: 6px 2px 10px;
}

.grid-head__title{
  font-size: 1.15rem;
  font-weight: 650;
}

.grid-head__count{
  font-size: .95rem;
  opacity: .8;
}

/* =========================
   Histogram chip (final)
   - Uses real classes: .mo-histogram / .mo-hist-bar
   - Shrinks tall inline heights via scaleY (keeps shape)
========================= */
.gchip--hist{
  gap: 10px;
  align-items: center;
}

/* Hide the internal "Price" title inside the chip */
.gchip--hist .fh__top{
  display: none !important;
}

/* Keep the histogram compact inside the pill */
.gchip--hist .fh--price{
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

/* Histogram layout */
.gchip--hist .mo-histogram{
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 34px;                 /* target visual height */
  transform: scaleY(0.35);      /* compress inline bar heights */
  transform-origin: bottom;
}

/* Bars: thicker + rounded */
.gchip--hist .mo-hist-bar{
  width: 10px;
  border-radius: 6px;
}

/* Remove any "muted" helper text inside the chip (if present elsewhere) */
.gchip--hist .muted{
  display: none !important;
}
/* =========================
   Final top bar: segmented price bands
========================= */

/* remove old histogram / old price chip visuals if still present anywhere */
.gchip--hist,
.gchip--pricepos{
  display: none !important;
}

.gbar{
  display:flex;
  align-items:center;
  gap:14px;
  padding: 10px 4px 14px;
}

.gbar__chips{
  flex: 1;
  min-width: 0;
  display:flex;
  align-items:center;
}

.gchip--bands{
  width: auto !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.gbands__meta{
  display:flex;
  flex-direction:column;
  gap:2px;
  flex: 0 0 auto;
  min-width: 110px;
}

.gbands__label{
  font-size: .95rem;
  font-weight: 600;
  color: #202124;
  line-height: 1.1;
}

.gbands__hint{
  font-size: .76rem;
  color: #6b7280;
  line-height: 1.1;
}

.gbands__wrap{
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.gbands__min,
.gbands__max{
  font-size: .9rem;
  color: #5f6368;
  white-space: nowrap;
  flex: 0 0 auto;
}

.gbands__track{
  position: relative !important;
  flex: 1 !important;
  width: auto !important;
  max-width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding-top: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.gbands__seg{
  display:flex;
  align-items:center;
  justify-content:center;
  height: 50px;
  border-radius: 999px;
  text-decoration:none;
  font-size: .8rem;
  font-weight: 700;
  color: #5f6368;
  border: 1px solid rgba(126,87,194,.18);
  background: linear-gradient(180deg, rgba(126,87,194,.10), rgba(126,87,194,.18));
  transition: all .15s ease;
}

.gbands__seg:hover{
  color: #4c1d95;
  border-color: rgba(126,87,194,.45);
  background: linear-gradient(180deg, rgba(126,87,194,.18), rgba(126,87,194,.28));
}

.gbands__seg.is-active{
  color: #fff;
  border-color: rgba(126,87,194,.9);
  background: linear-gradient(180deg, #8b5cf6, #7c3aed);
  box-shadow: 0 4px 10px rgba(124,58,237,.22);
}



/* clean sort block */
.gbar__sort{
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  flex: 0 0 auto;
}

.gbar__sortLbl{
  font-size:.95rem;
  color:#5f6368;
}

.gbar__sortSel{
  min-width: 190px;
  padding: 10px 12px;
  border-radius: 12px;
}

/* responsive */
@media (max-width: 1100px){
  .gchip--bands{
    gap:12px;
  }

  .gbands__meta{
    min-width: 96px;
  }

  .gbands__track{
    min-width: 240px;
  }
}

@media (max-width: 900px){
  .gbar{
    flex-wrap: wrap;
  }

  .gbar__chips{
    order: 2;
    width: 100%;
  }

  .gbar__sort{
    order: 3;
    width: 100%;
    justify-content: flex-end;
  }

  .gchip--bands{
    width: 100%;
  }

  .gbands__track{
    min-width: 180px;
  }
}

@media (max-width: 640px){
  .gchip--bands{
    flex-direction: row !important;
    align-items: center !important;
    border-radius: 0 !important;
  }

  .gbands__meta{
    min-width: 0;
  }

  .gbands__wrap{
    width: 100%;
  }

  .gbands__track{
    min-width: 0;
  }

  .gbands__seg{
    font-size: .72rem;
  }
}
/* gbar belongs to product column only */
.products-gridWrap .gbar{
  width: 100%;
  margin-bottom: 10px;
}

/* make sure product column can shrink correctly */
.products-gridWrap{
  min-width: 0;
}
/* =========================
   Price band tabs (neutral base)
========================= */
.gchip--tabs{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 0;
  border: 0;
  background: transparent;
}

.gtab{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  height: 44px;                /* same as filter/sort height */
  padding: 0 14px;
  min-width: 200px;            /* similar to sort select */
  border-radius: 12px;

  text-decoration:none;
  font-weight: 650;
  font-size: .92rem;

  /* neutral like filter button */
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  color: rgba(17,24,39,.90);

  transition: all .15s ease;
}

.gtab:hover{
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.18);
}

/* active: stronger (can be purple or any accent) */
.gtab.is-active{
  background: rgba(124,58,237,.12);          /* active tint */
  border-color: rgba(124,58,237,.35);
  color: rgba(17,24,39,.95);
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
}


/* responsive: allow horizontal scroll like Google */
@media (max-width: 1100px){
  .gbar__chips{
    overflow-x:auto;
  }
}


/* Filter button: neutral base + corner X when active */
.gbar__filterBtn{
  position: relative;
  width:44px;
  height:44px;
  border-radius:14px;
  border: 1px solid rgba(0,0,0,.12);
  background:#fff;
  display:grid;
  place-items:center;
}

.gbar__filterX{
  position:absolute;
  top: 6px;
  right: 6px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  font-size: 14px;
  line-height: 1;
  background: rgba(0,0,0,.10);
  color: rgba(0,0,0,.70);
  opacity: 0;
  transform: scale(.9);
  transition: opacity .15s ease, transform .15s ease;
}

.gbar__filterBtn.is-active{
  background: rgba(124,58,237,.12);     /* visible tint */
  border-color: rgba(124,58,237,.35);
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
}

.gbar__filterBtn.is-active i{
  color: #6d28d9;                       /* icon tint */
}

.gbar__filterBtn.is-active .gbar__filterX{
  opacity: 1;
  transform: scale(1);
}
.gbar__chipsWrap {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1 1 auto;
  gap: 8px;
}

.gbar__chips {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.gbar__chips::-webkit-scrollbar {
  display: none;
}

.gbar__scrollBtn {
  width: 34px;
  height: 34px;
  border: 1px solid #d7deea;
  border-radius: 999px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(16, 24, 40, 0.08);
  transition: all 0.18s ease;
  padding: 0;
}

.gbar__scrollBtn:hover:not(.is-disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(16, 24, 40, 0.12);
}

.gbar__scrollBtn.is-disabled,
.gbar__scrollBtn:disabled {
  opacity: 0.42;
  cursor: default;
  box-shadow: none;
}

.gbar__scrollBtn--left,
.gbar__scrollBtn--right {
  flex: 0 0 auto;
}

.gbar__chipsWrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}

.gbar__chips {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.gbar__chips::-webkit-scrollbar {
  display: none;
}

.gbar__clearTabsBtn{
  border: 0;
  background: transparent;
  padding: 0 4px;
  margin-left: 8px;
  color: #8a63d2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.gbar__clearTabsBtn:hover{
  opacity: .85;
}

.gbar__clearTabsBtn i{
  font-size: 2rem;
}

/* =========================================================
   RESULTS PAGE — visual polish only
   Append at very bottom of existing results.css
   Keeps original behavior/layout logic intact
========================================================= */
/* tighter top spacing like insights */
.results-shell{
  margin-top: 4px !important;
}

/* ===== Main left/right shell ===== */
.products-layout.is-filters-open{
  gap: 22px;
}

.products-filters{
  top: 14px;
  max-height: calc(100vh - 28px);
  padding-right: 4px;
}

.products-gridWrap{
  min-width: 0;
}

/* ===== Filter panel ===== */
.products-filters .filter-panel.section{
  border-radius: 20px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
  background: var(--surface);
}

.filter-title{
  font-size: 1.75rem !important;
  line-height: 1.08;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  color: var(--text) !important;
}

.filter-subtitle{
  font-size: 0.92rem !important;
  line-height: 1.45;
  color: var(--muted) !important;
  margin: 8px 0 18px !important;
}

.gflt{
  border-top: 1px solid var(--border) !important;
  padding: 12px 0 !important;
}

.gflt__hdr{
  font-size: 0.97rem !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}

.gflt__body{
  margin-top: 10px !important;
}

.gopt{
  font-size: 0.92rem !important;
  color: var(--text-soft) !important;
}

.gopt__txt{
  color: var(--text-soft) !important;
}

.gprice{
  gap: 10px !important;
}

.gprice__in{
  min-height: 42px !important;
}

.filters-actions{
  margin-top: 18px !important;
}

.filters-actions .btn-ss{
  min-height: 46px;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  background: var(--brand-700) !important;
  color: #fff !important;
}

/* ===== Top quick bar ===== */
.products-gridWrap .gbar{
  margin-bottom: 14px;
  padding-top: 2px;
}

.gbar__filterBtn{
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-1) !important;
}

.gbar__filterBtn:hover{
  background: var(--surface-3) !important;
  border-color: var(--border-strong) !important;
}

.gbar__filterBtn.is-active{
  background: #eef4fb !important;
  border-color: #d3e0f0 !important;
}

.gbar__filterBtn.is-active i{
  color: var(--brand-700) !important;
}

.gbar__filterX{
  background: rgba(24,34,48,0.08) !important;
  color: var(--text-soft) !important;
}

.gbar__scrollBtn{
  width: 36px !important;
  height: 36px !important;
  border-radius: 999px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--text-soft) !important;
  box-shadow: var(--shadow-1) !important;
}

.gbar__scrollBtn:hover:not(.is-disabled){
  background: var(--surface-3) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-1) !important;
}

.gbar__clearTabsBtn{
  color: var(--brand-700) !important;
}

.gtab{
  min-width: 170px !important;
  height: 42px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  box-shadow: var(--shadow-1) !important;
}

.gtab:hover{
  background: var(--surface-2) !important;
  border-color: var(--border-strong) !important;
  color: var(--text) !important;
}

.gtab.is-active{
  background: #eef4fb !important;
  border-color: #d3e0f0 !important;
  color: var(--brand-700) !important;
  box-shadow: 0 8px 22px rgba(16, 24, 40, 0.08) !important;
}

.gbar__sortLbl{
  color: var(--muted) !important;
  font-weight: 600 !important;
}

.gbar__sortSel{
  min-width: 180px !important;
  min-height: 42px !important;
  border-radius: 12px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.gbar__sortSel:focus{
  border-color: var(--brand-500) !important;
  box-shadow: var(--focus) !important;
}

/* ===== Products header ===== */
.grid-head{
  padding: 6px 2px 12px !important;
  gap: 10px !important;
}

.grid-head__title{
  font-size: 1.4rem !important;
  line-height: 1.08;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  color: var(--text) !important;
}

.grid-head__count{
  font-size: 0.96rem !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
}

/* ===== Product grid/cards spacing ===== */
.grid--big{
  gap: 18px !important;
}

.pcard{
  border-radius: 18px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-1) !important;
  padding: 14px !important;
}

.pcard__media{
  border-radius: 14px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface-2) !important;
}

.pcard__img{
  height: 190px !important;
  background: var(--surface) !important;
}

.pcard__title{
  font-size: 1rem !important;
  line-height: 1.38 !important;
  font-weight: 600 !important;
  color: var(--text) !important;
}

.pcard__price{
  font-size: 1.18rem !important;
  line-height: 1.15;
  font-weight: 800 !important;
  color: var(--text) !important;
}

.rating-row{
  font-size: 0.83rem !important;
  color: var(--muted) !important;
}

.btn-ss--small{
  min-height: 36px;
  padding: 0.5rem 0.82rem !important;
  font-size: 0.82rem !important;
  background: var(--brand-700) !important;
}

.icon-btn{
  width: 36px !important;
  height: 36px !important;
  border-radius: 12px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--text-soft) !important;
}

.icon-btn:hover{
  background: var(--surface-3) !important;
  box-shadow: var(--shadow-1) !important;
}

/* ===== Load more row ===== */
.results-more{
  justify-content: flex-end !important;
}

#resultsCount{
  display: none !important;
}

#loadMoreBtn{
  min-width: 124px;
}



/* ===== Responsive ===== */
@media (max-width: 1200px){
  .gtab{
    min-width: 150px !important;
  }
}

@media (max-width: 820px){
  .products-filters{
    position: static;
    top: auto;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
}

@media (max-width: 640px){
  .filter-title{
    font-size: 1.5rem !important;
  }

  .grid-head__title{
    font-size: 1.24rem !important;
  }

  .pcard__img{
    height: 172px !important;
  }

  .gtab{
    min-width: 138px !important;
    font-size: 0.88rem !important;
  }
}
/* =========================================================
   RESULTS — home-style separation
   white sections + spacing, minimal lines
========================================================= */

/* more visual gap between filter and products */
.products-layout.is-filters-open{
  column-gap: 26px !important;
}

/* left facet panel becomes a soft white card, not line-heavy */
.products-filters .filter-panel.section{
  background: #ffffff !important;
  border: 0 !important;
  box-shadow: var(--shadow-1) !important;
  border-radius: 20px !important;
}

/* remove hard subsection separators inside facet */
.gflt{
  border-top: 0 !important;
  padding: 12px 0 !important;
}

.gflt + .gflt{
  margin-top: 8px !important;
  padding-top: 12px !important;
}

.gflt__body{
  margin-top: 10px !important;
}

/* remove inner hr-like feeling around price/source groups */
.filter-panel hr,
.filter-panel .acct-hr{
  display: none !important;
}

/* product area should read as open space */
.products-gridWrap{
  background: transparent !important;
}

/* remove borders around product cards */
.pcard{
  border: 0 !important;
  background: #ffffff !important;
  box-shadow: var(--shadow-1) !important;
  border-radius: 18px !important;
}

.pcard__media{
  border: 0 !important;
  background: #f9fbfd !important;
}

.pcard__img{
  background: #ffffff !important;
}

/* top chips cleaner */
.gchip,
.gtab{
  border-color: transparent !important;
  box-shadow: var(--shadow-1) !important;
  background: #ffffff !important;
}

.gtab.is-active{
  background: #eef4fb !important;
  border-color: transparent !important;
}

/* remove extra rule feeling under products heading if present */
.pfhead{
  border-bottom: 0 !important;
  margin-bottom: 12px !important;
}
/* =========================================================
   RESULTS ANTI-SQUEEZE
   append at very bottom of results.css
   goal:
   - cards keep readable minimum width
   - sidebar/content stop crushing
   - top band row scrolls instead of compressing
========================================================= */

/* results layout should stop crushing the content area */
.products-layout.is-filters-open{
  grid-template-columns: 320px minmax(980px, 1fr) !important;
}

.products-layout{
  min-width: 0 !important;
}

/* filter column should stay stable */
.products-filters{
  min-width: 320px !important;
  width: 320px !important;
  flex-shrink: 0 !important;
}


/* product grid: keep real minimum card width */
.grid--big,
.grid,
.products-grid{
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  min-width: 0 !important;
}

/* cards themselves should not visually crush */
.pcard{
  min-width: 280px !important;
}

.pcard__title,
.pcard__meta,
.pcard__seller,
.pcard__sub,
.pcard__price{
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

/* keep results title/sort row from collapsing awkwardly */
.pfhead__row,
.products-head,
.grid-head{
  flex-wrap: nowrap !important;
}

.pfhead__titleWrap,
.products-title{
  flex: 0 1 auto !important;
  min-width: max-content !important;
}

.pfhead__controls{
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
}
/* =========================================================
   TOP BANDS / SORT — keep bands in their own lane
   append at very bottom of results.css
========================================================= */

.gbar{
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  overflow: visible !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
}

.gbar__chips{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  scrollbar-gutter: stable !important;
}

/* remove the over-aggressive width forcing */
.gchip--bands{
  min-width: 0 !important;
  width: auto !important;
  flex: 1 1 auto !important;
}

/* each band stays natural width and scrolls horizontally if needed */
.gtab,
.gchip,
.gbands__seg{
  flex: 0 0 auto !important;
}

/* sort area stays fixed on the right */
.gbar__sort,
.pfhead__sort,
.gbar__sortSel,
.pfhead__sortSel{
  flex: 0 0 auto !important;
  position: relative !important;
  z-index: 2 !important;
}

/* cleaner scrollbar for horizontal bands */
.gbar__chips::-webkit-scrollbar{
  height: 8px;
}

.gbar__chips::-webkit-scrollbar-thumb{
  background: #d4dde8;
  border-radius: 999px;
}

.gbar__chips::-webkit-scrollbar-track{
  background: transparent;
}
/* =========================================================
   RESULTS TOP BAR — larger tabs / filter / sort
   Goal: make this row read closer to subheader nav link size
========================================================= */

.gbar{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 4px 18px !important;
}

.gbar__chipsWrap{
  display: flex;
  align-items: center;
  gap: 12px !important;
  min-width: 0;
  flex: 1 1 auto;
}

.gbar__chips{
  display: flex;
  align-items: center;
  gap: 12px !important;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.gbar__chips::-webkit-scrollbar{
  display: none;
}

/* filter button */
.gbar__filterBtn{
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  border-radius: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

.gbar__filterBtn i{
  font-size: 1.35rem !important;
  line-height: 1 !important;
}

/* quick-tab scroll buttons */
.gbar__scrollBtn{
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

.gbar__scrollBtn i{
  font-size: 1.12rem !important;
  line-height: 1 !important;
}

/* price band + typical group pills */
.gtab{
  min-width: 210px !important;
  height: 54px !important;
  padding: 0 22px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-size: 1.08rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* clear button */
.gbar__clearTabsBtn{
  padding: 0 6px !important;
  margin-left: 4px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.gbar__clearTabsBtn i{
  font-size: 2.2rem !important;
  line-height: 1 !important;
}

/* sort block */
.gbar__sort{
  display: flex;
  align-items: center;
  gap: 12px !important;
  white-space: nowrap;
  flex: 0 0 auto;
}

.gbar__sortLbl{
  font-size: 1.08rem !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  opacity: 1 !important;
}

.gbar__sortSel{
  min-width: 220px !important;
  height: 54px !important;
  padding: 0 18px !important;
  border-radius: 14px !important;
  font-size: 1.02rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

/* make the two tab groups visually breathe a bit more */
#priceBandTabs,
#segmentTabs{
  display: flex;
  align-items: center;
  gap: 12px !important;
}

/* responsive */
@media (max-width: 1200px){
  .gtab{
    min-width: 190px !important;
    padding: 0 18px !important;
    font-size: 1rem !important;
  }

  .gbar__sortSel{
    min-width: 200px !important;
  }
}

@media (max-width: 900px){
  .gbar{
    flex-wrap: wrap;
  }

  .gbar__sort{
    width: 100%;
    justify-content: flex-end;
    margin-top: 4px;
  }
}

@media (max-width: 640px){
  .gbar{
    gap: 10px;
    padding-bottom: 14px !important;
  }

  .gbar__filterBtn{
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
  }

  .gbar__scrollBtn{
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
  }

  .gtab{
    min-width: 168px !important;
    height: 48px !important;
    padding: 0 16px !important;
    font-size: 0.95rem !important;
  }

  .gbar__sortLbl{
    font-size: 0.95rem !important;
  }

  .gbar__sortSel{
    min-width: 170px !important;
    height: 48px !important;
    font-size: 0.95rem !important;
  }
}
/* =========================================================
   RESULTS TOP BAR — bigger text, less bold
   Append BELOW previous top-bar override
========================================================= */

.gtab{
  min-width: 220px !important;
  height: 58px !important;
  padding: 0 24px !important;
  font-size: 1.22rem !important;
  font-weight: 500 !important;   /* not bold */
  letter-spacing: 0 !important;
}

.gtab.is-active{
  font-weight: 500 !important;   /* keep active state not bold too */
}

.gbar__filterBtn{
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
}

.gbar__filterBtn i{
  font-size: 1.45rem !important;
}

.gbar__scrollBtn{
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
}

.gbar__scrollBtn i{
  font-size: 1.18rem !important;
}

.gbar__sort{
  gap: 14px !important;
}

.gbar__sortLbl{
  font-size: 1.22rem !important;
  font-weight: 700 !important;   /* only this should be bold */
  color: var(--text) !important;
  opacity: 1 !important;
}

.gbar__sortSel{
  min-width: 245px !important;
  height: 58px !important;
  padding: 0 20px !important;
  font-size: 1.12rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  border-radius: 16px !important;
}

#priceBandTabs,
#segmentTabs{
  gap: 14px !important;
}

@media (max-width: 1200px){
  .gtab{
    min-width: 200px !important;
    font-size: 1.1rem !important;
  }

  .gbar__sortLbl{
    font-size: 1.1rem !important;
  }

  .gbar__sortSel{
    min-width: 220px !important;
    font-size: 1.02rem !important;
  }
}

@media (max-width: 640px){
  .gtab{
    min-width: 170px !important;
    height: 50px !important;
    font-size: 1rem !important;
  }

  .gbar__sortLbl{
    font-size: 1rem !important;
  }

  .gbar__sortSel{
    min-width: 180px !important;
    height: 50px !important;
    font-size: 0.98rem !important;
  }
}
/* =========================================================
   RESULTS TOP BAR — one more size increase for whole row
========================================================= */

.gbar{
  gap: 16px !important;
  padding: 14px 4px 20px !important;
}

.gbar__chipsWrap,
.gbar__chips,
#priceBandTabs,
#segmentTabs{
  gap: 16px !important;
}

.gtab{
  min-width: 236px !important;
  height: 62px !important;
  padding: 0 26px !important;
  font-size: 1.3rem !important;
  font-weight: 500 !important;
  border-radius: 999px !important;
}

.gbar__filterBtn{
  width: 62px !important;
  height: 62px !important;
  min-width: 62px !important;
  border-radius: 18px !important;
}

.gbar__filterBtn i{
  font-size: 1.55rem !important;
}

.gbar__scrollBtn{
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
}

.gbar__scrollBtn i{
  font-size: 1.24rem !important;
}

.gbar__sort{
  gap: 16px !important;
}

.gbar__sortLbl{
  font-size: 1.28rem !important;
  font-weight: 700 !important;
}

.gbar__sortSel{
  min-width: 265px !important;
  height: 62px !important;
  padding: 0 22px !important;
  font-size: 1.18rem !important;
  font-weight: 500 !important;
  border-radius: 16px !important;
}

@media (max-width: 1200px){
  .gtab{
    min-width: 210px !important;
    font-size: 1.16rem !important;
  }

  .gbar__sortLbl{
    font-size: 1.14rem !important;
  }

  .gbar__sortSel{
    min-width: 230px !important;
    font-size: 1.05rem !important;
  }
}

@media (max-width: 640px){
  .gtab{
    min-width: 178px !important;
    height: 52px !important;
    font-size: 1.02rem !important;
  }

  .gbar__filterBtn{
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
  }

  .gbar__scrollBtn{
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }

  .gbar__sortLbl{
    font-size: 1rem !important;
  }

  .gbar__sortSel{
    min-width: 185px !important;
    height: 52px !important;
    font-size: 1rem !important;
  }
}
/* =========================================================
   RESULTS PRODUCT GRID + CARDS — aggressive larger card pass
   Goal:
   - end up with 4 cards per row on desktop
   - much bigger title/image/source/button/factcheck
   - only price bold
========================================================= */

/* ---- grid: fixed 4 columns on desktop ---- */
.grid--big{
  display: grid !important;
  gap: 18px !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

@media (max-width: 1400px){
  .grid--big{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1180px){
  .grid--big{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 820px){
  .grid--big{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px){
  .grid--big{
    grid-template-columns: 1fr !important;
  }
}

/* ---- card shell ---- */
.pcard{
  min-height: 700px !important;
  padding: 18px !important;
  border-radius: 22px !important;
  display: flex !important;
  flex-direction: column !important;
}

/* ---- image area: close to half the card ---- */
.pcard__media{
  min-height: 340px !important;
  height: 340px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: var(--surface-2) !important;
  margin-bottom: 14px !important;
}

.pcard__img{
  width: 100% !important;
  height: 340px !important;
  min-height: 340px !important;
  object-fit: contain !important;
  display: block !important;
  background: #fff !important;
}

/* ---- source row ---- */
.pcard__source-row{
  margin-top: 2px !important;
  margin-bottom: 12px !important;
}

.src-badge{
  min-height: 36px !important;
  padding: 0.45rem 0.85rem !important;
  gap: 8px !important;
  font-size: 0.96rem !important;
  font-weight: 400 !important;
  border-radius: 999px !important;
}

.src-badge__logo{
  width: 20px !important;
  height: 20px !important;
}

/* ---- title ---- */
.pcard__title{
  font-size: 1.26rem !important;
  line-height: 1.42 !important;
  font-weight: 400 !important;
  margin: 0 0 12px 0 !important;
  color: var(--text) !important;

  display: -webkit-box !important;
  -webkit-line-clamp: 4 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.pcard__ext{
  font-size: 0.95em !important;
  opacity: 0.45 !important;
}

/* ---- meta / seller ---- */
.rating-row,
.pcard__meta,
.pcard__seller,
.pcard__sub{
  font-size: 1rem !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
}

/* ---- price: only bold text ---- */
.pcard__price{
  font-size: 1.72rem !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  margin: 12px 0 18px 0 !important;
  color: var(--text) !important;
}

/* ---- CTA row ---- */
.pcard__cta{
  margin-top: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
}

/* ---- product page button ---- */
.btn-ss--small{
  min-height: 48px !important;
  padding: 0.78rem 1.05rem !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  border-radius: 999px !important;
}

/* ---- factcheck button ---- */
.icon-btn,
.icon-btn.icon-btn--factcheck{
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  border-radius: 14px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
}

.icon-btn__img.icon-btn__img--factcheck{
  width: 30px !important;
  height: 30px !important;
  object-fit: contain !important;
  display: block !important;
}

/* ---- responsive ---- */
@media (max-width: 1400px){
  .pcard{
    min-height: 660px !important;
  }

  .pcard__media,
  .pcard__img{
    min-height: 315px !important;
    height: 315px !important;
  }

  .pcard__title{
    font-size: 1.18rem !important;
  }

  .pcard__price{
    font-size: 1.56rem !important;
  }
}

@media (max-width: 1180px){
  .pcard{
    min-height: 620px !important;
  }

  .pcard__media,
  .pcard__img{
    min-height: 285px !important;
    height: 285px !important;
  }

  .pcard__title{
    font-size: 1.1rem !important;
  }

  .pcard__price{
    font-size: 1.42rem !important;
  }
}

@media (max-width: 820px){
  .pcard{
    min-height: 580px !important;
    padding: 16px !important;
  }

  .pcard__media,
  .pcard__img{
    min-height: 250px !important;
    height: 250px !important;
  }

  .pcard__title{
    font-size: 1.02rem !important;
  }

  .pcard__price{
    font-size: 1.3rem !important;
  }

  .btn-ss--small{
    min-height: 42px !important;
    font-size: 0.94rem !important;
  }

  .icon-btn,
  .icon-btn.icon-btn--factcheck{
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
  }

  .icon-btn__img.icon-btn__img--factcheck{
    width: 26px !important;
    height: 26px !important;
  }
}
/* =========================================================
   RESULTS CARDS — make source badge and title much larger
   keep current card size / grid / image sizes unchanged
========================================================= */

/* source badge */
.src-badge{
  min-height: 46px !important;
  padding: 0.62rem 1rem !important;
  gap: 10px !important;
  font-size: 1.18rem !important;
  font-weight: 400 !important;
  border-radius: 999px !important;
}

.src-badge__logo{
  width: 26px !important;
  height: 26px !important;
}

/* title */
.pcard__title{
  font-size: 1.95rem !important;
  line-height: 1.22 !important;
  font-weight: 400 !important;
  margin: 0 0 14px 0 !important;

  display: -webkit-box !important;
  -webkit-line-clamp: 4 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* external-link mark near title */
.pcard__ext{
  font-size: 1.05rem !important;
  opacity: 0.5 !important;
}

/* if title row has anchor/default link styling */
.pcard__title a,
.pcard__titleLink,
.pcard a.pcard__title{
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: inherit !important;
}

/* responsive */
@media (max-width: 1400px){
  .src-badge{
    font-size: 1.08rem !important;
  }

  .src-badge__logo{
    width: 24px !important;
    height: 24px !important;
  }

  .pcard__title{
    font-size: 1.7rem !important;
  }
}

@media (max-width: 1180px){
  .src-badge{
    font-size: 1rem !important;
  }

  .src-badge__logo{
    width: 22px !important;
    height: 22px !important;
  }

  .pcard__title{
    font-size: 1.45rem !important;
  }
}

@media (max-width: 820px){
  .src-badge{
    min-height: 40px !important;
    font-size: 0.92rem !important;
  }

  .src-badge__logo{
    width: 20px !important;
    height: 20px !important;
  }

  .pcard__title{
    font-size: 1.18rem !important;
    line-height: 1.26 !important;
  }
}
/* source badge/logo — slightly larger */
.src-badge{
  min-height: 50px !important;
  padding: 0.7rem 1.08rem !important;
  gap: 12px !important;
  font-size: 1.22rem !important;
}

.src-badge__logo{
  width: 30px !important;
  height: 30px !important;
}

@media (max-width: 1400px){
  .src-badge__logo{
    width: 28px !important;
    height: 28px !important;
  }
}

@media (max-width: 1180px){
  .src-badge__logo{
    width: 24px !important;
    height: 24px !important;
  }
}

@media (max-width: 820px){
  .src-badge{
    min-height: 42px !important;
    font-size: 0.96rem !important;
  }

  .src-badge__logo{
    width: 21px !important;
    height: 21px !important;
  }
}
/* =========================================================
   RESULTS CARDS — readable marketplace source badge
   replace tiny pill look with a clearer compact bar
========================================================= */

.pcard__source-row{
  margin-top: 8px !important;
  margin-bottom: 16px !important;
  display: block !important;
}

.src-badge{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;

  min-height: 54px !important;
  padding: 0 16px !important;
  border-radius: 16px !important;

  background: #ffffff !important;
  border: 1.5px solid #d7e1ec !important;
  color: #1f2937 !important;

  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  line-height: 1 !important;
}

.src-badge__logo{
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  object-fit: contain !important;
  background: #ffffff !important;
  border-radius: 999px !important;
  display: block !important;
}

.src-badge__name{
  display: inline-block !important;
  font-size: 1.18rem !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  color: #334155 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

/* if source name is wrapped in another inline element */
.src-badge span,
.src-badge small,
.src-badge strong{
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

/* responsive */
@media (max-width: 1400px){
  .src-badge{
    min-height: 50px !important;
    padding: 0 14px !important;
  }

  .src-badge__logo{
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
  }

  .src-badge__name{
    font-size: 1.05rem !important;
  }
}

@media (max-width: 1180px){
  .src-badge{
    min-height: 46px !important;
    padding: 0 12px !important;
    gap: 10px !important;
  }

  .src-badge__logo{
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
  }

  .src-badge__name{
    font-size: 0.96rem !important;
  }
}
/* =========================================================
   PRODUCT CARD INTERACTION UPGRADE
   - image clickable -> internal details
   - title clickable -> internal details
   - marketplace badge clickable -> external source
   - quick check uses brand icon + text
========================================================= */

.pcard__mediaLink{
  display: block !important;
  text-decoration: none !important;
  color: inherit !important;
}

.pcard__mediaLink:hover .pcard__media,
.pcard__mediaLink:focus-visible .pcard__media{
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18) !important;
}

.pcard__title{
  margin-bottom: 14px !important;
}

.pcard__titleLink{
  color: inherit !important;
  text-decoration: none !important;
  display: inline !important;
}

.pcard__titleLink:hover,
.pcard__titleLink:focus-visible{
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

.pcard__source-row{
  margin-top: 8px !important;
  margin-bottom: 16px !important;
}

.src-badge{
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.src-badge:hover,
.src-badge:focus-visible{
  border-color: #b9cade !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
}

.src-badge__ext{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 2px !important;
  font-size: 0.98rem !important;
  line-height: 1 !important;
  color: #64748b !important;
}

.pcard__cta{
  align-items: stretch !important;
  gap: 12px !important;
}

.btn-ss--small{
  min-height: 50px !important;
  padding: 0.8rem 1.15rem !important;
  font-weight: 400 !important;
}

.quickcheck-btn{
  min-height: 50px !important;
  padding: 0 14px !important;
  border-radius: 14px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease !important;
}

.quickcheck-btn:hover,
.quickcheck-btn:focus-visible{
  background: #f8fbff !important;
  border-color: #b9cade !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
}

.quickcheck-btn__img{
  width: 26px !important;
  height: 26px !important;
  object-fit: contain !important;
  display: block !important;
  flex: 0 0 auto !important;
}

.quickcheck-btn__text{
  font-size: 1rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

@media (max-width: 980px){
  .quickcheck-btn{
    width: 50px !important;
    min-width: 50px !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  .quickcheck-btn__text{
    display: none !important;
  }
}
/* =========================================================
   PRODUCT CARD CTA — single right-aligned quick insight
========================================================= */

.pcard__cta{
  margin-top: auto !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 0 !important;
}

.quickcheck-btn{
  min-height: 52px !important;
  padding: 0 16px !important;
  border-radius: 14px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease !important;
}

.quickcheck-btn:hover,
.quickcheck-btn:focus-visible{
  background: #f8fbff !important;
  border-color: #b9cade !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
}

.quickcheck-btn__img{
  width: 26px !important;
  height: 26px !important;
  object-fit: contain !important;
  display: block !important;
  flex: 0 0 auto !important;
}

.quickcheck-btn__text{
  font-size: 1rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

@media (max-width: 980px){
  .quickcheck-btn{
    width: 52px !important;
    min-width: 52px !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  .quickcheck-btn__text{
    display: none !important;
  }
}
/* =========================================================
   PRODUCT CARD — utility row on top, price anchored below
========================================================= */

.pcard{
  display: flex !important;
  flex-direction: column !important;
}

.pcard__utility{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-top: 10px !important;
  margin-bottom: 16px !important;
}

.pcard__source-row{
  margin: 0 !important;
}

.src-badge{
  flex: 0 1 auto !important;
  max-width: calc(100% - 170px) !important;
}

.quickcheck-btn{
  flex: 0 0 auto !important;
  min-height: 46px !important;
  padding: 0 14px !important;
  border-radius: 14px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease !important;
}

.quickcheck-btn:hover,
.quickcheck-btn:focus-visible{
  background: #f8fbff !important;
  border-color: #b9cade !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
}

.quickcheck-btn__img{
  width: 24px !important;
  height: 24px !important;
  object-fit: contain !important;
  display: block !important;
  flex: 0 0 auto !important;
}

.quickcheck-btn__text{
  font-size: 0.98rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.pcard__title{
  margin-bottom: 12px !important;
}

.rating-row{
  margin-bottom: 10px !important;
}

.pcard__price{
  margin-top: auto !important;
  margin-bottom: 0 !important;
  padding-top: 6px !important;
  align-self: flex-start !important;
}

@media (max-width: 1180px){
  .pcard__utility{
    gap: 10px !important;
  }

  .src-badge{
    max-width: calc(100% - 150px) !important;
  }

  .quickcheck-btn{
    min-height: 42px !important;
    padding: 0 12px !important;
  }

  .quickcheck-btn__img{
    width: 22px !important;
    height: 22px !important;
  }

  .quickcheck-btn__text{
    font-size: 0.9rem !important;
  }
}

@media (max-width: 980px){
  .quickcheck-btn{
    width: 46px !important;
    min-width: 46px !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  .quickcheck-btn__text{
    display: none !important;
  }

  .src-badge{
    max-width: calc(100% - 58px) !important;
  }
}
/* =========================================================
   RESULTS FACETS — larger drawer + larger facet controls
   goal:
   - wider filter column
   - larger title/subtitle/section labels/options
   - larger source pills with proper border size
   - larger price mini-chart + inputs
========================================================= */

/* wider facet column */
.products-layout.is-filters-open{
  grid-template-columns: 380px minmax(980px, 1fr) !important;
  column-gap: 30px !important;
}

.products-filters{
  width: 380px !important;
  min-width: 380px !important;
  max-width: 380px !important;
  padding-right: 8px !important;
}

/* panel shell */
.products-filters .filter-panel.section{
  border-radius: 24px !important;
  padding: 22px 20px 24px !important;
}

/* panel heading */
.filter-title{
  font-size: 2.05rem !important;
  line-height: 1.02 !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 12px !important;
}

.filter-subtitle{
  margin: 0 0 20px 0 !important;
  font-size: 1.12rem !important;
  line-height: 1.45 !important;
  color: var(--muted) !important;
}

/* each facet block */
.gflt{
  padding: 16px 0 !important;
}

.gflt + .gflt{
  margin-top: 8px !important;
  padding-top: 16px !important;
}

.gflt__hdr{
  font-size: 1.28rem !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  padding: 2px 0 !important;
}

.gflt__chev{
  width: 13px !important;
  height: 13px !important;
  border-right-width: 2.5px !important;
  border-bottom-width: 2.5px !important;
  margin-left: 12px !important;
}

.gflt__body{
  margin-top: 14px !important;
  gap: 12px !important;
}

/* generic options */
.gopt{
  grid-template-columns: 20px 1fr auto !important;
  gap: 12px !important;
  align-items: center !important;
  font-size: 1.12rem !important;
  line-height: 1.35 !important;
}

.gopt input{
  width: 16px !important;
  height: 16px !important;
}

.gopt__txt{
  font-size: 1.12rem !important;
  line-height: 1.35 !important;
}

.gopt__cnt{
  font-size: 0.98rem !important;
}

/* radio rows */
.gopt--radio{
  grid-template-columns: 20px 1fr !important;
}


/* price inputs */
.gprice{
  gap: 10px !important;
  margin-top: 6px !important;
}

.gprice__in{
  min-height: 52px !important;
  border-radius: 14px !important;
  padding: 0 14px !important;
  font-size: 1.08rem !important;
}

.gprice__go{
  min-height: 52px !important;
  border-radius: 14px !important;
  padding: 0 16px !important;
  font-size: 1.02rem !important;
}


/* source pills should not inherit the oversized product-card source badge */
.products-filters .src-badge__ext{
  display: none !important;
}

/* swatch / color rows */
.gopt--swatch{
  gap: 12px !important;
}

.swatch{
  width: 18px !important;
  height: 18px !important;
}

/* strong/medium driver badge shown in facet headers */
.fh__impact,
.fh__badge,
.facet-driver-badge,
.driver-badge{
  font-size: 0.85rem !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
}

/* better scrollbar in facet column */
.products-filters::-webkit-scrollbar{
  width: 10px;
}

.products-filters::-webkit-scrollbar-thumb{
  background: #a7a7a7;
  border-radius: 999px;
}

.products-filters::-webkit-scrollbar-track{
  background: transparent;
}

/* responsive */
@media (max-width: 1320px){
  .products-layout.is-filters-open{
    grid-template-columns: 350px minmax(0, 1fr) !important;
  }

  .products-filters{
    width: 350px !important;
    min-width: 350px !important;
    max-width: 350px !important;
  }

  .filter-title{
    font-size: 1.8rem !important;
  }

  .gflt__hdr{
    font-size: 1.18rem !important;
  }

  .gopt,
  .gopt__txt{
    font-size: 1.02rem !important;
  }
}

@media (max-width: 900px){
  .products-filters{
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .products-layout.is-filters-open{
    grid-template-columns: 1fr !important;
  }
}
/* =========================================================
   RESULTS FACETS — follow-up sizing/alignment cleanup
   - bigger histogram width
   - fix source pill border/text alignment
   - bigger facet labels / driver badges / options
========================================================= */

/* ------------------------------
   Section labels / headers
------------------------------ */
.gflt__hdr{
  font-size: 1.42rem !important;
  line-height: 1.18 !important;
  font-weight: 700 !important;
}

.gflt__body{
  margin-top: 16px !important;
}

.gopt,
.gopt__txt,
.gopt--radio,
.gopt--swatch{
  font-size: 1.22rem !important;
  line-height: 1.42 !important;
}

.gopt{
  gap: 14px !important;
  margin-bottom: 10px !important;
}

.gopt input{
  width: 18px !important;
  height: 18px !important;
}

.gopt__cnt{
  font-size: 1.02rem !important;
}

/* ------------------------------
   Driver badges / helper labels
------------------------------ */
.fh__impact,
.fh__badge,
.facet-driver-badge,
.driver-badge{
  font-size: 0.96rem !important;
  line-height: 1 !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
}

/* in case storage/driver label sits inline with title */
.gflt__hdr .fh__impact,
.gflt__hdr .fh__badge,
.gflt__hdr .facet-driver-badge,
.gflt__hdr .driver-badge{
  margin-left: 10px !important;
  vertical-align: middle !important;
}


/* ------------------------------
   Price inputs
------------------------------ */
.gprice{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.gprice__in{
  min-height: 56px !important;
  border-radius: 15px !important;
  padding: 0 16px !important;
  font-size: 1.12rem !important;
}

/* ------------------------------
   Source pills — fix border size/alignment
------------------------------ */


/* hide any external icon if inherited */
.src-pill .src-badge__ext{
  display: none !important;
}

/* if there is a pseudo/custom radio control inside source pill */
.src-pill input + .src-badge,
.src-pill label .src-badge{
  position: relative !important;
}

/* ------------------------------
   Generic filter option spacing
------------------------------ */
.filter-panel .gopt label,
.filter-panel label.gopt,
.filter-panel .gopt__txt{
  font-size: 1.18rem !important;
}

.filter-panel .muted{
  font-size: 1rem !important;
}

/* ------------------------------
   Responsive
------------------------------ */
@media (max-width: 1320px){
  .gflt__hdr{
    font-size: 1.28rem !important;
  }

  .gopt,
  .gopt__txt{
    font-size: 1.08rem !important;
  }

  .src-pill .src-badge__name{
    font-size: 1.04rem !important;
  }

  .fh__impact,
  .fh__badge,
  .facet-driver-badge,
  .driver-badge{
    font-size: 0.86rem !important;
  }
}
/* =========================================================
   RESULTS FACETS — cleanup pass
   1)  - use same grayish background
========================================================= */

/* facet panel background */
.products-filters .filter-panel.section{
  background: #f3f5f8 !important;
  border-color: #e3e8ef !important;
}

/* if inner wrappers show white patches */
.products-filters,
.products-filters .filter-panel,
.products-filters .gflt{
  background: transparent !important;
}
/* =========================================================
   DRIVER FACET HEADER — align Storage / RAM / etc with
   normal facet labels like Condition
========================================================= */

.products-filters .fh--driver{
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
}

.products-filters .fh--driver .fh__top{
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.products-filters .fh--driver .fh__title{
  font-size: 1.45rem !important;
  line-height: 1.18 !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  padding: 0 !important;
  margin: 0 !important;
}

.products-filters .fh--driver .fh__pill{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.78rem !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}

.products-filters .fh--driver .fh__mid{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  margin-top: 0 !important;
}

.products-filters .fh--driver .fh__squares{
  gap: 6px !important;
}

.products-filters .fh--driver .fh__sq{
  width: 12px !important;
  height: 12px !important;
  border-radius: 4px !important;
}
/* =========================================================
   DRIVER FACET BADGE — larger / more readable
   keep this override in results.css
========================================================= */

.products-filters .fh--driver .fh__pill{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 0.9rem !important;
  line-height: 1 !important;
  font-weight: 700 !important;

  padding: 5px 12px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}

/* optional: keep title and badge aligned nicely */
.products-filters .fh--driver .fh__top{
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
/* =========================================================
   SOURCE FACET — make border wrap logo + text correctly
========================================================= */

.products-filters .src-pills{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.products-filters .src-pill{
  position: relative !important;
  display: inline-block !important;
  flex: 0 0 auto !important;
  cursor: pointer !important;
}

/* fully hide native radio so it does not visually leak */
.products-filters .src-pill > input{
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* this is the actual visible pill */
.products-filters .src-pill > .src-badge{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: fit-content !important;
  min-width: 0 !important;
  max-width: 100% !important;

  min-height: 48px !important;
  padding: 0 14px !important;
  gap: 10px !important;

  border: 1px solid #cfd7e3 !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* selected state */
.products-filters .src-pill > input:checked + .src-badge{
  border-color: var(--brand-500) !important;
  box-shadow: 0 0 0 3px rgba(111, 143, 184, 0.14) !important;
  background: #f7fafe !important;
}

/* logo */
.products-filters .src-pill > .src-badge .src-badge__logo,
.products-filters .src-pill > .src-badge .src-badge__dot{
  flex: 0 0 auto !important;
}

.products-filters .src-pill > .src-badge .src-badge__logo{
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  object-fit: contain !important;
  background: transparent !important;
  border-radius: 0 !important;
}

.products-filters .src-pill > .src-badge .src-badge__dot{
  width: 10px !important;
  height: 10px !important;
  border-radius: 999px !important;
}

/* text */
.products-filters .src-pill > .src-badge .src-badge__name{
  display: inline-block !important;
  font-size: 1.08rem !important;
  line-height: 1 !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

/* no external icon in facet source pills */
.products-filters .src-pill > .src-badge .src-badge__ext{
  display: none !important;
}

/* =========================================================
   PRICE FACET — final actual fix
========================================================= */

/* let the price header fill the full sidebar width */
.products-filters .gflt--open > .gflt__hdr > .gflt__hdrMain{
  display: block !important;
  width: 100% !important;
}

/* title */
.products-filters .fh--price{
  display: block !important;
  width: 100% !important;
}

.products-filters .fh--price .fh__top{
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
}

.products-filters .fh--price .fh__title{
  display: block !important;
  font-size: 1.45rem !important;
  line-height: 1.18 !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}

/* histogram */
.products-filters .fh--price .mo-histogram{
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 76px !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  gap: 8px !important;
}

.products-filters .fh--price .mo-hist-bar{
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  border-radius: 3px 3px 0 0 !important;
}
/* =========================================================
   RESULTS TOP BAR — final compact scale to match app header
   purpose:
   - scale result-page top controls down ~50%
   - align with compact header/nav sizing
   - keep layout/style/colors, only reduce size
========================================================= */

/* overall row */
.gbar{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 6px 2px 10px !important;
}

/* chip scroller structure */
.gbar__chipsWrap,
.gbar__chips,
#priceBandTabs,
#segmentTabs{
  gap: 8px !important;
}

.gbar__chipsWrap{
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.gbar__chips{
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-behavior: smooth !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.gbar__chips::-webkit-scrollbar{
  display: none !important;
}

/* filter button */
.gbar__filterBtn{
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 12px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.gbar__filterBtn i{
  font-size: 1rem !important;
  line-height: 1 !important;
}

.gbar__filterX{
  width: 13px !important;
  height: 13px !important;
  font-size: 11px !important;
  top: 4px !important;
  right: 4px !important;
}

/* left/right scroll buttons */
.gbar__scrollBtn{
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: 999px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.gbar__scrollBtn i{
  font-size: 0.92rem !important;
  line-height: 1 !important;
}

/* tabs / pills */
.gtab{
  min-width: 170px !important;
  height: 40px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-align: center !important;
}

/* sort area */
.gbar__sort{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

.gbar__sortLbl{
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.gbar__sortSel{
  min-width: 180px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

/* clear tabs button */
.gbar__clearTabsBtn{
  padding: 0 2px !important;
  margin-left: 2px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.gbar__clearTabsBtn i{
  font-size: 1.4rem !important;
  line-height: 1 !important;
}

/* keep row stable and aligned */
.gbar__filterBtn,
.gbar__scrollBtn,
.gtab,
.gbar__sortSel{
  box-sizing: border-box !important;
}

/* match compact header rhythm on medium screens too */
@media (max-width: 1200px){
  .gtab{
    min-width: 156px !important;
    font-size: 0.9rem !important;
  }

  .gbar__sortSel{
    min-width: 168px !important;
    font-size: 0.92rem !important;
  }
}

/* mobile */
@media (max-width: 640px){
  .gbar{
    gap: 8px !important;
    padding: 6px 2px 8px !important;
  }

  .gbar__chipsWrap,
  .gbar__chips,
  #priceBandTabs,
  #segmentTabs{
    gap: 6px !important;
  }

  .gbar__filterBtn{
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 10px !important;
  }

  .gbar__filterBtn i{
    font-size: 0.95rem !important;
  }

  .gbar__scrollBtn{
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
  }

  .gbar__scrollBtn i{
    font-size: 0.85rem !important;
  }

  .gtab{
    min-width: 142px !important;
    height: 36px !important;
    padding: 0 12px !important;
    font-size: 0.88rem !important;
  }

  .gbar__sortLbl{
    font-size: 0.88rem !important;
  }

  .gbar__sortSel{
    min-width: 156px !important;
    height: 36px !important;
    min-height: 36px !important;
    font-size: 0.88rem !important;
    border-radius: 10px !important;
  }

  .gbar__clearTabsBtn i{
    font-size: 1.2rem !important;
  }
}
/* =========================================================
   CLEAR-X BUTTON — hide until a tab is active
========================================================= */

/* hidden by default */
.gbar__clearTabsBtn{
  display: none !important;
}

/* show only when at least one tab is active */
.gbar__chipsWrap:has(.gtab.is-active) .gbar__clearTabsBtn,
.gbar__chipsWrap:has(.gchip.is-active) .gbar__clearTabsBtn,
.gbar__chipsWrap:has(.gbands__seg.is-active) .gbar__clearTabsBtn,
.gbar__chipsWrap:has([aria-pressed="true"]) .gbar__clearTabsBtn,
.gbar__chipsWrap:has([aria-selected="true"]) .gbar__clearTabsBtn{
  display: inline-flex !important;
}
/* =========================================================
   RESULTS TOP BAR — remove gray lane behind middle pills
========================================================= */

.gbar__chipsWrap,
.gbar__chips,
.gchip--tabs,
#priceBandTabs,
#segmentTabs,
.gchip--bands,
.gbands__wrap,
.gbands__track{
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* keep only the pills/buttons visible */
.gbar__chipsWrap,
.gbar__chips,
.gchip--tabs,
#priceBandTabs,
#segmentTabs{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* if any separator line is visually reading as a gray strip, remove it */
.products-gridWrap .gbar,
.gbar{
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
/* =========================================================
   PRODUCT GRID — FINAL 50% SCALE-DOWN
   goal:
   - keep current layout/style/colors
   - only scale card internals down hard
   - preserve current relative proportions
========================================================= */

/* grid spacing */
.grid--big{
  gap: 10px !important;
}

/* card shell */
.pcard{
  min-height: 320px !important;
  padding: 9px !important;
  border-radius: 11px !important;
}

/* image area */
.pcard__media{
  min-height: 145px !important;
  height: 145px !important;
  border-radius: 8px !important;
  margin-bottom: 6px !important;
}

.pcard__img{
  height: 145px !important;
  min-height: 145px !important;
}

/* source row */
.pcard__source-row{
  margin-top: 1px !important;
  margin-bottom: 5px !important;
}

.src-badge{
  min-height: 17px !important;
  padding: 0.21rem 0.4rem !important;
  gap: 4px !important;
  border-radius: 999px !important;
  font-size: 0.46rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

.src-badge__logo{
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  min-height: 10px !important;
}

.src-badge__name{
  font-size: inherit !important;
  line-height: inherit !important;
}

/* title */
.pcard__title{
  font-size: 0.61rem !important;
  line-height: 1.38 !important;
  font-weight: 400 !important;
  margin: 0 0 5px 0 !important;
  -webkit-line-clamp: 3 !important;
}

/* small external icon */
.pcard__ext{
  font-size: 0.48em !important;
  margin-left: 3px !important;
}

/* meta/seller/rating */
.rating-row,
.pcard__meta,
.pcard__seller,
.pcard__sub{
  font-size: 0.49rem !important;
  line-height: 1.35 !important;
  margin-bottom: 4px !important;
}

/* utility row */
.pcard__utility{
  gap: 6px !important;
  margin-top: 5px !important;
  margin-bottom: 8px !important;
}

/* keep source + quickcheck proportionate */
.src-badge{
  max-width: calc(100% - 85px) !important;
}

/* quick insight button */
.quickcheck-btn{
  min-height: 23px !important;
  height: 23px !important;
  padding: 0 7px !important;
  gap: 4px !important;
  border-radius: 7px !important;
}

.quickcheck-btn__img{
  width: 12px !important;
  height: 12px !important;
}

.quickcheck-btn__text{
  font-size: 0.49rem !important;
  line-height: 1 !important;
  font-weight: 500 !important;
}

/* price */
.pcard__price{
  font-size: 0.8rem !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  margin: 5px 0 8px 0 !important;
  padding-top: 3px !important;
}

/* bottom CTA row */
.pcard__cta{
  gap: 7px !important;
  margin-top: auto !important;
}

/* product/details button */
.btn-ss--small{
  min-height: 22px !important;
  height: 22px !important;
  padding: 0.36rem 0.5rem !important;
  border-radius: 999px !important;
  font-size: 0.49rem !important;
  line-height: 1 !important;
  font-weight: 400 !important;
}

/* icon button / factcheck */
.icon-btn,
.icon-btn.icon-btn--factcheck{
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  border-radius: 6px !important;
  padding: 0 !important;
}

.icon-btn__img.icon-btn__img--factcheck{
  width: 14px !important;
  height: 14px !important;
}

/* card title links keep same scale */
.pcard__title a,
.pcard__titleLink,
.pcard a.pcard__title{
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: inherit !important;
}

/* desktop / laptop still keep same column behavior */
@media (max-width: 1400px){
  .pcard{
    min-height: 305px !important;
  }

  .pcard__media,
  .pcard__img{
    min-height: 138px !important;
    height: 138px !important;
  }
}

@media (max-width: 900px){
  .pcard{
    min-height: 290px !important;
    padding: 8px !important;
  }

  .pcard__media,
  .pcard__img{
    min-height: 125px !important;
    height: 125px !important;
  }

  .quickcheck-btn{
    width: 23px !important;
    min-width: 23px !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  .quickcheck-btn__text{
    display: none !important;
  }
}
/* =========================================================
   RESULTS PRODUCT GRID — FINAL BALANCE FIX
   goal:
   - make cards visually match the compact header/top-bar
   - reduce card/media dominance
   - keep current style/colors/layout
   - rebalance source row / quick insight / text / price
========================================================= */

/* grid spacing */
.grid--big{
  gap: 14px !important;
}

/* card shell */
.pcard{
  min-height: 500px !important;
  padding: 14px !important;
  border-radius: 18px !important;
  min-width: 0 !important;
}

/* media area: smaller so card is less top-heavy */
.pcard__media{
  min-height: 220px !important;
  height: 220px !important;
  border-radius: 14px !important;
  margin-bottom: 10px !important;
}

.pcard__img{
  height: 220px !important;
  min-height: 220px !important;
}

/* source + quick insight row */
.pcard__source-row{
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

.pcard__utility{
  gap: 8px !important;
  margin-top: 0 !important;
  margin-bottom: 8px !important;
  align-items: center !important;
}

/* source badge: slightly larger than your tiny version,
   but much smaller than the oversized version */
.src-badge{
  min-height: 24px !important;
  padding: 0 8px !important;
  gap: 6px !important;
  border-radius: 999px !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  max-width: calc(100% - 108px) !important;
}

.src-badge__logo{
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
}

/* quick insight: bring into same visual system as source badge */
.quickcheck-btn{
  min-height: 28px !important;
  height: 28px !important;
  padding: 0 8px !important;
  gap: 5px !important;
  border-radius: 9px !important;
}

.quickcheck-btn__img{
  width: 14px !important;
  height: 14px !important;
}

.quickcheck-btn__text{
  font-size: 0.72rem !important;
  line-height: 1 !important;
  font-weight: 500 !important;
}

/* title + metadata */
.pcard__title{
  font-size: 0.92rem !important;
  line-height: 1.32 !important;
  font-weight: 500 !important;
  margin: 0 0 8px 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.rating-row,
.pcard__meta,
.pcard__seller,
.pcard__sub{
  font-size: 0.8rem !important;
  line-height: 1.3 !important;
  margin-bottom: 6px !important;
}

/* price */
.pcard__price{
  font-size: 1rem !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  margin-top: auto !important;
  margin-bottom: 0 !important;
  padding-top: 6px !important;
}

/* CTA row */
.pcard__cta{
  gap: 8px !important;
  margin-top: 8px !important;
}

.btn-ss--small{
  min-height: 30px !important;
  height: 30px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  font-size: 0.78rem !important;
  line-height: 1 !important;
  font-weight: 500 !important;
}

.icon-btn,
.icon-btn.icon-btn--factcheck{
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  border-radius: 10px !important;
  padding: 0 !important;
}

.icon-btn__img.icon-btn__img--factcheck{
  width: 18px !important;
  height: 18px !important;
}

/* responsive */
@media (max-width: 1400px){
  .pcard{
    min-height: 470px !important;
  }

  .pcard__media,
  .pcard__img{
    min-height: 205px !important;
    height: 205px !important;
  }
}

@media (max-width: 1180px){
  .pcard{
    min-height: 450px !important;
  }

  .pcard__media,
  .pcard__img{
    min-height: 190px !important;
    height: 190px !important;
  }

  .src-badge{
    max-width: calc(100% - 96px) !important;
  }

  .quickcheck-btn{
    min-height: 26px !important;
    height: 26px !important;
    padding: 0 7px !important;
  }

  .quickcheck-btn__img{
    width: 13px !important;
    height: 13px !important;
  }

  .quickcheck-btn__text{
    font-size: 0.68rem !important;
  }
}

@media (max-width: 980px){
  .pcard{
    min-height: 430px !important;
    padding: 12px !important;
  }

  .pcard__media,
  .pcard__img{
    min-height: 180px !important;
    height: 180px !important;
  }

  .quickcheck-btn{
    width: 28px !important;
    min-width: 28px !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  .quickcheck-btn__text{
    display: none !important;
  }

  .src-badge{
    max-width: calc(100% - 40px) !important;
  }
}
/* =========================================================
   RESULTS PRODUCT GRID — reduce card height only
   keep all current sizes, just remove extra empty space
========================================================= */

.pcard{
  min-height: 400px !important;
}

@media (max-width: 1400px){
  .pcard{
    min-height: 376px !important;
  }
}

@media (max-width: 1180px){
  .pcard{
    min-height: 360px !important;
  }
}

@media (max-width: 980px){
  .pcard{
    min-height: 344px !important;
  }
}
/* =========================================================
   RESULTS FACETS — FINAL COMPACT SCALE
   goal:
   - scale facet sidebar down to match current header/top-bar/cards
   - keep style/colors/layout
   - reduce width, headers, histogram, labels, badges, options, inputs
========================================================= */

/* ---------- sidebar width / panel shell ---------- */
.products-layout.is-filters-open{
  grid-template-columns: 280px minmax(0, 1fr) !important;
  column-gap: 18px !important;
}

.products-filters{
  width: 280px !important;
  min-width: 280px !important;
  max-width: 280px !important;
}

.products-filters .filter-panel.section{
  border-radius: 16px !important;
  padding: 14px !important;
}

/* ---------- sidebar title + subtitle ---------- */
.filter-title{
  font-size: 0.98rem !important;
  line-height: 1.18 !important;
  font-weight: 800 !important;
  margin-bottom: 6px !important;
}

.filter-subtitle{
  margin: 4px 0 10px !important;
  font-size: 0.72rem !important;
  line-height: 1.35 !important;
}

/* ---------- facet block spacing ---------- */
.gflt{
  padding: 8px 0 !important;
}

.gflt + .gflt{
  margin-top: 4px !important;
  padding-top: 8px !important;
}

.gflt__body{
  margin-top: 8px !important;
  gap: 8px !important;
}

/* ---------- facet section headers ---------- */
.gflt__hdr{
  font-size: 0.84rem !important;
  line-height: 1.18 !important;
  font-weight: 700 !important;
  padding: 1px 0 !important;
}

.gflt__chev{
  width: 8px !important;
  height: 8px !important;
  margin-left: 8px !important;
  border-right-width: 1.5px !important;
  border-bottom-width: 1.5px !important;
}

/* ---------- generic options ---------- */
.gopt,
.gopt__txt,
.gopt--radio,
.gopt--swatch,
.filter-panel .gopt label,
.filter-panel label.gopt,
.filter-panel .gopt__txt{
  font-size: 0.78rem !important;
  line-height: 1.3 !important;
}

.gopt{
  grid-template-columns: 14px 1fr auto !important;
  gap: 8px !important;
  margin-bottom: 4px !important;
  align-items: center !important;
}

.gopt--radio{
  grid-template-columns: 14px 1fr !important;
}

.gopt input{
  width: 13px !important;
  height: 13px !important;
}

.gopt__cnt{
  font-size: 0.68rem !important;
  line-height: 1 !important;
}

.filter-panel .muted{
  font-size: 0.72rem !important;
}

/* ---------- price section title + histogram ---------- */
.products-filters .fh--price .fh__top{
  margin: 0 0 8px 0 !important;
}

.products-filters .fh--price .fh__title,
.fh__title{
  font-size: 0.84rem !important;
  line-height: 1.18 !important;
  font-weight: 700 !important;
}

.products-filters .fh--price .mo-histogram,
.mo-histogram{
  width: 100% !important;
  max-width: 100% !important;
  height: 50px !important;
  margin: 0 0 10px 0 !important;
  gap: 5px !important;
  padding: 0 !important;
  align-items: flex-end !important;
}

.products-filters .fh--price .mo-hist-bar,
.mo-hist-bar{
  flex: 1 1 0 !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  border-radius: 2px 2px 0 0 !important;
}

/* ---------- price inputs ---------- */
.gprice{
  gap: 8px !important;
  margin-top: 4px !important;
}

.gprice__in{
  min-height: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  padding: 0 10px !important;
  font-size: 0.78rem !important;
}

.gprice__go{
  min-height: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  padding: 0 10px !important;
  font-size: 0.76rem !important;
}

/* ---------- source pills ---------- */
.src-pills{
  gap: 8px !important;
}

.products-filters .src-pill .src-badge,
.src-pill .src-badge{
  min-height: 28px !important;
  padding: 0 9px !important;
  gap: 6px !important;
  border-radius: 999px !important;
}

.products-filters .src-pill .src-badge__logo,
.src-pill .src-badge__logo{
  width: 13px !important;
  height: 13px !important;
  min-width: 13px !important;
  min-height: 13px !important;
}

.products-filters .src-pill .src-badge__name,
.src-pill .src-badge__name{
  font-size: 0.74rem !important;
  line-height: 1 !important;
  font-weight: 600 !important;
}

/* ---------- driver headers / badges / labels ---------- */
.products-filters .fh--driver{
  gap: 6px !important;
}

.products-filters .fh--driver .fh__top{
  gap: 6px !important;
}

.products-filters .fh--driver .fh__title{
  font-size: 0.84rem !important;
  line-height: 1.18 !important;
  font-weight: 700 !important;
}

.products-filters .fh--driver .fh__pill,
.fh__impact,
.fh__badge,
.facet-driver-badge,
.driver-badge{
  font-size: 0.64rem !important;
  line-height: 1 !important;
  padding: 3px 7px !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
}

.gflt__hdr .fh__impact,
.gflt__hdr .fh__badge,
.gflt__hdr .facet-driver-badge,
.gflt__hdr .driver-badge{
  margin-left: 6px !important;
}

.products-filters .fh--driver .fh__mid{
  gap: 6px !important;
}

.products-filters .fh--driver .fh__squares{
  gap: 4px !important;
}

.products-filters .fh--driver .fh__sq,
.fh__sq{
  width: 8px !important;
  height: 8px !important;
  border-radius: 3px !important;
}

.fh__meta,
.fh__sub{
  font-size: 0.64rem !important;
  line-height: 1.2 !important;
}

/* ---------- color swatches ---------- */
.gopt--swatch{
  gap: 8px !important;
}

.swatch{
  width: 12px !important;
  height: 12px !important;
}

/* ---------- scrollbar ---------- */
.products-filters::-webkit-scrollbar{
  width: 7px;
}

.products-filters::-webkit-scrollbar-thumb{
  border-radius: 999px;
}

/* ---------- responsive ---------- */
@media (max-width: 1320px){
  .products-layout.is-filters-open{
    grid-template-columns: 260px minmax(0, 1fr) !important;
  }

  .products-filters{
    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;
  }

  .filter-title{
    font-size: 0.92rem !important;
  }

  .gflt__hdr{
    font-size: 0.8rem !important;
  }

  .gopt,
  .gopt__txt{
    font-size: 0.74rem !important;
  }
}

@media (max-width: 900px){
  .products-filters{
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .products-layout.is-filters-open{
    grid-template-columns: 1fr !important;
  }
}
/* =========================================================
   RESULTS FACETS — final polish
   fixes:
   1) smaller drawer width
   2) smaller source logos/text
   3) smaller histogram that does not crowd the title
========================================================= */

/* ---------- drawer width ---------- */
.products-layout.is-filters-open{
  grid-template-columns: 240px minmax(0, 1fr) !important;
  column-gap: 16px !important;
}

.products-filters{
  width: 240px !important;
  min-width: 240px !important;
  max-width: 240px !important;
  padding-right: 6px !important;
}

/* keep panel padding compact inside narrower drawer */
.products-filters .filter-panel.section{
  padding: 12px !important;
  border-radius: 14px !important;
}

/* ---------- price title + histogram ---------- */
.products-filters .fh--price .fh__top{
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
}

.products-filters .fh--price .fh__title,
.fh__title{
  font-size: 0.8rem !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
}

.products-filters .fh--price .mo-histogram,
.mo-histogram{
  width: 100% !important;
  max-width: 100% !important;
  height: 38px !important;
  margin: 0 0 8px 0 !important;
  gap: 4px !important;
  padding: 0 !important;
  align-items: flex-end !important;
}

.products-filters .fh--price .mo-hist-bar,
.mo-hist-bar{
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  border-radius: 2px 2px 0 0 !important;
}

/* price inputs stay compact inside the narrower panel */
.gprice{
  gap: 6px !important;
}

.gprice__in{
  min-height: 30px !important;
  height: 30px !important;
  border-radius: 9px !important;
  padding: 0 9px !important;
  font-size: 0.74rem !important;
}

/* ---------- source pills ---------- */
.src-pills{
  gap: 6px !important;
}

/* shell */
.products-filters .src-pill > .src-badge,
.src-pill .src-badge{
  min-height: 24px !important;
  padding: 0 8px !important;
  gap: 5px !important;
  border-radius: 999px !important;
  border-width: 1px !important;
}

/* logo / dot */
.products-filters .src-pill > .src-badge .src-badge__logo,
.src-pill .src-badge__logo{
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
}

.products-filters .src-pill > .src-badge .src-badge__dot,
.src-pill .src-badge__dot{
  width: 7px !important;
  height: 7px !important;
}

/* text */
.products-filters .src-pill > .src-badge .src-badge__name,
.src-pill .src-badge__name{
  font-size: 0.74rem !important;
  line-height: 1 !important;
  font-weight: 600 !important;
}

/* ---------- slightly tighten overall facet typography ---------- */
.filter-title{
  font-size: 0.92rem !important;
  margin-bottom: 4px !important;
}

.filter-subtitle{
  font-size: 0.68rem !important;
  margin: 2px 0 8px !important;
}

.gflt__hdr{
  font-size: 0.8rem !important;
}

.gopt,
.gopt__txt,
.gopt--radio,
.gopt--swatch{
  font-size: 0.74rem !important;
  line-height: 1.28 !important;
}

.gopt{
  gap: 7px !important;
  margin-bottom: 3px !important;
}

.gopt input{
  width: 12px !important;
  height: 12px !important;
}

.fh__impact,
.fh__badge,
.facet-driver-badge,
.driver-badge{
  font-size: 0.6rem !important;
  padding: 3px 6px !important;
}

/* ---------- responsive ---------- */
@media (max-width: 1320px){
  .products-layout.is-filters-open{
    grid-template-columns: 228px minmax(0, 1fr) !important;
    column-gap: 14px !important;
  }

  .products-filters{
    width: 228px !important;
    min-width: 228px !important;
    max-width: 228px !important;
  }

  .products-filters .fh--price .mo-histogram,
  .mo-histogram{
    height: 34px !important;
  }
}

@media (max-width: 900px){
  .products-filters{
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .products-layout.is-filters-open{
    grid-template-columns: 1fr !important;
  }
}
/* =========================================================
   PRICE FACET — keep histogram below title, no overlap
========================================================= */

.products-filters .fh--price{
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
}

.products-filters .fh--price .fh__top{
  display: block !important;
  width: 100% !important;
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
  position: static !important;
}

.products-filters .fh--price .fh__title{
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
}

.products-filters .fh--price .mo-histogram{
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 76px !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  position: static !important;
  clear: both !important;
}

.products-filters .fh--price .mo-hist-bar{
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}
/* =========================================================
   RESULTS TOP BAR — SINGLE MOBILE SOURCE OF TRUTH
========================================================= */

@media (max-width: 640px){
  .products-gridWrap .gbar{
    display: grid !important;
    grid-template-columns: 36px 28px minmax(0, 1fr) 28px 104px !important;
    align-items: center !important;
    column-gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 6px 0 10px !important;
  }

  .products-gridWrap .gbar__filterBtn{
    grid-column: 1 !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 10px !important;
  }

  .products-gridWrap .gbar__filterBtn i{
    font-size: 0.9rem !important;
    line-height: 1 !important;
  }

  .products-gridWrap .gbar__chipsWrap{
    grid-column: 2 / 5 !important;
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) 28px !important;
    align-items: center !important;
    column-gap: 8px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .products-gridWrap .gbar__scrollBtn--left{
    grid-column: 1 !important;
  }

  .products-gridWrap .gbar__chips{
    grid-column: 2 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    scroll-behavior: smooth !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .products-gridWrap .gbar__chips::-webkit-scrollbar{
    display: none !important;
  }

  .products-gridWrap .gbar__scrollBtn--right{
    grid-column: 3 !important;
  }

  .products-gridWrap .gbar__scrollBtn{
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
  }

  .products-gridWrap .gbar__scrollBtn i{
    font-size: 0.72rem !important;
    line-height: 1 !important;
  }

  .products-gridWrap .gbar__clearTabsBtn{
    display: none !important;
  }

  .products-gridWrap #priceBandTabs,
  .products-gridWrap #segmentTabs{
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }

  .products-gridWrap .gtab{
    flex: 0 0 auto !important;
    min-width: 128px !important;
    height: 36px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    box-shadow: none !important;
  }

  .products-gridWrap .gbar__sort{
    grid-column: 5 !important;
    width: 104px !important;
    min-width: 104px !important;
    max-width: 104px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0 !important;
    white-space: nowrap !important;
  }

  .products-gridWrap .gbar__sortLbl{
    display: none !important;
  }

  .products-gridWrap .gbar__sortSel{
    width: 104px !important;
    min-width: 104px !important;
    max-width: 104px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 24px 0 10px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-position: right 10px center !important;
    background-repeat: no-repeat !important;
    background-size: 10px 10px !important;
  }
}
/* =========================================================
   FINAL TOP BAR RESET
   - remove quick-tab scroller row
   - keep filter left
   - keep sort + price-band dropdown right
   - works for desktop and mobile
========================================================= */

.products-gridWrap .gbar.gbar--compact{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 4px 0 14px !important;
  margin-bottom: 12px !important;
  overflow: visible !important;
}

.products-gridWrap .gbar.gbar--compact .gbar__filterBtn{
  flex: 0 0 auto !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  border-radius: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-1) !important;
}

.products-gridWrap .gbar.gbar--compact .gbar__filterBtn i{
  font-size: 1rem !important;
  line-height: 1 !important;
}

.products-gridWrap .gbar.gbar--compact .gbar__spacer{
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.products-gridWrap .gbar.gbar--compact .gbar__sortGroup{
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.products-gridWrap .gbar.gbar--compact .gbar__sort{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}

.products-gridWrap .gbar.gbar--compact .gbar__sortLbl{
  display: inline-block !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.products-gridWrap .gbar.gbar--compact .gbar__sortSel{
  width: 190px !important;
  min-width: 190px !important;
  max-width: 190px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 14px !important;
  border-radius: 14px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

.products-gridWrap .gbar.gbar--compact .gbar__sortSel:focus{
  border-color: var(--brand-500) !important;
  box-shadow: var(--focus) !important;
}

.products-gridWrap .gbar.gbar--compact .gbar__bandDropdown{
  flex: 0 0 auto !important;
}

.products-gridWrap .gbar.gbar--compact .gbar__bandBtn{
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  border-radius: 14px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  box-shadow: var(--shadow-1) !important;
}

.products-gridWrap .gbar.gbar--compact .gbar__bandBtn:hover,
.products-gridWrap .gbar.gbar--compact .gbar__bandBtn:focus{
  background: var(--surface-3) !important;
  border-color: var(--border-strong) !important;
  color: var(--text) !important;
}

.products-gridWrap .gbar.gbar--compact .gbar__bandBtn i{
  font-size: 1rem !important;
  line-height: 1 !important;
}

.products-gridWrap .gbar.gbar--compact .gbar__bandMenu{
  min-width: 220px !important;
  border-radius: 14px !important;
  padding: 8px !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-2) !important;
}

.products-gridWrap .gbar.gbar--compact .gbar__bandMenu .dropdown-item,
.products-gridWrap .gbar.gbar--compact .gbar__bandMenu .dropdown-item-text{
  min-height: 38px !important;
  display: flex !important;
  align-items: center !important;
  border-radius: 10px !important;
  font-size: 0.92rem !important;
  line-height: 1.2 !important;
}

.products-gridWrap .gbar.gbar--compact .gbar__bandMenu .dropdown-item.js-band-tab.is-active{
  background: #eef4fb !important;
  color: var(--brand-700) !important;
}

.products-gridWrap .gbar.gbar--compact .gbar__chipsWrap,
.products-gridWrap .gbar.gbar--compact .gbar__chips,
.products-gridWrap .gbar.gbar--compact .gbar__scrollBtn,
.products-gridWrap .gbar.gbar--compact .gbar__clearTabsBtn,
.products-gridWrap .gbar.gbar--compact #priceBandTabs,
.products-gridWrap .gbar.gbar--compact #segmentTabs{
  display: none !important;
}

/* mobile */
@media (max-width: 767.98px){
  .products-gridWrap .gbar.gbar--compact{
    gap: 8px !important;
    padding: 2px 0 10px !important;
  }

  .products-gridWrap .gbar.gbar--compact .gbar__filterBtn{
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 12px !important;
  }

  .products-gridWrap .gbar.gbar--compact .gbar__sortGroup{
    gap: 8px !important;
  }

  .products-gridWrap .gbar.gbar--compact .gbar__sortLbl{
    display: none !important;
  }

  .products-gridWrap .gbar.gbar--compact .gbar__sortSel{
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 10px !important;
    border-radius: 12px !important;
    font-size: 0.88rem !important;
  }

  .products-gridWrap .gbar.gbar--compact .gbar__bandBtn{
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 12px !important;
  }

  .products-gridWrap .gbar.gbar--compact .gbar__bandMenu{
    min-width: 190px !important;
  }

  .products-gridWrap .gbar.gbar--compact .gbar__bandMenu .dropdown-item,
  .products-gridWrap .gbar.gbar--compact .gbar__bandMenu .dropdown-item-text{
    min-height: 36px !important;
    font-size: 0.88rem !important;
  }
}
/* =========================================================
   FINAL MOBILE TOP BAR FIX
   keep price-band button to the RIGHT of sort
   no overlap
========================================================= */
@media (max-width: 767.98px){

  .products-gridWrap .gbar.gbar--compact{
    display: grid !important;
    grid-template-columns: 38px 1fr auto !important;
    align-items: center !important;
    column-gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 2px 0 10px !important;
    overflow: visible !important;
  }

  .products-gridWrap .gbar.gbar--compact .gbar__filterBtn{
    grid-column: 1 !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 12px !important;
    justify-self: start !important;
  }

  .products-gridWrap .gbar.gbar--compact .gbar__spacer{
    display: none !important;
  }

  .products-gridWrap .gbar.gbar--compact .gbar__sortGroup{
    grid-column: 3 !important;
    display: grid !important;
    grid-template-columns: auto 120px 38px !important;
    align-items: center !important;
    column-gap: 8px !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-self: end !important;
  }

  .products-gridWrap .gbar.gbar--compact .gbar__sort{
    display: contents !important;
  }

  .products-gridWrap .gbar.gbar--compact .gbar__sortLbl{
    display: block !important;
    grid-column: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    align-self: center !important;
  }

  .products-gridWrap .gbar.gbar--compact .gbar__sortSel{
    grid-column: 2 !important;
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    margin: 0 !important;
    padding: 0 26px 0 10px !important;
    border-radius: 12px !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    position: static !important;
    transform: none !important;
  }

  .products-gridWrap .gbar.gbar--compact .gbar__bandDropdown{
    grid-column: 3 !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    transform: none !important;
  }

  .products-gridWrap .gbar.gbar--compact .gbar__bandBtn{
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: static !important;
    transform: none !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
  }

  .products-gridWrap .gbar.gbar--compact .gbar__bandBtn i{
    font-size: 0.92rem !important;
    line-height: 1 !important;
  }

  .products-gridWrap .gbar.gbar--compact .gbar__bandMenu{
    min-width: 190px !important;
  }
}
/* =========================================================
   TABLET / MID-WIDTH FIX
   keep filter left, sort + band button right
   for widths between mobile and desktop
========================================================= */
@media (min-width: 768px) and (max-width: 1100px){

  .products-gridWrap .gbar.gbar--compact{
    display: grid !important;
    grid-template-columns: 42px 1fr auto !important;
    align-items: center !important;
    column-gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 4px 0 12px !important;
    overflow: visible !important;
  }

  .products-gridWrap .gbar.gbar--compact .gbar__filterBtn{
    grid-column: 1 !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 14px !important;
    justify-self: start !important;
  }

  .products-gridWrap .gbar.gbar--compact .gbar__spacer{
    display: none !important;
  }

  .products-gridWrap .gbar.gbar--compact .gbar__sortGroup{
    grid-column: 3 !important;
    display: grid !important;
    grid-template-columns: auto 210px 42px !important;
    align-items: center !important;
    column-gap: 10px !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-self: end !important;
  }

  .products-gridWrap .gbar.gbar--compact .gbar__sort{
    display: contents !important;
  }

  .products-gridWrap .gbar.gbar--compact .gbar__sortLbl{
    display: block !important;
    grid-column: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    align-self: center !important;
  }

  .products-gridWrap .gbar.gbar--compact .gbar__sortSel{
    grid-column: 2 !important;
    width: 210px !important;
    min-width: 210px !important;
    max-width: 210px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    margin: 0 !important;
    padding: 0 30px 0 12px !important;
    border-radius: 14px !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    position: static !important;
    transform: none !important;
  }

  .products-gridWrap .gbar.gbar--compact .gbar__bandDropdown{
    grid-column: 3 !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    transform: none !important;
    justify-self: end !important;
  }

  .products-gridWrap .gbar.gbar--compact .gbar__bandBtn{
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: static !important;
    transform: none !important;
    inset: auto !important;
  }

  .products-gridWrap .gbar.gbar--compact .gbar__bandBtn i{
    font-size: 1rem !important;
    line-height: 1 !important;
  }

  .products-gridWrap .gbar.gbar--compact .gbar__bandMenu{
    min-width: 210px !important;
  }
}
/* =========================================================
   FILTER PANEL DRAWER
   desktop: left sidebar
   tablet/mobile: fixed bottom drawer with backdrop
========================================================= */

/* ---------- tablet + mobile drawer behavior ---------- */
@media (max-width: 1100px){

  .products-layout{
    position: relative !important;
  }

  /* backdrop */
  .products-layout.is-filters-open::before{
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, 0.22) !important;
    z-index: 1200 !important;
  }

  /* drawer shell */
  .products-filters{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: min(78vh, 720px) !important;

    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    z-index: 1300 !important;

    transform: translateY(100%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform 0.24s ease, opacity 0.24s ease !important;
  }

  /* open state */
  .products-layout.is-filters-open .products-filters{
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* actual visible drawer panel */
  .products-filters .filter-panel.section{
    position: relative !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: min(78vh, 720px) !important;
    overflow: auto !important;

    background: #ffffff !important;
    border: 0 !important;
    border-radius: 22px 22px 0 0 !important;
    box-shadow: 0 -18px 50px rgba(15, 23, 42, 0.18) !important;

    padding: 18px 16px 22px !important;
  }

  /* top handle */
  .products-filters .filter-panel.section::before{
    content: "" !important;
    display: block !important;
    width: 46px !important;
    height: 5px !important;
    border-radius: 999px !important;
    background: #cfd8e3 !important;
    margin: 0 auto 14px auto !important;
  }

  /* tighter scroll area inside drawer */
  .products-filters::-webkit-scrollbar{
    display: none !important;
  }

  .products-filters .filter-panel.section::-webkit-scrollbar{
    width: 8px !important;
  }

  .products-filters .filter-panel.section::-webkit-scrollbar-thumb{
    background: #cfd8e3 !important;
    border-radius: 999px !important;
  }

  .products-filters .filter-panel.section::-webkit-scrollbar-track{
    background: transparent !important;
  }

  /* keep product grid stable; drawer should not take layout space */
  .products-gridWrap{
    width: 100% !important;
    min-width: 0 !important;
  }

  .products-layout,
  .products-layout.is-filters-open{
    display: block !important;
    grid-template-columns: none !important;
  }
}

/* ---------- mobile: slightly shorter/tighter drawer ---------- */
@media (max-width: 767.98px){

  .products-filters{
    max-height: 82vh !important;
  }

  .products-filters .filter-panel.section{
    max-height: 82vh !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 16px 14px 20px !important;
  }

  .products-filters .filter-panel.section::before{
    width: 42px !important;
    height: 5px !important;
    margin-bottom: 12px !important;
  }
}
/* =========================================================
   QUICK INSIGHT — keep text visible on mobile when space allows
========================================================= */
@media (max-width: 767.98px){

  .pcard__utility{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  .pcard__source-row{
    flex: 0 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .src-badge{
    max-width: calc(100% - 118px) !important;
  }

  .quickcheck-btn{
    width: auto !important;
    min-width: 108px !important;
    max-width: 140px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 10px !important;
    gap: 6px !important;
    border-radius: 10px !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  .quickcheck-btn__img{
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 auto !important;
  }

  .quickcheck-btn__text{
    display: inline !important;
    font-size: 0.8rem !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
  }
}
/* =========================================================
   ACTIVE STATE — filter button + price-band button
   show clearly when something is selected
========================================================= */

/* ------------------------------
   Filter button active state
------------------------------ */
.products-gridWrap .gbar .gbar__filterBtn.is-active,
.products-gridWrap .gbar .gbar__filterBtn[aria-expanded="true"]{
  background: #eef4fb !important;
  border-color: #c9dbf2 !important;
  color: var(--brand-700) !important;
  box-shadow: 0 0 0 3px rgba(111, 143, 184, 0.14) !important;
}

.products-gridWrap .gbar .gbar__filterBtn.is-active i,
.products-gridWrap .gbar .gbar__filterBtn[aria-expanded="true"] i{
  color: var(--brand-700) !important;
}

/* ------------------------------
   Price-band icon active state
   active when dropdown is open
------------------------------ */
.products-gridWrap .gbar .gbar__bandBtn.show,
.products-gridWrap .gbar .gbar__bandBtn[aria-expanded="true"]{
  background: #eef4fb !important;
  border-color: #c9dbf2 !important;
  color: var(--brand-700) !important;
  box-shadow: 0 0 0 3px rgba(111, 143, 184, 0.14) !important;
}

.products-gridWrap .gbar .gbar__bandBtn.show i,
.products-gridWrap .gbar .gbar__bandBtn[aria-expanded="true"] i{
  color: var(--brand-700) !important;
}

/* ------------------------------
   Price-band icon active state
   persistent when one band is selected
------------------------------ */
.products-gridWrap .gbar .gbar__bandDropdown.has-active-band .gbar__bandBtn{
  background: #eef4fb !important;
  border-color: #c9dbf2 !important;
  color: var(--brand-700) !important;
  box-shadow: 0 0 0 3px rgba(111, 143, 184, 0.14) !important;
}

.products-gridWrap .gbar .gbar__bandDropdown.has-active-band .gbar__bandBtn i{
  color: var(--brand-700) !important;
}

/* active item inside dropdown */
.products-gridWrap .gbar .gbar__bandMenu .dropdown-item.is-active{
  background: #eef4fb !important;
  color: var(--brand-700) !important;
  font-weight: 700 !important;
}
/* =========================================================
   FILTER ICON — active ONLY when filters are selected
   not just because drawer/panel is open
========================================================= */

/* reset any old "open = active" styling */
.products-gridWrap .gbar .gbar__filterBtn[aria-expanded="true"],
.products-gridWrap .gbar .gbar__filterBtn[aria-expanded="true"] i{
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-1) !important;
}

/* real active state = actual selected filters */
.products-gridWrap .gbar .gbar__filterBtn.is-active{
  background: #eef4fb !important;
  border-color: #c9dbf2 !important;
  color: var(--brand-700) !important;
  box-shadow: 0 0 0 3px rgba(111, 143, 184, 0.14) !important;
}

.products-gridWrap .gbar .gbar__filterBtn.is-active i{
  color: var(--brand-700) !important;
}
/* =========================================================
   FINAL FILTER PANEL SOURCE OF TRUTH
   Desktop (>1100): left sidebar
   Tablet + mobile (<=1100): half-height bottom drawer
========================================================= */

body.filters-drawer-open{
  overflow: hidden !important;
}

/* default helper elements hidden */
.filters-backdrop,
.filters-drawer-close{
  display: none;
}

/* desktop */
@media (min-width: 1101px){
  .products-layout{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    align-items: start !important;
  }

  .products-layout.is-filters-open{
    display: grid !important;
    grid-template-columns: 240px minmax(0, 1fr) !important;
    column-gap: 16px !important;
    align-items: start !important;
  }

  .products-filters{
    position: sticky !important;
    top: 14px !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
    max-height: calc(100vh - 28px) !important;
    overflow: auto !important;
    margin: 0 !important;
    padding-right: 6px !important;
    background: transparent !important;
    box-shadow: none !important;
    z-index: auto !important;
  }

  .products-filters .filter-panel.section{
    position: relative !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 !important;
    border-radius: 14px !important;
  }
}

/* tablet + mobile drawer */
@media (max-width: 1100px){
  .products-layout,
  .products-layout.is-filters-open{
    display: block !important;
    grid-template-columns: none !important;
    position: relative !important;
  }

  .products-gridWrap{
    width: 100% !important;
    min-width: 0 !important;
  }

  .filters-backdrop{
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    border: 0 !important;
    background: rgba(15, 23, 42, 0.24) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.22s ease !important;
    z-index: 1200 !important;
  }

  .products-layout.is-filters-open .filters-backdrop{
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .products-filters{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 50vh !important;
    max-height: 50vh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: translateY(100%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform 0.24s ease, opacity 0.24s ease !important;
    z-index: 1300 !important;
  }

  .products-layout.is-filters-open .products-filters{
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .products-filters .filter-panel.section{
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    height: 50vh !important;
    max-height: 50vh !important;
    overflow: auto !important;
    margin: 0 !important;
    padding: 46px 16px 20px !important;
    background: #ffffff !important;
    border: 0 !important;
    border-radius: 22px 22px 0 0 !important;
    box-shadow: 0 -18px 50px rgba(15, 23, 42, 0.18) !important;
  }

  .products-filters .filter-panel.section::before{
    content: "" !important;
    display: block !important;
    width: 44px !important;
    height: 5px !important;
    border-radius: 999px !important;
    background: #cfd8e3 !important;
    margin: 0 auto 12px auto !important;
  }

  .filters-drawer-close{
    display: inline-flex !important;
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: var(--text) !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    box-shadow: var(--shadow-1) !important;
    z-index: 2 !important;
  }

  .filters-drawer-close i{
    font-size: 0.9rem !important;
    line-height: 1 !important;
  }
}
/* =========================================================
   FINAL FILTER CLEANUP
   1) filter icon only blue when filters actually selected
   2) prevent grid drop after resizing from drawer mode
========================================================= */

/* filter button should NOT stay blue just because drawer had been opened */
.products-gridWrap .gbar .gbar__filterBtn{
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

.products-gridWrap .gbar .gbar__filterBtn i{
  color: var(--text) !important;
}

.products-gridWrap .gbar .gbar__filterBtn.is-active{
  background: #eef4fb !important;
  border-color: #c9dbf2 !important;
  color: var(--brand-700) !important;
  box-shadow: 0 0 0 3px rgba(111, 143, 184, 0.14) !important;
}

.products-gridWrap .gbar .gbar__filterBtn.is-active i{
  color: var(--brand-700) !important;
}

/* if no active filters, force neutral even after close/open cycles */
.products-gridWrap .gbar .gbar__filterBtn[data-has-active-filters="0"]{
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-1) !important;
}

.products-gridWrap .gbar .gbar__filterBtn[data-has-active-filters="0"] i{
  color: var(--text) !important;
}

/* desktop/tablet grid stability after resizing from drawer mode */
@media (min-width: 1101px){
  .products-layout{
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }

  .products-layout.is-filters-open{
    display: grid !important;
    grid-template-columns: 240px minmax(0, 1fr) !important;
    column-gap: 16px !important;
    align-items: start !important;
  }

  .products-gridWrap{
    grid-column: auto !important;
    width: auto !important;
    min-width: 0 !important;
    transform: none !important;
    margin-top: 0 !important;
  }

  .products-filters{
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}
/* =========================================================
   FINAL FILTER VISIBILITY GUARD
   hidden attribute must win over all old filter CSS
========================================================= */
#filtersPanel[hidden],
#filtersBackdrop[hidden]{
  display: none !important;
}
@media (max-width: 1100px){
  #filtersPanel[hidden]{
    display: block !important;
    transform: translateY(100%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}
/* =========================================================
   FACTCHECK DRAWER — iPhone/mobile safe header fix
   keeps title + X always visible, including first-row opens
========================================================= */

/* base safety */
.cmp-drawer{
  z-index: 3000 !important;
}

.cmp-drawer__panel{
  z-index: 3001 !important;
}

/* mobile / touch screens */
@media (max-width: 767.98px){

  .cmp-drawer{
    position: fixed !important;
    inset: 0 !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
  }

  .cmp-drawer__panel{
    top: env(safe-area-inset-top, 0px) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px)) !important;
    min-height: calc(100dvh - env(safe-area-inset-top, 0px)) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .cmp-drawer__hdr{
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
    background: #fff !important;
    padding-top: max(14px, env(safe-area-inset-top, 0px)) !important;
    padding-right: 16px !important;
    padding-bottom: 12px !important;
    padding-left: 16px !important;
    border-bottom: 1px solid #eee !important;
  }

  .cmp-drawer__title{
    font-size: 1rem !important;
    line-height: 1.2 !important;
  }

  .cmp-drawer__close{
    position: relative !important;
    z-index: 6 !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }

  .cmp-drawer__body{
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-top: 12px !important;
    padding-right: 16px !important;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    padding-left: 16px !important;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 72px) !important;
  }
}
/* =========================================================
   IOS / MOBILE OVERLAY SCROLL LOCK FIX
   prevents background page from moving behind:
   - filter facet drawer
   - factcheck drawer
========================================================= */

/* lock page when filter drawer OR factcheck drawer is open */
html:has(body.filters-drawer-open),
html:has(body.cmp-lock){
  overflow: hidden !important;
  height: 100% !important;
}


/* iPhone Safari needs stronger fixed lock */
@media (max-width: 767.98px){
  body.cmp-lock{
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
  }
}

/* overlay shells must own the scroll, not the page behind them */
.products-filters,
.products-filters .filter-panel.section,
.cmp-drawer,
.cmp-drawer__panel,
.cmp-drawer__body{
  overscroll-behavior: contain !important;
}

/* enable smooth internal scrolling inside overlay content */
.products-filters .filter-panel.section,
.cmp-drawer__body{
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

/* backdrop should block touch from leaking to page */
.filters-backdrop,
.cmp-drawer__backdrop{
  touch-action: none !important;
}

/* safety: drawer shells fill viewport cleanly on mobile */
@media (max-width: 767.98px){
  .products-filters{
    max-height: 50dvh !important;
  }

  .products-filters .filter-panel.section{
    max-height: 50dvh !important;
  }

  .cmp-drawer{
    inset: 0 !important;
  }

  .cmp-drawer__panel{
    max-height: 100dvh !important;
  }

  .cmp-drawer__body{
    max-height: calc(100dvh - 76px - env(safe-area-inset-top, 0px)) !important;
  }
}

/* =========================================================
   FINAL TYPICAL-GROUP / ACTIVE-BAND BAR
========================================================= */

/* hide old band icon UI completely */
.gbar__bandLegacy,
.gbar__bandDropdown,
.gbar__bandBtn{
  display: none !important;
}

/* top row */
.products-gridWrap .gbar.gbar--compact{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 4px 0 12px !important;
  margin-bottom: 12px !important;
}

.products-gridWrap .gbar.gbar--compact .gbar__filterBtn{
  flex: 0 0 auto !important;
  order: 1 !important;
}

.products-gridWrap .gbar__activeBands{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  order: 2 !important;
}

.products-gridWrap .gbar__activeBandPill{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 38px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  border: 1px solid #d3e0f0 !important;
  background: #eef4fb !important;
  color: var(--brand-700) !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  box-shadow: var(--shadow-1) !important;
}

.products-gridWrap .gbar__activeBandPill:hover{
  background: #e8f1fc !important;
}

.products-gridWrap .gbar__activeBandText{
  white-space: nowrap !important;
}

.products-gridWrap .gbar__activeBandX{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 999px !important;
  background: rgba(67,95,128,0.10) !important;
  font-size: 1rem !important;
  line-height: 1 !important;
}

.products-gridWrap .gbar.gbar--compact .gbar__spacer{
  display: none !important;
}

.products-gridWrap .gbar.gbar--compact .gbar__sortGroup{
  margin-left: auto !important;
  flex: 0 0 auto !important;
  order: 3 !important;
}

/* products section visual feedback after typical-group click */
#products{
  scroll-margin-top: calc(var(--app-header-offset) + 12px) !important;
}

.products-section--bandFlash{
  animation: productsBandFlash 1.1s ease !important;
}

@keyframes productsBandFlash{
  0%{
    box-shadow: 0 0 0 0 rgba(111,143,184,0);
    transform: translateY(0);
  }
  25%{
    box-shadow: 0 0 0 4px rgba(111,143,184,0.12);
    transform: translateY(-1px);
  }
  100%{
    box-shadow: 0 0 0 0 rgba(111,143,184,0);
    transform: translateY(0);
  }
}

@media (max-width: 900px){
  .products-gridWrap .gbar__activeBands{
    width: 100% !important;
    order: 3 !important;
  }

  .products-gridWrap .gbar.gbar--compact .gbar__sortGroup{
    order: 2 !important;
    margin-left: auto !important;
  }
}

@media (max-width: 640px){
  .products-gridWrap .gbar.gbar--compact{
    gap: 8px !important;
  }

  .products-gridWrap .gbar__activeBandPill{
    min-height: 34px !important;
    padding: 0 10px !important;
    font-size: 0.82rem !important;
  }

  .products-gridWrap .gbar__activeBandX{
    width: 16px !important;
    height: 16px !important;
    font-size: 0.92rem !important;
  }
}
/* =========================================================
   FINAL MOBILE/TABLET TOP BAR FIX
   selected typical-group pills stay in same row
========================================================= */

.products-gridWrap .gbar.gbar--compact{
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) auto !important;
  align-items: center !important;
  column-gap: 8px !important;
  row-gap: 0 !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  min-width: 0 !important;
}

.products-gridWrap .gbar.gbar--compact .gbar__filterBtn{
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
}

.products-gridWrap .gbar.gbar--compact .gbar__activeBands{
  grid-column: 2 !important;
  grid-row: 1 !important;
  order: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.products-gridWrap .gbar.gbar--compact .gbar__activeBands::-webkit-scrollbar{
  display: none !important;
}

.products-gridWrap .gbar.gbar--compact .gbar__activeBandPill{
  flex: 0 0 auto !important;
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 10px !important;
  font-size: 0.8rem !important;
  gap: 6px !important;
}

.products-gridWrap .gbar.gbar--compact .gbar__activeBandText{
  display: inline-block !important;
  max-width: 82px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.products-gridWrap .gbar.gbar--compact .gbar__activeBandX{
  width: 16px !important;
  height: 16px !important;
  font-size: 0.92rem !important;
  flex: 0 0 auto !important;
}

.products-gridWrap .gbar.gbar--compact .gbar__spacer{
  display: none !important;
}

.products-gridWrap .gbar.gbar--compact .gbar__sortGroup{
  grid-column: 3 !important;
  grid-row: 1 !important;
  order: 0 !important;
  margin-left: 0 !important;
  justify-self: end !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
}

.products-gridWrap .gbar.gbar--compact .gbar__sort{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
}

@media (max-width: 900px){
  .products-gridWrap .gbar.gbar--compact{
    grid-template-columns: 38px minmax(0, 1fr) auto !important;
    column-gap: 8px !important;
  }

  .products-gridWrap .gbar.gbar--compact .gbar__activeBands{
    order: 0 !important;
    width: 100% !important;
  }

  .products-gridWrap .gbar.gbar--compact .gbar__sortGroup{
    order: 0 !important;
    margin-left: 0 !important;
  }
}

@media (max-width: 640px){
  .products-gridWrap .gbar.gbar--compact{
    grid-template-columns: 36px minmax(0, 1fr) 120px !important;
    column-gap: 8px !important;
    padding: 2px 0 10px !important;
  }

  .products-gridWrap .gbar.gbar--compact .gbar__filterBtn{
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    border-radius: 10px !important;
  }

  .products-gridWrap .gbar.gbar--compact .gbar__sortGroup{
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    justify-self: end !important;
  }

  .products-gridWrap .gbar.gbar--compact .gbar__sort{
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    justify-content: flex-end !important;
  }

  .products-gridWrap .gbar.gbar--compact .gbar__sortLbl{
    display: none !important;
  }

  .products-gridWrap .gbar.gbar--compact .gbar__sortSel{
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 24px 0 10px !important;
    border-radius: 12px !important;
    font-size: 0.82rem !important;
  }

  .products-gridWrap .gbar.gbar--compact .gbar__activeBandPill{
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 9px !important;
    font-size: 0.78rem !important;
  }

  .products-gridWrap .gbar.gbar--compact .gbar__activeBandText{
    max-width: 62px !important;
  }
}

html,
body{
  scroll-behavior: auto !important;
}
/* =========================================================
   PRICE HISTOGRAM — clearer clickable vs empty buckets
========================================================= */

.products-filters .fh--price .mo-histogram{
  align-items: flex-end !important;
}

.products-filters .fh--price .mo-hist-bar{
  cursor: pointer;
  opacity: 0.95;
  transition: transform 0.14s ease, opacity 0.14s ease, filter 0.14s ease;
}

.products-filters .fh--price .mo-hist-bar:hover{
  transform: translateY(-2px);
  filter: brightness(0.97);
}

.products-filters .fh--price .mo-hist-bar.js-price-bin{
  cursor: pointer;
}

.products-filters .fh--price .mo-hist-bar--empty{
  cursor: default !important;
  opacity: 0.22 !important;
  pointer-events: none !important;
  filter: grayscale(0.2);
}

.products-filters .fh--price .mo-hist-bar--empty:hover{
  transform: none !important;
  filter: grayscale(0.2) !important;
}

/* slightly stronger visual separation by band */
.products-filters .fh--price .mo-hist-bar--cheap{
  border-top-left-radius: 4px !important;
  border-top-right-radius: 4px !important;
}

.products-filters .fh--price .mo-hist-bar--normal{
  border-top-left-radius: 4px !important;
  border-top-right-radius: 4px !important;
}

.products-filters .fh--price .mo-hist-bar--premium{
  border-top-left-radius: 4px !important;
  border-top-right-radius: 4px !important;
}