/*
Theme Name: Kadence Child
Theme URI: https://www.kadencewp.com/kadence-theme/
Template: kadence
Author: Kadence WP
Author URI: https://www.kadencewp.com/
Description: Kadence Theme is a lightweight yet full featured WordPress theme for creating beautiful fast loading and accessible websites, easier than ever. It features an easy to use drag and drop header and footer builder to build any type of header in minutes. It features a full library of gorgeous starter templates that are easy to modify with our intelligent global font and color controls. With extensive integration with the most popular 3rd party plugins, you can quickly build impressive ecommerce websites, course websites, business websites, and more.
Tags: translation-ready,two-columns,right-sidebar,left-sidebar,footer-widgets,blog,custom-logo,custom-background,custom-menu,rtl-language-support,editor-style,threaded-comments,custom-colors,featured-images,wide-blocks,full-width-template,theme-options,e-commerce
Version: 1.2.12.1734091312
Updated: 2024-12-13 12:01:52

*/

/* 
===================================
Header
===================================
*/

.EO-scheidingsteken {
	width: 80%;
	border-top: 1px solid!important;
}


/* 
===================================
Hero Section Grid 
===================================
*/

.Hero-section-grid {
	margin-bottom: 0px;
	gap: 20px;
}

/* Algemeen grid-styling voor mobiele apparaten */
@media (max-width: 768px) {
    .Hero-section-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr)!important; /* 4 kolommen */
        grid-template-rows: auto 1fr auto!important; /* 4 rijen */
        gap: 10px; /* Ruimte tussen de blokken */
    }

    /* Indeling voor elk blok */
    .hero-block-1 {
        grid-column: 1 / 3!important; /* Eerste kolom */
        grid-row: 1 / 2!important; /* Eerste rij */
    }

    .hero-block-2 {
        grid-column: 1 / 3!important; /* Tweede kolom */
        grid-row: 2 / 3!important; /* Eerste rij */
    }

    .hero-block-3 {
        grid-column: 3 / 5!important; /* Derde kolom */
        grid-row: 1 / 3!important; /* Eerste rij */
    }

    .hero-block-4 {
        grid-column: 1 / 2!important; /* Vierde kolom */
        grid-row: 3 / 4!important; /* Eerste rij */
    }

    .hero-block-5 {
        grid-column: 2 / 3!important; /* Eerste kolom */
        grid-row: 3 / 4!important; /* Tweede rij */
    }

    .hero-block-6 {
        grid-column: 3 / 4!important; /* Tweede kolom */
        grid-row: 3 / 4!important; /* Tweede rij */
    }

    .hero-block-7 {
        grid-column: 4 / 5!important; /* Derde kolom */
        grid-row: 3 / 4!important; /* Tweede rij */
    }
}

/* 
===================================
Aspect Ratio Styling
  - 1:1 Ratio
===================================
*/

.container-1x1 {
    aspect-ratio: 1 / 1; /* Moderne methode */
    width: 100%; /* Vul de volledige breedte van de parent */
    margin-bottom: 0px; /* Geen extra ruimte onder de container */

    /* Fallback voor oudere browsers */
    position: relative;
}
.container-1x1::before {
    content: "";
    display: block;
    padding-bottom: 100%; /* 1:1 ratio als fallback */
}
.container-1x1 > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 
===================================
Aspect Ratio Styling
  - 2:1 Ratio
===================================
*/

.container-2x1 {
    aspect-ratio: 2 / 1; /* Moderne methode */
    width: 100%; /* Vul de volledige breedte van de parent */
    margin-bottom: 0px; /* Geen extra ruimte onder de container */

    /* Fallback voor oudere browsers */
    position: relative;
}
.container-2x1::before {
    content: "";
    display: block;
    padding-bottom: 50%; /* 2:1 ratio als fallback (100% / 4 * 3) */
}
.container-2x1 > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 
===================================
Aspect Ratio Styling
  - 3:4 Ratio (Mobile Only, Vertical)
===================================
*/

@media (max-width: 768px) {
    .container-3x4 {
        aspect-ratio: 3 / 4; /* Moderne methode voor een iets lagere verticale verhouding */
        width: 100%; /* Vul de volledige breedte van de parent */
        margin-bottom: 0px; /* Geen extra ruimte onder de container */

        /* Fallback voor oudere browsers */
        position: relative;
    }
    .container-3x4::before {
        content: "";
        display: block;
        padding-bottom: 133.33%; /* 3:4 ratio als fallback (100% / 3 * 4) */
    }
    .container-3x4 > * {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

/* 
===================================
Button Hero Section Grid
===================================
*/

.button-hero-section-grid {
  position: absolute!important;
  right: -10px!important;
  bottom: -10px!important;
}

/* 
===================================
Uitgelichte producten
===================================
*/


/* Verwijder de padding-lef */

.single-content ul, .single-content ol {
padding-left: 0 !important;
}

/* Verwijder de box shadow */
.entry.loop-entry {
    box-shadow: none;
}


/* 
===================================
Mijn account pagina
===================================
*/

.EO-MyAccount-Button {
  font-weight: 700;
}

/* 
===================================
Product archives
===================================
*/

.kadence-shop-top-row {
  background-color: #F2F6E4;
  padding-left: 23px;
  padding-right: 23px;
}

.product-archive {
  background: linear-gradient(to bottom, #F2F6E4 5%, #F8FAF3 5%);
  padding-left: 23px!important;
  padding-right: 23px!important;
}

.grid-cols {
  gap: 15px;
}

.loop-entry {
  border: 1px solid #e0e0e0; /* zachte grijze rand */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05)!important;
}