/**
* Theme Name:        avanam-starbella
* Theme URI:         https://templatemela.com/
* Template:          avanam
* Author:            TemplateMela
* Author URI:        #
* Description:       This is a child theme of Avanam, generated by TemplateMela.
* Version:           1.0.0
* License:           GNU General Public License v3.0 (or later)
* License URI:       https://www.gnu.org/licenses/gpl-3.0.html
* Text Domain:       avanam-starbella
* Requires at least: 6.2
* Tested up to:      6.6
* Requires PHP:      7.4
* Tags: translation-ready, two-columns, right-sidebar, left-sidebar, footer-widgets, blog, custom-logo, custom-background, custom-menu, rtl-language-support, editor-style, threaded-comments, custom-colors, featured-images, wide-blocks, full-width-template, theme-options, e-commerce



*/

.wpsf-product-title
{
 height:82px;   
}
.add-to-cart-icon
{
 display: none!important;   
}

.wpsf-product.swiper-slide .wps-product-data
{
 border: none!important;   
}

.wpsf-product.swiper-slide .wps-product-data:hover
{
 border: none!important;   
}
.wps-product-data .sp-wps-product-image-area a img:hover{
         
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1)!important;
            border-color: #4CAF50!important;
    border-width: 2px;
}

#wps-slider-section.wps-slider-section-2284
{
    
 padding-top: 0px !important;   
}
.wps-product-data .sp-wps-product-image-area a img
{
    border-radius: 10px!important;
}
@media (min-width: 1025px) {
 
    .woocommerce-carousel .splide__track ul.products {
         gap: 12px !important;
    }
        .elementor-element-00797ae ul.products, .elementor-element-00797ae .splide__list {
   
            gap: 12px !important;

        }
    
}


#wps-slider-section #sp-woo-product-slider-2284 .wpsf-cart-button a:not(.sp-wqvpro-view-button):not(.sp-wqv-view-button) {
    color: #ffffff!important;
    background-color: #32cd33!important;
    border: 1px solid #d4d0d0!important;
    border-radius: 5px!important;
}
.wpsp-nav.swiper-button-next,.wpsp-nav.swiper-button-prev
{
  display:none!important;  
}
.wc-pao-addons-container {
    width: 100% !important;
}

.wc-pao-addon-wrap div {
    display: inline-block;
	margin-right: 10px;
}
.splide__arrows.splide__arrows--ltr
{
   display:none!important; 
}

@media (min-width: 768px) {
    .woocommerce ul.products.woo-archive-action-on-hover:not(.products-list-view) li.product:focus-within .entry-content-wrap, .woocommerce ul.products.woo-archive-action-on-hover:not(.products-list-view) li.product:hover .entry-content-wrap {
        -webkit-transform: translateY(-1.2rem)!important;
        transform: translateY(-1.2rem)!important;
    }
}
.woocommerce ul.products li.product:not(.products-list-view) .product-details.entry-content-wrap .product-action-wrap
{
  bottom:10px !important;
    position: absolute;
}

@media (min-width: 1025px) {
    .elementor-element-00797ae ul.products li.product .product-thumbnail {
        width: 35% !important;
        max-width: 180px !important;
        margin-right: 25px !important;
        flex-shrink: 0;
    }
}
/* --- MOBIEL & TABLET VERSIE (< 1025px) --- */
@media (max-width: 1024px) {
    div[data-id="833f1d1"] {
        background-color: #ffffff !important;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08) !important;
        border: 1px solid #f1f1f1 !important;
        border-radius: 15px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        
        /* Belangrijk: Padding toevoegen, anders plakt tekst tegen de rand op mobiel */
        padding: 25px !important;
        margin-top: 20px !important;
        margin-bottom: 20px !important;
    }
}
@media (min-width: 1025px) {
    .elementor-element-00797ae ul.products li.product {
       padding: 10px !important; 
    }
.woocommerce ul.products li.product:not(.products-list-view) .product-details.entry-content-wrap .product-action-wrap {
    bottom: -2.3rem;
    width: 50%;
    right: 0px;
    position: absolute;
    left: auto;
}    

/* --- Styling voor container 833f1d1 (Desktop EN Mobiel) --- */

/* 1. De Basis (Geldt voor alle schermen) */
div[data-id="833f1d1"] {
    background-color: #ffffff !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid #f1f1f1 !important;
    border-radius: 20px !important;
    
    /* Zorg dat de kaart nooit breder is dan het scherm */
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* 2. SPECIFIEK VOOR DESKTOP (Grote schermen) */
@media (min-width: 768px) {
    div[data-id="833f1d1"] {
        padding: 50px !important;
        margin-top: 30px !important;
        margin-bottom: 30px !important;
    }
}

/* 3. SPECIFIEK VOOR MOBIEL (Kleine schermen) */
@media (max-width: 767px) {
    div[data-id="833f1d1"] {
        /* Hier dwingen we de kaart zichtbaar te blijven */
        background-color: #ffffff !important; 
        
        /* Iets minder ruimte dan op desktop, maar wel genoeg voor het kaart-effect */
        padding: 25px !important; 
        margin-top: 20px !important;
        margin-bottom: 20px !important;
        border-radius: 15px !important;
        
        /* Zorg dat de kolommen onder elkaar staan (normaal doet Elementor dit zelf, maar voor de zekerheid) */
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }
}

/* --- Tekst Styling (Geldt overal) --- */
div[data-id="833f1d1"] h2.elementor-heading-title {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    margin-bottom: 25px !important;
    letter-spacing: -0.5px !important;
}

div[data-id="833f1d1"] p {
    font-size: 16px !important;
    line-height: 1.8 !important;
    color: #444444 !important;
    margin-bottom: 20px !important;
}

div[data-id="833f1d1"] a,
div[data-id="833f1d1"] span[style*="#ff6600"] {
    font-weight: 700 !important;
    text-decoration: none !important;
    border-bottom: 2px solid rgba(255, 102, 0, 0.2) !important;
}

/* Mobiele tekst iets kleiner maken zodat het past */
@media (max-width: 767px) {
    div[data-id="833f1d1"] h2.elementor-heading-title {
        font-size: 22px !important; /* Kleinere titel op mobiel */
    }
    div[data-id="833f1d1"] p {
        font-size: 15px !important; /* Iets kleinere tekst */
    }
}    
    
/* --- Veelgestelde Vragen in 2 Kolommen (Alleen Desktop) --- */
@media (min-width: 1025px) {
    /* We targetten de specifieke accordion widget ID */
    div[data-id="727384f"] .e-n-accordion {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Maakt 2 gelijke kolommen */
        gap: 20px; /* Ruimte tussen de blokken */
        align-items: start; /* Zorgt dat ze netjes bovenaan uitlijnen */
    }

    /* Optioneel: Zorg dat de items eruit zien als losse blokjes */
    div[data-id="727384f"] .e-n-accordion-item {
        border: 1px solid #e5e5e5;
        border-radius: 8px;
        background-color: #fff;
        height: fit-content; /* Voorkomt dat korte vragen onnodig uitrekken */
    }
}
    
 /* Verberg "Kies jouw fatbike" widget direct */
.elementor-element-f23508a {
    display: none !important;
}   
/* danny*/
/* --- Desktop Layout: Modern, Ruimtelijk & Symmetrisch --- */

/* 1. RESET: Verberg de ongewenste elementen */
.elementor-element-d1816cd, 
.elementor-element-1de291a {
    display: none !important;
}
.elementor-615 .elementor-element.elementor-element-7611f20:not(.elementor-motion-effects-element-type-background), 
    .elementor-615 .elementor-element.elementor-element-7611f20 > .elementor-motion-effects-container > .elementor-motion-effects-layer 
    {
     background-image: url(FB-2-700x570.jpg)!important;  
    }
    
.elementor-615 .elementor-element.elementor-element-7611f20 > .elementor-background-overlay
    {
     opacity: 0.6!important;   
    }
  .woocommerce ul.products.woo-archive-action-on-hover:not(.products-list-view) li.product.is-visible:hover .entry-content-wrap
    {
     top:21px;   
    }
@media (min-width: 1025px) {



    /* --- LAYOUT & RUIMTE --- */

    /* Linker Sectie (Grote Banner) */
    .elementor-element-7611f20 {
        width: 50% !important;
        float: left !important;
        clear: left !important;
        box-sizing: border-box;
        padding-right: 40px !important; /* VEEL MEER RUIMTE TUSSEN DE KOLOMMEN */
       padding-bottom: 108px !important;
            padding-top: 107px !important;
    }

    /* Rechter Sectie (Lijst met fietsen) */
    .elementor-element-00797ae {
        width: 50% !important;
        float: left !important;
        clear: none !important;
        box-sizing: border-box;
        padding-left: 10px !important;
        margin-top: 0 !important;
        display: flex !important;
        flex-direction: column;
    }

    /* --- TITEL 'KIES JOUW FATBIKE' --- */
    .elementor-element-00797ae .elementor-widget-heading {
        padding-top: 30px !important; /* Extra ruimte boven de titel */
        margin-bottom: 25px !important; /* Ruimte onder de titel */
    }

    /* --- LIJST MET PRODUCTEN (Rechterkant) --- */
    .elementor-element-00797ae ul.products,
    .elementor-element-00797ae .splide__list {
        display: flex !important;
        flex-direction: column !important;
        gap: 25px !important; /* Mooie gelijke ruimte tussen de kaarten */
        width: 100% !important;
        height: 100% !important; 
        min-height: 450px; /* Zorgt voor body in de rechterkolom */
    }
    
    .elementor-element-00797ae .splide__track {
        overflow: visible !important;
    }

    /* --- PRODUCT KAART DESIGN (MODERN) --- */
    .elementor-element-00797ae ul.products li.product {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        
        /* Het 'Geliktere' Design */
        background: #ffffff;
        border: 1px solid #e0e0e0; /* Iets donkerder randje voor contrast */
        border-radius: 16px; /* Modernere, grotere ronding */
        padding: 20px !important; 
        box-shadow: 0 4px 12px rgba(0,0,0,0.04); /* Zachte schaduw */
        transition: all 0.3s ease;
        margin-bottom: 0 !important;

        /* TRUC VOOR GELIJKE HOOGTE: */
        flex: 1 !important; /* Rekt de kaarten uit zodat ze samen de hoogte vullen */
    }

    /* Hover Effect: Kaart komt omhoog + Groene rand */
    .elementor-element-00797ae ul.products li.product:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 30px rgba(0,0,0,0.1);
        border-color: #4CAF50;
    }

    /* Afbeelding links in de kaart */
    .elementor-element-00797ae ul.products li.product .product-thumbnail {
        width: 35% !important;
        max-width: 130px !important;
        margin-right: 25px !important;
        flex-shrink: 0;
    }
    
    .elementor-element-00797ae ul.products li.product .product-thumbnail img {
        border-radius: 8px !important;
    }

    /* Tekst rechts in de kaart */
    .elementor-element-00797ae ul.products li.product .product-details {
        width: 65% !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: left !important;
    }

    /* Titel Styling */
    .elementor-element-00797ae ul.products li.product h2 {
        font-size: 17px !important;
        font-weight: 700 !important;
        color: #111;
        margin: 0 0 5px 0 !important;
        line-height: 1.3;
    }

    /* Prijs Styling */
    .elementor-element-00797ae ul.products li.product .price {
        font-size: 20px !important;
        font-weight: 800 !important;
        color: #000;
        margin: 0 !important;
    }

    /* Verberg knoppen en extra producten (alleen top 3) */
    .elementor-element-00797ae ul.products li.product .product-actions,
    .elementor-element-00797ae ul.products li.product:nth-child(n+4) {
        display: none !important;
    }

    /* --- STYLING GROTE BANNER LINKS --- */
    /* Zorgt dat de grote foto dezelfde stijl krijgt als de kaarten */
    .elementor-element-7611f20 .elementor-widget-wrap {
        border-radius: 16px !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.08);
        overflow: hidden;
    }

    /* Layout Reset */
    .elementor-element-c75c3b2, 
    .elementor-section {
        clear: both;
    }
}