/* =========================================================================
   Dierenkanjer: aanvullingen op main.css (okt 2026), geladen via inc/cro.php.
   Nieuwe blokken hergebruiken bestaande componenten; dit bestand regelt alleen
   plaatsing/witruimte en een paar kleine aanvullingen.
   ========================================================================= */

/* --- Sectiekoppen nieuwe blokken: zelfde opmaak als "Ons lezenswaardige blog" ------------- */
.dk-shopcats .content-heading h2,
.dk-bestsellers .content-heading h2 {
    color: #b9c725;
    font-weight: 500;
    margin: 0 0 20px;
}
@media screen and (max-width: 1024px) {
    .dk-shopcats .content-heading h2,
    .dk-bestsellers .content-heading h2 {
        font-size: 20px;
    }
}

/* --- Homepage: "Shop per dier" (hergebruikt .category-slider-wrapper .category) ------------ */
.dk-shopcats {
    margin-top: 60px;
}
.dk-shopcats .category-slider-wrapper {
    width: 100%;
    margin-top: 10px;
}
.dk-shopcats .category-slider-wrapper .swiper-slide a:hover .category {
    border-color: #b9c725;
}
/* Desktop: kaarten in rijen in plaats van een horizontale scrollrij (geen pijlen nodig). */
@media screen and (min-width: 1025px) {
    .dk-shopcats .category-slider-wrapper {
        overflow: visible;
    }
    .dk-shopcats .category-slider-wrapper .inner-wrapper {
        width: auto;
        max-width: 100%;
        flex-wrap: wrap;
        gap: 20px;
    }
    /* 6 kaarten per rij over de volle breedte */
    .dk-shopcats .category-slider-wrapper .swiper-slide {
        margin-right: 0;
        width: calc((100% - 5 * 20px) / 6) !important;
    }
    .dk-shopcats .category-slider-wrapper .category {
        width: 100%;
    }
    .dk-shopcats .category-slider-wrapper .category figure img {
        max-height: 95px;
        max-width: 110px;
    }
}

/* --- Homepage: USP-regel (hergebruikt .sp-usps van de productpagina) ----------------------- */
.dk-home-usps .sp-usps {
    margin-top: 35px;
}

/* --- Homepage: witruimte tussen de blokken ----------------------------------------------- */
.dk-bestsellers {
    margin: 80px 0 20px;
}
.home .related-products {
    margin-top: 100px;
}

/* --- Bestsellers (zelfde productkaarten als de categoriepagina's) ------------------------- */
.dk-bestsellers .wrapper {
    display: block;
}
.dk-bestsellers .products-archive-wrapper {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-top: 10px;
}
.dk-bestsellers .products-archive-wrapper > a {
    width: auto;
    max-width: none;
    margin: 0;
}
.dk-bestsellers .products-archive-wrapper p.title {
    color: #3a3a3a;
}
@media (max-width: 1024px) {
    .dk-bestsellers .products-archive-wrapper {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}

/* --- Megamenu: gegroepeerde links (bv. Stal & Erf + Weideafrastering) ----------------------- */
.dk-nav__groups {
    display: flex;
    gap: 28px;
    align-self: start;
    min-width: 0;
}
.dk-nav__group {
    flex: var(--dk-cols, 1) 1 0;
    min-width: 0;
}
.dk-nav__group + .dk-nav__group {
    border-left: 1px solid #eef0e2;
    padding-left: 24px;
}
.dk-nav__group-title {
    margin: 0 0 6px 10px;
    font-family: "Cocogoose", sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #3a3a3a;
}
.dk-nav__links.dk-nav__links--group {
    columns: var(--dk-cols, 1);
}

/* --- Productpagina: "kanjerprijs"-label onder de prijs (sinds de doctype/standards mode
       is de regelhoogte krapper; het label overlapte de prijs) ------------------------------ */
.price-wrapper .discount-price::after {
    top: 34px;
}

/* --- Productpagina: in3-blok onder de prijs op mobiel, prijs in vaste winkelmandbalk ------ */
.dk-sticky-price {
    display: none;
}
@media (max-width: 770px) {
    .price-wrapper {
        flex-wrap: wrap;
    }
    .price-wrapper .in-3 {
        flex: 1 1 100%;
        margin: 10px 0 0;
    }
    .add-to-cart form.cart {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .add-to-cart form.cart span.dk-sticky-price {
        display: block;
        flex: 0 0 auto;
        font-family: "Cocogoose", sans-serif;
        font-weight: 500;
        font-size: 20px;
        color: #fa7171;
        white-space: nowrap;
    }
}