/*
 * ===========================================================================
 *  MITTEN EATS — SINGLE RECIPE PAGE RESKIN (2026)
 *  File:   wp-content/themes/astra-child-mitten-eats/assets/css/mes-reskin-recipe.css
 *  Handle: mes-reskin-recipe  (enqueued in the child theme's functions.php
 *          wherever a WPRM recipe card renders: recipe posts, single
 *          wprm_recipe pages, and the private reskin test pages)
 *  Source: "Mitten Eats Recipe Card 1.3" mockups — OptA (desktop),
 *          OptAPhone (phone).
 * ===========================================================================
 *
 *  HOW THIS FILE IS WIRED
 *  ----------------------
 *  The markup comes from the WPRM template "mes-recipe-2026" (option
 *  wprm_template_mes-recipe-2026, source in the repo at
 *  scripts/wprm-templates/mes-recipe-2026.html). The template's outer
 *  wrapper is  <div class="mes-rcp">  and everything here is scoped under
 *  it, so the live template (8-22-23-1156) is never affected.
 *
 *  Parts of the markup:
 *    WPRM shortcodes    [wprm-recipe-name tag="h1"], [wprm-recipe-summary],
 *                       [wprm-recipe-image], [wprm-recipe-time] (inside ours)
 *    mitten-eats-search includes/recipe-page.php:
 *                       [mes_recipe_breadcrumb]  .mes-rcp-crumb
 *                       [mes_recipe_course]      .mes-rcp-eyebrow
 *                       [mes_recipe_author]      .mes-rcp-author
 *                       [mes_recipe_save]        .mes-rcp-action--save  (WPRM favorite)
 *                       [mes_recipe_share]       .mes-rcp-action--share (WPRM share popup)
 *                       [mes_recipe_cost_stat]   .mes-rcp-stat--cost
 *                       [mes_recipe_makes]       .mes-rcp-stat--makes
 *                       [mes_recipe_time_stat]   .mes-rcp-stat--time
 *                       [mes_recipe_prep_cook]   .mes-rcp-times
 *
 *  RULES THIS FILE FOLLOWS
 *  -----------------------
 *  - Every selector starts with .mes-rcp. Nothing global. One exception,
 *    still scoped to our template: .wprm-recipe:has(> .mes-rcp) (section 90,
 *    lets the phone hero image go full bleed).
 *  - No !important anywhere.
 *  - Specificity: the cloned WPRM template CSS (.wprm-recipe-template-
 *    mes-recipe-2026 …, some with !important) and Additional CSS
 *    (p { 17px !important }) exist. We beat them with markup (spans/divs,
 *    no <p>) and, where needed, the  :not(#mes-reskin-boost)  boost — an ID
 *    that never exists, adding one ID's worth of specificity.
 *  - WPRM's button shortcodes print their colors/padding as inline style=""
 *    attributes; those are set through shortcode attributes in
 *    recipe-page.php, not overridden here.
 *
 *  TABLE OF CONTENTS
 *    00  Tokens
 *    10  Hero grid (breadcrumb | text | image)
 *    20  Breadcrumb
 *    30  Hero text: eyebrow, H1, summary, author
 *    40  Hero image + Save / Share
 *    50  Stats bar
 *    55  Print link + phone jump nav
 *    60  Body grid (ingredients card | directions)
 *    65  Ingredients card: header, 1x/2x/3x, list + checkboxes, eMeals
 *    70  Directions: header, keep-screen-on switch, numbered steps
 *    75  Notes box
 *    80  Nutrition tiles, keywords, cost footnote
 *    90  Phone (<= 767px)
 *    99  Reduced motion
 * ===========================================================================
 */


/* ===========================================================================
   00  TOKENS
   ---------------------------------------------------------------------------
   Same values as the recipes-landing reskin (mes-reskin-recipes.css).
   Headings lead with Mokoko (Typekit); the mockups' Bitter is a stand-in.
   =========================================================================== */

.mes-rcp {
    --mes-rcp-plum:        #774559;
    --mes-rcp-plum-dark:   #5a3142;
    --mes-rcp-green-deep:  #234528;  /* cost value (AA on white) */
    --mes-rcp-gold:        #8b6c23;
    --mes-rcp-cream:       #faf6ee;  /* stat icon discs */
    --mes-rcp-text:        #333333;
    --mes-rcp-muted:       #595959;
    --mes-rcp-line:        #d6d6d6;
    --mes-rcp-hairline:    #ebebeb;  /* ingredient rows */
    --mes-rcp-ink:         #1f1f1f;  /* card border */
    --mes-rcp-step:        #b48d2e;  /* step circles: white on it = 3.1:1, large text only */
    --mes-rcp-notes-bg:    #f7efdc;

    --mes-rcp-font-head: 'Mokoko', mokoko, Bitter, Georgia, serif;
    --mes-rcp-font-body: 'Montserrat', montserrat, system-ui, sans-serif;

    --mes-rcp-radius-img:  20px;
    --mes-rcp-radius-card: 18px;
    --mes-rcp-pill:        999px;

    font-family: var(--mes-rcp-font-body);
    color: var(--mes-rcp-text);
}

/* WPRM templates turn newlines into <br>. */
.mes-rcp br {
    display: none;
}

.mes-rcp .mes-rcp-icon {
    display: block;
    width: 100%;
    height: 100%;
}


/* ===========================================================================
   10  HERO GRID
   ---------------------------------------------------------------------------
   Desktop: breadcrumb across the top, then text | image (2 equal columns,
   64px apart). Phone (90): image first (full bleed), breadcrumb, text.
   =========================================================================== */

.mes-rcp-hero {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
        "crumb crumb"
        "text  media";
    column-gap: 64px;
    row-gap: 24px;
    align-items: center;
}

.mes-rcp-hero > .mes-rcp-crumb {
    grid-area: crumb;
}

.mes-rcp-hero__text {
    grid-area: text;
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
}

.mes-rcp-hero__media {
    grid-area: media;
    position: relative;
    min-width: 0;
}


/* ===========================================================================
   20  BREADCRUMB   Recipes › Main Dishes
   ---------------------------------------------------------------------------
   The cloned template CSS forces li { margin/padding 0; line-height 1.9em;
   font-size 1em } with !important — harmless here (we want 0), and the
   size is set on the <ol> so the li's 1em resolves to it.
   =========================================================================== */

.mes-rcp .mes-rcp-crumb__list:not(#mes-reskin-boost) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 15px;
    color: var(--mes-rcp-muted);
}

.mes-rcp .mes-rcp-crumb__item:not(#mes-reskin-boost) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mes-rcp .mes-rcp-crumb__item .mes-rcp-icon {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

.mes-rcp .mes-rcp-crumb__link:not(#mes-reskin-boost) {
    color: var(--mes-rcp-muted);
    text-decoration: none;
}

.mes-rcp .mes-rcp-crumb__link:not(#mes-reskin-boost):hover {
    color: var(--mes-rcp-plum);
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* ===========================================================================
   30  HERO TEXT
   =========================================================================== */

/* Eyebrow: first course, e.g. "MAIN DISHES" */
.mes-rcp .mes-rcp-eyebrow {
    font-size: 15px;
    line-height: 1.3;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mes-rcp-muted);
}

/* H1 = [wprm-recipe-name tag="h1"] */
.mes-rcp h1.wprm-recipe-name:not(#mes-reskin-boost) {
    margin: 0;
    font-family: var(--mes-rcp-font-head);
    font-size: 60px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0;
    text-transform: none;
    color: var(--mes-rcp-plum);
}

/* Summary = [wprm-recipe-summary] (a div + span, not a <p>) */
.mes-rcp .mes-rcp-hero__text .wprm-recipe-summary:not(#mes-reskin-boost) {
    max-width: 540px;
    margin: 0;
    font-size: 20px;
    line-height: 1.5;
    color: var(--mes-rcp-text);
}

.mes-rcp .mes-rcp-author {
    font-size: 15px;
    line-height: 1.4;
    color: var(--mes-rcp-muted);
}


/* ===========================================================================
   40  HERO IMAGE + SAVE / SHARE
   ---------------------------------------------------------------------------
   Recipe images are mostly 900x300 banners; a 440px-tall cover crop of
   those is heavy (content item, see the R1 report).
   =========================================================================== */

.mes-rcp .mes-rcp-hero__media .wprm-recipe-image:not(#mes-reskin-boost) {
    display: block;
    width: 100%;
    margin: 0;
}

.mes-rcp .mes-rcp-hero__media .wprm-recipe-image img:not(#mes-reskin-boost) {
    display: block;
    width: 100%;
    height: 440px;
    max-width: none;
    margin: 0;
    object-fit: cover;
    object-position: center;
    border: 0;
    border-radius: var(--mes-rcp-radius-img);
}

.mes-rcp .mes-rcp-hero__actions {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    display: flex;
    gap: 10px;
}

/* White pills with a shadow. Colors, radius and padding come from the
   shortcode attributes (WPRM prints them inline). */
.mes-rcp .mes-rcp-action a.wprm-recipe-link:not(#mes-reskin-boost) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    height: 46px;
    min-width: 46px;
    margin: 0;
    font-family: var(--mes-rcp-font-body);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.mes-rcp .mes-rcp-action a.wprm-recipe-link:not(#mes-reskin-boost):focus-visible {
    outline: 2px solid var(--mes-rcp-plum);
    outline-offset: 2px;
}

.mes-rcp .mes-rcp-action .mes-rcp-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

/* Share is icon-only; its text stays for screen readers. */
.mes-rcp .mes-rcp-action--share a.wprm-recipe-link:not(#mes-reskin-boost) {
    width: 46px;
    padding: 0;
}

.mes-rcp .mes-rcp-action--share .mes-rcp-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}


/* ===========================================================================
   50  STATS BAR   cost | makes | total time | prep + cook
   ---------------------------------------------------------------------------
   Equal columns via flex: with no cost stat the rest fill the row.
   [mes_recipe_prep_cook] is printed twice: as column 4 (desktop) and as a
   centered line under the bar (phone); one is always display:none.
   =========================================================================== */

.mes-rcp .mes-rcp-stats {
    margin-top: 40px;
}

.mes-rcp .mes-rcp-stats__row {
    display: flex;
    gap: 24px;
    border-top: 1px solid var(--mes-rcp-line);
    border-bottom: 1px solid var(--mes-rcp-line);
}

.mes-rcp .mes-rcp-stats__row > * {
    flex: 1 1 0;
    min-width: 0;
}

.mes-rcp .mes-rcp-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 0;
}

.mes-rcp .mes-rcp-stat__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 48px;
    height: 48px;
    padding: 13px;
    border-radius: var(--mes-rcp-pill);
    background: var(--mes-rcp-cream);
    color: var(--mes-rcp-plum);
}

.mes-rcp .mes-rcp-stat__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mes-rcp .mes-rcp-stat__label {
    font-size: 13px;
    line-height: 1.3;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mes-rcp-muted);
}

.mes-rcp .mes-rcp-stat__label-short {
    display: none;
}

.mes-rcp .mes-rcp-stat__value {
    font-family: var(--mes-rcp-font-head);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--mes-rcp-text);
}

.mes-rcp .mes-rcp-stat--cost .mes-rcp-stat__value {
    color: var(--mes-rcp-green-deep);
}

.mes-rcp .mes-rcp-stat__ast {
    font-size: 20px;
    color: var(--mes-rcp-muted);
}

/* Units: "servings", "patties", WPRM's "mins" / "hr" */
.mes-rcp .mes-rcp-stat__unit,
.mes-rcp .mes-rcp-stat__value .wprm-recipe-details-unit:not(#mes-reskin-boost) {
    font-size: 16px;
    font-weight: 500;
}

/* WPRM's number spans carry .wprm-block-text-normal (weight 400). */
.mes-rcp .mes-rcp-stat__value .wprm-recipe-details:not(#mes-reskin-boost),
.mes-rcp .mes-rcp-stat__value .wprm-recipe-servings:not(#mes-reskin-boost),
.mes-rcp .mes-rcp-stat__value .wprm-recipe-time:not(#mes-reskin-boost) {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

/* Column 4: "Prep 10 mins" / "Cook 35 mins" as two small lines */
.mes-rcp .mes-rcp-stats__times--col {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mes-rcp .mes-rcp-stats__times--line {
    display: none;
}

.mes-rcp .mes-rcp-times {
    font-size: 15px;
    line-height: 1.5;
    color: var(--mes-rcp-muted);
}

.mes-rcp .mes-rcp-stats__times--col .mes-rcp-times {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mes-rcp .mes-rcp-stats__times--col .mes-rcp-times__sep {
    display: none;
}

.mes-rcp .mes-rcp-times .wprm-recipe-time:not(#mes-reskin-boost),
.mes-rcp .mes-rcp-times .wprm-recipe-details:not(#mes-reskin-boost),
.mes-rcp .mes-rcp-times .wprm-recipe-details-unit:not(#mes-reskin-boost) {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}


/* ===========================================================================
   55  PRINT LINK + PHONE JUMP NAV
   ---------------------------------------------------------------------------
   Print: WPRM [wprm-recipe-print style="text"] as a quiet plum text link
   (color is set inline by WPRM from the shortcode attribute).
   Jump nav: [mes_recipe_jump], phone only (shown in 90).
   =========================================================================== */

.mes-rcp .mes-rcp-print {
    display: flex;
    margin: 16px 0 0;
}

.mes-rcp .mes-rcp-print a.wprm-recipe-print:not(#mes-reskin-boost) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-family: var(--mes-rcp-font-body);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.mes-rcp .mes-rcp-print a.wprm-recipe-print:not(#mes-reskin-boost):hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.mes-rcp .mes-rcp-print a.wprm-recipe-print:not(#mes-reskin-boost):focus-visible,
.mes-rcp .mes-rcp-crumb__link:not(#mes-reskin-boost):focus-visible,
.mes-rcp .mes-nutrition-toggle:not(#mes-reskin-boost):focus-visible {
    outline: 2px solid var(--mes-rcp-plum);
    outline-offset: 3px;
    border-radius: 4px;
}

.mes-rcp .mes-rcp-print .wprm-recipe-icon svg {
    width: 18px;
    height: 18px;
}

.mes-rcp .mes-rcp-jump {
    display: none;
}


/* ===========================================================================
   60  BODY GRID   ingredients card (440px) | directions, 72px apart
   =========================================================================== */

.mes-rcp .mes-rcp-body {
    display: grid;
    grid-template-columns: 440px minmax(0, 1fr);
    gap: 72px;
    align-items: start;
    margin-top: 48px;
}

.mes-rcp .mes-rcp-h2:not(#mes-reskin-boost) {
    margin: 0;
    font-family: var(--mes-rcp-font-head);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--mes-rcp-plum);
}

/* Section headings are jump targets: keep them clear of the sticky header
   when reached by a plain #hash too. */
.mes-rcp .mes-rcp-h2 {
    scroll-margin-top: 110px;
}

.mes-rcp .mes-rcp-h2:focus {
    outline: none;
}


/* ===========================================================================
   65  INGREDIENTS CARD
   ---------------------------------------------------------------------------
   Header: H2 + WPRM's standalone adjustable-servings buttons as a segmented
   pill. List: WPRM ingredients with list_style="checkbox" (this template
   only); WPRM's amount/unit/name/notes spans are kept intact for scaling.
   =========================================================================== */

.mes-rcp .mes-rcp-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
    padding: 32px;
    border: 1px solid var(--mes-rcp-ink);
    border-radius: var(--mes-rcp-radius-card);
    background: #ffffff;
}

.mes-rcp .mes-rcp-card__head,
.mes-rcp .mes-rcp-directions__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* 1x / 2x / 3x segmented pill */
.mes-rcp .mes-rcp-servings .wprm-toggle-container:not(#mes-reskin-boost) {
    display: flex;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--mes-rcp-plum);
    border-radius: var(--mes-rcp-pill);
}

.mes-rcp .mes-rcp-servings button.wprm-toggle:not(#mes-reskin-boost) {
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 10px 16px;
    border: 0;
    border-radius: 0;
    background: #ffffff;
    color: var(--mes-rcp-plum);
    font-family: var(--mes-rcp-font-body);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    box-shadow: none;
    cursor: pointer;
}

.mes-rcp .mes-rcp-servings button.wprm-toggle + button.wprm-toggle:not(#mes-reskin-boost) {
    border-left: 1px solid var(--mes-rcp-plum);
}

.mes-rcp .mes-rcp-servings button.wprm-toggle.wprm-toggle-active:not(#mes-reskin-boost) {
    background: var(--mes-rcp-plum);
    color: #ffffff;
}

.mes-rcp .mes-rcp-servings button.wprm-toggle:not(#mes-reskin-boost):focus-visible {
    position: relative;
    z-index: 1;
    outline: 2px solid var(--mes-rcp-plum);
    outline-offset: -4px;
    box-shadow: inset 0 0 0 5px #ffffff;
}

.mes-rcp .mes-rcp-card__lede {
    font-size: 15px;
    line-height: 1.5;
    color: var(--mes-rcp-muted);
}

.mes-rcp .mes-rcp-card__lede .wprm-recipe-servings:not(#mes-reskin-boost) {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

/* The list */
.mes-rcp .mes-rcp-ingredients .wprm-recipe-ingredients-container:not(#mes-reskin-boost) {
    margin: 0;
}

.mes-rcp .mes-rcp-ingredients .wprm-recipe-ingredient-group + .wprm-recipe-ingredient-group {
    margin-top: 18px;
}

/* Group label (only on recipes with ingredient groups) */
.mes-rcp .mes-rcp-ingredients .wprm-recipe-group-name:not(#mes-reskin-boost) {
    margin: 0 0 6px;
    font-family: var(--mes-rcp-font-body);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mes-rcp-muted);
}

.mes-rcp .mes-rcp-ingredients ul.wprm-recipe-ingredients:not(#mes-reskin-boost) {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--mes-rcp-hairline);
    list-style: none;
}

.mes-rcp .mes-rcp-ingredients li.wprm-recipe-ingredient:not(#mes-reskin-boost) {
    position: relative;
    display: block;
    margin: 0;
    padding: 13px 0 13px 34px;
    border-top: 1px solid var(--mes-rcp-hairline);
    font-size: 17px;
    line-height: 1.45;
    color: var(--mes-rcp-text);
}

/* WPRM's checkbox: the real <input> + a styled <label> box; placed in the
   row's left gutter. Size/border/check colors come from the shortcode
   attributes (CSS variables WPRM sets). */
.mes-rcp .mes-rcp-ingredients .wprm-checkbox-container:not(#mes-reskin-boost) {
    position: absolute;
    top: 15px;
    left: 0;
    margin: 0;
}

/* WPRM leaves the (invisible) <input> in the flow, pushing its drawn box
   16px right. Lay the input over the box instead — still the click and
   keyboard target — and put the box at the row's left edge. */
.mes-rcp .mes-rcp-ingredients .wprm-checkbox-container input.wprm-checkbox:not(#mes-reskin-boost) {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
}

.mes-rcp .mes-rcp-ingredients .wprm-checkbox-container .wprm-checkbox-label:not(#mes-reskin-boost) {
    display: block;
    width: 20px;
    height: 20px;
    padding: 0;
}

.mes-rcp .mes-rcp-ingredients .wprm-checkbox-container .wprm-checkbox:focus-visible + .wprm-checkbox-label::before {
    outline: 2px solid var(--mes-rcp-plum);
    outline-offset: 2px;
}

.mes-rcp .mes-rcp-ingredients .wprm-recipe-ingredient-amount:not(#mes-reskin-boost),
.mes-rcp .mes-rcp-ingredients .wprm-recipe-ingredient-unit:not(#mes-reskin-boost) {
    font-weight: 700;
}

.mes-rcp .mes-rcp-ingredients .wprm-recipe-ingredient-notes:not(#mes-reskin-boost) {
    color: var(--mes-rcp-muted);
}

/* Checked: strike through + muted (boosted to outrank the row rule above) */
.mes-rcp .mes-rcp-ingredients li.wprm-recipe-ingredient:has(.wprm-checkbox:checked):not(#mes-reskin-boost) {
    color: var(--mes-rcp-muted);
    text-decoration: line-through;
}

.mes-rcp .mes-rcp-ingredients li.wprm-recipe-ingredient:has(.wprm-checkbox:checked) > span:not(#mes-reskin-boost) {
    color: var(--mes-rcp-muted);
}

/* eMeals "Get ingredients with Walmart" (appended by WPRM after the list).
   Its <button> carries inline styles (color, radius, width, font) that can't
   be overridden without !important — only its placement is ours. */
.mes-rcp .mes-rcp-ingredients .wprm-recipe-ingredients-container ~ .wprm-spacer {
    display: none;
}

.mes-rcp .mes-rcp-ingredients #em-shop-button {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    margin: 4px auto 0;
}

.mes-rcp .mes-rcp-ingredients #em-shop-button:focus-visible {
    outline: 2px solid var(--mes-rcp-plum);
    outline-offset: 3px;
}


/* ===========================================================================
   70  DIRECTIONS
   ---------------------------------------------------------------------------
   Steps: WPRM instructions with list_style="none", turned into an <ol>
   (recipe-page.php). The gold number is a CSS counter with empty alt text,
   so screen readers announce the list position only.
   =========================================================================== */

.mes-rcp .mes-rcp-directions {
    display: flex;
    flex-direction: column;
    gap: 28px;
    min-width: 0;
}

/* "Keep my screen on" — WPRM's toggle switch (WPRM shows it only where the
   Wake Lock API exists). */
.mes-rcp .mes-rcp-awake .wprm-prevent-sleep:not(#mes-reskin-boost) {
    margin: 0;
}

.mes-rcp .mes-rcp-awake .wprm-toggle-switch:not(#mes-reskin-boost) {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    cursor: pointer;
}

.mes-rcp .mes-rcp-awake .wprm-prevent-sleep-label:not(#mes-reskin-boost) {
    margin: 0;
    font-family: var(--mes-rcp-font-body);
    font-size: 15px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--mes-rcp-muted);
}

.mes-rcp .mes-rcp-awake .mes-rcp-label-short {
    display: none;
}

.mes-rcp .mes-rcp-awake .wprm-prevent-sleep-checkbox:focus-visible + .wprm-toggle-switch-slider {
    outline: 2px solid var(--mes-rcp-plum);
    outline-offset: 2px;
}

.mes-rcp .mes-rcp-directions .wprm-recipe-instructions-container:not(#mes-reskin-boost) {
    margin: 0;
}

.mes-rcp .mes-rcp-directions .wprm-recipe-instruction-group + .wprm-recipe-instruction-group {
    margin-top: 26px;
}

/* Group subheading (only on recipes with instruction groups) */
.mes-rcp .mes-rcp-directions .wprm-recipe-group-name:not(#mes-reskin-boost) {
    margin: 0 0 14px;
    font-family: var(--mes-rcp-font-body);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mes-rcp-muted);
}

.mes-rcp .mes-rcp-directions ol.wprm-recipe-instructions:not(#mes-reskin-boost) {
    display: flex;
    flex-direction: column;
    gap: 26px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: mes-rcp-step;
}

.mes-rcp .mes-rcp-directions li.wprm-recipe-instruction:not(#mes-reskin-boost) {
    position: relative;
    min-height: 44px;
    margin: 0;
    padding: 0 0 0 66px;
    counter-increment: mes-rcp-step;
}

.mes-rcp .mes-rcp-directions li.wprm-recipe-instruction::before {
    content: counter(mes-rcp-step) / "";
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--mes-rcp-pill);
    background: var(--mes-rcp-step);
    color: #ffffff;
    font-family: var(--mes-rcp-font-head);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}

.mes-rcp .mes-rcp-directions .wprm-recipe-instruction-text:not(#mes-reskin-boost) {
    margin: 0;
    padding-top: 6px;
    font-size: 19px;
    line-height: 1.65;
    color: var(--mes-rcp-text);
}

/* Instruction images / tips WPRM renders: plain */
.mes-rcp .mes-rcp-directions .wprm-recipe-instruction-media:not(#mes-reskin-boost) {
    margin: 12px 0 0;
}

.mes-rcp .mes-rcp-directions .wprm-recipe-instruction-media img:not(#mes-reskin-boost) {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}


/* ===========================================================================
   75  NOTES BOX   (only when the recipe has notes)
   =========================================================================== */

.mes-rcp .mes-rcp-notes {
    margin-top: 48px;
    padding: 24px 28px;
    border: 1.5px solid var(--mes-rcp-gold);
    border-radius: 16px;
    background: var(--mes-rcp-notes-bg);
}

.mes-rcp .mes-rcp-notes .wprm-recipe-notes-container:not(#mes-reskin-boost) {
    margin: 0;
}

.mes-rcp .mes-rcp-notes .wprm-recipe-notes-header:not(#mes-reskin-boost) {
    margin: 0 0 8px;
    font-family: var(--mes-rcp-font-head);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    color: var(--mes-rcp-gold);
}

.mes-rcp .mes-rcp-notes .wprm-recipe-notes:not(#mes-reskin-boost) {
    font-size: 16px;
    line-height: 1.6;
    color: var(--mes-rcp-text);
}

.mes-rcp .mes-rcp-notes .wprm-recipe-notes ul:not(#mes-reskin-boost),
.mes-rcp .mes-rcp-notes .wprm-recipe-notes ol:not(#mes-reskin-boost) {
    margin: 6px 0 0 1.2em;
    padding: 0;
}

.mes-rcp .mes-rcp-notes .wprm-recipe-notes li:not(#mes-reskin-boost) {
    margin: 0 0 4px;
    padding: 0;
    list-style: disc;
}

.mes-rcp .mes-rcp-notes .wprm-spacer {
    display: none;
}

/* The cost disclaimer (a <div> in this template) above the ingredients */
.mes-rcp .mes-recipe-cost-disclaimer:not(#mes-reskin-boost) {
    margin: 12px 0 0;
    font-size: 13px;
    font-style: normal;
    line-height: 1.5;
    color: var(--mes-rcp-muted);
}


/* ===========================================================================
   80  NUTRITION TILES, KEYWORDS, COST FOOTNOTE  (R3)
   =========================================================================== */

.mes-rcp .mes-rcp-nutrition {
    margin-top: 40px;
    padding: 28px 32px;
}

.mes-rcp .mes-rcp-nutrition__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 16px;
}

.mes-rcp .mes-rcp-h2--sub:not(#mes-reskin-boost) {
    font-size: 26px;
}

.mes-rcp .mes-rcp-nutrition__serving {
    font-size: 15px;
    color: var(--mes-rcp-muted);
}

.mes-rcp .mes-rcp-tiles:not(#mes-reskin-boost) {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mes-rcp .mes-rcp-tile:not(#mes-reskin-boost) {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 16px 18px;
    border: 1px solid var(--mes-rcp-plum);
    border-radius: 12px;
    background: #ffffff;
    list-style: none;
}

.mes-rcp .mes-rcp-tile--sodium:not(#mes-reskin-boost) {
    border-width: 2px;
    padding: 15px 17px;
}

.mes-rcp .mes-rcp-tile__label {
    font-size: 14px;
    color: var(--mes-rcp-muted);
    overflow-wrap: normal;          /* never break inside "Carbohydrates" */
    word-break: normal;
    hyphens: none;
}

.mes-rcp .mes-rcp-tile--sodium .mes-rcp-tile__label {
    font-weight: 600;
    color: var(--mes-rcp-plum);
}

.mes-rcp .mes-rcp-tile__value {
    font-family: var(--mes-rcp-font-head);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--mes-rcp-text);
}

.mes-rcp .mes-rcp-tile__unit {
    margin-left: 3px;
    font-family: var(--mes-rcp-font-body);
    font-size: 16px;
    font-weight: 500;
}

/* "More nutrition facts": quiet plum text button (the shared toggle) */
.mes-rcp .mes-rcp-nutrition .mes-nutrition-toggle:not(#mes-reskin-boost) {
    align-self: flex-start;
    margin: 0;
    padding: 4px 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--mes-rcp-plum);
    font-size: 15px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.mes-rcp .mes-rcp-nutrition .mes-nutrition-toggle:not(#mes-reskin-boost):hover {
    background: none;
    color: var(--mes-rcp-plum-dark);
}

.mes-rcp .mes-rcp-nutrition__full .wprm-nutrition-label-shortcode-container:not(#mes-reskin-boost) {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
}

/* Keywords */
.mes-rcp .mes-rcp-keywords {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 40px;
}

.mes-rcp .mes-rcp-keywords__label {
    font-size: 15px;
    color: var(--mes-rcp-muted);
}

.mes-rcp .mes-rcp-chips:not(#mes-reskin-boost) {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mes-rcp .mes-rcp-chips > li:not(#mes-reskin-boost) {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mes-rcp a.mes-rcp-chip:not(#mes-reskin-boost) {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid var(--mes-rcp-plum);
    border-radius: var(--mes-rcp-pill);
    background: #ffffff;
    color: var(--mes-rcp-plum);
    font-size: 15px;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.mes-rcp a.mes-rcp-chip:not(#mes-reskin-boost):hover,
.mes-rcp a.mes-rcp-chip:not(#mes-reskin-boost):focus-visible {
    background: var(--mes-rcp-plum);
    color: #ffffff;
}

.mes-rcp a.mes-rcp-chip:not(#mes-reskin-boost):focus-visible {
    outline: 2px solid var(--mes-rcp-plum);
    outline-offset: 2px;
}

/* Room above the footer after the recipe card (mockup: 72 / 48). */
.mes-rcp {
    margin-bottom: 72px;
}

/* Cost footnote, end of the card (only with a cost) */
.mes-rcp .mes-rcp-disclaimer {
    margin-top: 40px;
    font-size: 14px;
    font-style: italic;
    line-height: 1.5;
    color: var(--mes-rcp-muted);
}

@media (max-width: 1099px) {
    .mes-rcp .mes-rcp-tiles:not(#mes-reskin-boost) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .mes-rcp .mes-rcp-nutrition {
        margin-top: 24px;
        padding: 20px;
        border-radius: 16px;
    }

    .mes-rcp .mes-rcp-h2--sub:not(#mes-reskin-boost) {
        font-size: 22px;
    }

    .mes-rcp .mes-rcp-tiles:not(#mes-reskin-boost) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .mes-rcp .mes-rcp-tile:not(#mes-reskin-boost) {
        padding: 12px 14px;
    }

    .mes-rcp .mes-rcp-tile--sodium:not(#mes-reskin-boost) {
        padding: 11px 13px;
    }

    .mes-rcp .mes-rcp-tile__label {
        font-size: 13px;
    }

    .mes-rcp .mes-rcp-tile__value {
        font-size: 22px;
    }

    .mes-rcp .mes-rcp-keywords {
        gap: 8px;
        margin-top: 24px;
    }

    .mes-rcp .mes-rcp-keywords__label {
        flex-basis: 100%;
    }


    .mes-rcp .mes-rcp-chips:not(#mes-reskin-boost) {
        gap: 8px;
    }

    .mes-rcp a.mes-rcp-chip:not(#mes-reskin-boost) {
        padding: 8px 14px;
    }

    .mes-rcp {
        margin-bottom: 48px;
    }

    .mes-rcp .mes-rcp-disclaimer {
        margin-top: 24px;
        font-size: 13px;
    }
}

/* Browser print of the page: show the full nutrition list, no toggle. */
@media print {
    .mes-rcp .mes-nutrition-toggle {
        display: none;
    }

    .mes-rcp .mes-nutrition--collapse-all .mes-nut-extra:not(#mes-reskin-boost) {
        display: flex;
    }
}


/* ===========================================================================
   90  PHONE (<= 767px)
   ---------------------------------------------------------------------------
   OptAPhone: full-bleed hero image on top (260px, square corners) with
   Save / Share, then breadcrumb, H1, summary, author (no eyebrow); 3-column
   stats with the icon above the label, and "Prep | Cook" centered below.
   =========================================================================== */

@media (max-width: 991px) {
    .mes-rcp h1.wprm-recipe-name:not(#mes-reskin-boost) {
        font-size: 44px;
    }
}

/* Below 1024px the 440px card leaves too little room for the steps:
   stack the card above the directions (desktop sizes otherwise). */
@media (max-width: 1023px) {
    .mes-rcp .mes-rcp-body {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .mes-rcp .mes-rcp-ingredients {
        max-width: 560px;
    }
}

@media (max-width: 767px) {

    .mes-rcp-hero {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "media"
            "crumb"
            "text";
        row-gap: 12px;
    }

    /* Full bleed. WPRM's card wrapper (.wprm-recipe, the parent of
       .mes-rcp) clips with overflow:hidden; on cards using this template
       only, let the image out. flow-root keeps the float containment that
       overflow:hidden gave. */
    .wprm-recipe:has(> .mes-rcp) {
        display: flow-root;
        overflow: visible;
    }

    .mes-rcp .mes-rcp-hero__media {
        margin-right: calc(50% - 50vw);
        margin-left: calc(50% - 50vw);
        margin-bottom: 10px;
    }

    .mes-rcp .mes-rcp-hero__media .wprm-recipe-image img:not(#mes-reskin-boost) {
        height: 260px;
        border-radius: 0;
    }

    .mes-rcp .mes-rcp-hero__actions {
        top: 14px;
        right: 14px;
    }

    .mes-rcp .mes-rcp-crumb__list:not(#mes-reskin-boost) {
        gap: 6px;
        font-size: 13px;
    }

    .mes-rcp .mes-rcp-crumb__item {
        gap: 6px;
    }

    .mes-rcp .mes-rcp-hero__text {
        gap: 12px;
    }

    .mes-rcp .mes-rcp-eyebrow {
        display: none;
    }

    .mes-rcp h1.wprm-recipe-name:not(#mes-reskin-boost) {
        font-size: 34px;
        line-height: 1.1;
    }

    .mes-rcp .mes-rcp-hero__text .wprm-recipe-summary:not(#mes-reskin-boost) {
        font-size: 17px;
    }

    .mes-rcp .mes-rcp-author {
        font-size: 14px;
    }

    /* Stats: 3 columns, stacked icon / label / value, centered */
    .mes-rcp .mes-rcp-stats {
        margin-top: 20px;
    }

    .mes-rcp .mes-rcp-stats__row {
        gap: 0;
    }

    .mes-rcp .mes-rcp-stat {
        flex-direction: column;
        gap: 6px;
        padding: 14px 4px;
        text-align: center;
    }

    .mes-rcp .mes-rcp-stat__icon {
        width: 38px;
        height: 38px;
        padding: 10px;
    }

    .mes-rcp .mes-rcp-stat__text {
        align-items: center;
        gap: 6px;
    }

    .mes-rcp .mes-rcp-stat__label {
        font-size: 11px;
        letter-spacing: 0.08em;
    }

    .mes-rcp .mes-rcp-stat__label-long {
        display: none;
    }

    .mes-rcp .mes-rcp-stat__label-short {
        display: inline;
    }

    .mes-rcp .mes-rcp-stat__value {
        font-size: 20px;
    }

    .mes-rcp .mes-rcp-stat--cost .mes-rcp-stat__value {
        color: var(--mes-rcp-text);
    }

    .mes-rcp .mes-rcp-stat__ast {
        font-size: 16px;
    }

    .mes-rcp .mes-rcp-stat__unit,
    .mes-rcp .mes-rcp-stat__value .wprm-recipe-details-unit:not(#mes-reskin-boost) {
        font-size: 14px;
    }

    .mes-rcp .mes-rcp-stats__times--col {
        display: none;
    }

    .mes-rcp .mes-rcp-stats__times--line {
        display: block;
        margin-top: 10px;
        text-align: center;
    }

    .mes-rcp .mes-rcp-times {
        font-size: 14px;
    }

    /* Jump nav: 2-segment pill under the stats bar */
    .mes-rcp .mes-rcp-jump {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin: 18px 0 0;
        overflow: hidden;
        border: 1px solid var(--mes-rcp-plum);
        border-radius: var(--mes-rcp-pill);
    }

    .mes-rcp .mes-rcp-jump__link:not(#mes-reskin-boost) {
        display: block;
        padding: 12px 0;
        background: #ffffff;
        color: var(--mes-rcp-plum);
        font-family: var(--mes-rcp-font-body);
        font-size: 15px;
        font-weight: 600;
        line-height: 1.3;
        text-align: center;
        text-decoration: none;
    }

    .mes-rcp .mes-rcp-jump__link.is-active:not(#mes-reskin-boost) {
        background: var(--mes-rcp-plum);
        color: #ffffff;
    }

    .mes-rcp .mes-rcp-jump__link:not(#mes-reskin-boost):focus-visible {
        outline: 2px solid var(--mes-rcp-plum);
        outline-offset: -5px;
        box-shadow: inset 0 0 0 3px #ffffff;
    }

    /* Body: stacked */
    .mes-rcp .mes-rcp-body {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
        margin-top: 24px;
    }

    .mes-rcp .mes-rcp-h2:not(#mes-reskin-boost) {
        font-size: 26px;
    }

    .mes-rcp .mes-rcp-card {
        gap: 14px;
        padding: 20px;
        border-radius: 16px;
    }

    .mes-rcp .mes-rcp-card__head {
        gap: 8px;
    }

    .mes-rcp .mes-rcp-servings button.wprm-toggle:not(#mes-reskin-boost) {
        padding: 10px 14px;
    }

    .mes-rcp .mes-rcp-card__lede {
        font-size: 14px;
    }

    .mes-rcp .mes-rcp-ingredients li.wprm-recipe-ingredient:not(#mes-reskin-boost) {
        padding: 12px 0 12px 34px;
        font-size: 16px;
    }

    .mes-rcp .mes-rcp-ingredients .wprm-checkbox-container:not(#mes-reskin-boost) {
        top: 13px;
    }

    .mes-rcp .mes-rcp-directions {
        gap: 20px;
    }

    .mes-rcp .mes-rcp-awake .wprm-prevent-sleep-label:not(#mes-reskin-boost) {
        font-size: 14px;
    }

    .mes-rcp .mes-rcp-awake .mes-rcp-label-long {
        display: none;
    }

    .mes-rcp .mes-rcp-awake .mes-rcp-label-short {
        display: inline;
    }

    .mes-rcp .mes-rcp-directions ol.wprm-recipe-instructions:not(#mes-reskin-boost) {
        gap: 20px;
    }

    /* 36px / 19px bold (not the mockup's 34 / 17): 19px bold is WCAG "large
       text", where white on the gold's 3.1:1 passes. */
    .mes-rcp .mes-rcp-directions li.wprm-recipe-instruction:not(#mes-reskin-boost) {
        min-height: 36px;
        padding-left: 50px;
    }

    .mes-rcp .mes-rcp-directions li.wprm-recipe-instruction::before {
        width: 36px;
        height: 36px;
        font-size: 19px;
    }

    .mes-rcp .mes-rcp-directions .wprm-recipe-instruction-text:not(#mes-reskin-boost) {
        padding-top: 4px;
        font-size: 17px;
        line-height: 1.6;
    }

    .mes-rcp .mes-rcp-notes {
        margin-top: 32px;
        padding: 18px 20px;
    }
}


/* ===========================================================================
   99  REDUCED MOTION
   =========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .mes-rcp * {
        transition: none;
    }
}