/*
 * ===========================================================================
 *  MITTEN EATS — RECIPES LANDING RESKIN
 *  File:   wp-content/themes/astra-child-mitten-eats/assets/css/mes-reskin-recipes.css
 *  Handle: mes-reskin-recipes  (enqueued in the child theme's functions.php,
 *          on the Recipes pages: EN page 40, ES page 13632, and on the
 *          homepage — EN page 28, ES page 13634 — for the search bar only)
 *  Source: "Recipes landing 1" mockups — desktop filter bar, phone,
 *          phone w/ Seasonal open.
 * ===========================================================================
 *
 *  HOW THIS FILE IS WIRED
 *  ----------------------
 *  Nothing here targets WPBakery's auto-generated vc_custom_XXXX classes
 *  (those change every time someone edits Design Options). Instead, these
 *  hook classes are added by hand in WPBakery ("Extra class name" field):
 *
 *    mes-reskin-hero      -> the Section (vc_section) with the bg image
 *    mes-reskin-filters   -> the Row holding the 3 WPFilters columns
 *    mes-reskin-results   -> the Row holding results (9 col) + sidebar (3 col)
 *    mes-reskin-season    -> the Text Block in the sidebar ("In season")
 *    mes-reskin-toolbar-row -> the Row holding [mes_results_toolbar] (45)
 *    mes-reskin-search    -> homepage: the Column wrapping [searchwp_form]
 *                            (gets the section 20 search pill)
 *
 *  Put the same classes on the ES page (13632) and it styles
 *  identically — that also closes the "ES facet row missing its css= class"
 *  gap, because nothing here depends on that class.
 *
 *  RULES THIS FILE FOLLOWS
 *  -----------------------
 *  - Every selector starts with a .mes-reskin-* class. Nothing global.
 *  - No !important anywhere.
 *  - Does not touch Astra parent, WPUPG, header, or footer.
 *  - SearchWP prints inline #searchwp-form-2 { ... } rules (ID specificity).
 *    To beat them without !important or hard-coding the form ID, the search
 *    selectors include  :not(#mes-reskin-boost)  — an ID that never exists.
 *    It matches every form, but adds one ID's worth of specificity.
 *
 *  KNOWN LIMITS (things CSS alone can't fix — see the build prompts)
 *  -----------------------------------------------------------------
 *  - Additional CSS has  p { font-size: 17px !important; }  so any <p>
 *    (e.g. the old card title p.mes-card__title) is stuck at
 *    17px. Card-markup prompt changes the title to an <h3>.
 *  - The old "MES SEARCH + FILTER STYLES (managed)" block in Additional CSS
 *    uses !important on the filter title/control and HIDES filters on
 *    mobile. It must be scoped to the homepage for this file to work
 *    (deploy prompt covers it).
 *  - WPBakery Design Options that use !important (margins, borders, the
 *    background-position: center) win over this file. Clear them — see
 *    the WPBakery setup steps.
 *
 *  TABLE OF CONTENTS
 *    00  Tokens
 *    10  Hero section (bg, overlay, spacing, h1)
 *    20  Search form (SearchWP)
 *    30  Filter pills (WPFilters dropdown_multi)
 *    31  Filter dropdown panel + checkbox options
 *    32  Filter dropdown -> bottom sheet on phones
 *    40  Results row layout (grid + sidebar)
 *    41  Recipe cards (.mes-card from mitten-eats-search)
 *    45  Results toolbar [mes_results_toolbar] (sort, count, active chips)
 *    50  "In season in Michigan" sidebar box + quick-search chips
 *    90  Phone overrides (<= 767px)
 *    91  Small phone card layout (<= 599px)
 *    99  Reduced motion
 * ===========================================================================
 */


/* ===========================================================================
   00  TOKENS
   ---------------------------------------------------------------------------
   Declared on the reskin sections only, so they can't leak site-wide.
   Change a value here and it updates everywhere in this file.

   NOTE on plum: the build-chat brief lists --plum #5B3A6E, but the mockups
   and the live site both use #774559 (Mokoko headings, WPRM, SearchWP
   button). This file uses #774559 to match the mockups. Swap the one token
   if MFF confirms #5B3A6E.

   NOTE on fonts: the mockups use Bitter (Google Fonts) — most likely a
   stand-in because the design tool can't load Adobe Fonts. The site
   already loads Mokoko + Montserrat from Typekit, so the heading token
   leads with Mokoko. To use Bitter for real, enqueue it and move Bitter
   to the front of --mes-reskin-font-head.
   =========================================================================== */

.mes-reskin-hero,
.mes-reskin-search,
.mes-reskin-results,
.mes-toolbar {
    --mes-reskin-plum:        #774559;  /* primary: buttons, pills, h1        */
    --mes-reskin-plum-dark:   #5a3142;  /* hover on plum                      */
    --mes-reskin-green-deep:  #234528;  /* cost pill, season chips (AA on white) */
    --mes-reskin-gold:        #8b6c23;  /* active-filter chip border (toolbar) */
    --mes-reskin-cream:       #f7efdc;  /* active-filter chip bg, focus row   */
    --mes-reskin-ink:         #1f1f1f;  /* card borders, card titles          */
    --mes-reskin-text:        #333333;  /* body copy                          */
    --mes-reskin-muted:       #595959;  /* counts, meta, disclaimers          */
    --mes-reskin-line:        #ebebeb;  /* hairlines inside cards/panels      */
    --mes-reskin-box:         #8a8a8a;  /* unchecked checkbox border          */

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

    --mes-reskin-radius-hero:  20px;
    --mes-reskin-radius-card:  18px;
    --mes-reskin-radius-panel: 16px;
    --mes-reskin-pill:         999px;

    /* Card photo height. Mockup = 190px. Current recipe images are 900x300
       (3:1) banners, so 190px tall crops the left/right edges. If food gets
       cut off, set this to auto and uncomment the aspect-ratio line in 41. */
    --mes-reskin-card-img-h: 190px;
}


/* ===========================================================================
   10  HERO SECTION
   ---------------------------------------------------------------------------
   The background IMAGE stays in WPBakery Design Options so MFF can swap it.
   This adds the white-to-clear gradient so the headline/search stay
   readable over any photo, and handles all inner spacing.
   =========================================================================== */

.mes-reskin-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;                          /* mockup: 20px between h1 / search / filters */
    margin-top: 32px;                   /* clear the 45px Design Options margin so this applies */
    padding: 56px 48px 40px;
    border-radius: var(--mes-reskin-radius-hero);
    font-family: var(--mes-reskin-font-body);
    color: var(--mes-reskin-text);
}

/* Readability overlay. Left side near-white, fades to clear by 85%. */
.mes-reskin-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.92) 0%,
        rgba(255, 255, 255, 0.75) 50%,
        rgba(255, 255, 255, 0) 85%);
    pointer-events: none;
}

/* The hero stacks above the toolbar row and results so the filter dropdowns
   open over them. WPBakery's full-width stretch adds
   .vc_section[data-vc-full-width] { overflow: hidden }, which clipped the
   dropdowns at the hero's bottom edge; the boost beats it. */
.mes-reskin-hero:not(#mes-reskin-boost) {
    z-index: 5;
    overflow: visible;
}

/* Stretched edge to edge (Row/Section setting "Stretch section"): no corners.
   The ::before overlay (inset: 0) already spans the stretched width. */
.mes-reskin-hero[data-vc-full-width]:not(#mes-reskin-boost) {
    border-radius: 0;
}

/* WPBakery clearfix pseudo would become a stray flex item. */
.mes-reskin-hero::after {
    content: none;
}

/* Every row sits above the overlay. */
.mes-reskin-hero > .vc_row {
    position: relative;
    z-index: 1;
    margin: 0;
}

/* Filter row stacks above the search row so its dropdowns overlap
   whatever comes after the hero. */
.mes-reskin-hero > .mes-reskin-filters {
    z-index: 3;
}

/* Strip WPBakery's default column gutters + element bottom margins inside
   the hero; spacing comes from the hero's gap instead. */
.mes-reskin-hero .vc_column_container > .vc_column-inner {
    padding: 0;
}

.mes-reskin-hero .wpb_content_element {
    margin-bottom: 0;
}

/* The 30px Empty Space after the search form doubles up with the gap. */
.mes-reskin-hero .vc_empty_space {
    display: none;
}

/* "What's in your kitchen?" */
.mes-reskin-hero h1 {
    margin: 0;
    font-family: var(--mes-reskin-font-head);
    font-weight: 700;
    font-size: 44px;
    line-height: 1.15;
    color: var(--mes-reskin-plum);
}


/* ===========================================================================
   20  SEARCH FORM (SearchWP Smart Search Form)
   ---------------------------------------------------------------------------
   Mockup: one white pill, dark outline, plum "Search" button inside it.
   Button label and placeholder text are SearchWP form settings, not CSS
   (mockup placeholder: "Search recipes or type an ingredient, like carrots").
   :not(#mes-reskin-boost) = specificity boost, see header note.
   =========================================================================== */

/* The pill */
:is(.mes-reskin-hero, .mes-reskin-search) .searchwp-form:not(#mes-reskin-boost) {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 6px 6px 6px 24px;
    border: 1.5px solid #2b2b2b;
    border-radius: var(--mes-reskin-pill);
    background: #ffffff;
}

/* Focus ring on the whole pill (Additional CSS removes input outlines). */
:is(.mes-reskin-hero, .mes-reskin-search) .searchwp-form:not(#mes-reskin-boost):focus-within {
    outline: 2px solid var(--mes-reskin-plum);
    outline-offset: 2px;
}

/* SearchWP's flex wrappers: no gaps, vertically centered. */
/* (col must STRETCH or the row shrinks to its content and the input
   collapses to ~200px in the middle of the pill) */
:is(.mes-reskin-hero, .mes-reskin-search) .searchwp-form:not(#mes-reskin-boost) .swp-flex--col {
    gap: 0;
    align-items: stretch;
}

:is(.mes-reskin-hero, .mes-reskin-search) .searchwp-form:not(#mes-reskin-boost) .swp-flex--row {
    gap: 0;
    align-items: center;
}

:is(.mes-reskin-hero, .mes-reskin-search) .searchwp-form:not(#mes-reskin-boost) .searchwp-form-input-container {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    min-width: 0;
}

/* The text field — borderless, sits inside the pill. */
:is(.mes-reskin-hero, .mes-reskin-search) .searchwp-form:not(#mes-reskin-boost) .swp-input {
    flex: 1 1 auto;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 10px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-family: var(--mes-reskin-font-body);
    font-size: 18px;
    color: var(--mes-reskin-text);
    padding-right: 48px;                /* clears the 40px mic below; SearchWP's own 70px reserve is reset by the shorthand above */
    text-overflow: ellipsis;
}

:is(.mes-reskin-hero, .mes-reskin-search) .searchwp-form:not(#mes-reskin-boost) .swp-input::placeholder {
    color: #6b6b6b;                     /* 5.3:1 on white */
    opacity: 1;
}

/* Voice-search mic: quiet, just left of the button. SearchWP positions it
   absolutely inside the input container (top 50% + translateY); pinned to
   the container's right edge as a 40x40 tap target, icon centered. The
   input's padding-right keeps typed text and placeholders out from under it. */
:is(.mes-reskin-hero, .mes-reskin-search) .searchwp-form:not(#mes-reskin-boost) .swp-voice-search-button {
    flex-shrink: 0;
    right: 0;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    background: none;
    border: 0;
    color: var(--mes-reskin-muted);
}

/* "Search" button */
:is(.mes-reskin-hero, .mes-reskin-search) .searchwp-form:not(#mes-reskin-boost) input[type="submit"] {
    flex-shrink: 0;
    min-width: 0;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 14px 44px;
    border: 0;
    border-radius: var(--mes-reskin-pill);
    background-color: var(--mes-reskin-plum);
    background-image: none;
    color: #ffffff;
    font-family: var(--mes-reskin-font-body);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

:is(.mes-reskin-hero, .mes-reskin-search) .searchwp-form:not(#mes-reskin-boost) input[type="submit"]:hover,
:is(.mes-reskin-hero, .mes-reskin-search) .searchwp-form:not(#mes-reskin-boost) input[type="submit"]:focus-visible {
    background-color: var(--mes-reskin-plum-dark);
}


/* ===========================================================================
   30  FILTER PILLS (WPFilters "dropdown_multi")
   ---------------------------------------------------------------------------
   WPFilters markup per filter:
     .wpfilters-element[data-name]        (h3 title version, or <details>)
       .wpfilters-element-title           <h3> or <summary>
       .wpfilters-items-list
         select (hidden)
         .wpfilters-ms                    gets .is-open when open
           .wpfilters-ms-control          the clickable box
             .wpfilters-ms-chips > .wpfilters-ms-chip (selected values)
             .wpfilters-ms-placeholder    "Select..."
           .wpfilters-ms-dropdown         the panel

   Trick: the TITLE is styled as the visible pill. The real control is
   stretched invisibly over it, so a click anywhere on the pill opens the
   plugin's own dropdown — no JS changes, AJAX filtering untouched.

   Selected values are hidden inside the pill (they'd overflow it) but
   still counted with a CSS counter, which shows as a small badge:
   "Seasonal (2)". Removing a value = reopen and uncheck it (or the
   toolbar's "×" chips once that shortcode exists — see prompt).

   Filter LABELS ("Courses" vs mockup "Category") are WPFilters settings.
   =========================================================================== */

/* Row becomes a wrapping line of pills instead of three 25% columns. */
.mes-reskin-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
}

.mes-reskin-filters::before,
.mes-reskin-filters::after {
    content: none;                      /* kill WPBakery clearfix flex items */
}

.mes-reskin-filters > .wpb_column {
    width: auto;
    float: none;
    flex: 0 0 auto;
}

/* Each filter is positioned so the control + dropdown anchor to its pill. */
.mes-reskin-filters .wpfilters-element {
    position: relative;
    display: inline-block;
    margin: 0;
}

/* THE PILL (works for both <h3> and <summary> titles) */
.mes-reskin-filters .wpfilters-element-title {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 11px 42px 11px 18px;       /* right side leaves room for chevron */
    border: 1.5px solid var(--mes-reskin-plum);
    border-radius: var(--mes-reskin-pill);
    background: #ffffff;
    color: var(--mes-reskin-plum);
    font-family: var(--mes-reskin-font-body);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    list-style: none;                   /* <summary> triangle, standard */
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* <summary> triangle, WebKit */
.mes-reskin-filters .wpfilters-element-title::-webkit-details-marker {
    display: none;
}

/* Chevron. Masked SVG so it takes the pill's text color (plum or white). */
.mes-reskin-filters .wpfilters-element-title::after {
    content: "";
    position: absolute;
    right: 18px;
    top: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 0.15s ease;
}

/* FILLED state: pill is open OR has at least one value selected. */
.mes-reskin-filters .wpfilters-element:has(.wpfilters-ms.is-open) .wpfilters-element-title,
.mes-reskin-filters .wpfilters-element:has(.wpfilters-ms-chip) .wpfilters-element-title {
    background: var(--mes-reskin-plum);
    color: #ffffff;
}

/* Chevron flips up while open. */
.mes-reskin-filters .wpfilters-element:has(.wpfilters-ms.is-open) .wpfilters-element-title::after {
    transform: rotate(180deg);
}

/* Extra room on the right for the count badge when something is selected. */
.mes-reskin-filters .wpfilters-element:has(.wpfilters-ms-chip) .wpfilters-element-title {
    padding-right: 72px;
}

/* Let the plugin's widget overlay the pill instead of sitting below it. */
.mes-reskin-filters .wpfilters-items-list {
    position: static;
}

.mes-reskin-filters .wpfilters-ms {
    position: absolute;
    inset: 0;
}

/* The real (invisible) click target, stretched over the pill. */
.mes-reskin-filters .wpfilters-ms-control {
    position: absolute;
    inset: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: var(--mes-reskin-pill);
    background: transparent;
    cursor: pointer;
}

/* Keyboard focus lands on the control — show the ring around the pill. */
.mes-reskin-filters .wpfilters-ms-control:focus-visible {
    outline: 2px solid var(--mes-reskin-plum);
    outline-offset: 3px;
}

/* "Select..." never shows — the pill label does that job.
   WPFilters JS writes style="display:inline" on it after every AJAX
   refresh, so display:none can't win. Clip it away instead. */
.mes-reskin-filters .wpfilters-ms-placeholder {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Selected-value chips: hidden but still counted (display:none would
   stop the counter, so they're visually hidden instead). */
.mes-reskin-filters .wpfilters-ms-chips {
    position: absolute;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
    display: block;
    counter-reset: mes-reskin-selected;
}

.mes-reskin-filters .wpfilters-ms-chip {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    counter-increment: mes-reskin-selected;
}

/* The count badge, e.g. "2" */
.mes-reskin-filters .wpfilters-ms-chips:has(.wpfilters-ms-chip)::after {
    content: counter(mes-reskin-selected);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    box-sizing: border-box;
    border-radius: var(--mes-reskin-pill);
    background: #ffffff;
    color: var(--mes-reskin-plum);
    font-family: var(--mes-reskin-font-body);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}


/* ===========================================================================
   31  FILTER DROPDOWN PANEL + CHECKBOX OPTIONS
   ---------------------------------------------------------------------------
   Mockup panel: 280px, dark hairline, 16px radius, soft shadow.
   Options get a drawn checkbox (plugin's default is a faded row).
   Counts "(26)" are part of the option text in WPFilters' markup, so they
   can't be right-aligned/greyed with CSS alone.
   =========================================================================== */

.mes-reskin-filters .wpfilters-ms-dropdown {
    top: calc(100% + 10px);
    left: 0;
    right: auto;
    width: 280px;
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
    padding: 12px 20px 14px;
    border: 1px solid var(--mes-reskin-ink);
    border-radius: var(--mes-reskin-radius-panel);
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
    font-family: var(--mes-reskin-font-body);
}

/* In-panel search box: only useful on long lists. Hidden everywhere
   except World Cuisine (~20 options). Add more data-names to keep it. */
.mes-reskin-filters .wpfilters-element:not([data-name="world-cuisine"]) .wpfilters-ms-search {
    display: none;
}

.mes-reskin-filters .wpfilters-ms-search {
    margin: 4px 0 8px;
    padding: 8px 14px;
    border: 1px solid #cfcfcf;
    border-radius: var(--mes-reskin-pill);
    font-size: 15px;
}

.mes-reskin-filters .wpfilters-ms-list {
    max-height: 320px;
    padding: 0;
}

.mes-reskin-filters .wpfilters-ms-option {
    gap: 12px;
    margin: 0 -8px;
    padding: 7px 8px;
    border-radius: 8px;
    background: none;
    color: var(--mes-reskin-text);
    font-size: 15px;
    line-height: 1.35;
    opacity: 1;                         /* plugin fades selected rows to .5 */
}

/* Drawn checkbox */
.mes-reskin-filters .wpfilters-ms-option::before {
    content: "";
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    border: 1.5px solid var(--mes-reskin-box);
    border-radius: 5px;
    background: #ffffff center / 14px 14px no-repeat;
}

.mes-reskin-filters .wpfilters-ms-option.is-selected {
    opacity: 1;
}

.mes-reskin-filters .wpfilters-ms-option.is-selected::before {
    border-color: var(--mes-reskin-plum);
    background-color: var(--mes-reskin-plum);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E");
}

.mes-reskin-filters .wpfilters-ms-option:hover {
    background: none;
    color: var(--mes-reskin-plum);
}

/* Keyboard arrow-key highlight */
.mes-reskin-filters .wpfilters-ms-option.is-focused {
    background: var(--mes-reskin-cream);
}


/* ===========================================================================
   32  FILTER DROPDOWN -> BOTTOM SHEET ON PHONES
   ---------------------------------------------------------------------------
   Mockup "phone, Seasonal open": panel slides up from the bottom with a
   dimmed page behind it. Done with position:fixed + a huge box-shadow as
   the scrim. Tapping outside closes it via WPFilters' own outside-click.
   Mockup's "Clear" / "Show [n] recipes" footer doesn't exist in WPFilters
   (it filters live), so it's not faked here.
   =========================================================================== */

@media (max-width: 767px) {

    /* The hero is a stacking context (z-index 5, section 10), which would
       trap the fixed sheet below a sticky header; lift it while a sheet is open. */
    .mes-reskin-hero:not(#mes-reskin-boost):has(.wpfilters-ms.is-open) {
        z-index: 100000;
    }

    .mes-reskin-filters .wpfilters-ms.is-open .wpfilters-ms-dropdown {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 100000;
        width: auto;
        max-width: none;
        max-height: 70vh;
        overflow-y: auto;
        padding: 26px 20px 28px;
        border: 0;
        border-radius: 20px 20px 0 0;
        box-shadow:
            0 0 0 100vmax rgba(0, 0, 0, 0.45),   /* scrim */
            0 -8px 24px rgba(0, 0, 0, 0.18);
    }

    /* Grab handle */
    .mes-reskin-filters .wpfilters-ms.is-open .wpfilters-ms-dropdown::before {
        content: "";
        position: absolute;
        top: 10px;
        left: 50%;
        width: 40px;
        height: 5px;
        margin-left: -20px;
        border-radius: var(--mes-reskin-pill);
        background: #c9c9c9;
    }

    .mes-reskin-filters .wpfilters-ms-list {
        max-height: none;
    }

    .mes-reskin-filters .wpfilters-ms-option {
        padding: 10px 8px;              /* bigger tap targets */
        font-size: 16px;
    }
}


/* ===========================================================================
   40  RESULTS ROW LAYOUT
   ---------------------------------------------------------------------------
   Desktop mockup: results column + fixed 300px sidebar, 36px apart.
   Below 992px WPBakery stacks the columns (sidebar drops under results),
   which matches the phone mockup.
   The sort / "Showing N" / active-chip toolbar goes ABOVE this row as its
   own shortcode (see prompt) — styles for it will be section 45.
   =========================================================================== */

.mes-reskin-results {
    margin-top: 28px;
    font-family: var(--mes-reskin-font-body);
    color: var(--mes-reskin-text);
}

@media (min-width: 992px) {
    .mes-reskin-results {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px;
        column-gap: 36px;
        align-items: start;
    }

    .mes-reskin-results::before,
    .mes-reskin-results::after {
        content: none;
    }

    .mes-reskin-results > .wpb_column {
        width: auto;
        float: none;
    }
}

.mes-reskin-results .vc_column_container > .vc_column-inner {
    padding-left: 0;
    padding-right: 0;
}


/* ===========================================================================
   41  RECIPE CARDS  (.mes-card from mitten-eats-search, NOT WPUPG)
   ---------------------------------------------------------------------------
   These cards are the plugin's own [mes_ingredient_results] output
   (styled base in plugin assets/recipes-page.css). This only restyles
   them to the mockup. Delete this whole section to go back to the
   plugin's default card look.

   Mockup card also has: course eyebrow, 1-line description, time and
   servings row. Those need new markup -> card-markup prompt. Style hooks
   for them are pre-written below (.mes-card__eyebrow, __desc, __meta) so
   they light up the moment the markup ships.
   =========================================================================== */

.mes-reskin-results .mes-grid {
    gap: 28px;
}

.mes-reskin-results .mes-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mes-reskin-ink);
    border-radius: var(--mes-reskin-radius-card);
    box-shadow: none;
    background: #ffffff;
}

.mes-reskin-results .mes-card:hover {
    box-shadow: 0 8px 22px rgba(51, 49, 58, 0.14);
}

/* Specificity note: Astra's  .ast-single-post .entry-content a  underlines
   every content link (0,3,1). The ID boost keeps these cards/chips clean. */
.mes-reskin-results .mes-card__link:not(#mes-reskin-boost) {
    text-decoration: none;
}

.mes-reskin-results .mes-card__link {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    color: var(--mes-reskin-text);
}

.mes-reskin-results .mes-card__link:focus-visible {
    outline: 2px solid var(--mes-reskin-plum);
    outline-offset: -4px;
    border-radius: var(--mes-reskin-radius-card);
}

/* Photo */
.mes-reskin-results .mes-card__img-wrap {
    aspect-ratio: auto;
    height: var(--mes-reskin-card-img-h);
    /* aspect-ratio: 3 / 1;   <- use this instead if 190px crops too much */
    background: #f2e3c2;                /* mockup's no-photo placeholder tone */
}

/* Cost pill: bottom-LEFT, deep green (white on #6FA548 fails contrast;
   #234528 passes AA). */
.mes-reskin-results .mes-card__cost {
    left: 14px;
    right: auto;
    bottom: 14px;
    padding: 6px 12px;
    background: var(--mes-reskin-green-deep);
    font-size: 13px;
    font-weight: 600;
}

/* Text column wrapper (future markup) */
.mes-reskin-results .mes-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 9px;
    padding: 18px;
}

/* Course eyebrow (future markup) — "MAIN DISHES" */
.mes-reskin-results .mes-card__eyebrow {
    font-size: 12px;
    line-height: 1.3;                   /* otherwise inherits ~26px from the page */
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mes-reskin-text);
}

/* Title. Today it's a <p>, so size stays 17px until markup prompt lands. */
.mes-reskin-results .mes-card__title {
    margin: 0;
    padding: 18px;
    font-family: var(--mes-reskin-font-head);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--mes-reskin-ink);
    text-align: left;
}

/* When the title lives inside the new body wrapper, the wrapper pads. */
.mes-reskin-results .mes-card__body .mes-card__title {
    padding: 0;
}

/* One-line description (future markup) */
.mes-reskin-results .mes-card__desc {
    flex-grow: 1;
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: #444444;
}

/* Time + servings row (future markup) */
.mes-reskin-results .mes-card__meta {
    display: flex;
    gap: 16px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--mes-reskin-line);
    font-size: 13px;
    color: var(--mes-reskin-muted);
}

.mes-reskin-results .mes-card__meta > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}



/* ===========================================================================
   45  RESULTS TOOLBAR  (.mes-toolbar, rendered by mitten-eats-search)
   ---------------------------------------------------------------------------
   [mes_ingredient_results] (and [mes_seasonal_results]) print the toolbar
   INSIDE .wpfilters-results, at the top of the results column, above the
   results message and grid — so WPFilters' AJAX refresh (which replaces
   only that element's innerHTML) keeps the chips, count and sort current.

   Full-width row (desktop mockup RL1.dc: toolbar spans results + sidebar,
   count + sort at the far right above the "In season" box):
     - A Row with Extra class  mes-reskin-toolbar-row  sits between the hero
       section and the mes-reskin-results row, holding a Text Block with
       [mes_results_toolbar]. That shortcode prints only an empty
       <div class="mes-toolbar-slot"></div>.
     - mitten-eats-search's results-toolbar.js MOVES the server-rendered
       .wpfilters-results > .mes-toolbar into the slot on DOMContentLoaded
       and after every WPFilters refresh (MutationObserver on
       .wpfilters-results + the wpfilters:elementsRefreshed event).
     - While a slot exists, the in-results copy is hidden (no flash before
       the move), and the slot's min-height reserves one toolbar line so the
       move doesn't shift the page.
   Remove the row and everything falls back to the in-column toolbar.
   Markup it outputs:

   <div class="mes-toolbar">
     <div class="mes-toolbar__chips">
       <a class="mes-toolbar__chip" href="(url without this value)"
          aria-label="Remove Fall">Fall<span class="mes-toolbar__x" aria-hidden="true"></span></a>
       <a class="mes-toolbar__clear" href="(url with no filters)">Clear all</a>
     </div>
     <span class="mes-toolbar__count" aria-live="polite">Showing 26 recipes</span>
     <form class="mes-toolbar__sort" method="get" action="(page permalink)">
       <label for="mes-sort">Sort:</label>
       <select id="mes-sort" name="mes_sort">…</select>
       (+ hidden inputs carrying the current filter params)
       <noscript><button type="submit">Apply</button></noscript>
     </form>
   </div>

   Spans, not <p> — Additional CSS forces every <p> to 17px.
   =========================================================================== */

.mes-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    margin-top: 0;                      /* top of the results column */
    margin-bottom: 18px;
    font-family: var(--mes-reskin-font-body);
    color: var(--mes-reskin-text);
}

.mes-toolbar__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.mes-toolbar__chips:empty {
    display: none;
}

/* Active filter chip: "Fall ×" */
.mes-toolbar .mes-toolbar__chip:not(#mes-reskin-boost) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px 7px 14px;
    border: 1px solid var(--mes-reskin-gold);
    border-radius: var(--mes-reskin-pill);
    background: var(--mes-reskin-cream);
    color: var(--mes-reskin-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
}

.mes-toolbar .mes-toolbar__chip:not(#mes-reskin-boost):hover,
.mes-toolbar .mes-toolbar__chip:not(#mes-reskin-boost):focus-visible {
    border-color: var(--mes-reskin-plum);
    color: var(--mes-reskin-plum);
}

/* Keyboard focus ring for the chips and "Clear all" (the theme resets link
   outlines; the :not() boost outranks that without !important). */
.mes-toolbar .mes-toolbar__chip:not(#mes-reskin-boost):focus-visible,
.mes-toolbar .mes-toolbar__clear:not(#mes-reskin-boost):focus-visible {
    outline: 2px solid var(--mes-reskin-plum);
    outline-offset: 2px;
}

/* The × */
.mes-toolbar__x {
    width: 14px;
    height: 14px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mes-toolbar .mes-toolbar__clear:not(#mes-reskin-boost) {
    margin-left: 4px;
    color: var(--mes-reskin-plum);
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Count + sort ride to the right on desktop */
.mes-toolbar__count {
    margin-left: auto;
    color: var(--mes-reskin-muted);
    font-size: 15px;
}

.mes-toolbar__sort {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.mes-toolbar__sort label {
    color: var(--mes-reskin-plum);
    font-size: 15px;
    font-weight: 600;
}

/* Native select, restyled as plain plum text + chevron */
.mes-toolbar__sort select {
    -webkit-appearance: none;
            appearance: none;
    margin: 0;
    padding: 6px 24px 6px 2px;
    border: 0;
    border-radius: 6px;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23774559' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 2px center / 16px 16px no-repeat;
    color: var(--mes-reskin-plum);
    font-family: var(--mes-reskin-font-body);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.mes-toolbar__sort select:focus-visible {
    outline: 2px solid var(--mes-reskin-plum);
    outline-offset: 2px;
}

/* --- Full-width toolbar row ([mes_results_toolbar] slot) --- */

/* The in-results copy until results-toolbar.js moves it into the slot. */
body:has(.mes-toolbar-slot) .wpfilters-results > .mes-toolbar {
    display: none;
}

/* The row adds no spacing of its own: the slot's margins below are the two
   gaps (hero -> toolbar, toolbar -> results), kept equal. */
.mes-reskin-toolbar-row {
    margin-top: 0;
    margin-bottom: 0;
}

.mes-reskin-toolbar-row .vc_column_container > .vc_column-inner {
    padding: 0;
}

.mes-reskin-toolbar-row .wpb_content_element,
.mes-reskin-toolbar-row .wpb_wrapper {
    margin: 0;
    padding: 0;
}

.mes-toolbar-slot {
    min-height: 37px;                   /* single-line desktop toolbar height (measured at 1440: the 37px sort select sets it) */
}

/* The two equal gaps: hero -> toolbar and toolbar -> results. Boosted past
   WPBakery's  #content .wpb_text_column :last-child { margin-bottom: 0 },
   which otherwise zeroes the bottom one (the slot is the text block's last child). */
.mes-reskin-toolbar-row .wpb_text_column .mes-toolbar-slot:not(#mes-reskin-boost) {
    margin-top: 24px;
    margin-bottom: 24px;
}

.mes-toolbar-slot > .mes-toolbar {
    margin: 0;
}

/* The slot's margin-bottom is the gap to the results row. */
.mes-reskin-toolbar-row + .mes-reskin-results {
    margin-top: 0;
}

@media (max-width: 767px) {
    .mes-toolbar {
        margin-bottom: 14px;
        gap: 10px 12px;
    }

    .mes-reskin-toolbar-row .wpb_text_column .mes-toolbar-slot:not(#mes-reskin-boost) {
        margin-top: 14px;
        margin-bottom: 14px;
    }

    .mes-toolbar__chips {
        flex-basis: 100%;
        gap: 8px;
    }

    /* Phone: count left, sort right, on one line. The count may wrap its
       own text (ES "Mostrando 21 recetas" + "Ordenar: Menor costo" is wider
       than a 350px column) so the sort never drops to a third row. */
    .mes-toolbar__count {
        flex: 1 1 0;
        min-width: 0;
        margin-left: 0;
        font-size: 14px;
    }

    .mes-toolbar__sort {
        margin-left: auto;
    }

    .mes-toolbar__sort label,
    .mes-toolbar__sort select {
        color: var(--mes-reskin-text);
        font-size: 14px;
    }
}

/* ES phones: "Mostrando N recetas" + "Ordenar: Recomendado" don't fit one
   line below ~414px, so the toolbar wraps to 51px (measured at 360–390;
   single line, 35px, from 414 up). Reserve that so the move doesn't shift
   the page. */
@media (max-width: 413px) {
    html[lang^="es"] .mes-toolbar-slot {
        min-height: 52px;
    }
}

/* ===========================================================================
   50  "IN SEASON IN MICHIGAN" SIDEBAR BOX
   ---------------------------------------------------------------------------
   MFF edits this in WPBakery. Paste-ready markup is in the setup notes.

   QUICK-SEARCH CHIPS: every plain link inside this box is automatically
   a chip — MFF just adds a normal link in the editor, no class needed.
   The link goes to the ingredient search the page already uses:
       EN: /recipes/?ingredients=apples
       ES: /es/recetas/?ingredients=manzana
   (That's exactly where the search form lands after its redirect.)

   Anywhere else on the site, add class  mes-reskin-chip  to get the same
   look. The "What's in season →" link uses class  mes-reskin-more  so it
   stays a text link.
   =========================================================================== */

.mes-reskin-season {
    margin-bottom: 24px;
}

.mes-reskin-season > .wpb_wrapper {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px;
    border: 1px solid var(--mes-reskin-ink);
    border-radius: var(--mes-reskin-radius-card);
    background: #ffffff;
}

/* Kill stray paragraph margins from the editor. */
.mes-reskin-season > .wpb_wrapper > * {
    margin: 0;
}

/* Eyebrow: "🍃 IN SEASON IN MICHIGAN" (use a <div>, not <p> — see notes) */
.mes-reskin-season .mes-reskin-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mes-reskin-font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--mes-reskin-green-deep);
}

.mes-reskin-season .mes-reskin-eyebrow i,
.mes-reskin-season .mes-reskin-eyebrow svg {
    font-size: 16px;
    color: var(--mes-reskin-green-deep);
}

/* Month heading: "October" */
.mes-reskin-season .mes-reskin-month {
    font-family: var(--mes-reskin-font-head);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--mes-reskin-ink);
}

/* The chips  (:not(#mes-reskin-boost) beats Astra's content-link underline) */
.mes-reskin-season a:not(.mes-reskin-more):not(#mes-reskin-boost),
.mes-reskin-chip:not(#mes-reskin-boost) {
    display: inline-flex;
    align-items: center;
    margin: 0 8px 8px 0;
    padding: 7px 12px;
    border: 1px solid var(--mes-reskin-green-deep, #234528);
    border-radius: 999px;
    background: #ffffff;
    color: var(--mes-reskin-green-deep, #234528);
    font-family: var(--mes-reskin-font-body, 'Montserrat', montserrat, sans-serif);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.mes-reskin-season a:not(.mes-reskin-more):not(#mes-reskin-boost):hover,
.mes-reskin-season a:not(.mes-reskin-more):not(#mes-reskin-boost):focus-visible,
.mes-reskin-chip:not(#mes-reskin-boost):hover,
.mes-reskin-chip:not(#mes-reskin-boost):focus-visible {
    background: var(--mes-reskin-green-deep, #234528);
    color: #ffffff;
    text-decoration: none;
}

.mes-reskin-season a:focus-visible,
.mes-reskin-chip:focus-visible {
    outline: 2px solid var(--mes-reskin-green-deep, #234528);
    outline-offset: 2px;
}

/* The row of chips: negative bottom margin eats the last row's 8px. */
.mes-reskin-season .mes-reskin-chips {
    margin-bottom: -8px;
}

/* wpautop inserts <br /> between links on separate lines (and MFF's
   Visual-editor edits will too). Hide any <br> that follows a chip so
   chips flow as a wrapping row. Doesn't depend on the .mes-reskin-chips
   class, so it survives editor changes. */
.mes-reskin-season a:not(.mes-reskin-more) + br {
    display: none;
}

/* [mes_season_chips] and [mes_season_more] sit on consecutive lines, so
   wpautop joins them with a <br> and leaves an empty <p> after them. Both
   become flex items of the box and each adds another 14px gap, pushing
   "What's in season" ~40px further down than the other gaps. Hide them so
   chips → link is the same 14px gap (last chip row's 8px already cancelled
   by the -8px above). */
.mes-reskin-season > .wpb_wrapper > br,
.mes-reskin-season > .wpb_wrapper > p:empty {
    display: none;
}

/* "What's in season →" */
.mes-reskin-season a.mes-reskin-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--mes-reskin-font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--mes-reskin-green-deep);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.mes-reskin-season a.mes-reskin-more::after {
    content: "\2192";                   /* → */
    text-decoration: none;
}


/* ===========================================================================
   90  PHONE OVERRIDES (<= 767px)
   ---------------------------------------------------------------------------
   Phone mockup: hero photo on top fading to white at the bottom, headline
   + search anchored at the bottom, round icon-only search button.
   Filters wrap under the search (mockup puts them in a sticky bar outside
   the hero; that needs a layout change in WPBakery — not done here).
   =========================================================================== */

@media (max-width: 767px) {

    .mes-reskin-hero {
        justify-content: flex-end;
        gap: 14px;
        min-height: 250px;
        margin-top: 16px;
        padding: 90px 16px 18px;
        border-radius: 18px;
    }

    .mes-reskin-hero::before {
        background: linear-gradient(0deg,
            rgba(255, 255, 255, 0.96) 0%,
            rgba(255, 255, 255, 0.85) 45%,
            rgba(255, 255, 255, 0) 100%);
    }

    .mes-reskin-hero h1 {
        font-size: 30px;
    }

    /* Search pill: tighter */
    :is(.mes-reskin-hero, .mes-reskin-search) .searchwp-form:not(#mes-reskin-boost) {
        padding: 4px 4px 4px 16px;
    }

    /* Slightly tighter mic clearance than desktop (40px mic, section 20). */
    :is(.mes-reskin-hero, .mes-reskin-search) .searchwp-form:not(#mes-reskin-boost) .swp-input {
        padding-right: 44px;
        font-size: 16px;                /* 16px stops iOS zoom-on-focus */
    }

    /* Round icon-only button. The word "Search" stays as the value (for
       screen readers + aria-label) but is hidden visually. */
    :is(.mes-reskin-hero, .mes-reskin-search) .searchwp-form:not(#mes-reskin-boost) input[type="submit"] {
        width: 44px;
        height: 44px;
        padding: 0;
        font-size: 0;
        color: transparent;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 20px 20px;
    }

    /* Pills */
    .mes-reskin-filters {
        gap: 8px;
    }

    .mes-reskin-filters .wpfilters-element-title {
        padding: 10px 38px 10px 14px;
        font-size: 15px;
    }

    .mes-reskin-filters .wpfilters-element-title::after {
        right: 14px;
    }

    .mes-reskin-filters .wpfilters-element:has(.wpfilters-ms-chip) .wpfilters-element-title {
        padding-right: 66px;
    }

    .mes-reskin-filters .wpfilters-ms-chips {
        right: 36px;
    }

    /* Results */
    .mes-reskin-results {
        margin-top: 20px;
    }

    .mes-reskin-season {
        margin-top: 28px;
    }

    .mes-reskin-season > .wpb_wrapper {
        gap: 12px;
        padding: 18px;
        border-radius: var(--mes-reskin-radius-panel);
    }

    .mes-reskin-season .mes-reskin-month {
        font-size: 22px;
    }
}


/* ===========================================================================
   91  SMALL PHONE CARD LAYOUT (<= 599px, where the grid is 1 column)
   ---------------------------------------------------------------------------
   Phone mockup: horizontal cards — 120px photo on the left, text right.
   =========================================================================== */

@media (max-width: 599px) {

    .mes-reskin-results .mes-grid {
        gap: 14px;
    }

    .mes-reskin-results .mes-card {
        border-radius: var(--mes-reskin-radius-panel);
    }

    .mes-reskin-results .mes-card__link {
        flex-direction: row;
        align-items: stretch;
    }

    .mes-reskin-results .mes-card__img-wrap {
        flex: 0 0 120px;
        width: 120px;
        height: auto;
        min-height: 150px;              /* RL1Phone: 150px photo */
    }

    .mes-reskin-results .mes-card__title {
        align-self: center;
        padding: 14px;
        font-size: 18px;
    }

    /* Inside the body column the title must not inherit the centering above
       (it's for the old body-less card) -- short titles were centered. */
    .mes-reskin-results .mes-card__body .mes-card__title {
        align-self: stretch;
    }

    .mes-reskin-results .mes-card__body {
        align-self: stretch;            /* full card height, so meta can pin to the bottom */
        gap: 6px;
        padding: 14px;
    }

    .mes-reskin-results .mes-card__eyebrow {
        font-size: 11px;
    }

    .mes-reskin-results .mes-card__desc {
        display: none;                  /* mockup drops description on phone */
    }

    .mes-reskin-results .mes-card__meta {
        gap: 12px;
        margin-top: auto;               /* pinned to the bottom of the card, as in RL1Phone */
        padding-top: 0;
        border-top: 0;
    }

    /* Pill fits inside the narrow photo */
    .mes-reskin-results .mes-card__cost {
        left: 8px;
        bottom: 8px;
        padding: 3px 8px;
        font-size: 11.5px;
    }
}


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

@media (prefers-reduced-motion: reduce) {
    .mes-reskin-hero *,
    .mes-reskin-results * {
        transition: none;
    }

    .mes-reskin-results .mes-card:hover {
        transform: none;
    }
}


/* ===========================================================================
   95  HOMEPAGE BOTTOM ROW: NEWSLETTER CARD
   ---------------------------------------------------------------------------
   Page 28's last row: two WPBakery post grids (cards: .vc_gitem-zone-c
   .me-featured-grid) and a MailerLite embed in column 3. Column 3 is made to
   read as a third card without the image.

   No Extra class names on this row, so it's found by the embed it holds:
       row      .vc_row:has(> .wpb_column .ml-embedded)
       column 3 > .wpb_column:has(.ml-embedded)
   (EN only for now: the ES homepage has no newsletter column.)

   Values copied from the live grid cards (computed at 1440):
       card: 1px solid #000, 20px radius; top 24px below the column (the
             grid item's padding), 59px below it (24px + the grid
             container's 35px margin). Its height is its own content: CSS
             can't size it to the shorter of the two grid cards.
       eyebrow + excerpt: Montserrat 17px / 400, #333 (eyebrow line-height
             28.05px, excerpt 22px); title: Mokoko 24px / 600, #3a3a3a,
             line-height 28.8px, 20px below
   Column 3's Design Options (.vc_custom_1790802192051, all !important)
   already give its inner wrapper the 1px #000 border and 20px radius, plus
   20px padding and the mitteneatsbg.png photo, which stays: the form sits in
   a white box inside it with the photo framing it.
   =========================================================================== */

.vc_row:has(> .wpb_column .ml-embedded) > .wpb_column:has(.ml-embedded) > .vc_column-inner {
    margin-top: 24px;
    margin-bottom: 59px;
}

/* WPBakery's 35px .wpb_content_element margin would make the photo frame
   deeper below the white box than above it. */
.vc_row:has(> .wpb_column .ml-embedded) > .wpb_column:has(.ml-embedded) .wpb_text_column {
    margin-bottom: 0;
}

/* Optional eyebrow above the form ("NEWSLETTER"), like the grid cards'. */
.mes-reskin-news-eyebrow,
.wpb_column:has(.ml-embedded) .mes-reskin-news-eyebrow {
    margin: 0;
    font-family: montserrat, sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 28.05px;
    color: #333333;
}

/* MailerLite wrapper: no grey box, no 400px cap, no table centering. The
   selectors carry one class more than MailerLite's own (.ml-subscribe-form),
   because its embed CSS prints after this stylesheet. */
#mlb2-46563940.ml-form-embedContainer.ml-subscribe-form .ml-form-align-center {
    text-align: left;
}

/* The form sits in a white box inside the card; the card's background photo
   shows 45px around it (the column's 20px Design Options padding + 25px). */
#mlb2-46563940.ml-form-embedContainer.ml-subscribe-form .ml-form-embedWrapper.embedForm {
    width: auto;                        /* MailerLite's 100% + the margin would overflow */
    max-width: none;
    margin: 25px;
    border-radius: 16px;
    background-color: #ffffff;
}

#mlb2-46563940.ml-form-embedContainer.ml-subscribe-form .ml-form-embedWrapper .ml-form-embedBody,
#mlb2-46563940.ml-form-embedContainer.ml-subscribe-form .ml-form-embedWrapper .ml-form-successBody {
    padding: 28px 28px 8px;             /* + the submit row's 20px bottom margin = 28px */
}

/* Title + intro = the grid cards' h4 + excerpt. */
#mlb2-46563940.ml-form-embedContainer.ml-subscribe-form .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent h4,
#mlb2-46563940.ml-form-embedContainer.ml-subscribe-form .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent h4 {
    margin: 0 0 20px;
    font-family: Mokoko, mokoko, serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 28.8px;
    color: #3a3a3a;
    text-align: left;
}

#mlb2-46563940.ml-form-embedContainer.ml-subscribe-form .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent p,
#mlb2-46563940.ml-form-embedContainer.ml-subscribe-form .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p {
    font-family: montserrat, sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 22px;
    color: #333333;
    text-align: left;
}

/* Email field + Subscribe = the homepage search pill (section 20): 1.5px
   #2b2b2b outline, pill radius, Montserrat 18px, ~64px tall, plum button
   (#774559, hover/focus #5a3142), 2px plum focus ring. Border COLOUR is set
   without !important so MailerLite's red error state still shows. */
#mlb2-46563940.ml-form-embedContainer.ml-subscribe-form .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input {
    border-color: #2b2b2b;
    font-family: Montserrat, montserrat, system-ui, sans-serif;
}

#mlb2-46563940.ml-form-embedContainer.ml-subscribe-form .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input:focus {
    outline: 2px solid #774559;
    outline-offset: 2px;
}

#mlb2-46563940.ml-form-embedContainer.ml-subscribe-form .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit {
    margin-top: 12px;
}

#mlb2-46563940.ml-form-embedContainer.ml-subscribe-form .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button {
    transition: background-color 0.15s ease;
}

#mlb2-46563940.ml-form-embedContainer.ml-subscribe-form .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:focus-visible {
    outline: 2px solid #774559;
    outline-offset: 2px;
}

/* Exception: overrides MailerLite embed !important. Form ID changes if the form is regenerated.
   Only properties MailerLite itself sets with !important. */
/* flow-root: the white box wraps MailerLite's floated submit row. */
#mlb2-46563940.ml-form-embedContainer.ml-subscribe-form .ml-form-embedWrapper {
    display: flow-root !important;
}

#mlb2-46563940.ml-form-embedContainer.ml-subscribe-form .ml-form-align-default {
    display: block !important;
    text-align: left !important;
}

#mlb2-46563940.ml-form-embedContainer.ml-subscribe-form .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input {
    border-width: 1.5px !important;
    border-radius: 999px !important;
    padding: 20px 24px !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
}

#mlb2-46563940.ml-form-embedContainer.ml-subscribe-form .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button {
    border-radius: 999px !important;
    background-color: #774559 !important;
    padding: 14px 44px !important;
    font-family: Montserrat, montserrat, system-ui, sans-serif !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
}

#mlb2-46563940.ml-form-embedContainer.ml-subscribe-form .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:hover,
#mlb2-46563940.ml-form-embedContainer.ml-subscribe-form .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:focus-visible {
    background-color: #5a3142 !important;
}

/* Phones: the search pill's phone sizes (56px pill, 16px text so iOS doesn't
   zoom, 16px left inset, 44px button). The columns already stack full width.
   Same exception as above: only properties MailerLite sets with !important. */
@media (max-width: 767px) {
    #mlb2-46563940.ml-form-embedContainer.ml-subscribe-form .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input {
        padding: 17px 16px !important;
        font-size: 16px !important;
        line-height: 20px !important;
    }

    #mlb2-46563940.ml-form-embedContainer.ml-subscribe-form .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button {
        padding: 12px 24px !important;
        font-size: 16px !important;
        line-height: 20px !important;
    }
}


/* ===========================================================================
   96  RECIPES GRID: NEWSLETTER BANNER
   ---------------------------------------------------------------------------
   mes_render_newsletter_band() (mitten-eats-search, recipes-page.php) puts
   this after the 6th card of [mes_ingredient_results] (after the last card
   when there are fewer; never on 0 results or the homepage's compact grid).
   Values from the Recipes landing 1 mockup. The title uses the site heading
   font (Mokoko; the mockup's Bitter isn't loaded, see the font note at the
   top). The button opens the MailerLite pop-up via ml().
   =========================================================================== */

.mes-newsband {
    grid-column: 1 / -1;                /* full grid width; the grid's own gap spaces it */
    display: flex;
    align-items: stretch;
    min-height: 132px;
    overflow: hidden;
    border-radius: 18px;
    background: #774559;
    color: #ffffff;
    font-family: Montserrat, montserrat, system-ui, sans-serif;
}

.mes-newsband__photo {
    position: relative;
    flex-shrink: 0;
    width: 120px;
}

.mes-newsband__photo img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Photo fades into the plum. */
.mes-newsband__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(119, 69, 89, 0) 45%, #774559 100%);
}

.mes-newsband__body {
    display: flex;
    flex-grow: 1;
    align-items: center;
    gap: 18px;
    min-width: 0;
    padding: 20px 22px 20px 4px;
}

.mes-newsband__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    box-sizing: border-box;
    border: 2px solid #ffffff;
    border-radius: 999px;
    color: #ffffff;
}

.mes-newsband__text {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 6px;
    min-width: 0;
}

.mes-newsband .mes-newsband__title {
    margin: 0;
    font-family: 'Mokoko', mokoko, Bitter, Georgia, serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
    white-space: nowrap;
}

.mes-newsband__desc {
    display: block;
    font-size: 14px;
    line-height: 1.5;
    color: #ffffff;
}

/* <button> (replaces the mockup's <a>): reset the theme's button look. */
.mes-newsband .mes-newsband__btn {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 16px 20px 16px 30px;
    border: 2px solid #ffffff;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 6px 16px rgba(46, 22, 32, 0.35);
    color: #774559;
    font-family: Montserrat, montserrat, system-ui, sans-serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.mes-newsband .mes-newsband__btn:hover {
    background: #f7efdc;
    box-shadow: 0 8px 20px rgba(46, 22, 32, 0.45);
    color: #5a3142;
    transform: translateY(-1px);
}

.mes-newsband .mes-newsband__btn:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
}

.mes-newsband__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: #774559;
    color: #ffffff;
}

.mes-newsband__mi {
    display: flex;
    flex-shrink: 0;
}

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

    .mes-newsband .mes-newsband__btn:hover {
        transform: none;
    }
}

@media (max-width: 900px) {
    .mes-newsband .mes-newsband__title {
        white-space: normal;
    }
}

/* Phones: text over a full-width button; no photo strip or Michigan outline. */
@media (max-width: 600px) {
    .mes-newsband__photo,
    .mes-newsband__mi {
        display: none;
    }

    .mes-newsband__body {
        flex-wrap: wrap;
        gap: 14px 16px;
        padding: 20px;
    }

    .mes-newsband__text {
        flex: 1 1 0;
    }

    .mes-newsband .mes-newsband__btn {
        flex-basis: 100%;
        justify-content: center;
    }
}