/* Winkel block */

.mdm-shop {
    background: #fff;
    border-radius: 10px;
    padding: 24px;
    margin: 0 0 24px 0;
    overflow: hidden; /* contain floated child */
}

.mdm-shop__title,
.mdm-shop h2,
.mdm-shop .wp-block-heading {
    margin: 0 0 15px 0;
}

.mdm-shop__content {
    margin: 0 0 1em 0;
}

.mdm-shop__content > *:last-child {
    margin-bottom: 0;
}

.mdm-shop__media {
    margin: 0 0 1rem 0;
}

.mdm-shop__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Desktop: afbeelding rechts, max 50% breed, tekst loopt eromheen */
@media (min-width: 768px) {
    .mdm-shop__media {
        float: right;
        width: 50%;
        max-width: 50%;
        margin: 0 0 1rem 1.5rem;
    }
}

/* Button onderaan — clear zodat 'ie onder de afbeelding valt */
.mdm-shop__cta {
    clear: both;
    margin-top: 1rem;
}

.mdm-shop__arrow {
    display: inline-block;
    margin-left: .35em;
    transition: transform .15s ease;
}

.mdm-shop__button:hover .mdm-shop__arrow {
    transform: translateX(3px);
}

/* -----------------------------------------------------------------------
 * Editor + frontend — gedeelde styling
 * ----------------------------------------------------------------------- */
.editor-styles-wrapper .wp-block[data-type="acf/shop"] > div,
.editor-styles-wrapper .mdm-shop {
    background: #fff;
    border-radius: 10px;
    padding: 24px;
    overflow: hidden;
}

/* Chevron automatisch achter de knop-tekst in de editor + frontend */
.mdm-shop .wp-block-button__link::after {
    content: " \203A";
    display: inline-block;
    margin-left: .35em;
    transition: transform .15s ease;
}
.mdm-shop .wp-block-button__link:hover::after {
    transform: translateX(3px);
}

/* Image basis-styling — forceer alle shop-afbeeldingen op 286 x 216 (cropped). */
.mdm-shop .wp-block-image,
.mdm-shop figure.wp-block-image {
    margin: 0 0 1rem 0;
    width: 286px;
    max-width: 100%;
    height: 216px;
}
.mdm-shop .wp-block-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* -----------------------------------------------------------------------
 * Frontend only — float rechts op desktop zodat tekst eromheen loopt.
 * In de editor NIET floaten (block wrappers overlappen anders en worden
 * onklikbaar).
 * ----------------------------------------------------------------------- */
@media (min-width: 768px) {
    .mdm-shop .wp-block-image,
    .mdm-shop figure.wp-block-image {
        float: right;
        margin: 0 0 1rem 1.5rem;
    }
}

/* Editor: float uitschakelen zodat elk block aanklikbaar blijft,
 * maar wel dezelfde 286 x 216 preview-grootte aanhouden. */
.editor-styles-wrapper .mdm-shop .wp-block-image,
.editor-styles-wrapper .mdm-shop figure.wp-block-image {
    float: none !important;
    width: 286px !important;
    max-width: 100% !important;
    height: 216px !important;
    margin: 0 0 1rem 0 !important;
}