/*
Theme Name: Storefront Child
Template: storefront
Version: 1.4
Author: De Zolderschool
*/

/* ==========================================================================
   1. FONTS & BASIS STYLING (ACHTERGROND)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Chewy&family=Poppins:wght@400;700;800&display=swap');


/* De basis achtergrond van de gehele site */
body {
    background-image: url('https://dezolderschool.com/wp-content/uploads/2025/12/Achtergrond_Header.png') !important;
    background-attachment: fixed !important;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    font-family: 'Poppins', sans-serif !important;
}

/* De witte waas (overlay) over de achtergrond voor leesbaarheid */
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.7) !important;
    z-index: -1;
}

html, body {
    overflow-x: hidden !important; /* Voorkom horizontaal scrollen */
}

/* Typografie instellingen */
h1, h2, h3, .section-title, .yt-title, .newsletter-container h2, .footer-chewy {  
    font-family: 'Chewy', cursive !important;  
}

p, a, input, button, .card-content p, .sub-text {  
    font-family: 'Poppins', sans-serif !important;  
}

/* ==========================================================================
   2. GLAZEN CONTAINERS (GLASSMORPHISM)
   ========================================================================== */
/* De standaard look voor jouw doorzichtige 'glazen' blokken */
.home-categories, .home-youtube, .hoofd-glas-container {
    background: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    padding: 40px !important;
    border-radius: 40px !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1) !important;
    max-width: 1050px !important; 
    margin: -10px auto 40px auto !important; 
    float: none !important;
    border: none !important; 
}

/* Voorkom dubbele glazen effecten binnenin containers */
.over-ons-glazen-container, .darija-glazen-container {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    backdrop-filter: none !important;
}

/* Verberg onnodige titels en breadcrumbs */
.woocommerce-breadcrumb, 
.page .entry-header, 
.page .entry-title, 
.woocommerce-products-header__title, 
.page-title {
    display: none !important;
}
/* ==========================================================================
   Css container groote voor alle paginas
   ========================================================================== */
/* Maak de witte containers op alle pagina's breder */
.site-main, #primary, .col-full {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.content-area {
    margin: 0 auto !important;
    float: none !important;
}
/* ==========================================================================
   HEADER RESET: TOP BALK, ACHTERGROND & PC LAYOUT
   ========================================================================== */

/* 1. De Oranje Top Balk herstellen */
.zolderschool-top-bar {
    background-color: #f39c12 !important;
    width: 100% !important;
    padding: 10px 0 !important;
    text-align: center !important;
    position: relative;
    z-index: 9999;
}

.zolderschool-top-bar p {
    color: #ffffff !important;
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

/* 2. De Header Achtergrond (Glazen effect) herstellen */
.site-header {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    width: 100% !important;
    border: none !important;
}

/* 3. PC INDELING (Logo links, Menu daarnaast, Mandje rechts) */
@media (min-width: 769px) {
    .site-header .col-full {
        max-width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 15px 5% !important;
    }

    /* Logo links */
    .site-header .site-branding {
        margin: 0 !important;
        flex: 0 0 auto !important;
    }

    .site-header .site-branding img {
        max-width: 180px !important; /* Logo formaat voor PC */
        height: auto !important;
    }

    /* Menu direct naast logo */
    .main-navigation {
        flex: 1 !important;
        margin-left: 40px !important;
    }

    .main-navigation ul.menu {
        display: flex !important;
        justify-content: flex-start !important;
        list-style: none !important;
        margin: 0 !important;
    }

    /* Winkelmandje naast menu-items */
    .site-header-cart {
        margin-left: 20px !important;
        order: 2 !important;
    }

    /* Zoekbalk naar rechtsonder */
    .site-search {
        flex: 0 0 100% !important;
        display: flex !important;
        justify-content: flex-end !important;
        margin-top: 15px !important;
    }

    .site-search .widget_product_search form {
        width: 350px !important;
        border: 2px solid #f39c12 !important;
        border-radius: 20px !important;
    }
}

/* 4. MOBIEL: Logo centreren */
@media (max-width: 768px) {
    .site-header .site-branding img {
        max-width: 150px !important;
        margin: 0 auto !important;
    }
}

/* ==========================================================================
   4. HEADER: NAVIGATIE MENU (BUBBLE STYLE)
   ========================================================================== */
.main-navigation {
    flex-grow: 1 !important;
    display: flex !important;
    justify-content: center !important;
    margin-top: 25px !important;
}

.main-navigation ul li {
    margin-left: 10px !important;
    overflow: visible !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.main-navigation ul li a {
    font-weight: 800 !important;
    font-size: 16px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #444 !important;
    padding: 10px 20px !important;
    border-radius: 50px !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    white-space: nowrap !important;
    text-align: center !important;
    position: relative;
}

/* Hover & Active states */
.main-navigation ul li a:hover {
    background-color: rgba(243, 156, 18, 0.15) !important;
    color: #f39c12 !important;
    transform: translateY(-2px) !important;
}

.main-navigation ul li.current-menu-item a {
    color: #f39c12 !important;
}

/* De oranje onderlijn voor actieve pagina's */
.nav-menu a::after, 
.main-navigation ul li a::after {
    content: '' !important;
    display: block !important;
    margin: 5px auto 0 !important;
    width: 0% !important;
    height: 3px !important;
    background-color: #ffb703 !important;
    transition: width 0.3s ease !important;
}

.nav-menu .current-menu-item > a::after,
.nav-menu .current-ancestor > a::after,
.main-navigation ul li.current-menu-item a::after {
    width: 60% !important;
}

/* ==========================================================================
   5. SUB-MENU (UITKLAPMENU)
   ========================================================================== */
.main-navigation ul li ul {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding-top: 10px !important;
}

.main-navigation ul li ul li a {
    background-color: rgba(255, 255, 255, 0.9) !important;
    color: #ffb703 !important;
    border-radius: 30px !important;
    margin-top: 5px !important;
    padding: 12px 15px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
    display: block !important;
    border: none !important;
}

.main-navigation ul li ul li a:hover {
    background-color: #f39c12 !important;
    color: #ffffff !important;
}

/* Verwijder strepen in submenu */
.nav-menu .sub-menu li a::after, 
.main-navigation ul ul li a::after {
    display: none !important;
}

/* ==========================================================================
   6. WINKELMAND & ZOEKBALK
   ========================================================================== */
.site-header-cart .cart-contents, 
.widget_product_search {
    transition: transform 0.3s ease !important;
}

.site-header-cart:hover {
    transform: scale(1.1);
}

/* Zoekbalk: Rond en Speels */
.site-header .widget_product_search input[type="search"],
.site-header .woocommerce-product-search input[type="search"] {
    border-radius: 30px !important;
    border: 2px solid #f39c12 !important;
    padding: 10px 20px !important;
    outline: none;
    transition: all 0.3s ease;
}

.site-header .widget_product_search input[type="search"]:focus {
    box-shadow: 0 0 8px rgba(243, 156, 18, 0.5) !important;
    background-color: #fffaf0 !important;
}

/* ==========================================================================
  CSS HOME PAGINA: TITELS & LAYOUT FIXES
   ========================================================================== */

/* Centrerings-fix voor alle grote koppen op de homepagina */
.home .section-title, 
.home h2 {
    text-align: center !important;
    margin: 0 auto 50px auto !important;
    width: 100% !important;
    display: block !important;
    font-family: 'Chewy', cursive !important;
    font-size: 60px !important;
    padding-top: 20px !important;
}

/* Specifieke ruimte voor de eerste kop onder de header */
.home .content-area h2:first-of-type {
    margin-top: 0px !important;
}

/* Zorgt dat de content niet tegen de header aanplakt */
.home #content {
    padding-top: 40px !important;
}

/* Verwijder navigatie tussen producten (storefront fix) */
.storefront-product-pagination, 
.single-product .storefront-product-pagination {
    display: none !important;
}
/* ==========================================================================
  CSS HOME PAGINA: welkom bericht
   ========================================================================== */
/* =========================================================
   HOME HERO (Welkom blok)
   ========================================================= */

.home-hero{
  padding: 30px 16px;
}

.hero-card{
  max-width: 1050px;
  margin: 0 auto 35px auto;
  padding: 50px 40px;
  border-radius: 40px;
  text-align: center;

  /* glas effect */
  background: rgba(255,255,255,0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow: 0 20px 50px rgba(0,0,0,0.12);
}

.hero-logo img{
  width: 180px;
  height: auto;
  display: block;
  margin: 0 auto 18px auto;
}

.hero-title{
  margin: 0 0 12px 0;
  font-family: 'Chewy', cursive;
  font-size: 54px;
  line-height: 1.05;
  color: #333;
}

.hero-title span{
  color: #f39c12; /* oranje accent */
}

.hero-subtitle{
  margin: 0 auto 26px auto;
  max-width: 720px;
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  line-height: 1.4;
  color: #444;
}

.hero-buttons{
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.hero-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  border-radius: 999px;
  font-family: 'Chewy', cursive;
  font-size: 18px;
  text-decoration: none;
  transition: transform .2s ease, opacity .2s ease;
}

.hero-btn:hover{
  transform: scale(1.04);
}

.hero-btn-primary{
  background: #f39c12;
  color: #fff;
  border: 2px solid #f39c12;
}

.hero-btn-outline{
  background: rgba(255,255,255,0.6);
  color: #f39c12;
  border: 2px solid #f39c12;
}

/* mobiel */
@media (max-width: 768px){
  .hero-card{
    padding: 26px 18px;
    border-radius: 22px;
  }
  .hero-title{
    font-size: 34px;
  }
  .hero-subtitle{
    font-size: 14px;
  }
	/* HIER IS DE AANPASSING */
  .hero-logo {
    margin-top: 20px; /* Dit duwt het logo naar beneden */
    display: flex;
    justify-content: center;
  }
  .hero-logo img{
    width: 90px;
  }
  .hero-btn{
    width: 100%;
    max-width: 320px;
  }
}
.featured-product {
  transition: opacity .4s ease, transform .4s ease;
}

.featured-product.fade-out {
  opacity: 0;
  transform: translateY(10px);
}

/* ==========================================================================
  CSS HOME PAGINA: logo laten zweven
   ========================================================================== */
/* ===== HERO LOGO ANIMATIES ===== */
/* ===== HERO LOGO ANIMATIES (v2) ===== */

/* ankerpunt voor icoon + wolkjes */
.hero-logo{
  position: relative !important;
  display: inline-block !important;
}

/* logo zweeft zacht */
.hero-logo img{
  animation: heroLogoFloat 4.5s ease-in-out infinite;
}

@keyframes heroLogoFloat{
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}



/* Minder beweging voor wie dat wil */
@media (prefers-reduced-motion: reduce){
  .hero-logo img,
  .hero-weather-icon,
  .hero-cloud{
    animation: none !important;
  }
}

/* ==========================================================================
  CSS HOME PAGINA:Hero flashy 
   ========================================================================== */
/* HERO RIGHT */
.hero-right{
  display: flex;
  align-items: center;
  justify-content: center;
}

/* WRAPPER */
.featured-product-wrapper{
  display: grid;
  width: 340px;
}

/* KAARTEN OVER ELKAAR */
.featured-product{
  grid-area: 1 / 1;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(14px);
  border-radius: 28px;
  padding: 40px;
  text-align: center;
  box-shadow: 0 25px 60px rgba(0,0,0,.18);

  opacity: 0;
 .featured-product{
  opacity: 0;
  transition: opacity 1.5s ease;
}

.featured-product.active{
  opacity: 1;
}
 
}

.featured-product.active{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* BADGE */
.featured-badge{
  position: absolute;
  top: 20px;
  left: 20px;
  background: #f5a523;
  color: #fff;
  font-weight: 900;
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 999px;
}

/* IMAGE */
.featured-product img{
  width: 220px;
  border-radius: 18px;
  margin-bottom: 25px;
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
}
.featured-product{
  pointer-events: none;
}

.featured-product.active{
  pointer-events: auto;
}
/* ==========================================================================
  CSS HOME PAGINA: CATEGORIEËN GRID (FLASHY KAARTEN)
   ========================================================================== */

.category-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

.category-card {
    border-radius: 30px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    display: flex !important;
    flex-direction: column !important;
    border: 2px solid transparent !important; 
}

.category-card:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 15px 35px rgba(243, 156, 18, 0.4) !important;
    border: 2px solid #f39c12 !important;
}

/* Afbeelding binnen de kaart */
.card-image {
    line-height: 0 !important;
    overflow: hidden !important;
}

.card-image img {
    width: 100% !important;
    height: 250px !important;
    object-fit: cover !important;
    display: block !important;
    margin-bottom: 0 !important;
}

/* Tekstgedeelte van de kaart */
.card-content {
    padding: 40px 20px !important;
    text-align: center !important;
    position: relative !important;
    background-image: url('https://dezolderschool.com/wp-content/uploads/2025/12/backgrounddd.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    flex-grow: 1 !important;
}

/* Overlay voor leesbaarheid tekst op kaart-achtergrond */
.card-content::before {
    content: "" !important;
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.6) !important;
    z-index: 0 !important;
}

.card-content h3, .card-content p {
    color: #ffffff !important;
    position: relative !important;
    z-index: 1 !important;
}

.card-content h3 {
    font-family: 'Chewy', cursive !important;
    font-size: 32px !important;
    margin-bottom: 10px !important;
}

/* Witte knop op de categoriekaart */
.btn-white {
    display: inline-block !important;
    background-color: #ffffff !important; 
    color: #333333 !important; 
    padding: 12px 35px !important;
    border-radius: 50px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    position: relative !important;
    z-index: 2 !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
}

.btn-white:hover {
    background-color: #f39c12 !important;
    color: #ffffff !important;
    transform: translateY(-5px) scale(1.05) !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2) !important;
}

/* Glans effect witte knop */
.btn-white::after {
    content: '';
    position: absolute;
    top: 0; left: -110%; width: 60%; height: 100%;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    pointer-events: none;
}

.btn-white:hover::after {
    left: 150%;
    transition: all 0.7s ease;
}

/* ==========================================================================
  CSS HOME PAGINA: YOUTUBE SECTIE (GRID & RODE KNOP - VOLLEDIG GECENTREERD)
   ========================================================================== */

/* De hoofdcontainer die alles binnen dit blok centreert */
.home-youtube {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
}

/* De zwarte tekst bovenaan - nu ook echt gecentreerd */
.home-youtube .sub-text {
    color: #000000 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    margin-bottom: 5px !important;
    display: block !important;
    text-align: center !important;
    width: 100% !important;
}

/* De oranje titel "De Zolderschool" */
.home-youtube .yt-main-link {
    font-family: 'Chewy', cursive !important;
    color: #ff9800 !important;
    font-size: 3rem !important;
    text-decoration: none !important;
    margin-bottom: 30px !important;
    display: block !important;
    text-align: center !important;
    width: 100% !important;
}



/* De rode abonneer knop - GECENTREERD */
.btn-subscribe {
    display: inline-block !important;
    background-color: #ff0000 !important;
    color: #ffffff !important;
    padding: 16px 45px !important;
    border-radius: 50px !important;
    font-weight: 800 !important;
    margin: 50px auto 0 auto !important; /* 'auto' links en rechts zet de knop in het midden */
    position: relative !important;
    overflow: hidden !important;
    animation: pulse-red-home 2s infinite;
    transition: all 0.3s ease !important;
    text-align: center !important;
}

.btn-subscribe:hover {
    background-color: #cc0000 !important;
    transform: scale(1.1) !important;
    animation: none !important;
}

/* Lichtflits effect op de knop */
.btn-subscribe::after {
    content: "";
    position: absolute;
    top: -50%; left: -150%; width: 40%; height: 200%;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.6), rgba(255,255,255,0));
    transform: rotate(30deg);
}

.btn-subscribe:hover::after {
    left: 150%;
    transition: left 0.6s ease-in-out;
}
/* ==========================================================================
  CSS HOME PAGINA: NIEUWSBRIEF (GEZENTREERD & WITTE TEKST)
   ========================================================================== */

.newsletter-container {
    background-color: rgba(0, 166, 153, 0.95) !important;
    max-width: 1050px !important;
    margin: 60px auto !important;
    padding: 50px !important;
    border-radius: 40px !important;
    overflow: hidden !important;
    text-align: center !important; /* Centreert de tekst */
}

/* Zorgt dat de titel en beschrijving wit zijn */
.newsletter-container h2, 
.newsletter-container p,
.newsletter-container label {
    color: #ffffff !important;
    font-family: 'Chewy', cursive !important;
    margin-bottom: 20px !important;
}

/* Zorgt dat het invoerveld en de knop in het midden staan */
.newsletter-fields {
    display: flex !important;
    justify-content: center !important; /* Dit zet alles in het midden */
    align-items: center !important;
    margin-top: 20px !important;
}

/* Het e-mail invoerveld */
.newsletter-fields input[type="email"] {
    padding: 15px 25px !important;
    border-radius: 50px 0 0 50px !important; /* Alleen links rond */
    border: none !important;
    width: 350px !important; /* Iets breder voor betere look */
    outline: none !important;
    font-family: 'Poppins', sans-serif !important;
}

/* De Verzendknop */
.btn-send {
    background-color: #f39c12 !important;
    color: #ffffff !important;
    padding: 15px 35px !important;
    border-radius: 0 50px 50px 0 !important; /* Alleen rechts rond */
    border: none !important;
    font-weight: 800 !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    margin-left: -5px !important; /* Zorgt dat ze strak tegen elkaar zitten */
}

.btn-send:hover {
    background-color: #e67e22 !important;
    transform: scale(1.05) !important;
}

/* Glans effect voor de knop */
.btn-send::after {
    content: "";
    position: absolute;
    top: 0; left: -150%; width: 100%; height: 100%;
    background: linear-gradient(120deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0) 80%);
    transform: skewX(-25deg);
}

.btn-send:hover::after {
    left: 150%;
    transition: all 0.6s ease-in-out !important;
}
/* =========================================================
   NIEUWSBRIEF – SUCCES ANIMATIE
   Past exact bij jouw groene nieuwsbriefblok
   ========================================================= */

.newsletter-success{
  text-align: center;
  animation: fadeSlideIn 0.6s ease forwards;
}

/* Checkmark cirkel */
.checkmark-circle{
  width: 70px;
  height: 70px;
  margin: 0 auto 16px auto;
  border-radius: 50%;
  background: #ffffff;
  color: #00a699;
  font-size: 36px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  animation: popIn 0.5s ease forwards;
}

/* Titel */
.newsletter-success h3{
  font-family: 'Chewy', cursive;
  color: #ffffff;
  font-size: 26px;
  margin-bottom: 10px;
}

/* Tekst */
.newsletter-success p{
  font-family: 'Poppins', sans-serif;
  color: #ffffff;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

/* Fade + slide animatie */
@keyframes fadeSlideIn{
  from{
    opacity: 0;
    transform: translateY(10px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

/* Checkmark pop animatie */
@keyframes popIn{
  0%{
    transform: scale(0.5);
    opacity: 0;
  }
  70%{
    transform: scale(1.1);
  }
  100%{
    transform: scale(1);
    opacity: 1;
  }
}

/* =========================================================
   MOBIEL – iets compacter
   ========================================================= */
@media (max-width: 768px){

  .checkmark-circle{
    width: 60px;
    height: 60px;
    font-size: 30px;
  }

  .newsletter-success h3{
    font-size: 22px;
  }

  .newsletter-success p{
    font-size: 13px;
  }
}


/* ==========================================================================
   ANIMATIES & RESPONSIVITY
   ========================================================================== */

@keyframes pulse-red-home {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 12px rgba(255, 0, 0, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
}

/* ==========================================================================
   CSS pagina "Over" 1. GLAZEN CONTAINER & PAGINA LAYOUT (ID 11)
   ========================================================================== */
.page-id-11 #primary {
    background: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    padding: 40px !important; /* Bovenkant strakker gemaakt */
    border-radius: 40px !important;
    margin: 30px auto 60px auto !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1) !important;
    max-width: 1050px !important;
    float: none !important;
    padding-top: 15px !important; /* Fix voor ruimte bovenin */
}

/* Verwijder standaard thema witruimte */
.page-id-11 .entry-header, 
.page-id-11 .storefront-page-header, 
.page-id-11 .storefront-breadcrumb {
    display: none !important;
}

/* ==========================================================================
  CSS pagina "Over". TYPOGRAFIE & TEKST
   ========================================================================== */
.page-id-11 h2, .page-id-11 h1, .about-title {
    font-family: 'Chewy', cursive !important;
    color: #f39c12 !important;
    font-size: 2.5rem !important;
    margin-top: 1px !important; /* Strak tegen de bovenkant */
    padding-top: 40px !important;
}

.page-id-11 .about-text {
    font-size: 17px !important;
    line-height: 1.7 !important;
    color: #1a1a1a !important;
    margin-bottom: 20px !important;
}

.about-link {
    color: #ff9800;
    font-weight: bold;
    text-decoration: underline;
}

.about-full-width-align-left {
    text-align: left !important;
    padding: 0 5px !important;
    margin-top: 15px !important;
}

/* ==========================================================================
 CSS pagina "Over". FLEXBOX LAYOUT & BLOBS (ANIMATIES)
   ========================================================================== */
.about-flex-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 30px !important;
    padding: 30px 0 !important;
}

.about-text-column { flex: 1.6 !important; min-width: 0 !important; }
.about-image-column { flex: 0.8 !important; display: flex; justify-content: flex-end; }

/* De basis blob styling */
.custom-blob {
    width: 440px !important;
    height: 280px !important;
    overflow: hidden !important;
    box-shadow: 15px 15px 40px rgba(0,0,0,0.1);
    border: 4px solid #fca311;
    animation: morph-over-ons 20s ease-in-out infinite !important;
    background-size: cover;
    background-position: center;
}

/* De Fix voor Telegram blob (Voorkomt witte randen) */
.bg-blob-telegram {
    background-image: url('https://dezolderschool.com/wp-content/uploads/2025/12/upscalemedia-transformed-45-scaled.png');
}

.custom-blob img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

@keyframes morph-over-ons {
0%, 100% {
    border-radius: 63% 37% 55% 45% / 48% 62% 38% 52%;
  }
  20% {
    border-radius: 45% 55% 35% 65% / 60% 40% 55% 45%;
  }
  40% {
    border-radius: 70% 30% 50% 50% / 42% 58% 48% 52%;
  }
  60% {
    border-radius: 38% 62% 60% 40% / 65% 35% 55% 45%;
  }
  80% {
    border-radius: 55% 45% 40% 60% / 45% 60% 40% 55%;
  }
}

/* ==========================================================================
 CSS pagina "Over". KNOOP STYLING (RED, ORANGE, DONEER)
   ========================================================================== */
.button-center-box {
    display: flex;
    justify-content: center;
    margin: 15px 0 35px 0 !important;
}

/* Algemene Knop Basis */
.btn-youtube-red, .btn-shop-orange, .btn-cyan-flat {
    display: inline-block !important;
    border-radius: 50px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
    padding: 12px 35px !important;
}

/* Specifieke Kleuren */
.btn-youtube-red {
    background: #ff0000 !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(255, 0, 0, 0.4);
    animation: pulse-red 1.5s 3;
}

.btn-shop-orange {
    background: #ff9800 !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(255, 152, 0, 0.4);
    animation: pulse-orange 1.5s 3;
}
/* Turquoise Doneer Knop (btn-cyan-flat) */
.btn-cyan-flat {
    background: #30cfc0 !important; /* Turquoise kleur */
    color: white !important;
    box-shadow: 0 4px 15px rgba(64, 224, 208, 0.4) !important;
    /* We gebruiken een turquoise pulse animatie */
    animation: pulse-turquoise 1.5s 3;
}
/* Puls Animaties */
@keyframes pulse-red {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(255, 0, 0, 0); }
    100% { transform: scale(1); }
}

@keyframes pulse-orange {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.7); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(255, 152, 0, 0); }
    100% { transform: scale(1); }
}
/* De Pulse voor Turquoise */
@keyframes pulse-turquoise {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(64, 224, 208, 0.7); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(64, 224, 208, 0); }
    100% { transform: scale(1); }
}

/* Hover kleur voor Turquoise knop */
.btn-cyan-flat:hover {
    background-color: #40E0D0 !important; /* Iets donkerder turquoise bij hover */
}
/* --- Lichtflits (Sheen) Basis --- */
.btn-youtube-red::after, 
.btn-shop-orange::after, 
.btn-cyan-flat::after {
    content: "";
    position: absolute;
    top: 0;
    /* We zetten hem strak tegen de linkerkant van de knop aan */
    left: -100%; 
    width: 100%;
    height: 100%;
    background: linear-gradient(
        120deg, 
        rgba(255, 255, 255, 0) 25%, 
        rgba(255, 255, 255, 0.6) 50%, 
        rgba(255, 255, 255, 0) 75%
    );
    transform: skewX(-25deg);
    z-index: 2 !important;
    pointer-events: none;
    /* Geen transitie in ruststand zorgt dat hij direct terugspringt */
    transition: none !important;
}

/* --- Interactie bij Hover (Directe flits) --- */
.btn-youtube-red:hover::after, 
.btn-shop-orange:hover::after, 
.btn-cyan-flat:hover::after {
    left: 100%;
    /* 0.4s maakt de flits sneller en krachtiger */
    transition: left 0.4s ease-out !important; 
}

/* --- De Knoppen zelf bij Hover (Stopt puls direct) --- */
.btn-youtube-red:hover, 
.btn-shop-orange:hover, 
.btn-cyan-flat:hover { 
    transform: translateY(-3px) scale(1.05) !important; 
    animation: none !important; /* Stopt de puls animatie direct */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important;
}

/* ==========================================================================
 CSS pagina "Over" TELEGRAM & DONATIE SECTIE
   ========================================================================== */
.telegram-section-clean { max-width: 1050px; margin: 50px auto; background: transparent !important; }
.telegram-flex-row { display: flex; align-items: center; gap: 40px; margin-bottom: 40px; }
.telegram-img-box { flex: 1.2; }
.telegram-text-box { flex: 1; }

.donation-footer { text-align: center; margin-top: 20px; }

/* Nieuwe specifieke animatie voor de tweede afbeelding */
.bg-blob-telegram {
    background-image: url('https://dezolderschool.com/wp-content/uploads/2025/12/upscalemedia-transformed-45-scaled.png');
    animation: morph-telegram 15s ease-in-out infinite !important; /* Andere snelheid en beweging */
}

@keyframes morph-telegram {
  0%, 100% { border-radius: 63% 37% 55% 45% / 48% 62% 38% 52%; }
  20% { border-radius: 45% 55% 35% 65% / 60% 40% 55% 45%; }
  40% { border-radius: 70% 30% 50% 50% / 42% 58% 48% 52%; }
  60% { border-radius: 38% 62% 60% 40% / 65% 35% 55% 45%; }
  80% { border-radius: 55% 45% 40% 60% / 45% 60% 40% 55%; }
}
.custom-blob{
  animation: morph-telegram 18s ease-in-out infinite;
}
/* ==========================================================================
   CSS PRODUCT- EN WINKELPAGINA STYLING (VOLLEDIG & HERSTELD)
   ========================================================================== */

/* 1. DE BASIS CONTAINER (HET GLAZEN BLOK) */
.woocommerce-shop #primary, 
.tax-product_cat #primary, 
.archive.woocommerce #primary {
    background: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    padding: 40px !important;
    border-radius: 40px !important;
    border: none !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1) !important;
    max-width: 1050px !important;
    margin: 30px auto 60px auto !important; 
    float: none !important;
    display: block !important;
}

/* 2. DE TITEL */
.page-title {
    font-family: 'Chewy', cursive !important;
    font-size: 3.5rem !important;
    text-align: center !important;
    margin-bottom: 20px !important; /* Ruimte onder de titel */
    line-height: 1.2 !important;
    margin-top: 0 !important;
    display: block !important;
    color: #333 !important;
}

/* Verberg rommel */
.woocommerce-breadcrumb, .storefront-breadcrumb, 
.woocommerce-result-count, .woocommerce-ordering {
    display: none !important;
}

/* ==========================================================================
   CSS PAGINA WINKEL: NAVIGATIE KNOPPEN (PILLEN)
   ========================================================================== */
.shop-category-nav {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    margin: 10px 0 -40px 0 !important; /* Ruimte tussen titel en producten hersteld */
    padding-bottom: 20px !important;
}

.cat-pill {
    background: #ffffff !important;
    border: 2px solid #f39c12 !important;
    color: #f39c12 !important;
    padding: 8px 25px !important;
    border-radius: 50px !important;
    font-family: 'Fredoka', sans-serif !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    font-size: 15px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
    position: relative !important;
    overflow: hidden !important;
    display: inline-block !important;
}

.cat-pill::after {
    content: "";
    position: absolute;
    top: 0; left: -110%; width: 100%; height: 100%;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 75%);
    transform: skewX(-25deg);
}

.cat-pill:hover {
    background: #f39c12 !important;
    color: #ffffff !important;
    transform: scale(1.05) translateY(-2px) !important;
    box-shadow: 0 6px 15px rgba(243, 156, 18, 0.3) !important;
}

.cat-pill:hover::after {
    left: 110%;
    transition: left 0.4s ease-out !important;
}

/* ==========================================================================
   CSS PAGINA WINKEL: PRODUCTEN & AFBEELDINGEN
   ========================================================================== */
ul.products {
    margin-top: 0 !important;
}

ul.products li.product {
    background: #ffffff !important;
    border-radius: 25px !important;
    padding: 20px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important;
    border: 1px solid #eee !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    overflow: hidden !important;
}

ul.products li.product img {
    border-radius: 20px !important;
    margin-bottom: 15px !important;
    transition: transform 0.3s ease !important;
}

ul.products li.product:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 15px 30px rgba(243, 156, 18, 0.3) !important;
    border-color: #f39c12 !important;
}

ul.products li.product:hover img {
    transform: scale(1.02) !important;
}

/* Prijzen en Titels */
ul.products li.product .price {
    font-family: 'Chewy', cursive !important;
    color: #f39c12 !important;
    font-size: 24px !important;
    text-align: center !important;
}

ul.products li.product .woocommerce-loop-product__title {
    font-size: 1.6rem !important;
    text-align: center !important;
     font-family: 'Chewy', cursive !important;
}

/* ==========================================================================
   CSS PAGINA WINKEL: DE BESTELKNOP (ORANJE BOL)
   ========================================================================== */
ul.products li.product .button {
    font-size: 0 !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #f39c12 !important;
    position: relative !important;
    overflow: hidden !important;
    border: none !important;
    margin: 10px auto 0 auto !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 10px rgba(243, 156, 18, 0.2) !important;
    z-index: 10 !important;
}

ul.products li.product .button::before {
    content: "" !important;
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='white' d='M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    pointer-events: none !important;
    z-index: 11 !important;
}

ul.products li.product .button::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important; left: -150% !important;
    width: 100% !important; height: 100% !important;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 80%) !important;
    transform: skewX(-25deg) !important;
    pointer-events: none !important;
    z-index: 12 !important;
}

ul.products li.product .button:hover::after {
    left: 150% !important;
    transition: left 0.6s ease-in-out !important;
}

ul.products li.product .button:hover {
    background-color: #ff9800 !important;
    transform: scale(1.1) !important;
}

/* ==========================================================================
  CSS Winkel Pagina WINKELWAGEN SUCCES: GROEN VINKJE & BEKIJKEN KNOP
   ========================================================================== */
.added_to_cart.wc-forward {
    display: block !important;
    margin-top: 15px !important;
    background-color: #333333 !important;
    color: #ffffff !important;
    padding: 10px 20px !important;
    border-radius: 30px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    text-decoration: none !important;
    text-align: center !important;
}

.woocommerce ul.products li.product a.button.add_to_cart_button.added {
    background-color: #2ecc71 !important;
}

.woocommerce ul.products li.product a.button.add_to_cart_button.added::before {
    content: "" !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23ffffff' d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E") !important;
}

/* ==========================================================================
  CSS Winkel pagina  BADGES (GRATIS / SALE)
   ========================================================================== */
.pbfw_corner_badge, .pbfw_circle, .pbfw_corner_badge i {
    opacity: 1 !important;
    visibility: visible !important;
}

.pbfw_circle {
    background-color: #f39c12 !important;
}

.pbfw_circle b {
    color: #ffffff !important;
    opacity: 1 !important;
    font-weight: 700 !important;
}
/* ==========================================================================
 CSS  PRODUCTPAGINA (BESCHRIJVING) - DE BASIS CONTAINER
   ========================================================================= */
/* ==========================================================================
   PRODUCTPAGINA – GLAS CONTAINERS + TYPO + TABS + KNOP + NAV
   ========================================================================== */

/* 1) Hoofd “kaart” rond de hele product content (optioneel)
   Tip: als je dit gebruikt, hoef je tabs/summary minder “dubbel” te stylen. */
.single-product #primary {
  background: rgba(255, 255, 255, 0.40);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 40px;
  border-radius: 40px;
  margin-top:0 !important;
  border: 1px solid rgba(255, 255, 255, 0.40);
  box-shadow: 0 20px 50px rgba(0,0,0,0.10);
}

/* 2) Titel */
.single-product .product_title {
  font-family: 'Chewy', cursive;
  font-size: 3rem;
  color: #333;
  margin: 0px 0 20px;
}

/* 3) Prijs */
.single-product p.price,
.single-product span.price {
  font-family: 'Chewy', cursive;
  color: #f39c12;
  font-size: 2rem;
}

/* 4) Product afbeelding (mooie bochten) */
.single-product div.product div.images img {
  border-radius: 30px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.05);
}

.single-product div.product div.images .woocommerce-product-gallery__wrapper {
  border-radius: 30px;
  overflow: hidden;
}

/* 5) Mooie container rond SUMMARY (titel/prijs/knop blok) */
.single-product div.product .summary.entry-summary {
  background: rgba(255,255,255,0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 30px;
  padding: 26px;
  border: 1px solid rgba(255,255,255,0.40);
  box-shadow: 0 20px 50px rgba(0,0,0,0.08);
}

/* 6) Tabs: container + tabs knoppen + panel */
.single-product div.product .woocommerce-tabs {
  margin-top: 26px;
  background: rgba(255,255,255,0.30);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 30px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,0.40);
  box-shadow: 0 20px 50px rgba(0,0,0,0.08);
}

/* Tabs bar opschonen */
.single-product .woocommerce-tabs ul.tabs {
  background: transparent;
  border: none;
  margin: 0 0 14px;
  padding: 0;
}

/* Tabs: maak hele vak klikbaar */
.single-product .woocommerce-tabs ul.tabs li {
  background: rgba(255,255,255,0.20);
  border-radius: 15px;
  margin: 0 10px 10px 0;
  border: 1px solid rgba(255,255,255,0.20);
  padding: 0;
  overflow: hidden;
  transition: all 0.3s ease;
}

.single-product .woocommerce-tabs ul.tabs li a {
  display: block;
  width: 100%;
  padding: 15px 25px;
  text-decoration: none;
  color: #333;
  font-weight: 600;
}

/* Hover + actief */
.single-product .woocommerce-tabs ul.tabs li:hover {
  background: rgba(255,255,255,0.50);
  border-color: rgba(255,255,255,0.60);
  transform: translateX(5px);
}

.single-product .woocommerce-tabs ul.tabs li.active {
  background: rgba(255,255,255,0.80);
  border-color: rgba(255,255,255,1);
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.single-product .woocommerce-tabs ul.tabs li.active a {
  color: #000;
}

/* Panel (Beschrijving inhoud) */
.single-product .woocommerce-tabs .woocommerce-Tabs-panel {
  background: rgba(255,255,255,0.40);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 22px;
  padding: 28px;
  border: 1px solid rgba(255,255,255,0.40);
}

/* 7) Bestelknop (glans) */
.single-product .cart .button {
  background-color: #f39c12;
  color: #ffffff;
  border-radius: 50px;
  padding: 15px 35px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 800;
  position: relative;
  overflow: hidden;
  border: none;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.single-product .cart .button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.4) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-25deg);
}

.single-product .cart .button:hover {
  transform: scale(1.05);
  background-color: #ff9800;
  box-shadow: 0 8px 20px rgba(243, 156, 18, 0.6);
}

.single-product .cart .button:hover::before {
  left: 150%;
  transition: all 0.6s ease;
}

/* 8) Product navigatie (vorige/volgende) */
.custom-product-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 50px;
  padding-top: 25px;
  border-top: 1px solid rgba(0,0,0,0.05);
  clear: both;
}

.custom-product-nav .nav-btn {
  background: #ffffff;
  border: 2px solid #f39c12;
  color: #f39c12;
  padding: 10px 20px;
  border-radius: 30px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
}

.custom-product-nav .nav-btn:hover {
  background: #f39c12;
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(243, 156, 18, 0.3);
}
/* =========================================================
   SINGLE PRODUCT: niet plakken aan header + niet te breed
   ========================================================= */

/* 1) Voorkom overlap met header/topbar (pas 120 aan indien nodig) */
@media (max-width: 9999px){
  body.single-product #content.site-content{
    padding-top: 40px !important;   /* header + oranje bar */
  }
}

/* 2) Maak de product layout smaller (max breedte) */
body.single-product div.product{
  max-width: 1100px !important;  /* pas aan: 900-1200 */
  margin: 0 auto !important;
}

/* 3) Zorg dat jouw "kaart" niet de volle breedte pakt */
body.single-product #primary{
  width: 100% !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
}


/* ==========================================================================
 CSS PAGINA 47: YOUTUBE "DE ZOLDERSCHOOL"
   ========================================================================== */

/* 1. Verberg standaard WordPress titels alleen op deze pagina */
.page-id-47 .entry-title, .page-id-47 .entry-header {
    display: none !important;
}

/* 2. Het grote witte glazen blok */
.pagina-47-uniek .hoofd-glas-container {
    background: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    padding: 50px !important;
    border-radius: 40px !important;
    
    box-shadow: 0 20px 50px rgba(0,0,0,0.05) !important;
    max-width: 1050px;
    margin: 30px auto !important;
}

/* 1. LAYOUT: Naast elkaar, maar uitgelijnd op de bovenkant */
.pagina-47-uniek .inhoud-wrapper {
    display: flex !important;
    flex-direction: row !important; /* Naast elkaar op PC */
    align-items: flex-start !important; /* Dwingt alles naar de BOVENKANT */
    justify-content: space-between !important;
    gap: 40px !important;
}
.pagina-47-uniek .tekst-sectie { flex: 1.2; }
.pagina-47-uniek .afbeelding-sectie { flex: 0.8; text-align: center; }

.pagina-47-uniek .titel-groen {
    color: #ff9800 !important;
    font-size: 38px !important;
    margin-bottom: 20px !important;
    margin-top: -10px !important;
    font-family: "Chewy", cursive !important;
}

.pagina-47-uniek .beschrijving {
    font-size: 17px !important;
    line-height: 1.7 !important;
    color: #333 !important;
}
.pagina-47-uniek .cta-tekst{
    font-size: 17px !important;
    line-height: 1.7 !important;
    color: #333 !important;
}
.pagina-47-uniek .tv-afbeelding {
    max-width: 100% !important;
    height: auto !important;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.15));
}

.abonneer-sectie {
    margin-top: 50px;
    display: flex;
    align-items: center;
    gap: 40px;
    /* De border-top is hier verwijderd */
    padding-top: 20px;
}

/* De Blob vorm voor de nieuwe afbeelding */
.blob-afbeelding-container {
    flex: 0.8;
    border-radius: 20px 20px 20px 20px !important;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.blob-foto {
    width: 100%;
    height: auto;
    display: block;
}

.abonneer-tekst-kant {
    flex: 1.2;
}

.cta-tekst {
    font-size: 20px !important;
   
    color: #333 !important;
    margin-bottom: 20px !important;
    line-height: 1.4 !important;
}

/* De rode abonneerknop (matcht homepage) */
.abonneer-button {
    display: inline-block;
    background-color: #ff0000 !important; /* YouTube Rood */
    color: #fff !important;
    padding: 16px 35px !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    font-weight: bold !important;
    font-size: 19px !important;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(255, 0, 0, 0.3) !important;
    transition: all 0.3s ease;
}

/* De glanslaag (staat standaard stil buiten beeld) */
.abonneer-button::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -100%; /* Begint ver buiten de knop */
    width: 30%;
    height: 200%;
    background: rgba(255, 255, 255, 0.5);
    transform: rotate(30deg);
    transition: none; /* Geen transitie om herhaling te voorkomen */
}

/* De flash gebeurt nu ALLEEN bij hover */
.abonneer-button:hover::after {
    animation: shiny-flash-once 0.7s ease-in-out forwards;
}

@keyframes shiny-flash-once {
    0% { left: -100%; }
    100% { left: 150%; }
}

/* De knop zelf beweegt ook een klein beetje mee */
.abonneer-button:hover {
    transform: scale(1.05);
    background-color: #e60000 !important;
    box-shadow: 0 15px 30px rgba(255, 0, 0, 0.4) !important;
}

/* =========================
   VIDEO TITEL
   ========================= */
.titel-oranje-center{
  text-align: center;
  color: #ff9800 !important;
  font-size: 34px;
  font-family: "Chewy", cursive !important;
  margin: 18px 0 12px;
  text-shadow: 0 2px 0 rgba(0,0,0,0.06);
}

/* =========================
   VIDEO SLIDER (1 versie!)
   - Werkt met jouw JS (die content dupliceert)
   ========================= */
.page-id-47 .video-slider-container{
  width: 100% !important;
  overflow: hidden;
  padding: 20px 0;
  margin-top: 10px;
}

.page-id-47 .video-track{
  display: flex;
  gap: 12px;
  width: max-content;     /* belangrijk voor marquee */
  align-items: stretch;
}

.page-id-47 .video-track.marquee{
  animation: scrollMarquee 160s linear infinite;  /* ✅ rustig */
  will-change: transform;
}

.page-id-47 .video-slider-container:hover .video-track.marquee{
  animation-play-state: paused;
}

@keyframes scrollMarquee{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* omdat JS de content dubbel maakt */
}

/* Cards */
.page-id-47 .video-card{
  min-width: 220px;
  border-radius: 15px;
  overflow: hidden;
  text-decoration: none !important;
  background: #fff;
  box-shadow: 0 10px 20px rgba(0,0,0,0.05);
  display: block;
  transition: transform .25s ease;
}

.page-id-47 .video-card:hover{
  transform: translateY(-6px) scale(1.02);
}

.page-id-47 .video-card img{
  width: 100%;
  display: block;
}

.page-id-47 .video-card span{
  display: block;
  padding: 10px;
  font-family: "Chewy", cursive;
  color: #ff9800;
  font-size: 14px;
  line-height: 1.3;
}

/* Mobiel */
@media (max-width: 768px){
 .page-id-47 .video-track.marquee{ animation-duration: 220s; }
 .page-id-47 .video-card{ min-width: 160px; }
}

/* =========================
   TV FRAME (RAINBOW GLOW)
   - Glow blijft nu echt rond de afbeelding
   ========================= */
.pagina-47-uniek .afbeelding-sectie{
  flex: 0.8;
  text-align: center;
}

.page-id-47 .tv-frame{
  position: relative;
  display: inline-block;
  width: fit-content;
  max-width: 520px;
  border-radius: 24px;
  padding: 6px;
  overflow: hidden;      /* ✅ voorkomt "lekken" */
  isolation: isolate;    /* ✅ eigen stacking context */
}

.tv-afbeelding{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  position: relative;
  z-index: 2;
  box-shadow: 0 14px 35px rgba(0,0,0,0.20);
}

/* Zachte glow ring */
.page-id-47 .tv-frame::before{
  content:"";
  position:absolute;
  inset: -30px;
  border-radius: 50%;
  background: conic-gradient(
    #ff004c,
    #ff7a00,
    #ffd000,
    #00d26a,
    #00c2ff,
    #7a5cff,
    #ff00c8,
    #ff004c
  );
  filter: blur(18px);
  opacity: 0.45;
  z-index: 0;
  animation: rainbowSpin 2s linear infinite;
  pointer-events: none;
}



@keyframes rainbowSpin{
  to { transform: rotate(360deg); }
}
/* Compactere video cards */
.pagina-47-uniek .video-card{
  min-width: 200px !important;   /* was 220+ */
  max-width: 200px !important;
  padding: 8px !important;
}

.pagina-47-uniek .video-card span{
  font-size: 13px !important;
  line-height: 1.3;
}
/* Definitieve snelheid */
.pagina-47-uniek .video-track.marquee{
  animation-duration: 600s !important; /* 6 minuten per rondje */
}


/* ==========================================================================
   Css Pagina 50 Darija - Volledige Herziene Layout
   ========================================================================== */

/* 1. Verwijder standaard titels en stel afstand header in */
.page-id-50 .entry-title, .page-id-50 .page-header { display: none !important; }

.pagina-50-uniek {
    margin-top: 30px !important;
    padding: 0 15px 50px 15px;
}

.pagina-50-uniek .inhoud-wrapper {
    background-color: rgba(255, 255, 255, 0.4) !important;
    border-radius: 30px;
    padding: 50px;
    max-width: 1050px;
    margin: 0 auto;
    backdrop-filter: blur(5px);
    display: block !important;
}

/* 2. Titel: Links, zonder streep */
.pagina-hoofdtitel {
    color: #fca311 !important;
    font-size: 34px;
    margin: 0 0 30px 0;
    text-align: left;
    border-bottom: none !important;
    width: 100%;
}

/* 3. Bovenste sectie: Tekst naast de Foto */
.boven-sectie {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start; /* Foto strak tegen de bovenkant */
    gap: 40px;
    margin-bottom: 0px !important; 
    width: 100%;
}

/* Verwijdert de witruimte boven de eerste alinea */
.tekst-content-boven p:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Verwijdert eventuele witruimte boven de blob-sectie */
.hart-sectie {
    margin-top: 0 !important;
    padding-top: 0 !important;
    align-self: flex-start; /* Extra bevestiging voor de bovenkant */
}

/* 4. Onderste sectie: Tekst loopt door onder de Foto */
.onder-tekst-sectie {
    width: 100%;
    margin-top: 10px;
    text-align: left;
    clear: both;
}

.onder-tekst-sectie p, .tekst-content-boven p {
    font-size: 17px;
    line-height: 1.7;
    color: #1a1a1a !important;
    margin-bottom: 20px;
}

/* 5. De Grote Morphing Blob (Rechtsboven) */
.hart-sectie {
    flex: 0 0 420px;
    display: flex;
    justify-content: flex-end;
}

.flashy-blob-hart {
    width: 580px;
    height: 360px;
    background-size: cover;
    background-position: center;
    border: 4px solid #fca311;
    box-shadow: 0 15px 35px rgba(252, 163, 17, 0.2);
    animation: flashy-morph-punt 12s ease-in-out infinite;
}

/* 6. Flashy Knop Styling */
.knop-container {
    margin: 30px 0 10px 0;
	text-align: center; /* DIT ZET DE KNOP IN HET MIDDEN */
}

.abonneer-knop-flashy {
    display: inline-block;
    background-color: #fca311 !important;
    color: white !important;
    padding: 16px 32px;
    border-radius: 50px;
    font-weight: bold;
    text-decoration: none !important;
    position: relative;
    overflow: hidden;
    transition: 0.3s;
}

.abonneer-knop-flashy:hover { transform: scale(1.05); }
.abonneer-knop-flashy::after {
    content: ''; position: absolute; top: -50%; left: -60%; width: 20%; height: 200%;
    background: rgba(255, 255, 255, 0.4); transform: rotate(30deg); transition: 0.6s;
}
.abonneer-knop-flashy:hover::after { left: 120%; }

/* 7. Playlist Sectie onderaan */
.playlist-grid-sectie { 
    width: 100%; 
    clear: both; 
    padding-top: 40px; 
    border-top: none !important; /* DIT HAALT HET LICHTE STREEPJE WEG */
}
.playlist-titel { color: #fca311; text-align: center; margin-bottom: 25px; font-size: 30px; }
.video-scroll-box { border-radius: 25px; overflow: hidden; box-shadow: 0 15px 35px rgba(0,0,0,0.1); }

/* 8. De Willekeurige Vormen Animatie (Zonder hoofdpijn) */
@keyframes flashy-morph-punt {
    0%, 100% { border-radius: 40% 60% 45% 55% / 40% 40% 60% 60%; }
    33% { border-radius: 60% 40% 55% 45% / 60% 55% 45% 40%; }
    66% { border-radius: 50% 50% 30% 70% / 45% 70% 30% 55%; }
}

/* ==========================================================================
 CSS voor pagina "contact" id 13
   ========================================================================== */
/* 1. FLEXBOX REPARATIE */
.flex-contact-bovenkant {
    display: flex !important;
    align-items: center !important; /* Zorgt dat tekst en plaatje op gelijke hoogte staan */
    justify-content: space-between !important;
    gap: 40px !important;
    margin-bottom: 30px !important;
    width: 100% !important;
    /* VERLAAGD: Was 80px, nu 20px om de witruimte bovenin te verwijderen */
    margin-top: 20px !important; 
}
/* CONTACT (page-id-13): duw content omlaag zodat hij niet onder de header start */
body.page-id-13 #content.site-content{
  padding-top: 40px !important;  /* pas aan: 80-160 */
}
/* 1. DE CONTAINER BIJ DE AFBEELDING */
.afbeelding-content-rechts {
    flex: 0 0 350px !important;
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-self: center !important; /* Veranderd van flex-start naar center voor balans */
    /* VERWIJDERD: De extra margin-top die het plaatje liet verspringen */
    margin-top: 0 !important; 
    z-index: 10 !important;
}

/* 2. DE GLOEIENDE RAND */
.scene-wrapper {
    position: relative !important;
    width: 320px !important;
    height: 320px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background: linear-gradient(45deg, #34d1c1, #f39c12) !important;
    padding: 7px !important;
    z-index: 1 !important;
    animation: morph-contact 20s ease-in-out infinite !important;
    box-shadow: 0 20px 50px rgba(52, 209, 193, 0.4) !important;
}

/* 3. DE AFBEELDING */
.hero-afbeelding {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border: 3px solid #ffffff !important; 
    border-radius: inherit !important;
    z-index: 2 !important;
    display: block !important;
    animation: morph-contact 20s ease-in-out infinite !important;
}

/* 4. DE ZEE-SCHITTERING (Subtiel achter de felle rand) */
.scene-wrapper::after {
    content: '';
    position: absolute;
    top: -15px; left: -15px; right: -15px; bottom: -15px;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.6) 0%, transparent 70%);
    border-radius: inherit;
    z-index: -1;
    filter: blur(5px);
    animation: glint-move 8s ease-in-out infinite alternate !important;
}

/* --- DE SOEPELE ANIMATIE STAPPEN --- */
@keyframes morph-contact {
    0%, 100% { border-radius: 63% 37% 55% 45% / 48% 62% 38% 52%; }
    20% { border-radius: 45% 55% 35% 65% / 60% 40% 55% 45%; }
    40% { border-radius: 70% 30% 50% 50% / 42% 58% 48% 52%; }
    60% { border-radius: 38% 62% 60% 40% / 65% 35% 55% 45%; }
    80% { border-radius: 55% 45% 40% 60% / 45% 60% 40% 55%; }
}

@keyframes glint-move {
    0% { transform: scale(0.9); opacity: 0.3; }
    100% { transform: scale(1.1); opacity: 0.7; }
}
/* De Turquoise Glans Knop */
.page-id-13 .knop-turquoise-glans {
    position: relative;
    display: inline-block;
    background-color: #34d1c1 !important; /* De exacte turquoise kleur uit je screenshot */
    color: #ffffff !important;
    font-family: 'Chewy', cursive !important;
    font-size: 20px !important; /* Kleiner en compacter */
    padding: 12px 35px !important;
    border-radius: 25px !important; /* Mooie ronde vorm zoals screenshot */
    text-decoration: none !important;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(52, 209, 193, 0.4) !important;
    border: none !important;
}

/* Het glanseffect (lichtstraal) */
.page-id-13 .knop-turquoise-glans::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right, 
        rgba(255,255,255,0) 0%, 
        rgba(255,255,255,0.3) 50%, 
        rgba(255,255,255,0) 100%
    );
    transform: skewX(-25deg);
}

/* Hover effect: Kleur wordt lichter en glans flitst eroverheen */
.page-id-13 .knop-turquoise-glans:hover {
    background-color: #4df0e0 !important; /* Lichtere turquoise tint */
    transform: scale(1.02);
    box-shadow: 0 6px 20px rgba(52, 209, 193, 0.6) !important;
}

.page-id-13 .knop-turquoise-glans:hover::before {
    left: 150%;
    transition: all 0.6s ease;
}
.copy-email:hover {
    color: #e67e22 !important;
    transition: 0.3s;
}


/* ==========================================================================
 CSS voor contact specifiek voor conatct formulier
   ========================================================================== */
/* Styling voor de klikbare links */
.copy-email, .contact-link {
    color: #f39c12 !important;
    font-weight: bold;
    text-decoration: underline;
    cursor: pointer;
}

/* De scheidingslijn */
.contact-divider {
    border: 0;
    height: 1px;
    background: rgba(243, 156, 18, 0.2);
    margin: 40px 0;
}

/* Formulier velden styling: wit glas-effect */
.contact-form-houder input, 
.contact-form-houder textarea {
    width: 100% !important;
    border-radius: 15px !important;
    border: 1px solid rgba(243, 156, 18, 0.3) !important;
    padding: 12px !important;
    margin-bottom: 10px !important;
    background: rgba(255, 255, 255, 0.9) !important;
}

/* De verzendknop: Oranje en rond */
.wpforms-submit-container button.wpforms-submit {
    background-color: #f39c12 !important;
    color: white !important;
    font-family: 'Chewy', cursive !important;
    border: none !important;
    padding: 12px 40px !important;
    border-radius: 50px !important;
    font-size: 20px !important;
    cursor: pointer !important;
    transition: 0.3s !important;
    box-shadow: 0 4px 10px rgba(243, 156, 18, 0.2) !important;
}

.wpforms-submit-container button.wpforms-submit:hover {
    background-color: #e67e22 !important;
    transform: scale(1.05);
}

/* De Turquoise Donatieknop (zoals je screenshot) */
.knop-turquoise-glans {
    position: relative;
    display: inline-block;
    background-color: #34d1c1 !important;
    color: #ffffff !important;
    font-family: 'Chewy', cursive !important;
    font-size: 20px !important;
    padding: 12px 35px !important;
    border-radius: 25px !important;
    text-decoration: none !important;
    overflow: hidden;
    transition: all 0.3s ease;
}


/* ==========================================================================
 CSS voor pagina "terugbetaal en retournieringsbeleid"
   ========================================================================== */
.pagina-10-uniek{
	margin-top: 40px !important ;}
.pagina-10-uniek .pagina-text{
	color: #1a1a1a !important;}
/* ==========================================================================
   Css winkelwagen
   ========================================================================== */
/* 1. De tabelkop en randen verfijnen */
.woocommerce-cart-form th {
    background-color: #f9f9f9 !important;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
    padding: 15px !important;
    border: none !important;
	background-color: rgba(255, 255, 255, 0.4) !important;
	
}

.woocommerce-cart-form table {
    border-radius: 15px !important;
    overflow: hidden !important;
   
	margin-top: 30px;
	
}

/* 2. De productfoto's in de winkelwagen rond maken */
.woocommerce-cart-form .product-thumbnail img {
    border-radius: 10px !important;
    width: 80px !important;
	
}

/* 3. Het aantal-veld (Quantity) mooi rond maken */
.woocommerce table.cart td.product-quantity .quantity input {
    border-radius: 20px !important;
    border: 1px solid #f39c12 !important; /* Jouw oranje */
    padding: 5px !important;
    width: 60px !important;
}

/* 4. De knoppen 'Winkelmand bijwerken' en 'Doorgaan naar afrekenen' */
button[name="update_cart"] {
    background-color: #eee !important;
    color: #333 !important;
    border-radius: 25px !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
}

.checkout-button {
    background-color: #f39c12 !important; /* Oranje */
    color: white !important;
    border-radius: 30px !important; /* Pil-vorm zoals je andere knop */
    padding: 15px 30px !important;
    font-size: 16px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    transition: transform 0.3s ease !important;
}

.checkout-button:hover {
    background-color: #e67e22 !important;
    transform: scale(1.02); /* Maakt de knop iets groter bij hover */
}

/* 5. De 'Winkelmand-totalen' box rechtsonder */
.cart_totals {
    background-color: #f9f9f9 !important;
    padding: 25px !important;
    border-radius: 20px !important;
    border: 1px solid #eee !important;
}

.cart_totals h2 {
    font-size: 20px !important;
    margin-bottom: 20px !important;
}

/* 1. Ruimte tussen kruisje (remove) en afbeelding verkleinen */
.woocommerce table.cart td.product-remove {
    padding-right: 0 !important;
    width: 30px !important;
}

.woocommerce table.cart td.product-thumbnail {
    padding-left: 10px !important;
}

/* 2. Achtergrond van de productrijen licht doorzichtig maken */
.woocommerce-cart-form table.cart tr.cart_item {
    background-color: transparent !important; /* Wit maar 60% doorzichtig */
    transition: background 0.3s ease;
}

.woocommerce-cart-form table.cart tr.cart_item:hover {
    background-color: rgba(255, 255, 255, 0.9) !important; /* Iets minder doorzichtig bij hover */
}
/* 1. Zorg dat de tabel de hoeken niet afkapt */
table.shop_table_responsive.cart {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

/* 2. Zoek de laatste rij met een product en rond de cellen af */
table.shop_table_responsive.cart tr:nth-last-child(2) td {
    border-bottom: none !important; /* Verwijder de rechte lijn tussen wit en grijs */
}

/* Linksonder van het witte gedeelte */
table.shop_table_responsive.cart tr:nth-last-child(2) td:first-child {
    border-bottom-left-radius: 20px !important;
    background-color: #ffffff !important; /* Forceer wit */
}

/* Rechtsonder van het witte gedeelte */
table.shop_table_responsive.cart tr:nth-last-child(2) td:last-child {
    border-bottom-right-radius: 20px !important;
    background-color: #ffffff !important; /* Forceer wit */
}

/* 3. Zorg dat de grijze balk een kleine ruimte krijgt zodat de ronding zichtbaar is */
.cart .actions {
    border-top: none !important;
    margin-top: 2px !important; 
}

/* ==========================================================================
   Css winkelwagen de stijl voor de knoppen 
   ========================================================================== */
/* 3. Waardebon veld en knop mooi rond maken */
/* Het invoerveld */
#coupon_code {
    border-radius: 25px !important;
    padding: 8px 20px !important;
    border: 1px solid #ddd !important;
    height: 45px !important;
}

/* De knop 'Waardebon toepassen' */
button[name="apply_coupon"] {
    border-radius: 25px !important;
    padding: 10px 25px !important;
    height: 45px !important;
    background-color: #333 !important; /* Zwart zoals je andere knoppen */
    color: #fff !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    border: none !important;
    margin-left: 10px !important;
}

/* 4. De knop 'Winkelmand bijwerken' ook afronden */
button[name="update_cart"] {
    border-radius: 25px !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
}

/* 1. Beide knoppen de basis oranje kleur geven */
button[name="apply_coupon"], 
.checkout-button {
    background-color: #f39c12 !important; /* Jouw oranje kleur */
    color: white !important;
    position: relative;
    overflow: hidden; /* Nodig voor het glans-effect */
    transition: all 0.3s ease !important;
}

/* 2. Het glans-effect toevoegen (animatie laag) */
button[name="apply_coupon"]::after,
.checkout-button::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        120deg, 
        transparent, 
        rgba(255, 255, 255, 0.4), 
        transparent
    );
    transition: all 0.5s ease;
}

/* 3. Het glans-effect activeren bij muis-over (hover) */
button[name="apply_coupon"]:hover::after,
.checkout-button:hover::after {
    left: 100%;
}

/* 4. Extra styling voor de knop 'Waardebon toepassen' */
button[name="apply_coupon"] {
    border-radius: 25px !important;
    padding: 10px 25px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    border: none !important;
}

/* 5. Subtiele hover voor de oranje kleur zelf */
button[name="apply_coupon"]:hover,
.checkout-button:hover {
    background-color: #e67e22 !important; /* Iets donkerder oranje bij hover */
}
/* 1. Ruimte boven en onder de Waardebon & Update balk */
.cart .actions {
    padding-top: 10px !important;    /* Ruimte boven de balk */
    padding-bottom: 0px !important; /* Ruimte onder de balk */
}

/* 2. Ruimte tussen de BTW-tekst en de grote oranje knop */
.cart-collaterals .cart_totals .wc-proceed-to-checkout {
    padding-top: 30px !important;    /* Extra witruimte boven de knop */
    padding-bottom: 20px !important; /* Ruimte aan de onderkant */
}

/* 3. Optioneel: Ruimte tussen de Waardebon-input en de knop zelf */
.cart .actions .coupon {
    margin-bottom: 15px !important; 
}

/* Maak de achtergrond van de waardebon-balk transparant */
.woocommerce-cart-form table.cart td.actions {
    background-color: transparent !important;
    border-top: none !important; /* Verwijdert het lijntje tussen wit en grijs */
}

/* Zorg dat de rij zelf ook geen kleur heeft */
.woocommerce-cart-form table.cart tr.actions {
    background-color: transparent !important;
}
/* ==========================================================================
   CSS winkelwagen btw laten zien
   ========================================================================== */
/* 1. Verberg de extra belastingrij */
.tax-total {
    display: none !important;
}

/* 2. Maak de hele regel onzichtbaar (inclusief de haakjes) */
.order-total .includes_tax small {
    color: transparent !important;
    font-size: 13px !important;
    display: inline-block !important;
}

/* 3. Maak alleen de onderdelen die we willen zien weer zichtbaar */
.order-total .includes_tax small .tax_label,
.order-total .includes_tax small .amount {
    color: #888 !important; /* De grijze kleur teruggeven */
    visibility: visible !important;
}

/* 4. Voeg 'inclusief' toe VOOR het percentage, zonder haakje */
.order-total .includes_tax small .tax_label::before {
    content: "inclusief " !important;
    color: #888 !important;
    margin-right: 2px;
}

/* 5. Voeg '% btw: ' toe ACHTER het percentage */
.order-total .includes_tax small .tax_label::after {
    content: "% btw: " !important;
    color: #888 !important;
}

/* 6. Zorg dat het bedrag er strak achter staat */
.order-total .includes_tax small .amount {
    margin-left: 2px;
}
/* ==========================================================================
Css Afreken pagina (pagina 8)
   ========================================================================== */
/* 1. VERWIJDER OVERBODIGE ELEMENTEN */
body.page-id-8 .woocommerce-info, 
body.page-id-8 .showcoupon,
body.page-id-8 .woocommerce-form-coupon-toggle,
body.page-id-8 #customer_details h3, 
body.page-id-8 #order_review_heading,
body.page-id-8 .woocommerce-terms-and-conditions {
    display: none !important;
}

/* 2. LAYOUT & SYMMETRIE (KOLOMMEN NAAST ELKAAR) */
/* 2. LAYOUT & SYMMETRIE (VEILIGER VOOR SCHERMBREEDTE) */
@media (min-width: 992px) {
    .page-id-8 .col2-set {
        width: 47% !important; /* Iets smaller gemaakt */
        float: left !important;
        margin-right: 3% !important;
        margin-left: 0 !important;
    }
    .page-id-8 #order_review {
        width: 50% !important; /* Rechterkant vult de rest */
        float: left !important;
        margin-right: 0 !important;
    }
    /* Centreer de hele afreken-sectie */
    .page-id-8 .woocommerce-checkout {
        max-width: 1200px !important;
        margin: 0 auto !important;
        display: block !important;
    }
}
/* Forceer tabelcellen om tekst af te breken als het te krap wordt */
.woocommerce table.cart td, 
.woocommerce table.cart th {
    word-break: break-word !important;
}

/* Verwijder eventuele negatieve margins die de boel naar rechts duwen */
.entry-content, .woocommerce {
    margin-right: 0 !important;
    padding-right: 0 !important;
}
/* 3. BLOK STYLING & TITELS (CHEWY ORANJE) */
.page-id-8 #customer_details, 
.page-id-8 #order_review {
    background-color: rgba(255, 255, 255, 0.7) !important;
    border-radius: 30px !important;
    padding: 30px !important;
    border: none !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
    margin-top: 30px !important;
    position: relative !important;
}

/* Titels binnen de blokken */
.page-id-8 #customer_details::before,
.page-id-8 #order_review::before {
    display: block !important;
    font-family: 'Chewy', cursive !important;
    font-size: 28px !important;
    color: #f39c12 !important;
    margin-bottom: 25px !important;
    font-weight: 400 !important;
}

.page-id-8 #customer_details::before { content: "Factuurgegevens"; }
.page-id-8 #order_review::before { content: "Je bestelling"; }

/* 4. ALGEMENE VOORWAARDEN & PRIVACY SECTIE */
.page-id-8 .woocommerce-terms-and-conditions-wrapper {
    background-color: rgba(255, 255, 255, 0.6) !important;
    padding: 20px !important;
    border-radius: 25px !important;
    margin-bottom: 25px !important;
    border: 1px solid rgba(243, 156, 18, 0.3) !important;
}

.page-id-8 .woocommerce-privacy-policy-text {
    font-size: 13px !important;
    color: #666 !important;
    margin-bottom: 15px !important;
}

.page-id-8 .woocommerce-terms-and-conditions-link,
.page-id-8 .woocommerce-privacy-policy-link,
.page-id-8 .mijn-eigen-voorwaarden-link {
    color: #f39c12 !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
}

.page-id-8 input#terms {
    width: 18px !important;
    height: 18px !important;
    margin-right: 12px !important;
}

/* 5. VELDEN & TABEL STYLING */
.page-id-8 input[type="text"], 
.page-id-8 input[type="email"], 
.page-id-8 input[type="tel"],
.page-id-8 textarea#order_comments {
    border-radius: 20px !important;
    border: 1px solid #ddd !important;
    padding: 12px 15px !important;
    background-color: #fff !important;
}

/* Fix voor Land/Regio selectieveld */
.page-id-8 .select2-container--default .select2-selection--single {
    border-radius: 20px !important;
    border: 1px solid #ddd !important;
    height: 48px !important;
    background-color: #fff !important;
    display: flex !important;
    align-items: center !important;
}

.page-id-8 .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 15px !important;
}

/* Productentabel rechts */
.page-id-8 .shop_table.woocommerce-checkout-review-order-table {
    border-radius: 20px !important;
    border: none !important;
    overflow: hidden !important;
    background-color: #ffffff !important;
    border-collapse: separate !important;
    width: 100% !important;
}

.page-id-8 .woocommerce-checkout-review-order-table tr td,
.page-id-8 .woocommerce-checkout-review-order-table tr th {
    border-bottom: 1px solid #f4f4f4 !important;
    padding: 15px !important;
}

/* 6. STRIPE VELDKLONTROL & ZICHTBAARHEID */
.page-id-8 #stripe-card-element, 
.page-id-8 .wc-stripe-elements-field,
.page-id-8 #wc-stripe-payment-element {
    background-color: #ffffff !important;
    border: 2px solid #f39c12 !important; /* Oranje rand voor herkenbaarheid */
    padding: 15px !important;
    border-radius: 20px !important;
    min-height: 50px !important;
    display: block !important;
    margin-top: 10px !important;
    visibility: visible !important;
}

.page-id-8 .StripeElement {
    width: 100% !important;
    color: #333333 !important;
}

/* Verberg onnodige Stripe teksten */
.page-id-8 .woocommerce-SavedPaymentMethods-new,
.page-id-8 .woocommerce-SavedPaymentMethods-save {
    display: none !important;
}

/* 7. BETAALKNOP (PLACE ORDER) */
.page-id-8 #place_order {
    background-color: #f39c12 !important;
    color: white !important;
    font-family: 'Chewy', cursive !important;
    border-radius: 50px !important;
    padding: 15px 30px !important;
    font-size: 24px !important; /* Lekker groot */
    border: none !important;
    transition: 0.3s !important;
    width: 100% !important; /* Knop over de hele breedte */
    margin-top: 20px !important;
}

.page-id-8 #place_order:hover {
    background-color: #e67e22 !important;
    transform: scale(1.03);
}

.page-id-8 .wc_payment_method label {
    font-weight: bold !important;
    color: #333 !important;
    margin-left: 10px !important;
}
/* Zorg dat de tabel nooit breder wordt dan de container */
.woocommerce-cart-form {
    width: 100% !important;
    max-width: 100vw !important; /* Voorkomt horizontaal scrollen */
}

.woocommerce-cart-form table.cart {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    table-layout: auto !important; /* Laat browser de kolombreedte bepalen */
}

/* ==========================================================================
  Css pagina voor nadat je hebt betaald 
   ========================================================================== */
/* 1. ACHTERGROND & KADER (Zelfde als je shop) */
.woocommerce-order-received .woocommerce-order {
    background: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    padding: 40px !important;
    border-radius: 40px !important;
    margin: 30px auto 60px auto !important;
    max-width: 900px !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1) !important;
    text-align: center;
}

/* 2. TITELS & BEDANKTEKST (CHEWY ORANJE) */
.woocommerce-order-received h2, 
.woocommerce-order-received h3,
.woocommerce-order-received .woocommerce-notice {
    font-family: 'Chewy', cursive !important;
    font-size: 2rem !important;
    color: #f39c12 !important;
    margin-bottom: 20px !important;
}

/* 3. DOWNLOAD SECTIE (VOOR JE DIGITALE PRODUCTEN) */
.woocommerce-order-received .woocommerce-table--order-downloads {
    background: white !important;
    border-radius: 25px !important;
    overflow: hidden !important;
    border: none !important;
    margin-bottom: 30px !important;
}

/* De knop om het bestand echt te downloaden */
.woocommerce-order-received .woocommerce-MyAccount-downloads-column-download-file a {
    background-color: #f39c12 !important;
    color: white !important;
    padding: 12px 25px !important;
    border-radius: 50px !important;
    font-family: 'Chewy', cursive !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: 0.3s !important;
}

.woocommerce-order-received .woocommerce-MyAccount-downloads-column-download-file a:hover {
    background-color: #e67e22 !important;
    transform: scale(1.05);
}

/* 4. BESTELLINGSDETAILS TABEL (ONDER DE DOWNLOADS) */
.woocommerce-order-received .shop_table.order_details {
    background: white !important;
    border-radius: 25px !important;
    border: none !important;
    padding: 20px !important;
}

.woocommerce-order-received .shop_table.order_details th,
.woocommerce-order-received .shop_table.order_details td {
    border-bottom: 1px solid #f4f4f4 !important;
    padding: 15px !important;
}

/* 5. LIJST MET BESTELGEGEVENS (Datum, Totaal, etc.) */
.woocommerce-order-overview.order_details {
    display: flex;
    justify-content: space-around;
    list-style: none;
    padding: 0;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.woocommerce-order-overview.order_details li {
    font-size: 14px;
    color: #666;
    text-transform: uppercase;
    font-weight: bold;
}

.woocommerce-order-overview.order_details li strong {
    display: block;
    font-size: 18px;
    color: #333;
    font-family: 'Chewy', cursive;
}
/* 1. DE COMPACTE DOWNLOAD KNOP */
.woocommerce-order-received .woocommerce-table--order-downloads .download-file a {
    background: #f39c12 !important;
    color: #ffffff !important;
    font-family: 'Fredoka', sans-serif !important;
    font-size: 14px !important; /* Kleiner font voor meer balans */
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    padding: 8px 20px !important; /* Minder witruimte, dus een kleinere knop */
    border-radius: 30px !important; /* Iets minder extreem rond */
    display: inline-block !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: 0 3px 10px rgba(243, 156, 18, 0.2) !important;
    border: none !important;
}

/* 2. SUBTIEL HOVER EFFECT */
.woocommerce-order-received .download-file a:hover {
    background: #e67e22 !important;
    transform: scale(1.03) !important; /* Subtieler effect dan voorheen */
    box-shadow: 0 5px 15px rgba(243, 156, 18, 0.4) !important;
}
/* ==========================================================================
   7. FOOTER (FULL WIDTH + BOEKENKAST)
   ========================================================================== */
.site-footer {
    background-image: url('https://dezolderschool.com/wp-content/uploads/2025/12/backgrounddd.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    position: relative !important;
    width: 100vw !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden !important;
	color: #ffffff !important;
}

.site-footer::before {
    content: "" !important;
    position: absolute !important;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(40, 40, 40, 0.50) !important;
    z-index: 1 !important;
	color: #ffffff !important;
}

.site-footer .col-full, .footer-container {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    justify-content: space-between !important;
    max-width: 1050px !important;
    margin: 0 auto !important;
    padding: 60px 20px 20px 20px !important;
    flex-wrap: wrap !important;
	color: #ffffff !important;
}

.footer-section {
    flex: 1;
    min-width: 250px;
    margin-bottom: 30px;
}

.footer-label {
    font-weight: 800;
    font-size: 12px;
    color: #f39c12;
    display: block;
    margin-bottom: 5px;
}

.footer-socials {
    display: flex !important;
    gap: 15px !important;
    margin-top: 15px !important;
}

.footer-socials a {
    color: #ffffff !important;
    font-size: 28px !important;
    transition: all 0.3s ease !important;
}

.footer-socials a:hover {
    color: #f39c12 !important;
    transform: translateY(-5px);
}

.site-footer .footer-bottom {
    position: relative !important;
    z-index: 2 !important;
    text-align: center !important;
    padding: 20px 0 !important;
    margin-top: 40px !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
}
.footer-widget h2, 
.footer-widget h3, 
.footer-widget h4,
.site-footer h2, 
.site-footer h3, 
.site-footer h4 {
    color: #ffffff !important;
    font-family: 'Chewy', cursive !important; /* Zorgt dat ze ook in Chewy staan */
    font-size: 24px !important; /* Pas dit aan naar wens */
    margin-bottom: 15px !important;
}
/* Maakt alle links in de footer wit */
.site-footer a, 
.footer-widget a,
.site-footer .widget_nav_menu ul li a {
    color: #ffffff !important;
    text-decoration: underline !important; /* Behoudt de streep zodat men ziet dat het een link is */
    font-family: 'Poppins', sans-serif !important;
    transition: color 0.3s ease !important;
}

/* Kleurverandering als je over de link hovert */
.site-footer a:hover, 
.footer-widget a:hover {
    color: #f39c12 !important; /* Wordt oranje bij hover, passend bij je stijl */
}
/* Verwijder alle puntjes bij de lijsten in de footer */
    .site-footer ul {
        list-style: none !important; /* Verwijdert de standaard WordPress bullets */
        padding: 0 !important;        /* Verwijdert de inspringing aan de linkerkant */
        margin: 0 !important;
    }
/* =========================================================
   DE ZOLDERSCHOOL – HEADER (SCHOON & STABIEL)
   - Content breedte = 1140px
   - Logo links (iets groter)
   - Menu gecentreerd
   - Cart naast "Contact"
   - Search verborgen
   - Minder verticale ruimte
   ========================================================= */

/* 0) Header compacter */
#masthead.site-header,
.storefront-primary-navigation{
  margin: 0 !important;
  padding: 0 !important;
}

/* 1) Container exact gelijk aan site-content */
.col-full .zolderschool-header-container{
  max-width: 1140px !important;
  margin: 0 auto !important;
  padding: 4px 20px !important;       /* was 8px -> minder ruimte boven/onder */
  box-sizing: border-box !important;

  /* 3-koloms grid voor perfecte centrering */
  display: grid !important;
  grid-template-columns: 110px 1fr 110px !important; /* links logo | midden menu | rechts spacer */
  align-items: center !important;
  column-gap: 18px !important;
  width: 100% !important;
}

/* 2) Logo links (iets groter) */
.zolderschool-custom-logo{
  grid-column: 1 !important;
  margin: 0 !important;
	  width: 120px !important;   /* 🔧 groter = hoger getal */
  height: 60px !important;   /* 🔧 hoogte aanpassen */
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
}

/* =========================================================
   HEADER – logo + menu netjes op 1 lijn (desktop + mobiel)
   ========================================================= */

/* 1) De hele header-rij netjes centreren */
.zolderschool-header-container{
  display: flex !important;
  align-items: center !important;    /* belangrijkste */
  justify-content: space-between !important;
}

/* 2) Links (logo) en rechts (nav) ook netjes centreren */
.zolderschool-custom-logo,
.zolderschool-header-right,
.zolderschool-navigation-row{
  display: flex !important;
  align-items: center !important;
}

/* 3) Logo: voorkom “zakken” door extra ruimte */
.zolderschool-custom-logo{
  margin: 0 !important;
  line-height: 0 !important;
}

/* Als jouw logo een background-image is: */
.zolderschool-custom-logo{
  width: 120px !important;   /* pas aan */
  height: 60px !important;   /* pas aan */
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
}


/* 3) Middenkolom: menu + mandje als 1 gecentreerde groep */
.zolderschool-header-right{
  grid-column: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* navigation-row = rij met menu + cart */
.zolderschool-header-right .zolderschool-navigation-row{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 4) Menu styling */
#site-navigation.main-navigation{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#site-navigation.main-navigation ul.menu{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 28px !important;               /* was 34px -> iets compacter */
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  width: auto !important;
}

/* 5) Cart naast "Contact" */
a.zolderschool-direct-cart{
  display: flex !important;
  align-items: center !important;
  margin-left: 12px !important;       /* afstand van Contact */
  font-size: 20px !important;

  position: static !important;
  transform: none !important;
  float: none !important;
  line-height: 1 !important;
}

/* 6) Search volledig weg */
.zolderschool-search-row{
  display: none !important;
}

/* =========================================================
   MOBIEL/TABLET – De Zolderschool (SCHOON)
   - Categorie kaarten responsive
   - Mobiel menu (zs-open) + submenu (submenu-open)
   - YouTube item met <br> netjes centreren
   ========================================================= */


/* =========================================================
   1) CATEGORIE-KAARTEN (MOBIEL/TABLET)
   ========================================================= */

/* Mobiel: 2 kolommen */
@media (max-width: 480px){
  .home-categories .category-grid{
    display:grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap:10px !important;
  }
}

/* Tablet: 3 kolommen */
@media (min-width: 481px) and (max-width: 768px){
  .home-categories .category-grid{
    display:grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap:12px !important;
  }
}

/* Gemeenschappelijk (mobiel + tablet) */
@media (max-width: 768px){

  .home-categories .category-card{
    min-width:0 !important;
  }

  .home-categories .card-image img{
    width:100% !important;
    height:auto !important;
    aspect-ratio: 3 / 4 !important;
    object-fit:cover !important;
    border-radius:14px !important;
  }

  .home-categories .category-card .card-content{
    padding:10px !important;
    border-radius:16px !important;
  }

  .home-categories .category-card .card-content h3{
    font-size:14px !important;
    line-height:1.15 !important;
    margin:8px 0 6px !important;
    white-space:normal !important;
    word-break:normal !important;
  }

  /* Beschrijving uit op mobiel */
  .home-categories .category-card .card-content p{
    display:none !important;
  }

  .home-categories .category-card .card-content a.btn-white{
    font-size:12px !important;
    padding:8px 12px !important;
    border-radius:999px !important;
    min-width:0 !important;
  }
}


/* =========================================================
   2) MOBIEL MENU (zs-open) – NETTE DROPDOWN
   ========================================================= */
@media (max-width: 768px){

  /* Header: simpel */
  .col-full .zolderschool-header-container{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    padding:8px 14px !important;
    gap:10px !important;
  }

  .zolderschool-custom-logo img{
    width:60px !important;
    max-width:60px !important;
    height:auto !important;
  }

  .zolderschool-header-right{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
  }

  /* Menu knop */
  #site-navigation .menu-toggle{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    float:none !important;
    cursor:pointer !important;
    position:relative !important;
    z-index:1000001 !important;
  }

  /* Cart naast knop */
  a.zolderschool-direct-cart{
    display:inline-flex !important;
    align-items:center !important;
    font-size:20px !important;
    margin:0 !important;
    position:relative !important;
    z-index:1000001 !important;
  }

  /* Nav zelf mag niet “smal” worden */
  #site-navigation{
    width:auto !important;
    max-width:none !important;
    position:relative !important;
  }

  /* Panel standaard dicht */
  #site-navigation .primary-navigation{
    display:none !important;
  }

  /* Panel open: fixed (werkt het meest stabiel op mobiel) */
  #site-navigation.zs-open .primary-navigation{
    display:block !important;

    position:fixed !important;
    left:14px !important;
    right:14px !important;
    top:120px !important; /* pas aan als nodig (bv 110px) */

    background:#fff !important;
    border-radius:16px !important;
    box-shadow:0 12px 30px rgba(0,0,0,.15) !important;
    padding:12px 0 !important;
    z-index:1000000 !important;
  }

  /* Menu lijst */
  #site-navigation .primary-navigation ul.menu{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    list-style:none !important;
    gap:0 !important;
  }

  /* Menu links: full width zodat layout niet raar wordt */
  #site-navigation .primary-navigation ul.menu > li{
    width:100% !important;
  }

  #site-navigation .primary-navigation ul.menu > li > a{
    display:block !important;
    width:100% !important;
    padding:12px 16px !important;
    text-align:center !important; /* hoofditems gecentreerd */
    font-size:16px !important;
    line-height:1.2 !important;
  }

  #site-navigation .primary-navigation ul.menu > li > a:hover{
    background:rgba(0,0,0,.04) !important;
  }
}


/* =========================================================
   3) SUBMENU (submenu-open) – Alleen open via JS (geen hover/focus hacks)
   ========================================================= */
@media (max-width: 768px){

  /* Submenu standaard dicht */
  #site-navigation .primary-navigation .sub-menu{
    display:none !important;
    margin:6px 0 10px 0 !important;
    padding:0 !important;
    list-style:none !important;
  }

  /* Open alleen als parent .submenu-open heeft (jouw JS doet dit) */
  #site-navigation .menu-item-has-children.submenu-open > .sub-menu{
    display:block !important;
  }

  /* Submenu items links uitlijnen + inspringen */
  #site-navigation .primary-navigation .sub-menu > li > a{
    display:block !important;
    width:100% !important;
    text-align:left !important;
    padding:10px 16px 10px 28px !important;
    font-size:15px !important;
  }
}


/* =========================================================
   4) YouTube item met <br> netjes centreren
   ========================================================= */
@media (max-width: 768px){

  /* Target specifiek YouTube menu-item */
  #site-navigation.zs-open a[href*="youtube"]{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    width:100% !important;
    line-height:1.2 !important;
  }

  /* Optie: br verbergen (maakt het 1 regel, meestal mooier) */
  #site-navigation.zs-open a[href*="youtube"] br{
    display:none !important;
  }
}
/* =========================================================
   HOME + MENU (MOBIEL) – OPSCHONEN & GECONSOLIDEERD
   - Menu: YouTube item netjes centreren (met <br>)
   - Home: Ontdek onze producten (3 kolommen)
   - Home: YouTube sectie (2 per rij, zichtbare thumbnails)
   - Home: Nieuwsbrief (compact + “Verzenden” 1 regel)
   ========================================================= */


/* =========================================================
   A) MOBIEL MENU – YouTube item met <br> centreren
   ========================================================= */
@media (max-width: 768px){
  #site-navigation.zs-open a[href*="youtube"]{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    width:100% !important;
    line-height:1.2 !important;
  }

  /* <br> verbergen zodat het netjes centreert */
  #site-navigation.zs-open a[href*="youtube"] br{
    display:none !important;
  }
}


/* =========================================================
   B) HOME – "ONTDEK ONZE PRODUCTEN" (mobiel)
   ========================================================= */
/* =========================================================
   HOME – Ontdek onze producten (groter, 3 naast elkaar)
   ========================================================= */

@media (max-width: 768px){

  /* Container breder maken */
  .home-categories{
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  /* Grid: altijd 3 kolommen */
  .home-categories .category-grid{
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important; /* ruimte tussen kaarten */
  }

  /* Kaarten visueel groter */
  .home-categories .category-card{
    transform: scale(1.08);
    transform-origin: top center;
  }

  /* Afbeeldingen mooier & groter */
  .home-categories .category-card img{
    width: 100% !important;
    height: auto !important;
    border-radius: 18px !important;
    display: block !important;
  }

  /* Tekst iets groter (optioneel maar mooi) */
  .home-categories .category-card h3{
    font-size: 14px !important;
  }
  .home-categories .category-card p{
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

/* HOME – titel "Ontdek onze producten" kleiner */
.home-categories .section-title{
  font-size: 26px !important;   /* pas aan: 24–30px */
  line-height: 1.2 !important;
  margin-bottom: 16px !important;
}
/* HOME – ruimte BOVEN "Ontdek onze producten" verkleinen */
.home-categories{
  padding-top: 12px !important;   /* probeer 8–16px */
  margin-top: 0 !important;
}
	}
/* =========================================================
   C) HOME – YOUTUBE SECTIE (mobiel)
   Doel: thumbnails zichtbaar + 2 per rij
   ========================================================= */
@media (max-width: 768px){

  /* Titel boven de video’s */
  .home-youtube h2,
  .home-youtube .section-title{
    font-size:10px !important;
    line-height:1 !important;
    text-align:center !important;
    margin:0 0 6px !important;
  }


  /* “De Zolderschool” titel kleiner */
  .home-youtube .channel-title,
  .home-youtube .youtube-title,
  .home-youtube h3{
    font-size:22px !important;
    line-height:1.2 !important;
    text-align:center !important;
    margin:0 0 14px !important;
  }
}
  /* =========================================================
   HOME – YouTube video’s: 2 naast elkaar
   ========================================================= */
/*Dit haalt de “onzichtbare rem” weg.*/
	
	@media (max-width: 768px){
  .home-youtube{
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}


@media (max-width: 768px){
  .home-youtube .youtube-grid,
  .home-youtube .video-grid,
  .home-youtube .videos,
  .home-youtube .video-list{
    grid-template-columns:1fr 1fr !important;
	  gap: 12px !important;
  }
}
@media (max-width: 768px){
  .home-youtube iframe{
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
  }
}


	/*  Extra: op super smal 1 per rij */
@media (max-width: 360px){
  .home-youtube .youtube-grid,
  .home-youtube .video-grid,
  .home-youtube .videos,
  .home-youtube .video-list{
    grid-template-columns: 1fr !important;
  }
}



/* =========================================================
   HOME – YOUTUBE TITELS (MOBIEL)
   ========================================================= */
@media (max-width: 768px){

  /* Bovenste titel: "Abonneer op ons YouTube-kanaal" */
  .home-youtube h2{
    font-size:16px !important;
    line-height:1.2 !important;
    margin-bottom:6px !important;
    text-align:center !important;
  }

  /* Oranje titel: "De Zolderschool" */
  .home-youtube h3,
  .home-youtube .channel-title{
    font-size:22px !important;   /* 🔑 dit was te groot */
    line-height:1.15 !important;
    margin:4px 0 14px !important;
    text-align:center !important;
  }
}
/* =========================================================
   HOME – NIEUWSBRIEF FORM (MOBIEL)
   ========================================================= */
/* =========================================================
   HOME – NIEUWSBRIEF (MOBIEL) – SCHOON & DEFINITIEF
   Doel: compact + input & knop onder elkaar + knoptekst 1 regel
   ========================================================= */
@media (max-width: 768px){

  /* Buitenruimte (optioneel) */
  .home-newsletter{
    padding: 18px !important;
  }

  /* Container */
  .home-newsletter .newsletter-container{
    padding: 18px !important;
    border-radius: 22px !important;
    margin: 20px 12px !important; /* kleine marge links/rechts */
  }

  /* Titel + tekst */
  .home-newsletter h2{
    font-size: 22px !important;
    line-height: 1.2 !important;
    margin: 0 0 8px !important;
    text-align: center !important;
  }

  .home-newsletter p{
    font-size: 13px !important;
    line-height: 1.35 !important;
    margin: 0 0 14px !important;
    text-align: center !important;
  }

  /* Input + knop onder elkaar */
  .home-newsletter .newsletter-fields,
  .home-newsletter form.newsletter-fields{
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  /* Input */
  .home-newsletter .newsletter-fields input[type="email"],
  .home-newsletter form.newsletter-fields input[type="email"],
  .home-newsletter input[type="text"]{
    width: 100% !important;
    height: 46px !important;
    padding: 0 16px !important;
    font-size: 14px !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
  }

  /* Knop */
  .home-newsletter .btn-send,
  .home-newsletter .newsletter-fields button,
  .home-newsletter .newsletter-fields input[type="submit"]{
    width: 100% !important;
    height: 46px !important;
    padding: 0 18px !important;
    font-size: 14px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    margin-left: 0 !important; /* belangrijk i.v.m. jouw desktop -5px */
  }
}


/* =========================================================
   HOME – YouTube titel (mobiel FIX)
   ========================================================= */
@media (max-width: 768px){

  .home-youtube .yt-title,
  .home-youtube .yt-main-link{
    font-size: 26px !important;
    line-height: 1.1 !important;
    margin: 8px 0 14px !important;
    text-align: center !important;
    display: block !important;
  }
}

/* =========================================================
   HOME – CATEGORIEKAARTEN (MOBIEL)
   - kaart oogt als 1 geheel (geen dubbele rondingen)
   - knop "Bekijk meer" kleiner + gecentreerd
   ========================================================= */
@media (max-width: 768px){

  /* 1) De kaart zelf is de "container" met ronde hoeken */
  .home-categories .category-card{
    border-radius: 18px !important;
    overflow: hidden !important;      /* 🔑 maakt img + content 1 geheel */
    background: transparent !important;
  }

  /* 2) Bovenste afbeelding: geen eigen rondingen */
  .home-categories .category-card .card-image{
    border-radius: 0 !important;
    overflow: hidden !important;
    line-height: 0 !important;
  }

  .home-categories .category-card .card-image img{
    border-radius: 0 !important;      /* 🔑 voorkomt “los” afgeronde hoeken */
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    aspect-ratio: 3 / 4 !important;
  }

  /* 3) Onderste content: ook geen eigen rondingen */
  .home-categories .category-card .card-content{
    border-radius: 0 !important;
    padding: 8px 10px 10px !important;
    text-align: center !important;
  }

  /* 4) Titel iets compacter (optioneel) */
  .home-categories .category-card .card-content h3{
    font-size: 12px !important;
    line-height: 1.15 !important;
    margin: 8px 0 8px !important;
  }

  /* 5) Knop kleiner + netjes gecentreerd */
  .home-categories .category-card .card-content a.btn-white{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 11px !important;
    padding: 7px 10px !important;
    border-radius: 999px !important;

    margin: 0 auto !important;        /* centreert */
    min-width: 0 !important;
  }
}

/* Extra strak op hele kleine schermen */
@media (max-width: 380px){
  .home-categories .category-card{ border-radius: 16px !important; }
  .home-categories .category-card .card-content a.btn-white{
    font-size: 10.5px !important;
    padding: 6px 9px !important;
  }
}
/* =========================================================
  CSS Mobiel PAGINA "over" (page-id-11) – MOBIEL FIX (schoon & safe)
   - PC blijft onaangetast
   - Blobs blijven bewegen
   - Afbeeldingen vullen blobs volledig
   - Telegram tekst + Instagram boven de blob
   ========================================================= */

@media (max-width: 768px){

  /* ---------- 1) Algemene layout: alles onder elkaar ---------- */
  .page-id-11 .about-flex-container{
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    padding: 18px 0 !important;
  }

  .page-id-11 .about-text-column,
  .page-id-11 .about-image-column{
    width: 100% !important;
    min-width: 0 !important;
  }

  .page-id-11 .about-image-column{
    display: flex !important;
    justify-content: center !important;
  }

  /* ---------- 2) Blob sizing: kleiner + responsive (animatie blijft) ---------- */
  .page-id-11 .custom-blob{
    width: min(88vw, 340px) !important; /* kleiner op mobiel */
    aspect-ratio: 16 / 11 !important;  /* voorkomt mega lege blob */
    height: auto !important;           /* hoogte volgt uit aspect-ratio */
    margin: 0 auto !important;
    overflow: hidden !important;
    background-size: cover !important;
    background-position: center !important;
    /* animation blijft zoals jij hem al hebt staan (niet uitschakelen) */
  }

  /* ---------- 3) Image IN blob: altijd volledig gevuld ---------- */
  .page-id-11 .custom-blob img{
    width: 100% !important;
    height: 100% !important;     /* 🔑 vult blob volledig */
    object-fit: cover !important;/* crop netjes */
    display: block !important;
    border-radius: 0 !important; /* 🔑 blob-shape bepaalt de rand, niet de img */
  }

  /* ---------- 4) Titels/tekst (als je dit al goed hebt mag je dit laten) ---------- */
  .page-id-11 h2.about-title{
    font-size: 22px !important;
    line-height: 1.15 !important;
    text-align: center !important;
    margin: 4px 0 10px !important;
  }

  .page-id-11 p.about-text{
    font-size: 14px !important;
    line-height: 1.55 !important;
    margin: 0 0 14px !important;
  }

  /* Verticale/oranje grote tekst weg op mobiel */
  .page-id-11 .about-full-width-align-left{
    display: none !important;
  }

  /* ---------- 5) Telegram sectie: tekst + Instagram BOVEN blob ---------- */
  .page-id-11 .telegram-flex-row{
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    align-items: stretch !important;
  }

  /* 🔑 Volgorde omdraaien: eerst tekst, dan afbeelding */
  .page-id-11 .telegram-text-box{
    order: 1 !important;
  }

  .page-id-11 .telegram-img-box{
    order: 2 !important;
    display: flex !important;
    justify-content: center !important;
  }

  /* Telegram blob ook netjes schalen */
  .page-id-11 .telegram-img-box .custom-blob{
    width: min(88vw, 340px) !important;
    aspect-ratio: 16 / 11 !important;
    height: auto !important;
    margin: 0 auto !important;
  }
}
@media (max-width: 768px){

  /* Instagram icoon centreren op mobiel */
  .page-id-11 a[href*="instagram"],
  .page-id-11 .instagram,
  .page-id-11 .instagram-icon{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 16px auto 0 !important;
  }

}
/* =========================================================
   WINKEL (MOBIEL) – 2 KOLOMMEN, GROTERE CARDS, GEEN LEGE PLEK
   - Fix voor Woo pseudo elements (:before/:after) die grid breken
   - Container breder (meer ruimte)
   - 2 koloms grid (geen swipe)
   - Badge kleiner + strak linksboven (ster blijft ster)
   ========================================================= */

@media (max-width: 768px){

  /* 0) Maak de shop container breder (Storefront/col-full etc.) */
  .woocommerce.archive .col-full,
  .woocommerce.archive .site-content,
  .woocommerce.archive #content{
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 1) Titel "Winkel" kleiner */
  .woocommerce-products-header__title.page-title,
  h1.woocommerce-products-header__title{
    font-size: 30px !important;
    line-height: 1.05 !important;
    margin: 0 0 10px !important;
  }

  /* 2) Categorie-pills compact (2 per rij) */
  .woocommerce-products-header .shop-category-nav{
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    gap:8px !important;
    margin: 8px 0 14px !important;
  }

  .woocommerce-products-header .shop-category-nav a.cat-pill{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    padding: 7px 10px !important;
    font-size: 12px !important;
    line-height: 1 !important;

    border-radius: 999px !important;
    white-space: nowrap !important;
    max-width: 48% !important;

    overflow:hidden !important;
    text-overflow: ellipsis !important;
    gap: 0 !important;
  }

  /* icons in pills weg */
  .woocommerce-products-header .shop-category-nav a.cat-pill i,
  .woocommerce-products-header .shop-category-nav a.cat-pill svg,
  .woocommerce-products-header .shop-category-nav a.cat-pill img,
  .woocommerce-products-header .shop-category-nav a.cat-pill .icon{
    display:none !important;
  }

  /* 3) BELANGRIJK: Woo clearfix pseudo elements UIT (anders “lege plek”) */
  .woocommerce ul.products::before,
  .woocommerce ul.products::after{
    content: none !important;
    display: none !important;
  }

  /* 4) Producten: 2 koloms grid */
  .woocommerce ul.products{
    display:grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;

    padding: 10px 0 22px !important;
    margin: 0 !important;

    overflow: visible !important;
  }

  /* Forceer dat elk product precies 1 grid-cell pakt */
  .woocommerce ul.products > li.product{
    grid-column: auto !important;
    width: auto !important;
    float: none !important;
    margin: 0 !important;

    padding: 12px !important;
    border-radius: 22px !important;

    position: relative !important; /* badge anchor */
  }

  /* 5) Afbeelding groter/netjes */
  .woocommerce ul.products > li.product a img{
    width: 100% !important;
    height: auto !important;
    display:block !important;
    border-radius: 16px !important;
  }

  /* 6) Titel + prijs compacter */
  .woocommerce ul.products > li.product .woocommerce-loop-product__title{
    font-size: 16px !important;
    line-height: 1.2 !important;
    margin: 10px 0 6px !important;

    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .woocommerce ul.products > li.product .price{
    font-size: 14px !important;
    font-weight: 800 !important;
    margin: 0 0 8px !important;
  }

  /* 7) Winkelwagen knop kleiner + perfect gecentreerd */
  .woocommerce ul.products > li.product a.button{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;

    margin: 6px auto 0 !important;
    border-radius: 999px !important;
    line-height: 1 !important;
  }

  .woocommerce ul.products > li.product a.button:before,
  .woocommerce ul.products > li.product a.button i,
  .woocommerce ul.products > li.product a.button svg{
    margin: 0 !important;
    line-height: 1 !important;
  }

  /* 8) Badge plugin: kleiner + strak linksboven (ster blijft ster) */
  .woocommerce ul.products > li.product .pbfw_square_data{
    position:absolute !important;
    top: 6px !important;
    left: 6px !important;
    right:auto !important;
    bottom:auto !important;

    z-index: 50 !important;

    transform: scale(0.55) !important;
    transform-origin: top left !important;

    pointer-events:none !important;
    background: transparent !important;
  }

  .woocommerce ul.products > li.product .pbfw_square_data b{
    font-size: 10px !important;
    line-height: 1.05 !important;
    font-weight: 800 !important;
    display:block !important;
    text-align:center !important;
    white-space: nowrap !important;
  }
}
/* =========================================================
   WINKEL (MOBIEL) – MEER BREEDTE + NAV 2 PER RIJ
   ========================================================= */
@media (max-width: 768px){

  /* 1) Haal de “grote container / randen” weg → meer ruimte */
  .woocommerce.archive .col-full,
  .woocommerce.archive .site-content,
  .woocommerce.archive #content,
  .woocommerce.archive #primary{
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  /* Storefront zet soms extra padding op deze wrappers */
  .woocommerce.archive .site-main,
  .woocommerce.archive .content-area{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 2) Navigatie pills: altijd 2 naast elkaar */
  .woocommerce-products-header .shop-category-nav{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    justify-content: center !important;
    margin: 10px auto 14px !important;
    padding: 0 10px !important;
    max-width: 420px !important; /* houdt het netjes */
  }

  .woocommerce-products-header .shop-category-nav a.cat-pill{
    width: 100% !important;
    max-width: none !important;
    justify-content: center !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  /* 3) Product grid: echt “halve scherm” look */
  .woocommerce ul.products{
    padding-left: 6px !important;
    padding-right: 6px !important;
    gap: 10px !important; /* iets smaller gap = grotere cards */
  }

  .woocommerce ul.products > li.product{
    padding: 10px !important;
    border-radius: 20px !important;
  }

  .woocommerce ul.products > li.product a img{
    border-radius: 14px !important;
  }
}
 /* =========================================================
   TOP BAR + MENU KNOP – MOBIEL (jouw header structuur)
   ========================================================= */
@media (max-width: 768px){

  /* 1) Top bar (oranje) compacter + tekst netjes */
  .zolderschool-top-bar{
    padding: 4px 8px !important;
  }
  .zolderschool-top-bar .top-bar-content p{
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }

  /* 2) Header rij: maak 'm position-context voor absolute centering */
  .zolderschool-header-container{
    position: relative !important;
    padding: 6px 10px !important; /* compacter */
    min-height: 56px !important;  /* voorkomt overlap */
  }
	}
 /* =========================================================
   HEADER – FORCEER MENU KNOP IN HET MIDDEN (MOBIEL)
   (overschrijft flex "right" container)
   ========================================================= */
@media (max-width: 768px){

  /* Header container = referentie voor absolute items */
  .zolderschool-header-container{
    position: relative !important;
  }

  /* Deze wrapper duwt alles naar rechts -> neutraliseren */
  .zolderschool-header-right{
    position: static !important;
    justify-content: flex-end !important; /* cart blijft rechts */
  }

  /* Menu knop: losmaken uit flex-flow en absoluut centreren */
  #site-navigation{
    position: static !important;
  }

  button#site-navigation-menu-toggle.menu-toggle{
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    z-index: 999 !important;
  }

  /* Winkelmandje altijd rechts houden */
  a.zolderschool-direct-cart{
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) scale(0.9) !important;
    z-index: 999 !important;
  }
}

/* =========================================================
   HEADER – MENU KNOP (mobiel) FIX: icoon + tekst netjes
   ========================================================= */
@media (max-width: 768px){

  /* De knop zelf */
  #site-navigation-menu-toggle.menu-toggle{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;

    background: #f39c12 !important;
    color: #fff !important;
    border: 0 !important;

    border-radius: 999px !important;
    padding: 10px 18px !important;

    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    text-indent: 0 !important;     /* 🔑 als theme tekst verbergt */
    white-space: nowrap !important;

    box-shadow: 0 6px 14px rgba(243,156,18,0.35) !important;
  }

  /* BELANGRIJK: géén pseudo-hamburger toevoegen */
  #site-navigation-menu-toggle.menu-toggle::before,
  #site-navigation-menu-toggle.menu-toggle::after{
    content: none !important;
  }

  /* Zorg dat alle onderdelen in de knop zichtbaar blijven */
  #site-navigation-menu-toggle.menu-toggle,
  #site-navigation-menu-toggle.menu-toggle *{
    color: #fff !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Icoon netjes */
  #site-navigation-menu-toggle.menu-toggle svg,
  #site-navigation-menu-toggle.menu-toggle i,
  #site-navigation-menu-toggle.menu-toggle .dashicons,
  #site-navigation-menu-toggle.menu-toggle .icon{
    margin: 0 !important;
    display: inline-block !important;
    line-height: 1 !important;
  }

  /* Tekst “Menu” (als die in een span zit) */
  #site-navigation-menu-toggle.menu-toggle span{
    display: inline-block !important;
    font-size: 14px !important;
    line-height: 1 !important;
  }
}
@media (max-width: 768px){

  /* Laat de tekst-span bestaan (NIET verbergen) */
  #site-navigation-menu-toggle.menu-toggle span{
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
  }

  /* Verberg ALLEEN de hamburger-streepjes */
  #site-navigation-menu-toggle.menu-toggle span::before,
  #site-navigation-menu-toggle.menu-toggle span::after{
    content: "" !important;
    display: none !important;
    background: none !important;
    box-shadow: none !important;
  }

  /* Als je theme de tekst niet toont, forceer "Menu" */
  #site-navigation-menu-toggle.menu-toggle span:empty::after{
    content: "Menu" !important;
    display: inline-block !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    line-height: 1 !important;
  }

  /* Extra zekerheid: geen rare lijn/outline */
  #site-navigation-menu-toggle.menu-toggle{
    outline: none !important;
    box-shadow: none !important;
  }
}
/* MOBIEL: ruimte tussen titel "Winkel" en categorie-knoppen kleiner */
@media (max-width: 768px){

  body.post-type-archive-product h1.woocommerce-products-header__title.page-title{
    margin-bottom: 4px !important;   /* probeer 0–6px */
    padding-bottom: 0 !important;
  }

  body.post-type-archive-product header.woocommerce-products-header{
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  body.post-type-archive-product .shop-category-nav{
    margin-top: 4px !important;      /* of 0 */
  }
}
@media (max-width: 768px){
  body.post-type-archive-product main#main{
    padding-top: 0 !important;
  }
}
/* MOBIEL – ruimte bovenaan (tussen titel "Winkel" en de container eronder) kleiner */
@media (max-width: 768px){

  /* 1) Breadcrumb ruimte weg (vaak de grote boosdoener) */
  .storefront-breadcrumb{
    margin: 10px !important;
    padding: 0 !important;
  }

  /* 2) Header blok rond de titel + categorieën compacter */
  body.archive.post-type-archive-product header.woocommerce-products-header{
    margin: 0 0 6px !important;
    padding: 0 !important;
  }

  /* 3) Titel zelf: geen extra ruimte */
  body.archive.post-type-archive-product h1.woocommerce-products-header__title.page-title,
  body.archive.post-type-archive-product .page-title{
    margin: 0 0 6px !important;   /* zet naar 0px als je nóg strakker wil */
    padding: 0 !important;
	   margin-bottom: 12px !important; /* probeer 10–16px */
  }

  /* 4) Categorie-knoppen: minder “lucht” boven/onder */
  body.archive.post-type-archive-product .shop-category-nav{
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 5) Productlijst: haal eventuele margin-top weg */
  body.archive.post-type-archive-product ul.products{
    margin-top: 6px !important;   /* zet naar 0px als je wil */
  }

  /* 6) Soms zit het in de content containers */
  body.archive.post-type-archive-product #primary,
  body.archive.post-type-archive-product main#main{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}
/* CSS Pagina WInkel MOBIEL – kleine, nette ruimte tussen header en winkel-container */
@media (max-width: 768px){

  /* ruimte Tussen de header en container */
  header.site-header{
    margin-bottom: 10px !important; /* speel met 8–14px */
  }

  /* extra zekerheid: eerste contentblok iets laten zakken */
  body.archive.post-type-archive-product #content{
    padding-top: 6px !important;
  }
}
/* CSS Winkel MOBIEL – ruimte tussen Titel "winkel" en bovenkant tot aan container */
@media (max-width: 768px){

  /* Dit is het blok waar de titel + categorieën in zitten */
  body.archive.post-type-archive-product header.woocommerce-products-header{
    padding-top: 14px !important;   /* <- meer ruimte boven de titel */
    margin-top: 0 !important;
  }

  /* Zorg dat de titel zelf geen rare top-margin heeft */
  body.archive.post-type-archive-product h1.woocommerce-products-header__title{
    margin-top: 0 !important;
  }

}

/* MOBIEL – minder ruimte tussen categorieknoppen en producten */
@media (max-width: 768px){

  /* onderkant header (titel + categorieën) */
  header.woocommerce-products-header{
    margin-bottom: 6px !important;
    padding-bottom: 0 !important;
  }

  /* Storefront voegt vaak extra sorteer-ruimte toe */
  .storefront-sorting{
    display: none !important;
  }

  /* productlijst iets omhoog trekken */
  ul.products{
    margin-top: 6px !important;
  }
}

	
/*CSS WINKEL MOBIEL – badge echt strak linksboven */
@media (max-width: 768px){

  /* hoofd-wrapper van de badge */
  .woocommerce ul.products li.product .pbfw_square_data{
    top: -6px !important;
    left: -6px !important;
    right: auto !important;
    bottom: auto !important;
  }

  /* zorg dat niets hem terugduwt */
  .woocommerce ul.products li.product{
    overflow: visible !important;
  }
}
@media (max-width: 768px){

  /* ===============================
     1️⃣ SCALE UITZETTEN (BELANGRIJK)
     =============================== */
  .woocommerce ul.products li.product .pbfw_square_data,
  .woocommerce ul.products li.product .pbfw_offers{
    transform: none !important;
  }

  /* ===============================
     2️⃣ RONDJE "GRATIS" GROTER
     =============================== */
  .woocommerce ul.products li.product .pbfw_circle{
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .woocommerce ul.products li.product .pbfw_circle b{
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }
	}

@media (max-width: 768px){


  /* Rondje (Gratis) iets kleiner */
  .woocommerce ul.products li.product .pbfw_circle{
    width: 56px !important;                 /* was 64 */
    height: 56px !important;
  }
  .woocommerce ul.products li.product .pbfw_circle b{
    font-size: 13px !important;
  }
}
/* WINKEL – MOBIEL: badge tekst groter + Gezins prijs op 2 regels */
@media (max-width: 768px){

  /* Badge tekst iets groter */
  .woocommerce ul.products li.product .pbfw_square_data b{
    font-size: 13px !important;      /* was ~12px */
    line-height: 1.05 !important;
    font-weight: 800 !important;

    /* laat tekst netjes wrappen */
    white-space: normal !important;
    text-align: center !important;
    display: block !important;
  }

  /* Specifiek: forceer “Gezins prijs” onder elkaar */
  .woocommerce ul.products li.product .pbfw_square_data b{
    max-width: 48px !important;      /* dwingt regelafbreking */
    word-break: break-word !important;
  }
}
	
/* =========================================================
   Css Pagina "youtube de zolderschool" Mobiel/Tablad
   ========================================================= */	
	/* =========================
   RESPONSIVE: Tablet + Mobiel
   Page 47
   ========================= */

/* Tablet: onder elkaar of netter uitlijnen */
@media (max-width: 1024px){
  .pagina-47-uniek .hoofd-glas-container{
    padding: 28px !important;
    max-width: 95% !important;
  }

  .pagina-47-uniek .inhoud-wrapper{
    gap: 22px !important;
  }

  .pagina-47-uniek .titel-groen{
    font-size: 32px !important;
  }

  .pagina-47-uniek .beschrijving{
    font-size: 16px !important;
  }

  /* TV frame iets kleiner op tablet */
  .pagina-47-uniek .tv-frame{
    max-width: 360px !important;
  }
}

/* Mobiel: alles onder elkaar */
@media (max-width: 768px){
  .pagina-47-uniek .hoofd-glas-container{
    padding: 18px !important;
    border-radius: 26px !important;
    max-width: 96% !important;
  }

  .pagina-47-uniek .inhoud-wrapper{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 18px !important;
  }

  .pagina-47-uniek .tekst-sectie,
  .pagina-47-uniek .afbeelding-sectie{
    flex: 1 1 auto !important;
    width: 100% !important;
  }

  .pagina-47-uniek .titel-groen{
    font-size: 28px !important;
    margin-top: 0 !important;
  }

  .pagina-47-uniek .beschrijving{
    font-size: 15.5px !important;
    line-height: 1.65 !important;
  }

  .abonneer-button{
    width: 100% !important;
    text-align: center !important;
    padding: 14px 18px !important;
    font-size: 17px !important;
  }
	
  /* TV afbeelding mooi gecentreerd */
  .pagina-47-uniek .afbeelding-sectie{
    text-align: center !important;
  }

  .pagina-47-uniek .tv-frame{
    max-width: 320px !important;
    width: 100% !important;
    margin: 0 auto !important;
  }

  /* Titel videos */
  .titel-oranje-center{
    font-size: 26px !important;
    margin-top: 10px !important;
  }

  /* Video cards kleiner zodat er meer zichtbaar is */
  .pagina-47-uniek .video-card{
    min-width: 160px !important;
    max-width: 160px !important;
  }

  /* Slider rustiger op mobiel */
  .pagina-47-uniek .video-track.marquee{
    animation-duration: 420s !important;
  }
}

/* Extra klein mobiel */
@media (max-width: 420px){
  .pagina-47-uniek .tv-frame{
    max-width: 280px !important;
  }

  .pagina-47-uniek .video-card{
    min-width: 150px !important;
    max-width: 150px !important;
  }
}

/* CSS Pagina Darija --- TABLET (Schermen kleiner dan 1100px) --- */
@media only screen and (max-width: 1100px) {
    .pagina-50-uniek .inhoud-wrapper {
        padding: 30px; /* Iets minder padding op tablets */
        max-width: 95%;
    }

    .flashy-blob-hart {
        width: 100% !important; /* Blob vult de beschikbare ruimte */
        max-width: 450px; /* Maar wordt niet té groot */
        height: 300px;
    }

    .hart-sectie {
        flex: 0 0 450px;
    }
}
/* Tablet + mobiel: afbeelding boven tekst */
@media (max-width: 1024px){

  .pagina-47-uniek .inhoud-wrapper{
    flex-direction: column !important;
  }

  /* Afbeelding eerst */
  .pagina-47-uniek .afbeelding-sectie{
    order: 1 !important;
    text-align: center !important;
  }

  /* Tekst eronder */
  .pagina-47-uniek .tekst-sectie{
    order: 2 !important;
  }

  /* TV frame netjes centreren */
  .pagina-47-uniek .tv-frame{
    margin: 0 auto 12px !important;
  }
}

/* CSS Pagina Darija -- MOBIEL (Schermen kleiner dan 768px) --- */
@media only screen and (max-width: 767px) {
    
    /* 1. Alles onder elkaar zetten */
    .boven-sectie {
        flex-direction: column-reverse !important; /* Foto boven de tekst */
        align-items: center;
        gap: 20px;
    }

    /* 2. De wrapper compacter maken */
    .pagina-50-uniek .inhoud-wrapper {
        padding: 20px; /* Bespaar ruimte op kleine schermen */
        border-radius: 20px;
    }

    /* 3. De Blob aanpassen voor mobiel */
    .hart-sectie {
        flex: 0 0 auto;
        width: 100%;
        justify-content: center;
        margin-top: 10px;
    }

    .flashy-blob-hart {
        width: 280px !important; /* Kleiner op telefoon */
        height: 200px !important;
        margin: 0 auto;
    }

    /* 4. Tekst centreren voor betere look op mobiel */
    .pagina-hoofdtitel {
        text-align: center !important;
        font-size: 28px;
    }

    .tekst-content-boven, .onder-tekst-sectie {
        text-align: center;
    }

    /* 5. De knop iets compacter */
    .abonneer-knop-flashy {
        width: 100%; /* Knop over de hele breedte is makkelijker klikbaar */
        box-sizing: border-box;
        padding: 14px 20px;
    }
}
/* CSS Pagina "Contact" - MOBIELE OPTIMALISATIE (Schermen kleiner dan 768px) */
@media only screen and (max-width: 767px) {

  /* 1. Zet tekst en afbeelding onder elkaar */
  .flex-contact-bovenkant {
    flex-direction: column-reverse !important; /* Afbeelding boven de tekst */
    gap: 20px !important;
    align-items: center !important;
    text-align: center !important;
  }

  /* 2. Reset de negatieve marge */
  .afbeelding-content-rechts {
    flex: 0 0 auto !important;
    margin-top: 1px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
    justify-content: center !important;
  }

  /* 3. Blob kleiner */
  .scene-wrapper {
    width: 240px !important;
    height: 240px !important;
  }

  /* 4. Knop niet te breed */
  .page-id-13 .knop-turquoise-glans {
    width: auto !important;
    display: inline-block !important;
    font-size: 18px !important;
    padding: 10px 25px !important;
  }

  /* Center de tekstkolom */
  .contact-tekst-links {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .pagina-13-uniek .pagina-hoofdtitel {
    text-align: center !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
/* =========================================================
   SINGLE PRODUCT – RESPONSIVE LAYOUT (mobile / tablet / desktop)
   ========================================================= */

/* 0) Algemene top spacing onder header (gelijk gevoel als andere pagina’s) */
body.single-product #content.site-content{
  padding-top: 40px !important;
}

/* 1) Houd alles mooi binnen een vaste max breedte */
body.single-product #primary,
body.single-product div.product{
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 2) Voorkom dat er extra “dubbele” ruimte boven jouw kaart komt */
body.single-product #primary{
  margin-top: 0 !important;
}

/* 3) Nettere kaarten (blijven zoals jij wil) */
body.single-product #primary{
  background: rgba(255, 255, 255, 0.40);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 34px;
  border-radius: 40px;
  border: 1px solid rgba(255, 255, 255, 0.40);
  box-shadow: 0 20px 50px rgba(0,0,0,0.10);
}

/* 4) Tabs container netjes */
body.single-product div.product .woocommerce-tabs{
  margin-top: 22px;
}

/* =========================================================
   TABLET (<= 1024px)
   ========================================================= */
@media (max-width: 1024px){

  body.single-product #primary{
    padding: 26px;
    border-radius: 30px;
  }

  body.single-product div.product,
  body.single-product #primary{
    max-width: 920px !important;
  }

  /* Iets kleinere titel op tablet */
  body.single-product .product_title{
    font-size: 2.4rem !important;
    line-height: 1.15;
  }
}

/* =========================================================
   MOBILE (<= 768px)
   ========================================================= */
@media (max-width: 768px){

  /* header spacing: iets hoger als je header + topbar overlap geeft */
  body.single-product #content.site-content{
    padding-top: 55px !important;
  }

  /* Strakker en smaller padding op mobiel */
  body.single-product #primary{
    padding: 18px;
    border-radius: 24px;
  }

  /* Zet product layout op 1 kolom */
  body.single-product div.product{
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  body.single-product div.product div.images,
  body.single-product div.product .summary.entry-summary{
    float: none !important;
    width: 100% !important;
  }

  /* Zorg dat de afbeelding niet gigantisch wordt */
  body.single-product div.product div.images img{
    width: 100% !important;
    height: auto !important;
  }

  /* Titel en prijs kleiner op mobiel */
  body.single-product .product_title{
    font-size: 2rem !important;
    line-height: 1.15;
  }

  body.single-product p.price,
  body.single-product span.price{
    font-size: 1.6rem !important;
  }

  /* Tabs/panel padding op mobiel */
  body.single-product div.product .woocommerce-tabs{
    padding: 16px !important;
    border-radius: 22px !important;
  }

  body.single-product .woocommerce-tabs .woocommerce-Tabs-panel{
    padding: 18px !important;
    border-radius: 18px !important;
  }

  /* Button full width op mobiel (mooier + beter UX) */
  body.single-product .cart .button{
    width: 100% !important;
    text-align: center;
  }

  /* Aantal veld iets netter */
  body.single-product form.cart div.quantity{
    margin-right: 10px;
  }
}

/* =========================================================
   EXTRA KLEIN (<= 480px)
   ========================================================= */
@media (max-width: 480px){
  body.single-product #content.site-content{
    padding-top: 60px !important;
  }

  body.single-product #primary{
    padding: 16px;
  }

  body.single-product .product_title{
    font-size: 1.75rem !important;
  }
}
/* =========================================================
   code vanuit extra csss
   ========================================================= */
/* 1. Herstel de witte container (het kader) */
.woocommerce-cart-form {
    display: block !important;
   background: rgba(255, 255, 255, 0.3) !important; /* Wit vlak teruggeven */
    border-radius: 20px !important; /* Je mooie ronde hoeken */
    padding: 30px !important;       /* Ruimte binnen het kader */
    margin: 30px auto !important;   /* Ruimte buiten het kader en centreren */
    max-width: 1200px !important;   /* Maximale breedte van je site */
    width: 95% !important;          /* Zorgt voor een kleine marge op mobiel */
    box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important; /* Subtiele schaduw */
}

/* 2. Zorg dat de tabel binnen deze nieuwe container blijft */
.woocommerce-cart-form table.cart {
    width: 100% !important;
    border-collapse: separate !important;
    table-layout: auto !important;
}

/* 3. Fix voor de tekst en kolommen */
.woocommerce table.cart td, 
.woocommerce table.cart th {
    padding: 15px 10px !important;
    border-bottom: 1px solid #f4f4f4 !important;
}
/* ==========================================================================
   FIX VOOR TOTALEN WINKELWAGEN (HET ONDERSTE BLOK)
   ========================================================================== */

.cart-collaterals, 
.cart-collaterals .cart_totals {
    display: block !important;
    background: rgba(255, 255, 255, 0.3) !important; /* Geeft het ook een wit vlak */
    border-radius: 20px !important; /* Zelfde ronde hoeken als boven */
    padding: 30px !important;       /* Zelfde ruimte binnenin */
    margin: 30px auto !important;   /* Zorgt dat het in het midden blijft */
    width: 100% !important;         /* Vult het scherm, maar niet eroverheen */
    max-width: 1200px !important;   /* Zelfde breedte als de tabel boven */
    box-sizing: border-box !important;
    float: none !important;         /* Zorgt dat hij niet naar rechts ontsnapt */
    clear: both !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
}

/* Zorg dat de tabel binnen dit witte vlak ook 100% breed is */
.cart_totals table.shop_table {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
}

/* Lijn de bedragen netjes uit binnen het nieuwe witte vlak */
.cart_totals .shop_table td, 
.cart_totals .shop_table th {
    padding: 15px 0 !important;
    text-align: left !important;
}

.cart_totals .shop_table td {
    text-align: right !important; /* Bedragen aan de rechterkant van het witte vlak */
}
body::after{ content: none !important; display:none !important; }
/* Verwijder de irritante 'Loaded' melding */

/* 1. Breek de Storefront-container open die boven je footer zit */
.site-footer .col-full, 
.site-content .col-full {
    max-width: 100% !important; /* Haal de 1100px limiet weg */
    width: 100% !important;
    margin-left: 0 !important;   /* Dwing de container naar links */
    margin-right: 0 !important;
    padding: 0 !important;
}

/* 1. Centreer de titel 'Totalen winkelwagen' */
.cart-collaterals .cart_totals h2 {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    margin-bottom: 20px !important;
}

/* 2. Geef de inhoud van de tabel ruimte (padding) aan de zijkanten */
.cart_totals table.shop_table th, 
.cart_totals table.shop_table td {
    padding-left: 25px !important;  /* Ruimte links */
    padding-right: 25px !important; /* Ruimte rechts */
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

/* 3. Zorg dat de tabel niet de volledige 100% breedte van de container raakt */
.cart_totals table.shop_table {
    width: 95% !important; 
    margin: 0 auto !important; /* Centreer de tabel binnen het witte vlak */
}

/* Maak de randen van de totalen-tabel rond */
.cart_totals table.shop_table {
    border-collapse: separate !important; /* Nodig om ronde hoeken te tonen */
    border-radius: 15px !important;       /* De ronding */
    overflow: hidden !important;          /* Zorgt dat de achtergrond niet buiten de bocht vliegt */
    border: none !important;              /* Verwijdert eventuele standaard lijntjes */
    background-color: rgba(255, 255, 255, 0.5) !important; /* Maakt de tabel zelf ook licht doorzichtig */
}

/* Verwijder de laatste lijn onderaan de tabel voor een strakker resultaat */
.cart_totals table.shop_table tr:last-child td, 
.cart_totals table.shop_table tr:last-child th {
    border-bottom: none !important;
}

/* ==========================================================================
   VIDEO-SECTIE: AANGEPASTE BLOKGROOTTE
   ========================================================================== */

/* 1. Container instellingen */
.video-card, 
.video-container, 
.video-block {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
    text-align: center !important;
}

/* 2. De Video Kaart - HIER IS DE GROOTTE AANGEPAST */
.video-card {
    min-width: 400px !important; /* Maakt het blok groter */
    flex: 0 0 auto !important;
    scroll-snap-align: start !important;
}

/* 3. De Afbeelding: Volledig zichtbaar */
.video-card img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    border-radius: 12px !important;
    border: 5px solid #ffffff !important;
    transition: all 0.2s ease-in-out !important;
    display: block !important;
    box-shadow: none !important; 
}

/* 4. De Hover: Alleen de rand wordt jouw oranje */
.video-card:hover img {
    border: 6px solid #ff9800 !important; 
    transform: scale(1.03) !important;
    box-shadow: none !important;
}

/* Verberg vlaggetjes, labels en icoontjes */
.video-card .badge, 
.video-card .flag, 
.video-card .category-label,
.video-card i, 
.video-card span:not(.video-title) {
    display: none !important;
}
/* ====== HOME YouTube Marquee (scoped) ====== */

.home-youtube .yt-marquee{
  width: 100%;
  overflow: hidden;
  padding: 10px 0 0;
  margin-top: 10px;
  /* optioneel: zachte fade aan randen */
  mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.home-youtube .yt-track{
  display: flex;
  gap: 18px;
  width: max-content;
  align-items: stretch;
  will-change: transform;
}

.home-youtube .yt-track.marquee{
  animation: homeYtScroll 300s linear infinite; /* ✅ snelheid: groter = langzamer */
}

.home-youtube .yt-marquee:hover .yt-track.marquee{
  animation-play-state: paused;
}

/* Video kaart */
.home-youtube .yt-card{
  flex: 0 0 auto;
  width: 260px;
  background: transparent;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: #111;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  border: 4px solid #fff;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.home-youtube .yt-card:hover{
  transform: translateY(-6px);
  border-color: #f39c12;
  box-shadow: 0 14px 30px rgba(0,0,0,0.12);
}

.home-youtube .yt-thumb{
  width: 100%;
  aspect-ratio: 16/9;
  display: block;
  object-fit: cover;
}

.home-youtube .yt-title{
  display: block;
  padding: 10px 12px 12px;
  font-family: "Chewy", cursive;
  color: #ff9800;
  font-size: 16px;
  line-height: 1.25;
}

/* Loading tekst */
.home-youtube .yt-loading{
  display: block;
  padding: 10px 12px;
  background: rgba(255,255,255,0.9);
  border-radius: 12px;
}

/* Animatie: schuif precies de helft (we dupliceren track) */
@keyframes homeYtScroll{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Mobiel */
@media (max-width: 768px){
  .home-youtube .yt-card{
    width: 190px;
  }

  .home-youtube .yt-track.marquee{
    animation: homeYtScroll 300s linear infinite !important;
    /* ↑ hoger getal = LANGZAMER */
  }
}


/* =========================================================
   FIX: YouTube/Video cards responsive op mobiel & tablet
   Desktop blijft zoals jij had
   ========================================================= */

@media (max-width: 1024px){
  /* Dit is de boosdoener */
  .video-card{
    min-width: 0 !important;
    width: 80vw !important;       /* 1 kaart per swipe gevoel */
    max-width: 320px !important;  /* tablet max */
  }
}

@media (max-width: 768px){
  .video-card{
    width: 75vw !important;
    max-width: 260px !important;
  }
}
@media (max-width: 768px){
  .home-youtube .yt-marquee{
    padding-top: 6px !important;
    margin-top: 6px !important;
  }

  .home-youtube .yt-track{
    gap: 12px !important;
  }

  .home-youtube .yt-card{
    width: 165px !important;      /* compacter dan 190 */
    border-width: 3px !important;
  }

  .home-youtube .yt-title{
    font-size: 13px !important;
    padding: 8px 10px 10px !important;
  }
}
/* =========================================================
   TABLET EXACT FIX – werkt voor iPad / Android tablets
   ========================================================= */
/* Tablet preview (Customizer) kan variëren: pak een brede veilige range */
@media (min-width: 600px) and (max-width: 1024px){
  body.home section.home-categories .category-grid{
    gap: 16px !important;
    column-gap: 16px !important;
    row-gap: 16px !important;
  }
}

/* ===== Darija playlist responsive fix ===== */
.playlist-grid-sectie{
  max-width: 1100px;
  margin: 0 auto;
}

.video-scroll-box{
  width: 100%;
  border-radius: 22px;
  overflow: hidden;              /* mooie ronde hoeken */
  background: rgba(255,255,255,0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.35);
}

/* Maak iframe responsief met aspect-ratio */
.video-scroll-box iframe{
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;          /* ✅ dit is de sleutel */
  border: 0;
}

/* Tablet: iets grotere hoogte mag */
@media (min-width: 769px) and (max-width: 1100px){
  .video-scroll-box iframe{
    aspect-ratio: 16 / 10;
  }
}

/* Mobiel: beetje compacter */
@media (max-width: 768px){
  .playlist-titel{
    font-size: 20px;
    text-align: center;
  }
  .video-scroll-box{
    border-radius: 16px;
  }
}

@media (max-width: 1024px){
  #site-navigation li > ul.sub-menu{
    display: none !important;
  }

/* =========================================
   FORCE: menu spacing/padding echt kleiner
   (Storefront + jouw custom header)
========================================= */
/* zodra een parent link focus krijgt, blijft submenu open */
  #site-navigation li:focus-within > ul.sub-menu{
    display: block !important;
  }
}
/* 1) Pak de echte Storefront menu selectors */
.site-header .main-navigation ul.menu > li{
  margin: 0 !important;
  padding: 0 !important;
}

/* 2) Maak de link-paddings klein (dit is meestal de boosdoener) */
.site-header .main-navigation ul.menu > li > a{
  padding: 6px 10px !important;
  line-height: 1.15 !important;
  white-space: normal !important; 
  text-align: center !important;
}

/* 3) Als Storefront/child theme gap of spacing op de UL zet */
.site-header .main-navigation ul.menu{
  gap: 12px 18px !important;   /* als flex gebruikt wordt */
  column-gap: 18px !important; /* fallback */
  row-gap: 10px !important;
}

/* 4) Sommige themes zetten padding op UL zelf */
.site-header .main-navigation ul.menu,
.site-header .main-navigation ul.nav-menu{
  padding: 0 !important;
  margin: 0 !important;
}
/* =========================================
   CSS Extra 
========================================= */
/* 1. Herstel de witte container (het kader) */
.woocommerce-cart-form {
    display: block !important;
   background: rgba(255, 255, 255, 0.3) !important; /* Wit vlak teruggeven */
    border-radius: 20px !important; /* Je mooie ronde hoeken */
    padding: 30px !important;       /* Ruimte binnen het kader */
    margin: 30px auto !important;   /* Ruimte buiten het kader en centreren */
    max-width: 1200px !important;   /* Maximale breedte van je site */
    width: 95% !important;          /* Zorgt voor een kleine marge op mobiel */
    box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important; /* Subtiele schaduw */
}

/* 2. Zorg dat de tabel binnen deze nieuwe container blijft */
.woocommerce-cart-form table.cart {
    width: 100% !important;
    border-collapse: separate !important;
    table-layout: auto !important;
}

/* 3. Fix voor de tekst en kolommen */
.woocommerce table.cart td, 
.woocommerce table.cart th {
    padding: 15px 10px !important;
    border-bottom: 1px solid #f4f4f4 !important;
}
/* ==========================================================================
   FIX VOOR TOTALEN WINKELWAGEN (HET ONDERSTE BLOK)
   ========================================================================== */

.cart-collaterals, 
.cart-collaterals .cart_totals {
    display: block !important;
    background: rgba(255, 255, 255, 0.3) !important; /* Geeft het ook een wit vlak */
    border-radius: 20px !important; /* Zelfde ronde hoeken als boven */
    padding: 30px !important;       /* Zelfde ruimte binnenin */
    margin: 30px auto !important;   /* Zorgt dat het in het midden blijft */
    width: 100% !important;         /* Vult het scherm, maar niet eroverheen */
    max-width: 1200px !important;   /* Zelfde breedte als de tabel boven */
    box-sizing: border-box !important;
    float: none !important;         /* Zorgt dat hij niet naar rechts ontsnapt */
    clear: both !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
}

/* Zorg dat de tabel binnen dit witte vlak ook 100% breed is */
.cart_totals table.shop_table {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
}

/* Lijn de bedragen netjes uit binnen het nieuwe witte vlak */
.cart_totals .shop_table td, 
.cart_totals .shop_table th {
    padding: 15px 0 !important;
    text-align: left !important;
}

.cart_totals .shop_table td {
    text-align: right !important; /* Bedragen aan de rechterkant van het witte vlak */
}
body::after{ content: none !important; display:none !important; }
/* Verwijder de irritante 'Loaded' melding */

/* 1. Breek de Storefront-container open die boven je footer zit */
.site-footer .col-full, 
.site-content .col-full {
    max-width: 100% !important; /* Haal de 1100px limiet weg */
    width: 100% !important;
    margin-left: 0 !important;   /* Dwing de container naar links */
    margin-right: 0 !important;
    padding: 0 !important;
}

/* 1. Centreer de titel 'Totalen winkelwagen' */
.cart-collaterals .cart_totals h2 {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    margin-bottom: 20px !important;
}

/* 2. Geef de inhoud van de tabel ruimte (padding) aan de zijkanten */
.cart_totals table.shop_table th, 
.cart_totals table.shop_table td {
    padding-left: 25px !important;  /* Ruimte links */
    padding-right: 25px !important; /* Ruimte rechts */
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

/* 3. Zorg dat de tabel niet de volledige 100% breedte van de container raakt */
.cart_totals table.shop_table {
    width: 95% !important; 
    margin: 0 auto !important; /* Centreer de tabel binnen het witte vlak */
}

/* Maak de randen van de totalen-tabel rond */
.cart_totals table.shop_table {
    border-collapse: separate !important; /* Nodig om ronde hoeken te tonen */
    border-radius: 15px !important;       /* De ronding */
    overflow: hidden !important;          /* Zorgt dat de achtergrond niet buiten de bocht vliegt */
    border: none !important;              /* Verwijdert eventuele standaard lijntjes */
    background-color: rgba(255, 255, 255, 0.5) !important; /* Maakt de tabel zelf ook licht doorzichtig */
}

/* Verwijder de laatste lijn onderaan de tabel voor een strakker resultaat */
.cart_totals table.shop_table tr:last-child td, 
.cart_totals table.shop_table tr:last-child th {
    border-bottom: none !important;
}

/* ==========================================================================
   VIDEO-SECTIE: AANGEPASTE BLOKGROOTTE
   ========================================================================== */

/* 1. Container instellingen */
.video-card, 
.video-container, 
.video-block {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
    text-align: center !important;
}

/* 2. De Video Kaart - HIER IS DE GROOTTE AANGEPAST */
.video-card {
    min-width: 400px !important; /* Maakt het blok groter */
    flex: 0 0 auto !important;
    scroll-snap-align: start !important;
}

/* 3. De Afbeelding: Volledig zichtbaar */
.video-card img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    border-radius: 12px !important;
    border: 5px solid #ffffff !important;
    transition: all 0.2s ease-in-out !important;
    display: block !important;
    box-shadow: none !important; 
}

/* 4. De Hover: Alleen de rand wordt jouw oranje */
.video-card:hover img {
    border: 6px solid #ff9800 !important; 
    transform: scale(1.03) !important;
    box-shadow: none !important;
}

/* Verberg vlaggetjes, labels en icoontjes */
.video-card .badge, 
.video-card .flag, 
.video-card .category-label,
.video-card i, 
.video-card span:not(.video-title) {
    display: none !important;
}
/* ====== HOME YouTube Marquee (scoped) ====== */

.home-youtube .yt-marquee{
  width: 100%;
  overflow: hidden;
  padding: 10px 0 0;
  margin-top: 10px;
  /* optioneel: zachte fade aan randen */
  mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.home-youtube .yt-track{
  display: flex;
  gap: 18px;
  width: max-content;
  align-items: stretch;
  will-change: transform;
}

.home-youtube .yt-track.marquee{
  animation: homeYtScroll 300s linear infinite; /* ✅ snelheid: groter = langzamer */
}

.home-youtube .yt-marquee:hover .yt-track.marquee{
  animation-play-state: paused;
}

/* Video kaart */
.home-youtube .yt-card{
  flex: 0 0 auto;
  width: 260px;
  background: transparent;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: #111;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  border: 4px solid #fff;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.home-youtube .yt-card:hover{
  transform: translateY(-6px);
  border-color: #f39c12;
  box-shadow: 0 14px 30px rgba(0,0,0,0.12);
}

.home-youtube .yt-thumb{
  width: 100%;
  aspect-ratio: 16/9;
  display: block;
  object-fit: cover;
}

.home-youtube .yt-title{
  display: block;
  padding: 10px 12px 12px;
  font-family: "Chewy", cursive;
  color: #ff9800;
  font-size: 16px;
  line-height: 1.25;
}

/* Loading tekst */
.home-youtube .yt-loading{
  display: block;
  padding: 10px 12px;
  background: rgba(255,255,255,0.9);
  border-radius: 12px;
}

/* Animatie: schuif precies de helft (we dupliceren track) */
@keyframes homeYtScroll{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Mobiel */
@media (max-width: 768px){
  .home-youtube .yt-card{ width: 190px; }
  .home-youtube .yt-track.marquee{ animation-duration: 95s; } /* mobiel iets sneller mag */
}
/* /* Mobiel + tablet: secondary nav verbergen, pas tonen als menu open is */
@media (max-width: 1024px){
  .secondary-navigation{
    display: none !important;
  }

  /* zodra jouw #site-navigation open is */
  #site-navigation.zs-open ~ .secondary-navigation,
  #site-navigation.zs-open + .secondary-navigation,
  body.zs-menu-open .secondary-navigation{
    display: block !important;
  }
}
/* ==============================
   CART: verwijder-kruisje netjes bij item (mobiel/tablet)
   ============================== */

/* Zorg dat de rij een anker is voor het kruisje */
@media (max-width: 1024px){
  .woocommerce-cart-form table.shop_table_responsive tr{
    position: relative !important;
  }

 
/* ==============================
   CART: 1 nette kaart per product (mobiel/tablet)
   + geen rare hover-container
   ============================== */

@media (max-width: 1024px){

  /* 1) Tabel en cellen niet meer "zweven" */
  .woocommerce-cart-form table.cart{
    background: transparent !important;
  }

  /* 2) Elke cart item rij krijgt ALTIJD een witte kaart */
  .woocommerce-cart-form table.cart tr.cart_item{
    position: relative !important;
    display: block !important;
    margin: 16px 0 !important;
    padding: 14px 14px 18px !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,0.92) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.06) !important;
  }

  /* 3) Haal hover "flip" weg */
  .woocommerce-cart-form table.cart tr.cart_item:hover{
    background: rgba(255,255,255,0.92) !important;
  }

  /* 4) Cellen op mobiel/tablet als blokken */
  .woocommerce-cart-form table.cart tr.cart_item > td{
    display: block !important;
    width: 100% !important;
    border: 0 !important;
    padding: 10px 0 !important;
    background: transparent !important;
  }

  /* 5) Thumbnail netjes centreren */
  .woocommerce-cart-form td.product-thumbnail{
    text-align: center !important;
  }
  .woocommerce-cart-form td.product-thumbnail img{
    width: 74px !important;
    height: 74px !important;
    border-radius: 18px !important;
    object-fit: cover !important;
    display: inline-block !important;
  }

  /* 6) Verwijder-kruis altijd strak rechtsboven IN de kaart */
  .woocommerce-cart-form td.product-remove{
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .woocommerce-cart-form a.remove{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    line-height: 34px !important;
    border-radius: 999px !important;
    background: rgba(60,60,60,0.65) !important;
    color: #fff !important;
    font-size: 20px !important;
    text-decoration: none !important;
    border: 0 !important;
    box-shadow: 0 8px 18px rgba(0,0,0,0.12) !important;
  }

  .woocommerce-cart-form a.remove:hover{
    background: rgba(0,0,0,0.75) !important;
  }
}
/* ======================================
   CART REMOVE BUTTON – FORCEER × (zonder cirkel)
   ====================================== */

.woocommerce a.remove,
.woocommerce-cart a.remove{
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  width: 28px !important;
  height: 28px !important;
  line-height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #666 !important;
  font-size: 0 !important;          /* verberg eventuele theme icon-font */
  text-decoration: none !important;
}

/* Zet het kruisje expliciet terug */
.woocommerce a.remove::before,
.woocommerce-cart a.remove::before{
  content: "×" !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: currentColor !important;
}

/* Verwijder ALLE overige pseudo’s/achtergronden */
.woocommerce a.remove::after,
.woocommerce-cart a.remove::after{
  content: none !important;
  display: none !important;
}

/* Hover: geen bolletje, alleen kleur */
.woocommerce a.remove:hover,
.woocommerce-cart a.remove:hover{
  background: transparent !important;
  box-shadow: none !important;
  color: #000 !important;
}

	
/* Mobiel/tablet: plaats rechtsboven in de cart-row */
@media (max-width: 1024px){
  .woocommerce-cart-form td.product-remove{
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
  }
}
/* ======================================
   CART (mobiel/tablet): witte remove-balk fix
   ====================================== */

/* De remove-link (x) niet als balk tonen */
.woocommerce-cart-form a.remove{
  display: inline-flex !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;

  padding: 0 !important;
  margin: 0 !important;

  background: transparent !important;   /* <-- geen witte balk */
  border: none !important;
  box-shadow: none !important;

  align-items: center !important;
  justify-content: center !important;

  line-height: 1 !important;
  font-size: 24px !important;
  border-radius: 999px !important;
}

/* Als een plugin/theme toch een achtergrond zet op hover/focus */
.woocommerce-cart-form a.remove:hover,
.woocommerce-cart-form a.remove:focus{
  background: transparent !important;
  box-shadow: none !important;
}

/* Plaats het kruisje rechtsboven in de rij/kaart */
.woocommerce-cart-form table.cart tr.cart_item{
  position: relative !important;
}

.woocommerce-cart-form table.cart tr.cart_item a.remove{
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 5 !important;
}
/* =========================================================
   CART mobile/tablet: WITTE REMOVE-BALK + rare cirkel FIX
   ========================================================= */

@media (max-width: 1024px){

  /* 1) De hele remove-cel mag GEEN witte balk zijn */
  .woocommerce-cart-form table.cart td.product-remove{
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    width: auto !important;
    min-width: 0 !important;

    /* zet hem rechtsboven */
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 10 !important;
  }

  /* Woo “responsive labels” weg op remove-cel */
  .woocommerce-cart-form table.cart td.product-remove:before{
    display: none !important;
    content: none !important;
  }

  /* 2) Zorg dat de rij/kaart een positioning context heeft */
  .woocommerce-cart-form table.cart tr.cart_item{
    position: relative !important;
  }

  /* 3) Het kruisje zelf: geen grijze cirkel / geen achtergrond */
  .woocommerce-cart-form a.remove{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 28px !important;
    height: 28px !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    font-size: 26px !important;
    line-height: 1 !important;
    border-radius: 999px !important;
  }

  .woocommerce-cart-form a.remove:hover,
  .woocommerce-cart-form a.remove:focus{
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
  }
}
@media (max-width: 1024px){
  .woocommerce-cart .shop_table_responsive td.product-remove{
    display: none !important;
  }
}