/* ============================================
   KUNSTDOEKJE SHOP CSS - COMPLETE VERSIE
   Versie: 10.0 VOLLEDIG & GEOPTIMALISEERD
   
   INHOUDSOPGAVE:
   1. FONTS & ROOT VARIABELEN
   2. PRODUCT CARDS
   3. PRODUCT AFBEELDINGEN
   4. PRODUCT TITELS
   5. PRIJZEN
   6. BUTTONS & CTA
   7. WISHLIST & HOVER OVERLAYS
   8. VARIATIE SELECTORS
   9. WINKELWAGEN & CHECKOUT
   10. LAYOUT & SPACING
   11. ANIMATIES
   12. RESPONSIVE DESIGN
   13. ACCESSIBILITY
   14. Z-INDEX MANAGEMENT
   ============================================ */

/* ============================================
   1. FONTS & ROOT VARIABELEN
   ============================================ */

/* Font imports */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Kumbh+Sans:wght@300;400;500;600;700&display=swap');

/* Kleurenpalet en design tokens */
:root {
    /* Primaire kleuren */
    --kd-gold: #CEA935;
    --kd-gold-hover: #B8941E;
    --kd-gold-dark: #A0821A;
    --kd-gold-light: rgba(206, 169, 53, 0.08);
    
    /* Achtergrond kleuren */
    --kd-bg-main: #F7F6EC;
    --kd-bg-card: #EEEDE0;
    --kd-bg-white: #FBFAF8;
    
    /* Tekst kleuren */
    --kd-text-primary: #3A3127;
    --kd-text-secondary: #402E32;
    --kd-text-muted: #8B7A6B;
    
    /* Overige design tokens */
    --kd-border: rgba(238, 237, 224, 0.5);
    --kd-gradient: linear-gradient(135deg, #B8941E, #CEA935);
    --kd-gradient-hover: linear-gradient(135deg, #A0821A, #B8941E);
    --kd-shadow-sm: 0 2px 8px rgba(58, 49, 39, 0.06);
    --kd-shadow-md: 0 6px 20px rgba(206, 169, 53, 0.12);
    --kd-shadow-gold: 0 3px 10px -2px rgba(206, 169, 53, 0.3);
    --kd-transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   2. PRODUCT CARDS
   ============================================ */

/* Product card basis styling */
.woocommerce ul.products li.product,
.elementor-widget-woocommerce-products ul.products li.product {
    position: relative !important;
    background: var(--kd-bg-white) !important;
    border: 1px solid #F0EFE5 !important;
    border-radius: 12px !important;
    padding: 0 !important;
    box-shadow: var(--kd-shadow-sm) !important;
    transition: var(--kd-transition) !important;
    overflow: hidden !important;
    animation: fadeInUp 0.6s ease backwards;
}

/* Product card hover effect */
.woocommerce ul.products li.product:hover,
.elementor-widget-woocommerce-products ul.products li.product:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--kd-shadow-md) !important;
    border-color: #E8D6A0 !important;
    z-index: 10 !important;
}

/* ============================================
   3. PRODUCT AFBEELDINGEN
   ============================================ */

/* Afbeelding container */
.woocommerce ul.products li.product a:first-child,
.woocommerce ul.products li.product .woocommerce-LoopProduct-link,
.elementor-widget-woocommerce-products ul.products li.product a:first-child {
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 16px 16px 0 16px !important;
    background: transparent !important;
    transition: var(--kd-transition) !important;
}

/* Afbeelding styling */
.woocommerce ul.products li.product img,
.elementor-widget-woocommerce-products ul.products li.product img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 4px !important;
    transition: transform 0.4s ease !important;
}

/* Afbeelding hover zoom */
.woocommerce ul.products li.product:hover img,
.elementor-widget-woocommerce-products ul.products li.product:hover img {
    transform: scale(1.03) !important;
}

/* ============================================
   4. PRODUCT TITELS - FORCE VISIBILITY
   ============================================ */

/* Force DM Serif Display op alle titels */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h2 a,
.woocommerce ul.products li.product h3,
.woocommerce ul.products li.product h3 a,
.elementor-widget-woocommerce-products ul.products li.product h2,
.elementor-widget-woocommerce-products ul.products li.product h3,
.elementor-widget-woocommerce-products ul.products li.product .woocommerce-loop-product__title,
body .woocommerce ul.products li.product .woocommerce-loop-product__title,
body.woocommerce ul.products li.product h2,
body.woocommerce ul.products li.product h3 {
    /* ANTI-HIDING */
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    width: auto !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    position: relative !important;
    
    /* STYLING */
    font-family: 'DM Serif Display', serif !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    color: var(--kd-text-primary) !important;
    text-align: center !important;
    line-height: 1.3 !important;
    letter-spacing: -0.3px !important;
    margin: 0 !important;
    padding: 20px 16px !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
    background: transparent !important;
    z-index: 999 !important;
}

/* Hover effect op titel */
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title,
.woocommerce ul.products li.product:hover h2,
.woocommerce ul.products li.product:hover h2 a,
.woocommerce ul.products li.product:hover h3,
.woocommerce ul.products li.product:hover h3 a {
    color: var(--kd-gold-hover) !important;
}

/* ============================================
   5. PRIJZEN
   ============================================ */

/* Prijs volledig verbergen */
.woocommerce ul.products li.product .price {
    display: none !important;
}

/* Verwijder "Verschillende formaten beschikbaar" tekst */
.woocommerce ul.products li.product .price::after,
.elementor-widget-woocommerce-products ul.products li.product .price::after {
    display: none !important;
}

/* ============================================
   6. BUTTONS & CTA
   ============================================ */

/* Kunstdoekje huisstijl button met gradient */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce ul.products li.product a.product_type_variable,
.woocommerce ul.products li.product a.product_type_simple,
.elementor-widget-woocommerce-products ul.products li.product .button,
.elementor-widget-woocommerce-products ul.products li.product a.button {
    background: var(--kd-gradient) !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 14px 28px !important;
    font-family: 'Kumbh Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0 !important;
    text-align: center !important;
    text-decoration: none !important;
    display: block !important;
    width: calc(100% - 32px) !important;
    margin: 0 16px 16px 16px !important;
    min-height: 48px !important;
    transition: var(--kd-transition) !important;
    cursor: pointer !important;
    position: relative !important;
    box-shadow: var(--kd-shadow-gold) !important;
}

/* Button tekst */
.woocommerce ul.products li.product .button::after,
.woocommerce ul.products li.product a.button::after,
.elementor-widget-woocommerce-products ul.products li.product .button::after {
    content: "BEKIJK OPTIES" !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* Button hover state */
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.button:hover,
.elementor-widget-woocommerce-products ul.products li.product .button:hover {
    background: var(--kd-gradient-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px -2px rgba(206, 169, 53, 0.4) !important;
}

/* ============================================
   7. WISHLIST & HOVER OVERLAYS - UITGESCHAKELD
   ============================================ */

/* Geen hover overlays of wishlist harten */
.woocommerce ul.products li.product::before,
.woocommerce ul.products li.product::after,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link::before,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link::after,
.elementor-widget-woocommerce-products ul.products li.product::before,
.elementor-widget-woocommerce-products ul.products li.product::after {
    display: none !important;
}

/* ============================================
   8. VARIATIE SELECTORS
   ============================================ */

/* Variatie item basis */
.variable-item-span {
    color: #554416 !important;
    font-weight: 700 !important;
    font-family: "DM Serif Display", serif !important;
}

/* Variatie buttons */
.woo-variation-swatches .wvs-style-squared.variable-items-wrapper .variable-item:not(.radio-variable-item).button-variable-item {
    padding: 25px 40px !important;
    background: hsl(48 26% 87%) !important;
}

/* Geselecteerde variatie */
.variable-item.selected {
    border: 2px solid #D3A331 !important;
}

.variable-item.selected .variable-item-span:after {
    content: url("https://kunstdoekje.nl/wp-content/uploads/2025/08/Screenshot-from-2025-08-16-17-13-13.png") !important;
    display: block !important;
}

/* Color variatie items */
#custom_variation_sect .color-variable-item {
    width: 25% !important;
    height: 40px !important;
}

#custom_variation_sect .color-variable-item .variable-item-contents:before {
    display: none !important;
}

/* Frame opties - Alleen kunstdoekje */
.button-variable-item-alleen-kunstdoekje span:after {
    content: "Complete oplossing met aluminium frame" !important;
    display: block !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    font-family: "Kumbh Sans" !important;
}

.button-variable-item-alleen-kunstdoekje span:before {
    background-image: url(https://kunstdoekje.nl/wp-content/uploads/2025/08/Screenshot-from-2025-08-24-17-08-12.png) !important;
    content: "" !important;
    background-size: 15px 15px !important;
    display: inline-block !important;
    width: 22px !important;
    height: 13px !important;
    background-repeat: no-repeat !important;
}

/* Frame opties - Inclusief frame */
.button-variable-item-kunstdoekje-inclusief-frame span:after {
    content: "Zonder frame - perfect voor eigen lijstjes" !important;
    display: block !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    font-family: "Kumbh Sans" !important;
}

.button-variable-item-kunstdoekje-inclusief-frame span:before {
    background-image: url('https://kunstdoekje.nl/wp-content/uploads/2025/08/Screenshot-from-2025-08-24-17-21-01.png') !important;
    content: "" !important;
    background-size: 15px 15px !important;
    display: inline-block !important;
    width: 22px !important;
    height: 13px !important;
    background-repeat: no-repeat !important;
}

/* Materiaal opties - Deco */
.button-variable-item-deco span:after {
    content: url('https://kunstdoekje.nl/wp-content/uploads/2025/08/Screenshot-from-2025-08-24-17-27-27.png') !important;
    display: block !important;
    height: 20px !important;
    background-repeat: no-repeat !important;
}

.button-variable-item-deco {
    padding-top: 4% !important;
    padding-bottom: 10% !important;
}

/* Materiaal opties - Fluweel */
.button-variable-item-fluweel span:after {
    content: url('https://kunstdoekje.nl/wp-content/uploads/2025/08/Screenshot-from-2025-08-24-17-27-44.png') !important;
    display: block !important;
    height: 20px !important;
    background-repeat: no-repeat !important;
}

.button-variable-item-fluweel {
    padding-top: 4% !important;
    padding-bottom: 10% !important;
}

/* ============================================
   9. WINKELWAGEN & CHECKOUT
   ============================================ */

/* Variatie add to cart */
.woocommerce-variation-add-to-cart .quantity {
    display: block !important;
}

.woocommerce-variation-add-to-cart .single_add_to_cart_button {
    display: block !important;
}

/* Single product checkout button */
.single-product .checkout-button {
    position: absolute !important;
    left: 103% !important;
    z-index: 9999999999 !important;
    width: 50% !important;
    margin-top: -15% !important;
    background-color: #D3A331 !important;
}

.single-product .single_add_to_cart_button.button {
    display: none;
}

/* Custom variation section */
#custom_variation_sect .single_add_to_cart_button {
    display: none !important;
}

#custom_variation_sect .checkout-button {
    display: block !important;
}

#custom_variation_sect .woocommerce-variation-add-to-cart {
    float: right !important;
    margin-right: 0% !important;
    margin-top: 2% !important;
    margin-bottom: 1.5% !important;
    z-index: 99999999999999 !important;
}

#custom_variation_sect .quantity {
    z-index: 99999999999999 !important;
}

/* Product totaal styling */
.product-total-heading {
    color: #D3A331 !important;
    font-weight: bold !important;
}

/* Hoeveelheid display */
.user-qty-display {
    color: #D3A331 !important;
    background-color: #FCFD0030 !important;
    border-radius: 30px !important;
}

.user-qty-display:after {
    content: 'x' !important;
}

.user-qty-display:hover {
    background-color: #554415 !important;
}

/* ============================================
   10. LAYOUT & SPACING
   ============================================ */

/* Single product pagina achtergrond */
.single-product {
    background-color: hsl(52 35% 96%) !important;
}

/* Right total section */
.right_total_sect {
    height: 100% !important;
}

/* Container spacing */
.woocommerce .products {
    gap: 24px !important;
}

/* ============================================
   11. ANIMATIES
   ============================================ */

/* Fade in up animatie */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Staggered animatie delays */
.woocommerce ul.products li.product:nth-child(1),
.elementor-widget-woocommerce-products ul.products li.product:nth-child(1) { 
    animation-delay: 0.05s; 
}

.woocommerce ul.products li.product:nth-child(2),
.elementor-widget-woocommerce-products ul.products li.product:nth-child(2) { 
    animation-delay: 0.1s; 
}

.woocommerce ul.products li.product:nth-child(3),
.elementor-widget-woocommerce-products ul.products li.product:nth-child(3) { 
    animation-delay: 0.15s; 
}

.woocommerce ul.products li.product:nth-child(4),
.elementor-widget-woocommerce-products ul.products li.product:nth-child(4) { 
    animation-delay: 0.2s; 
}

.woocommerce ul.products li.product:nth-child(5),
.elementor-widget-woocommerce-products ul.products li.product:nth-child(5) { 
    animation-delay: 0.25s; 
}

.woocommerce ul.products li.product:nth-child(6),
.elementor-widget-woocommerce-products ul.products li.product:nth-child(6) { 
    animation-delay: 0.3s; 
}

/* Performance optimalisaties */
.woocommerce ul.products li.product,
.woocommerce ul.products li.product img,
.elementor-widget-woocommerce-products ul.products li.product,
.elementor-widget-woocommerce-products ul.products li.product img {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ============================================
   12. RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 768px) {
    /* Kleinere padding op mobiel */
    .woocommerce ul.products li.product,
    .elementor-widget-woocommerce-products ul.products li.product {
        padding: 0 !important;
    }
    
    /* Kleinere titel font size */
    .woocommerce ul.products li.product .woocommerce-loop-product__title,
    .woocommerce ul.products li.product h2,
    .woocommerce ul.products li.product h3 {
        font-size: 20px !important;
        padding: 16px 12px !important;
    }
    
    /* Kortere button tekst */
    .woocommerce ul.products li.product .button::after,
    .elementor-widget-woocommerce-products ul.products li.product .button::after {
        content: "BEKIJK" !important;
        font-size: 13px !important;
    }
    
    /* Kleinere afbeelding padding */
    .woocommerce ul.products li.product a:first-child,
    .woocommerce ul.products li.product .woocommerce-LoopProduct-link {
        padding: 12px 12px 0 12px !important;
    }
    
    /* Button margins aanpassen */
    .woocommerce ul.products li.product .button,
    .woocommerce ul.products li.product a.button {
        margin: 0 12px 12px 12px !important;
        width: calc(100% - 24px) !important;
    }
}

/* ============================================
   13. ACCESSIBILITY
   ============================================ */

/* Focus styling */
.woocommerce ul.products li.product:focus-within,
.elementor-widget-woocommerce-products ul.products li.product:focus-within {
    outline: 2px solid var(--kd-gold) !important;
    outline-offset: 2px !important;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .woocommerce ul.products li.product,
    .woocommerce ul.products li.product *,
    .elementor-widget-woocommerce-products ul.products li.product,
    .elementor-widget-woocommerce-products ul.products li.product * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   14. Z-INDEX MANAGEMENT
   ============================================ */

/* Filter en modals bovenop */
[class*="filter"],
[id*="filter"],
.popup,
.modal {
    z-index: 99999999 !important;
    position: relative !important;
}

/* Back button lager op shop pagina */
.woocommerce-shop #kdNavInjected,
.archive #kdNavInjected {
    z-index: 999 !important;
}

/* ============================================
   FIX: FORCEER PRODUCTPAGINA LINK
   ============================================ */

/* Schakel AJAX add to cart uit op shop pagina */
.woocommerce ul.products li.product a.add_to_cart_button.ajax_add_to_cart {
    pointer-events: none !important;
    display: none !important;
}

/* Toon alleen de product link button */
.woocommerce ul.products li.product a.button:not(.add_to_cart_button) {
    display: block !important;
    pointer-events: auto !important;
}

/* ============================================
   EINDE COMPLETE KUNSTDOEKJE SHOP CSS
   ============================================ */