/* ============================================
		TOP
=============================================*/



/* ============================================
		NAVIGATIE
=============================================*/
.container-fluid.navigatie { background-color: var(--white); backdrop-filter:unset; box-shadow: 0px 4px 4px 0px #0000000D; position: sticky; }
.container-fluid.navigatie .navbar-nav .nav-item .nav-link { color: var(--primary-color); }
.container-fluid.navigatie .navbar-nav .nav-item .nav-link img { filter: var(--filter-primary); }

.container-fluid.navigatie.sticky { background-color: var(--white); }

/* ============================================
		SLIDER/BANNER
=============================================*/

.block.breadcrumb ul { display: flex; flex-direction: row; margin: 0; padding: 0; }
.block.breadcrumb ul li::before { display: none; }
.block.breadcrumb ul li a { color: var(--secondary-color); text-decoration: none; font-weight: 400; }
.block.breadcrumb ul li:last-child a{ color: var(--primary-color); }

/* ============================================
		CONTENT
=============================================*/
h2 { font-size: 1.9rem; font-weight: 700; margin: 10px 0 30px 0; }
.header-big h2 { font-size: 3.1rem; font-weight: 400; }
.mt-min-5 { margin-top: -3rem; }
.kader.white { padding: 30px 50px; }
.ellipse { position: relative; padding-top: 5rem; }
.ellipse::before { content: ''; width: 110%; height: 350px; background-color: var(--primary-color-light) !important; border-radius: 0 0 75% 75%; margin-left: -5%; position: absolute; top: 0; z-index: -1; }

.block.product.cards.row { row-gap: 30px; }

.container-fluid.content > .row:first-child { background-color: var(--primary-color-light) !important; position: relative; }
.container-fluid.content > .row:first-child::before { content: ''; width: 110%; height: 350px; background-color: var(--primary-color-light) !important; border-radius: 0 0 75% 75%; margin-left: -5%; padding-bottom: 5rem; position: absolute; bottom: -200%; z-index: -1; }

.container-fluid.content > .row.bg-light:first-child::before { display: none; }

/* pagina's: Contact */
.col-xl-4.kader.white + .col-xl-8.kader.white { width: calc(66.66667% - 30px); margin-left: 30px; }
.col-lg-6.kader.white + .col-lg-6.kader.white { width: calc(50% - 30px); margin-left: 30px; }

/* Planten pagina's */
.block.product.plants .item .content .label { background-color: var(--text-color); font-family: "Sedgwick Ave", cursive; color: var(--white); font-size: 1.2rem; position: absolute; top: 0; right: 30px; padding: 10px; display: flex; justify-content: center; align-items: center; border-radius: 100%; aspect-ratio: 1; transform: translateY(-75%) rotate(-5deg);  }

/* Doorklik plantensoorten */
body:has(.block.product.plants .listitem) h2 { font-size: 3.1rem; font-weight: 400; }
.block.product.plants .listitem h3 { font-weight: 700; color: var(--primary-color); }
.block.product.plants .listitem .swiper-wrapper { padding: 0; }
.block.product.plants .listitem .kader.white { max-width: calc(50% - 30px); margin-left: 30px; }
.block.product.plants .listitem table { width: 100%; border-collapse: collapse; margin-top: 30px; }
.block.product.plants .listitem table tr { border-top: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD;}
.block.product.plants .listitem table th { width: 40%; padding: 10px 0; text-align: left; font-size: 1rem; font-weight: 400; }
.block.product.plants .listitem table td { width: 50%; padding: 10px 0; text-align: left; font-size: 1rem; font-weight: 600; }
.block.product.plants .listitem table td p:last-child { margin-bottom: 0; }
.block.product.plants .listitem .kader.white .btn { margin-top: 30px; justify-content: space-between; }
.block.product.plants .listitem .description { column-count: 2; margin-top: 15px; }

/* Nieuws */
.block.html.mixitup-filters { text-align: end; margin-bottom: 15px; }
.block.html.mixitup-filters button { padding: 15px 30px; border-color: var(--text-color); }
.block.html.mixitup-filters button::after { display: none; }
.block.html.mixitup-filters button:hover { border-color: var(--text-color);     box-shadow: 0 0 40px 40px var(--text-color) inset; }
.block.html.mixitup-filters button.mixitup-control-active { background-color: var(--secondary-color); color: var(--white) !important; border-color: var(--secondary-color); }
.block.html.mixitup-filters button.mixitup-control-active:hover { border-color: var(--text-color); }

.block.html.mixitup-filters .mobile-filters .custom-dropdown { position: relative;}
.block.html.mixitup-filters .mobile-filters .custom-dropdown .selected-option { width:  100%; padding: 10px 40px 10px 20px; color: var(--white); font-weight: 600; border: 2px solid var(--text-color); background-color: var(--text-color); cursor: pointer; display: block; text-align: left; position: relative; border-radius: var(--border-radius); }
.block.html.mixitup-filters .mobile-filters .custom-dropdown .selected-option::after { content: " \f078"; font-family: var(--font-awesome); font-size: 1rem; margin-left: 10px; position: absolute; right: 15px; transition: transform 0.5s ease-in-out; }
.block.html.mixitup-filters .mobile-filters .custom-dropdown .selected-option:hover { background-color: var(--secondary-color); color: var(--white); border-color: var(--secondary-color); }

.block.html.mixitup-filters .mobile-filters .custom-dropdown.open .selected-option { border-bottom-left-radius: 0; border-bottom-right-radius: 0;  }
.block.html.mixitup-filters .mobile-filters .custom-dropdown.open .selected-option::after { transform: rotate(180deg); }
.block.html.mixitup-filters .mobile-filters .custom-dropdown .dropdown-options { display: none; position: absolute; top: 100%; left: 0; z-index: 1; background-color: var(--white); padding: 0; margin: 0; list-style: none; border-bottom-left-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); overflow: hidden; width: 100%; }

.block.html.mixitup-filters .mobile-filters .custom-dropdown.open .dropdown-options { display: block; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
.block.html.mixitup-filters .mobile-filters .custom-dropdown .dropdown-options .mixitup-control-active { background-color: var(--text-color); color: #fff; }
.block.html.mixitup-filters .mobile-filters .custom-dropdown .dropdown-options li { padding: 10px 40px 10px 20px; margin: 0; font-size: 1rem; color: var(--text-color); font-weight: 600; cursor: pointer; text-align: left; white-space: nowrap; }
.block.html.mixitup-filters .mobile-filters .custom-dropdown .dropdown-options li::before { display: none; }
.block.html.mixitup-filters .mobile-filters .custom-dropdown .dropdown-options li:hover { background-color: var(--primary-color); color: #ffffff; }


/* Contactpagina */
.block.html.contact-info .btn.btn-primary { padding: 15px 30px; gap: 15px; margin-top: 0; }
.block.html.contact-info .btn.btn-primary:last-child { margin-top: 0; }
.block.html.contact-info .btn.btn-primary::after { display: none; }
.block.html.contact-info .btn.btn-primary.tel { margin-top: 15px; }
.block.html.contact-info .btn.btn-primary.tel::before { content: "\f095"; font-family: var(--font-awesome); display: inline-block; font-weight: 300; }
.block.html.contact-info .btn.btn-primary.mail::before { content: "\f0e0"; font-family: var(--font-awesome); display: inline-block; font-weight: 300; }

.kader.white:has(form) { padding: 30px 150px 50px 50px; }
.block.form form { display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 30px; margin-top: 30px; }
.block.form form > * { width: 100%; }
.block.form form .form-group.col-lg-6 { width: calc(50% - 15px); }
.block.form form input:not(.btn) { border: 1px solid #235195; border-radius: 30px; font-family: 'Roboto Slab', sans-serif; font-size: 1rem; color: var(--text-color); padding: 10px 20px; margin-bottom: 15px; }
.block.form form input::placeholder {  color: var(--text-color); opacity: 1; }
.block.form form textarea { border: 1px solid #235195; border-radius: 30px; font-family: 'Roboto Slab', sans-serif; font-size: 1rem; color: var(--text-color); padding: 10px 20px; margin-bottom: 15px; }
.block.form form textarea::placeholder {  color: var(--text-color); opacity: 1; }
div:has(> input.btn.btn-default) { position: relative; margin-top: 15px; }
div:has(> input.btn.btn-default)::after { content: ''; background: url('/media/2025-08/pijltje.svg'); background-size: contain; width: 31px; height: 31px; position: absolute; right: 40px; top: 0; bottom: 0; margin: auto; filter: var(--filter-white); transition: right 0.5s ease-in-out; }
div:has(> input.btn.btn-default:hover)::after { filter: var(--filter-secondary); right: 30px; }

/* Sitemap */
.block.sitemap .sitemap_ul { padding-left: 2rem; }
.block.sitemap .sitemap_ul .sitemap_li { display: list-item; margin-bottom: 5px; }
.block.sitemap .sitemap_ul .sitemap_li:before { background: unset; content: "\f105"; filter: unset; left: -2rem; }
.block.sitemap .sitemap_ul .sitemap_li a:hover { color: var(--secondary-color); }
/* ============================================
		FOOTER & ENDPAGE
=============================================*/



/* ============================================
		MOBIEL
=============================================*/
.container-fluid.navigatie .navbar-toggler { color: var(--text-color); }

/* --------------------------------------- */
@media only screen and (max-width: 1399px) {

.kader.white { padding: 30px 40px; };
}

/* --------------------------------------- */
@media only screen and (max-width: 1199px) {
.col-lg-6.kader.white + .col-lg-6.kader.white { padding: 30px 45px; }
.block.form form { column-gap: 16px; }
.block.form form .form-group.col-lg-6 { width: calc(50% - 8px); }

}

/* --------------------------------------- */
@media only screen and (max-width: 991px) {
	.container-fluid.content > .row:first-child::before { width: 150%; margin-left: -25%; bottom: -250%; }

.block.product.plants .listitem .kader.white { max-width: calc(100% - 24px); margin: 15px auto auto; }
.block.product.news .listitem .kader.white { max-width: calc(100% - 24px); margin: auto auto 15px; }

.webpage-col + .webpage-col { margin-top: 30px; }
.webpage-col + .webpage-col.kader.white { margin-top: 30px; }
.webpage-col.kader.white { max-width: calc(100% - 24px); margin: 15px auto auto; }

.block.product.cards.news > article:nth-child(n+3) { display: block; }

body:has(.block.product.plants .listitem) .block.content.w-50 { width: 100% !important; }

.col-lg-6.kader.white + .col-lg-6.kader.white { width: 100%; margin-left: auto; margin-top: 30px; }

}

/* --------------------------------------- */
@media only screen and (max-width: 767px) {
.header-big h2 { font-size: 2.6rem; }
body:has(.block.product.plants .listitem) h2 { font-size: 2.6rem; }

.block.product.plants .listitem .description { column-count: 1; }
}

/* --------------------------------------- */
@media only screen and (max-width: 575px) {
	h1 { font-size: 2.5rem; }
	h2 { font-size: 1.6rem; }
	body:has(.block.product.plants .listitem) h2 { font-size: 2.1rem; }
	h3 { margin-top: 0; }
	.header-big h2 { font-size: 2rem; }

.ellipse { padding-top: 2.5rem; }
.ellipse::before { width: 200%; margin-left: -50%; }

.block.breadcrumb ul { flex-wrap: wrap; }
.block.breadcrumb ul li { margin-bottom: 5px; font-size: 0.9rem; }



}

/* --------------------------------------- */
@media only screen and (max-width: 479px) {
.block.html.mixitup-filters button { background-color: var(--primary-color); color: var(--white) !important; }
.block.html.mixitup-filters button.mixitup-control-active { background-color: var(--secondary-color); border-color: var(--secondary-color); box-shadow: 0 0 40px 40px var(--secondary-color) inset; }
.block.html.mixitup-filters button.mixitup-control-active:hover { border-color: var(--secondary-color); background-color: var(--secondary-color); box-shadow: 0 0 40px 40px var(--secondary-color) inset; }

.kader.white { padding: 30px; }
.col-lg-6.kader.white + .col-lg-6.kader.white { padding: 30px; }
.block.html.contact-info .btn.btn-primary { justify-content: flex-start; }
.block.form form .form-group.col-lg-6 { width: 100%;}

}