/* ==========================================================================
   SNIPPET 1: GLOBAL BASE & DESIGN SYSTEM (CONFIGURATIE)
   ========================================================================== */

:root {
    /* --- 1. SHAPES & IMAGES --- */
    --bubble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' preserveAspectRatio='none'%3E%3Cpath d='M13.7.3C12-.1 10-.2 8.3.6c-1.3.7-2.2 1.7-3.1 3-1.3 1.9-2.7 3.8-3.5 6.1C.8 12 .5 14.5.3 17c-.2 2.2-.4 4.5-.2 6.8s1.1 4.5 2.6 6c2.9 2.8 9.5 2.5 13.3 1.8 3.1-.5 6.2-1 9-2.5 3.5-1.8 4.4-5.1 5.7-9.1 1.6-4 2.3-13.1-1.5-15.6-4.5-2.9-10.3-3-15.5-4.1z'/%3E%3C/svg%3E");
    --circle-shape: 67% 59% 64% 52% / 50% 63% 61% 69%;
    
    /* --- 2. COLORS & DESIGN SYSTEM --- */
    --knit-bg: #EEE6DE;
    --white-bg: #FFF;
    --icon-padding: .7rem;
    --shrink-bg: rgba(18, 22, 30, 0.38);
    --shrink-blur: 10px;
    --shrink-shadow: 0 10px 30px rgba(18, 22, 30, 0.05);

    /* --- 3. GLOBAL PADDING VARIABLES --- */
    --fluid-side-padding-min: 1.25rem;
    --fluid-side-padding-max: 5rem;
    
    --section-xxl-padding-min: 9.375rem; --section-xxl-padding-max: 10rem;
    --section-xl-padding-min: 6.875rem;  --section-xl-padding-max: 7.5rem;
    --section-l-padding-min: 5.625rem;   --section-l-padding-max: 6.25rem;
    --section-m-padding-min: 5rem;       --section-m-padding-max: 5rem;
    --section-s-padding-min: 3.75rem;    --section-s-padding-max: 3.75rem;
    --section-xs-padding-min: 2.5rem;    --section-xs-padding-max: 2.5rem;
    --section-xxs-padding-min: 1.5rem;   --section-xxs-padding-max: 1.5rem;
    --section-header-padding-min: 1.25rem; --section-header-padding-max: 1.25rem;
    
    --section-hero-height: 100vh;
    --section-offset-header: 80px;
    --section-narrow: 62.5rem;
    --section-narrow-xs: 45rem;

    /* --- 4. GLOBAL GAP VARIABLES --- */
    --gap-xxs: clamp(0.25rem, calc(0.45vw + 0.14rem), 0.5rem);
    --gap-xs: clamp(0.5rem, calc(0.45vw + 0.39rem), 0.75rem);
    --gap-s: clamp(0.75rem, calc(0.45vw + 0.64rem), 1rem);
    --gap-m: clamp(1.25rem, calc(0vw + 1.25rem), 1.25rem);
    --gap-l: clamp(1.25rem, calc(2.27vw + 0.68rem), 2.5rem);
    --gap-xl: clamp(1.25rem, calc(4.55vw + 0.11rem), 3.75rem);
    --gap-xxl: clamp(1.25rem, calc(11.36vw + -1.59rem), 7.5rem);
}

/* --- GLOBAL STYLES --- */
::selection { background: var(--knit-bg); color: #000; }

.icon-wrapper, [id^="custom-icon"] .elementor-icon, [id^="background-"] .elementor-icon, 
[id^="background-"] .e-n-accordion-item-title-icon, [id^="background-"] .icon-background, 
[id^="background-"] .elementor-grid-item, [id^="background-"] .elementor-button-icon, 
.elementor-swiper-button-prev, .elementor-swiper-button-next {
    border-radius: var(--circle-shape);
    padding: var(--icon-padding);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

#custom-icon .elementor-icon, #custom-icon-knit .elementor-icon { aspect-ratio: 1/1; overflow: hidden; border: .4rem solid #fff; }
#custom-icon-knit .elementor-icon { border-color: var(--knit-bg); background-color: var(--knit-bg); }
#background-knit { --icon-bg: var(--knit-bg); }
#background-white { --icon-bg: var(--white-bg); }
#loop-knit { --icon-bg: var(--knit-bg); }

[id^="background-"] .e-n-accordion-item-title-icon, [id^="background-"] .elementor-icon, 
[id^="background-"] .icon-background, [id^="background-"] .elementor-grid-item, 
[id^="background-"] .elementor-swiper-button-prev, [id^="background-"] .elementor-swiper-button-next, 
[id^="background-"] .elementor-button-icon, #loop-knit .elementor-swiper-button-prev, 
#loop-knit .elementor-swiper-button-next {
    background-color: var(--icon-bg);
}

[id^="background-"] .elementor-grid-item:hover, .elementor-swiper-button-prev:hover, .elementor-swiper-button-next:hover {
    transform: scale(1.05);
}