/* =====================================================================
   Flame & Smoke - customisation modal + basket drawer
   Uses the existing theme tokens (--theme2 red, --header, --text, --bg,
   --border, --white) and the Barlow Condensed stack.
   ===================================================================== */

body.fsm-lock { overflow: hidden; }

/* ------------------------------------------------------------- MODAL
   Desktop/tablet: centred dialog.
   Mobile: a real bottom sheet - full width, near-full height, grabber,
   sticky header, sticky CTA, and no nested scrolling.
   -------------------------------------------------------------------- */
.fsm { position: fixed; inset: 0; z-index: 1200; display: none; }
.fsm.is-open { display: block; }
.fsm__backdrop { position: absolute; inset: 0; background: rgba(18,16,15,.58); }

.fsm__sheet {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: min(560px, calc(100vw - 32px));
    max-height: min(88vh, 780px);
    display: flex; flex-direction: column;
    background: var(--white);
    border-radius: var(--r-md);
    box-shadow: var(--sh-xl);
    overflow: hidden;
}

/* ---- header (sticky, compact) */
.fsm__grab { display: none; }
.fsm__head {
    position: relative;
    flex: 0 0 auto;
    padding: 20px 20px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--white);
}
.fsm__headrow { display: flex; align-items: flex-start; gap: 12px; }
.fsm__headtext { flex: 1 1 auto; min-width: 0; }
.fsm__title {
    font-family: var(--font-display);
    margin: 0; font-size: 24px; line-height: 1.2; font-weight: 700;
    text-transform: uppercase; letter-spacing: .4px; color: var(--header);
}
.fsm__price { font-family: var(--font-display); margin: 3px 0 0; color: var(--theme2); font-size: 18px; font-weight: 700; }
.fsm__desc { margin: 9px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--text); }
.fsm__close {
    flex: 0 0 auto;
    width: 34px; height: 34px; border: 0; border-radius: 50%;
    background: var(--bg); color: var(--header);
    font-size: 22px; line-height: 1; cursor: pointer;
}
.fsm__close:hover { background: var(--theme2); color: var(--white); }

/* ---- scrolling body (the only scroll area) */
.fsm__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 2px 20px 20px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--n-300) transparent;
}
.fsm__body::-webkit-scrollbar { width: 6px; }
.fsm__body::-webkit-scrollbar-track { background: transparent; }
.fsm__body::-webkit-scrollbar-thumb { background: var(--n-300); border-radius: 3px; }

.fsm__group { padding: 16px 0 4px; border-bottom: 1px solid var(--border); }
.fsm__group:last-child { border-bottom: 0; }
.fsm__grouptitle {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin: 0 0 8px;
    font-size: 14px; font-weight: 700; letter-spacing: 1.6px;
    text-transform: uppercase; color: var(--header);
}
/* live selection counter, e.g. "1/2 selected" */
.fsm__count {
    padding: 3px 9px; border-radius: var(--r-pill);
    background: var(--bg); color: var(--text);
    font-size: 10.5px; font-weight: 700; letter-spacing: .8px;
    text-transform: uppercase; white-space: nowrap;
}
.fsm__count.is-done { background: var(--brand-100); color: var(--theme2); }
.fsm__hint {
    font-size: 11px; letter-spacing: .3px; text-transform: none;
    font-weight: 400; color: var(--text);
}

.fsm__opts { display: flex; flex-direction: column; }
.fsm__opt {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 2px; margin: 0; cursor: pointer;
    border-bottom: 1px solid var(--line);
}
.fsm__opt:last-child { border-bottom: 0; }
.fsm__opt.is-disabled { opacity: .42; cursor: not-allowed; }

/* custom controls - unmistakable checked / unchecked */
.fsm__opt input {
    position: relative;
    width: 22px; height: 22px; flex: 0 0 auto; margin: 0;
    -webkit-appearance: none; appearance: none;
    border: 2px solid var(--n-300); background: var(--white);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.fsm__opt input[type="checkbox"] { border-radius: var(--r-xs); }
.fsm__opt input[type="radio"]    { border-radius: 50%; }
.fsm__opt input:hover:not(:disabled) { border-color: var(--theme2); }
.fsm__opt input:checked { background: var(--theme2); border-color: var(--theme2); }
.fsm__opt input[type="checkbox"]:checked:after {
    content: ""; position: absolute; left: 6px; top: 2px;
    width: 5px; height: 10px;
    border: solid #fff; border-width: 0 2.5px 2.5px 0;
    transform: rotate(43deg);
}
.fsm__opt input[type="radio"]:checked:after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 8px; height: 8px; border-radius: 50%;
    background: #fff; transform: translate(-50%, -50%);
}
.fsm__opt input:focus-visible { outline: 2px solid var(--header); outline-offset: 2px; }
.fsm__opt:has(input[data-kind="included"]:not(:checked)) .fsm__optname {
    color: var(--n-400); text-decoration: line-through;
}
.fsm__optname { flex: 1 1 auto; font-size: 16px; line-height: 1.35; color: var(--header); }
.fsm__optprice { font-size: 14px; font-weight: 700; color: var(--theme2); white-space: nowrap; }

/* ---- sticky footer */
.fsm__foot {
    flex: 0 0 auto;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    background: var(--white);
}
.fsm__need {
    margin: 0 0 8px;
    font-size: 12.5px; font-weight: 700; letter-spacing: .3px;
    color: var(--theme2);
}
.fsm__footrow {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; margin-bottom: 10px;
}
.fsm__qty { display: flex; align-items: center; border: 1px solid var(--border); border-radius: var(--r-sm); }
.fsm__qtybtn {
    width: 40px; height: 40px; border: 0; background: none;
    font-size: 19px; color: var(--header); cursor: pointer;
}
.fsm__qtybtn:hover { background: var(--bg); }
.fsm__qtyval { min-width: 32px; text-align: center; font-size: 17px; font-weight: 700; }
.fsm__total { display: flex; align-items: baseline; gap: 8px; }
.fsm__totallabel { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--text); }
.fsm__totalval { font-family: var(--font-display); font-size: 24px; color: var(--header); font-weight: 700; }
.fsm__add {
    width: 100%; min-height: 52px; border: 0; border-radius: var(--r-sm);
    background: var(--btn-primary); color: var(--white);
    font-size: 15px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; cursor: pointer;
    transition: background .25s ease;
}
.fsm__add:hover:not(:disabled) { background: var(--header); }
.fsm__add:disabled { background: var(--n-300); cursor: not-allowed; }

/* ------------------------------------------------- A MAIN'S OWN PANEL
   Choosing a dish inside a box opens its ingredients in front of the sheet
   rather than appending them below a long option list. It sits above the
   customiser (1200) and below the basket (1250), and it stays inside the
   sheet's DOM so its controls remain part of the form while closed. */
.fsm__modchips {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: 2px 0 4px;
}
.fsm__modchip {
    display: inline-flex; align-items: center; gap: 7px;
    min-height: 38px;
    padding: 0 14px;
    border: 1.5px solid var(--border);
    border-radius: 999px;
    background: var(--white, #fff);
    color: var(--header);
    font: inherit; font-size: 13.5px; font-weight: 600;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease;
}
.fsm__modchip i { font-size: 12px; color: var(--theme2); }
.fsm__modchip:hover { border-color: var(--theme2); color: var(--theme2); }

.fsm__sub {
    position: absolute;
    inset: 0;
    z-index: 20;
    border-radius: inherit;
    overflow: hidden;
}
.fsm__sub[hidden] { display: none; }
.fsm__subback { position: absolute; inset: 0; background: rgba(18, 16, 15, .5); }
.fsm__subpanel {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: min(520px, calc(100% - 24px));
    max-height: calc(100% - 24px);
    display: flex; flex-direction: column;
    background: var(--white, #fff);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(18, 16, 15, .35);
    overflow: hidden;
}
.fsm__subhead {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
}
.fsm__subtitle {
    flex: 1 1 auto; margin: 0;
    font-family: var(--font-display);
    font-size: 19px; line-height: 1.15;
    color: var(--header);
    text-transform: uppercase;
}
.fsm__subclose {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    border: 0; border-radius: 50%;
    background: var(--n-100, #f5f2ec);
    color: var(--header);
    font-size: 20px; line-height: 1;
    cursor: pointer;
}
.fsm__subclose:hover { background: var(--n-200, #e9e4dc); }
.fsm__subbody {
    flex: 1 1 auto;
    padding: 4px 18px 14px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.fsm__subfoot {
    flex: 0 0 auto;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
}
.fsm__subdone {
    width: 100%; min-height: 48px;
    border: 0; border-radius: var(--r-sm);
    background: var(--btn-primary); color: var(--white);
    font-size: 15px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; cursor: pointer;
    transition: background .25s ease;
}
.fsm__subdone:hover { background: var(--header); }

@media (max-width: 575px) {
    .fsm__subpanel {
        left: 0; right: 0; bottom: 0; top: auto;
        transform: none;
        width: 100%;
        max-height: 100%;
        border-radius: 16px 16px 0 0;
    }
    .fsm__subhead, .fsm__subbody, .fsm__subfoot { padding-left: 14px; padding-right: 14px; }
}

/* --------------------------------------------------------- STEPPED FLOW
   For bundles that ask several questions. One at a time, with the progress
   stated in words as well as drawn - a bar alone does not tell you how many
   are left. */
.fsm__progress {
    height: 4px;
    margin: 2px 0 10px;
    border-radius: 4px;
    background: var(--n-200, #e6e1d9);
    overflow: hidden;
}
.fsm__progressfill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 4px;
    background: var(--theme2);
    transition: width .3s ease;
}
.fsm__steplabel {
    margin: 0 0 14px;
    font-family: var(--font-ui, inherit);
    font-size: 12px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--text);
}

/* Back sits beside the primary action rather than above it, so the thumb
   does not have to travel and the two never swap places between steps. */
.fsm__acts { display: flex; gap: 10px; }
.fsm__acts > *:not([hidden]) { flex: 1 1 auto; }
.fsm__back {
    flex: 0 0 auto !important;
    min-width: 96px; min-height: 52px;
    padding: 0 18px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--header);
    font-size: 15px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; cursor: pointer;
    transition: border-color .25s ease, background .25s ease;
}
.fsm__back:hover { border-color: var(--header); background: var(--n-100, #f5f2ec); }
.fsm__next {
    min-height: 52px; border: 0; border-radius: var(--r-sm);
    background: var(--btn-primary); color: var(--white);
    font-size: 15px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; cursor: pointer;
    transition: background .25s ease;
}
.fsm__next:hover:not(:disabled) { background: var(--header); }
.fsm__next:disabled { background: var(--n-300); cursor: not-allowed; }
/* unanswered step: looks disabled, but a press leads to the open question */
.fsm__next.is-blocked,
.fsm__next.is-blocked:hover { background: var(--n-300); }

/* a chosen dish whose panel still has a question to answer */
.fsm__modchip.is-wanted { border-color: var(--theme2); color: var(--theme2); }

/* ------------------------------------------------------------ BASKET */
.fsb { position: fixed; inset: 0; z-index: 1250; display: none; }
.fsb.is-open { display: block; }
.fsb__backdrop { position: absolute; inset: 0; background: rgba(18,16,15,.55); }
.fsb__panel {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: min(420px, 100vw);
    display: flex;
    flex-direction: column;
    background: var(--white);
    box-shadow: var(--sh-xl);
}
.fsb__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 22px 24px; border-bottom: 1px solid var(--border);
}
.fsb__head h2 {
    margin: 0; font-size: 20px; text-transform: uppercase;
    letter-spacing: 2px; color: var(--header);
}
.fsb__close {
    width: 34px; height: 34px; border: 0; background: var(--bg);
    font-size: 24px; line-height: 1; cursor: pointer; color: var(--header);
}
.fsb__close:hover { background: var(--theme2); color: var(--white); }

.fsb__list { flex: 1 1 auto; overflow-y: auto; padding: 8px 24px 20px; }
.fsb__empty { padding: 40px 0; text-align: center; color: var(--text); font-size: 17px; }
.fsb__item { padding: 18px 0; border-bottom: 1px solid var(--border); }
.fsb__itemtop { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.fsb__name { font-family: var(--font-display); margin: 0; font-size: 17px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--header); }
.fsb__price { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--theme2); white-space: nowrap; }
.fsb__notes { list-style: none; padding: 0; margin: 8px 0 0; }
.fsb__notes li {
    position: relative; padding-left: 14px; font-size: 15px;
    line-height: 1.55; color: var(--text);
}
.fsb__notes li:before {
    content: ""; position: absolute; left: 0; top: 9px;
    width: 5px; height: 5px; border-radius: 50%; background: var(--theme2);
}
.fsb__acts { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.fsb__qty { display: flex; align-items: center; border: 1px solid var(--border); }
.fsb__qbtn { width: 32px; height: 34px; border: 0; background: none; cursor: pointer; font-size: 17px; }
.fsb__qbtn:hover { background: var(--bg); }
.fsb__qty span { min-width: 28px; text-align: center; font-weight: 700; }
.fsb__link {
    border: 0; background: none; padding: 0; cursor: pointer;
    font-size: 14px; font-weight: 700; letter-spacing: 0.6px;
    text-transform: uppercase; color: var(--header);
    border-bottom: 1px solid currentColor;
}
.fsb__link:hover { color: var(--theme2); }
.fsb__link--rm { color: var(--text); }

.fsb__foot { flex: 0 0 auto; padding: 18px 24px; border-top: 1px solid var(--border); }

/* Quiet and right-aligned, well away from Go to Checkout - a destructive
   control should not sit under the thumb that is reaching for the green one. */
.fsb__clearbar { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.fsb__clearbar[hidden] { display: none; }
.fsb__clear {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 2px;
    border: 0; background: none;
    font: inherit; font-size: 12.5px; font-weight: 700;
    letter-spacing: .6px; text-transform: uppercase;
    color: var(--text);
    cursor: pointer;
    transition: color .2s ease;
}
.fsb__clear i { font-size: 12px; }
.fsb__clear:hover { color: var(--theme2); }

.fsb__undo {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-bottom: 12px;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--header);
    border-radius: 10px;
    background: var(--n-50, #faf8f5);
    font-size: 13.5px;
    color: var(--header);
}
.fsb__undobtn {
    flex: 0 0 auto;
    padding: 6px 2px;
    border: 0; background: none;
    font: inherit; font-size: 13px; font-weight: 700;
    letter-spacing: .4px; text-transform: uppercase;
    color: var(--theme2);
    border-bottom: 1px solid currentColor;
    cursor: pointer;
}
.fsb__undobtn:hover { color: var(--header); }
.fsb__total {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 14px;
}
.fsb__total span { font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text); }
.fsb__total strong { font-family: var(--font-display); font-size: 26px; color: var(--header); }
.fsb__checkout {
    width: 100%; min-height: 52px; border: 0;
    background: var(--btn-primary); color: var(--white);
    font-size: 15px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; cursor: pointer;
}
.fsb__checkout:hover:not(:disabled) { background: var(--header); }
.fsb__checkout:disabled { background: var(--n-300); cursor: not-allowed; }

/* basket button in the header */
.fs-basket-open { position: relative; }
.fs-basket-count {
    position: absolute; top: -7px; right: -10px;
    min-width: 19px; height: 19px; padding: 0 5px;
    border-radius: var(--r-md); background: var(--theme2); color: var(--white);
    font-size: 11px; font-weight: 700; line-height: 19px; text-align: center;
}

/* ------------------------------------------------- MOBILE: bottom sheet */
@media (max-width: 767px) {
    /* ---------- true bottom sheet ---------- */
    .fsm__sheet {
        top: auto; bottom: 0; left: 0;
        transform: none;
        width: 100%;
        max-width: 100%;
        /* grow with the content, never past 94dvh - a short product like a
           milkshake should not open a full-height sheet with a void in it */
        height: auto;
        max-height: 94dvh;
        border-radius: var(--r-lg) var(--r-lg) 0 0;
        box-shadow: 0 -12px 40px rgba(28,25,23,.22);
    }
    .fsm__grab {
        display: block;
        width: 38px; height: 4px; margin: 8px auto 6px;
        border-radius: 2px; background: var(--n-300);
    }
    .fsm__head { padding: 0 16px 12px; }
    .fsm__title { font-size: 19px; }
    .fsm__price { font-size: 17px; margin-top: 2px; }
    .fsm__desc {
        margin-top: 7px; font-size: 13.5px; line-height: 1.45;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .fsm__close { width: 32px; height: 32px; font-size: 20px; }

    /* body is the only scroller; padding keeps the CTA off the last row */
    .fsm__body {
        padding: 0 16px 14px;
        scrollbar-width: none;
    }
    .fsm__body::-webkit-scrollbar { display: none; }

    .fsm__group { padding: 14px 0 2px; }
    .fsm__grouptitle { font-size: 13px; letter-spacing: 1.3px; margin-bottom: 6px; }
    .fsm__count { font-size: 10px; padding: 3px 8px; }
    .fsm__opt { padding: 11px 2px; gap: 11px; }      /* 44px+ tap row */
    .fsm__optname { font-size: 15.5px; }
    .fsm__optprice { font-size: 13.5px; }

    .fsm__foot {
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        box-shadow: 0 -6px 18px rgba(28,25,23,.07);
    }
    .fsm__need { font-size: 12px; margin-bottom: 6px; }
    .fsm__footrow { margin-bottom: 8px; gap: 10px; }
    .fsm__qtybtn { width: 38px; height: 38px; }
    .fsm__totalval { font-size: 20px; }
    .fsm__add { min-height: 50px; font-size: 14.5px; }

    /* ---------- basket ---------- */
    .fsb__panel { width: 100vw; }
    .fsb__head { padding: 16px 18px; }
    .fsb__list { padding: 8px 18px 14px; scrollbar-width: none; }
    .fsb__list::-webkit-scrollbar { display: none; }
    .fsb__foot { padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
    .fsm__add, .fsb__checkout { transition: none; }
}

/* ---------------------------------------------------------------------
   Selectable option cards - the required-choice pattern used by every
   product. Whole row is the hit area; selection is a filled state, not a
   small circle you have to squint at.
   --------------------------------------------------------------------- */
.fsm__opts--cards { gap: 8px; }
.fsm__card {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 12px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    background: var(--white);
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.fsm__card:last-child { border-bottom: 1.5px solid var(--border); }
.fsm__card:hover { border-color: var(--n-400); }
.fsm__card.is-selected {
    border-color: var(--theme2);
    background: var(--brand-50);
    box-shadow: inset 0 0 0 1px var(--brand-500);
}
.fsm__card.is-disabled { opacity: .45; cursor: not-allowed; }

/* A choice's own photo - the wing and tender flavours have one each.
   Square and cropped so a column of them lines up whatever shape the
   shot is, and dimmed until picked so the chosen one reads first. */
.fsm__cardpic {
    flex: 0 0 auto;
    width: 54px; height: 54px;
    border-radius: var(--r-sm, 8px);
    /* the drinks are shot at 1:2 - cropping a thumbnail out of the middle
       of a milkshake shows nothing but milkshake, so the whole glass is
       fitted instead, on the white the photography is shot against */
    object-fit: contain;
    background: #fff;
    opacity: .88;
    transition: opacity .18s ease, transform .18s ease;
}
.fsm__card:hover .fsm__cardpic { opacity: 1; }
.fsm__card.is-selected .fsm__cardpic { opacity: 1; transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
    .fsm__cardpic { transition: none; }
    .fsm__card.is-selected .fsm__cardpic { transform: none; }
}
@media (max-width: 480px) {
    .fsm__cardpic { width: 46px; height: 46px; }
}
.fsm__cardmain { flex: 1 1 auto; min-width: 0; }
.fsm__cardname {
    display: block;
    font-size: 16px; line-height: 1.3; color: var(--header); font-weight: 600;
}
.fsm__card.is-selected .fsm__cardname { color: var(--theme2); }
/* A described option is two or three lines tall, so its control and price sit
   with the name rather than floating in the middle of the block. */
.fsm__card--desc { align-items: flex-start; }
.fsm__card--desc .fsm__cardprice { padding-top: 2px; }

/* An option's own description. Not clamped - these are one or two lines and
   they are what the choice is actually made on. */
.fsm__carddesc {
    display: block;
    margin-top: 3px;
    font-family: var(--font-ui, inherit);
    font-size: 13px; line-height: 1.5;
    color: var(--text);
}
/* "Choose 2": how many of this option are in ONE item (two of the same main). Only on a picked card, under its name -
   a small red pill, so it never reads as the whole-item quantity at the foot of the sheet. */
.fsm__optqty { display: none; align-items: center; width: max-content; margin-top: 8px; border: 1.5px solid var(--theme2); border-radius: var(--r-pill); background: transparent; }
.fsm__card.is-selected .fsm__optqty { display: flex; }
.fsm__optqtybtn {
    width: 36px; height: 36px; border: 0; border-radius: var(--r-pill); background: none; padding: 0;
    font-size: 20px; line-height: 1; font-weight: 700; color: var(--theme2); cursor: pointer;
}
.fsm__optqtybtn:hover { background: var(--brand-50); }
.fsm__optqtybtn:disabled { color: var(--n-300); cursor: not-allowed; background: none; }
.fsm__optqtybtn:focus-visible { outline: none; box-shadow: var(--ring); }
.fsm__optqtyval { min-width: 22px; text-align: center; font-size: 16px; font-weight: 800; color: var(--header); }
.fsm__cardprice { flex: 0 0 auto; text-align: right; line-height: 1.2; }
.fsm__cardprice strong { display: block; font-family: var(--font-display); font-size: 17px; color: var(--header); font-weight: 700; }
.fsm__card.is-selected .fsm__cardprice strong { color: var(--theme2); }
.fsm__carddelta { display: block; margin-top: 1px; font-size: 12px; color: var(--text); }
/* "Included" is a statement, not a number - it should not shout like a price */
.fsm__cardprice strong.fsm__free {
    font-size: 13px; font-weight: 600;
    color: var(--text); text-transform: none;
}

/* ------------------------------------------------- per-option modifiers
   The sections that belong to whichever main was chosen. They are set slightly
   apart so it is obvious they answer the choice above rather than the item as
   a whole - the kid's meal changes them completely between burgers. */
.fsm__optmods:not(:empty) {
    margin-top: 4px;
    padding-left: 14px;
    border-left: 2px solid var(--brand-200, rgba(240, 78, 62, .25));
}

/* ---------------------------------------------------------------- dropdown
   The menu file's "(DROPDOWN MODIFIER)". Native <select>, so the phone gives
   its own picker and the keyboard behaviour is the one people already know;
   only the closed state is styled. The chevron is a background image rather
   than a pseudo-element because a select cannot host one. */
.fsm__grouphelp {
    margin: -2px 0 8px;
    font-family: var(--font-ui, inherit);
    font-size: 13px; line-height: 1.45;
    color: var(--text);
}
.fsm__select {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 0 40px 0 14px;
    border: 1px solid var(--line, #e5e0d8);
    border-radius: 12px;
    background-color: var(--surface, #fff);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    color: var(--header);
    font-family: inherit;
    font-size: 15.5px; font-weight: 600;
    line-height: 46px;
    cursor: pointer;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.fsm__select:hover { border-color: var(--line-strong, #cfc8bd); }
.fsm__select:focus-visible {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(240, 78, 62, .2);
}
/* the placeholder row reads as a prompt, the chosen value as an answer */
.fsm__select:invalid, .fsm__select option[value=""] { color: var(--text); font-weight: 500; }

/* An unanswered required group, after the customer has tried to add. The ring
   is on the section rather than on each option, so it reads as "this question"
   rather than "these five wrong answers". */
.fsm__group--req.is-wanted {
    border-radius: 12px;
    box-shadow: 0 0 0 2px var(--brand-500);
    padding: 12px;
    margin-inline: -12px;
    animation: fsmWanted .45s ease-out;
}
@keyframes fsmWanted {
    from { box-shadow: 0 0 0 0 var(--brand-500); }
    to   { box-shadow: 0 0 0 2px var(--brand-500); }
}
@media (prefers-reduced-motion: reduce) {
    .fsm__group--req.is-wanted { animation: none; }
}

/* Chilli marks. The menu prints one chilli beside Algerian and two beside
   Buldak and Hot Honey; the count is the item's own, not a guess. The label
   is on the wrapper so a screen reader says "Spicy" once rather than reading
   two decorative icons. */
.fsm__heat {
    display: inline-flex;
    gap: 1px;
    margin-left: 7px;
    vertical-align: baseline;
    color: var(--brand-500);
    font-size: .8em;
}
.fsm__card.is-selected .fsm__heat { color: var(--theme2); }

/* the control itself, reused inside cards */
.fsm__card input {
    position: relative;
    width: 20px; height: 20px; flex: 0 0 auto; margin: 0;
    -webkit-appearance: none; appearance: none;
    border: 2px solid var(--n-300); background: var(--white); cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.fsm__card input[type="checkbox"] { border-radius: 5px; }
.fsm__card input[type="radio"]    { border-radius: 50%; }
.fsm__card input:checked { background: var(--theme2); border-color: var(--theme2); }
.fsm__card input[type="checkbox"]:checked:after {
    content: ""; position: absolute; left: 5px; top: 1px;
    width: 5px; height: 10px; border: solid #fff; border-width: 0 2.5px 2.5px 0;
    transform: rotate(43deg);
}
.fsm__card input[type="radio"]:checked:after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 8px; height: 8px; border-radius: 50%; background: #fff;
    transform: translate(-50%, -50%);
}
.fsm__card input:focus-visible { outline: none; box-shadow: var(--ring); }

/* ---- tighter vertical rhythm throughout the sheet ---- */
.fsm__head { padding: 16px 18px 12px; }
.fsm__title { font-size: 22px; }
.fsm__price { font-size: 17px; margin-top: 2px; }
.fsm__desc { margin-top: 6px; font-size: 14px; }
.fsm__group { padding: 14px 0 2px; }
.fsm__grouptitle { margin-bottom: 8px; }
.fsm__need { color: var(--theme2); }

@media (max-width: 767px) {
    .fsm__head { padding: 0 14px 10px; }
    .fsm__title { font-size: 18px; }
    .fsm__body { padding: 0 14px 12px; }
    .fsm__group { padding: 12px 0 2px; }
    .fsm__card { padding: 11px 12px; gap: 10px; }
    .fsm__cardname { font-size: 15.5px; }
    .fsm__cardprice strong { font-size: 15.5px; }
    .fsm__foot { padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
}

/* ---------------------------------------------------------------------
   Ingredient + extra cards.
   An ingredient ships ON, so the state worth showing is REMOVED.
   An extra ships OFF and costs money, so the state worth showing is ADDED.
   --------------------------------------------------------------------- */
.fsm__cardtag {
    display: none;
    flex: 0 0 auto;
    padding: 3px 8px;
    border-radius: var(--r-pill);
    background: var(--n-100);
    color: var(--n-500);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
}
.fsm__card--ing.is-removed {
    border-color: var(--n-200);
    background: var(--n-25);
    box-shadow: none;
}
.fsm__card--ing.is-removed .fsm__cardname {
    color: var(--n-400);
    text-decoration: line-through;
}
.fsm__card--ing.is-removed .fsm__cardtag { display: inline-block; }

.fsm__card--extra.is-selected {
    border-color: var(--theme2);
    background: var(--brand-50);
    box-shadow: inset 0 0 0 1px var(--brand-500);
}
.fsm__card--extra.is-selected .fsm__cardname,
.fsm__card--extra.is-selected .fsm__cardprice strong { color: var(--theme2); }
.fsm__card--extra .fsm__cardprice strong { font-size: 15px; color: var(--text); font-weight: 700; }

/* the old row style is no longer produced - drop its leftover rules */
.fsm__opt { display: none; }

/* ==========================================================================
   ENTRANCE MOTION
   Additive only. The open/close mechanism is unchanged - fs-menu.js still
   toggles .is-open and nothing else - so these replay each time the class
   lands and cost nothing on close. Durations and easing are the same tokens
   the rest of the site uses, so the sheet feels like part of the same
   product rather than a bolted-on dialog.
   ========================================================================== */
@keyframes fsm-fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes fsm-pop    { from { opacity: 0; transform: translate(-50%, -50%) scale(.965); }
                        to   { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes fsm-sheet  { from { transform: translateY(100%); }
                        to   { transform: translateY(0); } }
@keyframes fsb-slide  { from { transform: translateX(100%); }
                        to   { transform: translateX(0); } }

.fsm.is-open .fsm__backdrop,
.fsb.is-open .fsb__backdrop { animation: fsm-fade .22s cubic-bezier(.4, 0, .2, 1) both; }

.fsm.is-open .fsm__sheet  { animation: fsm-pop   .26s cubic-bezier(.22, .61, .36, 1) both; }
.fsb.is-open .fsb__panel  { animation: fsb-slide .30s cubic-bezier(.22, .61, .36, 1) both; }

/* the mobile bottom sheet rises instead of scaling - a pop reads wrong on a
   surface that is anchored to the bottom edge */
@media (max-width: 767px) {
    .fsm.is-open .fsm__sheet { animation: fsm-sheet .30s cubic-bezier(.22, .61, .36, 1) both; }
}

@media (prefers-reduced-motion: reduce) {
    .fsm.is-open .fsm__backdrop, .fsb.is-open .fsb__backdrop,
    .fsm.is-open .fsm__sheet,    .fsb.is-open .fsb__panel { animation: none; }
}

/* =============================================================================
   SOLD OUT
   Availability is one record shared with the kiosk and the cashier
   (conf/stock.php); menu.php marks the card, assets/js/fs-stock.js keeps it
   current. The card stays where it is - dimmed, badged, and inert.
   ========================================================================== */
.menu-card__media { position: relative; }
.menu-card__soldout {
    display: none; position: absolute; top: 12px; left: 12px; z-index: 3;
    padding: 8px 14px; border-radius: 999px;
    background: #1c1c1c; color: #fff;
    font: 700 .85rem/1 'Barlow Condensed', 'Inter', sans-serif; letter-spacing: .14em; text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.menu-card.is-soldout .menu-card__soldout { display: inline-block; }
.menu-card.is-soldout { cursor: default; }
.menu-card.is-soldout .menu-card__media img,
.menu-card.is-soldout .menu-card__media i { filter: grayscale(1); opacity: .5; }
.menu-card.is-soldout .menu-card__name,
.menu-card.is-soldout .menu-card__desc,
.menu-card.is-soldout .menu-card__price { opacity: .55; }
/* important: the gold ranges style their button at a higher specificity */
.menu-card.is-soldout .menu-card__btn {
    background: #8c8c8c !important; border-color: #8c8c8c !important; color: #fff !important;
    box-shadow: none !important; cursor: not-allowed; pointer-events: none;
}

/* =============================================================================
   SOCIAL PERK - promotional price component (automatic product prices, conf/promos.php)
   Display only: every figure is the server's promo data. The final state is the default; the reveal
   (and one sheen pass) plays once, and never with reduced motion.
   ============================================================================= */
.fs-perk {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px 3px 6px; border-radius: 6px;
    background: linear-gradient(135deg, #b81e1e 0%, #e0442a 65%, #ee6a34 100%);
    box-shadow: 0 1px 0 rgba(255,255,255,.22) inset;
    color: #fff; font-family: var(--font-ui, sans-serif); font-size: 9.5px; font-weight: 800;
    letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; white-space: nowrap;
}
.fs-perk__spark { width: 9px; height: 9px; flex: none; fill: #ffd27a; }
.fs-promo__save { font-family: var(--font-ui, sans-serif); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #ee6a34; white-space: nowrap; }
.fs-promo__now { color: #ff5a3c; font-weight: 700; }
.fs-promo__was-wrap { font-family: var(--font-ui, sans-serif); font-size: 13px; font-weight: 600; color: var(--text, #b9b0a8); opacity: .8; white-space: nowrap; }
.fs-promo__was { position: relative; display: inline-block; font-weight: 700; }
.fs-promo__was::after {
    content: ''; position: absolute; left: -2px; right: -2px; top: 52%; height: 1.5px; border-radius: 2px;
    background: #ee6a34; transform: rotate(-10deg) scaleX(1); transform-origin: left center;
}

@keyframes fsPromoIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes fsNowIn   { from { opacity: 0; transform: translateY(3px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes fsStrike  { from { transform: rotate(-10deg) scaleX(0); } to { transform: rotate(-10deg) scaleX(1); } }
@keyframes fsSheen   { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(260%) skewX(-18deg); } }

/* ---- menu / home card: ONE component - a warm panel with an ember edge, eyebrow over price line */
.fs-promo {
    position: relative; overflow: hidden; isolation: isolate;
    display: inline-flex; flex-direction: column; gap: 5px;
    padding: 7px 12px 8px 11px; border-radius: 10px;
    background: linear-gradient(120deg, rgba(224,68,42,.16) 0%, rgba(224,68,42,.05) 70%, rgba(255,210,122,.06) 100%);
    box-shadow: inset 3px 0 0 #e0442a, inset 0 1px 0 rgba(255,255,255,.05);
}
.fs-promo__eyebrow { display: flex; align-items: center; gap: 8px; }
.fs-promo__row { display: flex; align-items: baseline; gap: 9px; line-height: 1; }
.fs-promo__row .fs-promo__now { font-size: 1.12em; }
.fs-promo::after {      /* one sheen pass, only when revealed */
    content: ''; position: absolute; inset: 0 auto 0 0; width: 40%; z-index: -1; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,230,190,.16), transparent);
    transform: translateX(-120%) skewX(-18deg);
}
.fs-promo.is-armed > *, .fs-promo.is-armed .fs-promo__now { opacity: 0; }
.fs-promo.is-armed .fs-promo__was::after { transform: rotate(-10deg) scaleX(0); }
.fs-promo.is-armed { opacity: .001; }
.fs-promo.is-armed.is-in { animation: fsPromoIn .24s ease-out both; }
.fs-promo.is-armed.is-in > .fs-promo__eyebrow { animation: fsPromoIn .22s .06s ease-out both; }
.fs-promo.is-armed.is-in > .fs-promo__row { opacity: 1; }
.fs-promo.is-armed.is-in .fs-promo__now { animation: fsNowIn .26s .12s cubic-bezier(.2,.8,.3,1) both; }
.fs-promo.is-armed.is-in .fs-promo__was::after { animation: fsStrike .24s .26s ease-out both; }
.fs-promo.is-armed.is-in::after { animation: fsSheen .7s .42s ease-in-out both; }

/* ---- product popup: a compact offer panel */
.fsm__promo {
    position: relative; overflow: hidden; isolation: isolate;
    margin: 10px 0 0; padding: 10px 14px 11px 14px; border-radius: 12px;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(255,210,122,.10), transparent 55%),
        linear-gradient(120deg, rgba(224,68,42,.20) 0%, rgba(224,68,42,.07) 60%, rgba(224,68,42,.04) 100%);
    box-shadow: inset 0 0 0 1px rgba(238,106,52,.28), inset 0 1px 0 rgba(255,255,255,.06);
    animation: fsPromoIn .22s .08s ease-out both;
}
.fsm__promo::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(#ee6a34, #b81e1e); }
.fsm__promo::after {
    content: ''; position: absolute; inset: 0 auto 0 0; width: 35%; z-index: -1; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,230,190,.18), transparent);
    animation: fsSheen .75s .5s ease-in-out both;
}
.fsm__promo-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fsm__promo-prices { display: flex; align-items: flex-end; gap: 12px; margin-top: 7px; line-height: 1; }
.fsm__promo-now { display: inline-flex; flex-direction: column; gap: 3px; }
.fsm__promo-now small { font-family: var(--font-ui, sans-serif); font-size: 9.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--text); opacity: .7; }
.fsm__promo-now .fs-promo__now { font-family: var(--font-display); font-size: 32px; animation: fsNowIn .28s .16s cubic-bezier(.2,.8,.3,1) both; }
.fsm__promo .fs-promo__was-wrap { font-size: 12.5px; padding-bottom: 3px; }
.fsm__promo .fs-promo__was::after { animation: fsStrike .24s .3s ease-out both; }
.fsm__promo .fs-promo__save { animation: fsPromoIn .2s .38s ease-out both; }

/* ---- popup footer summary: compact, above quantity / total */
.fsm__promoline { display: flex; flex-direction: column; gap: 3px; margin: 2px 0 10px; font-family: var(--font-ui, sans-serif); font-size: 12px; line-height: 1.3; color: var(--text); }
.fsm__promoline-row { display: flex; align-items: center; gap: 7px; }
.fsm__promoline-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #ee6a34; }
.fsm__promoline-tag .fs-perk__spark { width: 8px; height: 8px; }
.fsm__promoline .fs-promo__was { font-size: 12px; font-weight: 600; color: var(--ink-muted, #9a9089); }
.fsm__promoline b { font-weight: 800; }
.fsm__promoline-x { opacity: .75; }
.fsm__promoline-row.fsm__promoline-x { padding-left: 1px; }

/* ---- basket line: compact */
.fsb__promo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 5px; font-size: 12.5px; line-height: 1.3; color: var(--text); }
.fsb__promo .fs-perk { font-size: 8.5px; padding: 2px 6px 2px 5px; }
.fsb__promo .fs-promo__was { font-size: 12px; color: var(--ink-muted, #9a9089); }

.fs-promo { box-sizing: border-box; max-width: 100%; }
.fs-promo__eyebrow { flex-wrap: wrap; row-gap: 3px; }
@media (max-width: 1199px) {     /* phones, tablets and laptops (narrow 4-up cards): the compact promo header keeps badge + saving on one line */
    .fs-promo { padding: 6px 9px 7px 9px; gap: 4px; }
    .fs-promo__eyebrow { gap: 6px; }
    .fs-promo .fs-perk { font-size: 9px; letter-spacing: .04em; padding: 3px 6px 3px 5px; gap: 3px; }
    .fs-promo .fs-perk__spark { width: 8px; height: 8px; }
    .fs-promo .fs-promo__save { font-size: 9px; letter-spacing: .03em; }
    .fs-promo__row { gap: 7px; }
}
@media (max-width: 420px) {
    .fsm__promo { padding: 9px 12px 10px; }
    .fsm__promo-now .fs-promo__now { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
    .fs-promo, .fs-promo *, .fs-promo::after, .fs-promo .fs-promo__was::after,
    .fsm__promo, .fsm__promo *, .fsm__promo::after, .fsm__promo .fs-promo__was::after { animation: none !important; transition: none !important; }
    .fs-promo.is-armed, .fs-promo.is-armed > *, .fs-promo.is-armed .fs-promo__now { opacity: 1; }
    .fs-promo.is-armed .fs-promo__was::after { transform: rotate(-10deg) scaleX(1); }
    .fs-promo::after, .fsm__promo::after { display: none; }
}

/* ---- basket drawer: voucher code (same state as checkout - localStorage fs_voucher_v1, checked by voucher.php) ---- */
.fsb__voucher { margin: 0 0 12px; }
.fsb__vform { display: flex; gap: 8px; }
.fsb__vinput {
    flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 12px; border-radius: 10px;
    border: 1px solid var(--border, rgba(127,127,127,.35)); background: transparent; color: var(--header, inherit);
    font-family: var(--font-ui, sans-serif); font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.fsb__vinput::placeholder { letter-spacing: 0; text-transform: none; font-weight: 500; opacity: .6; }
.fsb__vinput:focus { outline: none; border-color: var(--theme2, #d12525); box-shadow: 0 0 0 3px rgba(209,37,37,.15); }
.fsb__vapply {
    flex: none; height: 40px; padding: 0 16px; border: 0; border-radius: 10px; cursor: pointer;
    background: var(--btn-primary, #d93a2a); color: #fff; font-family: var(--font-ui, sans-serif); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.fsb__vapply:disabled { opacity: .65; cursor: progress; }
.fsb__vapplied { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(31,138,76,.10); border: 1px solid rgba(31,138,76,.35); }
.fsb__vtick { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; background: #1f8a4c; color: #fff; font-size: 10px; }
.fsb__vtext { flex: 1 1 auto; min-width: 0; font-family: var(--font-ui, sans-serif); font-size: 13px; line-height: 1.3; color: var(--text); }
.fsb__vtext strong { letter-spacing: .06em; color: var(--header, inherit); }
.fsb__vtext small { display: block; font-size: 11.5px; opacity: .8; }
.fsb__vremove { flex: none; border: 0; background: none; padding: 4px 2px; cursor: pointer; font-family: var(--font-ui, sans-serif); font-size: 12px; font-weight: 700; color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.fsb__vmsg { margin: 6px 0 0; font-family: var(--font-ui, sans-serif); font-size: 12.5px; line-height: 1.4; color: var(--text); }
.fsb__vmsg.is-bad { color: #d12525; font-weight: 600; }
.fsb__sums { margin: 0 0 6px; font-family: var(--font-ui, sans-serif); font-size: 13.5px; color: var(--text); }
.fsb__sums > div { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }
.fsb__disc { color: #1f8a4c; font-weight: 700; }

/* basket drawer voucher entry - the same designed row as checkout (slightly smaller) */
.fsb__vtoggle {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px;
    border: 1px dashed rgba(209,37,37,.45); border-radius: 11px; cursor: pointer; text-align: left;
    background: linear-gradient(120deg, rgba(209,37,37,.08), rgba(209,37,37,.02));
    color: var(--text); text-decoration: none; font-weight: 400;
    transition: border-color .18s ease;
}
.fsb__vtoggle:hover { border-style: solid; border-color: rgba(209,37,37,.65); }
.fsb__vtoggle:hover .fsb__vchev { transform: translateX(2px); }
.fsb__vico { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px; background: rgba(209,37,37,.14); color: var(--theme2, #d12525); font-size: 13px; }
.fsb__vlbl { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; font-family: var(--font-ui, sans-serif); }
.fsb__vlbl strong { font-size: 13px; font-weight: 700; color: var(--header, inherit); }
.fsb__vlbl small { font-size: 11.5px; opacity: .75; }
.fsb__vchev { flex: none; font-size: 11px; color: var(--theme2, #d12525); transition: transform .18s ease; }
@keyframes fsbVoucherIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.fsb__vform:not([hidden]), .fsb__vapplied:not([hidden]) { animation: fsbVoucherIn .2s ease-out both; }
@media (prefers-reduced-motion: reduce) { .fsb__vform, .fsb__vapplied, .fsb__vchev { animation: none !important; transition: none !important; } }

/* "Choose 2": each main customised on its own (fs-menu.js openDish / paintDishes). One compact row per dish under the
   options - "1. Fire-Kissed Grill Burger · Hot · No Mayo" with Edit - and the dish's own customiser has Cancel beside Done. */
.fsm__dishes { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.fsm__dishes[hidden] { display: none; }
.fsm__dish { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); background: transparent; }
.fsm__dish.is-wanted { border-color: var(--theme2); }
.fsm__dishtext { flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 1.35; color: var(--header); overflow-wrap: anywhere; }
.fsm__dishbits { color: var(--text); }
.fsm__dishneed { color: var(--theme2); font-weight: 700; }
.fsm__dishedit { flex: 0 0 auto; min-width: 44px; min-height: 40px; padding: 0 14px; border: 1.5px solid var(--theme2); border-radius: var(--r-pill); background: transparent; color: var(--theme2); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.fsm__dishedit:hover { background: var(--brand-50); }
.fsm__dishedit:focus-visible { outline: none; box-shadow: var(--ring); }
.fsm__dishof { font-size: 13px; letter-spacing: .5px; color: var(--theme2); white-space: nowrap; }
.fsm__dishfoot { display: flex; gap: 10px; }
.fsm__dishfoot .fsm__subdone { flex: 1 1 auto; width: auto; }
.fsm__subdone.is-blocked { opacity: .55; }
.fsm__dishcancel { flex: 0 0 auto; min-height: 48px; padding: 0 18px; border: 1.5px solid var(--border); border-radius: var(--r-sm); background: transparent; color: var(--header); font-size: 15px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; }
.fsm__dishcancel:hover { border-color: var(--header); }