/*== == == Shop == == ==*/

.shop-products ul.products {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    list-style: none;
    padding: 0px 0px;
    margin: 0px;
    width: 100%;
}

.shop-products.shop-page {
    margin-top: 20px;
    flex: 1;
}

.shop-products .products li.product {
    flex: 0 0 calc(100% / 3 - 20px);
}

.shop-products .products li.product a{
	color:#333;
}

.shop-products select {
    border: solid 2px gray;
    padding: 5px;
    color: gray;
}

.shop-products select.orderby {
    width: 100%;
    max-width: 300px;
    padding: 10px; 
    font-size: 16px;
    color: #333; 
    background-color: #f9f9f9; 
    border: 1px solid #ccc; 
    border-radius: 5px; 
    transition: all 300ms ease-in-out;
}

.shop-products select.orderby:hover {
    background-color: #f1f1f1; 
    border-color: #999; 
}

.shop-products select.orderby:focus {
    outline: none; 
    border-color: var(--secondary-color1); 
}

.shop-products select.orderby option {
    font-size: 16px; 
    color: #333; 
    background-color: #fff; 
}

	/*== == == Shop END == == ==*/

/*== == == SHOP FILTER == == ==*/

.shop-page-wrapper {
    display: flex;
    gap: 40px;
    padding: 50px 0px;
    position: relative;
    align-items: flex-start;
}

#primary .wfpTitle.wfpClickable {
    font-weight: 400;
    font-family: 'Poppins';
    line-height: 1;
    padding: 0px;
    height: auto;
    font-size: 18px;
}

.wpfFilterWrapper .wpfCheckbox label::before, .wpfFilterWrapper .wpfCheckbox label::after {
    border-radius: 50%;
}

p.woocommerce-loop-product__category {
    color: var(--primary-color1);
}

.shop-filter {
    flex: 0 0 340px;
    position: sticky;
    top: 100px;
    left: 0px;
    width: 100%;
    background: whitesmoke;
}

.shop-filter-header .subtext {
    font-weight: 400;
    text-transform: none;
}

ul.wpfFilterVerScroll::-webkit-scrollbar {
    width: 5px; 
}

ul.wpfFilterVerScroll::-webkit-scrollbar-track {
    background: #d9d9d9; 
    border:none;
}

ul.wpfFilterVerScroll::-webkit-scrollbar-thumb {
    background: #3F71AE; 
    border-radius: 5px; 
}

ul.wpfFilterVerScroll::-webkit-scrollbar-thumb:hover {
    background: #555; 
}

.wpfPriceRangeField#wpfMinPrice, .wpfPriceRangeField#wpfMaxPrice {
}

.shop-page-wrapper .wpfFilterButton.wpfButton, .wpfClearButton.wpfButton {
    width: 100%;
    margin: 0px;
    background: var(--primary-color1);
    color: white;
    text-transform: uppercase;
    font-family: 'Poppins';
    font-size: 24px;
    font-weight: 400;
}

#primary .shop-filter .wpfFilterWrapper ul:not(.wpfButtonsFilter) li {
    margin-bottom: 10px;
    transition: all 500ms ease;
    padding-left: 10px !important;
}

.woocommerce-Viewmore-link .readmore {
    width: fit-content;
    padding: 12.5px 10px;
    margin: 5px auto 0px;
    font-size: 16px;
}

.wpfCheckboxHier {
    padding: 20px 0px 20px 20px;
}

body #wpfBlock_1 .wpfFilterVerScroll {
    max-height: 330px;
    padding-right: 0px;
}

#primary .shop-filter-header .subtext {
    margin: 0px;
    font-size: 18px;
    line-height: 1;
}

#primary .shop-filter-header {
    background: #E9EBEA;
    padding: 10px;
}

#primary .wpfFilterWrapper {
    margin: 0px;
    padding: 0px;
}

#primary .wpfFilterTitle {
    background: #E9EBEA;
    padding: 20px 20px;
}

#primary .wpfFilterWrapper[data-filter-type] {
    padding: 0px;
}

#primary .fa-minus:before, .fa-subtract:before {
    font-family: 'Font Awesome 5 Pro';
    content: '\f077';
}

#primary .fa-plus:before, .fa-addition:before {
    font-family: 'Font Awesome 5 Pro';
    content: '\f078';
}

#primary .shop-filter div#wpfBlock_1 {
    padding: 10px 20px;
}

#primary .shop-filter div#wpfBlock_1 .wpfFilterContent {
  padding: 10px;
}

#primary .shop-filter #wpfSliderRange {
  height: 6px;
  border: none;
  background: #e0e0e0;
  border-radius: 3px;
}

#primary .shop-filter #wpfSliderRange .ui-slider-range {
  background: var(--primary-color1); 
  border-radius: 3px;
}

#primary .shop-filter div#wpfBlock_1 #wpfSliderRange .ui-slider-handle {
  width: 15px;
  height: 15px;
  border: none;
  background: #fff;
  border-radius: 50%;
  border: 2px solid var(--primary-color1);
  top: -7px;
  margin-left: -10px;
  outline: none;
  transition: transform 0.1s ease-in-out;
}

#primary .shop-filter div#wpfBlock_1 .wpfPriceInputs {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0px;
}

#primary .shop-filter .wpfCurrencySymbol {
  font-size: 16px;
  color: #333;
  margin-right: 0px;
}

#primary .shop-filter .wpfPriceRangeField {
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  min-width: 50px;
  max-width: 80px;
  text-align: center;
  background: #fff;
  color: #333;
  min-width: unset !important;
  display: block !important;
  box-sizing: border-box;
}

#primary .shop-filter div#wpfBlock_1 .wpfFilterDelimeter {
  font-size: 16px;
  color: #666;
  margin: 0px 5px;
}

#primary .shop-filter :is(.wpfPriceRangeField::-webkit-outer-spin-button,
.wpfPriceRangeField::-webkit-inner-spin-button) {
  -webkit-appearance: none;
  margin: 0;
}

#primary .shop-filter #wpfBlock_2 .wpfFilterVerScroll li:last-child {
    margin: 0px;
}

#primary .shop-filter .wpfFilterWrapper ul:not(.wpfButtonsFilter) li:has(input:checked) {
    color: var(--primary-color1);
}

#primary .shop-filter .wpfFilterContent span.wpfCheckbox {
    opacity: 0;
    width: 0px;
}

#primary .shop-filter .wpfFilterWrapper ul:not(.wpfButtonsFilter) li:hover {
    color: var(--primary-color1);
}

#primary .shop-filter .wpfFilterVerScroll li {
    position:relative;
}

#primary .shop-filter .wpfFilterVerScroll li::after {
    content: '\f054';
    font-family: 'Font Awesome 5 Pro';
    position:absolute;
    left:0px;
    top: 2px;
    color: var(--primary-color1);
}

/* Firefox */
#primary .shop-filter .wpfPriceRangeField[type=number] {
  -moz-appearance: textfield;
}

	/*== == == SHOP FILTER END == == ==*/