body#bd-catalogue #hero .hero-inner, body#bd-granits-monuments-funeraires #hero .hero-inner{margin-bottom: 3.5rem}
body#bd-catalogue #hero .hero-inner .hero-content, body#bd-granits-monuments-funeraires #hero .hero-inner .hero-content{padding-bottom: 4rem;}

#filter{background-color: rgba(255,255,255,.98); border-radius: var(--radius); box-shadow: 0 10px 25px rgba(0,0,0,.1); left: 0; margin-top: -5.3rem; padding: .8rem; position: absolute; right: 0; z-index: 3}

#filter #filter-items{align-items: center; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;}
#filter #filter-items .filter-item{flex: 1 1 0; min-width: 180px;}

#filter .filter-item.select-item{background-color: #E9E9E9; border-radius: var(--radius); cursor: pointer; padding: .5rem 1rem; position: relative; transition: background-color .5s ease, color .5s ease;}
#filter .filter-item.select-item.selected{background-color: var(--color-main); color: #FFF}
#filter .filter-item.select-item:before{color: var(--color-main); display: inline-block; font-size: .9rem; font-family: "Font Awesome 6 Free"; margin-right: .5rem; transition: color .5s ease;}
#filter .filter-item.select-item.selected:before{color: #FFF;}
#filter .filter-item.select-item:after{border: solid transparent; border-color: rgba(0, 0, 0, 0); border-top-color: #000; border-width: 6px; content: " "; height: 0; margin-top: -2px; pointer-events: none; position: absolute; right: 1rem; top: 50%; transition: background-color .5s ease; width: 0; z-index: 2;}
#filter #filter-children.filter-item.select-item:before{content: "\f5a6";}
#filter #filter-color.filter-item.select-item:before{content: "\f53f";}
#filter #filter-country.filter-item.select-item:before{content: "\f7a2";}
#filter .filter-item.select-item .selected-text{display: inline-block; font-size: .9rem}
#filter .filter-item.select-item .custom-options{background-color: #FFF; border-radius: var(--radius); box-shadow: 0 5px 15px rgba(0,0,0,.15); color: #000; display: none; font-size: .95rem; left: 0; list-style: none; overflow-y: auto; margin-top: .3rem; padding: 1rem; position: absolute; top: 100%; width: 100%; z-index: 10;}
#filter .filter-item.select-item .custom-options li{align-items: center; cursor: pointer; display: flex; gap: 1rem; padding: .5rem 0; transition: background-color .5s;}
#filter .filter-item.select-item .custom-options li:last-child{margin-bottom: 0}
#filter .filter-item.select-item .custom-options li:hover{background-color: rgba(0,0,0,.05);}
#filter .filter-item.select-item .custom-options li[data-value="-1"]{font-style: italic;}
#filter .filter-item.select-item .custom-options li .color-dot{border-radius: 50%; display: inline-block; height: 16px; width: 16px;}
#filter .filter-item.select-item .custom-options li .country-flag{border: 1px solid #ccc; border-radius: 50%; display: inline-block; height: 24px; width: 24px;}

#filter .filter-item.range-item{align-items: center; display: flex; gap: .5rem; position: relative; width: 100%}
#filter .filter-item.range-item span{color: #363636; flex-shrink: 0; font-size: .75rem; font-weight: 400; white-space: nowrap}
#filter .filter-item.range-item .price{font-size: .85rem; font-weight: 500; text-transform: uppercase;}
#filter .filter-item.range-item .price-slider{flex: 1; height: 3px; position: relative}
#filter .filter-item.range-item .price-slider .range-fill{background: var(--color-main); height: 3px; left: 0; position: absolute; right: 0; top: 0}
#filter .filter-item.range-item .price-slider .range-track{background: #D4D4D4; height: 3px; left: 0; position: absolute; right: 0; top: 0}
#filter .filter-item.range-item .price-slider input[type="range"]{appearance: none; -webkit-appearance: none; background: none; height: 3px; left: -2px; position: absolute; right: 0; top: -3px; width: 100%}
#filter .filter-item.range-item .price-slider input[type="range"]::-moz-range-thumb{background: #FFF; border: 2px solid var(--color-main); border-radius: 50%; cursor: pointer; height: 18px; width: 18px}
#filter .filter-item.range-item .price-slider input[type="range"]::-webkit-slider-thumb{appearance: none; background: #FFF; border: 2px solid var(--color-main); border-radius: 50%; cursor: pointer; height: 18px; width: 18px; margin-top: -7px}
#filter .filter-item.range-item.active .range-fill{background: var(--color-main)}
#filter .filter-item.range-item.active input[type="range"]::-moz-range-thumb{background: var(--color-main); border-color: #FFF}
#filter .filter-item.range-item.active input[type="range"]::-webkit-slider-thumb{background: var(--color-main); border-color: #FFF}



@media screen and (max-width: 1250px){

	body#bd-catalogue #hero .hero-inner, body#bd-granits-monuments-funeraires #hero .hero-inner{margin-bottom: 1.5rem;}
	body#bd-catalogue #hero .hero-inner .hero-content, body#bd-granits-monuments-funeraires #hero .hero-inner .hero-content{padding-bottom: 3rem;}

	#filter{margin-bottom: 1.5rem; margin-top: -3.5rem; position: static;}
	#filter #filter-items{flex-direction: column; gap: 1.5rem;}
	#filter #filter-items .filter-item{width: 100%;}

}