/*
 Theme Name:   eStore Pro Child
 Theme URI:    http://playmodok.nl/
 Description:  Child theme voor eStore Pro, om aan de exotische wensen van mijn eega te voldoen...
 Author:       Michel Kox
 Author URI:   
 Template:     estore-pro
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  estore-pro-child
*/

/* ==========================================================================
   ALGEMENE BLOKKEN & LAYOUT ELEMENTEN
   ========================================================================== */

/* Hide BNPL message  */
#payment-method-message {
    display: none;
}

/* Stijl voor het 'details' (uitklap) blok */
.wp-block-details {
    border: 1px solid #e7eef8;
    border-radius: 14px;
    padding: 10px 14px;
    background: #fff;
    margin: 12px 0;
}

.wp-block-details summary {
    font-weight: 600;
    cursor: pointer;
}

.wp-block-details[open] summary {
    border-bottom: 1px dashed #e5eaf2;
    padding-bottom: 6px;
    margin-bottom: 8px;
}

/* Stijl voor een 'tip' box */
.tip {
    background: #f1fbf3;
    border: 1px solid #d7f3dc;
    padding: 10px;
    border-radius: 10px;
}

/* Stijl voor een 'note' (notitie) box */
.note {
    background: #fff7e6;
    border: 1px solid #ffe1b2;
    padding: 10px;
    border-radius: 10px;
}

/* Styling voor H5 koppen met een blauwe onderlijn */
h5.wp-block-heading {
    border-bottom: 2px solid #00a9e0;
    padding-bottom: 10px;
    display: inline-block;
    position: relative;
    top: 1px;
    color: #009fe3;
    font-size: 120%;
}

/* Lijnhoogte voor het tag cloud blok */
.wp-block-tag-cloud {
    line-height: 1.4;
}

/* Marges, padding en achtergrond voor de algemene paginakop */
.page-header {
    margin-bottom: 20px;
    padding: 10px;
    background: #fff;
}

/* ==========================================================================
   HEADER & MENU
   ========================================================================== */

/* Geen marge bij de logo-container */
.logo-wrapper {
    margin: 0;
}

/* Verbergen van het zoekicoon in de header */
.search-wrapper {
    display: none;
}

/* Blauwe achtergrond voor het categorie-menu */
.category-menu {
    background: #009fe3;
}

/* ==========================================================================
   WOOCOMMERCE - ALGEMEEN & ZICHTBAARHEID
   ========================================================================== */

/* Verberg de originele productnaam-kolom bij gegroepeerde producten */
.woocommerce-grouped-product-list-item__label {
    display: none;
}

/* Verbergen van rijen met 'uitverkocht' in de producttabel */
.group_table tr.outofstock {
    display: none;
}

/* Verbergen van de voorraadstatus tekst (bv. 'Op voorraad') */
.stock {
    display: none;
}

/* Verbergen van het 'uitverkoop' label van het thema */
.sales-tag {
    display: none;
}

/* Verbergen van het standaard WooCommerce 'in de uitverkoop' label */
.woocommerce span.onsale {
    display: none;
}

/* Verbergen van de YITH Wishlist knop */
.woocommerce-page ul.products li.product .yith-wcwl-add-to-wishlist {
    display: none;
}

/* --- Overige algemene WooCommerce stijlen --- */

/* Achtergrond en stijl voor de Wishlist-wrapper (icoon in header) */
.wishlist-wrapper {
    background: #009fe3 none repeat scroll 0 0;
}

.wishlist-wrapper .wishlist-value {
    border: 2px solid #009fe3;
    color: #009fe3;
}

/* Achtergrondkleur voor de WooCommerce 'demo store' melding */
p.demo_store {
    background-color: #009fe3;
}

/* Aanpassing positie 'demo store' melding i.c.m. WordPress admin-balk */
.admin-bar p.demo_store {
    top: 32px;
}

/* Afgeronde hoeken voor alle standaard WooCommerce knoppen */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
    border-radius: 25px;
}

/* ==========================================================================
   WOOCOMMERCE - WINKELPAGINA (PRODUCTLIJST)
   ========================================================================== */

/* Reset padding en tekstuitlijning voor elk product in de lijst */
.woocommerce-page ul.products li.product {
    padding: 0;
    text-align: left;
}

/* Styling voor de producttitel in de lijst */
.woocommerce-page ul.products li.product .products-title {
    font-size: 15px;
    margin: 10px 0 0;
    padding: 0;
}

.woocommerce-page ul.products li.product .products-title a {
    font-size: 0.9em;
}

/* Tekstkleur en uitlijning voor de prijs in de productlijst */
.woocommerce-page ul.products li.product .price {
    color: #009fe3;
    text-align: right;
}

/*
 * Verwijder het "Prijs:" label in de product-grid (winkeloverzicht)
 * door de tekst van de container te verbergen en de prijs zelf weer zichtbaar te maken.
 */
.woocommerce ul.products li.product .price {
    font-size: 0;
    /* Maak alle tekst in de prijs-container onzichtbaar */
    color: transparent;
    /* Extra zekerheid: maak de tekst onzichtbaar */
}

.woocommerce ul.products li.product .price .woocommerce-Price-amount {
    font-size: 1em;
    /* Zet de lettergrootte voor de prijs ZELF weer terug naar normaal */
    color: #009fe3;
    /* Zet de kleur weer terug. Pas deze kleurcode aan als het niet klopt. */
}

/* ==========================================================================
   PRIJS - Lettergrootte aanpassen
   ========================================================================== */

/* Vergroot de prijs op de productdetailpagina */
.summary .price {
    font-size: 2.5em !important;
}

/* Vergroot de prijs op de winkeloverzicht-pagina (product grid) */
.woocommerce ul.products li.product .price {
    font-size: 1.8em;
}

.price sup,
.amount sup {
    font-weight: normal;
    font-size: 0.6em;
    opacity: 0.9;
}

/* Verberg het euroteken in de prijzen */
.woocommerce-Price-currencySymbol {
    display: none !important;
}

/* ==========================================================================
   WOOCOMMERCE - PRODUCTPAGINA (SINGLE)
   ========================================================================== */

/* --- Layout voor gegroepeerde producten --- */

/* Verplaats het aantal-invoerveld naar rechts op de productpagina (V2) */
/* Pas flexbox-styling ENKEL toe op producten die NIET uitverkocht zijn */
form.cart.grouped_form .woocommerce-grouped-product-list-item:not(.outofstock) {
    display: flex;
    align-items: center;
    width: 100%;
}

/* 1. De kolom met afbeelding en titel (jouw custom code) */
.woocommerce-grouped-product-list-item__custom {
    order: 1;
    flex-grow: 1;
}

/* 2. De kolom met de prijs */
.woocommerce-grouped-product-list-item__price {
    order: 2;
    padding: 0 15px;
}

/* 3. De kolom met het aantal-invoerveld */
.woocommerce-grouped-product-list-item__quantity {
    order: 3;
}

/* --- Overige stijlen productpagina --- */

/* Witte achtergrond voor de PhotoSwipe (vergrote afbeelding) overlay */
.pswp__bg {
    background: #FFF;
}

/* Positionering van de 'vergrootglas' trigger op de productgalerij */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
    top: 0.2em;
    left: 0.2em;
}

/* Stijl voor de product-tags */
.tagged_as {
    font-size: 14px !important;
}

/* ==========================================================================
   WOOCOMMERCE - WINKELWAGEN & AFREKENEN
   ========================================================================== */

/* Padding en breedte voor checkout- en cart-blokken */
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-cart {
    padding: 0 2rem;
    max-width: 100%;
    box-sizing: border-box;
}

/* Grotere tekst voor de 'lege winkelwagen' melding */
.cart-empty {
    font-size: 25px;
}

/* Stijl voor een custom 'Winkelwagenknop' class */
.winkelwagenknop {
    background-color: #ffffff;
    color: #009fe3;
    border: 1px solid #009fe3;
    border-radius: 25px;
    padding: 6px 16px;
    text-decoration: none;
    font-size: 0.99rem;
    display: block;
    margin: 0 auto;
}

/* Stijl voor de 'Bestelling plaatsen' knop in de checkout */
.wc-block-components-checkout-place-order-button {
    border-radius: 25px !important;
    padding: 6px 16px;
    text-decoration: none;
    font-size: 0.99rem;
    display: block;
    margin: 0 auto;
}

/* ==========================================================================
   DEFINITIEVE MOBIELE FIX VOOR WINKELWAGEN & AFREKENEN
   ========================================================================== */

@media (max-width: 767px) {
    /* We gebruiken een iets bredere 'breakpoint' voor alle mobiele apparaten */

    /* Stap 1: De hoofdcontainer temmen */
    .woocommerce-checkout .entry-content,
    .woocommerce-cart .entry-content {
        width: 100%;
        max-width: 100vw;
        /* Forceer de container om nooit breder dan het scherm te zijn */
        padding: 0 15px;
        /* Een beetje padding aan de zijkanten voor ademruimte */
        box-sizing: border-box;
        /* Zorgt dat de padding binnen de 100% breedte valt */
        overflow-x: hidden;
        /* Verbergt alsnog eventuele horizontale overflow */
    }

    /* Stap 2: De 'atoombom' - forceer ALLE directe kinderen om zich te gedragen */
    .woocommerce-checkout .entry-content>*,
    .woocommerce-cart .entry-content>* {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Stap 3: De specifieke WooCommerce kolommen (deze hadden we al) */
    .woocommerce .col2-set .col-1,
    .woocommerce-page .col2-set .col-1,
    .woocommerce .col2-set .col-2,
    .woocommerce-page .col2-set .col-2 {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
    }

    /* Stap 4: De input-velden (deze hadden we al) */
    .woocommerce form .form-row input.input-text,
    .woocommerce form .form-row select,
    .woocommerce form .form-row textarea {
        width: 100% !important;
        box-sizing: border-box;
    }
}

/* ==========================================================================
   WIDGETS
   ========================================================================== */

/* Styling voor lijst-items in diverse widgets */
.widget_categories li,
.widget_nav_menu li,
.widget_product_categories li {
    margin-top: 8px;
    line-height: 4px;
    font-size: 95%;
    position: none;
}

/* Marge voor sub-categorieën in widgets */
.widget_categories ul.children,
.widget_product_categories ul.children {
    margin-top: 14px;
}

/* ==========================================================================
   MOBIELE HEADER - DEFINITIEVE COMPACTE VERSIE
   ========================================================================== */

@media (max-width: 767px) {

    /* 1. De container nog iets compacter gemaakt */
    #masthead .middle-header-wrapper .tg-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        padding: 5px 15px;
    }

    #masthead .middle-header-wrapper {
        padding: 10px 0 0