/* === Custom recipe additions === */

/* ---- Steps: full-width centered photo, text below ---- */

/* Force block layout on steps li (override flex from theme) */
.recipe-steps > li {
    display: block !important;
}

/* Photo: full width, centered, 810x540 */
.recipe-steps__photo {
    display: block !important;
    width: 100% !important;
    max-width: 810px !important;
    margin: 0 auto 1.2rem auto !important;
    flex: none !important;
}

.recipe-steps__photo a {
    display: block;
}

.recipe-steps__photo img {
    display: block;
    width: 100% !important;
    max-width: 810px !important;
    height: auto !important;
    aspect-ratio: 810 / 540;
    object-fit: cover;
    margin: 0 auto;
}

/* Text: below photo, left-aligned */
.recipe-steps__text {
    -ms-flex-item-align: unset !important;
    align-self: unset !important;
    text-align: left !important;
    max-width: 810px;
    margin: 0 auto;
}

/* Note (annotation) for ingredients on frontend */
.ingredients__note {
    color: #888;
    font-size: 0.9em;
    font-style: italic;
}

/* Custom time in steps header */
.meta-custom-time {
    white-space: nowrap;
    margin-left: 10px;
    margin-right: 10px;
    color: #666;
    font-size: 0.9em;
}

.meta-custom-time:before {
    content: "\23F0";
    position: relative;
    color: #ff4e00;
    font-size: 1rem;
    vertical-align: middle;
    margin-right: 6px;
    top: -1px;
}