/* ------------------------------
   HEADER / LOGO / BREADCRUMB
--------------------------------*/

header .tp-header-main {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.logo a img {
    max-height: 200px !important;
    max-width: 250px !important;
}

main.tp-page-area {
    padding-top: 15px !important;
}

.breadcrumb__area {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: 75px;
}

.tp-product-details-category {
    margin-top: 35px !important;
}


/* --------------------------------------------
   DESKTOP – KOEIEN BANNERS (465×300)
----------------------------------------------*/

.agro-wrapper {
    max-width: 1365px;
    margin: 0 auto;
    padding: 0 10px !important;
}

/* 3 kolommen strak naast elkaar */
.agro-row {
    display: flex !important;
    gap: 3px !important;
    margin: 0 !important;
}

.agro-col {
    flex: 1;
    margin: 0;
    padding: 0;
}

/* Desktopfoto volledig tonen zonder afsnijden */
.agro-col img {
    width: 100% !important;
    height: auto !important;        /* laat hoogte meeschalen */
    object-fit: contain !important; /* volledige koe zichtbaar */
    background: #fff;
    border-radius: 8px !important;
}

/* Desktop zichtbaar */
.desktop-only { 
    display: flex !important; 
}

/* Slider verborgen op desktop */
.mobile-only { 
    display: none !important; 
}


/* --------------------------------------------
   MOBIEL – SLIDER & UITLIJNING
----------------------------------------------*/
@media (max-width: 992px) {

    /* Desktop banners verbergen */
    .desktop-only {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    /* Slider inschakelen */
    .mobile-only {
        display: flex !important;
        overflow-x: auto;
        gap: 12px;
        scroll-snap-type: x mandatory;
        padding-bottom: 5px;
    }

    .mobile-only div {
        min-width: 90%;
        scroll-snap-align: center;
    }

    /* Mobiel – GEEN CROPPING */
    .mobile-only img {
        width: 100% !important;
        height: auto !important;
        max-height: 300px !important;
        object-fit: contain !important;
        background: #fff;
        border-radius: 8px !important;
    }

    /* Uitlijnen onder menu */
    .agro-wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}


/* --------------------------------------------
   WITRUIMTE VERWIJDEREN ONDER BANNERS
----------------------------------------------*/

.agro-wrapper + * {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.agro-wrapper + .tp-feature-area,
.agro-wrapper + .tp-product__area,
.tp-feature-area,
.tp-product__area {
    margin-top: 5px !important;
    padding-top: 0 !important;
}