.mmm-plan-day-list {
    min-height: 80px;
    padding: 0.5em;
    background: color-mix(in srgb, var(--mmm-primary) 4%, transparent);
    border-radius: var(--ast-border-radius);
}

/* Per-day start selector – structural basics (design lives in theme) */
.mmm-plan-day-start {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.85em;
}
.mmm-plan-day-list.drop-target {
    background: color-mix(in srgb, var(--mmm-primary) 12%, transparent);
}

/* ==========================================================
   Einplanen-Dialog (Planner Dialog) – Struktur.
   Optik (Radius, Schatten, Abstände) liegt im Theme.
   ========================================================== */
.mmm-planner-dialog-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}

.mmm-planner-dialog {
    background: #fff;
    width: min(90vw, 360px);
}

.mmm-planner-dialog label {
    display: block;
    margin-bottom: 12px;
}

.mmm-planner-dialog-text {
    margin: 0 0 12px;
}

.mmm-planner-dialog label input,
.mmm-planner-dialog label select {
    display: block;
    width: 100%;
    margin-top: 4px;
    box-sizing: border-box;
}

.mmm-planner-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

/* ==========================================================
   Kochmodus (Cook Mode) – Struktur.
   Optik liegt im Theme.
   ========================================================== */
body.mmm-cook-mode-open {
    overflow: hidden;
}

.mmm-cook-mode {
    position: fixed;
    inset: 0;
    background: #fff;
    z-index: 99999;
    display: flex;
    flex-direction: column;
}

.mmm-cook-mode-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mmm-cook-mode-step {
    flex: 1;
    overflow-y: auto;
}

.mmm-cook-mode-nav {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

/* ==========================================================
   Subscribe form — structural basics (design lives in theme)
   ========================================================== */
.mmm-subscribe-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mmm-subscribe-field label {
    display: block;
}

.mmm-subscribe-field input {
    width: 100%;
    box-sizing: border-box;
}

.mmm-subscribe-consent label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.mmm-subscribe-submit {
    align-self: flex-start;
    cursor: pointer;
}

.mmm-subscribe-message:empty {
    display: none;
}

/* ==========================================================
   Recipe ratings — structural basics (design lives in theme)
   ========================================================== */
.mmm-rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mmm-rating__stars {
    display: inline-flex;
}

/* Star input: a reversed radio group that reads left-to-right as a star bar.
   The visually-hidden radios keep the control keyboard-accessible. */
.mmm-rating-field > label {
    display: block;
}

.mmm-rating-input {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.mmm-rating-input input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.mmm-rating-input label {
    margin: 0;
    line-height: 1;
    cursor: pointer;
}

/* Reviews list ([mmm_recipe_reviews]) — structure only */
.mmm-reviews {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.mmm-review__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

/* ==========================================================
   Meal photos — structural basics (design lives in theme)
   ========================================================== */

/* Gallery ([mmm_recipe_photo_gallery]): responsive thumbnail grid. */
.mmm-photo-gallery__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.mmm-photo-gallery__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
}

/* Upload form ([mmm_photo_upload_form]): the native file input stays visible
   (and keyboard-accessible); the label above it is the visual call to action. */
.mmm-photo-upload__label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.mmm-photo-upload__recipe-image img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ==========================================================
   Image walls ([mmm_community_photo_wall])
   — structure. Design (radius, overlay, hover) lives in the theme.
   ========================================================== */
.mmm-image-wall__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.mmm-image-wall__tile {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 1 / 1;
}

.mmm-image-wall__tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mmm-image-wall__label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ==========================================================
   Latest-plan teaser ([mmm_latest_plan_teaser]) — structure.
   Design (colors, radius, shadow) lives in the theme.
   ========================================================== */
.mmm-plan-teaser__card {
    display: flex;
    flex-wrap: wrap;
    text-decoration: none;
    overflow: hidden;
}

.mmm-plan-teaser__media {
    flex: 1 1 340px;
    min-width: 260px;
}

.mmm-plan-teaser__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mmm-plan-teaser__body {
    flex: 1 1 320px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.mmm-plan-teaser__cta {
    margin-top: auto;
}

/* Back link above the meal-hero title — structure (design lives in theme) */
.mmm-plan-hero__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative;
    z-index: 1;
}

/* ---------------------------------------------------------------
   Busy state for AJAX-triggering controls (set via mmmSetBusy in
   frontend.js) — structural rules; colors live in the child theme.
   --------------------------------------------------------------- */
.is-busy {
    opacity: .6;
    pointer-events: none;
    cursor: progress;
    position: relative;
}

/* ==========================================================
   Empty planner hint – structural basics (design lives in theme)
   ========================================================== */

.mmm-plan-empty {
    list-style: none;
}

.mmm-plan-empty[hidden] {
    display: none;
}

/* Initial state comes from PHP; :has keeps it right when meals are added or
   removed without a reload. Browsers without :has keep the initial state. */
.mmm-plan-builder:has(.mmm-plan-item) .mmm-plan-empty {
    display: none;
}

.mmm-plan-builder:not(:has(.mmm-plan-item)) .mmm-plan-empty {
    display: block;
}

/* ==========================================================
   Per-day drop hint – structural basics (design lives in theme)
   ========================================================== */

.mmm-plan-day-hint {
    list-style: none;
}

.mmm-plan-day-hint[hidden] {
    display: none;
}

/* Same approach as the empty-planner hint, but scoped to one day: the initial
   state comes from PHP, :has keeps it right when meals are dragged in or out
   without a reload. Browsers without :has keep the initial state. */
.mmm-plan-day-list:has(.mmm-plan-item) .mmm-plan-day-hint {
    display: none;
}

.mmm-plan-day-list:not(:has(.mmm-plan-item)) .mmm-plan-day-hint {
    display: block;
}

/* ==========================================================
   Affiliate links on equipment pages – structural basics
   (design lives in theme)
   ========================================================== */

.mmm-affiliate__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75em;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mmm-affiliate__item {
    display: flex;
    align-items: baseline;
    gap: 0.5em;
    margin: 0;
}

/* ==========================================================
   Disclosure label ([mmm_disclosure_label]) – structural basics.
   Design lives in the theme, but deliberately NOT the visibility:
   a disclosure the site owner has switched on must not be themable into
   invisibility, so display and visibility are pinned here.
   ========================================================== */

.mmm-disclosure {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em;
    margin: 0 0 var(--mmm-s3, 12px);
}

.mmm-disclosure__label,
.mmm-disclosure__sponsor {
    display: inline-flex !important;
    visibility: visible !important;
    align-items: center;
    line-height: 1;
    white-space: nowrap;
}

/* Card variant: label only — the sponsor name stays on the single page. */
.mmm-disclosure--card {
    margin: 0 0 var(--mmm-s1, 4px);
}

/* Inside a browse card's picture the label is an overlay in the top corner,
   not a line in the flow: these rows are dense, and a line of its own both
   shifted the layout and read as part of the heading. Cards without a photo
   keep the in-flow position, so the rules stay scoped to the media block. */
.mmm-recipe-row__media,
.mmm-plan-teaser__media {
    position: relative;
}

.mmm-recipe-row__media .mmm-disclosure--card,
.mmm-plan-teaser__media .mmm-disclosure--card {
    position: absolute;
    top: var(--mmm-s2, 8px);
    left: var(--mmm-s2, 8px);
    margin: 0;
    z-index: 1;
    /* The picture is a link; the label must not swallow the click. */
    pointer-events: none;
}

/* Ingredient products ([mmm_ingredient_products]) — structural only.
   The table reuses .mmm-nutrition-table, so the theme styles it. As many
   columns as the ingredient has products will not fit a narrow viewport,
   hence the scroller — around the table alone, so the note and the source
   footnotes below it wrap normally instead of scrolling sideways with it. */
.mmm-ingredient-products__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* The lines of a heading cell are divs and stack on their own; this is only
   the belt to that pair of braces, for anything that resets display. */
.mmm-ingredient-products__title,
.mmm-ingredient-products__flag,
.mmm-ingredient-products__meta,
.mmm-ingredient-products__source {
    display: block;
}

.mmm-ingredient-products__note {
    margin: 8px 0 0;
    line-height: 1.45;
}

/* Product impact on a meal plan ([mmm_meal_plan_product_impact]) — structural
   only. One table per ingredient, each carrying the nutrition-table classes
   (.mmm-nutrition-table .mmm-nutri-table .mmm-nutri-table--impact) so the
   theme styles them like every other nutrition table; the scroller is per
   table, so a narrow viewport scrolls one of them rather than the whole
   block. */
.mmm-product-impact__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.mmm-product-impact__group + .mmm-product-impact__group {
    margin-top: 1.5rem;
}

.mmm-product-impact__meals {
    display: inline-block;
}

/* Same reason as on the ingredient page: the lines of a heading cell are divs
   and stack on their own. This is only the belt for anything that resets
   display. */
.mmm-product-impact__product,
.mmm-product-impact__brand {
    display: block;
}

/* Preparation notes — on the plan page's day rail and in the planner's day
   boxes, from Mixmymeals_Meal_Plan::calc_prep_tasks(). Structural only; the
   design is the theme's. [hidden] is pinned because a theme rule giving the
   container a display would otherwise beat the browser's own [hidden] rule. */
.mmm-plan-day-prep[hidden] {
    display: none;
}

.mmm-prep-notes {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mmm-prep-note__task {
    font-weight: 600;
}

/* A preparation step on the recipe and meal page. */
.mmm-step-prep {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-size: 0.85em;
}

/* Embeds — [mmm_recipe_embed] and [mmm_meal_plan_embed], one recipe or plan
   as a card inside a blog post. Structure only: picture beside the text where
   the column is wide enough, above it where it is not, and a mosaic for a
   plan with several pictures. Frame, colours and type are the theme's. */
.mmm-embed {
    display: flex;
    flex-wrap: wrap;
    margin: 1.5em 0;
    overflow: hidden;
}

.mmm-embed__media {
    display: block;
    flex: 1 1 240px;
    min-height: 180px;
    position: relative;
}

.mmm-embed__media > img,
.mmm-embed__mosaic img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
}

.mmm-embed__media > img {
    position: absolute;
    inset: 0;
}

.mmm-embed__body {
    display: flex;
    flex-direction: column;
    flex: 2 1 300px;
    min-width: 0;
    padding: 1em 1.25em;
}

.mmm-embed__kicker,
.mmm-embed__title,
.mmm-embed__lead {
    margin: 0 0 0.5em;
}

.mmm-embed__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
    margin: 0 0 0.75em;
}

.mmm-embed__dishes {
    margin: 0 0 0.75em;
    padding: 0;
    list-style: none;
}

.mmm-embed__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin-top: auto;
}

/* Placed tile by tile, like the browse cards' mosaic: an image optimiser's
   <noscript> beside each picture would otherwise take a cell. min-height: 0
   keeps a tall thumbnail from pushing its row open. */
.mmm-embed__mosaic {
    display: grid;
    position: absolute;
    inset: 0;
    gap: 2px;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.mmm-embed__mosaic img {
    min-height: 0;
}

.mmm-embed__mosaic img:nth-of-type(1) { grid-column: 1; grid-row: 1 / -1; }
.mmm-embed__mosaic img:nth-of-type(2) { grid-column: 2; grid-row: 1; }
.mmm-embed__mosaic img:nth-of-type(3) { grid-column: 2; grid-row: 2; }

.mmm-embed__mosaic--2 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
}

.mmm-embed__mosaic--2 img:nth-of-type(1) { grid-row: 1; }

/* Only editors see this: an embed whose recipe or plan is gone. */
.mmm-embed--missing {
    display: block;
    padding: 0.75em 1em;
    border: 1px dashed currentColor;
}

/* ==========================================================
   PLAN SERVINGS — the field above a plan's shopping list
   (?mmm_persons_to_add). Structure only: one line, − value +, and
   the planner link beside it where there is room; the look is the
   theme's. .mmm-servings-delta is the "+1" appended to servings on
   the rail and in the hero.
   ========================================================== */
.mmm-plan-servings {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 1em;
    row-gap: 0.25em;
}

.mmm-plan-servings__line,
.mmm-plan-servings__controls {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35em;
}

.mmm-plan-servings__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2em;
    min-height: 2em;
    text-decoration: none;
}

.mmm-plan-servings__step.is-disabled {
    opacity: 0.35;
    cursor: default;
}

.mmm-plan-servings__value {
    min-width: 1.75em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.mmm-servings-delta[hidden] {
    display: none;
}

.mmm-plan-shopping__list[aria-busy="true"] {
    opacity: 0.6;
}