.site-header__menu-switcher {
    position: relative;
}

.site-header__menu-popup {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    /* The close button is positioned 44px above the card, so the padding has to
       leave room for it. With a flat 24px all round, the vertical slack around a
       90vh card was 10vh - 48px — only 29px on iPad landscape (1024x768) and 12px
       on a 1024x600 tablet, which put the close button off the top of the screen
       with no visible way back. Escape and a backdrop click still worked, but
       nothing said so. */
    padding: 68px var(--space-4) var(--space-4);
}

.site-header__menu-popup:not([hidden]) {
    display: flex;
}

.site-header__menu-popup-backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(20, 22, 14, 0.6);
}

.site-header__menu-popup-wrap {
    position: relative;
    width: 100%;
    max-width: var(--container-width-wide);
}

.site-header__menu-popup-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    background-color: var(--color-beige-2);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}

.site-header__menu-popup-close {
    position: absolute;
    top: -44px;
    right: 0;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.site-header__menu-popup-close:hover,
.site-header__menu-popup-close:focus-visible {
    opacity: 0.7;
}

.site-header__menu-popup-close svg {
    display: block;
    width: 20px;
    height: 20px;
}

.site-header__menu-popup-close svg path {
    stroke: var(--color-beige-2);
}

.site-header__menu-popup-body {
    overflow-y: auto;
    padding: clamp(var(--space-5), 5vw, 3.5rem) clamp(var(--space-4), 4vw, 3.75rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    text-align: center;
}

.site-header__menu-popup-heading {
    margin: 0;
    color: var(--color-grey-1);
    font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem);
}

.site-header__menu-popup-description {
    max-width: 42rem;
    color: var(--color-grey-1);
    font-family: var(--font-family-base);
    font-size: 18px;
    line-height: 26px;
}

.site-header__menu-popup-description p {
    margin: 0;
}

/* Hidden by default (desktop cards grow open on hover, there's nothing to
   navigate) — shown only <=1199px, in the media query near the bottom of
   this file where the row actually becomes a Swiper. Same look as
   .stories__nav/-button (blocks/stories), wired up by hand in
   initMenuPopup() (assets/js/global.js) since this slider isn't built
   through the generic initSwiper(). */
.menu-popup__nav {
    display: none;
    justify-content: flex-end;
    gap: var(--space-2);
    width: 100%;
    margin-top: var(--space-3);
}

.menu-popup__nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 0.5rem;
    background-color: #f9f3ea;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.menu-popup__nav-button:hover,
.menu-popup__nav-button:focus-visible {
    opacity: 0.75;
}

.menu-popup__nav-button.swiper-button-disabled,
.menu-popup__nav-button.swiper-button-lock {
    display: inline-flex;
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.menu-popup__nav-button svg {
    display: block;
    width: 20px;
    height: 20px;
}

.menu-popup__cards {
    width: 100%;
    display: flex;
    align-items: stretch;
    gap: var(--space-2);
    margin-top: var(--space-3);
    text-align: left;
}

.menu-popup__cards-track {
    display: contents;
}

/*
 * Card design mirrors the "Timeless Gift" homepage block (blocks/timeless-gift)
 * 1:1 — same class structure/measurements, translated from `--simple`/`--featured`
 * modifiers (fixed per-card there) into a toggle: `:not(.is-active)` = simple,
 * `.is-active` = featured. Each card carries its own cover image (CSS var,
 * closed/simple state) and open image (`.menu-popup__card-media img`, shown
 * only while active), same as that block's two image roles.
 *
 * Activation is hover-driven (see assets/js/global.js) and the closed/open
 * content cross-fades in place rather than one instantly replacing the other:
 * `.menu-popup__card-top` (closed preview) and `.menu-popup__card-open`
 * (label/ornament/body) both occupy the same `stack` grid area and overlap,
 * only their opacity differs — so nothing needs to jump in or out of layout
 * flow, which is what kept this animation-free of layout jumps.
 */
.menu-popup__card {
    position: relative;
    display: grid;
    grid-template-areas: "stack" "arrow";
    /* `minmax(0, 1fr)` caps the implicit column to the card's actual
     * available width — without it, `.card-open`'s explicit fixed width (see
     * below) feeds into the column's own auto-sizing algorithm and inflates
     * it to match, which then stretches `.card-top` (no explicit width of its
     * own, so it fills whatever the column turns out to be) far wider than
     * the visible card, shifting its centered icon/heading off to the right. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    row-gap: var(--space-1);
    flex: 1 1 220px;
    min-width: 0;
    padding: clamp(var(--space-4), 3vw, var(--space-5));
    border-radius: 12px;
    background-color: #f9f3ea;
    background-image: var(--menu-popup-card-cover, none);
    background-size: cover;
    background-position: center;
    color: var(--color-grey-1);
    text-align: center;
    overflow: hidden;
    box-shadow: 0px 3px 10px 0px #464a3a3d;
    transition:
        flex-grow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        flex-shrink 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        flex-basis 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        min-width 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.2s ease,
        color 0.2s ease;
}

.menu-popup__card--has-cover {
    color: var(--color-beige-2);
}

.menu-popup__card.is-active {
    flex: 1.4 1 380px;
    min-width: 340px;
    background-image: none;
    background-color: var(--color-grey-1);
    color: var(--color-cream);
    text-align: center;
}

.menu-popup__card-top {
    grid-area: stack;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-1);
    opacity: 1;
    transition: opacity 0.15s ease 0.05s;
}

.menu-popup__card.is-active .menu-popup__card-top {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s ease;
}

/*
 * Unlike `-top`, `-open` is NOT sized off the card's own (animating) width —
 * it keeps a fixed `width` matching the card's real final open size, so its
 * text wraps identically whether the card is mid-transition or fully open —
 * a grid item with an explicit width doesn't stretch to fill its track, it
 * just sizes to that width regardless of how wide the "stack" area currently
 * is, so this stays a normal (non-absolute) grid participant and still
 * contributes its real height to the row's natural-height measurement (an
 * `absolute`-positioned version of this was tried first and made every card
 * measure too short, since out-of-flow elements don't count toward intrinsic
 * sizing). `--card-open-width` is set by JS (assets/js/global.js,
 * lockPopupHeight) from the active card's actual measured width, since that
 * varies by container/sibling count — a flat guess based on the CSS
 * `min-width: 340px` floor came out much narrower than reality and squeezed
 * everything inside (esp. the image) into a cramped column; the fallback
 * value only applies before JS has measured anything.
 * `justify-self: center` centers it within the (wider, animating) stack area.
 */
.menu-popup__card-open {
    grid-area: stack;
    justify-self: center;
    width: var(--card-open-width, calc(340px - 2 * clamp(var(--space-4), 3vw, var(--space-5))));
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-3);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s ease;
}

.menu-popup__card.is-active .menu-popup__card-open {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.15s ease 0.05s;
}

.menu-popup__card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border: 1px solid var(--color-orange-dark);
    border-radius: 50%;
}

.menu-popup__card-icon svg {
    display: block;
    width: 22px;
    height: 22px;
}

.menu-popup__card-icon svg path {
    stroke: var(--color-orange-dark);
}

.menu-popup__card-heading {
    margin: 0;
    font-size: 1.25rem;
}

.menu-popup__card--has-cover .menu-popup__card-heading {
    color: var(--color-grey-1);
    font-size: 30px;
}

.menu-popup__card-label {
    margin: 0;
    font-size: 1.75rem;
    color: var(--color-beige-2);
}

.menu-popup__card-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    max-width: 12rem;
}

.menu-popup__card-ornament-line {
    flex: 1;
    height: 1px;
    background-color: var(--color-orange-dark);
}

.menu-popup__card-ornament-icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
}

.menu-popup__card-ornament-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.menu-popup__card-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: var(--space-4);
    width: 100%;
    flex: 1;
    min-height: 0;
    text-align: left;
}

.menu-popup__card-media {
    position: relative;
    width: 100%;
    min-width: 0;
    /* max-height, not a fixed height — a fixed box + object-fit: cover
       (the previous version of this rule) filled the box by cropping
       whatever didn't fit, which is exactly what shouldn't happen here.
       This just caps how tall the image is allowed to get (still the fix
       for the mobile scroll issue — see the max-width: min(100%, 320px)
       override below, this used to pair with an aspect-ratio: 4/5 box
       there that ran to ~400px tall) without cutting anything off. */
    max-height: 200px;
    display: flex;
    justify-content: center;
}

.menu-popup__card-media img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 400px;
    object-fit: contain;
    /* Perfmatters' lazy-load fades images in via a CSS animation
       (pmFadeIn, 0 -> 1 opacity) rather than a transition, with no
       animation-fill-mode: forwards — so it plays out (and finishes)
       while this whole popup is still display: none (hidden until
       opened), and by the time it's actually visible the animation has
       already ended and reverted to its un-animated base state, which
       reads as opacity: 0 forever. Forcing it here sidesteps that
       entirely rather than fighting Perfmatters' own timing. */
    opacity: 1 !important;
    animation: none !important;
}

.menu-popup__card-badge {
    position: absolute;
    top: calc(var(--space-1) - 20px);
    left: calc(-1 * clamp(var(--space-4), 3vw, var(--space-5)) + 12px);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding-block: 0.375rem;
    padding-inline: 0.75rem 1rem;
    border-radius: 4px;
    background-color: #fae0c0;
    color: var(--color-grey-1);
    font-family: var(--font-family-base);
    font-weight: 700;
    font-size: 0.8125rem;
    white-space: nowrap;
}

.menu-popup__card-badge-icon {
    display: inline-flex;
    width: 16px;
    height: 15px;
}

.menu-popup__card-badge-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.menu-popup__card-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-3);
}

.menu-popup__card-description {
    color: var(--color-cream);
    font-family: var(--font-family-base);
    font-size: 16px;
    line-height: 24px;
}

.menu-popup__card-description p {
    margin: 0;
}

/* Desktop shows --desktop, mobile (<=1199px, below) swaps to --mobile —
   same pattern as .timeless-gift__card-description--mobile (this design's
   homepage counterpart). Default/desktop state: --mobile stays out of the
   way entirely. */
.menu-popup__card-description--mobile {
    display: none;
}

.menu-popup__card-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* flex-start on desktop — same as .timeless-gift__card-cta (this
       design's homepage counterpart): the button sits under the
       left-aligned description, so it should read as pinned to that edge,
       not floating centered against the wider card. Overridden back to
       center for mobile (below, <=1199px), where .menu-popup__card is
       already align-items: center for everything else in the column. */
    align-self: flex-start;
    height: 48px;
    padding-inline: var(--space-4);
    border-radius: var(--radius);
    background-color: var(--color-orange-dark);
    color: var(--color-cream);
    font-family: var(--font-family-base);
    font-weight: 700;
    font-size: 16px;
    white-space: nowrap;
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.menu-popup__card-cta:hover,
.menu-popup__card-cta:focus-visible {
    opacity: 0.85;
}

.menu-popup__card-arrow {
    grid-area: arrow;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: 1px solid var(--color-orange-dark);
    border-radius: 50%;
    background: none;
    color: var(--color-orange-dark);
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.menu-popup__card-arrow:hover,
.menu-popup__card-arrow:focus-visible {
    opacity: 0.85;
}

.menu-popup__card-arrow svg {
    display: block;
    width: 20px;
    height: 20px;
}

.menu-popup__card-arrow svg path {
    fill: var(--color-orange-dark);
    stroke: var(--color-orange-dark);
}

.menu-popup__card.is-active .menu-popup__card-arrow {
    display: none;
}

/* Desktop only — same fix as .timeless-gift__card-body's own copy of this
   rule (this design's homepage counterpart): a 1fr:1fr split left the
   media column too narrow for object-fit: contain (above) to render the
   image at a visibly useful size without cropping it, unlike the old
   fixed-box + object-fit: cover version of this card (see
   .menu-popup__card-media's own comment above) which cropped instead. Left
   out of the <=1199px slider styles below on purpose — mobile's
   max-height: 200px there is load-bearing (see that block's comment).
   Placed after the base rules it overrides (not right next to
   .menu-popup__card-body above) — a min-width media query has the same
   specificity as the plain rule it's meant to beat, so it only wins the
   cascade if it also comes later in source order; nested right after
   .menu-popup__card-body it was still ahead of .menu-popup__card-media's
   own base max-height: 200px further down the file, which silently won
   instead. */
@media (min-width: 1200px) {
    .menu-popup__card-body {
        grid-template-columns: 1.4fr 1fr;
    }

    .menu-popup__card-media,
    .menu-popup__card-media img {
        max-height: 280px;
    }

    /* Translated descriptions make the active card taller and pull its cover
       above the position used by the US card. Keep the cover size unchanged,
       and offset only that image (not the badge) to match the US alignment. */
    html:not([lang^="en"]) .menu-popup__card.is-active .menu-popup__card-media img {
        transform: translateY(40px);
    }
}

/*
 * Slider layout, phones and tablets. The ceiling used to be 899, which left
 * tablets on the desktop side-by-side layout — and that layout cannot fit on one:
 * it needs the active card's 340px floor plus 220px for each closed card, roughly
 * 1024px of row, while a 1024px tablet only offers about 894px. Every closed card
 * came out near 177px, so a heading like "Memorial / Tribute" broke over three
 * lines. Kept in step with `sliderQuery` in assets/js/global.js, which is what
 * actually builds and tears down the Swiper.
 */
@media (max-width: 1199px) {
    .menu-popup__nav {
        display: flex;
    }

    .site-header__menu-popup-card {
        max-height: 92vh;
    }

    .site-header__menu-popup-heading {
        font-size: 40px;
    }

    .site-header__menu-popup-description {
        font-size: 16px;
        line-height: 24px;
    }

    .menu-popup__cards {
        flex-wrap: nowrap;
        overflow: visible;
    }

    /* Container width, no side offsets. The negative margin here had no matching
       padding at all, so it pulled the row out over the popup's padding on both
       sides and sliced a card at each edge. */
    .menu-popup__cards.swiper {
        width: 100%;
    }

    .menu-popup__cards-track.swiper-wrapper {
        display: flex;
        align-items: stretch;
    }

    .menu-popup__card.swiper-slide {
        width: 98%;
        flex: none;
        min-width: 0;
    }

    /*
     * Mobile has no hover, so the desktop cross-fade (grid-area overlap +
     * opacity) doesn't apply here — revert to the previous sequential model:
     * `.menu-popup__card-open` unpacks via `display: contents` so its children
     * can be individually shown/`order`-ed as direct flex items of the card,
     * same as before the hover/cross-fade redesign.
     */
    .menu-popup__card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: var(--space-1);
        padding: 20px 16px;
    }

    .menu-popup__card-top {
        position: static;
        opacity: 1;
        pointer-events: auto;
        transition: none;
    }

    /*
     * In slider mode there is no width-changing "open" animation — a slide is a
     * fixed percentage of the row whatever its state — so "open" here just means
     * "whichever card the slider is resting on".
     *
     * This was keyed on Swiper's own active-slide class rather than our
     * `.is-active`, so that the open card could never disagree with the card on
     * screen. That had a hole: with more than one card in view the active index
     * cannot reach the last one, because the translation stops at its maximum
     * before that card's leading edge gets to the row's. On a 4-card row the last
     * position measured as activeIndex 2, so the last card could not be opened at
     * all — not by swiping, and not by its own arrow either, since slideTo() lands
     * on that same clamped position.
     *
     * So it is `.is-active` again, and the guarantee is kept rather than given up:
     * the JS drives that class off the slider's snap index, of which there is one
     * per card, so it still follows the slider's real position and now covers every
     * card. See initMenuPopup in assets/js/global.js.
     */
    .menu-popup__card.is-active .menu-popup__card-top {
        display: none;
    }

    .menu-popup__card-open {
        display: contents;
        opacity: 1;
        pointer-events: auto;
        transition: none;
    }

    .menu-popup__card-label,
    .menu-popup__card-ornament,
    .menu-popup__card-body {
        display: none;
    }

    .menu-popup__card:not(.is-active) {
        min-height: 420px;
    }

    .menu-popup__card--has-cover .menu-popup__card-heading {
        font-size: 22px;
    }

    .menu-popup__card.is-active {
        min-width: 0;
    }

    .menu-popup__card.is-active .menu-popup__card-label {
        display: block;
        order: 1;
        font-weight: 400;
        font-size: 26px;
        line-height: 24px;
    }

    .menu-popup__card.is-active .menu-popup__card-ornament {
        display: flex;
        order: 3;
    }

    .menu-popup__card.is-active .menu-popup__card-body {
        display: contents;
    }

    /*
     * `-text` wraps description+cta as one unit on desktop; on mobile it also
     * needs `display: contents` so its children can be individually `order`-ed
     * as direct flex items of `.menu-popup__card` alongside media.
     */
    .menu-popup__card.is-active .menu-popup__card-text {
        display: contents;
    }

    .menu-popup__card.is-active .menu-popup__card-media {
        order: 2;
        margin-left: 0;
        /* Was aspect-ratio: 4/5 at up to 320px wide — a ~400px-tall image,
           the single biggest reason a card's content ran past the viewport
           and forced the whole popup to scroll on mobile. The shared
           max-height: 200px above replaces it, without cropping: the img
           keeps its own aspect ratio (width/height: auto, object-fit:
           contain) and just can't render taller than 200px. */
        max-width: min(100%, 320px);
        margin-inline: auto;
    }

    .menu-popup__card.is-active .menu-popup__card-description {
        order: 4;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        /* Capped at 3 lines (ellipsis) instead of running however long the
           admin-entered copy happens to be — with the image, heading,
           description and nav row above already using most of a phone's
           height, one long card description was enough on its own to push
           the popup back into needing a scroll no matter how much the image
           got trimmed. This bounds that risk regardless of copy length. */
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }

    /* Swap which of the two description elements is visible — same idea as
       .timeless-gift__card-description--mobile (this design's homepage
       counterpart), but display: none/block alone doesn't work here: the
       rule above already sets display: -webkit-box (needed for the
       line-clamp) on the shared base class, at the same specificity
       (.menu-popup__card.is-active .menu-popup__card-description, 3
       classes) as these two selectors below — so it's a tie broken by
       source order, and these need to come after it to win. --mobile gets
       -webkit-box too (not block), so it keeps the clamp; --desktop gets
       none. */
    .menu-popup__card.is-active .menu-popup__card-description--desktop {
        display: none;
    }

    .menu-popup__card.is-active .menu-popup__card-description--mobile {
        display: -webkit-box;
    }

    .menu-popup__card.is-active .menu-popup__card-cta {
        order: 5;
        /* Back to centered on mobile — see the base rule's own comment for
           why desktop is flex-start instead. */
        align-self: center;
    }

    .menu-popup__card-badge {
        top: calc(var(--space-1) - 10px);
        right: 0;
        left: unset;
        border-radius: 4px;
    }

    .menu-popup__card-arrow {
        display: none;
    }
}

/*
 * Phone-only tightening, layered on top of the <=1199px slider styles above.
 * Between the popup's own heading+description, the nav row, and one open
 * card's badge/label/image/ornament/description/button, there simply isn't
 * 92vh of room to spare on a real phone (measured ~290px short on a 330×717
 * viewport even after the image was capped at 200px and the description
 * clamped to 3 lines) — this trims the remaining generic chrome (font sizes,
 * gaps, padding) rather than cutting any more content, to close most of the
 * rest of that gap without the popup reading noticeably more cramped.
 */
@media (max-width: 699px) {
    .site-header__menu-popup-body {
        padding: 20px var(--space-3);
        gap: var(--space-2);
    }

    .site-header__menu-popup-heading {
        font-size: 30px;
    }

    .site-header__menu-popup-description {
        font-size: 14px;
        line-height: 20px;
        /* Same reasoning as .menu-popup__card-description's clamp below —
           bounds the space this takes regardless of how long the
           admin-entered copy is. */
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .menu-popup__nav {
        margin-top: var(--space-2);
    }

    .menu-popup__card:not(.is-active) {
        min-height: 0;
    }

    .menu-popup__card {
        padding: 16px;
        gap: var(--space-1);
    }

    .menu-popup__card.is-active .menu-popup__card-description {
        -webkit-line-clamp: 2;
    }

    .menu-popup__card-ornament {
        max-width: 8rem;
    }

    .menu-popup__card-ornament-icon {
        width: 20px;
        height: 20px;
    }
}

/*
 * Tablet tuning layered on the slider above. Those values are sized for a phone,
 * where one card fills the screen and there is nothing to spare; from a tablet
 * upright there is room for the open card and a real part of the next one, so the
 * card narrows and the type and cover grow into what is left. Everything else —
 * the single-column stack, the swipe, the height lock — is inherited unchanged.
 */
@media (min-width: 700px) and (max-width: 1199px) {
    /* Scales rather than stepping, because this tier is wide: it starts at a
       tablet held upright and runs to just under the desktop layout. */
    .site-header__menu-popup-heading {
        font-size: clamp(2.5rem, 4vw, 3rem);
    }

    .menu-popup__card {
        padding: 28px 24px;
        gap: var(--space-2);
    }

    /* A closed card is carried by its heading alone, so it takes something closer
       to the desktop size than the phone's 22px. */
    .menu-popup__card--has-cover .menu-popup__card-heading {
        font-size: 28px;
    }

    .menu-popup__card.is-active .menu-popup__card-label {
        font-size: 28px;
        line-height: 32px;
    }

    /* 62% instead of the phone's 98%: a tablet has room for the open card plus a
       clear part of the next one, so it should not be showing one card at a time
       the way a phone does. At 1024px this puts the open card near 550px — enough
       for its cover and its copy — and leaves about 320px of the next card
       visible to swipe to. This is where the width is decided; the Swiper config
       is on slidesPerView: 'auto' precisely so this wins. */
    .menu-popup__card.swiper-slide {
        width: 62%;
    }

    .menu-popup__card.is-active .menu-popup__card-media {
        max-width: min(100%, 360px);
    }

    .menu-popup__card.is-active .menu-popup__card-description {
        font-size: 17px;
        line-height: 26px;
    }
}