.ais-wrapper {
	width: 80%;
	max-width: 1200px;
	margin: auto;
}

.ais-wrapper.ais-facet-wrapper {
	width: 100%;
	margin: 0;
	max-width: none;
	background: #deebf4;
}

.ais-facet-wrapper-inner {
	width: 80%;
	max-width: 1200px;
	margin: 0 auto;
}

.hidden {
	display: none;
}

aside#ais-facets {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.ais-stats-and-refinement {
	text-align: right;
	padding-right: 1rem;
}

#algolia-clear-refinements {
	display: inline-block;
}

.ais-facet {
	min-width: 33%;
	width: 33%;
	padding: 1rem;
}

.ais-facet.double-width.facet-bulb-size {
	    width: 50%;
}

.facet-color .ais-RefinementList-list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
}

.facet-color .ais-RefinementList-item,
.facet-color .ais-RefinementList-item button {
	width: 20px;
	max-width: 20px;
	min-height: 20px;
	height: 20px;
	border-radius: 50%;
	margin-right: 1rem;
}

.facet-color .ais-RefinementList-item button {
	border: 1px solid #878faf;
}

.facet-color .ais-RefinementList-item--selected button {
	border: 3px solid #000000;
}

.roze,
.licht-roze,
.lichtroze,
.color_a {
	background-color: pink;
}

.donker-roze,
.donkerroze,
.color_b {
	background-color: #e2017b;
}

.paars,
.color_c {
	background-color: purple;
}

.rood,
.color_d {
	background-color: red;
}

.oranje,
.color_e {
	background-color: orange;
}

.geel,
.color_f {
	background-color: yellow;
}

.wit,
.color_g {
	background-color: white;
}

.groen {
	background-color: green;
}

.flower-color:hover {
	cursor: pointer;
}

#facet-double-petals {
	padding-top: 2rem;
}

#facet-buds-min ul,
#facet-buds-max ul,
#facet-bulb-size ul {
	display: flex;
}

#facet-bulb-size li {
	width: 47px;
	margin-right: 3px;
}

#facet-bulb-size .pill.current:after {
	content: ' x';
}

#facet-bulb-size .ais-RefinementList-item--selected {
	width: 60px;
}

#facet-bulb-size .ais-RefinementList-item--selected .pill.current {
	width: 60px;
}

/* Hits */

.ais-Hits-item, .ais-InfiniteHits-item, .ais-InfiniteResults-item, .ais-Results-item {
	padding-bottom: 0!important;
}

.ais-Hits-item .ais-item-link {
	width: 100%;
}

article {
	height: 100%;
}

.ais-Hits-item .ais-item-content-wrapper {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	height: 100%;
}

/* Thumbnail */

.ais-hits--content {
	width: calc( 50% - 0.5rem );
}

.ais-hits--thumbnail {
	width: calc( 50% - 0.5rem );
	margin-right: 0.5rem;
	/* allow absolute-positioned children */
	position: relative;
	display: flex;
	/* keep images vertically aligned if needed */
}

.ais-hits--thumbnail.lelie img {
	position: relative;
	vertical-align: bottom;
}

article {position:relative;}

.icons-wrapper {
	position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    z-index: 5;
    width: 100%;
}

.results-icons {
	display:flex;
	flex-direction:row;
	align-items: center;
	gap:3px;
}

.icon.not-available {
	width: 16px;
	max-width: 16px;
	max-height: 16px;
	/* don't float absolute-positioned icons */
	float: none;
	
}

.icons-wrapper img.bloomlily {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 27px;
    padding: 2px 0px;
    border: 1px solid #86bdfe;
    border-radius: 5px;
    background: white;
    width: auto;
    /* padding: 2px; */
    vertical-align: middle;
}

/* ensure the raster/svg inside the img scales to the available inner area */
.icons-wrapper img.bloomlily,
.icons-wrapper img.bloomlily svg {
	max-height: 100%;
	max-width: none;
	object-fit: contain;
}

@media only screen and (max-width: 480px) {
	/* On small screens keep icons in the flow so they don't overlap the thumbnail image */
	.ais-hits--thumbnail {
		position: static;
	}

	.icons-wrapper {
		position: static;
		top: auto;
		left: auto;
		margin-top: 0.5rem;
		justify-content: flex-start;
	}
}

@media only screen and (max-width: 1080px) {
	.ais-hits--content {
		width: calc( 55% - 0.5rem );
	}

	.ais-hits--thumbnail {
		width: calc( 45% - 0.5rem );
	}
}

@media only screen and (min-width: 981px) {
	.ais-Hits-item, .ais-InfiniteHits-item, .ais-InfiniteResults-item, .ais-Results-item {
	width: calc( 33.3% - 0.667rem ) !important;
}

li.ais-Hits-item:nth-child(3n+1), li.ais-Hits-item:first-child{
	margin-left:0!important;
}
}

@media only screen and (max-width: 980px) {
	.ais-Hits-item, .ais-InfiniteHits-item, .ais-InfiniteResults-item, .ais-Results-item {
		width: calc( 50% - 0.5rem ) !important;
}

li.ais-Hits-item:nth-child(2n+1), li.ais-Hits-item:first-child{
	margin-left:0!important;}

	.ais-facet {
		min-width: 100%!important;
		width: 100%!important;
		padding: 0.5rem 0 0 0!important;
	}
}

@media only screen and (max-width: 639px) {
	.ais-Hits-item, .ais-InfiniteHits-item, .ais-InfiniteResults-item, .ais-Results-item {
		width: 100%;
	}

	li.ais-Hits-item{
		margin-left:0!important;
	}
}

/* data */
.ais-hits--content h2 {
	font-size: 1.25rem!important;
	color: #040033!important;
	font-weight: 700;
}

.ais-data-container {
	color: #86caf1;
	border-top: 1px solid #86caf1;
	padding-top: 1rem;
}

.ais-data-item {
	display: flex;
	flex-direction: row;
}

/* icons */
.ais-data-item .data-icon {
	flex-grow: 1;
	margin-right: 0.5rem;
}

.ais-data-item .data {
	flex-grow: 5;
	width: 100%;
}

.data-icon {
	text-align: center;
}

.data-icon .icon-wrapper {
	width: 1.25rem;
}

.data-icon img {
	margin: 0 auto;
	max-height: 1.5rem;
}

.data {
	line-height:1.5rem;
	font-size: 14px;
	color:#040033;
}

.data.pa-pa-subcategory {
	font-weight: 700;
	font-size: 13px;
}

.pill {
	background-color: #86bdfe;
	border: 2px solid #86bdfe;
	color: #ffffff;
	border-radius: 5px;
	padding: 3px;
	margin-bottom: 3px;
	line-height: 30px;
}

.ais-Hits-item .pill {
	border: 2px solid #cccccc;
	background-color: #cccccc;
}

.pill:hover {
	cursor: pointer;
}

.pill.refined {
	background-color: #040033;
	border: 2px solid #040033;
	color: #ffffff;
}

.pill.match {
	border: 2px solid #86bdfe;
	background-color: #86bdfe;
}

.pill.active {
	border:3px solid #040033;
}

.ais-data-tab.hide {
	display: none;
}

/*-------------- CSS Michel -----------------*/
.ais-SearchBox-input, .ais-MenuSelect-select{
	border: 2px solid #040033;
	border-radius: 50px;
	width: 100%;
}

.ais-MenuSelect-select{
	background-position: 97% 50%;
	padding-left:0.8rem;
}

.ais-RangeSlider .rheostat {
	overflow: visible;
	margin-top: 25px!important;
	margin-bottom: 0!important;
}

.ais-facet h3{
	font-size: 1.25rem!important;
	padding-bottom: 0.5rem!important;
}

.ais-RangeSlider .rheostat-progress {
	background-color: #040033!important;
}

.ais-facet {
	padding-top: 0.25rem;
}

.facet-color .ais-RefinementList-item{
	margin-right: 0.25rem;
}
.ais-facet h3 {
	width: 150px;
	float: left;
	padding-top:17px;
}

div#facet-buds, div#facet-forcing-period, div#facet-length, div#facet-color-primary, div#facet-color-secondary {
	width: calc(100% - 150px);
	float: right;
}

div#facet-buds, div#facet-forcing-period, div#facet-length {
	padding-right: 10px;
}

div#facet-color-primary, div#facet-color-secondary {
	padding-top: 17px;
}

.facet-color .ais-RefinementList-list {
	width: fit-content;
	float: right;
}

div#algolia-pagination {
	padding: 20px 0!important;
}

td.active.match{
	border:2px solid #040033;
}

span.ais-ToggleRefinement-labelText{
	font-size: 1.25rem!important;
	padding-bottom: 0.5rem!important;
}

#facet-double-petals {
	padding-top: 1rem;
}

@media only screen and (min-width: 981px) {
	.ais-stats-and-refinement {
		text-align: right;
		padding-right: 1rem;
		width: fit-content;
		/*float: right;
		margin-top: -87px;*/
	}
}

.search-toggle-mobile {
	display: none;
}

@media only screen and (max-width: 980px) {
	.search-toggle-mobile {
		display: flex;
	}

	.hidden-initially-on-mobile {
		display: none;
	}

	#facet-bulb-size ul {
		display: block;
		width: 100%!important;
		float: right;
	}

	#facet-bulb-size li {
		float: left;
	}
}

li.ais-RefinementList-item {
	float: left;
	margin-right: 3px;
}

#algolia-clear-refinements {
    display: inline-block;
    float: left;
    width: 100%;
}

.tulip-data .icon {
    float: left;
	padding-right: 10px;
}

.tulip-data .icon img{
    width: 30px;
	margin:0!important;
}


.tulip-data td{
	display:block;
}

.tulipDetails{
    display: flex;
    align-items: center;
}