/*
 * LED Lounge — GeneratePress theme-laag v1.4.0
 * Laadt ALLEEN als GeneratePress het actieve thema is.
 *
 * GP is licht en neutraal; deze laag zet de donkere brandbook-basis
 * (#0A0A0A / cyan #00CFFF / pink #FF4DDB / purple #9D4EDD) op
 * WooCommerce-pagina's en lijnt GP-containers en GP Premium
 * WC-module-elementen uit met de kern-styling.
 *
 * TIP: zet in GP Customizer ook de globale kleuren donker
 * (Achtergrond #0A0A0A, Tekst #c8ccd8, Koppen Montserrat,
 * Body Inter) — dan dekt deze laag alleen de randgevallen af.
 */

/* ═══════════════════════════════════════════════════════
   GP CONTAINERS — donker op WC-pagina's
   GP geeft .site-content / .inside-article witte achtergronden
   (zeker met "Separate Containers" layout).
═══════════════════════════════════════════════════════ */
body.woocommerce .site-content,
body.woocommerce-page .site-content,
body.single-product .site-content,
body.woocommerce .content-area,
body.woocommerce-page .content-area,
body.single-product .content-area {
    background: transparent !important;
}
body.woocommerce.separate-containers .inside-article,
body.woocommerce-page.separate-containers .inside-article,
body.single-product.separate-containers .inside-article,
body.woocommerce.separate-containers .site-main > *,
body.woocommerce-page.separate-containers .site-main > * {
    background: transparent !important;
    box-shadow: none !important;
}
body.woocommerce .site-main,
body.woocommerce-page .site-main,
body.single-product .site-main {
    background: transparent !important;
    margin: 0 !important;
}

/* Page hero / titelblok */
body.woocommerce-page .page-header,
body.woocommerce-page .entry-header,
body.single-product .entry-header {
    background: transparent !important;
    border: none !important;
}

/* ═══════════════════════════════════════════════════════
   TYPOGRAFIE — koppen volgen brandbook op WC-pagina's
═══════════════════════════════════════════════════════ */
body.woocommerce h1, body.woocommerce h2, body.woocommerce h3,
body.woocommerce-page h1, body.woocommerce-page h2, body.woocommerce-page h3,
body.single-product h1, body.single-product h2, body.single-product h3 {
    font-family: 'Montserrat', sans-serif;
    color: #ffffff;
}
body.woocommerce a:not(.button),
body.woocommerce-page a:not(.button) {
    color: #00CFFF;
}
body.woocommerce a:not(.button):hover,
body.woocommerce-page a:not(.button):hover {
    color: #FF4DDB;
}

/* Breadcrumbs (GP Premium / WC) */
body.woocommerce .woocommerce-breadcrumb,
body.woocommerce-page .woocommerce-breadcrumb {
    color: rgba(255,255,255,.3) !important;
    font-size: .78rem !important;
    margin-bottom: 24px !important;
}
body.woocommerce .woocommerce-breadcrumb a {
    color: rgba(0,207,255,.7) !important;
    text-decoration: none !important;
}

/* ═══════════════════════════════════════════════════════
   GP PREMIUM — WooCommerce module
═══════════════════════════════════════════════════════ */

/* GP Premium kaart-wrapper: laat onze kern-kaartstyling leidend zijn */
.woocommerce ul.products li.product .inside-product,
.woocommerce ul.products li.product .wc-product-inner {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    height: 100% !important;
}

/* GP Premium image wrapper */
.woocommerce ul.products li.product .wc-product-image {
    display: block !important;
    width: 100% !important;
    height: 220px !important;
    overflow: hidden !important;
    background: #0a0a12 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    position: relative !important;
}
/* GP Premium secondary (hover-swap) image: netjes als overlay,
   nooit gestapeld */
.woocommerce ul.products li.product .wc-product-image .secondary-image {
    position: absolute !important;
    inset: 0 !important;
    opacity: 0 !important;
    transition: opacity .3s ease !important;
}
.woocommerce ul.products li.product:hover .wc-product-image .secondary-image {
    opacity: 1 !important;
}

/* GP Premium quantity +/- knoppen */
.do-quantity-buttons .quantity {
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 9px !important;
    overflow: hidden !important;
    background: #1e1e2e !important;
}
.do-quantity-buttons .quantity input.qty {
    background: transparent !important;
    border: none !important;
    color: #e8eaf5 !important;
    width: 44px !important;
    text-align: center !important;
}
.do-quantity-buttons .quantity .minus,
.do-quantity-buttons .quantity .plus {
    background: rgba(255,255,255,.04) !important;
    border: none !important;
    color: #00CFFF !important;
    width: 33px !important;
    height: 35px !important;
    cursor: pointer !important;
}
.do-quantity-buttons .quantity .minus:hover,
.do-quantity-buttons .quantity .plus:hover {
    background: rgba(0,207,255,.12) !important;
}

/* GP Premium menu-cart icoon + teller */
.wc-menu-cart-activated .cart-contents .number-of-items,
.menu-item .cart-contents .number-of-items {
    background: linear-gradient(135deg, #00CFFF, #9D4EDD) !important;
    color: #000 !important;
    font-weight: 700 !important;
    border-radius: 50px !important;
}

/* GP Premium sticky add-to-cart: uitschakelen — wij hebben
   ons eigen reserveringsblok */
.sticky-add-to-cart,
#sticky-add-to-cart,
.wc-sticky-add-to-cart {
    display: none !important;
}

/* GP Premium mini-cart paneel (off-canvas / dropdown) */
.wc-menu-cart-activated .widget_shopping_cart,
.gp-modal .widget_shopping_cart {
    background: #0d0d1a !important;
    border: 1px solid rgba(0,207,255,.18) !important;
    border-radius: 14px !important;
    padding: 16px !important;
}
.widget_shopping_cart ul.cart_list li {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.05) !important;
}
.widget_shopping_cart ul.cart_list li a:not(.remove) {
    color: #e0e0f5 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
.widget_shopping_cart ul.cart_list li img {
    width: 56px !important;
    height: 56px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    border: 1px solid rgba(0,207,255,.12) !important;
}
.widget_shopping_cart .woocommerce-Price-amount {
    color: #00CFFF !important;
    font-weight: 700 !important;
}
.widget_shopping_cart .total {
    display: flex !important;
    justify-content: space-between !important;
    padding: 12px 0 !important;
    border-top: 1px solid rgba(255,255,255,.07) !important;
    color: rgba(255,255,255,.5) !important;
}
.widget_shopping_cart .buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}
.widget_shopping_cart .buttons a {
    display: block !important;
    text-align: center !important;
    padding: 12px 16px !important;
    border-radius: 50px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: .78rem !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    background: transparent !important;
    color: #00CFFF !important;
    border: 1.5px solid rgba(0,207,255,.35) !important;
}
.widget_shopping_cart .buttons a.checkout {
    background: linear-gradient(135deg, #00CFFF, #9D4EDD) !important;
    color: #000 !important;
    border: none !important;
    box-shadow: 0 4px 18px rgba(0,207,255,.25) !important;
}

/* ═══════════════════════════════════════════════════════
   SIDEBAR (als GP een WC-sidebar toont)
═══════════════════════════════════════════════════════ */
body.woocommerce .sidebar .widget,
body.woocommerce-page .sidebar .widget {
    background: #14141f !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    border-radius: 14px !important;
    padding: 18px !important;
    color: #c8ccd8 !important;
}
body.woocommerce .sidebar .widget-title,
body.woocommerce-page .sidebar .widget-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: .8rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    color: rgba(255,255,255,.5) !important;
}

/* ═══════════════════════════════════════════════════════
   GP BUTTONS — fallback voor generieke .button op WC-pagina's
═══════════════════════════════════════════════════════ */
body.woocommerce .button:not(.llr-loop-btn):not(.checkout-button):not(.llr-btn-reserve),
body.woocommerce-page .button:not(.llr-loop-btn):not(.checkout-button):not(.llr-btn-reserve) {
    font-family: 'Montserrat', sans-serif;
    border-radius: 50px;
}

/* ── GP grid + mobiel fix ── */

/* Verwijder lege ruimte door WC .first .last */
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last,
.woocommerce-page ul.products li.product.first,
.woocommerce-page ul.products li.product.last {
    float: none !important;
    clear: none !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
}

/* GP contentwrapper mobiel */
@media (max-width: 560px) {
    body.woocommerce .site-content,
    body.woocommerce-page .site-content {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .woocommerce ul.products li.product,
    .woocommerce ul.products li.product.first,
    .woocommerce ul.products li.product.last {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        clear: none !important;
        margin: 0 !important;
    }
}

@media (max-width: 900px) and (min-width: 561px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}