/* ===========================
   ER FILTER - scoped + no SVG
   =========================== */

/* Main wrapper */
.er-filter{
  width:100%;
}
/* FORCE shop grid to 3 columns on desktop */
@media (min-width: 1025px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
  }

  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
  }
}

/* Group styling like screenshot */
.er-filter .er-group{
  background: rgba(255,255,255,0.7);
  margin: 0 0 18px;
}

.er-filter .er-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 0 14px;
  color:#000;
  font-size: 18px;
  font-weight: 500;
}

/* Reset button (small red pill) */
.er-filter .er-reset{
  background:#ff4d4d;
  color:#fff;
  border:0;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 12px;
  cursor:pointer;
}

/* Divider line between title and items */
.er-filter .er-items{
  padding: 20px 0 10px;
  border-top: 1px solid #eeeeee;
}

/* -------- Rating rows (NO checkboxes) -------- */
.er-filter .er-rating-list{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.er-filter .er-rating-row{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  background:transparent;
  border:0;
  padding: 0;
  cursor:pointer;
  color:#111;
}

/* Stars container */
.er-filter .er-stars{
  display:inline-flex;
  gap: 4px;
}

/* Star shape using mask (not SVG element) */
.er-filter .er-stars i{
  width:16px;
  height:16px;
  display:block;
  background:#000;
  opacity: 1;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M381.2 150.3L524.9 171.5c12 1.7 22 10.1 25.8 21.6 3.8 11.6.7 24.2-7.9 32.8L438.5 328.1l24.6 146.6c2 12-2.9 24.2-12.9 31.3-9.9 7.1-23 8-33.7 2.3L288.1 439.8 159.8 508.3c-10.8 5.7-23.8 4.8-33.8-2.3-9.9-7.1-14.9-19.3-12.8-31.3L137.8 328.1 33.6 225.9c-8.6-8.6-11.7-21.2-7.9-32.8C29.5 181.6 39.4 173.2 51.4 171.5L195 150.3 259.4 18c5.3-11 16.5-18 28.7-18s23.4 7 28.7 18l64.4 132.3z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M381.2 150.3L524.9 171.5c12 1.7 22 10.1 25.8 21.6 3.8 11.6.7 24.2-7.9 32.8L438.5 328.1l24.6 146.6c2 12-2.9 24.2-12.9 31.3-9.9 7.1-23 8-33.7 2.3L288.1 439.8 159.8 508.3c-10.8 5.7-23.8 4.8-33.8-2.3-9.9-7.1-14.9-19.3-12.8-31.3L137.8 328.1 33.6 225.9c-8.6-8.6-11.7-21.2-7.9-32.8C29.5 181.6 39.4 173.2 51.4 171.5L195 150.3 259.4 18c5.3-11 16.5-18 28.7-18s23.4 7 28.7 18l64.4 132.3z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Show only first N stars per row (others hidden) */
.er-filter .er-rating-row .er-stars i{ display:none; }
.er-filter .er-rating-row[data-value="5"] .er-stars i:nth-child(-n+5){ display:block; }
.er-filter .er-rating-row[data-value="4"] .er-stars i:nth-child(-n+4){ display:block; }
.er-filter .er-rating-row[data-value="3"] .er-stars i:nth-child(-n+3){ display:block; }
.er-filter .er-rating-row[data-value="2"] .er-stars i:nth-child(-n+2){ display:block; }
.er-filter .er-rating-row[data-value="1"] .er-stars i:nth-child(-n+1){ display:block; }

/* Selected row turns yellow */
.er-filter .er-rating-row.is-selected .er-stars i{
  background:#f5b301;
}

/* Hover preview */
.er-filter .er-rating-row:hover .er-stars i{
  background:#f5b301;
}

/* -------- Price UI -------- */
.er-filter .er-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 16px;
  border-radius: 999px;
  background:#432fb8;
  color:#fff;
  font-size: 13px;
  margin-bottom: 14px;
}

.er-filter .er-slider{
  position: relative;
  height: 6px;
  border-radius: 6px;
  margin: 10px 0 16px;
}

.er-filter .er-track{
  position:absolute;
  inset:0;
  background:#ddd;
  border-radius:6px;
}

.er-filter .er-progress{
  position:absolute;
  top:0; bottom:0;
  left:0%;
  right:0%;
  background:#432fb8;
  border-radius:6px;
}

/* Double range */
.er-filter .er-range{
  position: relative;
  height: 18px;
}

.er-filter .er-range input[type="range"]{
  position:absolute;
  left:0; top:0;
  width:100%;
  background: transparent;
  -webkit-appearance:none;
  pointer-events:none;
  margin:0;
  height: 18px;
}

.er-filter .er-range input[type="range"]::-webkit-slider-thumb{
  pointer-events:auto;
  -webkit-appearance:none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background:#432fb8;
  border:0;
}

.er-filter .er-range input[type="range"]::-moz-range-thumb{
  pointer-events:auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background:#432fb8;
  border:0;
}

/* Actions row */
.er-filter .er-row-actions{
  margin-top: 12px;
}

/* Loader */
.er-filter .er-loader{
  width:56px;
  height:56px;
  border-radius:50%;
  background: conic-gradient(#0000 10%, #432fb8);
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 9px), #000 0);
  animation: er-spin 1s infinite linear;
}

@keyframes er-spin { to { transform: rotate(1turn); } }