/*
Theme Name: Botiga Child theme of botiga
Theme URI: 
Description: Child theme of botiga theme for the Botiga theme
Author: <a href="https://athemes.com">aThemes</a>
Author URI: 
Template: botiga
Version: 2.4.2
*/

/* Generated by Orbisius Child Theme Creator (https://orbisius.com/products/wordpress-plugins/orbisius-child-theme-creator/) on Fri, 13 Mar 2026 03:59:08 +0000 */ 
/* The plugin now uses the recommended approach for loading the css files.*/

/* =====================================================
   DE FIJNSTE WIJNEN – CUSTOM STYLING
   Child Theme Stylesheet
===================================================== */


/* =====================================================
   1. TYPOGRAFIE (RESPONSIVE SYSTEEM)
===================================================== */

.site-title,
h1, h2, h3, h4, h5, h6 {
    font-family: -apple-system, system-ui, BlinkMacSystemFont, 
                 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

h1 {
    font-size: clamp(1.9rem, 3vw, 2.6rem);
    font-weight: 700;
    line-height: 1.2;
}

h2 {
    font-size: clamp(1.6rem, 2.4vw, 2rem);
    font-weight: 600;
    line-height: 1.25;
}

h3 {
    font-size: clamp(1.3rem, 1.9vw, 1.6rem);
    font-weight: 600;
    line-height: 1.3;
}

h4 {
    font-size: clamp(1.1rem, 1.5vw, 1.3rem);
    font-weight: 600;
    line-height: 1.35;
}

h5 {
    font-size: clamp(1rem, 1.2vw, 1.1rem);
    font-weight: 500;
    line-height: 1.4;
}

h6 {
    font-size: clamp(0.9rem, 1vw, 1rem);
    font-weight: 500;
    line-height: 1.4;
}

.site-title {
    font-weight: 700;
    color: #ffffff;
}


/* =====================================================
   2. GLOBAL BUTTON STYLING
===================================================== */

.woocommerce div.product .button,
.single_add_to_cart_button,
.woocommerce ul.products li.product a.button {
    border-radius: 9999px;
    font-weight: 600;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}


/* =====================================================
   3. SINGLE PRODUCT CTA
===================================================== */

.single-product .cart a.single_add_to_cart_button {
    background-color: #404338;
    color: #ffffff;
    padding: 14px 40px;
    border: none;
    transition: all 0.3s ease;
}

.single-product .cart a.single_add_to_cart_button:hover {
    background-color: #565b4a;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}

.woocommerce div.product .button:active,
.single_add_to_cart_button:active {
    transform: translateY(1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}


/* =====================================================
   4. PRODUCT ARCHIVE & WIDGET BUTTONS
===================================================== */

.woocommerce ul.products li.product a.button {
    background-color: #404338;
    color: #ffffff;
    padding: 12px 32px;
    border: none;
    transition: all 0.3s ease;
}

.woocommerce ul.products li.product a.button:hover {
    background-color: #565b4a;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}


/* =====================================================
   5. PRODUCT CATEGORIES (RONDE LABELS)
===================================================== */

.woocommerce ul.products li.product-category {
    text-align: center;
}

.woocommerce ul.products li.product-category a {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.woocommerce ul.products li.product-category 
.woocommerce-loop-category__title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #404338;
    color: #ffffff;
    border-radius: 9999px;
    padding: 14px 32px;
    margin-top: 18px;
    min-width: 220px;
    transition: all 0.3s ease;
}

.woocommerce ul.products li.product-category .count {
    background: transparent;
    color: #ffffff;
    margin-left: 6px;
}

.woocommerce ul.products li.product-category a:hover 
.woocommerce-loop-category__title {
    background-color: #565b4a;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}


/* =====================================================
   6. UNIVERSELE GELIJKE PRODUCTKAARTEN
   (Woo + Elementor Widgets)
===================================================== */

.woocommerce ul.products li.product,
.elementor-widget-woocommerce-products ul.products li.product,
.elementor-widget-products ul.products li.product {
    display: flex;
    flex-direction: column;
}

.woocommerce ul.products li.product .price,
.elementor-widget-woocommerce-products ul.products li.product .price,
.elementor-widget-products ul.products li.product .price {
    margin-bottom: 12px;
}

.woocommerce ul.products li.product a.button,
.elementor-widget-woocommerce-products ul.products li.product a.button,
.elementor-widget-products ul.products li.product a.button {
    margin-top: auto;
}


/* =====================================================
   7. HOMEPAGE (ELEMENTOR)
===================================================== */

.home .elementor-button {
    border-radius: 9999px;
    padding: 14px 36px;
}

.home .elementor-widget-image {
    border-radius: 14px;
    overflow: hidden;
}

.home .elementor-widget-image img {
    display: block;
    width: 100%;
    height: auto;
}


/* =====================================================
   8. FOOTER STYLING
===================================================== */

.site-footer,
.footer-widgets,
.site-footer .inside-footer-widgets,
.site-footer .inside-site-info,
.site-info {
    background-color: #404338;
    color: #ffffff;
}

.site-footer a,
.site-info a {
    color: #ffffff;
}

.site-footer a:hover {
    opacity: 0.85;
}

.site-info a:hover {
    color: #d4d6cf;
}


/* =====================================================
   9. WOOCOMMERCE TABS
===================================================== */

.woocommerce-tabs ul.tabs {
    display: none;
}


/* =====================================================
   10. MOBILE OPTIMALISATIES
===================================================== */

@media (max-width: 768px) {

    .site-header {
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .site-content {
        padding-top: 0;
        margin-top: 0;
    }

    .inside-article > *:first-child {
        margin-top: 0;
    }

    .single-product .woocommerce-product-gallery,
    .single-product .woocommerce-product-gallery__wrapper,
    .single-product .woocommerce-product-gallery img {
        opacity: 1;
        visibility: visible;
        display: block;
        transform: none;
    }
}


/* =====================================================
   FIXES NA MIGRATIE NAAR CHILD STYLE.CSS
===================================================== */


/* ---------------------------
   FOOTER DEFINITIEF DONKER
---------------------------- */

.site-footer,
.footer-widgets,
.site-info,
.site-footer .inside-footer-widgets,
.site-footer .inside-site-info {
    background-color: #404338 !important;
    color: #ffffff !important;
}

.site-footer a,
.site-info a {
    color: #ffffff !important;
}


/* ---------------------------
   ELEMENTOR CTA BUTTONS
---------------------------- */

/* Alleen WooCommerce Elementor product widgets */
.elementor-widget-woocommerce-products .elementor-button,
.elementor-widget-products .elementor-button {
    background-color: #404338 !important;
    color: #ffffff !important;
}

.elementor-widget-woocommerce-products .elementor-button:hover,
.elementor-widget-products .elementor-button:hover {
    background-color: #565b4a !important;
}


/* ---------------------------
   2e CTA OP SINGLE PRODUCT
   (External/Affiliate Button)
---------------------------- */

.single-product .button.alt,
.single-product .button.alt:visited {
    background-color: #404338 !important;
    color: #ffffff !important;
}

.single-product .button.alt:hover {
    background-color: #565b4a !important;
}


/* =========================================
   PRODUCTKAARTEN – KNOP ALTIJD ONDERAAN
   (Woo + Elementor)
========================================= */

.woocommerce ul.products li.product,
.elementor-widget-woocommerce-products ul.products li.product,
.elementor-widget-products ul.products li.product {
    display: flex !important;
    flex-direction: column !important;
}

.woocommerce ul.products li.product .button,
.elementor-widget-woocommerce-products ul.products li.product .button,
.elementor-widget-products ul.products li.product .button {
    margin-top: auto !important;
}


/* =========================================
   SITE TITEL DEFINITIEF MERKKLEUR
========================================= */

.site-title a,
.main-title a,
.site-branding .main-title a {
    color: #ffffff !important;
}


/* =====================================================
   DEFINITIEVE PRODUCT GRID STABILISATIE
   (Woo + Elementor – NIET MEER AANKOMEN 😉)
===================================================== */

.woocommerce ul.products,
.elementor-widget-woocommerce-products ul.products,
.elementor-widget-products ul.products {
    display: flex;
    flex-wrap: wrap;
}

.woocommerce ul.products li.product,
.elementor-widget-woocommerce-products ul.products li.product,
.elementor-widget-products ul.products li.product {
    display: flex !important;
    flex-direction: column !important;
}

.woocommerce ul.products li.product .button,
.elementor-widget-woocommerce-products ul.products li.product .button,
.elementor-widget-products ul.products li.product .button {
    margin-top: auto !important;
}


/* === Mobile refinements 26-02-2026 === */


/* =====================================================
   MOBILE FIX – PRODUCTAFBEELDING DIRECT ZICHTBAAR
===================================================== */

@media (max-width: 768px) {

    .single-product .woocommerce-product-gallery,
    .single-product .woocommerce-product-gallery__wrapper,
    .single-product .woocommerce-product-gallery__image,
    .single-product .woocommerce-product-gallery img {

        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
        transform: none !important;
    }

    /* Eventuele loading animatie uitschakelen */
    .single-product .woocommerce-product-gallery {
        animation: none !important;
    }
}


/* =====================================================
   MOBILE CONTENT OMHOOG TREKKEN
   (Alles behalve homepage)
===================================================== */

@media (max-width: 768px) {

    :root {
        --mobile-content-offset: -65px; /* ← hier kun je spelen */
    }

    body:not(.home) .site-content {
        margin-top: var(--mobile-content-offset) !important;
    }

}


/* =====================================================
   MOBILE – ALTIJD 1 PRODUCT PER RIJ
   (Woo + Elementor + Gutenberg)
===================================================== */

@media (max-width: 768px) {

    /* WooCommerce standaard grid */
    .woocommerce ul.products li.product {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Elementor Woo widgets */
    .elementor-widget-woocommerce-products ul.products li.product,
    .elementor-widget-products ul.products li.product {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Gutenberg Woo blocks */
    .wp-block-woocommerce-product-query ul.products li.product {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

}


/* =====================================================
   PRODUCT AFBEELDINGEN – ACHTERGROND DEFINITIEF TRANSPARANT
   (Mobiel fix)
===================================================== */

@media (max-width: 768px) {

    /* Productkaart zelf */
    .woocommerce ul.products li.product,
    .elementor-widget-woocommerce-products ul.products li.product,
    .elementor-widget-products ul.products li.product {
        background-color: transparent !important;
    }

    /* Link wrapper */
    .woocommerce ul.products li.product a,
    .woocommerce ul.products li.product .woocommerce-LoopProduct-link {
        background-color: transparent !important;
    }

    /* Afbeelding wrapper */
    .woocommerce ul.products li.product img,
    .woocommerce-product-gallery,
    .woocommerce-product-gallery__wrapper,
    .woocommerce-product-gallery__image {
        background-color: transparent !important;
    }

}


/* =====================================================
   DESKTOP HOMEPAGE – MENU DROPDOWN WITTE ACHTERGROND
===================================================== */

@media (min-width: 1024px) {

    body.home .main-navigation ul ul {

        background-color: #ffffff !important;
        padding: 15px 0;
        box-shadow: 0 10px 25px rgba(0,0,0,0.08);
        border-radius: 6px;
    }

    /* Submenu links leesbaar */
    body.home .main-navigation ul ul li a {
        color: #333333 !important;
    }

    body.home .main-navigation ul ul li a:hover {
        background-color: #f5f5f5;
    }

    /* Zorg dat menu boven hero blijft */
    body.home .main-navigation {
        position: relative;
        z-index: 9999;
    }

}


/* =========================================
   FOOTER BRAND LINK – NOOIT ONDERSTREEPT
   (Desktop + Mobiel) + kleuren footer links
========================================= */

.site-footer a,
.site-info a,
.site-footer a:visited,
.site-info a:visited,
.site-footer a:hover,
.site-info a:hover {
    text-decoration: none !important;
}
/* ===== Footer links – premium styling ===== */

.site-footer a {
    color: #F4E3C3 !important;
    text-decoration: none !important;
    transition: color 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

/* Hover effect */
.site-footer a:hover {
    color: #FFFFFF !important;
    opacity: 0.85;
}


/* ===== Elementor knop exact centreren op mobiel ===== */

@media (max-width: 767px) {

    .elementor-widget-button {
        width: 100% !important;
        text-align: center !important;
    }

    .elementor-widget-button .elementor-button-wrapper {
        display: flex !important;
        justify-content: center !important;
    }

}


/* ==========================================
   MOBIEL – UNIVERSELE OVALE BUTTONS
   Homepage + WooCommerce categorie
   ========================================== */

@media (max-width: 768px) {

    /* WooCommerce categorie knoppen */
    .woocommerce ul.products li.product a.button,
    .woocommerce ul.products li.product .button,
    
    /* Essential Addons CTA buttons */
    .eael-call-to-action .eael-cta-button a,
    .eael-cta-button a {

        display: inline-block !important;
        background-color: #404338 !important;
        color: #ffffff !important;
        padding: 12px 24px !important;
        border-radius: 50px !important;
        text-decoration: none !important;
        font-weight: 600 !important;
        border: none !important;
        text-align: center !important;
    }

    /* Hover */
    .woocommerce ul.products li.product a.button:hover,
    .eael-call-to-action .eael-cta-button a:hover,
    .eael-cta-button a:hover {
        background-color: #565B4A !important;
        color: #ffffff !important;
    }

}


/* ==========================================
   DESKTOP – EA MASONRY SAFE ALIGN
   ========================================== */

@media (min-width: 769px) {

    /* Geef titelzone vaste minimale hoogte */
    .eael-product-grid .eael-product-title {
        min-height: 60px;
    }

    /* Geef prijszone vaste hoogte */
    .eael-product-grid .eael-product-price {
        min-height: 30px;
    }

    /* Button styling */
    .eael-product-grid a.button.product_type_external {
        display: inline-block;
        margin-top: 15px;
        background-color: #404338 !important;
        color: #ffffff !important;
        padding: 14px 28px !important;
        border-radius: 50px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        transition: all 0.3s ease;
    }

    .eael-product-grid a.button.product_type_external:hover {
        background-color: #565B4A !important;
        color: #ffffff !important;
    }

}


/* ==========================================
   Lege WooCommerce tab navigatie verwijderen
   ========================================== */

.single-product .woocommerce-tabs ul.tabs {
    display: none !important;
}

.single-product .woocommerce-tabs {
    border-top: none !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* WooCommerce tab navigatie volledig verwijderen */

.single-product div.product .woocommerce-tabs ul.tabs.wc-tabs {
    display: none !important;
}

.single-product div.product .woocommerce-tabs {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}


/* =====================================================
   Aanpassen img[alt="8000 Wijnen"]
===================================================== */

img[alt="8000 Wijnen"] {
    aspect-ratio: 768 / 544;
    width: 100%;
    height: auto;
}


/* =====================================================
   FIX: Single product afbeelding proportioneel begrenzen
===================================================== */

.woocommerce div.product div.images img {
    max-height: 600px;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
}


/* =====================================================
   MOBIEL – WooCommerce beschrijving zonder tab-styling
===================================================== */

@media (max-width: 768px) {

    .single-product .woocommerce-tabs,
    .single-product .woocommerce-Tabs-panel,
    .single-product .woocommerce-Tabs-panel--description {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
    }

}


/* Mobiel – lege ruimte boven WooCommerce beschrijving verwijderen */

@media (max-width: 768px) {

    .single-product .woocommerce-Tabs-panel--description {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

}


/* =====================================================
   Styling voor vaste waarden in korte productbeschrijving
===================================================== */

.dfw-wine-specs{
margin:8px 0 18px 0;
padding:12px 14px;
border:1px solid #ececec;
border-radius:6px;
background:#fafafa;
font-size:14px;
}

.dfw-spec-row{
display:flex;
align-items:center;
gap:10px;
padding:4px 0;
}

.dfw-icon{
font-size:16px;
width:22px;
}

.dfw-spec-label{
font-weight:700;
width:95px;
letter-spacing:1px;
text-transform:uppercase;
color:#444;
}

.dfw-wine-specs{
margin:2px 0 18px 0;
padding:12px 14px;
border:1px solid #ececec;
border-radius:6px;
background:#fafafa;
font-size:14px;
}


/* ==============================================================
   Categorie weergave op productpagina, in combinatie met php
   =========================================================== */

.product_meta .posted_in{
font-weight:600;
}

.product_meta .posted_in a{
display:inline;
font-weight:400;
}

.product_meta .posted_in a:after{
content:",\A";
white-space:pre;
}

.product_meta .posted_in a:last-child:after{
content:"";
}

.product_meta .posted_in{
display:none;
}

.product_meta .tagged_as{
display:none;
}

.product_meta .posted_in,
.product_meta .tagged_as{
display:none;
}

.product_meta{
margin-top:10px;
padding:12px 14px;
border:1px solid #ececec;
border-radius:6px;
background:#fafafa;
}

/* ===============================================================
   Productfoto centraal t.o.v. rechter kolom (korte in, CTA e.d.)
   ============================================================== */

.single-product .product-gallery-summary{
align-items:center;
}

.single-product .woocommerce-product-gallery{
padding-top:20px;
}
/* ==========================================
   LEEG
   ========================================== */

.single-product .woocommerce-product-gallery{
padding-top:20px;
}