.ocfilter-fast-option-swiper {
  margin-bottom: 15px;
  position: relative;
  width: auto;
  width: -webkit-fill-available;
  width: -moz-available;
}

.ocfilter-fast-option-swiper .swiper-wrapper {
  flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}

.ocfilter-fast-option-swiper .swiper-buttons:after,
.ocfilter-fast-option-swiper .swiper-buttons:before {
  content: '';
  display: block;
  opacity: 0;
  bottom: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  -webkit-transition-duration: .3s;
  transition-duration: .3s;
  -webkit-transition-property: opacity;
  transition-property: opacity;
  width: 80px;
  z-index: 2;
}

.ocfilter-fast-option-swiper .swiper-buttons:after {
  right: 0;
  background-image: linear-gradient(-90deg,var(--white) 0,hsla(0,0%,100%,0) 100%);
}

.ocfilter-fast-option-swiper .swiper-buttons:before {
  left: 0;
  background-image: linear-gradient(90deg,var(--white) 0,hsla(0,0%,100%,0) 100%);
}

.ocfilter-fast-option-swiper:has(.swiper-button-prev:not(.swiper-button-disabled)) .swiper-buttons:before,
.ocfilter-fast-option-swiper:has(.swiper-button-next:not(.swiper-button-disabled)) .swiper-buttons:after {
  opacity: 1;
}

.ocfilter-fast-option-swiper .swiper-slide {
  width: auto !important;
  max-width: 100% !important;
  cursor: pointer;
  padding: 0;
  height: auto;
  margin: 0 4px;
}

.ocfilter-fast-option-swiper .swiper-buttons {
  width: 100%;
  height: 100%;
  display: block;
  top: 50%;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
}

.ocfilter-fast-option-swiper .swiper-buttons div {
  width: 30px;
  height: 40px;
  background: #FFFFFF;
  border-radius: 4px;
  border: 1px solid #8a8a8a;
}

.ocfilter-fast-option-swiper .swiper-buttons .swiper-button-next::before {
  content: ' ';
    background-image: url("data:image/svg+xml,%3Csvg width='11' height='18' viewBox='0 0 11 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.866117 0.616117C1.35427 0.127961 2.14573 0.127961 2.63388 0.616117L10.1339 8.11612C10.622 8.60427 10.622 9.39573 10.1339 9.88388L2.63388 17.3839C2.14573 17.872 1.35427 17.872 0.866117 17.3839C0.377961 16.8957 0.377961 16.1043 0.866117 15.6161L7.48223 9L0.866117 2.38388C0.377961 1.89573 0.377961 1.10427 0.866117 0.616117Z' fill='%23575757'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    width: 10px;
  height: 20px;
}

.ocfilter-fast-option-swiper .swiper-buttons .swiper-button-prev::before {
  content: ' ';
    background-image: url("data:image/svg+xml,%3Csvg width='11' height='18' viewBox='0 0 11 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.1339 17.3839C9.64573 17.872 8.85427 17.872 8.36612 17.3839L0.866116 9.88388C0.377961 9.39573 0.37796 8.60427 0.866116 8.11612L8.36611 0.616117C8.85427 0.127961 9.64573 0.127961 10.1339 0.616117C10.622 1.10427 10.622 1.89573 10.1339 2.38388L3.51777 9L10.1339 15.6161C10.622 16.1043 10.622 16.8957 10.1339 17.3839Z' fill='%23575757'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    width: 10px;
  height: 20px;
}
.ocfilter-fast-option-swiper .swiper-buttons .swiper-button-disabled {
  opacity: 0;
}

.ocfilter-fast-option .filter-item {
  text-align: center;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  color: inherit;
  display: block;
  border: 1px solid #ccc;
  padding: 6px;
  border-radius: 4px; 
  height: 100%;
}
.ocfilter-fast-option .filter-item:hover {
  border-color: #af2d33;
}
.ocfilter-fast-option .filter-item .filter-image {
  position: relative;
  /*width: 100px;
  height: 100px;*/
  /*border: 1px solid #D8D8D8;
  border-radius: 3px;*/
  overflow: hidden;
}
.ocfilter-fast-option .filter-item .ocf-times-circle {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23af2d33' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z'/%3e%3c/svg%3e");
  background-color: #ffffff;
}
.ocfilter-fast-option .filter-item.selected {
  border-color: #af2d33;
}
.ocfilter-fast-option .remove-filter {
  position: absolute;
  top: 5px;
  right: 5px;
  color: #ff4444;
  font-size: 18px;
  cursor: pointer;
  z-index: 1;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ocfilter-fast-option .filter-item:hover .remove-filter{
  color: #af2d33;
}
.ocfilter-fast-option .filter-name {
  margin-top: 5px;
  font-size: 12px;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  /*white-space: nowrap;
  max-height: 38px;*/
}
.ocfilter-fast-option .count {
  color: #999;
  font-size: 11px;
}