.elementor-kit-2475{--e-global-color-primary:#809621;--e-global-color-secondary:#595759;--e-global-color-text:#000000;--e-global-color-accent:#809621;--e-global-color-dd10028:#809621;--e-global-color-47bc005:#FFFFFF;--e-global-color-e28328d:#FFFFFF;--e-global-color-1b6ed2e:#FFFFFF;--e-global-color-ace2e73:#809621;--e-global-color-4ab1e39:#FFFFFF;--e-global-typography-primary-font-size:16px;--e-global-typography-secondary-line-height:35px;--e-global-typography-text-line-height:22px;--e-global-typography-accent-font-size:14px;--e-global-typography-accent-font-weight:500;--e-global-typography-0f634df-font-size:28px;--e-global-typography-0f634df-font-weight:800;--e-global-typography-c35c8c0-font-size:24px;--e-global-typography-c35c8c0-font-weight:600;--e-global-typography-d35030c-font-size:20px;--e-global-typography-d35030c-font-weight:500;--e-global-typography-bf81e95-font-size:18px;--e-global-typography-bf81e95-font-weight:500;--e-global-typography-0e24d18-font-size:16px;--e-global-typography-0e24d18-font-weight:500;--e-global-typography-c285490-font-size:14px;--e-global-typography-c285490-text-transform:uppercase;--e-global-typography-59bfb46-font-size:50px;--e-global-typography-59bfb46-font-weight:500;--e-global-typography-9bdba0f-font-size:22px;--e-global-typography-9bdba0f-font-weight:400;}.elementor-kit-2475 button,.elementor-kit-2475 input[type="button"],.elementor-kit-2475 input[type="submit"],.elementor-kit-2475 .elementor-button{background-color:var( --e-global-color-dd10028 );font-size:var( --e-global-typography-primary-font-size );color:var( --e-global-color-47bc005 );padding:010px 30px 10px 30px;}.elementor-kit-2475 button:hover,.elementor-kit-2475 button:focus,.elementor-kit-2475 input[type="button"]:hover,.elementor-kit-2475 input[type="button"]:focus,.elementor-kit-2475 input[type="submit"]:hover,.elementor-kit-2475 input[type="submit"]:focus,.elementor-kit-2475 .elementor-button:hover,.elementor-kit-2475 .elementor-button:focus{background-color:var( --e-global-color-47bc005 );color:var( --e-global-color-primary );}.elementor-kit-2475 e-page-transition{background-color:#FFBC7D;}.elementor-kit-2475 h1{font-family:"Arial", serif, sans-serif;font-size:28px;}.elementor-kit-2475 h2{font-size:24px;font-weight:600;}.elementor-kit-2475 h3{font-size:20px;}.elementor-kit-2475 h4{font-size:14px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-2475 button,.elementor-kit-2475 input[type="button"],.elementor-kit-2475 input[type="submit"],.elementor-kit-2475 .elementor-button{font-size:var( --e-global-typography-primary-font-size );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-2475 button,.elementor-kit-2475 input[type="button"],.elementor-kit-2475 input[type="submit"],.elementor-kit-2475 .elementor-button{font-size:var( --e-global-typography-primary-font-size );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ==========================================================================
   1. GLOBAL ROOT VARIABLES
   ========================================================================== */
:root {
    --button-radius: 4px;
    --button-font-weight: 600;
    --button-fill: #FFFFFF;
    --button-color: #FFFFFF;
    --button-background-color: #809621;
    --button-padding: 10px 30px;

    /* Hover overrides */
    --button-hover-radius: var(--button-radius);
    --button-hover-font-weight: var(--button-font-weight);
    --button-hover-fill: var(--button-fill);
    --button-hover-color: var(--button-color);
    --button-hover-background-color: var(--button-background-color);
    --button-hover-padding: var(--button-padding);
    --button-hover-transform: scale(1.1);
    
    --button-transition-duration: 0.3s;
    --button-transition-property: transform;
}

#page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#page main {
    flex: 1;
}

/* ==========================================================================
   2. STANDARD BUTTON STYLES (ELEMENTOR & WOOCOMMERCE)
   ========================================================================== */
.elementor-button,
.woocommerce-button,
.order-again a {
    border-radius: var(--button-radius, 20px);
    font-weight: var(--button-font-weight);
    color: var(--button-color);
    background-color: var(--button-background-color);
    padding: var(--button-padding);
    transition-duration: var(--button-transition-duration, 0.3s);
    transition-property: var(--button-transition-property, transform);
}

.elementor-button:hover,
.woocommerce-button:hover,
.order-again a:hover {
    border-radius: var(--button-hover-radius, var(--button-radius));
    font-weight: var(--button-hover-font-weight, var(--button-font-weight));
    color: var(--button-hover-color, var(--button-color));
    background-color: var(--button-hover-background-color, var(--button-background-color));
    padding: var(--button-hover-padding, var(--button-padding));
    transform: var(--button-hover-transform, scale(1.1));
}

/* ==========================================================================
   3. WOOCOMMERCE ON SALE CORNER RIBBON
   ========================================================================== */
/* Container setup to clip the ribbon edges */
.woocommerce .lvk-product-image-container.elementor-widget-woocommerce-product-images {
    position: relative;
    overflow: hidden; 
}

/* Transforming the default WooCommerce sale badge into a diagonal corner ribbon */
.woocommerce .lvk-product-image-container .onsale {
    position: absolute;
    top: 29px;
    left: -32px;
    transform: rotate(-45deg); 
    transform-origin: center;
    
    /* Colors & Typography linked to Elementor Globals with fallbacks */
    background-color: var(--e-global-color-dd10028, #809621); 
    color: var(--e-global-color-47bc005, #FFFFFF);            
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    
    /* Ribbon dimensions */
    width: 150px;
    text-align: center;
    line-height: 28px;
    height: 28px;
    
    /* Resetting default WooCommerce oval shapes and padding */
    border-radius: 0;
    min-height: auto;
    min-width: auto;
    padding: 0;
    margin: 0;
    z-index: 9; /* Keeps ribbon above images and PhotoSwipe triggers */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   4. THUMBNAIL SLIDER WRAPPER & CONTAINER
   ========================================================================== */
/* Main wrapper holding the slider container and navigation elements */
.lvk-product-image-container .thumb-slider-wrapper {
    position: relative;
    width: 100%;
    margin-top: var(--kit-widget-spacing, 15px);
    display: block;
    clear: both;
}

/* Converting the original WooCommerce OL into a horizontal scroll-snap container */
.lvk-product-image-container .thumb-slider-wrapper ol.flex-control-thumbs {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* Vloeiende swipe op iOS/Android */
    scroll-snap-type: x mandatory;
    scrollbar-width: none; /* Hides scrollbar on Firefox */
    gap: 10px;
    padding: 5px 0;
    margin: 0;
    list-style: none;
    width: 100%;
}

/* Hides scrollbar for Chrome, Safari, and newer Edge browsers */
.lvk-product-image-container .thumb-slider-wrapper ol.flex-control-thumbs::-webkit-scrollbar {
    display: none;
}

/* Slider item settings (forcing alignment and size) */
.lvk-product-image-container .thumb-slider-wrapper ol.flex-control-thumbs li {
    flex: 0 0 auto;
    width: 80px; 
    scroll-snap-align: start;
    margin: 0;
}

.lvk-product-image-container .thumb-slider-wrapper ol.flex-control-thumbs li img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* ==========================================================================
   5. SLIDER NAVIGATION BUTTONS & HOVER ZONES
   ========================================================================== */
/* Navigation arrows styling */
.lvk-product-image-container .thumb-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--e-global-color-47bc005, #FFFFFF); 
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    cursor: pointer;
    z-index: 7; /* Placed above the hover zones */
    display: none; /* Managed dynamically by JavaScript if overflow is present */
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transition: background 0.2s, opacity 0.2s, color 0.2s, border-color 0.2s;
    padding: 0;
    font-size: var(--e-global-typography-accent-font-size, 14px);
    color: var(--e-global-color-secondary, #595759); 
}

/* Hover styles matching global button behaviors */
.lvk-product-image-container .thumb-nav-btn:hover {
    background: var(--e-global-color-dd10028, #809621); 
    color: var(--e-global-color-47bc005, #FFFFFF);
    border-color: var(--e-global-color-dd10028, #809621);
    transform: translateY(-50%) var(--button-hover-transform, scale(1.1));
}

/* Positioning individual direction buttons */
.lvk-product-image-container .thumb-nav-btn.prev { left: -10px; }
.lvk-product-image-container .thumb-nav-btn.next { right: -10px; }

/* Desktop edge hover-zones for automated smooth scrolling */
.lvk-product-image-container .scroll-hover-zone {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 25px;
    z-index: 6;
    pointer-events: all;
}
.lvk-product-image-container .scroll-hover-zone.left { left: 0; }
.lvk-product-image-container .scroll-hover-zone.right { right: 0; }

/* ==========================================================================
   6. SITE LOGO CENTERING (COMPACT METHOD)
   ========================================================================== */
/* Transform the anchor link into a flex container to center the logo image */
.lvk-header-logo {
    display: flex;
    justify-content: center; /* Horizontally center the logo */
    align-items: center;     /* Vertically center the logo */
    width: 100%;
    height: 100%;            /* Uses the full correct dimensions of the anchor */
}


.lvk-header-logo a {
    display: block;
    max-width: 100%;
    height: auto;
}
/* ==========================================================================
   7. USP
   ========================================================================== */

.usp-bar-container {
    /* Je originele styling */
}

.usp-bar-inner {
	max-width: 1140px;
	margin: 0 auto;
	padding: 10px 20px;
}

.usp-slider {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	width: 100%;
	list-style: none;
	margin: 0;
	padding: 0;
}

.usp-item {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #000;
	font-size: var(--e-global-typography-accent-font-size);
	font-weight: var(--e-global-typography-accent-font-weight);
	white-space: nowrap;
}

/* Verberg clones STANDAARD (op desktop dus) */
.usp-clone {
	display: none; /* !important verwijderd zodat we dit hieronder kunnen overschrijven */
}

.usp-icon {
	font-size: 18px;
	display: inline-flex;
	align-items: center;
}

/* GECOMBINEERDE MEDIA QUERY VOOR MOBIEL + TABLET (Basis slider functionaliteit) */
@media(max-width: 1024px) {
	.usp-bar-container {
		position: relative;
	}

	.usp-bar-inner {
		padding: 10px 0;
		overflow: hidden;
	}

	.usp-slider {
		justify-content: flex-start;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.usp-slider::-webkit-scrollbar {
		display: none;
	}

	/* Zorg dat zowel items als clones getoond worden op mobiel/tablet */
	.usp-item,
	.usp-clone {
		display: flex !important;
		scroll-snap-align: center;
		justify-content: center;
		text-align: center;
	}
}

/* SPECIFIEK VOOR MOBIEL (Tot 600px): 1 item tegelijk */
@media(max-width: 600px) {
	.usp-item,
	.usp-clone {
		flex: 0 0 100%;
	}
}

/* SPECIFIEK VOOR TABLET (601px tot 1024px): 2 items tegelijk */
@media(min-width: 601px) and (max-width: 1024px) {
	.usp-item,
	.usp-clone {
		flex: 0 0 50%;
	}
}

@media(max-width:767px) {
	body {
		overflow-x: hidden
	}
}/* End custom CSS */