/* -------------------------------------------------------- Menu Board slide ---
   Epic onfiremobile-gvv10, bead .4. Design: docs/PRD/displays/menu-board/
   DISPLAY_WEB.md §1.8. Every rule here is .ns-mb*. Loaded after styles.css.

   Sizes are calc(var(--mb-u) * N * var(--mb-s)): --mb-u is 1% of the FRAME's
   short side (set by JS from the real box, so a letterboxed frame and the
   in-app preview card scale honestly) and --mb-s is the fit scale. Chrome
   (padding, header, column gap) is unscaled. Line clamps bound every block's
   height; that is what makes "no clipping" a guarantee. Columns' children are
   flex:none + border-box so the paginator's measure matches the paint. */

.ns-root.ns-mb {
    --mb-u: 10.8px;
    --mb-s: 1;
    padding: 0;
    gap: 0;
    align-items: center;
    justify-content: center;
    background: var(--mb-bg);
    color: var(--mb-text);
}

.ns-mb--dark {
    --mb-bg: #0d0d12;
    --mb-panel: rgba(255, 255, 255, 0.05);
    --mb-edge: rgba(255, 255, 255, 0.10);
    --mb-text: #ffffff;
    --mb-muted: rgba(255, 255, 255, 0.64);
    --mb-accent: #FF6B1F;
    --mb-price: #FFCE54;
    --mb-veg: #4cc47f;
    --mb-hot: #FF5A4D;
    --mb-out-opacity: 0.45;
    --mb-ph: rgba(255, 107, 31, 0.16);
}

.ns-mb--light {
    --mb-bg: #f7f3ec;
    --mb-panel: #ffffff;
    --mb-edge: rgba(34, 34, 34, 0.12);
    --mb-text: #222222;
    --mb-muted: #5f6670;
    --mb-accent: #C9500F;
    --mb-price: #222222;
    --mb-veg: #17773F;
    --mb-hot: #C8231A;
    --mb-out-opacity: 0.6;
    --mb-ph: rgba(201, 80, 15, 0.12);
}

.ns-mb-frame {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex: none;
    padding: calc(var(--mb-u) * 4.2) calc(var(--mb-u) * 4.4) calc(var(--mb-u) * 3.6);
    gap: calc(var(--mb-u) * 2.4);
    overflow: hidden;
    background:
        radial-gradient(70% 55% at 0% 0%, rgba(255, 107, 31, 0.14) 0%, rgba(255, 107, 31, 0) 70%),
        var(--mb-bg);
}

.ns-mb--letterbox .ns-mb-frame {
    box-shadow: 0 0 0 1px var(--mb-edge), 0 calc(var(--mb-u) * 2) calc(var(--mb-u) * 6) rgba(0, 0, 0, 0.35);
}

/* ---- header ---- */

.ns-mb-top {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    gap: calc(var(--mb-u) * 2);
    min-width: 0;
    height: calc(var(--mb-u) * 7);
    border-bottom: 1px solid var(--mb-edge);
    padding-bottom: calc(var(--mb-u) * 1.4);
    box-sizing: content-box;
}

.ns-mb-top--cover {
    padding: calc(var(--mb-u) * 1.4) calc(var(--mb-u) * 2.2);
    border-bottom: 0;
    border-radius: calc(var(--mb-u) * 1.6);
    overflow: hidden;
    isolation: isolate;
}

.ns-mb-cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    opacity: 0;
    filter: brightness(0.45);
    transition: opacity 300ms cubic-bezier(0.33, 1, 0.68, 1);
}

.ns-mb-cover.ld { opacity: 1; }

.ns-mb-top--cover .ns-mb-title { color: #ffffff; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); }

.ns-mb-logo {
    flex: none;
    height: calc(var(--mb-u) * 7);
    max-width: calc(var(--mb-u) * 18);
    object-fit: contain;
    border-radius: calc(var(--mb-u) * 1);
}

.ns-mb-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: calc(var(--mb-u) * 5);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ns-mb-pager {
    flex: none;
    display: flex;
    align-items: center;
    gap: calc(var(--mb-u) * 0.7);
}

.ns-mb-pager > i {
    display: block;
    width: calc(var(--mb-u) * 0.9);
    height: calc(var(--mb-u) * 0.9);
    border-radius: calc(var(--mb-u) * 0.45);
    background: var(--mb-edge);
    transition: width 360ms cubic-bezier(0.33, 1, 0.68, 1), background-color 360ms cubic-bezier(0.33, 1, 0.68, 1);
}

.ns-mb-pager > i.on {
    width: calc(var(--mb-u) * 2.6);
    background: var(--mb-accent);
}

/* ---- body, pages, columns ---- */

.ns-mb-body {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: visible;
}

.ns-mb-page {
    display: grid;
    grid-template-columns: repeat(var(--mb-cols), minmax(0, 1fr));
    column-gap: calc(var(--mb-u) * 4);
    row-gap: calc(var(--mb-u) * 1.5 * var(--mb-s));
    align-items: start;
}

.ns-mb--photo_grid .ns-mb-page { column-gap: calc(var(--mb-u) * 2.2); }

.ns-mb-col {
    display: flex;
    flex-direction: column;
    gap: calc(var(--mb-u) * 1.5 * var(--mb-s));
    min-width: 0;
}

.ns-mb-col > * {
    flex: none;
    box-sizing: border-box;
}

.ns-mb-measure {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    visibility: hidden;
    pointer-events: none;
}

.ns-mb-page--in > .ns-mb-col {
    animation: ns-mb-rise 420ms cubic-bezier(0.33, 1, 0.68, 1) both;
}

.ns-mb-page--out {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    animation: ns-mb-fade-out 240ms cubic-bezier(0.33, 1, 0.68, 1) both;
}

@keyframes ns-mb-rise {
    from { opacity: 0; transform: translateY(calc(var(--mb-u) * 1.2)); }
    to { opacity: 1; transform: none; }
}

@keyframes ns-mb-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* ---- section headings ---- */

.ns-mb-head {
    padding-top: calc(var(--mb-u) * 0.6 * var(--mb-s));
}

.ns-mb-head-line {
    display: flex;
    align-items: center;
    gap: calc(var(--mb-u) * 1.2 * var(--mb-s));
    min-width: 0;
}

.ns-mb-head-name {
    flex: 0 1 auto;
    min-width: 0;
    font-size: calc(var(--mb-u) * 2.5 * var(--mb-s));
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.2;
    color: var(--mb-accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ns-mb-head-cont {
    flex: none;
    font-size: calc(var(--mb-u) * 1.5 * var(--mb-s));
    font-weight: 600;
    color: var(--mb-muted);
    letter-spacing: 0.02em;
}

.ns-mb-head-cont::before { content: '\00B7\00A0'; }

.ns-mb-head-rule {
    flex: 1 1 calc(var(--mb-u) * 2);
    height: 1px;
    background: var(--mb-edge);
}

.ns-mb-head-desc {
    margin-top: calc(var(--mb-u) * 0.4 * var(--mb-s));
    font-size: calc(var(--mb-u) * 1.5 * var(--mb-s));
    line-height: 1.3;
    color: var(--mb-muted);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* ---- items (classic + photo_list) ---- */

.ns-mb-item { min-width: 0; }

.ns-mb-item--thumb {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--mb-u) * 1.6 * var(--mb-s));
}

.ns-mb-main {
    flex: 1 1 auto;
    min-width: 0;
}

.ns-mb-line {
    display: flex;
    align-items: baseline;
    gap: calc(var(--mb-u) * 0.8 * var(--mb-s));
    min-width: 0;
}

.ns-mb-name {
    flex: 0 1 auto;
    min-width: 0;
    font-size: calc(var(--mb-u) * 2.3 * var(--mb-s));
    font-weight: 650;
    letter-spacing: -0.012em;
    line-height: 1.2;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.ns-mb-lead {
    flex: 1 1 calc(var(--mb-u) * 2);
    min-width: calc(var(--mb-u) * 1.5);
    border-bottom: calc(var(--mb-u) * 0.22 * var(--mb-s)) dotted var(--mb-muted);
    opacity: 0.55;
    align-self: baseline;
}

.ns-mb-fill { flex: 1 1 0; min-width: 0; }

.ns-mb-price {
    flex: none;
    font-size: calc(var(--mb-u) * 2.3 * var(--mb-s));
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--mb-price);
}

.ns-mb-desc {
    margin-top: calc(var(--mb-u) * 0.4 * var(--mb-s));
    font-size: calc(var(--mb-u) * 1.6 * var(--mb-s));
    line-height: 1.3;
    color: var(--mb-muted);
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.ns-mb-sizes {
    margin-top: calc(var(--mb-u) * 0.5 * var(--mb-s));
    display: flex;
    flex-wrap: wrap;
    column-gap: calc(var(--mb-u) * 1.8 * var(--mb-s));
    row-gap: calc(var(--mb-u) * 0.3 * var(--mb-s));
    font-size: calc(var(--mb-u) * 1.8 * var(--mb-s));
    line-height: 1.25;
}

.ns-mb-size {
    display: inline-flex;
    gap: calc(var(--mb-u) * 0.6 * var(--mb-s));
    white-space: nowrap;
    max-width: 100%;
    min-width: 0;
}

.ns-mb-size-name {
    color: var(--mb-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.ns-mb-size-price {
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    color: var(--mb-price);
}

.ns-mb-size--out { opacity: 0.55; }
.ns-mb-size--out .ns-mb-size-price { text-decoration: line-through; }

/* ---- badges + sold out ---- */

.ns-mb-badges {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: calc(var(--mb-u) * 0.5 * var(--mb-s));
    align-self: center;
}

.ns-mb-badge {
    display: inline-block;
    font-size: calc(var(--mb-u) * 1.25 * var(--mb-s));
    font-weight: 750;
    line-height: 1;
    padding: calc(var(--mb-u) * 0.35 * var(--mb-s)) calc(var(--mb-u) * 0.7 * var(--mb-s));
    border-radius: calc(var(--mb-u) * 2);
    white-space: nowrap;
}

.ns-mb-badge--veg {
    color: var(--mb-veg);
    box-shadow: inset 0 0 0 1px var(--mb-veg);
}

.ns-mb-badge--kcal {
    font-size: calc(var(--mb-u) * 1.3 * var(--mb-s));
    font-weight: 600;
    color: var(--mb-muted);
    box-shadow: inset 0 0 0 1px var(--mb-edge);
}

.ns-mb-spice {
    display: inline-flex;
    color: var(--mb-hot);
}

.ns-mb-chili {
    width: calc(var(--mb-u) * 1.6 * var(--mb-s));
    height: calc(var(--mb-u) * 1.6 * var(--mb-s));
}

.ns-mb-out-tag {
    flex: none;
    align-self: center;
    font-size: calc(var(--mb-u) * 1.25 * var(--mb-s));
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    padding: calc(var(--mb-u) * 0.4 * var(--mb-s)) calc(var(--mb-u) * 0.8 * var(--mb-s));
    border-radius: calc(var(--mb-u) * 2);
    color: var(--mb-bg);
    background: var(--mb-text);
    white-space: nowrap;
}

.ns-mb-item--out .ns-mb-name,
.ns-mb-item--out .ns-mb-desc,
.ns-mb-item--out .ns-mb-price,
.ns-mb-item--out .ns-mb-sizes,
.ns-mb-item--out .ns-mb-badges,
.ns-mb-item--out .ns-mb-lead,
.ns-mb-item--out .ns-mb-thumb,
.ns-mb-item--out .ns-mb-photo {
    opacity: var(--mb-out-opacity);
}

.ns-mb-item--out .ns-mb-price,
.ns-mb-item--out .ns-mb-size-price {
    text-decoration: line-through;
}

/* ---- images ---- */

.ns-mb-thumb,
.ns-mb-photo {
    position: relative;
    flex: none;
    overflow: hidden;
    background: var(--mb-ph);
}

.ns-mb-thumb {
    width: calc(var(--mb-u) * 7.6 * var(--mb-s));
    height: calc(var(--mb-u) * 7.6 * var(--mb-s));
    border-radius: calc(var(--mb-u) * 1.2 * var(--mb-s));
}

.ns-mb-photo {
    width: 100%;
    height: 0;
    padding-bottom: 66.6667%;
}

.ns-mb-ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: calc(var(--mb-u) * 3 * var(--mb-s));
    color: var(--mb-accent);
    opacity: 0.7;
}

.ns-mb-thumb img,
.ns-mb-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 300ms cubic-bezier(0.33, 1, 0.68, 1);
}

.ns-mb-thumb img.ld,
.ns-mb-photo img.ld {
    opacity: 1;
}

/* ---- grid cards ---- */

.ns-mb-row {
    display: grid;
    grid-template-columns: repeat(var(--mb-gcols), minmax(0, 1fr));
    gap: calc(var(--mb-u) * 2.2);
    align-items: stretch;
}

.ns-mb-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: calc(var(--mb-u) * 1.4 * var(--mb-s));
    overflow: hidden;
    background: var(--mb-panel);
    box-shadow: inset 0 0 0 1px var(--mb-edge);
}

.ns-mb-card-body {
    display: flex;
    flex-direction: column;
    gap: calc(var(--mb-u) * 0.5 * var(--mb-s));
    padding: calc(var(--mb-u) * 1.1 * var(--mb-s)) calc(var(--mb-u) * 1.3 * var(--mb-s)) calc(var(--mb-u) * 1.3 * var(--mb-s));
    min-width: 0;
    flex: 1 1 auto;
}

.ns-mb-card .ns-mb-name { font-size: calc(var(--mb-u) * 2 * var(--mb-s)); }
.ns-mb-card .ns-mb-desc { margin-top: 0; font-size: calc(var(--mb-u) * 1.45 * var(--mb-s)); }
.ns-mb-card .ns-mb-sizes { margin-top: 0; font-size: calc(var(--mb-u) * 1.6 * var(--mb-s)); }

.ns-mb-card-foot {
    display: flex;
    align-items: center;
    gap: calc(var(--mb-u) * 0.6 * var(--mb-s));
    margin-top: auto;
    min-width: 0;
}

.ns-mb-card-foot .ns-mb-badges { flex: 0 1 auto; min-width: 0; overflow: hidden; }

.ns-mb-out-tag--photo {
    position: absolute;
    top: calc(var(--mb-u) * 0.9 * var(--mb-s));
    left: calc(var(--mb-u) * 0.9 * var(--mb-s));
}

/* ---- loading ---- */

.ns-mb--loading .ns-mb-loading {
    display: flex;
    gap: 1.4vmin;
}

.ns-mb--loading .ns-mb-loading > i {
    display: block;
    width: 1.6vmin;
    height: 1.6vmin;
    border-radius: 50%;
    background: var(--mb-accent);
    animation: ns-mb-pulse 1100ms cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.ns-mb--loading .ns-mb-loading > i:nth-child(2) { animation-delay: 160ms; }
.ns-mb--loading .ns-mb-loading > i:nth-child(3) { animation-delay: 320ms; }

@keyframes ns-mb-pulse {
    0%, 100% { opacity: 0.25; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .ns-mb-page--in > .ns-mb-col,
    .ns-mb-page--out,
    .ns-mb--loading .ns-mb-loading > i { animation: none; }
    .ns-mb-page--out { display: none; }
    .ns-mb-pager > i,
    .ns-mb-thumb img,
    .ns-mb-photo img,
    .ns-mb-cover { transition: none; }
}