@media (prefers-reduced-motion: no-preference) {
    @media (prefers-reduced-motion: no-preference) {
        .category-page-body .page-body {
            background: #ffffff !important;
        }
    }
}

@media (prefers-reduced-motion: no-preference) {
    @media (prefers-reduced-motion: no-preference) {
        .master-wrapper-page .page-title h1 {
            text-transform: none;
            text-align: center;
            font-size: 25px;
            font-weight: normal;
            color: #007ba4;
        }
    }
}

@media (prefers-reduced-motion: no-preference) {
    @media (prefers-reduced-motion: no-preference) {
        .breadcrumb strong {
            font-weight: bold !important;
            color: #007ba4 !important;
        }
    }
}


@media (prefers-reduced-motion: no-preference) {
    @media (prefers-reduced-motion: no-preference) {
        .master-wrapper-page .item-box .old-price {
            margin-right: 7px;
            text-decoration: line-through;
            font-weight: bold;
            font-size: 16px;
            color: #ff0000;
        }
    }
}

@media (prefers-reduced-motion: no-preference) {
    @media (prefers-reduced-motion: no-preference) {
        .master-wrapper-page .item-box .actual-price {
            font-weight: bold;
            font-size: 18px;
            color: #008000;
        }
    }
}

@media (prefers-reduced-motion: no-preference) {
    @media (prefers-reduced-motion: no-preference) {
        .buttons .button-1{
            padding: 13px 35px;
            border: 0;
            text-transform: uppercase;
            font-weight: bold;
            font-size: 14px;
            color: #fff;
            width: 100% !important;
        }
    }
}

@media (prefers-reduced-motion: no-preference) {
    @media (prefers-reduced-motion: no-preference) {
        .buttons .button-2 {
            padding: 13px 35px;
            border: 0;
            background: #ea954d !important;
            text-transform: uppercase;
            font-weight: bold;
            font-size: 14px;
            color: #fff;
            width: 100% !important;
        }
    }
}

@media (prefers-reduced-motion: no-preference) {
    @media (prefers-reduced-motion: no-preference) {
        .item-box .description {
            text-align: left;
            display: block;
            line-height: 25px;
            font-family: arial;
            font-size: 10pt;
            min-height: 110px;
        }
    }
}

.product-list .ribbon-wrapper .picture,
.product-grid .item-box .ribbon-wrapper .picture {
    padding-top: 40px;
    padding-bottom: 20px;
}

/* --- Product grid netjes uitlijnen --- */
.category-page-body .item-grid,
.product-grid .item-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
}

/* Tablet */
@media (max-width: 1024px) {
    .category-page-body .item-grid,
    .product-grid .item-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile */
@media (max-width: 768px) {
    .category-page-body .item-grid,
    .product-grid .item-grid {
        grid-template-columns: 1fr;
    }
}

/* Zorg dat je oude 32% width/margins niet meer storen */
.category-page-body .item-grid > .item-box,
.product-grid .item-grid > .item-box {
    width: auto !important;
    margin: 0 !important;
    height: 100%;
    box-sizing: border-box;
}

/* Maak van de kaart een kolom zodat content/knop netjes onder elkaar staat */
.category-page-body .item-box .product-item,
.product-grid .item-box .product-item {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Details neemt beschikbare ruimte, knop blijft onderaan */
.category-page-body .item-box .details,
.product-grid .item-box .details {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* Laat de opsomming/description weer block zijn (inline geeft rare hoogtes) */
.item-box .description {
    display: block !important;
}

/* Knop altijd onderaan */
.item-box .buttons {
    margin-top: auto;
}

/* Optioneel: vaste ruimte voor titel/prijs zodat rijen nóg strakker staan */
.item-box .product-title {
    min-height: 48px; /* tweak indien nodig */
}

.item-box .prices {
    min-height: 34px;
}


.product-grid .item-box .details {
    padding-top: 5px !important;
}

@media (prefers-reduced-motion: no-preference) {
    @media (prefers-reduced-motion: no-preference) {
        .item-box .picture a:before {
            padding-top: 80% !important;
        }
    }
}