:root {
	/* FONTS */
	--font-primary: "Autumn Pumpkin";
	--font-secondary: "Bebas Neue Pro Expanded";
	--font-tertiary: "Bebas Neue Pro Expanded";

	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--font-weight-light: 300;
/*    --font-weight-book: "Book";
    --font-weight-italic: "Italic";
    --font-weight-bold-italic: "Bold Italic";
    --font-weight-semibold-italic: "Semibold Italic";
    --font-weight-medium-italic: "Medium Italic";
    --font-weight-light-italic: "Light Italic";
*/

	--desktop-h1-font-family: var(--font-primary);
	--desktop-h1-weight: var(--font-weight-bold);
	--desktop-h1-size: 64px;
	--desktop-h1-line-height: 80px;
	--desktop-h1-alt-font-family: var(--font-secondary);
	--desktop-h1-alt-weight: var(--font-weight-regular);
	--desktop-h1-alt-size: 64px;
	--desktop-h1-alt-line-height: 80px;
	--desktop-h2-font-family: var(--font-primary);
	--desktop-h2-weight: var(--font-weight-bold);
	--desktop-h2-size: 48px;
	--desktop-h2-line-height: 60px;
	--desktop-h3-font-family: var(--font-primary);
	--desktop-h3-weight: var(--font-weight-medium);
	--desktop-h3-size: 32px;
	--desktop-h3-line-height: 40px;
	--desktop-h4-font-family: var(--font-secondary);
	--desktop-h4-weight: var(--font-weight-regular);
	--desktop-h4-size: 32px;
	--desktop-h4-line-height: 34px;
	--desktop-h5-font-family: var(--font-primary);
	--desktop-h5-weight: var(--font-weight-bold);
	--desktop-h5-size: 18px;
	--desktop-h5-line-height: 24px;
	--desktop-h6-font-family: var(--font-tertiary);
	--desktop-h6-weight: var(--font-weight-semibold);
	--desktop-h6-size: 16px;
	--desktop-h6-line-height: 20px;

	--mobile-h1-font-family: var(--font-primary);
	--mobile-h1-weight: var(--font-weight-bold);
	--mobile-h1-line-height: 60px;
	--mobile-h1-size: 48px;
	--mobile-h1-alt-font-family: var(--font-secondary);
	--mobile-h1-alt-weight: var(--font-weight-regular);
	--mobile-h1-alt-size: 48px;
	--mobile-h1-alt-line-height: 60px;
	--mobile-h2-font-family: var(--font-primary);
	--mobile-h2-weight: var(--font-weight-bold);
	--mobile-h2-size: 32px;
	--mobile-h2-line-height: 40px;
	--mobile-h3-font-family: var(--font-primary);
	--mobile-h3-weight: var(--font-weight-medium);
	--mobile-h3-line-height: 30px;
	--mobile-h3-size: 24px;
	--mobile-h4-font-family: var(--font-secondary);
	--mobile-h4-weight: var(--font-weight-regular);
	--mobile-h4-size: 24px;
	--mobile-h4-line-height: 28px;
	--mobile-h5-weight: var(--font-weight-bold);
	--mobile-h5-font-family: var(--font-tertiary);
	--mobile-h5-size: 18px;
	--mobile-h5-line-height: 20px;
	--mobile-h6-font-family: var(--font-tertiary);
	--mobile-h6-weight: var(--font-weight-semibold);
	--mobile-h6-size: 16px;
	--mobile-h6-line-height: 20px;

	--paragraph-font-family: var(--font-tertiary);
	--paragraph-weight: var(--font-weight-regular);
	--paragraph-size: 16px;
	--paragraph-line-height: 24px;
	--paragraph-small-font-family: var(--font-tertiary);
	--paragraph-small-weight: var(--font-weight-regular);
	--paragraph-small-size: 14px;
	--paragraph-small-line-height: 21px;

	--button-font-family: var(--font-tertiary);
	--button-weight: var(--font-weight-semibold);
	--button-size: var(--paragraph-size);
	--button-line-height: var(--paragraph-line-height);
	--input-font-family: var(--font-tertiary);
	--input-weight: var(--font-weight-semibold);
	--input-size: var(--paragraph-size);
	--input-line-height: var(--paragraph-line-height);
	--link-font-family: var(--font-tertiary);
	--link-weight: var(--font-weight-regular);
	--link-size: var(--paragraph-size);
	--link-line-height: var(--paragraph-line-height);
	--navbar-nav-link-padding-x: 1rem !important;

	/* BRAND COLORS */
	--main-brand: #375855;
	--accents-1: #375855;
	--accents-2: #485834;
	--accents-3: #b2d7c6;
	--accents-4: #f7f2ed;
	--neutrals-white: #ffffff;
	--neutrals-light-grey: #f2f2f2;
	--neutrals-medium-grey: #d9d9d9;
	--neutrals-dark-grey: #989898;
	--neutrals-black: #375855;
	--ui-positive: #009681;
	--ui-negative: #d13346;
	--ui-warning: #e7aa35;

	/* FILE DATA */
	--border-radius-interactives: 8px;
	--border-radius-cards: 16px;
	--desktop-side-padding: 120px;
	--mobile-side-padding: 24px;
}
#floralinnovations-api-floriday {
	.section-title {
		text-transform: uppercase;
		font-weight: 600;
		letter-spacing: 2px;
		text-align: center;
		margin-bottom: 30px;
		position: relative;
	}
	.section-title:before,
	.section-title:after {
		content: "";
		position: absolute;
		top: 50%;
		width: 25%;
		height: 1px;
		background: #000;
	}
	.section-title:before { left: 0; }
	.section-title:after { right: 0; }

	.main-card {
		background: #f2f2f2;
		border-radius: 10px;
		padding: 7px;
		text-align: center;
/*		height: 100%;*/
	}
	.cursor-pointer {
		cursor: pointer;
	}
	.category-card {
		border-radius: 10px;
		padding: 12px;
		display: flex;
		align-items: center;
		gap: 0px;
		height: 100%;
		font-weight: 500;
		justify-content: space-between
	}

	.category-card img {
		height: 64px;
		width: auto;
	}
	.category-card h5 {
		margin:0;
	}

	/* Pastel backgrounds */
	.bg-voorjaar { 
		background: #dcefd7; 
		background-image: url("../img/voorjaar.svg");
		background-repeat: no-repeat;
		background-position: 0% 50% ;
		background-size: 80px;
	}
	.bg-zomer { 
		background: #fee7e2; 
		background-image: url("../img/zomer.svg");
		background-repeat: no-repeat;
		background-position: 0% 50% ;
		background-size: 80px;
	}
	.bg-herfst { 
		background: #fee5cd; 
		background-image: url("../img/herfst.svg");
		background-repeat: no-repeat;
		background-position: 0% 50% ;
		background-size: 80px;
	}
	.bg-winter { 
		background: #e4f6fe; 
		background-image: url("../img/winter.svg");
		background-repeat: no-repeat;
		background-position: 0% 50% ;
		background-size: 80px;
	}
	.bg-valentijn { 
		background: #fee4ee; 
		background-image: url("../img/valentijn.svg");
		background-repeat: no-repeat;
		background-position: 0% 50% ;
		background-size: 80px;
	}
	.bg-pasen { 
		background: #fff8d9; 
		background-image: url("../img/pasen.svg");
		background-repeat: no-repeat;
		background-position: 0% 50% ;
		background-size: 80px;
	}
	.bg-moederdag { 
		background: #f6e4fb; 
		background-image: url("../img/moederdag.svg");
		background-repeat: no-repeat;
		background-position: 0% 50% ;
		background-size: 80px;
	}
	.bg-kerst { 
		background: #eeedeb; 
		background-image: url("../img/kerst.svg");
		background-repeat: no-repeat;
		background-position: 0% 50% ;
		background-size: 80px;
	}


	.max-height-250 {
		max-height: 160px;
		overflow: hidden;
		transition: 1s all;
	}
	.max-height-250.open {
		max-height: 2400px;
	}
	.toogle-open, .label-category, .assort-cat {
		cursor: pointer;
	}
	h3, h4, h5, h6, p, span, a, label, input {
		color: #375855;
		font-family:  var(--font-secondary);


	}
	h1, h2 {
		font-family: var(--font-primary);
		color: #666666;
	}
	.main-color {
		color: #818387;
	}
	ol, ul { 
		box-sizing: border-box; 
	}
	.genus_name_holder.Phalaenopsis h3 {
		color: #C165A4;
	}
	.genus_name_holder.Dracaena h3 {
		color: #6AA827;
	}
	.genus_name_holder span {
		color: #818387;
	}
	h4 { 
		font-size: var(--desktop-h4-size); 
		line-height: var(--desktop-h4-line-height); 
		font-weight: var(--desktop-h4-weight); 
	}

	h5 { 
		font-size: var(--desktop-h5-size); 
		line-height: var(--desktop-h5-line-height); 
		font-weight: var(--desktop-h5-weight); 
	}

	.bg-brand { 
		background-color: var(--main-brand); 
		color: var(--neutrals-white); 
	}

	.br-cards-top { 
		border-top-left-radius: var(--borderradius-cards); 
		border-top-right-radius: var(--borderradius-cards); 
	}

	.small-p, .pagination-item { 
		font-family: var(--paragraph-small-font-family); 
		font-size: var(--paragraph-small-size); 
		line-height: var(--paragraph-small-line-height); 
		font-weight: var(--paragraph-small-weight); 
	}

	.br-8px { 
		border-radius: 8px; 
	}

	.dimensions { 
		font-size: var(--paragraph-small-size); 
		font-weight: var(--paragraph-small-weight); 
		line-height: var(--paragraph-small-line-height); 
		font-family: var(--paragraph-small-font-family); 
		text-transform: uppercase; 
		display: flex; 
		gap: 0.5rem; 
		align-items: center; 
		padding: 0; 
		background-color: transparent; 
		border-radius: 100px; 
		color: var(--main-brand); 
	}

	.assort-cat { 
		display: flex;
		gap: 1rem;
		align-items: center;
		border: 1px solid #F2F2F2;
		justify-content: flex-end;
		padding: 0.5em 1em;
		width: fit-content;
	}
	.readmore {

	}
	.assort-cat img { 
		aspect-ratio: 9 / 6; 
		max-width: 90px; 
		object-fit: contain; 
		width: 100%; 
	}

	.img-cat { 
		position: relative; 
	}

	.floriday { 
		position: absolute; 
		background: #3758551F;
		border: 0px; 
		border-radius: 32px; 
		width: 44px; 
		height: 44px; 
		min-width: 44px; 
		display: flex; 
		justify-content: center; 
		align-items: center; 
		bottom: -1rem; 
		right: 1rem; 
		top: unset; 
		left: unset; 
	}
	.floriday img {
		height: 1.5em;
	}
	#popupModal .floriday {
		bottom: 1rem;
		right: 1rem;
	}
	.label-category { 
		font-family: var(--paragraph-small-font-family); 
		font-size: var(--paragraph-small-size); 
		line-height: var(--paragraph-small-line-height); 
		font-weight: var(--paragraph-small-weight); 
		padding: 4px 12px; 
		background: #3758553D;

		border-radius: 100px; 
		text-decoration: unset; 
		color: #375855; 
	}
	.active_filters [data-parameter="sort_by"] {
		display: none !important;
	}
	.link { 
		font-size: var(--link-size); 
		line-height: var(--link-line-height); 
		font-family: var(--link-font-family); 
		font-weight: var(--link-weight); 
		text-decoration: unset; 
		text-transform: uppercase;
	}

	.form-check { 
		padding: 0px; 
		margin-bottom: 0.5rem; 
		display: flex; 
	}

	.row-assort .product-card { 
		transition: 0.3s ease-in-out; 
		opacity: 1; 
	}

	.form-check input { 
		font-size: 24px; 
		border: 1px solid var(--neutrals-dark-grey)!important; 
		margin: unset !important; 
	}

	.toogle-open { 
		font-family: var(--link-font-family); 
		line-height: var(--link-line-height); 
		font-size: var(--link-size); 
		font-weight: var(--link-weight); 
		color: var(--main-brand); 
		display: flex; 
		align-items: center; 
		gap: 0.5rem; 
		margin-top: 1rem; 
		text-transform: uppercase;
	}

	.form-check .form-check-label { 
		padding-left: 1rem; 
		font-weight: var(--font-weight-semibold); 
		font-size: var(--paragraph-size); 
		line-height: var(--paragraph-line-height); 
		font-family: var(--paragraph-font-family); 
	}

	.pagination-item { 
		width: 32px; 
		height: 32px; 
		border-radius: 100%; 
		border: 1px solid var(--neutrals-light-grey); 
		display: flex; 
		justify-content: center; 
		align-items: center; 
		color: var(--neutrals-dark-grey); 
		text-decoration: unset; 
	}

	.pagination-item.active { 
		border: 1px solid var(--main-brand); 
		color: var(--neutrals-white); 
		background-color: var(--main-brand); 
	}

	.rotate-180 img { 
		transform: rotate(180deg); 
	}

	.container-1 { 
		width: 100%; 
		display: flex; 
		vertical-align: middle; 
		white-space: nowrap; 
		position: relative; 
		align-items: center; 
	}

	.container-1 input#search { 
		width: 100%; 
		height: 40px; 
		border-top: unset; 
		border-right: unset; 
		border-left: unset; 
		border-image: unset; 
		border: 0px !important; 
		font-size: var(--paragraph-size); 
		line-height: var(--paragraph-line-height); 
		float: left; 
		color: var(--neutrals-black); 
		padding-left: 45px; 
		border-radius: 0px; 
		background-color: #fff;
		background-image: url("../img/search.svg");
		background-repeat: no-repeat;
		background-position: 12px 50%;
		border: 1px solid #D9D9D9 !important;
        border-radius: 8px;
	}
	.container-1 input#search::placeholder {
		color: #666666;
		opacity: 1; /* Firefox */
	}

	.modal {
		--bs-modal-margin: 3.75rem;

	}

	h4 { 
		font-family: var(--mobile-h4-font-family); 
		font-size: var(--mobile-h4-size); 
		line-height: var(--mobile-h4-line-height); 
		font-weight: var(--mobile-h4-weight); 
	}
	button.close {
		width: 3em;
		height: 3em;
		background: #818387;
		border: 0;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 3;
	}
	.bg-accent-2 { 
		background-color: var(--accents-2); 
	}

	.bg-accent-2 * { 
		color: var(--neutrals-white); 
	}

	.bg-accent-1 { 
		background-color: var(--accents-1); 
	}

	.bg-accent-1 * { 
		color: var(--neutrals-white); 
	}

	a { 
		color: var(--main-brand); 
		text-decoration: none; 
	}

	.border-top { 
		border-top: 1px solid var(--neutrals-medium-grey) !important; 
	}

	.max-height-250 { 
		max-height: 160px; 
		overflow: hidden; 
		transition: 1s; 
	}

	.toogle-open, .label-category, .assort-cat { 
		cursor: pointer; 
	}
	.filter {
		margin: 0;
		display: block;
	}
	.form-check-input:checked {
		background-color: #375855;
		border-color: #375855;
	}
	.readmore:hover {
		.productimage {
			opacity: 0.8;
		}
		.underline-hover::after {
			transform: scaleX(1);
		}
		.underline-hover img {
			transform: translate(10px, 0);

		}
	}
	.underline-hover {
		margin-top: 0.5em;
		text-transform: uppercase;
		position: relative;
		cursor: pointer;
		width: 100%;
	}
	.underline-hover img {
		margin-left: 0.5em;
		transition: transform 0.3s ease;
		transform: translate(0,0px);

	}

	.underline-hover::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: -2px;              /* adjust distance from text */
		width: 100%;
		height: 3px;               /* border thickness */
		background-color: #375855;
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 0.3s ease;
	}

	

	./*modal-body {
		padding: 0;
	}*/
	.modal-backdrop {
		background-color: #000;
		opacity: .3
	}

	.modal-content {
		border-radius: 0px
	}

	.modal-header {
		border-bottom: unset
	}


	.carousel-indicators li {
		width: 8px;
		height: 8px;
		gap: 0;
		border-radius: 16px;
		background: #375855;
		margin: 0.25em;
		opacity: .3
	}

	.carousel-control-next, .carousel-control-prev {
		opacity: 1
	}

	.carousel-control-next-icon, .carousel-control-prev-icon {
		background-color: transparent;
		opacity: 1;
		border-radius: 16px;
		padding: 1em;
		background-size: 16px
	}
	.carousel-control-next-icon {
		background-image: url(../img/icon-next.svg);
	}
	.carousel-control-prev-icon {
		background-image: url(../img/icon-next.svg);
		transform: rotate(180deg);
	}
	.filters-arrow {
		background-image: url(../img/arrow_down.svg);
		background-position: 50% 50%;
		background-size: contain;
		background-repeat: no-repeat;
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		width: 20px;
		height: 20px;
		transition:transform .25s ease;

	}
	@media (max-width: 767px){

		.JS-filters.collapsed {
			max-height:128px;
			overflow:hidden;
			box-shadow: 0px 8px 8px 0px #00000014;
			border-radius:16px;
			.filters-arrow {
				transform:translateY(-50%) rotate(180deg);
			}

		}

		.JS-filters{

			padding: 1em;
			max-height:5000px;
			overflow:hidden;
			transition: all 1s ease;
			margin-bottom:1em;
			.form-check {
				width: 100%;
			}
		}


	}
	@media (max-width: 425px){

		.category-card {
			img {
				height: 48px;
			}
		}


	}
	ol.carousel-indicators {
		margin-bottom: 0
	}

	div#carouselFloriday {
		padding-bottom: 2em
	}

	.carousel-indicators li.active {
		opacity: 1
	}

	.close {
		opacity: 1
	}



	.modal-content li {
		list-style: none;
		border-bottom: 1px solid #F7EDE2
	}

	.modal-content li .label {
		width: 110px;
		display: inline-block;
		font-weight: 600
	}


	.modal-content ul {
		padding: 0
	}

	@media (max-width: 660px) {
		.assort_holders {display: block !important;}
		.assort_holders .assort-cat {
			width: 100%;
			display: flex;
			margin-bottom: 1em;
			justify-content: start;
		}
	}
}


.modal-backdrop.fade {
    opacity: 0;
}
.fade.show {
    opacity: 1;
}
.modal-backdrop.fade.show {
    opacity: .3;
}
.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000;
}
.fade {
    opacity: 0;
    transition: opacity .15s linear;
}