/**
 * WooCommerce Shop Page Styles
 * Bestand: inc/woocommerce-shop.css
 */


/* ── Volledige-breedte uitbreking — parent containers ── */
/*
 * De 100vw-truc (margin-left: calc(-50vw + 50%)) werkt alleen
 * als geen enkele ancestor overflow: hidden heeft.
 * Hello Elementor-containers staan hier op clip of visible.
 */

.woocommerce-shop main,
.woocommerce-shop #content,
.woocommerce-shop .site-content,
.woocommerce-shop .page-content {
    overflow-x: clip;
}


/* ── Hero — volledige breedte, dekkende afbeelding ─── */

.wooh-shop-hero {
    /* Volledige breedte — breekt uit de WooCommerce-container */
    width: 100vw;
    margin-left: calc(-50vw + 50%);

    height: 480px;
    margin-bottom: 48px;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    display: block;
}


/* ── Mobiel ─────────────────────────────────────────── */

@media (max-width: 768px) {
    .wooh-shop-hero {
        height: 260px;
        margin-bottom: 32px;
    }
}