/*--------------------*/
/*  Filter Grid       */
/*--------------------*/
.fl-grid {position: relative;gap: var(--sp-xs);display: grid;align-items: flex-start;grid-template-columns: 1fr;}
@media (min-width: 1200px) {
.fl-grid {grid-template-columns: auto 1fr;}
.fl-menu {position: sticky;top: calc(var(--h-height) + 0.75rem);width: 22.5rem;grid-column: 1/2;}
body:has(.h-info-hidden) .fl-menu {top: calc(var(--h-height-true) + 0.75rem);}
.fl-top,
.fl-thumbs {grid-column: span 2;}
.fl-top {grid-row: 1/2;}
.fl-thumbs {grid-row: 2/3;}
.fl-content {grid-column: 2/3;}
.fl-btn,
.fl-overlay {display: none;}
}
/*--------------------*/
/*  Filter Top        */
/*--------------------*/
.fl-top {gap: var(--sp-xs);display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;}
.fl-select-wrap {gap: 1.5em;display: flex;align-items: center;flex: 0 0 auto;margin-left: auto;white-space: nowrap;}
.fl-select-wrap .btn {display: none;}
@media (max-width: 1199px) {
.fl-select-wrap .btn {display: inline-flex;height: 2.125rem;font-size: 0.875rem;flex: auto;}
.fl-select-wrap .btn svg {width: 1rem;height: 1rem;}
}
@media (max-width: 767px) {
.fl-select-wrap {gap: 10px;order: -1;width: 100%;justify-content: space-between;}
.fl-select-wrap .fl-select {height: 2.125rem;min-height: 2.125rem;font-size: 0.875rem;background-color: #fff;border-radius: 1rem;flex: auto;width: auto;color: var(--clr-text);}
.fl-select-wrap .fl-select svg {min-width: 1rem;height: 1rem;}
.fl-select-wrap .fl-select-title {width: 100%;}
.fl-select-wrap .fl-select-list {top: 130%;min-width: 100%;}
}
.fl-select {position: relative;z-index: 10;font-size: var(--text-sm);line-height: 1.25em;color: var(--clr-text);display: flex;align-items: center;gap: 0.5rem;cursor: pointer;min-height: 3.125rem;padding: 0 0.9375rem 0 1.25rem;}
.fl-select.is-active::before {opacity: 1;transition: opacity var(--transition-1);}
.fl-select.is-active .fl-select-list {opacity: 1;visibility: visible;transition: var(--transition-1);}
.fl-select.is-active .fl-select-title {border-color: var(--clr-secondary);}
.fl-select.is-active .fl-select-title svg {transform: scale(1, -1);transition: transform var(--transition-1);}
.fl-select-title {cursor: pointer;gap: 0.5rem;display: flex;align-items: center;justify-content: space-between;color: var(--clr-black);}
.fl-select-title svg {width: 1em;height: 1em;}
.fl-select-list {position: absolute;top: 100%;left: 50%;transform: translateX(-50%);padding: 4px 20px;min-width: -moz-max-content;min-width: max-content;opacity: 0;visibility: hidden;box-shadow: var(--box-shadow-small);background-color: #fff;border-radius: 1rem;}
.fl-select-list input {display: none;}
.fl-select-list > * {cursor: pointer;display: block;white-space: nowrap;padding-block: 0.75rem;transition: var(--transition-1);}
.fl-select-list > *:not(:last-child) {border-bottom: 1px solid var(--clr-border);}
.fl-select-list label:has(input:checked) {pointer-events: none;color: var(--clr-secondary);}
@media (min-width: 1200px) {
.fl-select-list label:hover {color: var(--clr-primary);}
}
@media (max-width: 991px) {
.fl-select-wrap {font-size: 0;}
}
@media (max-width: 575px) {
.fl-select-wrap {width: 100%;order: -1;}
.fl-select,
.fl-select-title {width: 100%;}
}
/*--------------------*/
/*  Filter Thumbs     */
/*--------------------*/
.fl-thumbs {--gap-x: 0.625em;--gap-y: 0.313em;font-size: var(--text-sm);color: var(--clr-text);line-height: 1em;margin-block: calc(-1 * var(--gap-y));}
.fl-thumbs:has(.fl-thumbs-inner:empty) {display: none;}
.fl-thumbs .fl-thumb-clear {margin-right: 0;}
.fl-thumb-clear {cursor: pointer;color: var(--clr-primary);line-height: 2.25em;padding: 0 0.4375rem 0 0.625rem;gap: 0.25em;display: inline-flex;align-items: center;font-size: 0.875rem;z-index: 1;transition: var(--transition-1);}
.fl-thumb-clear .fl-close {color: var(--clr-primary);}
.fl-thumb-clear .fl-close::before,
.fl-thumb-clear .fl-close:after {background-color: currentColor;}
.fl-thumbs-inner {display: flex;flex-wrap: wrap;gap: 0.3125rem;width: 100%;margin-bottom: clamp(0rem, -0.9114rem + 1.8987vw, 0.75rem);}
.fl-thumb {cursor: pointer;padding: 0.3125rem 0.625rem;border-radius: var(--rd-1);background-color: var(--clr-white);gap: 0.25rem;display: inline-flex;align-items: center;font-size: 0.875rem;z-index: 1;}
.fl-thumb span {text-transform: capitalize;}
.fl-thumb b {text-transform: initial;color: var(--clr-black);font-weight: 500;}
.fl-close {cursor: pointer;position: relative;display: inline-block;width: var(--sp-12-8);height: var(--sp-12-8);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: 1px;width: 100%;background-color: currentColor;}
.fl-close::after {transform: translate(-50%, -50%) rotate(-45deg);}
@media (min-width: 1200px) {
.fl-thumb:hover .fl-close {color: var(--clr-primary);}
.fl-thumb-clear:hover {color: var(--clr-black);}
.fl-thumb-clear:hover .fl-close {color: var(--clr-black);}
}
@media (max-width: 575px) {
.fl-thumbs {font-size: 0.75rem;}
.fl-thumbs .fl-thumb-clear {font-size: 0.75rem;}
.fl-thumb {font-size: 0.8125rem;}
}
/*--------------------*/
/*  Filter Content    */
/*--------------------*/
.fl-products {gap: 0.5rem;display: grid;grid-template-columns: repeat(2, 1fr);}
.fl-content {display: flex;flex-direction: column;}
.fl-content .h-search-inner {margin-bottom: 0.625rem;max-width: 100%;}
.fl-content .h-search-inner .h-search-field {background-color: #fff;}
@media (max-width: 767px) {
.fl-content .h-search-inner {display: none;}
}
.fl-content .fl-thumbs {display: flex;align-items: center;justify-content: space-between;width: 100%;min-width: 0;gap: 1.875rem;padding: 0.3125rem 0;}
@media (max-width: 767px) {
.fl-content .fl-thumbs {flex-direction: column;align-items: flex-start;width: 100%;gap: 0;}
}
.fl-content .fl-top {flex-wrap: nowrap;display: flex;align-items: center;flex-direction: column;justify-content: space-between;gap: 16px;margin: 0 0 0.9375rem;}
.fl-content .fl-top.empty .fl-thumbs-inner {display: none;}
.fl-content .fl-top .fl-top-counts {flex-shrink: 0;}
.fl-content .fl-top .fl-top-counts strong,
.fl-content .fl-top .fl-top-counts b {font-weight: 500;}
@media (max-width: 767px) {
.fl-content .fl-top {flex-wrap: inherit;flex-direction: column;position: sticky;top: var(--h-height);z-index: 10;background-color: var(--bg-2);margin-bottom: 0.3125rem;padding-block: 2.5rem 0.625rem;}
.fl-content .fl-top::before {content: "";position: absolute;top: 0;left: -0.75rem;right: -0.75rem;width: auto;height: 100%;background-color: var(--bg-2);}
.fl-content .fl-top .fl-top-counts {position: absolute;left: 0;top: 0.625rem;}
}
.fl-content.no-filter .fl-thumbs {align-items: center;justify-content: space-between;flex-direction: row;gap: var(--sp-20-16);padding: 0;margin: 0;}
.fl-thumbs-wrap {display: flex;align-items: baseline;gap: 5px;min-width: 0;}
.fl-thumbs-wrap .fl-thumbs-inner {flex: 1 1 auto;min-width: 0;}
@media (min-width: 576px) {
.fl-products {gap: var(--sp-xs);}
}
@media (min-width: 768px) {
.fl-products {grid-template-columns: repeat(3, 1fr);}
}
@media (min-width: 1200px) {
.fl-products {grid-template-columns: repeat(4, 1fr);}
.fl-content .h-search-inner .h-search-field {height: 3.125rem;}
.fl-content .h-search-inner .btn {height: 3.125rem;}
}
@media (max-width: 767px) {
.title.mb-md {margin-bottom: 0.75rem;}
body:has(.h-info-hidden) .fl-top {top: calc(var(--h-height-true) + var(--h-height-search));}
}
@media (max-width: 575px) {
.fl-products .prd-card {--prd-padding: 0.5rem;}
.fl-products .prd-title {font-size: var(--text-sm);}
.fl-products .prd-controls .btn {padding: 0;aspect-ratio: 1;}
.fl-products .prd-controls .btn b {display: none;}
.fl-products .prd-labels {font-size: 0.625rem;}
.fl-content.no-filter .fl-select-wrap {flex: auto;width: auto;order: 1;}
}
/*--------------------*/
/*  Filter Menu       */
/*--------------------*/
.fl-menu-top {display: none;}
.fl-block {border-radius: var(--rd-1);}
.fl-block + .fl-block {margin-top: 1.875rem;}
@media (max-width: 1199px) {
.fl-block + .fl-block {margin-top: 1rem;}
}
.fl-block .ch-box span {color: var(--clr-plc);font-size: 0.875rem;}
.fl-block .ch-box span em {color: var(--clr-plc);}
.fl-block .ch-box input[type=checkbox]:checked + span {color: var(--clr-title);}
.fl-block .fl-search {margin-top: 0.9375rem;}
.fl-block .fl-search .input {height: 2.5rem;}
.fl-block .range-control-btn,
.fl-block .range-controls input {height: 2.5rem;}
.fl-scroll {overflow-y: auto;max-height: 7.4375rem;}
.fl-tree-item .fl-tree-toggle {transition: var(--transition-1);cursor: pointer;}
.fl-tree-item .fl-tree-toggle svg {height: 16px;width: 16px;-o-object-fit: contain;object-fit: contain;margin-top: -2px;color: var(--clr-plc);}
.fl-tree-item.is-open .fl-tree-toggle {transform: rotate(180deg);}
.fl-tree-item.is-open .fl-tree-toggle svg {margin-top: -1px;}
.fl-tree-item .fl-tree-children {padding-left: 1.5625rem;}
.fl-tree-item .fl-tree-children > * {margin-top: 6px;}
.fl-tree-children .ch-box span {color: var(--clr-plc);}
.fl-tree-row {display: flex;align-items: center;gap: 0.3125rem;}
.fl-toggle {display: none;}
.fl-toggle > ul {margin-top: 0.9375rem;}
.fl-chips {padding-top: 0.9375rem;display: flex;flex-wrap: wrap;align-items: center;gap: 0.375rem;}
.fl-chips .btn-category {background-color: var(--bg-2);}
@media (max-width: 1199px) {
.fl-chips .btn-category {background-color: #fff;}
}
.fl-chips input:checked + .btn-category {background-color: var(--bg-3);}
.fl-title {cursor: pointer;line-height: 1.25em;color: var(--clr-black);gap: 0.3125rem;display: flex;align-items: center;justify-content: space-between;transition: color var(--transition-1);}
.fl-title i {position: relative;display: inline-block;width: 1rem;height: 1rem;}
.fl-title i::before {content: "";position: absolute;right: 0;top: 50%;transform: translateY(-50%);width: 10px;height: 6px;background: currentColor;-webkit-clip-path: polygon(100% 0, 0 0, 50% 100%);clip-path: polygon(100% 0, 0 0, 50% 100%);transition: transform var(--transition-1);}
.fl-title.is-active i::before {transform: translateY(-50%) rotateX(180deg);}
.fl-list li {line-height: 1;}
.fl-list span {line-height: 1.2;}
.fl-list > * + * {margin-top: 0.375rem;}
.fl-list.type2 li a {color: var(--clr-title);font-size: 0.875rem;line-height: 1.2;}
.fl-list.type2 li a em {color: var(--clr-plc);}
.fl-list.type2 li li {color: var(--clr-plc);}
.fl-list.type2 li li a {color: var(--clr-plc);}
.fl-list-btn {display: none;position: relative;cursor: pointer;margin-top: var(--sp-16-10);font-size: var(--text-sm);line-height: 1.22em;font-weight: 500;color: var(--clr-text);}
.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);}
.more-options + .fl-list-btn {display: block;}
@media (min-width: 1200px) {
.fl-title:hover {color: var(--clr-primary);}
.fl-chips .btn-category:hover {background-color: var(--bg-3);}
.fl-menu {padding: 1.5rem;max-height: calc(100dvh - var(--h-height) - 0.75rem);box-shadow: var(--box-shadow-small);background-color: var(--clr-white);border-radius: var(--rd-1);overflow-x: hidden;overflow-y: auto;overscroll-behavior-y: none;}
.fl-menu .fl-btn-group {display: none;}
.fl-list.type2 a:hover {color: var(--clr-primary);}
}
@media (max-width: 1199px) {
.fl-btn-group {margin-top: auto;display: flex;align-items: center;justify-content: space-between;gap: 8px;}
.fl-btn-group > * {flex: auto;height: 2.125rem;}
.fl-btn,
.fl-overlay {display: block;}
.fl-btn {position: fixed;z-index: 80;left: 50%;bottom: 1rem;transform: translateX(-50%);}
.fl-menu-top {position: relative;gap: 0.0625rem;display: flex;align-items: center;padding-bottom: 2.25rem;font-size: var(--h5);line-height: 1em;font-weight: 500;color: var(--clr-black);}
.fl-menu-top svg {width: 1em;height: 1em;}
.fl-menu-top .btn-close {position: absolute;top: 0;right: 0;transform: translate(10%, -10%);background-color: var(--bg-3);}
.fl-menu {position: fixed;z-index: 150;top: 0;left: 0;height: 100%;width: min(36.25rem, 100%);padding: 0.75rem 0.75rem 1.25rem;display: flex;flex-direction: column;opacity: 0;visibility: hidden;transform: translateX(-100%);background-color: var(--bg-2);transition: var(--cubic-1);}
.fl-menu-inner {overflow-x: hidden;overflow-y: auto;overscroll-behavior-y: none;margin-bottom: 1.25rem;}
.filter-is-open .fl-overlay {opacity: 1;visibility: visible;}
.filter-is-open .fl-menu {opacity: 1;visibility: visible;transform: translateX(0%);}
.fl-title {width: 100%;font-size: 1rem;}
.fl-block {padding-bottom: 0.9375rem;border-radius: 0;border-bottom: 1px solid #EEE7DE;}
.fl-block .fl-search .input {background-color: var(--clr-white);}
.fl-block .range-controls input {background-color: var(--clr-white);}
}
@media (max-width: 767px) {
.fl-block .ch-box span {font-size: 0.8125rem;}
}
/*--------------------*/
/*  Filter Range      */
/*--------------------*/
.range-controls {margin: 0.9375rem 0;gap: 0.3125rem;display: flex;align-items: center;}
.range-controls span {display: block;min-width: 10px;text-align: center;}
.range-controls input {padding: 0 1.25rem;height: 2.875rem;border-radius: var(--rd-1);background-color: var(--clr-grey);}
.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: 1rem;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: calc(var(--line-h) * 2);border-radius: var(--line-rd);background: var(--clr-grey);}
.irs-bar {position: absolute;display: block;left: 0;width: 0;bottom: calc(var(--handle-size) / 2);height: calc(var(--line-h) * 2);border-radius: var(--line-rd);background-color: var(--clr-primary);}
.irs-handle {cursor: pointer;position: absolute;z-index: 1;display: block;bottom: 2px;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;}
}