/*--------------------*/
/*  Filter Range      */
/*--------------------*/
.range-slider >*+* {margin-top: var(--sp-16-12);}
.range-controls {display: flex;gap: 0.3125rem; align-items: center;}
.range-controls span{flex-shrink: 0;font-weight: 500;
}
.range-controls input {padding: 0 1rem;height: 2.5rem;border-radius: var(--rd-1);background-color: var(--bg-1);}
.range-control-btn {cursor: pointer;flex-shrink: 0;height: 2.875rem;aspect-ratio: 1;display: flex;align-items: center;justify-content: center;font-size: 1rem;line-height: 1em;color: var(--clr-white);text-transform: capitalize;border-radius: 100%;background-color: var(--clr-primary);transition: background-color var(--transition-1);}
@media (min-width: 1200px) {
.range-control-btn:hover {background-color: var(--clr-secondary);}
}
/*--------------------*/
/*  Range Slider      */
/*--------------------*/
[class*=js-irs] {--range-h: 1.25rem;--line-rd: 0;--line-h: 0.125rem;--handle-size: 1.25rem;position: relative;display: block;-webkit-user-select: none;-moz-user-select: none;user-select: none;}
.irs {position: relative;display: block;height: var(--range-h);}
.irs-line {position: absolute;display: block;overflow: hidden;outline: none !important;bottom: calc(var(--handle-size) / 2);width: 100%;height: var(--line-h);border-radius: var(--line-rd);background: rgba(185, 168, 121, 0.2);}
.irs-bar {position: absolute;display: block;left: 0;width: 0;bottom: calc(var(--handle-size) / 2);height: var(--line-h);border-radius: var(--line-rd);background-color: var(--clr-primary);}
.irs-handle {cursor: pointer;position: absolute;z-index: 1;display: block;bottom: 0;width: var(--handle-size);height: var(--handle-size);background-color: var(--clr-primary);border-radius: 100%;transition: background-color var(--transition-1);}
.irs-handle.type_last {z-index: 2;}
.irs-handle.state_hover {background-color: var(--clr-secondary);}
.irs--with-labels > .irs {margin-top: calc(var(--range-h) * 1.5);}
.irs-min,
.irs-max {cursor: default;position: absolute;left: 0;top: 0;transform: translateY(calc(-100% - 0.5rem));display: block;font-size: 0.875rem;line-height: 1em;font-weight: 500;color: var(--clr-black);padding: 0.125rem 0;}
.irs-max {left: auto;right: 0;}
.irs-from,
.irs-to,
.irs-single {position: absolute;display: block;top: 0;left: 0;transform: translateY(calc(-100% - 0.5rem));cursor: default;white-space: nowrap;font-size: 0.875rem;line-height: 1em;font-weight: 500;padding: 0.125rem 0.25rem;color: var(--clr-white);border-radius: 0;background-color: var(--clr-secondary);}
.irs-from:before,
.irs-to:before,
.irs-single:before {content: "";position: absolute;z-index: 0;bottom: 0.0625rem;left: 50%;transform: translate(-50%, 100%);width: 0.625rem;height: 0.4375rem;display: block;-webkit-clip-path: polygon(100% 0, 0 0, 50% 100%);clip-path: polygon(100% 0, 0 0, 50% 100%);background-color: var(--clr-secondary);}
.irs-disabled {opacity: 0.4;}
.irs-hidden-input {position: absolute !important;display: block !important;top: 0 !important;left: 0 !important;width: 0 !important;height: 0 !important;font-size: 0 !important;line-height: 0 !important;padding: 0 !important;margin: 0 !important;overflow: hidden;outline: none !important;z-index: -9999 !important;background: none !important;border-style: solid !important;border-color: transparent !important;}
@media (min-width: 1200px) {
.irs-handle:hover {background-color: var(--clr-secondary);}
}
@media (max-width: 1199px) {
.irs-handle::before {content: "";position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 2rem;height: 2rem;display: block;opacity: 0;}
}
/*--------------------*/
/*  Filter Top        */
/*--------------------*/
.fl-top {gap: var(--sp-40-12);display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;}
.fl-top .right-part {gap: var(--sp-40-12);display: flex;flex-wrap: wrap;align-items: center;}
.fl-top .find-product {font-size: 1rem;}
.btn-open-filter {position: relative;display: flex;align-items: center;padding: 0.25rem 0.875rem;height: 2.125rem;background-color: var(--clr-border);color: var(--clr-black);font-size: 0.875rem;line-height: 1;font-weight: 500;cursor: pointer;transition: var(--transition-1);border-radius: var(--rd-1);}
@media (min-width: 1200px) {
.btn-open-filter:hover {background-color: var(--clr-black);color: var(--clr-white);}
}
@media (max-width: 575px) {
.fl-top .right-part {width: 100%;justify-content: space-between;}
.btn-open-filter {font-size: 0.625rem;}
}
/*--------------------*/
/*  Filter Thumbs     */
/*--------------------*/
.fl-thumbs {font-size: 0.875rem;color: var(--clr-black);line-height: 1;display: flex;align-items: flex-start;gap: .5rem;}
.fl-thumbs:has(.fl-thumbs-inner:empty) {display: none;}
.fl-thumb-clear {cursor: pointer;margin-bottom: var(--gap-y);padding: 0.125rem 0.375rem;background-color: transparent;height: 1.625rem;gap: 0.375rem;display: inline-flex;align-items: center;flex-shrink: 0;font-weight: 500;}
.fl-thumbs-inner{display: contents;}
.fl-thumbs-inner > * {margin-right: var(--gap-x);}
.fl-thumb {cursor: pointer;padding: 0.125rem 0.375rem;background-color: var(--bg-1);height: 1.625rem;gap: 0.375rem;display: inline-flex;align-items: center;border-radius: 0.375rem;}
.fl-thumb b {text-transform: initial;color: var(--clr-black);font-weight: 400;}
.fl-close {cursor: pointer;position: relative;display: inline-block;width: 0.625rem;height: 0.625rem;color: var(--clr-black);transition: color var(--transition-1);}
.fl-close::before,
.fl-close::after {content: "";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%) rotate(45deg);height: 0.0625rem;width: 100%;background-color: currentColor;}
.fl-close::after {transform: translate(-50%, -50%) rotate(-45deg);}
@media (min-width: 1200px) {
.fl-thumb:hover .fl-close,
.fl-thumb-clear:hover .fl-close {color: var(--clr-red);}
}
/*--------------------*/
/*  Filter Content    */
/*--------------------*/
.fl-products {gap: var(--sp-40-20) 0.75rem;display: grid;grid-template-columns: repeat(2, 1fr);}
@media (min-width: 576px) {
.fl-products {gap: var(--sp-40-20) 0.5rem;grid-template-columns: repeat(3, 1fr);}
}
@media (min-width: 768px) {
.fl-products {grid-template-columns: repeat(3, 1fr);}
}
@media (min-width: 1200px) {
.fl-products {grid-template-columns: repeat(4, 1fr);}
}
/*--------------------*/
/*  Filter Menu       */
/*--------------------*/
.fl-sort{display: inline-flex;align-items: center;gap: var(--sp-24-12);font-size: 1rem;white-space: nowrap;}
.fl-sort .input-field{min-width: 16.4375rem;}
.fl-grid{display: grid;grid-template-columns: 17.5rem auto;align-items: flex-start;gap: var(--sp-20-12);row-gap: var(--sp-16-12);}
.fl-product-not-found {display: block;text-align: center;margin: var(--sp-md) auto;height: 50vh;}
.fl-product-not-found .title {color: var(--clr-text);}
.fl-product-not-found a {color: var(--clr-black);text-decoration: underline;text-underline-offset: 2px;text-decoration-thickness: 1px;text-decoration-color: currentColor;}
.fl-menu{grid-row: span 3;}

.fl-menu-top {gap: var(--sp-20-12);display: flex;align-items: center;justify-content: space-between;padding: var(--filter-pd) var(--filter-pd) var(--sp-16-12);}
.fl-menu-top .title {font-size: var(--h5);color: var(--clr-black);font-weight: 500;}
.fl-menu-inner {padding: var(--sp-16-12) var(--filter-pd);height: 100%;overflow-x: clip;}
.fl-menu-bottom {display: flex;flex-direction: column;gap: var(--sp-16-12);padding-block: var(--sp-16-12) var(--filter-pd);padding-inline: var(--filter-pd);background: var(--clr-white);}
.fl-menu-bottom .btn-wrap > * {width: calc(100% - 0.375rem);padding-inline: 0.5rem;}
.fl-overlay {cursor: pointer;position: fixed;z-index: 1;inset: 0;opacity: 0;visibility: hidden;background: var(--bg-overlay);-webkit-backdrop-filter: blur(var(--blur));backdrop-filter: blur(var(--blur));transition: var(--cubic-1);display: block;}
.filter-is-open .fl-overlay {transition-delay: 0.1s;opacity: 1;visibility: visible;}
.filter-is-open .fl-menu {transition-delay: 0s;visibility: visible;}
.filter-is-open .fl-menu-wrap {transition-delay: 0.1s;transform: translateX(0);}
.fl-block {--fl-padd: var(--sp-24-12);position: relative;border-bottom: 1px solid var(--clr-grey-2);}

.fl-block .color-selector {--column: 3;gap: 0.25rem;}
.fl-toggle {padding-bottom: var(--fl-padd);display: none;}
.fl-title {position: relative;cursor: pointer;font-size: 1rem;line-height: 1.25;font-weight: 500;color: var(--clr-title);padding-block: var(--fl-padd);padding-right: calc(var(--fl-padd) * 1.5);transition: var(--transition-1);}
.fl-title i {display: inline-block;position: absolute;right: 0;top: var(--fl-padd);width: var(--fl-padd);height: var(--fl-padd);transition: var(--transition-1);}
.fl-title i::before {content: "";position: absolute;top: 45%;left: 50%;transform: translate(-50%, -50%) rotate(45deg);width: 7px;height: 7px;border-right: 2px solid var(--clr-title);border-bottom: 2px solid var(--clr-title);background-color: transparent;}
.fl-title.is-active i {transform: rotateX(-180deg);}
.fl-list li {line-height: 0;}
.fl-list > * + * {margin-top: 0.75rem;}
.fl-list-btn {display: none;position: relative;cursor: pointer;margin-top: 1rem;font-size: 1rem;color: var(--clr-black);}
.fl-list-btn:before {content: attr(data-show-more);display: inline-block;vertical-align: middle;}
.fl-list-btn svg {display: inline-block;vertical-align: middle;position: relative;width: 0.875rem;height: 0.875rem;margin-left: 0.5rem;}
.fl-list-btn.is-active:before {content: attr(data-show-less);}
.fl-list-btn.is-active svg {transform: rotateX(-180deg);}
.fl-sublist{padding-left: 1rem;}
.fl-sublist:not(:first-child) {margin-top: 0.75rem;}
.more-options + .fl-list-btn {display: block;}
@media (min-width: 1200px) {
.fl-title:hover {color: var(--clr-primary);}
.fl-product-not-found a:hover {color: var(--clr-primary);text-decoration-color: transparent;}
}
@media (min-width:992px) {
  .fl-menu-top,
  .btn-open-filter,
  .fl-menu-bottom{display: none;}
}
@media (min-width:767px) {
  .fl-menu-wrap{border-radius: var(--rd-1) 0 0 var(--rd-1);}
}
@media (max-width:991px) {
  .fl-grid{grid-template-columns: 1fr;}
  .fl-menu {--filter-pd: var(--sp-32-12);position: fixed;z-index: 110;inset: 0;display: block;visibility: hidden;transition: visibility 0s linear;transition-delay: 0.6s;}
.fl-menu-wrap {position: absolute;z-index: 2;top: 0;right: 0;will-change: transform;transform: translateX(100%);width: min(30rem, 100%);height: 100%;max-height: 100%;display: flex;flex-direction: column;background: var(--clr-white);transition: var(--transition-1);}
.fl-sort{display: none;}
  
}