/* =========================================
   ULTIMATE ICE HEADER - COMPACT & SNOWY
   ========================================= */

/* 1. CONTAINER (Minder hoog = 450px) */
body.ijs-template .ultimate-ice-header {
    position: relative;
    height: 50vh; 
    min-height: 400px;
    max-height: 500px; /* Niet te groot! */
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 50px;
    background: #000;
}

/* 2. BACKGROUND IMAGE (Zoomt langzaam in) */
body.ijs-template .ice-bg-layer {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center 30%; /* Focus iets hoger op de foto */
    z-index: 1;
    transform: scale(1);
    animation: slowIceZoom 20s alternate infinite ease-in-out;
}

@keyframes slowIceZoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.15); }
}

/* 3. OVERLAY (Zorgt dat tekst leesbaar is op de drukke foto) */
body.ijs-template .ice-overlay-gradient {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 2;
    background: linear-gradient(
        to bottom, 
        rgba(0, 20, 40, 0.4), 
        rgba(0, 150, 255, 0.2) 50%, 
        rgba(255, 255, 255, 0.1) 100%
    );
    mix-blend-mode: multiply;
}

/* 4. SNEEUW ENGINE (Pure CSS Magic) */
body.ijs-template .snow-container {
    position: absolute;
    top: -10px; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 3;
    background-image: 
        radial-gradient(4px 4px at 20% 30%, #fff 50%, transparent),
        radial-gradient(4px 4px at 40% 70%, #fff 50%, transparent),
        radial-gradient(4px 4px at 60% 10%, #fff 50%, transparent),
        radial-gradient(4px 4px at 80% 50%, #fff 50%, transparent),
        radial-gradient(4px 4px at 10% 90%, #fff 50%, transparent);
    background-size: 500px 500px;
    animation: snowFall linear infinite;
}

/* Laag 1: Ver weg (klein, traag) */
body.ijs-template .layer-1 {
    opacity: 0.6;
    background-size: 400px 400px;
    animation-duration: 15s;
}

/* Laag 2: Midden (normaal) */
body.ijs-template .layer-2 {
    opacity: 0.8;
    background-size: 300px 300px;
    animation-duration: 10s;
}

/* Laag 3: Dichtbij (groot, snel, beetje blur) */
body.ijs-template .layer-3 {
    opacity: 1;
    background-size: 200px 200px; /* Vaker herhalen */
    background-image: 
        radial-gradient(6px 6px at 15% 15%, #fff 50%, transparent),
        radial-gradient(5px 5px at 85% 65%, #fff 50%, transparent);
    filter: blur(1px);
    animation-duration: 6s;
}

@keyframes snowFall {
    0% { background-position: 0 0; }
    100% { background-position: 50px 500px; } /* Naar beneden en iets opzij */
}

/* 5. TYPOGRAFIE (IJzig & Hard) */
body.ijs-template .ice-content-inner {
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 800px;
    padding: 0 20px;
}

body.ijs-template .ice-mega-title {
    font-family: 'Arial Black', sans-serif; /* Of jouw dikke thema font */
    font-size: 5rem;
    line-height: 1;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 20px;
    text-shadow: 
        0 0 10px rgba(0, 191, 255, 0.8),
        0 0 20px rgba(0, 191, 255, 0.5),
        2px 2px 0px #0b3d91;
    transform: perspective(500px) rotateX(5deg); /* 3D effect */
}

/* 6. DESCRIPTION GLASS BOX */
body.ijs-template .ice-desc-glass {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px); /* Het "bevroren glas" effect */
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    color: #fff;
    padding: 20px 30px;
    border-radius: 4px; /* Iets zachtere hoeken */
    font-size: 1.1rem;
    font-weight: 500;
    display: inline-block;
    position: relative;
}

/* Een glans over de box heen laten lopen */
body.ijs-template .ice-desc-glass::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.4), transparent);
    transform: skewX(-25deg);
    animation: glassShine 6s infinite;
}

@keyframes glassShine {
    0%, 80% { left: -100%; }
    100% { left: 200%; }
}

/* 7. JAGGED BOTTOM (De "IJsscheur" rand) */
body.ijs-template .ice-bottom-separator {
    position: absolute;
    bottom: 0; left: 0; width: 100%;
    height: 40px;
    background-color: #fff; /* Kleur van je pagina achtergrond */
    /* De scheurvorm maken met clip-path */
    clip-path: polygon(
        0% 100%, 0% 0%, 
        5% 60%, 10% 20%, 
        15% 70%, 20% 10%, 
        25% 60%, 30% 0%, 
        35% 50%, 40% 20%, 
        45% 80%, 50% 10%, 
        55% 60%, 60% 20%, 
        65% 70%, 70% 30%, 
        75% 80%, 80% 10%, 
        85% 60%, 90% 0%, 
        95% 70%, 100% 10%, 
        100% 100%
    );
    z-index: 5;
}

/* MOBIEL */
@media (max-width: 768px) {
    body.ijs-template .ice-mega-title { font-size: 3rem; }
    body.ijs-template .ultimate-ice-header { height: 400px; }
}

/* =========================================
   FROZEN ADD-TO-CART BUTTON
   ========================================= */


body.ijs-template.woocommerce ul.products li.product { overflow: visible !important; }
/* 1. De Basis Knop (Het ijsblok) */
body.ijs-template.woocommerce ul.products li.product .button {
    position: relative;
    background: linear-gradient(180deg, #e0f7fa 0%, #b2ebf2 100%); /* IJs gradiënt */
    color: #024b6e !important; /* Donkerblauw voor contrast (leesbaarheid) */
    border: 1px solid #fff;
    border-radius: 4px;
    font-weight: 800;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(255,255,255,0.8);
    box-shadow: 
        inset 0 0 15px rgba(255,255,255,0.8), /* Binnenste gloed */
        0 5px 15px rgba(6, 118, 193, 0.2); /* Schaduw eronder */
    overflow: visible; /* BELANGRIJK: Anders vallen de ijspegels eraf */
    margin-bottom: 25px; /* Ruimte maken voor de pegels */
    transition: all 0.3s ease;
    z-index: 1;
        border: 3px solid #82c1ff;
}

/* 2. Sneeuwlaagje Bovenop (::before) */
body.ijs-template.woocommerce ul.products li.product .button::before {
    content: '';
    position: absolute;
    top: -6px; /* Iets boven de knop */
    left: -2px;
    right: -2px;
    height: 12px;
    background-color: #fff;
    border-radius: 10px 10px 2px 2px;
    background-image: radial-gradient(circle at 10px 6px, rgba(200,240,255,0.5) 2px, transparent 3px);
    background-size: 20px 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-right: 0;
    z-index: 2;
}

/* 3. IJspegels Onderaan (::after) */
body.ijs-template.woocommerce ul.products li.product .button::after {
    content: '';
    position: absolute;
    top: 98%; /* Start onderaan de knop */
    left: 2px;
    right: 2px;
    height: 20px; /* Lengte van de pegels */
    background: linear-gradient(to bottom, #b2ebf2 0%, #ffffff 100%);
    
    /* De IJs-vorm maken met een polygoon */
    clip-path: polygon(
        0% 0%, 
        5% 80%, 10% 0%, 
        15% 100%, 20% 0%, 
        25% 60%, 30% 0%, 
        35% 90%, 40% 0%, 
        50% 100%, 60% 0%, 
        65% 70%, 70% 0%, 
        75% 95%, 80% 0%, 
        85% 60%, 90% 0%, 
        95% 85%, 100% 0%
    );
    opacity: 0.9;
    pointer-events: none; /* Zorgt dat je niet op de pegels klikt */
    transition: transform 0.3s ease;
    transform-origin: top center;
}

/* 4. Hover Effecten */
body.ijs-template.woocommerce ul.products li.product .button:hover {
    background: linear-gradient(180deg, #fff 0%, #d1f5ff 100%);
    color: #0073aa !important;
    box-shadow: 0 0 20px rgba(0, 191, 255, 0.6); /* Blauwe neon glow */
    transform: translateY(-2px); /* Knop komt iets omhoog */
}

/* Laat de ijspegels een beetje smelten/bewegen bij hover */
body.ijs-template.woocommerce ul.products li.product .button:hover::after {
    transform: scaleY(1.2); /* Pegels worden iets langer */
    filter: drop-shadow(0 0 5px rgba(255,255,255,0.8));
}

/* 5. Shine Animatie (Lichtreflectie) */
body.ijs-template.woocommerce ul.products li.product .button span.shine-effect {
    /* Als je HTML kunt aanpassen, voeg een span toe. 
       Zo niet, gebruiken we een hack op de main button met background-position */
}

/* We voegen de animatie direct toe aan de background van de knop voor maximale compatibiliteit */
body.ijs-template.woocommerce ul.products li.product .button {
    background-size: 200% auto;
    animation: none;
}

/* Icon (Winkelwagen) aanpassen als die er is */
body.ijs-template.woocommerce ul.products li.product .button::before {
    /* Fix voor conflicten met font-awesome icons in sommige thema's */
    /* Als je thema iconen gebruikt in ::before, kan de sneeuw conflicteren. 
       Als dat zo is, laat het weten, dan verplaatsen we de sneeuw. */
}

/* =========================================
   FROZEN PRODUCT IMAGES (MAXIMAAL)
   ========================================= */

/* 1. De IJs Container (Het Blok) */
body.ijs-template .imagewrapper {
    position: relative;
    overflow: hidden; /* Zorgt dat effecten binnen de lijntjes blijven */
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 8px; /* Licht afgeronde hoeken zoals een ijsblokje */
    box-shadow: 
        0 0 15px rgba(135, 206, 250, 0.3), /* Blauwe glow */
        inset 0 0 20px rgba(255, 255, 255, 0.5); /* Binnenste bevriezing */
    transition: all 0.4s ease;
    background: #f0f8ff; /* AliceBlue achtergrond voor transparante pngs */
    z-index: 1;
}

/* 2. De Afbeelding zelf (Koude Look) */
body.ijs-template .imagewrapper img {
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    /* Standaard een beetje koud/blauw maken */
    filter: contrast(1.05) brightness(1.1) sepia(20%) hue-rotate(170deg) saturate(0.8);
    display: block;
    width: 100%;
    height: auto;
}

/* Hover: Afbeelding wordt normaal (kleurrijk) en zoomt in */
body.ijs-template .imagewrapper:hover img {
    transform: scale(1.12); /* Zoom effect */
    filter: contrast(1) brightness(1) sepia(0%) hue-rotate(0deg) saturate(1); /* Terug naar origineel */
}

/* 3. Frost Vignette (Bevroren randen rondom) */
body.ijs-template .imagewrapper::before {
    content: '';
    position: absolute;
    inset: 0; /* Vult de hele div */
    z-index: 2;
    pointer-events: none; /* Klikken gaat er doorheen */
    /* Een radiale verloop: helder in het midden, wit/ijs aan de randen */
    background: radial-gradient(
        circle at center, 
        transparent 50%, 
        rgba(255, 255, 255, 0.4) 80%, 
        rgba(200, 240, 255, 0.8) 100%
    );
    opacity: 1;
    transition: opacity 0.4s ease, transform 0.6s ease;
    mix-blend-mode: hard-light; /* Zorgt voor een ijzige blending */
}

/* Hover: De vorst trekt weg zodat je het product goed ziet */
body.ijs-template .imagewrapper:hover::before {
    opacity: 0.3;
    transform: scale(1.2);
}

/* 4. IJskristallen in de hoeken (Decoratie) */
body.ijs-template .imagewrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    
    /* We tekenen ijsdriehoeken in de hoeken met gradients */
    background: 
        linear-gradient(135deg, white 10px, transparent 10px) top left,
        linear-gradient(225deg, white 10px, transparent 10px) top right,
        linear-gradient(315deg, white 10px, transparent 10px) bottom right,
        linear-gradient(45deg, white 10px, transparent 10px) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    opacity: 0.7;
    transition: all 0.4s ease;
}

/* Hover: De rand gaat gloeien */
body.ijs-template .imagewrapper:hover {
    box-shadow: 
        0 0 25px rgba(0, 191, 255, 0.6), /* Felle neon glow */
        0 0 10px rgba(255, 255, 255, 1);
    border-color: #fff;
}

/* 5. "Flash" Shine Animatie (De schittering) */
/* We maken een extra elementje dat over het beeld schiet bij hover */
body.ijs-template .product:hover .imagewrapper::after {
    /* We hergebruiken ::after even voor de flash, we passen de background aan */
    background: 
        linear-gradient(135deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 60%);
    background-size: 200% 200%;
    animation: iceShine 0.7s;
}

@keyframes iceShine {
    0% { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
}

/* 6. Fix voor luie laders (Lazyload) en positionering */
body.ijs-template .imagewrapper img.hoverimg {
    /* Als je thema een 2e image toont op hover, zorgen we dat die ook goed staat */
    z-index: 1; 
}

body.ijs-template .productenmega .openmega,
body.ijs-template .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit, body.ijs-template .dgwt-wcas-om-bar .dgwt-wcas-om-return {
	background: #57bdbd !important;
	background-color: #57bdbd !important;
}

body.ijs-template .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit:hover::before, body.ijs-template .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit:focus::before {
	border-right-color: #57bdbd !important;
}

.dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit::before {
	border-color: transparent #57bdbd !important;
}

body.ijs-template .aanbieding-dk-menu a,
body.ijs-template .uspbar .usp i {
	color: #57bdbd !important;
}

body.ijs-template .uspbar.topuspbar,
body.ijs-template footer .bottomuspbar {
    background: #57bdbd24;
}

body.tax-product_cat.ijs-template nav.woocommerce-pagination ul li span.current, 
body.ijs-template .post-type-archive-product nav.woocommerce-pagination ul li span.current {
	    background: #63a5d1;
}

body.tax-product_cat.ijs-template nav.woocommerce-pagination ul li a, 
body.ijs-template .post-type-archive-product nav.woocommerce-pagination ul li a {
	background: #8dcee5;
}