/* Basis: volledige hoogte + flex om footer onderaan te duwen, pikzwart als fallback */
html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background-color: #000000;          /* pikzwart overal als basis */
}

body {
    display: flex;
    flex-direction: column;
}

/* Content wrappers nemen ruimte in – GEEN eigen bg forceren */
.site-content,
main,
.wp-site-blocks,
.entry-content,
.page .site-main,
.upcp-catalogue-page,
.ewd-upcp-catalogue-page {
    flex: 1 0 auto;
}

/* Footer plakt onderaan */
.site-footer,
footer {
    flex-shrink: 0;
    margin-top: 0 !important;
}

/* Forceer pikzwart alleen op de achtergrondlaag (mobiel fix) */
@media only screen and (max-width: 767px) {
    html,
    body,
    .site,
    #page {
        background-color: #000000 !important;
    }
}

/* BELANGRIJK: forceer lichte tekstkleur op alle content (wit op zwart) */
/* Dit lost het zwarte tekstprobleem op */
body,
p,
h1, h2, h3, h4, h5, h6,
li,
span,
div,
.wp-block-paragraph,
.wp-block-heading,
.entry-content *,
.upcp-product-title,
.ewd-upcp-product-title,
.upcp-product-description,
.ewd-upcp-product-description,
.upcp-catalogue-page * {
    color: #ffffff !important;          /* wit tekst – pas aan naar #f0f0f0 voor zachter */
}

/* Links iets lichter of met underline voor zichtbaarheid */
a {
    color: #cccccc !important;          /* lichtgrijs – of #00aaff voor blauw accent */
    text-decoration: underline;
}

a:hover {
    color: #ffffff !important;
}

/* Behoud knoppen hun eigen kleuren (of forceer licht als nodig) */
button,
input[type="button"],
input[type="submit"],
.wp-block-button__link,
.button,
.upcp-button,
.ewd-upcp-button,
.ewd-upcp-add-to-cart,
.upcp-product-button {
    color: #ffffff !important;          /* witte tekst op knoppen */
    /* Als knoppen nu zwart zijn: voeg background toe, bijv.: */
    /* background-color: #333333 !important; */   /* donkergrijs knop */
}

/* Optioneel: als productprijzen/titels nog zwart zijn, target specifieker */
.ewd-upcp-price,
.upcp-price {
    color: #ffcc00 !important;          /* geel accent voor prijzen – pas aan */
}
/* Extra veiligheid voor variabele producten */
.product.has-default-attributes.has-children > .images,
.woocommerce-product-gallery {
    opacity: 1 !important;
	
/* Target the main YITH slider container – adjust if needed after inspection */
.yith_wcpcs_slider_container,
.yith-wc-product-slider-carousel .slider-container,
.yith_wc_product_slider .owl-carousel,
.yith_wcpcs_slider_container .owl-stage-outer {
    border: 12px solid #084361 !important;           /* Your deep navy/teal border */
    border-radius: 30px !important;
    padding: 30px !important;
    background: linear-gradient(135deg, #084361 0%, #052c42 100%) !important;
    box-shadow: 
        0 15px 40px rgba(8, 67, 97, 0.5) !important,
        inset 0 0 20px rgba(255, 255, 255, 0.1) !important;
    margin: 40px auto !important;
    max-width: 100% !important;                      /* Or set e.g. 1280px if you want fixed width */
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.4s ease !important;
}

/* Hover effect */
.yith_wcpcs_slider_container:hover,
.yith-wc-product-slider-carousel .slider-container:hover,
.yith_wc_product_slider .owl-carousel:hover {
    transform: translateY(-10px) !important;
    box-shadow: 
        0 25px 60px rgba(8, 67, 97, 0.65) !important,
        inset 0 0 30px rgba(255, 255, 255, 0.15) !important;
    border-color: #0b5a8f !important;                /* Slightly lighter navy on hover */
}

/* Optional: Gold inner accent border (very fancy with navy) */
.yith_wcpcs_slider_container::before,
.yith-wc-product-slider-carousel .slider-container::before,
.yith_wc_product_slider .owl-carousel::before {
    content: "" !important;
    position: absolute !important;
    top: 10px; left: 10px; right: 10px; bottom: 10px !important;
    border: 4px solid #d4af37 !important;            /* Gold trim */
    border-radius: 24px !important;
    pointer-events: none !important;
    z-index: 1 !important;
}