/* =========================================================================
   Locavigne Free Helpers – basis-CSS
   Vervangt de styling die Elementor Pro leverde (nav menu, popups, loop grid).
   ========================================================================= */

/* ------------------------------------------------------------ Site logo */
.lv-site-logo__link { display: inline-block; line-height: 0; }
.lv-site-logo__img { max-width: 100%; height: auto; }
.lv-site-logo__text { font-size: 24px; font-weight: 700; line-height: 1.2; }

/* ------------------------------------------------------------ Nav menu  */
.lv-menu { position: relative; }
.lv-menu__list {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: 28px; margin: 0; padding: 0; list-style: none;
}
.lv-menu__list li { margin: 0; padding: 0; position: relative; }
.lv-menu__list a {
	display: block; padding: 6px 0; text-decoration: none;
	font-size: 16px; line-height: 1.4; color: inherit;
	transition: color .15s ease, opacity .15s ease;
}
.lv-menu__list a:hover,
.lv-menu__list .current-menu-item > a { opacity: .7; }

/* submenu (2e niveau) */
.lv-menu__list .sub-menu {
	position: absolute; top: 100%; left: 0; z-index: 60;
	display: none; min-width: 220px; margin: 0; padding: 8px 0;
	list-style: none; background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.lv-menu__list li:hover > .sub-menu,
.lv-menu__list li:focus-within > .sub-menu { display: block; }
.lv-menu__list .sub-menu a { padding: 8px 18px; }

/* hamburger */
.lv-menu__toggle {
	display: none; background: none; border: 0; padding: 8px;
	cursor: pointer; color: inherit; line-height: 0;
}
.lv-menu__bars { display: inline-block; width: 26px; }
.lv-menu__bars span {
	display: block; height: 2px; margin: 5px 0;
	background: currentColor; border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease;
}
.lv-menu.is-open .lv-menu__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.lv-menu.is-open .lv-menu__bars span:nth-child(2) { opacity: 0; }
.lv-menu.is-open .lv-menu__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1024px) {
	.lv-menu__toggle { display: inline-block; }
	.lv-menu__panel {
		display: none; position: absolute; top: calc(100% + 10px); right: 0; z-index: 70;
		min-width: 240px; padding: 14px 20px;
		background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.15);
	}
	.lv-menu.is-open .lv-menu__panel { display: block; }
	.lv-menu__list { flex-direction: column; align-items: flex-start; gap: 4px; }
	.lv-menu__list .sub-menu {
		position: static; display: block; box-shadow: none;
		padding: 0 0 0 14px; min-width: 0;
	}
}

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap;
}

/* ------------------------------------------------------------ Modals    */
/* Vervangt Elementor Pro Popups. Elke sectie met class .lv-modal is
   standaard verborgen en wordt geopend via <a href="#lv-popup-XXXX">.      */
.lv-modal {
	display: none !important;
	position: fixed; inset: 0; z-index: 9999;
	padding: 24px;
	background: rgba(0,0,0,.6);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.lv-modal.is-open { display: block !important; }
body.lv-modal-open { overflow: hidden; }

.lv-modal > .elementor-container,
.lv-modal .elementor-container {
	margin-left: auto; margin-right: auto;
}
.lv-modal .lv-modal-box {
	background: #fff; border-radius: 4px;
	box-shadow: 0 20px 60px rgba(0,0,0,.35);
	max-width: 900px; margin: 40px auto;
}
.lv-modal__close {
	position: fixed; top: 18px; right: 24px; z-index: 10000;
	width: 44px; height: 44px; padding: 0;
	font-size: 32px; line-height: 1;
	color: #fff; background: rgba(0,0,0,.35); border: 0; border-radius: 50%;
	cursor: pointer;
}
.lv-modal__close:hover { background: rgba(0,0,0,.6); }

@media (max-width: 767px) {
	.lv-modal { padding: 0; }
	.lv-modal .lv-modal-box { margin: 60px 10px 20px; }
}

/* ------------------------------------------------------ Loop-vervangers */
/* De statisch uitgeklapte loop grids krijgen deze classes.                */
.lv-loop-item { display: flex; flex-direction: column; }
.lv-loop-row { width: 100%; }

/* ----------------------------------------------------------------------
   [lv_nieuws_grid] – dynamisch nieuwsoverzicht.
   Vormgeving overgenomen van het oude Pro loop-item: 2 kolommen, 50px
   tussenruimte, afgeronde hoeken van 5px, gelijke hoogte.
   ---------------------------------------------------------------------- */
.lv-grid { display: grid; gap: 50px; align-items: stretch; }
.lv-grid--1 { grid-template-columns: 1fr; }
.lv-grid--2 { grid-template-columns: repeat(2, 1fr); }
.lv-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 767px) {
	.lv-grid { grid-template-columns: 1fr; gap: 30px; }
}

.lv-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border-radius: 5px;
	overflow: hidden;
}
.lv-card__media { display: block; line-height: 0; }
.lv-card__media img { width: 100%; height: auto; display: block; }

.lv-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 20px;
}

/* h3 erft grootte en lettertype uit de site-typografie */
.lv-card__title { margin: 0 0 2px; }
.lv-card__title a { color: #3B0D0D; text-decoration: none; }

.lv-card__date {
	margin: -10px 0 8px;
	font-size: 14px;
	color: #8A95ADBA;
}

.lv-card__text { color: #8A95AD; }

.lv-card__more {
	display: inline-block;
	margin-top: auto;
	padding-top: 14px;
	color: #94282F;
	background: transparent;
	text-decoration: none;
	font-weight: 500;
}
.lv-card__more:hover { text-decoration: underline; }

/* De .product-cta-btn stond in Pro op "custom position: absolute".
   De kolom moet daarvoor relatief blijven – Elementor doet dat standaard,
   maar we forceren het voor de zekerheid.                                  */
.lv-loop-item > .elementor-widget-wrap,
.lv-loop-item { position: relative; }

/* ================== Hieronder: uit Elementor Pro overgenomen ============ */

.product-image div img{
    margin-bottom: 0px !important;
}

.product-cta-btn{
    bottom: 0 !important;
}

.product-cta-btn{position:absolute}

@media(max-width:767px){.product-cta-btn{bottom:0px;left:4px}}

.news-text {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 60px;
}

.mc4wp-form-2638 input[type=email] {
    width: 70% !important;
    padding: 10px;
}

.mc4wp-form-2638 input[type=submit]{
    color: #FFF !important;
    padding: 10px 15px !important;
    border-radius: 0px 25px 25px 0px;
}

.mc4wp-form-2638 input[type=submit]{
    color: #FFF !important;
    background-color: #94282F;
    padding: 10px 15px !important;
    border-radius: 0px 25px 25px 0px;
}


/* ======================================================================
   Overgenomen uit Elementor Pro > Custom Code, snippet 'CSS' (id 1985).
   Stond op locatie <head>, conditie: alle singular pagina's.
   ====================================================================== */
h1{
		font-size:54px !important;
		line-height:60px !important;
		font-weight:700 !important;
		color: #3b0d0d !important;
		font-family: Roboto !important;
	}
	
	h2{
		font-size:40px !important;
		line-height:54px !important;
		font-weight:500 !important;
		color: #3b0d0d !important;
		font-family: Roboto !important;
	}
	
	h3{
		font-size:28px !important;
		line-height:44px !important;
		font-weight:500 !important;
		color: #3b0d0d !important;
		font-family: Roboto !important;
	}
	
	h4{
		font-size:22px !important;
		line-height:100% !important;
		font-weight:500 !important;
		color: #3b0d0d !important;
		font-family: Roboto !important;
	}
	
	h5{
		
	}
	
	p{
		font-size:18px !important;
		line-height:32px !important;
		font-family: Roboto !important;
		color: #8a95ad !important;
	}
	
	text-area{
		font-size:16px !important;
		line-height:28px !important;
		font-weight:400 !important;
		font-family: Roboto !important;
		color: #8a95ad !important;
	}

/* ======================================================================
   Smaakprofiel-balkjes.
   De progression-*.svg bestanden hebben geen intrinsieke afmetingen.
   Zonder expliciete breedte rendert een SVG in een <img> op 0 pixels,
   waardoor de balk en het streepje onzichtbaar zijn.
   ====================================================================== */
img[src*="progression-"] {
	display: block !important;
	width: 100% !important;
	height: auto !important;
}

/* Terugval voor SVG's zonder viewBox: dan levert height:auto 0 op. */
@supports (aspect-ratio: 1) {
	img[src*="progression-"] { aspect-ratio: 20 / 1; }
}

.lv-loop-item .elementor-widget-image,
.lv-loop-item .elementor-image { width: 100%; }

/* ======================================================================
   Menu: rechts uitlijnen + onderstreping bij actief en hover.
   Alleen op desktop; het hamburgermenu blijft ongemoeid.
   ====================================================================== */
@media (min-width: 1025px) {

	/* Menu tegen de rechterkant, uitgelijnd met het logo */
	.lv-menu__list { justify-content: flex-end; }

	/* Ruimte onder de tekst zodat het balkje er past */
	.lv-menu__list > li > a {
		position: relative;
		padding-bottom: 8px;
	}

	/* Het balkje zelf: 2px, groeit vanuit het midden */
	.lv-menu__list > li > a::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 2px;
		background: currentColor;
		transform: scaleX(0);
		transition: transform .2s ease;
	}

	.lv-menu__list > li > a:hover::after,
	.lv-menu__list > li.current-menu-item > a::after,
	.lv-menu__list > li.current_page_item > a::after,
	.lv-menu__list > li.current-menu-ancestor > a::after,
	.lv-menu__list > li.current-menu-parent > a::after {
		transform: scaleX(1);
	}

	/* De hover-vervaging hoeft niet meer, het balkje doet het werk */
	.lv-menu__list a:hover { opacity: 1; }
}