/* =====================================================================
   SpiceLevels.css — T348 per-item spice selector (Mild / Medium / Spicy)
   and the small read-only chip that shows the chosen level.

   ⚠ OWN .ivspice-* PREFIX ON PURPOSE — do NOT fold these rules into
   FoodOrder.css / GalleryLux.css / style.css and do NOT extend .fo-* or
   .rgal-*. Under owner decision (b) this component renders on THREE pages
   (Food Order, Gallery dish modal, Menu feature cards) whose existing class
   families already overlap, so a leak in either direction is a real risk:
   a .fo-* rule silently restyling a gallery card, or vice versa. Everything
   here is scoped under .ivspice / .ivspice-chip and nothing else.

   ONE component, three density variants:
     .ivspice--card   Food Order dish card   — full 3-segment pill
     .ivspice--modal  Gallery dish modal     — full 3-segment pill
     .ivspice--menu   Menu feature cards     — compact, floats on the photo
   ===================================================================== */

:root {
    --ivspice-gold: #c9a44c;
    --ivspice-ink: #1f1f1f;
}

/* =====================================================================
   T358a — .ivic-*: the SHARED icon-with-accessible-name component
   (markup: Views\Shared\_IconWithLabel.cshtml).

   ⚠ Why it lives in THIS file: _Layout.cshtml links SpiceLevels.css
   unconditionally on every page (a plain <link>, not a bundle), so these rules
   are available everywhere the component can render — including MyOrders — with
   no new asset, no BundleConfig entry and no _Layout change. Phase B (T358b)
   renders the dietary-exclusion icons through the same component and will reuse
   these same rules.

   ⚠ Deliberately NOT prefixed .ivspice-*: this component is not spice-specific.
   Do not fold it into .fo-* / .rgal-* / .ivm-* either — same leak risk that gave
   .ivspice-* its own prefix in the first place.
   ===================================================================== */
.ivic {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    vertical-align: middle;
}

/* Size comes from the width/height ATTRIBUTES the partial emits (so the box is
   reserved before the image loads — no layout shift). Only override it in a
   media query where a context genuinely needs to shrink. */
.ivic-img {
    display: block;
    object-fit: contain;
    flex: 0 0 auto;
}

/* visible label variant */
.ivic-lbl {
    line-height: 1;
    white-space: nowrap;
}

/* visually-hidden label: removed from the page visually, still announced. */
.ivic-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---------- base pill ---------- */
.ivspice {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 0;
}

.ivspice-lbl {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #8a6d23;
    margin-right: 2px;
}

.ivspice-opt {
    /* ≥44px tap target on every variant/width (WCAG target size). */
    min-height: 44px;
    min-width: 44px;
    /* T358a — the level WORD is no longer painted (icon + visually-hidden name), so
       the horizontal padding no longer has to reserve room for "Medium". Tightened
       12px -> 8px, which keeps the three options a compact set while min-width:44px
       still guarantees the tap target. */
    padding: 4px 8px;
    border: 1px solid #e3d3ab;
    border-radius: 999px;
    background: #fdfaf2;
    color: #6f5a22;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* T371 — positioning context for the tick badge (mirrors .ivdiet-opt).
       ⚠ REQUIRED: without it the absolutely-positioned .ivspice-tick escapes to the
       nearest positioned ancestor, which on the `menu` variant is .ivm-dish-spice
       (position:absolute, :256) — the tick would land in the wrong place entirely,
       not merely a few pixels off. Base rule, not per-variant, so no variant can be
       silently missed. */
    position: relative;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.ivspice-opt:hover {
    border-color: var(--ivspice-gold);
    background: #f7edd6;
}

.ivspice-opt:focus-visible {
    outline: 3px solid var(--ivspice-ink);
    outline-offset: 2px;
}

/* T358a — the ACTIVE fill changed gold -> INK.
   ⚠ Not cosmetic drift: the owner's icons are a red chilli inside a GOLD rim, so on
   the previous gold gradient the rim blended into the background and the selected
   option read as the least legible of the three. Ink gives the gold/red art maximum
   contrast, and it matches the already-shipped Admin sibling (.fx-spice-opt.is-active
   in FoodOrders.css), so the two apps agree.
   Selection is signalled by THREE things, never colour alone (WCAG 1.4.1): the ink
   fill, a gold ring, and full-opacity art while unselected art sits back at .62. */
.ivspice-opt.is-active {
    background: linear-gradient(135deg, #1c1c1c, #3a2c10);
    border-color: #1c1c1c;
    color: #f3c96e;
    box-shadow: 0 0 0 2px rgba(201, 164, 76, .55), 0 2px 8px rgba(28, 28, 28, .3);
}

/* ---------- T358a: the level icons inside the selector ---------- */
/* The icon lives in the shared .ivic component (Views\Shared\_IconWithLabel.cshtml),
   sized 26px via width/height attributes so the box is reserved before load. It sits
   INSIDE the existing ≥44px option box, so no variant grows taller — T348's F2
   limitation (dish-modal add button below the fold) is deliberately not worsened. */
.ivspice-opt .ivic-img {
    opacity: .62;
    filter: saturate(.75);
    transition: opacity .18s ease, filter .18s ease, transform .18s ease;
}

.ivspice-opt:hover .ivic-img {
    opacity: .85;
    filter: none;
}

.ivspice-opt.is-active .ivic-img {
    opacity: 1;
    filter: none;
    transform: scale(1.06);
}

/* ---------- the read-only chip (cart line / order line) ---------- */
/* T358a — the chip is now ICON + VISIBLE WORD, not word alone.
   ⚠ The word STAYS on the chip on purpose, and this is a measured decision, not
   timidity about the owner's "icons instead of text": rendered at the chip's
   inline size the Mild and Medium emblems are not reliably distinguishable from
   each other (they differ only in ring style and flame height; only Hot, a solid
   red disc, reads at that size). "Icons instead of text" is honoured where the
   guest CHOOSES — the 26px selector — while the small read-only chips keep the
   word so a line can never be misread. Do not drop the word here without
   re-measuring at 16px. */
.ivspice-chip {
    display: inline-block;
    /* right margin so the chip never collides with what follows it (MyOrders renders
       "<name> <chip> ×2"); harmless where the chip is last (the cart line). */
    margin: 0 4px 0 6px;
    padding: 1px 8px;
    border: 1px solid #e3d3ab;
    border-radius: 999px;
    background: #fdf6e8;
    color: #8a5a17;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    vertical-align: middle;
}

/* ---------- variant: Gallery dish modal ---------- */
/* The roomiest surface. Sits directly above the add-to-cart row so it can
   never push that button below the fold — see the 360px rule further down. */
.rgal-md-spicewrap {
    margin: 10px 0 0;
}

.ivspice--modal {
    margin: 0;
}

/* ---------- variant: Food Order dish card (T365) ---------- */
/* ⚠ Until T365 this variant had NO rules at all — it silently inherited the base,
   which is sized for the roomiest surface (the modal). Measured at HEAD on the
   real page: `.fo-dish-info` is only ~109-169px wide at 992-1280px, so the three
   word-bearing options WRAPPED — the spice row rendered 144px tall at 1280px and
   176px at 992px, i.e. three or four stacked 44px rows inside a card whose photo
   is 72px. That vertical stack, not the horizontal width, is what read as
   "unnecessarily wide". Every lever below is horizontal-per-option, so more
   options fit per line and the row wraps onto fewer of them.

   ⚠ The level WORD stays (T358b owner amendment M4 — "Spicy icon should be with
   name like mild, medium or Hot"; the Mild and Medium emblems are not reliably
   distinguishable from each other at small sizes, see the note at :164). Only its
   font-size shrinks here. Dropping it would reverse an explicit owner decision.

   ⚠ min-height / min-width:44px are NOT touched — T358a was REOPENED because two
   controls shipped under the WCAG target size. Padding, gap and font-size only. */
.ivspice--card {
    gap: 4px;
    margin: 6px 0 0;
}

.ivspice--card .ivspice-lbl {
    font-size: 10px;
    letter-spacing: .2px;
    margin-right: 0;
}

.ivspice--card .ivspice-opt {
    padding: 4px 6px;
}

/* Scoped override of the shared .ivic gap (base 4px) — never edit .ivic itself,
   it is the shared icon-with-accessible-name component used well beyond here. */
.ivspice--card .ivspice-opt .ivic {
    gap: 2px;
}

/* 22px is not a guess: it is the size .ivspice--menu already ships and which was
   measured clean at 360px (see :265-268 and the measured note below it). */
.ivspice--card .ivspice-opt .ivic-img {
    width: 22px;
    height: 22px;
}

.ivspice--card .ivspice-opt .ivic-lbl {
    font-size: 10.5px;
}

/* ---------- variant: Menu feature cards ---------- */
/* ⚠ position:absolute is deliberate — these cards are a photo-overlay design
   and the pill must NOT enter the flow, or the card grid reflows (column
   count / card height would change vs. an unflagged control card).
   Top-left is the dietary badges and top-right is the add-to-cart button, so
   the pill sits UNDER the add button on the right edge. */
.ivm-dish-spice {
    position: absolute;
    top: 62px;                 /* 44px add button + 8px gap + 10px top inset */
    right: 10px;
    z-index: 4;
    max-width: calc(100% - 20px);
}

.ivspice--menu {
    margin: 0;
    justify-content: flex-end;
    gap: 4px;
    padding: 4px 6px;
    border-radius: 999px;
    background: rgba(20, 20, 20, .58);
    backdrop-filter: blur(2px);
}

.ivspice--menu .ivspice-lbl {
    display: none;             /* the tightest layout in the app — no room for a label */
}

.ivspice--menu .ivspice-opt {
    min-height: 44px;
    /* ⚠ T358a — was 40px (T348). It was NON-BINDING then, because the option contained
       the WORD and "Medium" alone is wider than 40px, so the box measured >=44px by
       accident. Going icon-only made 40px the binding constraint and the option measured
       42x44 — i.e. UNDER the 44px WCAG target size, at every width. Found by measuring
       the shipped CSS in a real browser, not by reading it. Raised to 44px: costs 6px
       across the three options, and the pill still sits inside
       max-width: calc(100% - 20px) on the tightest 360px card (re-measured). */
    min-width: 44px;
    padding: 3px 9px;
    font-size: 11.5px;
}

/* ---------- responsive ---------- */
@media (max-width: 575.98px) {
    .ivspice {
        gap: 5px;
    }

    .ivspice-opt {
        padding: 4px 7px;
        font-size: 12px;
    }

    /* T358a — one notch smaller on phones. Overrides the 26px width/height
       attributes the partial emits; min-height:44px still holds the tap target. */
    .ivspice-opt .ivic-img {
        width: 24px;
        height: 24px;
    }
}

/* T358a — the tightest layout in the app: the Menu feature card's floating pill.
   The icon drops to 22px there so three options + the dark backing pill still fit
   inside `max-width: calc(100% - 20px)` on a 360px card. */
.ivspice--menu .ivspice-opt .ivic-img {
    width: 22px;
    height: 22px;
}

/* T348 §4.2 — the Menu-card abbreviation fallback (M ｜ Md ｜ S below 400px) was
   REMOVED after measurement. The plan made this a measure-then-decide call, and the
   full-word pill measures clean on the tightest card in the app. Measured live with
   this whole block deleted (so the base + <=575.98px rules are what apply):
     360px  pill 184px, ONE row, no option clipped (scrollWidth == clientWidth on all
            three), pill right edge 337 <= card right edge 348, options 45/67/50 x 44px,
            card box 336x253 — IDENTICAL to an unflagged control card (no grid reflow),
            page-level scrollWidth == clientWidth == 360 (same as /Home/Contact).
     400 / 575 / 1280px — same result; full words at every width.
   Full words win on legibility, so the abbreviation is gone rather than kept "just in
   case". ⚠ Do NOT reintroduce it without re-measuring at 360px. */

/* At phone height the modal must keep its add-to-cart button reachable, so the
   selector above it stays as short as possible (measure vertical containment,
   not just overflow — a width pass can be GREEN while the button is unreachable). */
@media (max-height: 700px) {
    .rgal-md-spicewrap {
        margin-top: 6px;
    }

    .ivspice--modal .ivspice-opt {
        min-height: 44px;
        padding: 2px 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ivspice-opt {
        transition: none;
    }

    /* T358a — the icon's own transition AND the 1.06 scale on the active option.
       The selected state stays fully signalled without motion (ink fill + gold ring
       + full-opacity art), so dropping the transform costs no information. */
    .ivspice-opt .ivic-img {
        transition: none;
    }

    .ivspice-opt.is-active .ivic-img {
        transform: none;
    }
}

/* ---------- T371: the CSS-only tick badge (owner request A) ---------- */
/* ⚠ ITS OWN CLASS, DELIBERATELY. SpiceLevels.css:371 forbids merging these two
   controls: "the two controls deliberately look related but are NOT the same
   component." Do NOT reuse .ivdiet-tick on spice markup and do NOT merge them —
   spice is role="radiogroup"/radio (single-select), dietary is role="group"/checkbox
   (multi-select). The separation is an a11y distinction, not cosmetics.

   ⚠ Gated on .is-active (spice), NOT .is-on (dietary) — never conflate the two.

   ⚠ CSS-ONLY: a \2713 glyph, NO new image binary in ANY repo. ⚖ T362 is open
   precisely because ~2.0 MB of unused PNGs were nearly published into an app that
   does not use them.

   Absolutely positioned so it cannot change the option's box and therefore cannot
   push the Gallery dish-modal add button further below the fold (T348's F2
   limitation must not regress). Visually identical to .ivdiet-tick on purpose, so
   the two rows read as one design language while remaining two components.

   This is the THIRD non-colour selection signal (WCAG 1.4.1): tick + ink fill +
   full-opacity art (unselected art sits back at .62). */
.ivspice-tick {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    display: none;
    background: #1c7a3e;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

.ivspice-opt.is-active .ivspice-tick {
    display: block;
}

.ivspice-tick::after {
    /* U+2713 CHECK MARK — a font glyph, not an asset. */
    content: "\2713";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}

/* =====================================================================
   T358b — .ivdiet-*: the MULTI-SELECT dietary-requirement selector
   (markup: Views\Home\_DietarySelector.cshtml) and .ivdiet-chip, the small
   read-only chip that shows the chosen set on a cart / order line.

   ⚠ OWN .ivdiet-* PREFIX, for the same reason .ivspice-* has one: this
   component renders on the SAME three pages (Food Order, Gallery dish modal,
   Menu feature cards) whose .fo-* / .rgal-* / .ivm-* families already overlap.
   Do NOT fold these rules into those files and do NOT extend .ivspice-* —
   the two controls deliberately look related but are NOT the same component.

   ⚠ THE TICK IS CSS-ONLY — a ::after glyph, NO new image binary in ANY repo,
   and categorically none in RV Client. ⚖ T362 is open precisely because ~2.0 MB
   of unused watermarked PNGs were nearly published into an app that does not use
   them; this component is deliberately structured not to repeat it.

   ⚠ Selection is signalled by THREE things, never colour alone (WCAG 1.4.1):
   the tick badge, the ink fill + gold ring, and full-opacity art (unselected art
   sits back at .62, exactly like .ivspice-opt).
   ===================================================================== */

.ivdiet {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 0;
}

.ivdiet-lbl {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #8a6d23;
    margin-right: 2px;
}

.ivdiet-opt {
    /* ≥44px tap target on every variant/width (WCAG target size). T358a was
       REOPENED for exactly this — two choosing controls shipped at 42×44 and
       40×40 and had to be corrected. Do not shrink these two values. */
    min-height: 44px;
    min-width: 44px;
    padding: 4px 8px;
    border: 1px solid #e3d3ab;
    /* T363 — SQUARE badge, matching .fo-dish-icons' 8px, replacing the 999px PILL.
       ⚠ RADIUS ONLY — a pure shape change with NO size change: with the label visually
       hidden the content is ~26px icon + 4px/8px padding ≈ 42×34, so the min-* values
       above already win and the control is already 44×44. The two min-* lines above must
       NOT shrink (T358a was REOPENED for exactly that). This also reaches the `modal` and
       `menu` variants via the shared base class — deliberate, consistent, one-line revert. */
    border-radius: 8px;
    background: #fdfaf2;
    color: #6f5a22;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* positioning context for the tick badge */
    position: relative;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.ivdiet-opt:hover {
    border-color: var(--ivspice-gold);
    background: #f7edd6;
}

.ivdiet-opt:focus-visible {
    /* NEVER outline:none — this control is keyboard-operable end to end. */
    outline: 3px solid var(--ivspice-ink);
    outline-offset: 2px;
}

/* Selected. Same ink+gold treatment as .ivspice-opt.is-active so the two rows
   read as one design language, while remaining separate components. */
.ivdiet-opt.is-on {
    background: linear-gradient(135deg, #1c1c1c, #3a2c10);
    border-color: #1c1c1c;
    color: #f3c96e;
    box-shadow: 0 0 0 2px rgba(201, 164, 76, .55), 0 2px 8px rgba(28, 28, 28, .3);
}

/* T363 — hidden by GalleryLux.js's per-dish modal filter (`o.hidden = true`).
   Belt-and-braces, not load-bearing today: Bootstrap already ships an AUTHOR-level
   `[hidden]{display:none!important}` rule (bootstrap.min.css) that beats the
   `display:inline-flex` above on its own — measured live (Stage 4, T363): removing
   this block leaves the computed style at `display:none` unchanged. This rule keeps
   the modal filter working even if Bootstrap's own [hidden] rule is ever dropped or
   downgraded, so it stays — but do not describe it as REQUIRED; it is not, today. */
.ivdiet-opt[hidden],
.ivdiet[hidden] {
    display: none !important;
}

/* T363 — squareness guaranteed in CSS, not left to the width/height ATTRIBUTES the
   partial emits, so the acceptance measurement is meaningful and cannot drift if a
   caller ever changes the "size" ViewData. Same 26px the spice row uses, so the two
   rows still line up. object-fit:contain ⇒ nothing cropped or distorted. */
.ivdiet-opt .ivic-img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    opacity: .62;
    filter: saturate(.75);
    transition: opacity .18s ease, filter .18s ease, transform .18s ease;
}

.ivdiet-opt:hover .ivic-img {
    opacity: .85;
    filter: none;
}

.ivdiet-opt.is-on .ivic-img {
    opacity: 1;
    filter: none;
    transform: scale(1.06);
}

/* ---------- the CSS-only tick badge (owner M3) ---------- */
/* Absolutely positioned so it cannot change the option's box and therefore cannot
   push the dish-modal add button further below the fold (T348's F2 limitation must
   not regress — FR-14). Rendered only when selected. */
.ivdiet-tick {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    display: none;
    background: #1c7a3e;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

.ivdiet-opt.is-on .ivdiet-tick {
    display: block;
}

.ivdiet-tick::after {
    /* U+2713 CHECK MARK — a font glyph, not an asset. */
    content: "\2713";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}

/* ---------- density variants ---------- */
/* "menu" is the tightest layout in the app; the Menu feature card's spice pill is
   deliberately position:absolute so the grid cannot reflow (FR-14). The dietary row
   is laid out in normal flow inside the same card body and simply wraps. */
.ivdiet--menu {
    gap: 4px;
    margin-top: 6px;
}

.ivdiet--menu .ivdiet-opt {
    padding: 4px 6px;
}

/* ---------- variant: Food Order dish card (T365) ---------- */
/* ⚠⚠ READ THIS BEFORE "OPTIMISING" THIS BLOCK — the honest ceiling here is SMALL.
   The dietary option is icon-only (`{ "text", "hidden" }`), so its content is only
   ~26px icon + 8px padding ≈ 42x34. `min-width:44px` on .ivdiet-opt is therefore
   ALREADY the binding dimension, which means:

       REDUCING .ivdiet-opt PADDING CHANGES THE RENDERED WIDTH BY EXACTLY ZERO.

   Verified live at HEAD: every option measures 44x44 at every width. The only
   honest levers left are the row gap and the label, worth ~15-20px across the
   5-option worst case — NOT the ~80px the spice row gives. That is the correct
   outcome, not a shortfall.

   ⚠ Do NOT reach for min-width / min-height to close the gap. T358a was REOPENED
   specifically because two controls shipped at 42x44 and 40x40, under the WCAG
   target size. A 5-option row is SUPPOSED to be >= 5x44 = 220px wide. The padding
   line below is kept only so the icon is centred consistently with the spice row;
   it is deliberately not doing any width work. */
.ivdiet--card {
    gap: 4px;
    /* tighter than the base 8px so this row and the spice row above it read as one
       block rather than two detached strips (they remain two separate components,
       two roles, two JS handlers — see the partial's own banner). */
    margin: 4px 0 0;
}

.ivdiet--card .ivdiet-lbl {
    font-size: 10px;
    letter-spacing: .2px;
    margin-right: 0;
}

.ivdiet--card .ivdiet-opt {
    padding: 4px 6px;
}

/* T371 (owner request C, superseding an earlier 35px-only request) — the dietary
   selector's icons take the .fo-dish-icons badge look.
   ⚠ SCOPED to .ivdiet--card ONLY. NEVER edit the shared .ivic / .ivic-img base
   (SpiceLevels.css:233 verbatim: "never edit .ivic itself") — it is consumed by the
   spice, Gallery, Menu and Signature surfaces too.
   Mirrors FoodOrder.css:168-173 (+:406 for the phone size), read-only reference.
   ⚠ NO `transition` here on purpose: the base rule .ivdiet-opt .ivic-img (:523-530)
   already declares `transition: opacity .18s, filter .18s, transform .18s`, and the
   `transition` SHORTHAND would RESET the opacity/filter transitions if re-declared.
   ⚠ NO `object-fit` here on purpose: the base rule already sets `contain`. */
.ivdiet--card .ivdiet-opt .ivic-img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #fff;
    padding: 3px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .16);
}

/* T371 — hover affordance, matching .fo-dish-icons img:hover.
   ⚠ :not(.is-on) is LOAD-BEARING, not stylistic (Q4: "selection wins over hover").
   Without it this selector (0,5,0) would out-specify the selected rule
   .ivdiet-opt.is-on .ivic-img (0,3,0) at :537-541, and a SELECTED option would jump
   1.06 -> 1.2 on hover — selection is information, hover is only affordance.
   :not(.is-on) makes the two mutually exclusive, so the outcome can never be broken
   by a later source-order edit. */
.ivdiet--card .ivdiet-opt:not(.is-on):hover .ivic-img {
    transform: scale(1.2);
}

/* ---------- the read-only chip (cart line / order line / bill) ---------- */
/* ⚠ Renders ONLY when the set is non-empty — never an empty chip, a stray
   separator, or the literal "null" (FR-19: a pre-feature line is byte-identical). */
.ivdiet-chip {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #eef7f0;
    border: 1px solid #bfe0c9;
    color: #1c5c33;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.5;
    vertical-align: middle;
    white-space: normal;
}

@media (max-width: 575.98px) {
    /* Keep the seven options usable at 360px: they wrap onto as many rows as
       needed rather than overflowing the card (page-level horizontal overflow is
       measured against an untouched control page — never a rect sweep). */
    .ivdiet {
        gap: 5px;
    }

    .ivdiet-opt {
        padding: 4px 6px;
    }

    /* T371 — matches FoodOrder.css:406 (.fo-dish-icons img at 45px on phones). */
    .ivdiet--card .ivdiet-opt .ivic-img {
        width: 45px;
        height: 45px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ivdiet-opt,
    .ivdiet-opt .ivic-img {
        transition: none;
    }

    .ivdiet-opt.is-on .ivic-img {
        transform: none;
    }

    /* T371 — the .is-on transform was already cancelled above; the HOVER transform is
       new in this task and was not covered, because none existed until now. A 1.2x
       scale IS motion — shipping it un-cancelled would be a real a11y regression. */
    .ivdiet--card .ivdiet-opt:not(.is-on):hover .ivic-img {
        transform: none;
    }
}