/* color var
:root {
  --color-primary: #FDD504;
  --color-primary-80: #fdd504cc;
  --color-primary-50: #FDD5047f;

  --color-secondary: #bca00f;
  --color-secondary-80: #bca00fcc;

  --color-dark-royal: #474747;
  --color-dark-primary: #292929;
  --color-dark-primary-50: #2929297f;
  --color-dark-primary-80: #292929cc;

  --color-dark-secondary: #1a1a1a;



  --color-gray-secondary: #ededed;
  --color-gray-secondary-50: #ededed7f;
  --color-gray-third: #c2c1c1;
  --color-gray-third-50: #c2c1c17f;
  --color-gray-muted: #717070;
  --color-gray-muted-50: #7170707f;


  --text-color-link: #655a1f;
  --link-hover-color: #937f17;

  --color-gy-1: #f6f000;
  --color-gy-2: #fad807;
  --gd-1: var(--color-dark-secondary) 49.9%, black 50.1%;
}

:root {
  --n: 0;
  --tn: 8px;
  --xs: 16px;
  --sm: 24px;
  --md: 32px;
  --xm: 40px;
  --lg: 48px;
  --xl: 56px;
  --xxl: 64px;
  --xxxl: 72px;
  --hg: 80px;
  --notif-h: 40px;

}

:root {
  --t-tn: 12px;
  --t-xs: 14px;
  --t-sm: 16px;
  --t-md: 24px;
  --t-xm: 32px;
  --t-lg: 40px;
  --t-xl: 48px;
  --t-xxl: 56px;
  --t-xxxl: 64px;
  --t-hg: 72px;
  --w-lit: 200;
  --w-reg: 400;
  --w-bld: 600;
  --w-blk: 800;
}
*/


ul.products.container.columns-3 {
  width: 78% !important;
  display: inline-block;
}

#filter-data {
  display: inline-block;
  width: 100%;
  background: var(--color-gray-secondary-50);
  border-left: 1px solid var(--color-gray-secondary);
  position: sticky;
  right: 0;
}
/* body.admin-bar #filter-data {
  top: calc(84px + 32px);
}
body.admin-bar #filter-data {
  top: calc(84px + 32px);
} */
body.notif-bar #filter-data {
  top: calc(84px + var(--notif-h));
}
body.notif-bar.admin-bar #filter-data {
  top: calc(84px + 32px + var(--notif-h));
}
/* .filters-container {
  padding: var(--tn);
  border-radius: 10px;
} */

.filters-row {
  margin:  0;
  padding: var(--tn) var(--xs);
  position: relative;
  transition: background-color 0.4s ease;
  font-size: var(--t-xs);
  color: var(--color-dark-royal);
}
.filters-row.toggled {
  background: var(--color-gray-secondary);
}
.filters-row::before {
  content: "";
  width: calc(100% - (var(--xs)*2));
  height: 1px;
  background: var(--color-gray-secondary);
  border-radius: var(--tn);
  position: absolute;
  margin: auto;
  offset: 0;
  right: 0;
  left: 0;
  bottom: -1px;
}
.filters-row:last-child::before {
  content: none;
}
.filters-row.toggled::before {
  width: 0;
}

/* .active-filters-container.filters-row {
  background: var(--color-primary);
}  */
.active-filters-container.filters-row::before {
  content: none;
}




.filter-row-header {
  font-variation-settings: "wght" var(--w-bld), "dots" 4;
  font-weight: var(--w-bld);
}
.filter-row-header::before {
  margin-left: var(--xs);
}
.filters-toggle-btns {
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  padding-left: 1rem;
  justify-content: flex-end;
  align-items: center;
  /* text-align: left;
  font-weight: var(--w-bld);
  width: calc(100% + var(--xs)*2);
  height: calc(100% + var(--tn)); */
}
.filters-toggle-btns::before {
  font-size: 100%;
  position: relative;
  left: var(--xs);
  transition: transform 0.4s ease;
}
.toggled .filters-toggle-btns::before {
  transform: rotate(-90deg);
}


.filters-checkbox-container {
  display: block;
  overflow: overlay;
  padding-inline: 0.5rem;
  max-height: 0px ;
  transition: max-height 0.4s ease, padding-block 0.4s ease, background-color 0.4s ease;
  overflow: hidden;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
}
.toggled .filters-checkbox-container {
  max-height: 250px;
  background: #eee;
  padding-block: 0.5rem;
  overflow-y: auto;
}
.filters-checkbox-inner-container {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--tn);
  margin-bottom: 0.5rem;
}
.filters-checkbox {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  cursor: pointer;
  padding: 0;
  margin: 0;
  opacity: 0;
}
.filters-checkbox-inner-container > i {
  width: var(--sm);
  min-width: var(--sm);
  max-width: var(--sm);
  height: var(--sm);
  min-height: var(--sm);
  max-height: var(--sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  margin-left: 0.5rem;
}
.filters-checkbox-inner-container > i::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: #ddd;
  border-radius: 8px;
  transition: 0.4s ease;
}

.filters-checkbox-inner-container > i::before {
  display: block;
  font-size: 250%;
  bottom: 2px;
  left: 2px;
  color: var(--color-gray-muted);
  position: relative;
  z-index: 1;
  opacity: 0;
}
.filters-checkbox-inner-container .filters-checkbox[type="checkbox"]:checked ~ i::after {
  background: #9afeff;
}
.filters-checkbox-inner-container .filters-checkbox[type="checkbox"]:checked ~ i::before {
  opacity: 1;
}
.filters-checkbox:hover ~ label {
  color: var(--color-dark-primary);
  cursor: pointer;
}
.filters-checkbox-inner-container label {
  display: block;
  width: 100%;
  height: 100%;
  font-size: 14px;
}
#active-filters .icon-close {
  color: var(--color-dark-secondary);
  font-size: var(--t-tn);
}

.filters-values {
  margin: 2px 1.5px;
  padding: 0 5px;
  border-radius: 5px;
  display: inline-block;
  font-size: 11px;
  cursor: pointer;
  user-select: none;
  color: var(--color-dark-royal);
  border-radius: var(--sm);
  margin: auto;
  padding: 0 var(--tn);
  font-size: var(--t-tn);
}


.filters-value-qty {
  font-size: 9px;
  vertical-align: top;
  user-select: none;
}

.filters-values.active-filter {
  background-color: transparent;
  background: var(--color-gray-secondary);
  text-align: center;
}
.active-filter-prefix {
  font-variation-settings: "wght" var(--w-bld), "dots" 4;
  font-weight: var(--w-bld);
}
#active-filters .icon-close::before {
  font-size: 100%;
  font-weight: bold;
  padding-right: calc(var(--tn)/2);
}
.filters-values.out-of-stock-filter {
  color:#bbb;
  cursor:no-drop;
}


.range-container {
  width: 100%;
  margin: 0 auto;
  position: relative;
  direction: rtl;
}
.range-inner {
  height: 14px;
  position: relative;
  display: block;
  width: 100%;
}

.range-progress, .range-progress-back {
  position: absolute;
  height: calc(8px/4);
  top: calc(14px/2);
  z-index: 1;
  border-radius: 14px;
  transition: left 0.4s ease, right 0.4s ease;
}
.range-progress {
  background-color: #ffffff;
}
.range-progress-back {
  width: 100%;
  background-color: #26313a;
}

.range-container input[type=range] {
  width: 100%;
  -webkit-appearance: none;
  background: transparent;
  pointer-events: none;
  position: absolute;
  z-index: 2;
  margin: 0;
  top: 0;
}
input[type=range]::-moz-range-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border: calc(8px/4) solid #474747;
  background-color: #ededed;
  border-radius: 50%;
  pointer-events: all;
  cursor: pointer;
  transition: background-color 0.4s ease;
}
input[type=range]::-moz-range-thumb:active {
  background-color: #474747;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border: calc(8px/4) solid #474747;
  background-color: #ededed;
  border-radius: 50%;
  pointer-events: all;
  cursor: pointer;
  transition: background-color 0.4s ease;
}
input[type=range]::-webkit-slider-thumb:active {
  background-color: #474747;
}

.range-labels {
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 500;
}


.active-filters-header{
  margin-bottom:0;
}


.filters-searchbox-inner {
  position: relative;
  overflow: hidden;
  padding-block: 0.5rem;
}
.filters-searchbox-inner span {
  font-size: 14px;
  position: absolute;
  left: 8px;
  transition: 0.4s ease;
  color: #717070;
  top: 0;
}
.filters-searchbox-inner .icon-search {
  transform: translateY(-150%);
}
.filters-searchbox-inner .active.icon-search {
  transform: translateY(-50%);
}
.filters-searchbox-clear-btn.active.icon-close {
  transform: translateY(-50%);
}
.filters-searchbox-clear-btn.icon-close {
  transform: translateY(50%);
  cursor: pointer;
}

input.filters-searchbox {
  border: none;
  width: 100%;
  padding-inline: 8px;
  border-radius: 8px;
  outline: none;
}

/* -----------------------------------------Mobile----------------------------------------- */
@media (max-width:768px) {
  body.admin-bar #filter-data, body.notif-bar #filter-data, body.notif-bar.admin-bar #filter-data {
    top: 0;  
  }
  .mobile-filters-overlay {
    top: -100vh;
    left: 0;
    right: 0;
    position: fixed;
    z-index: 4;
    background-color: var(--color-dark-primary);
    transition: 0.4s ease;
    padding: 0;
    height: 100%;
    width: 100vw;
  }
  .mobile-filters-overlay.active-fab {
    top: 0;
  }
  .mobile-filters-overlay #filter-data {
    display: block;
    width: 100%;
    overflow-y: auto;
    max-height: calc(100% - var(--xxxl) - var(--sm));
    border: none;
    padding: 0;
    background-color: transparent;
    top: 0;
    position: relative;
    z-index: 1;
  }
  .filters-container {
    position: relative;
    z-index: 1;
    /* padding-bottom: calc(var(--xxxl) + var(--xs)); */
  }
  .filters-row.toggled .filter-row-header-container {
    color: var(--color-primary);
  }
  .filter-row-header {
    display: flex;
    align-items: center;
    justify-content: start;
    width: 100%;
    font-variation-settings: "wght" var(--w-reg), "dots" 4;
    font-weight: var(--w-reg);

  }
  .filters-row {
    color: var(--color-gray-secondary);
    font-size: var(--t-sm);
    padding: var(--xs);
  }
  .filters-row.toggled {
    background: var(--color-dark-royal);
  }
  .filters-row::before {
    background-color: var(--color-dark-royal);
  }
  .filter-row-header::before {
    padding: var(--tn);
    background: var(--color-dark-royal);
    color: var(--color-gray-third);
    display: flex;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
  }
  .toggled .filters-checkbox-container {
    margin-block: var(--tn);
  }
  .price-filter-container .filter-row-header-container {
    padding-block: var(--tn);
  }
  .range-container {
    padding: var(--xs) var(--md); 
  }
  /* .range-progress {
    background: var(--color-gray-third);
  }
  input[type=range]::-moz-range-thumb {
    border-color: var(--color-gray-third);
    border-width: 2px;
    background-color: var(--color-dark-royal);
  }
  input[type=range]::-moz-range-thumb:active {
    background-color: var(--color-gray-third);
  }
  input[type=range]::-webkit-slider-thumb {
    border-color: var(--color-gray-third);
    border-width: 2px;
    background-color: var(--color-dark-royal);
  }
  input[type=range]::-webkit-slider-thumb:active {
    background-color: var(--color-gray-third);
  } */
  input.filters-searchbox {
    height: var(--xm);
  }
  .filters-checkbox:hover ~ label {
    color: inherit;
  }
  .filters-searchbox-inner span::before {
    font-size: 150%;
  }
  .filters-checkbox-inner-container {
    padding-top: var(--tn);
  }
  .filters-checkbox-inner-container > i::before { 
    color: var(--color-dark-primary);
    font-weight: var(--w-blk);
    font-size: 200%;
  }
  .filters-checkbox-inner-container > i::after { 
    background: var(--color-dark-royal);
  }

  .active-filters-container .filter-row-header-container {
    margin-bottom: var(--xs);
  }
  .active-filters-container.filters-row {
    background-color: transparent;
  }
  .active-filters-header {
    color: var(--color-dark-primary);
  }
  .filters-values {
    margin: 0;
    padding: calc(var(--tn)/2) var(--xs);
  }
  .filters-apply {
    width: 100%;
    display: block;
    text-align: center;
    position: sticky;
    padding: var(--xs);
    bottom: 0;
    background: var(--color-dark-primary);
    z-index: 1;
  }
  .filters-apply button {
    padding: var(--xs) var(--tn);
    font-weight: var(--w-reg);
    font-variation-settings: "wght" var(--w-reg), "dots" 4;
    border-radius: var(--tn);
    background: var(--color-primary);
    color: var(--color-dark-primary);
    text-align: center;
    font-size: var(--t-sm);
    height: var(--xl);
    width: 100%;
    display: block;
  }
}