.filters {
  width: 1165px;
  height: 51px;
  border-radius: 10px;
  background-color: #ecf3f3;
  overflow: visible;
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  padding: 7px 0 0 8px;
  box-sizing: border-box;
  gap: 15px;
  font-size: 12px;
  color: #795345;
}
.filters .filter-dropdown {
  position: relative;
  flex-shrink: 0;
}
.filters button.format,
.filters button.color,
.filters button.brand,
.filters button.material,
.filters button.shape,
.filters button.style,
.filters button.tag {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  appearance: none;
  box-shadow: none;
  outline: none;
}
.filters .filter-hidden-label[hidden] {
  display: none !important;
}
.filters .filter-color-preview,
.filters .filter-material-preview,
.filters .filter-shape-preview {
  position: absolute;
  inset: 0 auto auto 0;
  pointer-events: none;
}
.filters .filter-dropdown__menu {
  z-index: 50;
}
.filter-format-wrap,
.format {
  height: 37px;
  width: 108px;
  display: flex;
  align-items: center;
}
.format {
  flex-shrink: 0;
  position: relative;
  isolation: isolate;
}
.filter-format-wrap {
  margin: 0 !important;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: -0.2px 0.5px 1px rgba(0, 66, 63, 0.5);
  border-radius: 7px 31px 31px 7px;
  background-color: #fff;
  padding: 8px 8px 8px 11px;
  box-sizing: border-box;
  gap: 8px;
  z-index: 0;
}
.filter-format-label {
  height: 19px;
  width: 49px;
  position: relative;
  color: #843300;
  font-family: Ubuntu;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  display: inline-block;
}
.filter-expand-icon {
  width: 16px;
  position: relative;
  border-radius: 1.5px;
  max-height: 100%;
}
.color {
  height: 37px;
  width: 68px;
  position: relative;
  flex-shrink: 0;
}
.brand,
.filter-brand-inner,
.filter-color-inner {
  display: flex;
  align-items: center;
}
.filter-color-inner {
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: -0.2px 0.5px 1px rgba(0, 66, 63, 0.5);
  border-radius: 7px 31px 31px 7px;
  background-color: #fff;
  height: 100%;
  padding: 0 8px 0 12px;
  box-sizing: border-box;
  gap: 8px;
  width: 100%;
}
.brand,
.filter-brand-inner {
  height: 37px;
}
.brand {
  width: 90px;
  flex-shrink: 0;
  color: #795344;
  font-family: Lemonada;
}
.filter-brand-inner {
  box-shadow: -0.2px 0.5px 1px rgba(0, 66, 63, 0.5);
  border-radius: 7px 31px 31px 7px;
  background-color: #fff;
  padding: 8px 8px 8px 11px;
  box-sizing: border-box;
  gap: 8px;
}
.filter-brand-label {
  width: 47px;
    height: 23px;
    display: flex;
    align-items: center;      /* vertical center */
    justify-content: center;  /* horizontal center */
    text-align: center;
}
.filter-material-inner,
.material {
  height: 37px;
  display: flex;
  align-items: center;
}
.filter-material-inner {
  box-shadow: -0.2px 0.5px 1px rgba(0, 66, 63, 0.5);
  border-radius: 7px 31px 31px 7px;
  background-color: #fff;
  padding: 8px 8px 8px 12px;
  box-sizing: border-box;
  gap: 8px;
}
.filter-expand-icon-sm,
.filter-icon-img {
  position: relative;
  max-height: 100%;
  flex-shrink: 0;
}
.filter-icon-img {
  width: 24px;
  object-fit: cover;
}
.filter-expand-icon-sm {
  width: 16px;
  border-radius: 1.5px;
}
.filter-shape-inner,
.shape {
  height: 37px;
  width: 66px;
  display: flex;
  align-items: center;
}
.shape {
  flex-shrink: 0;
}
.filter-shape-inner {
  box-shadow: -0.2px 0.5px 1px rgba(0, 66, 63, 0.5);
  border-radius: 8px 31px 31px 8px;
  background-color: #fff;
  padding: 8px 8px 8px 12px;
  box-sizing: border-box;
  gap: 8px;
}
.filter-shape-icon {
  width: 21px;
  position: relative;
  max-height: 100%;
  object-fit: cover;
  flex-shrink: 0;
}
.filter-price-inner,
.style {
  height: 37px;
  display: flex;
}
.filter-price-inner {
  box-shadow: -0.2px 0.5px 1px rgba(0, 66, 63, 0.5);
  border-radius: 7px 31px 31px 7px;
  background-color: #fff;
  align-items: center;
  padding: 0 8px 0 12px;
  box-sizing: border-box;
  gap: 8px;
}
.style {
  align-items: flex-start;
}
.filter-style-inner {
  box-shadow: -0.2px 0.5px 1px rgba(0, 66, 63, 0.5);
  border-radius: 7px 31px 31px 7px;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 8px 0 11px;
  gap: 8px;
}
.filter-style-inner,
.filter-size-inner,
.filter-tag-inner,
.tag {
  height: 37px;
  box-sizing: border-box;
}
.filter-size-inner {
  box-shadow: -0.2px 0.5px 1px rgba(0, 66, 63, 0.5);
  border-radius: 7px 31px 31px 7px;
  background-color: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 8px 8px 8px 12px;
  gap: 8px;
}
.filter-tag-inner,
.tag {
  flex-shrink: 0;
}
.tag {
  width: 68px;
  display: flex;
  align-items: center;
  padding: 10px 8px 10px 10px;
  position: relative;
  isolation: isolate;
}
.filter-tag-inner {
  margin: 0 !important;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: -0.2px 0.5px 1px rgba(0, 66, 63, 0.5);
  border-radius: 8px 31px 31px 8px;
  background-color: #fff;
  padding: 0 8px 0 12px;
  gap: 8px;
  z-index: 0;
  display: flex;
  align-items: center;
  height: 37px;
}

/* ── Tablet: up to 1024px ───────────────────────────────────────── */
@media screen and (max-width: 1024px) {
  .filters {
    width: 100%;
    height: auto;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
  }
}

/* ── Mobile: up to 768px ────────────────────────────────────────── */
@media screen and (max-width: 768px) {
  .filters {
    padding: 8px;
    gap: 6px;
  }
}

/* Dropdown menu behavior migrated from assets-main/css/filter.css so the new filter design is self-contained in assets/. */
.filter-dropdown__menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 252px;
  box-sizing: border-box;
  height: auto;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  opacity: 1;
  border-radius: 15px;
  border-width: 4px;
  padding-right: 18px;
  padding-left: 18px;
  background: #FFFFFF;
border: 4px solid #F2F2F2;
    z-index: 11;
}

.filter-dropdown__menu::-webkit-scrollbar {
  display: none;
}

.filter-dropdown__item {

height: 66px;

opacity: 1;
gap: 28px;
padding-top: 19px;
padding-right: 15px;
padding-bottom: 19px;
padding-left: 15px;
border-bottom-width: 1px;
background: #FFFFFF;
border-bottom: 1px solid #F3F3F3;
display: flex;
justify-content: center;
text-align: center;
border-color: transparent;
}

.filter-dropdown__item + .filter-dropdown__item {
  margin-top: 2px;
}

#format-filter-menu .filter-dropdown__item {
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  text-align: left;
}

#format-filter-menu .filter-dropdown__item-label {
  flex: 1 1 auto;
  text-align: left;
}

#material-filter-menu .filter-material__item {
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 12px;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}

#material-filter-menu .filter-material__item .filter-dropdown__item-label {
  flex: 1 1 auto;
  text-align: left;
  white-space: nowrap;
}

.filter-dropdown__menu--style {
  width: 192px;
  height: 408px;
  opacity: 1;
  border-radius: 15px;
  border-width: 4px;
  padding-right: 18px;
  padding-left: 18px;
  color: #FFFFFF;
  border: 4px solid #F2F2F2;
  background: #FFFFFF;
}

#style-filter-menu .filter-style__item {
  width: 100%;
  height: 66px;
  box-sizing: border-box;
  padding-left: 0;
  padding-right: 0;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "League Spartan", "Spartan", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 17px;
  line-height: 100%;
  letter-spacing: 0;
  color: #434343;
}

#style-filter-menu .filter-style__item .filter-dropdown__item-label {
  display: block;
  width: 100%;
  text-align: center;
}

.filter-dropdown__item:hover,
.filter-dropdown__item:focus-visible {
  background: rgba(255, 255, 255, 0.56);
  outline: none;
}

#format-filter-menu .filter-dropdown__item:hover,
#format-filter-menu .filter-dropdown__item:focus-visible {

}

#format-filter-menu .filter-dropdown__item:hover,
#format-filter-menu .filter-dropdown__item:focus-visible {
  width: 216px;
  height: 66px;
  opacity: 1;
  gap: 12px;
  padding-top: 19px;
  padding-right: 15px;
  padding-bottom: 19px;
  padding-left: 15px;
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
  border-bottom: 3px solid #FA5F00;
  color: #ffffff;
}

#material-filter-menu .filter-material__item:hover,
#material-filter-menu .filter-material__item:focus-visible {
  width: 100%;
  height: 66px;
  opacity: 1;
  padding-top: 19px;
  padding-right: 15px;
  padding-bottom: 19px;
  padding-left: 15px;
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
  border-bottom: 3px solid #FA5F00;
  color: #ffffff;
  box-sizing: border-box;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 12px;
}

#material-filter-menu .filter-material__item[aria-checked="true"] {
  width: 100%;
  height: 66px;
  opacity: 1;
  padding-top: 19px;
  padding-right: 15px;
  padding-bottom: 19px;
  padding-left: 15px;
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
  border-bottom: 3px solid #FA5F00;
  color: #FA5F00;
  box-sizing: border-box;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 12px;
}

#format-filter-menu .filter-dropdown__item:hover .filter-dropdown__item-label,
#format-filter-menu .filter-dropdown__item:focus-visible .filter-dropdown__item-label {
  color: #FA5F00;
}

#material-filter-menu .filter-material__item:hover .filter-dropdown__item-label,
#material-filter-menu .filter-material__item:focus-visible .filter-dropdown__item-label {
  color: #FA5F00;
}

#material-filter-menu .filter-material__item[aria-checked="true"] .filter-dropdown__item-label {
  color: #FA5F00;
  font-weight: 700;
}

#style-filter-menu .filter-style__item:hover,
#style-filter-menu .filter-style__item:focus-visible {
  
  opacity: 1;
  margin-left: auto;
  margin-right: auto;
  padding-top: 19px;
  padding-right: 10px;
  padding-bottom: 19px;
  padding-left: 10px;
  box-sizing: border-box;
  border-bottom: 3px solid #FA5F00;
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
}

#style-filter-menu .filter-style__item:hover .filter-dropdown__item-label,
#style-filter-menu .filter-style__item:focus-visible .filter-dropdown__item-label {
  color: #FA5F00;
}

#format-filter-menu .filter-dropdown__item[aria-checked="true"]:hover,
#format-filter-menu .filter-dropdown__item[aria-checked="true"]:focus-visible {
 
}

.filter-dropdown__item[aria-checked="true"] {
color: #FA5F00;

}

.filter-dropdown__item[aria-checked="true"] .filter-dropdown__item-label {
  color: #fc640f;
  font-weight: 700;
}

.filter-dropdown__item-icon {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #ffffff;
  font-weight: 700;
  font-size: 9px;
  user-select: none;
  overflow: hidden;
}

.filter-dropdown__item-icon--img {
  color: transparent;
}

.filter-dropdown__item-icon-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}

.filter-dropdown__item-icon[data-icon="acad"] {
  background: #e5206b;
  border-radius: 5px;
}

.filter-dropdown__item-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: "League Spartan", "Spartan", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 17px;
  line-height: 100%;
  letter-spacing: 0;
  color: #434343;
  background: transparent;
}

.filter-dropdown--color .filter-dropdown__menu {
width: 225px;
border: 4px solid #F2F2F2;
opacity: 1;
border-radius: 15px;
border-width: 4px;
padding: 18px;
background: #FFFFFF;

}

.filter-color__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.filter-dropdown--color .filter-color__item {
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  justify-content: center;
}

.filter-dropdown--color .filter-dropdown__item + .filter-dropdown__item {
  margin-top: 0;
}

.filter-dropdown--color .filter-color__item:hover,
.filter-dropdown--color .filter-color__item:focus-visible {
  background: transparent;
  box-shadow: none;
  color: inherit;
}

.filter-dropdown--color .filter-color__item[aria-checked="true"] {
  background: transparent;
  box-shadow: none;
  color: inherit;
}

.filter-color__swatch {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--swatch);
  box-shadow: 0 0 0 2px #f4ddcf;
  transition: box-shadow 180ms ease, transform 180ms ease;
}

.filter-color__swatch--light {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 0 0 2px #f4ddcf;
}

.filter-dropdown--color .filter-color__item:hover .filter-color__swatch,
.filter-dropdown--color .filter-color__item:focus-visible .filter-color__swatch {
  box-shadow:
    0 0 0 2px #f4ddcf,
    0 4px 4px rgba(0, 0, 0, 0.25);
  transform: translateY(-1px);
}

.filter-dropdown--color .filter-color__item[aria-checked="true"] .filter-color__swatch {
  box-shadow:
    0 0 0 2px #ffffff,
    0 0 0 4px #d7b48e;
  transform: none;
}

.filter-dropdown--color .filter-color__item[aria-checked="true"] .filter-color__swatch--light {
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.2),
    0 0 0 2px #ffffff,
    0 0 0 4px #d7b48e;
}

.filter-dropdown--color .filter-color__item .filter-dropdown__item-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.filter-dropdown--brand .filter-dropdown__menu {


  opacity: 1;
  border-radius: 15px;
  border-width: 4px;
  gap: 10px;
  padding: 18px;
  background: #FFFFFF;
  border: 4px solid #F2F2F2
}

.filter-brand__field {
  width: 100%;
}

.filter-brand__input {
width: 100%;
display: block;
box-sizing: border-box;
height: 40px;
padding: 0 15px;
opacity: 1;
border-radius: 20px;
border-width: 2px;
background: #FFFDFC;
border: 2px solid #B744E8;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-clip: padding-box;
font-family: "League Spartan", "Spartan", sans-serif;
font-weight: 500;
font-style: normal;
font-size: 16px;
line-height: 1.2;
letter-spacing: 0;
text-align: center;
text-indent: 0;
vertical-align: middle;
}

.filter-brand__input:hover {
  border: 2px solid #FF8A5C;
}

.filter-brand__input::placeholder {
  color: #9a9a9a;
  opacity: 1;
  text-align: center;
}

.filter-brand__input:focus {
  outline: none;
  border-color: #FF8A5C;
}

.filter-brand__input:focus-visible {
  border-color: #FF8A5C;
  box-shadow: 0 0 0 2px rgba(255, 138, 92, 0.2);
}

.filter-dropdown__menu--material {
  width: 191px;

opacity: 1;
border-radius: 15px;
border-width: 4px;
padding: 0;
}

.filter-material__swatch {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.13);
}

.filter-material__swatch--brick {
  background:
    linear-gradient(0deg, rgba(130, 62, 26, 0.22), rgba(130, 62, 26, 0.22)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.52) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.35) 0 1px, transparent 1px 8px),
    #d06c36;
}

.filter-material__swatch--fabric {
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.35), transparent 42%),
    repeating-linear-gradient(45deg, rgba(120, 38, 52, 0.62) 0 2px, rgba(164, 92, 107, 0.62) 2px 4px),
    #7a3346;
}

.filter-material__swatch--fur {
  background:
    radial-gradient(circle at 42% 38%, #d8c8aa 0%, #b19a77 38%, #7f684a 70%, #5a4733 100%);
}

.filter-material__swatch--velvet {
  background:
    radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.3) 0%, transparent 34%),
    radial-gradient(circle at 56% 60%, #cf2330 0%, #a20f20 58%, #7b0716 100%);
}

.filter-material__swatch--glass {
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.72) 0%, transparent 32%),
    radial-gradient(circle at 70% 72%, rgba(255, 255, 255, 0.35) 0%, transparent 45%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.22) 0 2px, rgba(103, 213, 245, 0.22) 2px 4px),
    #56c6e8;
}

.filter-material__swatch--marble {
  background:
    radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.9), transparent 32%),
    linear-gradient(130deg, #f6f7f8 0%, #d1d3d7 55%, #b5bac2 100%);
}

.filter-material__swatch--plastic {
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.78) 0%, transparent 30%),
    radial-gradient(circle at 70% 76%, #d06679 0%, #b94058 55%, #8d2236 100%);
}

.filter-material__swatch--stone {
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.45), transparent 33%),
    repeating-radial-gradient(circle, rgba(150, 138, 123, 0.25) 0 2px, rgba(105, 94, 83, 0.25) 2px 4px),
    #c0b4a1;
}

.filter-material__swatch--tufted {
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.48), transparent 35%),
    repeating-linear-gradient(45deg, rgba(95, 61, 19, 0.52) 0 4px, rgba(180, 131, 58, 0.52) 4px 8px),
    #a7772d;
}

.filter-dropdown--shape .filter-dropdown__menu {


  width: 609px;


opacity: 1;
border-radius: 8px;
border-width: 4px;
gap: 30px;
padding: 22px;
background: #FFFFFF;
border: 4px solid #F2F2F2
}

.filter-shape__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: nowrap;
}

.filter-dropdown--shape .filter-shape__item {
  width: auto;
  min-width: 24px;
  height: 48px;
  margin: 0;
  padding: 0 2px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.filter-dropdown--shape .filter-dropdown__item-icon {
  width: auto;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  overflow: hidden;
}

.filter-dropdown--shape .filter-shape__img {
  width: auto;
  max-width: none;
  height: 24px;
  max-height: 24px;
  object-fit: contain;
  object-position: center;
  display: block;
  transition: filter 160ms ease;
}

.filter-dropdown--shape .filter-dropdown__item + .filter-dropdown__item {
  margin-top: 0;
}

.filter-dropdown--shape .filter-shape__item:hover,
.filter-dropdown--shape .filter-shape__item:focus-visible {
 
}

.filter-dropdown--shape .filter-shape__item:hover .filter-shape__img,
.filter-dropdown--shape .filter-shape__item:focus-visible .filter-shape__img {
  filter: brightness(0) saturate(100%) invert(54%) sepia(55%) saturate(2600%)
    hue-rotate(331deg) brightness(102%) contrast(103%);
}

.filter-dropdown--shape .filter-shape__item[aria-checked="true"] {
  
}

.filter-dropdown--shape .filter-shape__item[aria-checked="true"] .filter-shape__img {
  filter: brightness(0) saturate(100%) invert(54%) sepia(55%) saturate(2600%)
    hue-rotate(331deg) brightness(102%) contrast(103%);
}

.filter-shape__glyph {
  display: inline-block;
  color: #8f8f8f;
}

.filter-shape__glyph--square {
  width: 24px;
  height: 24px;
  border-radius: 2px;
  background: currentColor;
}

.filter-shape__glyph--triangle {
  width: 0;
  height: 0;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-bottom: 23px solid currentColor;
}

.filter-shape__glyph--oval {
  width: 38px;
  height: 24px;
  border-radius: 999px;
  background: currentColor;
}

.filter-shape__glyph--rectangle {
  width: 34px;
  height: 24px;
  border-radius: 2px;
  background: currentColor;
}

.filter-shape__glyph--right-triangle {
  width: 0;
  height: 0;
  border-left: 23px solid currentColor;
  border-top: 23px solid transparent;
}

.filter-shape__glyph--circle {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: currentColor;
}

.filter-shape__glyph--hexagon {
  width: 26px;
  height: 24px;
  background: currentColor;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.filter-shape__glyph--pill {
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: currentColor;
}

.filter-shape__glyph--semi-circle {
  width: 36px;
  height: 19px;
  border-radius: 18px 18px 0 0;
  background: currentColor;
}

.filter-shape__glyph--flower {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor, -7px 0 0 currentColor, 7px 0 0 currentColor;
}

.filter-dropdown--shape .filter-shape__item .filter-dropdown__item-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.filter-dropdown--price .filter-dropdown__menu,
.filter-dropdown--price-model .filter-dropdown__menu {

  width: 293px;


opacity: 1;
border-radius: 15px;
border-width: 4px;
gap: 25px;
padding-top: 20px;
padding-right: 24px;
padding-bottom: 20px;
padding-left: 24px;
background: #FFFFFF;
border: 4px solid #F2F2F2;
}

.filter-price__fields {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.filter-price__input {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  box-sizing: border-box;
  height: 50px;
  opacity: 1;
  border: 3px solid #ADF200;
  border-top-left-radius: 20px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 20px;
  padding: 0 15px;
  background: #f3f3f1;
  font-family: "Mulish", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #4b4b4b;
}

.filter-price__fields .filter-price__input:first-child {
  border-top-left-radius: 20px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 20px;
}

.filter-price__fields .filter-price__input:last-child {
  border-top-left-radius: 10px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 10px;
}

.filter-price__input--real {
  border-color: #ff8a5c;
}

.filter-price__input--model {
  border-color: #adf200;
}

.filter-price__input::placeholder {
  color: #9a9a9a;
  opacity: 1;
}

.filter-price__input:focus {
  outline: none;
}

.filter-price__input--real:hover {
  border: 3px solid #FF8A5C;
}

.filter-price__input--real:focus-visible {
  border: 3px solid #FF8A5C;
  box-shadow: 0 0 0 2px rgba(255, 138, 92, 0.2);
}

.filter-price__input--model:hover {
  border: 3px solid #adf200;
}

.filter-price__input--model:focus-visible {
  border: 3px solid #adf200;
  box-shadow: 0 0 0 2px rgba(173, 242, 0, 0.2);
}

.filter-price__slider {
  position: relative;
  height: 22px;
  margin: 6px 4px 10px;
}

.filter-price__track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: #9a9a9a;
  transform: translateY(-50%);
}

.filter-price__thumb {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #cfcfcf;
  border: 1px solid #7a7a7a;
  transform: translateY(-50%);
}

.filter-price__thumb--min {
  left: 0;
}

.filter-price__thumb--max {
  right: 0;
}

.filter-price__caption {
  text-align: center;
  font-family: "Mulish", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.25;
  color: #424242;
}

.filter-dropdown--size .filter-dropdown__menu {
  width: 274px;
  opacity: 1;
  border-radius: 15px;
  border-width: 4px;
  background: #ffffff;
  padding: 15px;
  border: 4px solid #f2f2f2;
}

.filter-size__grid {
  width: 100%;
  display: grid;
  gap: 12px;
}

.filter-size__row {
  display: grid;
  width: 100%;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.filter-size__label {
  display: block;
  font-family: "Mulish", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: #474747;
  white-space: nowrap;
  margin: 0;
  padding-left: 2px;
  line-height: 1;
  overflow: visible;
  letter-spacing: 0.01em;
}

.filter-size__input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 44px;
  border-radius: 22px;
  border: 2px solid #c963ff;
  background: #f1f1f1;
  padding: 0 16px;
  text-align: center;
  font-family: "Mulish", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #8d8d8d;
  letter-spacing: 0.02em;
}

.filter-size__input::placeholder {
  color: #9a9a9a;
  opacity: 1;
}

.filter-size__input:focus {
  outline: none;
  border: 3px solid #FF8A5C;
}

.filter-size__input:hover {
  border: 3px solid #FF8A5C;
}

.filter-size__input:focus-visible {
  border: 3px solid #FF8A5C;
  box-shadow: 0 0 0 2px rgba(255, 138, 92, 0.2);
}

.filter-dropdown--tag .filter-dropdown__menu {
  width: 233px;
  height: 350px;
  opacity: 1;
  border-radius: 15px;
  border-width: 4px;
  gap: 10px;
  padding: 18px;
  background: #FFFFFF;
  border: 4px solid #F2F2F2;
  box-shadow: none;
}

.filter-tag__list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 10px;
}

.filter-tag__pill {
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 38px;
  padding: 0 14px;
  border-radius: 20px;
  border: 2px solid #dedede;
  background: #efefef;
  color: #795344;
  font-family: "Saira", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 15px;
  line-height: 100%;
  letter-spacing: 0;
  cursor: pointer;
}

.filter-tag__pill:hover,
.filter-tag__pill:focus-visible {
  outline: none;
  background: #f6f6f6;
  border: 3px solid #FFA047;
}

.filter-tag__pill--wide {
  min-width: 138px;
}

#tag-filter-menu.filter-dropdown__menu--tag {
  background: #FFFFFF;
  border: 4px solid #F2F2F2;
  border-radius: 15px;
}

#tag-filter-menu .filter-tag__pill {
width: auto;
height: 38px;
min-width: 12px;

opacity: 1;
border-radius: 31px;
border-width: 2px;
gap: 10px;
padding-top: 5px;
padding-right: 15px;
padding-bottom: 5px;
padding-left: 15px;
background: #FFFFFF;
border: 2px solid #F2F2F2;
font-family: Saira;
font-weight: 500;
font-style: normal;
font-size: 18px;
color: #00A2DE;

line-height: 100%;
letter-spacing: 0;

}

#tag-filter-menu .filter-tag__pill:hover,
#tag-filter-menu .filter-tag__pill:focus-visible {
  outline: none;
  border: 3px solid #FFA047;
}

#tag-filter-menu .filter-tag__pill[aria-checked="true"] {
  color: #FA5F00;
  font-weight: 600;
}

/* Compact dropdown sizing for the new filter design. */
.filter-dropdown__menu {
  width: 190px;
  max-width: min(190px, calc(100vw - 24px));
  border: 4px solid #f2f2f2;
  border-radius: 15px;
  padding: 10px 12px;
  background: #fff;
  box-shadow: none;
}

.filter-dropdown__item {
  width: 100%;
  height: 44px;
  min-height: 44px;
  gap: 10px;
  padding: 8px 10px;
  box-sizing: border-box;
  border: 0;
  border-bottom: 1px solid #f3f3f3;
  border-radius: 0;
  justify-content: flex-start;
}

.filter-dropdown__item-label {
  font-size: 14px;
  line-height: 1.1;
}

.filter-dropdown__item-icon,
.filter-dropdown__item-icon-img {
  width: 24px;
  height: 24px;
}

#format-filter-menu {
  width: 190px;
}

#format-filter-menu .filter-dropdown__item,
#format-filter-menu .filter-dropdown__item:hover,
#format-filter-menu .filter-dropdown__item:focus-visible,
#material-filter-menu .filter-material__item,
#material-filter-menu .filter-material__item:hover,
#material-filter-menu .filter-material__item:focus-visible,
#material-filter-menu .filter-material__item[aria-checked="true"] {
  width: 100%;
  height: 44px;
  min-height: 44px;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 0;
  border-bottom: 1px solid #f3f3f3;
}

#format-filter-menu .filter-dropdown__item:hover,
#format-filter-menu .filter-dropdown__item:focus-visible,
#material-filter-menu .filter-material__item:hover,
#material-filter-menu .filter-material__item:focus-visible,
#material-filter-menu .filter-material__item[aria-checked="true"] {
  border-bottom: 2px solid #fa5f00;
}

.filter-dropdown--color .filter-dropdown__menu {
  width: 170px;
  max-width: min(170px, calc(100vw - 24px));
  padding: 14px;
}

.filter-color__grid {
  grid-template-columns: repeat(4, 28px);
  gap: 12px;
  justify-content: center;
}

.filter-dropdown--color .filter-color__item,
.filter-color__swatch {
  width: 28px;
  height: 28px;
}

.filter-dropdown--brand .filter-dropdown__menu {
  width: 230px;
  max-width: min(230px, calc(100vw - 24px));
  padding: 14px;
}

.filter-brand__input {
  height: 38px;
  font-size: 15px;
}

.filter-dropdown__menu--material {
  width: 190px;
  max-width: min(190px, calc(100vw - 24px));
}

.filter-dropdown--shape .filter-dropdown__menu {
  width: 210px;
  max-width: min(210px, calc(100vw - 24px));
  padding: 12px;
}

.filter-dropdown--shape .filter-shape__item {
  width: 56px;
  height: 56px;
  padding: 7px;
}

.filter-dropdown--shape .filter-dropdown__item-icon,
.filter-dropdown--shape .filter-shape__img {
  width: 32px;
  height: 32px;
}

.filter-dropdown--price .filter-dropdown__menu,
.filter-dropdown--price-model .filter-dropdown__menu {
  width: 220px;
  max-width: min(220px, calc(100vw - 24px));
  padding: 14px;
  gap: 12px;
}

.filter-price__fields {
  gap: 8px;
  margin-bottom: 10px;
}

.filter-price__input {
  height: 38px;
  border-width: 2px;
  font-size: 13px;
  padding: 0 10px;
}

.filter-price__slider {
  height: 16px;
  margin: 4px 4px 8px;
}

.filter-price__caption {
  font-size: 13px;
}

.filter-dropdown__menu--style {
  width: 150px;
  max-width: min(150px, calc(100vw - 24px));
  height: auto;
  padding: 8px 10px;
}

#style-filter-menu .filter-style__item,
#style-filter-menu .filter-style__item:hover,
#style-filter-menu .filter-style__item:focus-visible {
  height: 40px;
  min-height: 40px;
  padding: 8px 6px;
  font-size: 14px;
  border-radius: 0;
}

.filter-dropdown--size .filter-dropdown__menu {
  width: 230px;
  max-width: min(230px, calc(100vw - 24px));
  padding: 12px;
}

.filter-size__grid {
  gap: 9px;
}

.filter-size__row {
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 8px;
}

.filter-size__label,
.filter-size__input {
  font-size: 13px;
}

.filter-size__input {
  height: 36px;
  padding: 0 10px;
}

.filter-dropdown--tag .filter-dropdown__menu,
#tag-filter-menu.filter-dropdown__menu--tag {
  width: 190px;
  max-width: min(190px, calc(100vw - 24px));
  height: auto;
  max-height: 260px;
  padding: 12px;
}

.filter-tag__list {
  gap: 7px;
}

.filter-tag__pill,
#tag-filter-menu .filter-tag__pill {
  height: 30px;
  min-width: 0;
  padding: 0 10px;
  font-size: 13px;
}

/* Hover/open expansion for icon-only filters, matching the old behavior on the new design. */
.filters [data-filter-control] {
  transition: width 180ms ease, color 180ms ease;
}

.filters [data-filter-control="color"],
.filters [data-filter-control="material"],
.filters [data-filter-control="shape"],
.filters [data-filter-control="price-model"],
.filters [data-filter-control="price"],
.filters [data-filter-control="size"],
.filters [data-filter-control="tag"] {
  width: 68px;
}

.filters [data-filter-control="shape"] {
  width: 66px;
}

.filters [data-filter-control="material"]:is(:hover, :focus-visible, .is-selected, [aria-expanded="true"]) {
  width: 154px;
}

.filters [data-filter-control="shape"]:is(:hover, :focus-visible, .is-selected, [aria-expanded="true"]) {
  width: 132px;
}

.filters [data-filter-control="price-model"]:is(:hover, :focus-visible, .is-selected, [aria-expanded="true"]),
.filters [data-filter-control="price"]:is(:hover, :focus-visible, .is-selected, [aria-expanded="true"]) {
  width: 132px;
}

.filters [data-filter-control="size"]:is(:hover, :focus-visible, .is-selected, [aria-expanded="true"]) {
  width: 116px;
}

.filters [data-filter-control="tag"]:is(:hover, :focus-visible, .is-selected, [aria-expanded="true"]),
.filters [data-filter-control="color"]:is(:hover, :focus-visible, .is-selected, [aria-expanded="true"]) {
  width: 118px;
}

.filters :is(
  .filter-color-inner,
  .filter-material-inner,
  .filter-shape-inner,
  .filter-price-inner,
  .filter-size-inner,
  .filter-tag-inner
) {
  width: 100%;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.filters [data-filter-control]:is(:hover, :focus-visible, .is-selected, [aria-expanded="true"]) :is(
  .filter-color-inner,
  .filter-material-inner,
  .filter-shape-inner,
  .filter-price-inner,
  .filter-size-inner,
  .filter-tag-inner
) {
  border: 1px solid #ff8a5c;
  box-shadow: none;
}

.filter-hover-label {
  display: inline-block;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  color: #795345;
  font-family: Saira, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  transition: max-width 180ms ease, opacity 140ms ease;
}

.filters [data-filter-control]:is(:hover, :focus-visible, .is-selected, [aria-expanded="true"]) .filter-hover-label {
  max-width: 86px;
  opacity: 1;
}

.filters [data-filter-control="material"]:is(:hover, :focus-visible, .is-selected, [aria-expanded="true"]) .filter-hover-label {
  max-width: 90px;
}

.filters [data-filter-control="size"]:is(:hover, :focus-visible, .is-selected, [aria-expanded="true"]) .filter-hover-label,
.filters [data-filter-control="tag"]:is(:hover, :focus-visible, .is-selected, [aria-expanded="true"]) .filter-hover-label,
.filters [data-filter-control="color"]:is(:hover, :focus-visible, .is-selected, [aria-expanded="true"]) .filter-hover-label {
  max-width: 58px;
}

.filters [data-filter-control]:is(:hover, :focus-visible, .is-selected, [aria-expanded="true"]) :is(.filter-expand-icon, .filter-expand-icon-sm) {
  filter: invert(59%) sepia(78%) saturate(1092%) hue-rotate(326deg) brightness(103%) contrast(101%);
}

/* Keep filter icons fully visible inside the pill. */
.filters :is(.filter-color-inner, .filter-material-inner, .filter-shape-inner, .filter-price-inner, .filter-size-inner, .filter-tag-inner) {
  min-height: 37px;
  overflow: visible;
}

.filters :is(.icon-sm, .filter-icon-img, .filter-shape-icon) {
  width: 24px;
  height: 24px;
  min-width: 24px;
  max-width: 24px;
  max-height: none;
  object-fit: contain;
  display: block;
  flex: 0 0 24px;
}

.filters .filter-shape-icon {
  width: 23px;
  height: 23px;
  min-width: 23px;
  max-width: 23px;
  flex-basis: 23px;
}

/* Normalize every filter dropdown arrow. */
.filters :is(.filter-expand-icon, .filter-expand-icon-sm) {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7' fill='none'%3E%3Cpath d='M4.32373 6.13721C4.72107 6.57963 5.41467 6.57963 5.81201 6.13721L9.37647 2.16846C9.95463 1.5247 9.4976 0.500487 8.63233 0.500487H1.50342C0.638147 0.500487 0.181115 1.52469 0.759278 2.16846L4.32373 6.13721Z' fill='%23E5E5E5' stroke='%23E5E5E5'/%3E%3C/svg%3E");
  width: 16px;
  height: 7px;
  min-width: 16px;
  max-width: 16px;
  min-height: 7px;
  max-height: 7px;
  display: block;
  flex: 0 0 16px;
  object-fit: initial;
  border-radius: 0;
}

/* Keep filter arrow aligned to the right side of every pill. */
.filters :is(
  .filter-format-wrap,
  .filter-color-inner,
  .filter-brand-inner,
  .filter-material-inner,
  .filter-shape-inner,
  .filter-price-inner,
  .filter-style-inner,
  .filter-size-inner,
  .filter-tag-inner
) {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.filters :is(.filter-expand-icon, .filter-expand-icon-sm) {
  margin-left: auto;
}

/* Pin filter arrows inside the pill so they do not drift by content width. */
.filters :is(
  .filter-format-wrap,
  .filter-color-inner,
  .filter-brand-inner,
  .filter-material-inner,
  .filter-shape-inner,
  .filter-price-inner,
  .filter-style-inner,
  .filter-size-inner,
  .filter-tag-inner
) {
  position: relative;
  padding-right: 32px;
}

.filters :is(.filter-expand-icon, .filter-expand-icon-sm) {
  position: absolute;
  right: 10px;
  top: 50%;
  margin-left: 0;
  transform: translateY(-50%);
}

/* Keep expanded tag filter aligned with the other filter pills. */
.filters [data-filter-control="tag"] {
  height: 37px;
  padding: 0;
}

.filters [data-filter-control="tag"] .filter-tag-inner {
  top: 0;
  height: 37px;
}

/* Shape dropdown: compact but unclipped. */
.filter-dropdown--shape #shape-filter-menu {
  width: 260px;
  max-width: min(260px, calc(100vw - 24px));
  min-height: 82px;
  max-height: 180px;
  padding: 16px 18px;
  overflow-x: visible;
  overflow-y: auto;
}

.filter-dropdown--shape .filter-shape__row {
  display: grid;
  grid-template-columns: repeat(4, 44px);
  justify-content: center;
  align-items: center;
  gap: 10px 12px;
}

.filter-dropdown--shape .filter-shape__item,
.filter-dropdown--shape .filter-shape__item:hover,
.filter-dropdown--shape .filter-shape__item:focus-visible,
.filter-dropdown--shape .filter-shape__item[aria-checked="true"] {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 6px;
  border: 0;
  border-radius: 8px;
  box-sizing: border-box;
  overflow: visible;
}

.filter-dropdown--shape .filter-dropdown__item-icon,
.filter-dropdown--shape .filter-shape__img {
  width: 30px;
  height: 30px;
  max-width: 30px;
  max-height: 30px;
  overflow: visible;
  object-fit: contain;
}

/* Format filter selected state: show chosen icon + name in the new pill. */
.filters [data-filter-control="format"] {
  transition: width 180ms ease, color 180ms ease;
}

.filters [data-filter-control="format"].is-selected,
.filters [data-filter-control="format"][aria-expanded="true"] {
  width: 146px;
}

.filters [data-filter-control="format"].is-selected .filter-format-wrap,
.filters [data-filter-control="format"][aria-expanded="true"] .filter-format-wrap {
  border: 1px solid #ff8a5c;
  box-shadow: none;
}

.filter-format-selected-icon {
  width: 24px;
  height: 24px;
  min-width: 24px;
  object-fit: contain;
  display: block;
  flex: 0 0 24px;
}

.filter-format-selected-icon[hidden] {
  display: none !important;
}

.filters [data-filter-control="format"].is-selected .filter-format-label,
.filters [data-filter-control="format"][aria-expanded="true"] .filter-format-label {
  width: auto;
  max-width: 76px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #795345;
  font-weight: 700;
  text-transform: uppercase;
}

.filters [data-filter-control="format"].is-selected :is(.filter-expand-icon, .filter-expand-icon-sm),
.filters [data-filter-control="format"][aria-expanded="true"] :is(.filter-expand-icon, .filter-expand-icon-sm) {
  filter: invert(59%) sepia(78%) saturate(1092%) hue-rotate(326deg) brightness(103%) contrast(101%);
}

/* Format dropdown: compact icon by default, expand to icon + name on hover/selected. */
#format-filter-menu {
  width: 70px;
  overflow: visible;
}

#format-filter-menu .filter-dropdown__item {
  width: 52px;
  justify-content: flex-start;
  gap: 0;
  overflow: hidden;
  transition: width 180ms ease, gap 180ms ease, border-color 180ms ease;
}

#format-filter-menu .filter-dropdown__item-label {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 180ms ease, opacity 140ms ease;
}

#format-filter-menu .filter-dropdown__item:is(:hover, :focus-visible, [aria-checked="true"]) {
  width: 170px;
  gap: 10px;
  border-bottom: 2px solid #FA5F00;
}

#format-filter-menu .filter-dropdown__item:is(:hover, :focus-visible, [aria-checked="true"]) .filter-dropdown__item-label {
  max-width: 118px;
  opacity: 1;
}

/* Format selected pill: compact icon + arrow, expand to icon + name + arrow on hover/open. */
.filters [data-filter-control="format"].is-selected {
  width: 68px !important;
}

.filters [data-filter-control="format"].is-selected:is(:hover, :focus-visible, [aria-expanded="true"]) {
  width: 146px !important;
}

.filters [data-filter-control="format"].is-selected .filter-format-wrap {
  width: 100%;
  border: 1px solid #ff8a5c;
  box-shadow: none;
  padding-left: 12px;
  padding-right: 32px;
  gap: 8px;
}

.filters [data-filter-control="format"].is-selected .filter-format-selected-icon {
  display: block !important;
}

.filters [data-filter-control="format"].is-selected .filter-format-label {
  width: auto;
  max-width: 0 !important;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  color: #795345;
  font-weight: 700;
  text-transform: none;
  transition: max-width 180ms ease, opacity 140ms ease;
}

.filters [data-filter-control="format"].is-selected:is(:hover, :focus-visible, [aria-expanded="true"]) .filter-format-label {
  max-width: 86px !important;
  opacity: 1;
}

.filters [data-filter-control="format"].is-selected :is(.filter-expand-icon, .filter-expand-icon-sm) {
  filter: invert(59%) sepia(78%) saturate(1092%) hue-rotate(326deg) brightness(103%) contrast(101%);
}

/* Restore format dropdown menu rows while keeping the selected button compact. */
#format-filter-menu.filter-dropdown__menu {
  width: 216px !important;
  min-width: 216px !important;
  overflow: hidden !important;
  padding: 0 15px !important;
  box-sizing: border-box;
}

#format-filter-menu .filter-dropdown__item,
#format-filter-menu .filter-dropdown__item:is(:hover, :focus-visible, [aria-checked="true"]) {
  width: 100% !important;
  min-width: 0 !important;
  height: 44px;
  min-height: 44px;
  justify-content: flex-start;
  gap: 12px !important;
  overflow: visible !important;
  padding: 8px 10px !important;
  box-sizing: border-box;
}

#format-filter-menu .filter-dropdown__item-label,
#format-filter-menu .filter-dropdown__item:is(:hover, :focus-visible, [aria-checked="true"]) .filter-dropdown__item-label {
  max-width: none !important;
  opacity: 1 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Format dropdown hover/selected row style from Figma. */
#format-filter-menu .filter-dropdown__item {
  border-radius: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid #f3f3f3 !important;
  background: #fff !important;
  color: #434343 !important;
}

#format-filter-menu .filter-dropdown__item .filter-dropdown__item-label {
  color: #434343 !important;
  font-weight: 500;
}

#format-filter-menu .filter-dropdown__item:is(:hover, :focus-visible, [aria-checked="true"]) {
  border-radius: 0 0 9px 9px !important;
  border-bottom: 2px solid #FA5F00 !important;
  background: #fff !important;
  color: #FA5F00 !important;
  outline: 0 !important;
}

#format-filter-menu .filter-dropdown__item:is(:hover, :focus-visible, [aria-checked="true"]) .filter-dropdown__item-label {
  color: #FA5F00 !important;
  font-weight: 700;
}

/* Color filter selected state and dropdown swatches from Figma. */
.filters [data-filter-control="color"].is-selected {
  width: 68px !important;
}

.filters [data-filter-control="color"].is-selected:is(:hover, :focus-visible, [aria-expanded="true"]) {
  width: 118px !important;
}

.filters [data-filter-control="color"].is-selected .filter-color-inner {
  border: 1px solid #ff8a5c;
  box-shadow: none;
  padding-left: 12px;
  padding-right: 32px;
  gap: 7px;
}

.filters [data-filter-control="color"] .filter-color-preview {
  position: static;
  display: none;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
  pointer-events: none;
}

.filters [data-filter-control="color"].is-selected .filter-color-preview {
  display: inline-flex;
}

.filters [data-filter-control="color"].is-selected .filter-color-inner > .icon-sm {
  display: none;
}

.filter-color-preview-dot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  box-shadow: 0 0 0 1px #f4ddcf;
  flex: 0 0 14px;
}

.filters [data-filter-control="color"].is-selected .filter-hover-label {
  max-width: 0 !important;
  opacity: 0;
}

.filters [data-filter-control="color"].is-selected:is(:hover, :focus-visible, [aria-expanded="true"]) .filter-hover-label {
  max-width: 58px !important;
  opacity: 1;
}

.filters [data-filter-control="color"].is-selected :is(.filter-expand-icon, .filter-expand-icon-sm) {
  filter: invert(59%) sepia(78%) saturate(1092%) hue-rotate(326deg) brightness(103%) contrast(101%);
}

.filter-dropdown--color .filter-dropdown__menu,
#color-filter-menu.filter-dropdown__menu--color {
  width: 170px !important;
  min-width: 170px !important;
  padding: 14px !important;
  border: 4px solid #F2F2F2 !important;
  border-radius: 15px !important;
  background: #fff !important;
  box-sizing: border-box;
  overflow: visible !important;
}

.filter-color__grid {
  display: grid !important;
  grid-template-columns: repeat(5, 22px) !important;
  justify-content: center !important;
  gap: 12px !important;
}

.filter-dropdown--color .filter-color__item,
#color-filter-menu .filter-color__item {
  width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.filter-color__swatch,
.filter-dropdown--color .filter-color__item .filter-color__swatch {
  width: 22px !important;
  height: 22px !important;
  border-radius: 999px !important;
  background: var(--swatch) !important;
  box-shadow: 0 0 0 1px #f4ddcf !important;
  box-sizing: border-box;
}

.filter-color__swatch--light,
.filter-dropdown--color .filter-color__item .filter-color__swatch--light {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), 0 0 0 1px #f4ddcf !important;
}

.filter-dropdown--color .filter-color__item:is(:hover, :focus-visible, [aria-checked="true"]) .filter-color__swatch {
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px #FA5F00 !important;
  transform: none !important;
}

.filter-dropdown--color .filter-color__item:is(:hover, :focus-visible, [aria-checked="true"]) .filter-color__swatch--light {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), 0 0 0 3px #fff, 0 0 0 5px #69CEF6 !important;
}

/* Final color filter Figma tuning. */
.filters [data-filter-control="color"].is-selected,
.filters [data-filter-control="color"].is-selected:is(:hover, :focus-visible, [aria-expanded="true"]) {
  width: 92px !important;
}

.filters [data-filter-control="color"].is-selected .filter-color-inner {
  justify-content: flex-start;
  padding-left: 12px;
  padding-right: 30px;
  gap: 7px;
}

.filters [data-filter-control="color"].is-selected .filter-color-preview {
  gap: 4px;
  max-width: 46px;
  overflow: hidden;
}

.filters [data-filter-control="color"].is-selected:is(:hover, :focus-visible, [aria-expanded="true"]) .filter-color-preview {
  max-width: 24px;
}

.filter-color-preview-dot {
  width: 13px !important;
  height: 13px !important;
  flex: 0 0 13px !important;
  box-shadow: none !important;
}

.filters [data-filter-control="color"].is-selected .filter-hover-label {
  display: none !important;
}

.filter-dropdown--color .filter-dropdown__menu,
#color-filter-menu.filter-dropdown__menu--color {
  width: 172px !important;
  min-width: 172px !important;
  padding: 16px 14px !important;
  border: 4px solid #F2F2F2 !important;
  border-radius: 15px !important;
  background: #fff !important;
  box-shadow: 0.5px 0.8px 2px rgba(0, 0, 0, 0.16) !important;
  overflow: visible !important;
}

.filter-color__grid {
  grid-template-columns: repeat(5, 20px) !important;
  gap: 13px 12px !important;
}

.filter-dropdown--color .filter-color__item,
#color-filter-menu .filter-color__item {
  width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
}

.filter-color__swatch,
.filter-dropdown--color .filter-color__item .filter-color__swatch {
  width: 20px !important;
  height: 20px !important;
  box-shadow: 0 0 0 1px #f4ddcf !important;
}

.filter-dropdown--color .filter-color__item:is(:hover, :focus-visible) .filter-color__swatch {
  box-shadow: 0 0 0 1px #f4ddcf !important;
}

.filter-dropdown--color .filter-color__item[aria-checked="true"] .filter-color__swatch {
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px #FA5F00 !important;
}

.filter-dropdown--color .filter-color__item[aria-checked="true"] .filter-color__swatch--light {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), 0 0 0 3px #fff, 0 0 0 5px #69CEF6 !important;
}

/* Keep selected color dots visible on hover/open. */
.filters [data-filter-control="color"].is-selected:is(:hover, :focus-visible, [aria-expanded="true"]) .filter-color-preview {
  max-width: 46px !important;
  overflow: visible !important;
}

/* Material filter: match format dropdown selected/hover behavior. */
.filters [data-filter-control="material"].is-selected {
  width: 68px !important;
}

.filters [data-filter-control="material"].is-selected:is(:hover, :focus-visible, [aria-expanded="true"]) {
  width: 154px !important;
}

.filters [data-filter-control="material"].is-selected .filter-material-inner {
  border: 1px solid #ff8a5c;
  box-shadow: none;
  padding-left: 12px;
  padding-right: 32px;
  gap: 7px;
}

.filters [data-filter-control="material"] .filter-material-preview {
  position: static;
  display: none;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
  max-width: 46px;
  overflow: hidden;
  pointer-events: none;
}

.filters [data-filter-control="material"].is-selected .filter-material-preview {
  display: inline-flex;
}

.filters [data-filter-control="material"].is-selected .filter-material-inner > .filter-icon-img {
  display: none;
}

.filter-material-preview-dot,
.filter-material-preview-dot img {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  object-fit: cover;
  display: block;
}

.filter-material-preview-dot {
  flex: 0 0 24px;
  overflow: hidden;
}

.filters [data-filter-control="material"].is-selected .filter-hover-label {
  max-width: 0 !important;
  opacity: 0;
}

.filters [data-filter-control="material"].is-selected:is(:hover, :focus-visible, [aria-expanded="true"]) .filter-hover-label {
  max-width: 90px !important;
  opacity: 1;
}

.filters [data-filter-control="material"].is-selected :is(.filter-expand-icon, .filter-expand-icon-sm) {
  filter: invert(59%) sepia(78%) saturate(1092%) hue-rotate(326deg) brightness(103%) contrast(101%);
}

#material-filter-menu.filter-dropdown__menu--material,
.filter-dropdown__menu--material {
  width: 216px !important;
  min-width: 216px !important;
  padding: 0 15px !important;
  border: 4px solid #F2F2F2 !important;
  border-radius: 15px !important;
  background: #fff !important;
  box-sizing: border-box;
  overflow: hidden !important;
}

#material-filter-menu .filter-material__item,
#material-filter-menu .filter-material__item:is(:hover, :focus-visible, [aria-checked="true"]) {
  width: 100% !important;
  min-width: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  overflow: visible !important;
  padding: 8px 10px !important;
  box-sizing: border-box;
}

#material-filter-menu .filter-material__item {
  border-radius: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid #f3f3f3 !important;
  background: #fff !important;
  color: #434343 !important;
}

#material-filter-menu .filter-material__item .filter-dropdown__item-label {
  max-width: none !important;
  opacity: 1 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #434343 !important;
  font-weight: 500;
}

#material-filter-menu .filter-material__item:is(:hover, :focus-visible, [aria-checked="true"]) {
  border-radius: 0 0 9px 9px !important;
  border-bottom: 2px solid #FA5F00 !important;
  background: #fff !important;
  color: #FA5F00 !important;
  outline: 0 !important;
}

#material-filter-menu .filter-material__item:is(:hover, :focus-visible, [aria-checked="true"]) .filter-dropdown__item-label {
  color: #FA5F00 !important;
  font-weight: 700;
}
/* FINAL FORMAT BUTTON FIX */

/* Normal FORMAT button: text + 8px gap + arrow */
.filters [data-filter-control="format"]:not(.is-selected) {
  width: 108px !important;
  min-width: 108px !important;
}

.filters [data-filter-control="format"]:not(.is-selected) .filter-format-wrap {
  width: 100% !important;
  padding: 8px 8px 8px 14px !important;
  gap: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: visible !important;
}

.filters [data-filter-control="format"]:not(.is-selected) .filter-format-label {
  display: block !important;
  width: auto !important;
  min-width: max-content !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  opacity: 1 !important;
}

.filters [data-filter-control="format"]:not(.is-selected) .filter-format-selected-icon {
  display: none !important;
}

/* Selected FORMAT button: icon + 8px gap + arrow */
.filters [data-filter-control="format"].is-selected {
  width: 82px !important;
  min-width: 82px !important;
}

.filters [data-filter-control="format"].is-selected .filter-format-wrap {
  width: 100% !important;
  padding: 8px 9px 8px 12px !important;
  gap: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: visible !important;
}

.filters [data-filter-control="format"].is-selected .filter-format-label {
  display: none !important;
}

.filters [data-filter-control="format"].is-selected .filter-format-selected-icon {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
}

/* Only FORMAT arrow should stay in flex, not absolute */
.filters [data-filter-control="format"] .filter-expand-icon {
  display: block !important;
  position: static !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  margin-left: 0 !important;
  width: 16px !important;
  height: 7px !important;
  flex: 0 0 16px !important;
}