.mms-product-card {
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 14px;
    background: #fff;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    max-width: 900px;
    margin: 1.5em auto;
}

/* When a highlight video is present, give the card a bit more room on desktop/tablet.
   This keeps the video from feeling cramped in the right column without changing mobile. */
@media (min-width: 721px) {
    .mms-product-card.mms-product-card--has-video.mms-product-card--width-auto {
        max-width: 1020px;
    }
}

.mms-product-card__image-wrap {
    flex: 0 0 auto;
}

.mms-product-card__image {
    display: block;
    height: auto;
    max-width: 100%;
    border-radius: 10px;
}

/* Placeholder rectangle in editor when no real image is shown */
.mms-product-card__image--placeholder {
    background: #f3f3f3;
    border: 1px dashed #ccc;
    width: 140px;
    height: 90px;
}


/* Prevent text column from collapsing when media is wide */
.mms-product-card__body {
    flex: 1 1 48%;
    min-width: 260px;
}

@media (max-width: 720px) {
    .mms-product-card {
        /* Force stacking on real mobile browsers.
           Important: layout modifier classes set flex-direction later in the stylesheet,
           so we must override them here. */
        flex-direction: column !important;
    }
    .mms-product-card--layout-image-left,
    .mms-product-card--layout-image-right,
    .mms-product-card--layout-image-top {
        flex-direction: column !important;
    }
    .mms-product-card__image-wrap {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
    }
    .mms-product-card__body {
        min-width: 0;
    }
}

.mms-product-card__title {
    margin: 0 0 4px;
    font-size: 1.05em;
}

.mms-product-card__price {
    font-weight: bold;
    margin-bottom: 4px;
}

.mms-product-card__excerpt {
    font-size: 0.9em;
    color: #555;
    margin-bottom: 8px;
}

.mms-product-card__button {
    margin-top: 6px;
}

.mms-product-card__button .mms-us-button,
.mms-product-card__button .mms-product-card__button-preview {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
}

.mms-product-card__button .mms-product-card__button-preview {
    background: #0073aa;
    color: #fff;
}

/* Full-width hero layout: image stacked above body */
.mms-product-card--thumb-full,
.mms-product-card--layout-image-top {
    flex-direction: column;
    align-items: stretch;
}

.mms-product-card--thumb-full .mms-product-card__image-wrap,
.mms-product-card--layout-image-top .mms-product-card__image-wrap {
    width: 100%;
    margin-bottom: 10px;
}

.mms-product-card--thumb-full .mms-product-card__image,
.mms-product-card--layout-image-top .mms-product-card__image {
    width: 100%;
    max-width: 100%;
}

/* Layout variants */
.mms-product-card--layout-image-left {
    flex-direction: row;
}

.mms-product-card--layout-image-right {
    flex-direction: row-reverse;
}

/* Card widths */
.mms-product-card--width-auto {
    max-width: 900px;
}

.mms-product-card--width-narrow {
    max-width: 480px;
}

.mms-product-card--width-wide {
    max-width: 1100px;
}

.mms-product-card--width-full {
    max-width: none;
    width: 100%;
}

/* Button alignment */
.mms-product-card__button--align-left {
    text-align: left;
}

.mms-product-card__button--align-center {
    text-align: center;
}

.mms-product-card__button--align-right {
    text-align: right;
}

/* Error state */
.mms-product-card--invalid {
    border-color: #d63638;
    color: #d63638;
    font-size: 0.9em;
}


/* Video highlights */
.mms-product-card__video-wrap {
    margin-top: 12px;
    border-radius: 12px;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

.mms-product-card__video {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 12px;
}



/* Emphasize certain products (by title) with a larger image column on desktop/tablet. */
@media (min-width: 721px) {
    .mms-product-card.mms-product-card--img-emphasis.mms-product-card--layout-image-left .mms-product-card__image-wrap,
    .mms-product-card.mms-product-card--img-emphasis.mms-product-card--layout-image-right .mms-product-card__image-wrap {
        flex: 0 0 66%;
        width: 66%;
        max-width: 66%;
    }
    .mms-product-card.mms-product-card--img-emphasis.mms-product-card--layout-image-left .mms-product-card__meta,
    .mms-product-card.mms-product-card--img-emphasis.mms-product-card--layout-image-right .mms-product-card__meta {
        flex: 1 1 34%;
        min-width: 260px;
    }
}

/* Keep highlight videos neatly inside the card frame. */
.mms-product-card__video-wrap {
    overflow: hidden;
    border-radius: 12px;
}
/* Make landscape images feel less "small" by giving them a consistent preview height. */
.mms-product-card--img-landscape.mms-product-card--layout-image-left .mms-product-card__image-wrap,
.mms-product-card--img-landscape.mms-product-card--layout-image-right .mms-product-card__image-wrap {
    /* Make landscape cards feel larger by giving the image column more space */
    flex: 0 0 60%;
    width: 60%;
    max-width: 60%;
}

.mms-product-card--img-landscape .mms-product-card__image {
    width: 100%;
    /* Show the FULL image (no crop). This will letterbox within the fixed height. */
    object-fit: contain;
    background: rgba(0,0,0,0.04);
}

/* Height map by thumb size (landscape only) */
.mms-product-card--img-landscape.mms-product-card--thumb-xs .mms-product-card__image { height: 110px; }
.mms-product-card--img-landscape.mms-product-card--thumb-sm .mms-product-card__image { height: 140px; }
.mms-product-card--img-landscape.mms-product-card--thumb-md .mms-product-card__image { height: 180px; }
.mms-product-card--img-landscape.mms-product-card--thumb-lg .mms-product-card__image { height: 230px; }
.mms-product-card--img-landscape.mms-product-card--thumb-xl .mms-product-card__image { height: 270px; }

/* On stacked layout, keep video and image full width */
.mms-product-card--layout-image-top .mms-product-card__video {
    width: 100%;
}


.mms-product-card__description {
    margin-top: 10px;
    font-size: 0.98em;
    line-height: 1.45;
}

.mms-product-card__description p { margin: 0 0 0.8em; }