/*
Theme Name: Endeavour Platforms
Theme URI: https://endeavour.nl/
Description: This is the custom theme for Endeavour Platforms, don't change this!
Author: Endeavour Platforms
Author URI: https://endeavour.nl/
Template: hello-elementor
Version: 1.0.3
Text Domain: endeavour-platforms
*/

html {
  scroll-padding-top: 130px;
}

body.product-template-default .mobile-carousel .swiper-wrapper * {
    aspect-ratio: 1 / 1 !important;
    max-width: calc(100vw - 48px);
    object-fit: cover !important;
}

/* Design check CSS, ooit nog omzetten naar scss */

html .elementor-button,
.elementor-widget-button a:before, 
.elementor-widget-button:not(.elementor-button-textual_button) a:before, 
.elementor-widget-button .elementor-share-btn span.elementor-share-btn__icon:before{
	transition-duration: 100ms !important;
}

header nav.elementor-nav-menu--main .elementor-nav-menu .menu-item a.elementor-item-active:before, 
header nav.elementor-nav-menu--main .sub-menu .menu-item a.elementor-item-active:before,
header nav.elementor-nav-menu--main .elementor-nav-menu .menu-item a:before, 
header nav.elementor-nav-menu--main .sub-menu .menu-item a:before{
	background-color: rgba(255, 255, 255, 0.04) !important;
    border-radius: 24px !important;
}

html body .elementor-widget-button.elementor-button-secondary_button a:hover:before {
    border-radius: var(--Components-Component-Corners, 24px);
    background-color: rgba(0, 0, 0, 0.08) !important;
}

html body .elementor-widget-button.elementor-button-secondary_button a:focus:before {
	background-color: rgba(0, 0, 0, 0.16) !important;
}
html body .elementor-element input:not([type=button]):not([type=submit]):not([type=checkbox]):not([type=radio]), 
html body .elementor-element textarea, 
html body .elementor-element select, 
html body .elementor-element select[multiple],
html body .elementor-element input[type=checkbox], 
html body .elementor-element input[type=radio]{
	border-color: #555 !important;
}

a.go-back-link span.go-back-icon i {
    font-size: 20px;
    line-height: 20px !important;
    height: 20px;
    display: block;
}

/* Voeg 'body' of de specifieke ID toe voor meer 'gewicht' */
html body main form .gform_footer input[type="submit"]:focus-visible, 
html body main form .gform_footer button:focus-visible{
    box-shadow: 0 0 0 2px var(--e-global-color-b82edec) !important;
    outline: none !important; /* Verberg de standaard browser outline */
}

/* --------------------- */

#input_3_9:has(option[value=""]:checked) {
    color: var(--e-global-color-198af38) !important;
}

html body main,
html body div[data-elementor-type="archive"]{
    overflow: hidden;
}

html body main div[data-elementor-type="wp-page"] > div:nth-of-type(1) {
    @media only screen and (max-width: 479px) {
        /*padding-top: 64px;*/
    }
}

.type-product .artiest-veld {
    display: none;
}

/* ------------------------------------
-------------Footer-----------------
-------------------------------------*/
.newsletter-form,
.newsletter-form .gform_fields {
    display: flex !important;
}

.newsletter-form .gform_fields .gfield {
    align-content: center;
    align-items:   center;
}

.newsletter-form .gform_fields input,
.newsletter-form .gform_fields button {
    height: 48px;
}

/* ------------------------------------
-------------Gradient elements-----------------
-------------------------------------*/
html body div.gradient-blok-paars,
footer.elementor-location-footer > div > .e-con-inner > .elementor-element {
    overflow: hidden;
}

html body main *,
html body div.gradient-blok-paars *,
html body div.gradient-blok-oranje *,
html body div.blue-cta > .e-con:nth-of-type(1) *,
html body div.blue-cta > .e-con:nth-of-type(2) *,
footer.elementor-location-footer > div > .e-con-inner > .elementor-element * {
    z-index: 1;
}

html body main:before,
html body main:after,
html body div.gradient-blok-paars:before,
html body div.gradient-blok-paars:after,
html body div.gradient-blok-oranje:before,
html body div.gradient-blok-oranje:after,
html body div.blue-cta > .e-con:nth-of-type(1):before,
html body div.blue-cta > .e-con:nth-of-type(1):after,
html body div.blue-cta > .e-con:nth-of-type(2):before,
html body div.blue-cta > .e-con:nth-of-type(2):after,
footer.elementor-location-footer > div > .e-con-inner > .elementor-element:before,
footer.elementor-location-footer > div > .e-con-inner > .elementor-element:after {
    content:        "";
    position:       absolute;
    width:          1024px;
    height:         1024px;
    max-width:      100vw;
    display:        block;
    left:           -48px;
    top:            -768px;
    border-radius:  1024px;
    background:     #994000;
    filter:         blur(64px);
    opacity:        .1;
    pointer-events: none;
    z-index:        0;
    @media only screen and (max-width: 479px) {
        left: 0;
    }
}

html body div.blue-cta {
    position: relative;
}

html body div.blue-cta > .e-con:nth-of-type(1):before {
    width:         512px;
    height:        512px;
    flex-shrink:   0;
    border-radius: 512px;
    background:    #00802B;
    filter:        blur(64px);
    left:          -128px;
    top:           -256px;
    @media only screen and (max-width: 479px) {
        position: absolute;
        right:    -85px;
        top:      -128px;
        width:    256px;
        height:   256px;
    }
}

html body div.blue-cta > .e-con:nth-of-type(1):after {
    width:         512px;
    height:        512px;
    flex-shrink:   0;
    border-radius: 512px;
    background:    #0101FF;
    filter:        blur(64px);
    left:          128px;
    top:           -256px;
    @media only screen and (max-width: 479px) {
        position: absolute;
        right:    -57px;
        top:      -160px;
        left:     unset;
        bottom:   unset;
        width:    256px;
        height:   256px;
    }
}

html body div.blue-cta > .e-con:nth-of-type(2):before {
    width:         256px;
    height:        256px;
    flex-shrink:   0;
    border-radius: 512px;
    background:    #00802B;
    filter:        blur(64px);
    right:         192px;
    bottom:        -192px;
    left:          unset;
    top:           unset;
    @media only screen and (max-width: 479px) {
        display: none;
    }
}

html body div.blue-cta > .e-con:nth-of-type(2):after {
    width:         256px;
    height:        256px;
    flex-shrink:   0;
    border-radius: 512px;
    background:    #0101FF;
    filter:        blur(64px);
    right:         0;
    bottom:        -128px;
    left:          unset;
    top:           unset;
    @media only screen and (max-width: 479px) {
        display: none;
    }
}

html body div.gradient-blok-oranje:before {
    width:      512px;
    height:     512px;
    background: #994000;
    right:      -128px;
    top:        -256px;
    left:       unset;
    bottom:     unset;
    opacity:    .2;
}

html body div.gradient-blok-oranje:after {
    width:      512px;
    height:     512px;
    background: #806000;
    right:      128px;
    top:        -320px;
    left:       unset;
    bottom:     unset;
    opacity:    .2;
}

footer.elementor-location-footer > div > .e-con-inner > .elementor-element:after {
    right:      -48px;
    top:        -768px;
    left:       unset;
    background: #806000;
    @media only screen and (max-width: 479px) {
        right: 0;
    }
}

html body div.gradient-blok-paars:before,
html body div.gradient-blok-paars:after {
    width:  512px;
    height: 512px;
}

html body div.gradient-blok-paars:before {
    background: #50F;
    left:       128px;
    top:        -320px;
    @media only screen and (max-width: 479px) {
        left: 0;
    }
}

html body div.gradient-blok-paars:after {
    background: #801500;
    left:       -128px;
    top:        -256px;
    @media only screen and (max-width: 479px) {
        left: 0;
    }
}

html body main:before {
    right:      0px;
    top:        -768px;
    background: #50F;
    left:       unset;
    bottom:     unset;
    @media only screen and (max-width: 479px) {
        right: 0;
    }
}

html body main:after {
    left:       -48px;
    top:        -768px;
    background: #801500;
    @media only screen and (max-width: 479px) {
        left: 0;
    }
}


/* ------------------------------------
-------------Overlays-----------------
-------------------------------------*/
.video-overlay:before {
    content:    "";
    width:      100%;
    height:     100%;
    position:   absolute;
    left:       0;
    top:        0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.60) 100%);
    z-index:    99999;
}


/* ------------------------------------
-------------Border images / videos-----------------
-------------------------------------*/
.decorative-border .custom-devorative-border{
	position: relative;
}

.elementor-widget-video:after,
.decorative-border:not(.image-with-caption):after,
.decorative-border .custom-devorative-border:after {
    content:          "";
    width:            calc(100% - 16px);
    height:           calc(100% - 16px);
    border:           1px solid rgba(255, 255, 255, 0.16);
    position:         absolute;
    left:             8px;
    top:              8px;
    border-radius:    8px;
    transition:       ease-in-out .1s all;
    background-color: transparent !important;
    pointer-events:   none;
    @media only screen and (max-width: 479px) {
        width:  calc(100% - 8px);
        height: calc(100% - 8px);
        left:   4px;
        top:    4px;
    }
}
	


.yellow-border-image .elementor-widget-image:before {
    content:        "";
    height:         100%;
    width:          100%;
    position:       absolute;
    top:            0;
    left:           0;
    border:         2px solid var(--e-global-color-primary);
    border-radius:  16px;
    opacity:        0;
    pointer-events: none;
    transition:     ease-in-out .1s all;
}

.yellow-border-image:hover .elementor-widget-image:before {
    opacity: 1;
}

.elementor-widget-image:after {
    border-radius: 8px;
}

/* .image-with-caption.elementor-widget-image:after {
    height: calc(100% - 50px);
} */


.hover-decorative-border:hover:after {
    border: 1px solid rgba(255, 255, 255, 0.4);
	background-color: rgba(255, 255, 255, 0.04) !important;
}


/* ------------------------------------
------------- Masonry grid-----------------
-------------------------------------*/
.masonry-grid .e-loop-item:nth-of-type(1) {
    grid-row:   span 2;
    max-height: 800px;
}

.masonry-grid div.e-loop-item:nth-of-type(2),
.masonry-grid div.e-loop-item:nth-of-type(2) .decorative-border,
.masonry-grid div.e-loop-item:nth-of-type(3),
.masonry-grid div.e-loop-item:nth-of-type(3) .decorative-border {
    max-height: calc(400px - 16px) !important;
}

.masonry-grid .e-loop-item:nth-of-type(1) > div {
    min-height: -webkit-fill-available;
}

@media only screen and (max-width: 479px) {
    .masonry-grid .e-loop-item:nth-of-type(1) > div {
        min-height: 400px;
    }
}

/* ------------------------------------
-------------Mosaic grid-----------------
-------------------------------------*/
.mosaic-gallery > div:nth-of-type(1) {
    grid-row: span 2;
}

.mosaic-gallery > div:nth-of-type(1) > img {
    min-height: -webkit-fill-available;
}


/* ------------------------------------
-------------Form-----------------
-------------------------------------*/
.datepicker {
    width: 100%;
}

img.ui-datepicker-trigger {
    position: absolute;
    right:    20px;
}

html body .elementor-element .gfield_consent_label {
    font-family: var(--e-global-typography-a9592fe-font-family), Sans-serif;
    font-size: var(--e-global-typography-a9592fe-font-size);
    font-weight: var(--e-global-typography-a9592fe-font-weight);
    line-height: var(--e-global-typography-a9592fe-line-height);
}
/* ------------------------------------
-------------Darken layer-----------------
-------------------------------------*/
.darken-bottom-layer:before {
    content:       "";
    position:      absolute;
    bottom:        0;
    top:           unset;
    left:          0;
    width:         100%;
    height:        128px;
    background:    var(linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.60) 100%));
    border-radius: 0;
}

/* ------------------------------------
-------------Dropdown WPGB -----------------
-------------------------------------*/
span.wpgb-select-controls {
    justify-content: center;
    width:           40px;
    margin-right:    8px !important;
}


span.wpgb-select-controls:before {
    content:                "\7a";
    font-family:            "ewp" !important;
    font-style:             normal !important;
    font-weight:            normal !important;
    font-variant:           normal !important;
    text-transform:         none !important;
    speak:                  none;
    line-height:            1;
    -webkit-font-smoothing: antialiased;
    justify-content:        center;
    font-size:              20px;
    color:                  #fff;
}

span.wpgb-select-controls svg {
    display: none;
}


/* ------------------------------------
-------------Cat swiper-----------------
-------------------------------------*/
/* Container settings */
.my-custom-swiper {
    width:    100%;
    overflow: visible;
    padding:  20px 0; /* Ruimte voor schaduw eventueel */
}

.my-custom-swiper.all-visible .swiper-wrapper {
    justify-content: center;
}


/* De specifieke eis: 194px breedte */
.swiper-slide.custom-cat-slide {
    width:          194px !important; /* Forceer de breedte */
    height:         auto;
    display:        flex;
    flex-direction: column;
    @media only screen and (max-width: 479px) {
        width: 128px !important;
    }
}

/* Styling van de kaartjes */
.cat-link {
    text-decoration: none !important;
    text-align:      center;
    display:         block;
    border-radius:   8px;
    overflow:        hidden;
    transition:      transform 0.1s;
}

/*.cat-link:hover {*/
/*    transform: translateY(-5px);*/
/*}*/
.cat-image-holder {
    padding:       16px;
    border:        1px solid var(--e-global-color-03ba8b4);
    border-color:  var(--e-global-color-03ba8b4);
    border-radius: 24px 24px 24px 24px;
    height:        194px;
    transition:    ease-in-out .1s all;
    @media only screen and (max-width: 479px) {
        height: 128px;
        width:  128px;
    }
}

.custom-cat-slide .cat-image-holder:hover,
.wpgb-custom-facet-remote .cat-image-holder:hover {
    border-color: var(--e-global-color-primary);
}

.wpgb-custom-facet-remote .is-active .cat-image-holder {
    border-width: 2px;
    border-color: var(--e-global-color-primary);
}

.cat-image {
    width:               100%;
    background-size:     cover;
    background-position: center;
    height:              100%;
}

.cat-title {
    text-align:      center;
    text-decoration: none;
}

/* --- Styling voor de navigatie onderaan --- */
.swiper-nav-wrapper {
    display:         flex;
    justify-content: center; /* Centreert de pijlen */
    align-items:     center;
    gap:             30px; /* Ruimte tussen de twee pijlen */
    position:        relative;
    z-index:         10;
}

.swiper-nav-wrapper .custom-nav-btn:after {
    display: none !important;
}

.swiper-nav-wrapper .custom-nav-btn i {
    color:       #fff;
    line-height: 1;
    transform:   translateY(1px);
}


/* Overschrijf Elementor/Swiper standaard absolute positioning */
.custom-nav-btn {
    position:      static !important; /* Belangrijk: haalt ze uit de absolute positie */
    margin:        0 !important;
    width:         48px;
    height:        48px;
    /*background-color: #f1f1f1; !* Achtergrondkleur cirkel *!*/
    color:         #333; /* Kleur van de pijl */
    transition:    all 0.1s ease;

    border-style:  solid;
    border-width:  1px 1px 1px 1px;
    /*border-color: var(--e-global-color-03ba8b4);*/
    border-radius: 100px 100px 100px 100px;
    padding:       10px 10px 10px 10px;
}


/* ------------------------------------
-------------Bread crumbs-----------------
-------------------------------------*/
.custom-breadcrumbs {
    display:        flex;
    flex-direction: row;
    align-items:    center;
}

.custom-breadcrumbs i {
    font-size:   24px;
    line-height: 1;
    color:       var(--e-global-color-198af38);
}

.custom-breadcrumbs span, .custom-breadcrumbs a {
    font-family:     var(--e-global-typography-70018f7-font-family), Sans-serif;
    font-size:       var(--e-global-typography-70018f7-font-size);
    font-weight:     var(--e-global-typography-70018f7-font-weight);
    text-decoration: var(--e-global-typography-70018f7-text-decoration);
    line-height:     var(--e-global-typography-70018f7-line-height);
    color:           var(--e-global-color-198af38);
}


/* ------------------------------------
-------------Producten taxonomieen detail-----------------
-------------------------------------*/
.uitvoering-wrapper,
.kleur-wrapper {
    display:        flex;
    flex-direction: row;
    align-items:    center;
    flex-wrap:      wrap;
    gap:            8px;
}

.uitvoering-wrapper span {
    font-size:       var(--e-global-typography-11364fc-font-size);
    font-weight:     var(--e-global-typography-11364fc-font-weight);
    text-decoration: var(--e-global-typography-11364fc-text-decoration);
    line-height:     var(--e-global-typography-11364fc-line-height);
    padding:         12px 16px;
    border:          1px solid var(--e-global-color-03ba8b4);
    border-radius:   24px;
}

.kleur-wrapper > span.kleur-label {
    padding:       11px;
    border-radius: 100%;
    border:        1px solid var(--e-global-color-03ba8b4);
}

.kleur-wrapper span.color-dot {
    display:       block;
    height:        24px;
    width:         24px;
    border-radius: 100%;
}


.mobile-carousel span.swiper-pagination-bullet.swiper-pagination-bullet-active {
    color:      red;
    background: red;
}


/* ------------------------------------
-------------Swiper product detail-----------------
-------------------------------------*/
@media only screen and (max-width: 479px) {
    .mobile-carousel .swiper-wrapper {
        padding-left: 24px;
    }
}

.mobile-carousel .custom-swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal {
    display:         flex;
    justify-content: center;
    max-width:       calc(100vw - 48px);
}

.mobile-carousel .elementor-widget-image {
    max-width: calc(100vw - 48px);
}

.mobile-carousel span.swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: var(--e-global-color-primary);
}

.mobile-carousel span.swiper-pagination-bullet {
    background: var(--e-global-color-03ba8b4);
}


html body .elementor-element input:not([type=button]):not([type=submit]):not([type=checkbox]):not([type=radio]), html body .elementor-element textarea, html body .elementor-element select, html body .elementor-element select[multiple] {
    color: #fff !important;
}

/* ------------------------------------
-------------Fullwidth images-----------------
-------------------------------------*/
.image-fullwidth.elementor-widget-image {
    max-width: calc(100vw - 64px) !important;
    width:     100vw !important;
}

.image-fullwidth.elementor-widget-image img {
    max-width: 100% !important;
    min-width: 100% !important;
    width:     100% !important;
}


/* ------------------------------------
-------------Lees meer functie-----------------
-------------------------------------*/
.read-more i {
    line-height: 12px;
}

/* Spec table */
.spec-container{
    border-top: 1px solid var(--e-global-color-accent);	
}
.spec-container .spec-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: ;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    padding: 16px 0;
    border-bottom: 1px solid var(--e-global-color-accent);
}


.slide-menu-wrapper ul li a{
	color: #fff !important;
}

html body:not(.off-canvas--open) .close-offcanvas{
	display: none;
}
html body.off-canvas--open .close-offcanvas{
    position: relative !important;
    top: unset !important;
}
html body.off-canvas--open .open-offcanvas{
	display: none;
}
html body .elementor-widget-button.elementor-button-secondary_button a,
.gform_wrapper.gravity-theme #field_submit input, 
.gform_wrapper.gravity-theme .gform_footer input{
	    border: 1px solid rgba(255, 255, 255, 0.50) !important;
}