/* Menu-family card styles (chalk, fine, ticket, polaroid, compact), section
   header styles, section covers, price styles, discount badge and on-card
   size chips. Linked by company.php next to public-biz.css. Chalk and
   polaroid carry their own material colours so they read the same on every
   preset; everything else is built from the page tokens. */

:root {
    --mn-hand-font: 'Marhey Variable', var(--title-font);
    --mn-fine-font: 'Aref Ruqaa', var(--title-font);

    --mn-chalk-board: #1d2925;
    --mn-chalk-ink: #f3f0e7;
    --mn-chalk-soft: #c8cec5;
    --mn-chalk-faint: rgb(243 240 231 / 0.28);
    --mn-chalk-dust: rgb(255 255 255 / 0.07);
    --mn-chalk-yellow: #f4d97f;
    --mn-chalk-pink: #f5bdb7;
    --mn-chalk-frame: #5b3f2b;
    --mn-chalk-frame-lit: #7a5638;
    --mn-chalk-depth: inset 0 0 0 1px rgb(0 0 0 / 0.5), inset 0 2px 30px rgb(0 0 0 / 0.5);
    --mn-chalk-drop: 0 1px 2px rgb(0 0 0 / 0.25), 0 10px 22px -10px rgb(0 0 0 / 0.55);

    --mn-pola-paper: #fbfbf8;
    --mn-pola-ink: #1f1d1a;
    --mn-pola-soft: #57524b;
    --mn-pola-line: rgb(31 29 26 / 0.18);
    --mn-pola-wash: rgb(31 29 26 / 0.06);
    --mn-pola-tape: rgb(255 255 255 / 0.55);
    --mn-pola-shadow: 0 1px 2px rgb(15 12 8 / 0.18), 0 8px 18px -6px rgb(15 12 8 / 0.3);
    --mn-pola-deal-bg: #fbe3df;
    --mn-pola-deal-ink: #9a2a1c;

    --mn-ticket-shadow: 0 1px 1px rgb(15 23 42 / 0.08);
    --mn-ticket-shadow-far: 0 8px 14px rgb(15 23 42 / 0.1);
    --mn-ticket-stub: 96px;
    --mn-ticket-photo: 100px;
}

@media (min-width: 571px) {
    :root {
        --mn-ticket-stub: 120px;
        --mn-ticket-photo: 128px;
    }
}

/* ── Section headers ──────────────────────────────────────── */
.mn-sec .mn-sec__head--underline .mn-sec__title,
.mn-sec .mn-sec__head--number .mn-sec__title,
.mn-sec .mn-sec__head--ornament .mn-sec__title,
.mn-sec .mn-sec__head--band .mn-sec__title {
    display: block;
}

.mn-sec .mn-sec__head--underline .mn-sec__title::after {
    content: '';
    display: block;
    width: 44px;
    height: 4px;
    margin-top: 10px;
    border-radius: var(--sl-radius-pill);
    background: var(--accent);
}

.mn-sec .mn-sec__head--number .mn-sec__title::after,
.mn-sec .mn-sec__head--ornament .mn-sec__title::after,
.mn-sec .mn-sec__head--band .mn-sec__title::after {
    content: none;
}

/* band: the heading sits on a strip of the accent colour. */
.mn-sec__head--band:not(.mn-sec__head--toggle) {
    padding: var(--sl-space-4) var(--sl-space-5);
    border-radius: var(--biz-radius-sm);
    background: var(--accent);
    color: var(--accent-ink);
}

.mn-sec__head--band .mn-sec__title,
.mn-sec__head--band .mn-sec__desc {
    color: var(--accent-ink);
}

.mn-sec__head--band .mn-sec__desc {
    font-weight: var(--sl-weight-medium);
}

/* number: an outlined numeral in the margin of the heading. */
.mn-sec__head--number:not(.mn-sec__head--toggle) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--sl-space-4);
    align-items: center;
    padding-bottom: var(--sl-space-3);
    border-bottom: 1px solid var(--border);
}

.mn-sec__num {
    grid-row: span 2;
    font-family: var(--title-font);
    font-size: var(--sl-text-4xl);
    font-weight: var(--sl-weight-heavy);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--accent);
    font-variant-numeric: tabular-nums;
}

.mn-sec__head--number .mn-sec__desc {
    grid-column: 2;
}

/* ornament and center: a centred heading. */
.mn-sec__head--ornament:not(.mn-sec__head--toggle),
.mn-sec__head--center:not(.mn-sec__head--toggle) {
    text-align: center;
}

.mn-sec__orn {
    position: relative;
    display: block;
    width: 140px;
    height: 12px;
    margin: var(--sl-space-2) auto 0;
    background: linear-gradient(90deg, transparent, var(--accent) 40%, transparent 40%, transparent 60%, var(--accent) 60%, transparent) center / 100% 1px no-repeat;
}

.mn-sec__orn::before {
    content: '';
    position: absolute;
    inset: 50% auto auto 50%;
    width: 7px;
    height: 7px;
    background: var(--accent);
    transform: translate(-50%, -50%) rotate(45deg);
}

.mn-sec .mn-sec__head--center .mn-sec__title {
    justify-content: center;
    font-size: var(--sl-text-2xl);
}

.mn-sec .mn-sec__head--center .mn-sec__title::before,
.mn-sec .mn-sec__head--center .mn-sec__title::after {
    content: '';
    flex: 1 1 24px;
    max-width: 72px;
    height: 1px;
    background: color-mix(in srgb, var(--text-h) 30%, transparent);
}

/* Accordion summaries take the same idea, scaled down. */
.mn-sec__head--toggle.mn-sec__head--band {
    border-color: var(--btn-solid);
    background: var(--btn-solid);
    color: var(--btn-solid-ink);
}

.mn-sec__head--toggle.mn-sec__head--band > .sl-i,
.mn-sec__head--toggle.mn-sec__head--band .mn-sec__count {
    color: var(--btn-solid-ink);
}

.mn-sec__head--toggle.mn-sec__head--band .mn-sec__count {
    background: color-mix(in srgb, var(--btn-solid-ink) 18%, transparent);
}

.mn-sec__head--toggle .mn-sec__num {
    grid-row: auto;
    font-size: var(--sl-text-xl);
    -webkit-text-stroke-width: 1px;
}

.mn-sec__head--toggle.mn-sec__head--underline .mn-sec__title {
    text-decoration: underline 3px var(--accent);
    text-underline-offset: 8px;
}

.mn-sec__head--toggle .mn-sec__orn {
    width: 8px;
    height: 8px;
    margin: 0;
    background: none;
}

.mn-sec__head--toggle.mn-sec__head--center .mn-sec__heading {
    flex: 1;
    justify-content: center;
}

/* ── Section cover ────────────────────────────────────────── */
.mn-sec__cover {
    position: relative;
    margin: 0 0 var(--sl-space-4);
    overflow: hidden;
    border-radius: var(--biz-radius);
    background: var(--biz-tint);
    aspect-ratio: 16 / 7;
}

.mn-sec__cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mn-sec__cover::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-h) 10%, transparent);
    pointer-events: none;
}

details.mn-sec > .mn-sec__cover {
    margin: var(--sl-space-3) 0 0;
}

/* A band heading overlaps the bottom of its cover like a label. */
.mn-sec.has-cover > .mn-sec__head--band {
    position: relative;
    margin: calc(var(--sl-space-8) * -1) var(--sl-space-3) var(--sl-space-4);
    box-shadow: var(--biz-photo-shadow);
}

@media (min-width: 571px) {
    .mn-sec__cover {
        aspect-ratio: 21 / 8;
    }
}

/* ── Price styles ─────────────────────────────────────────── */
.pr-pill .mn-item__price,
.pr-tag .mn-item__price {
    flex-wrap: nowrap;
}

.pr-pill .mn-item__price {
    padding: 3px 12px;
    border-radius: var(--sl-radius-pill);
    background: var(--biz-tint-strong);
}

.pr-tag .mn-item__price {
    position: relative;
    padding: 4px 12px 4px 10px;
    padding-inline-start: 22px;
    background: var(--accent);
    color: var(--accent-ink);
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
    border-radius: 4px 0 0 4px;
}

.pr-tag .mn-item__price::before {
    content: '';
    position: absolute;
    inset-inline-start: 10px;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent-ink);
    transform: translateY(-50%);
}

.pr-tag .mn-item__price .mn-item__from,
.pr-tag .mn-item__price .mn-item__was {
    color: var(--accent-ink);
}

.pr-tag .mn-item[data-soldout] .mn-item__price {
    background: var(--biz-ink-soft);
    color: var(--biz-muted);
}

.pr-tag .mn-item[data-soldout] .mn-item__price::before {
    background: currentColor;
}

.pr-tag .mn-item[data-soldout] .mn-item__price .mn-item__from,
.pr-tag .mn-item[data-soldout] .mn-item__price .mn-item__was {
    color: inherit;
}

.pr-pill .mn-item--magazine.mn-item--lead .mn-item__price {
    background: var(--biz-glass-on-photo);
    backdrop-filter: blur(6px);
}

/* ── Discount badge (menu family; shop styles restyle it) ─── */
.mn-item__discount {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    padding: 0 7px;
    border: 1px solid color-mix(in srgb, var(--biz-closed) 50%, transparent);
    border-radius: 6px;
    background: color-mix(in srgb, var(--biz-closed) 12%, transparent);
    color: var(--text-h);
    font-size: var(--sl-text-xs);
    font-weight: var(--sl-weight-bold);
    line-height: 1.7;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.mn-item--magazine.mn-item--lead .mn-item__discount {
    border-color: var(--biz-glass-on-photo);
    background: var(--biz-glass-on-photo);
    color: var(--biz-on-photo);
}

/* ── Size chips on the card ───────────────────────────────── */
.mn-sizes {
    position: relative;
    z-index: var(--sl-z-raised);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

.mn-size {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 12px;
    border: 1.5px solid var(--border);
    border-radius: min(var(--radius-btn), 12px);
    background: transparent;
    color: var(--text-h);
    font: inherit;
    font-size: var(--sl-text-sm);
    font-weight: var(--sl-weight-semibold);
    line-height: 1.2;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}

/* 44px hit area around a 38px chip. */
.mn-size::before {
    content: '';
    position: absolute;
    inset: -3px 0;
}

.mn-size__price {
    font-weight: var(--sl-weight-medium);
    color: var(--biz-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mn-size:hover {
    border-color: var(--border-hover);
}

.mn-size[aria-checked="true"] {
    border-color: var(--accent);
    background: var(--biz-tint);
    box-shadow: inset 0 0 0 1px var(--accent);
}

.mn-size[aria-checked="true"] .mn-size__price {
    color: var(--text-h);
}

.mn-size:focus-visible {
    outline: 3px solid var(--text-h);
    outline-offset: 2px;
}

/* ── chalk: one blackboard per section ────────────────────── */
.mn-list--chalk {
    gap: 0;
    padding: var(--sl-space-4) var(--sl-space-5);
    border: 8px solid var(--mn-chalk-frame);
    border-block-start-color: var(--mn-chalk-frame-lit);
    border-radius: 14px;
    background:
        radial-gradient(70% 55% at 85% 8%, var(--mn-chalk-dust), transparent 70%),
        radial-gradient(60% 50% at 10% 95%, var(--mn-chalk-dust), transparent 70%),
        color-mix(in oklab, var(--mn-chalk-board) 90%, var(--accent));
    box-shadow: var(--mn-chalk-depth), var(--mn-chalk-drop);
    color: var(--mn-chalk-ink);
}

.mn-item--chalk {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--sl-space-3);
    border: 0;
    border-radius: 0;
    background: none;
    backdrop-filter: none;
    box-shadow: none;
    color: var(--mn-chalk-ink);
}

.mn-item--chalk + .mn-item--chalk {
    border-top: 1.5px dashed var(--mn-chalk-faint);
}

.mn-item--chalk:hover {
    border-color: var(--mn-chalk-faint);
}

.mn-item--chalk .mn-item__body {
    gap: 4px;
    padding: var(--sl-space-4) 0;
}

.mn-item--chalk .mn-item__line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sl-space-1) var(--sl-space-2);
}

.mn-item--chalk .mn-item__name {
    flex: 0 1 auto;
    min-width: min(50%, 9em);
    font-family: var(--mn-hand-font);
    font-size: var(--sl-text-lg);
    font-weight: var(--sl-weight-semibold);
}

.mn-item--chalk .mn-item__leader {
    border-bottom-color: var(--mn-chalk-faint);
}

.mn-item--chalk .mn-item__price {
    font-family: var(--mn-hand-font);
    font-size: var(--sl-text-lg);
    font-weight: var(--sl-weight-bold);
    color: color-mix(in oklab, var(--mn-chalk-yellow) 82%, var(--accent));
}

.mn-item--chalk .mn-item__from,
.mn-item--chalk .mn-item__was,
.mn-item--chalk .mn-item__desc,
.mn-item--chalk .mn-item__meta {
    color: var(--mn-chalk-soft);
}

.mn-item--chalk .mn-item__media {
    flex: 0 0 auto;
    order: 2;
    width: 60px;
    height: 60px;
    margin-top: var(--sl-space-4);
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--mn-chalk-board), 0 0 0 5px var(--mn-chalk-faint);
}

/* The add button leaves the line so the name and price keep it: on the
   photo's rim, or in its own column when there is no photo. */
.mn-item--chalk .mn-add {
    position: absolute;
    top: calc(var(--sl-space-4) + 60px - 22px);
    inset-inline-end: 10px;
    background: var(--mn-chalk-board);
}

.mn-item--chalk.no-photo .mn-add {
    top: 10px;
    inset-inline-end: 0;
}

.mn-item--chalk.no-photo:has(.mn-add) .mn-item__body {
    padding-inline-end: 52px;
}

/* A board lists the old price; the percentage would crowd the line. */
.mn-item--chalk .mn-item__discount {
    display: none;
}

.mn-item--chalk .mn-badge {
    padding: 0 8px;
    border: 1px solid var(--mn-chalk-faint);
    background: none;
    color: var(--mn-chalk-soft);
}

.mn-item--chalk .mn-badge--featured {
    border-color: var(--mn-chalk-yellow);
    color: var(--mn-chalk-yellow);
}

.mn-item--chalk .mn-badge .sl-i {
    color: inherit;
}

.mn-item--chalk .mn-add {
    width: 40px;
    height: 40px;
    margin: 0;
    border: 2px solid var(--mn-chalk-ink);
    border-radius: 50%;
    background: transparent;
    color: var(--mn-chalk-ink);
    font-size: 20px;
    box-shadow: none;
}

.mn-item--chalk .mn-add:hover {
    background: var(--mn-chalk-dust);
}

.mn-item--chalk .mn-add:focus-visible,
.mn-item--chalk .mn-item__open:focus-visible::after,
.mn-item--chalk .mn-size:focus-visible {
    outline-color: var(--mn-chalk-yellow);
}

.mn-item--chalk .mn-item__open::after {
    border-radius: 0;
}

.mn-item--chalk .mn-item__out {
    border: 1px solid var(--mn-chalk-pink);
    background: none;
    color: var(--mn-chalk-pink);
}

.mn-item--chalk[data-soldout] .mn-item__name,
.mn-item--chalk[data-soldout] .mn-item__price {
    color: var(--mn-chalk-soft);
}

.mn-item--chalk .mn-size {
    border-color: var(--mn-chalk-faint);
    color: var(--mn-chalk-ink);
}

.mn-item--chalk .mn-size__price {
    color: var(--mn-chalk-soft);
}

.mn-item--chalk .mn-size[aria-checked="true"] {
    border-color: var(--mn-chalk-yellow);
    background: var(--mn-chalk-dust);
    box-shadow: inset 0 0 0 1px var(--mn-chalk-yellow);
    color: var(--mn-chalk-yellow);
}

.mn-item--chalk .mn-size[aria-checked="true"] .mn-size__price {
    color: var(--mn-chalk-yellow);
}

.pr-pill .mn-item--chalk .mn-item__price {
    border: 1.5px solid currentColor;
    background: none;
}

.pr-tag .mn-item--chalk .mn-item__price {
    background: var(--mn-chalk-yellow);
    color: var(--mn-chalk-board);
}

.pr-tag .mn-item--chalk .mn-item__price::before {
    background: var(--mn-chalk-board);
}

.pr-tag .mn-item--chalk .mn-item__from,
.pr-tag .mn-item--chalk .mn-item__was {
    color: var(--mn-chalk-board);
}

/* ── fine: a centred fine-dining card ─────────────────────── */
.mn-list--fine {
    gap: 0;
    padding: var(--sl-space-6) var(--sl-space-5);
    border: var(--biz-edge);
    border-radius: var(--biz-radius-sm);
    background: var(--biz-surface);
    backdrop-filter: var(--card-blur);
    box-shadow: var(--biz-shadow);
    outline: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    outline-offset: -9px;
    text-align: center;
}

.mn-item--fine {
    align-items: center;
    border: 0;
    border-radius: 0;
    background: none;
    backdrop-filter: none;
    box-shadow: none;
}

.mn-item--fine + .mn-item--fine::before {
    content: '';
    width: 7px;
    height: 7px;
    border: 1px solid color-mix(in srgb, var(--accent) 70%, transparent);
    transform: rotate(45deg);
}

.mn-item--fine .mn-item__media {
    width: 84px;
    margin-top: var(--sl-space-5);
    border-radius: 999px 999px 10px 10px;
    aspect-ratio: 4 / 5;
}

.mn-item--fine .mn-item__body {
    align-items: center;
    gap: var(--sl-space-2);
    width: 100%;
    padding: var(--sl-space-5) var(--sl-space-2);
}

.mn-item--fine .mn-item__name {
    font-family: var(--mn-fine-font);
    font-size: var(--sl-text-2xl);
    font-weight: var(--sl-weight-bold);
    line-height: 1.35;
    color: var(--title-color);
    text-wrap: balance;
}

.mn-item--fine .mn-item__open {
    text-align: center;
}

.mn-item--fine .mn-item__desc {
    max-width: 34ch;
    line-height: var(--sl-leading-body);
}

.mn-item--fine .mn-item__badges {
    justify-content: center;
    gap: 0;
}

.mn-item--fine .mn-badge {
    padding: 0;
    background: none;
    color: var(--biz-muted);
}

.mn-item--fine .mn-badge + .mn-badge::before {
    content: '·';
    margin-inline-end: 6px;
}

.mn-item--fine .mn-badge--featured {
    color: var(--text-h);
}

.mn-item--fine .mn-item__foot {
    justify-content: center;
    gap: var(--sl-space-3);
    width: 100%;
}

.mn-item--fine .mn-sizes {
    justify-content: center;
}

.pr-plain .mn-item--fine .mn-item__price {
    gap: 2px 8px;
    font-weight: var(--sl-weight-bold);
}

.pr-plain .mn-item--fine .mn-item__price::before,
.pr-plain .mn-item--fine .mn-item__price::after {
    content: '';
    align-self: center;
    width: 16px;
    height: 1px;
    background: var(--accent);
}

.mn-item--fine .mn-add {
    width: 44px;
    height: 44px;
    margin: 0;
    border: 1px solid var(--text-h);
    border-radius: 50%;
    background: transparent;
    color: var(--text-h);
    font-size: 20px;
    box-shadow: none;
}

.mn-item--fine .mn-add::before {
    content: none;
}

.mn-item--fine .mn-add:hover {
    background: var(--text-h);
    color: var(--biz-surface);
}

.mn-item--fine .mn-item__open::after {
    border-radius: 0;
}

/* ── ticket: a coupon with a perforated price stub ────────── */
.mn-list--ticket {
    gap: var(--sl-space-3);
    filter: drop-shadow(var(--mn-ticket-shadow)) drop-shadow(var(--mn-ticket-shadow-far));
}

.mn-item--ticket {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--mn-ticket-stub);
    min-height: 96px;
    overflow: hidden;
    box-shadow: none;
    -webkit-mask:
        radial-gradient(circle 10px at var(--mn-ticket-stub) 0, transparent 9.5px, var(--biz-mask) 10px),
        radial-gradient(circle 10px at var(--mn-ticket-stub) 100%, transparent 9.5px, var(--biz-mask) 10px);
    -webkit-mask-composite: source-in;
    mask:
        radial-gradient(circle 10px at var(--mn-ticket-stub) 0, transparent 9.5px, var(--biz-mask) 10px),
        radial-gradient(circle 10px at var(--mn-ticket-stub) 100%, transparent 9.5px, var(--biz-mask) 10px);
    mask-composite: intersect;
}

.mn-item--ticket.has-photo {
    grid-template-columns: var(--mn-ticket-photo) minmax(0, 1fr) var(--mn-ticket-stub);
    min-height: 120px;
}

.mn-item--ticket .mn-item__media {
    align-self: stretch;
    min-height: 100%;
}

.mn-item--ticket .mn-item__media img {
    position: absolute;
    inset: 0;
}

.mn-item--ticket .mn-item__body {
    justify-content: center;
    gap: 5px;
    padding: var(--sl-space-4);
}

.mn-item--ticket .mn-item__name {
    font-family: var(--title-font);
    font-size: var(--sl-text-md);
}

.mn-item--ticket .mn-item__badges .mn-badge:nth-child(n + 3) {
    display: none;
}

.mn-item--ticket .mn-item__stub {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    gap: var(--sl-space-2);
    margin: 0;
    padding: var(--sl-space-4) var(--sl-space-2);
    border-inline-start: 2px dashed color-mix(in srgb, var(--text-h) 24%, transparent);
    background: var(--biz-tint);
    text-align: center;
}

.mn-item--ticket .mn-item__price {
    flex-direction: column;
    align-items: center;
    gap: 0;
    font-size: var(--sl-text-lg);
    line-height: 1.2;
    white-space: normal;
}

.pr-pill .mn-item--ticket .mn-item__price,
.pr-tag .mn-item--ticket .mn-item__price {
    font-size: var(--sl-text-md);
}

.mn-item--ticket .mn-add {
    margin: 0;
}

/* Narrow cards list their sizes as rows of name and price. */
.mn-item--polaroid .mn-sizes {
    flex-direction: column;
    width: 100%;
}

.mn-item--polaroid .mn-size {
    justify-content: space-between;
    padding-inline: 10px;
    white-space: nowrap;
}

@media (max-width: 570px) {
    .mn-item--ticket .mn-sizes {
        flex-direction: column;
        width: 100%;
    }

    .mn-item--ticket .mn-size {
        justify-content: space-between;
        padding-inline: 10px;
        white-space: nowrap;
    }
}

.mn-item--ticket .mn-item__open::after {
    border-radius: 0;
}

/* ── polaroid: prints pinned to the page ──────────────────── */
.mn-list--polaroid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sl-space-6) var(--sl-space-4);
    padding: var(--sl-space-3) var(--sl-space-1) var(--sl-space-2);
}

.mn-item--polaroid {
    --mn-tilt: -1.5deg;
    padding: 10px 10px 0;
    border: 0;
    border-radius: 3px;
    background: var(--mn-pola-paper);
    backdrop-filter: none;
    box-shadow: var(--mn-pola-shadow);
    color: var(--mn-pola-ink);
    transform: rotate(var(--mn-tilt));
    transition: transform var(--sl-dur-slow) var(--sl-ease-emphasized);
}

.mn-item--polaroid:nth-child(2n) {
    --mn-tilt: 1.25deg;
}

.mn-item--polaroid:nth-child(3n) {
    --mn-tilt: -0.5deg;
}

.mn-item--polaroid:hover,
.mn-item--polaroid:focus-within {
    transform: rotate(0deg) translateY(-3px);
}

/* A strip of tape holding the print. */
.mn-item--polaroid::before {
    content: '';
    position: absolute;
    top: -9px;
    left: 50%;
    z-index: var(--sl-z-raised);
    width: 58px;
    height: 20px;
    background: color-mix(in srgb, var(--accent) 30%, var(--mn-pola-tape));
    box-shadow: 0 0 0 1px var(--mn-pola-wash);
    transform: translateX(-50%) rotate(-4deg);
    pointer-events: none;
}

.mn-item--polaroid .mn-item__media {
    border-radius: 1px;
    aspect-ratio: 1;
    background: var(--mn-pola-wash);
}

/* No photo: a developed print in the page's accent with the initial in ink. */
.mn-item--polaroid .mn-item__media--empty {
    background:
        radial-gradient(80% 70% at 75% 20%, color-mix(in srgb, var(--accent) 22%, var(--mn-pola-paper)), transparent 75%),
        color-mix(in srgb, var(--accent) 12%, var(--mn-pola-paper));
    aspect-ratio: 4 / 3;
}

.mn-item--polaroid .mn-item__media--empty > span {
    font-family: var(--mn-hand-font);
    color: color-mix(in srgb, var(--accent) 55%, var(--mn-pola-ink));
    opacity: 1;
}

.mn-item--polaroid:hover .mn-item__media img {
    transform: none;
}

.mn-item--polaroid .mn-item__body {
    align-items: center;
    gap: 4px;
    padding: var(--sl-space-3) 2px var(--sl-space-3);
    text-align: center;
}

.mn-item--polaroid .mn-item__name {
    font-family: var(--mn-hand-font);
    font-size: var(--sl-text-md);
    font-weight: var(--sl-weight-semibold);
    color: var(--mn-pola-ink);
}

.mn-item--polaroid .mn-item__open {
    text-align: center;
}

.mn-item--polaroid .mn-item__desc {
    -webkit-line-clamp: 1;
    line-clamp: 1;
    font-size: var(--sl-text-xs);
}

.mn-item--polaroid .mn-item__desc,
.mn-item--polaroid .mn-item__meta,
.mn-item--polaroid .mn-item__from,
.mn-item--polaroid .mn-item__was,
.mn-item--polaroid[data-soldout] .mn-item__name,
.mn-item--polaroid[data-soldout] .mn-item__price {
    color: var(--mn-pola-soft);
}

.mn-item--polaroid .mn-item__meta {
    display: none;
}

.mn-item--polaroid .mn-item__badges {
    justify-content: center;
}

.mn-item--polaroid .mn-item__badges .mn-badge:nth-child(n + 2) {
    display: none;
}

.mn-item--polaroid .mn-badge {
    border: 1px solid var(--mn-pola-line);
    background: none;
    color: var(--mn-pola-ink);
}

.mn-item--polaroid .mn-badge--featured {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--accent-ink);
}

.mn-item--polaroid .mn-item__foot {
    justify-content: center;
    width: 100%;
    padding-top: var(--sl-space-2);
    border-top: 1px dashed var(--mn-pola-line);
}

.mn-item--polaroid .mn-item__price {
    color: var(--mn-pola-ink);
}

.pr-pill .mn-item--polaroid .mn-item__price {
    background: var(--mn-pola-wash);
}

.mn-item--polaroid .mn-add {
    margin-inline-start: 0;
}

.mn-item--polaroid .mn-add:focus-visible,
.mn-item--polaroid .mn-item__open:focus-visible::after,
.mn-item--polaroid .mn-size:focus-visible {
    outline-color: var(--mn-pola-ink);
}

.mn-item--polaroid .mn-item__open::after {
    border-radius: 3px;
}

.mn-item--polaroid .mn-item__out {
    background: var(--mn-pola-wash);
    color: var(--mn-pola-soft);
}

.mn-item--polaroid .mn-item__discount {
    border-color: transparent;
    background: var(--mn-pola-deal-bg);
    color: var(--mn-pola-deal-ink);
}

.mn-item--polaroid .mn-size {
    border-color: var(--mn-pola-line);
    color: var(--mn-pola-ink);
}

.mn-item--polaroid .mn-size__price {
    color: var(--mn-pola-soft);
}

.mn-item--polaroid .mn-size[aria-checked="true"] {
    border-color: var(--mn-pola-ink);
    background: var(--mn-pola-wash);
    box-shadow: inset 0 0 0 1px var(--mn-pola-ink);
}

.mn-item--polaroid .mn-size[aria-checked="true"] .mn-size__price {
    color: var(--mn-pola-ink);
}

@media (min-width: 571px) {
    .mn-list--polaroid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ── compact: dense rows for long menus ───────────────────── */
.mn-list--compact {
    gap: 0;
    padding: var(--sl-space-1) var(--sl-space-4);
    border: var(--biz-edge);
    border-radius: var(--biz-radius);
    background: var(--biz-surface);
    backdrop-filter: var(--card-blur);
    box-shadow: var(--biz-shadow);
}

.mn-item--compact {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--sl-space-3);
    border: 0;
    border-radius: 0;
    background: none;
    backdrop-filter: none;
    box-shadow: none;
}

.mn-item--compact + .mn-item--compact {
    border-top: 1px solid var(--border);
}

.mn-item--compact .mn-item__media {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    margin-top: var(--sl-space-3);
    border-radius: var(--sl-radius-sm);
}

.mn-item--compact .mn-item__body {
    gap: 2px;
    padding: var(--sl-space-3) 0;
}

.mn-item--compact .mn-item__line {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-columns: auto;
    grid-auto-flow: column;
    align-items: center;
    gap: var(--sl-space-2);
    min-height: 32px;
}

/* The struck price already tells the saving in a dense row. */
.mn-item--compact .mn-item__discount {
    display: none;
}

.mn-item--compact .mn-item__name {
    min-width: 0;
    font-size: var(--sl-text-md);
    font-weight: var(--sl-weight-semibold);
}

.mn-item--compact .mn-item__price {
    font-size: var(--sl-text-sm);
    font-weight: var(--sl-weight-bold);
}

.mn-item--compact .mn-item__desc {
    -webkit-line-clamp: 1;
    line-clamp: 1;
    font-size: var(--sl-text-xs);
}

.mn-item--compact .mn-item__badges .mn-badge:nth-child(n + 3) {
    display: none;
}

.mn-item--compact .mn-badge {
    padding: 0 7px;
}

/* A 44px target that reads as a 30px button in the row. */
.mn-item--compact .mn-add {
    width: 44px;
    height: 44px;
    margin: -6px 0;
    margin-inline-end: -7px;
    border: 0;
    border-radius: 50%;
    background: radial-gradient(circle closest-side, var(--biz-tint-strong) 66%, transparent 69%);
    color: var(--text-h);
    font-size: 18px;
    box-shadow: none;
}

.mn-item--compact .mn-add::before {
    content: none;
}

.mn-item--compact .mn-add:hover {
    background: radial-gradient(circle closest-side, var(--btn-solid) 66%, transparent 69%);
    color: var(--btn-solid-ink);
    transform: none;
}

.mn-item--compact .mn-item__open::after {
    border-radius: 0;
}

.mn-item--compact .mn-sizes {
    margin-top: var(--sl-space-1);
}

@media (prefers-reduced-motion: reduce) {
    .mn-item--polaroid,
    .mn-item--polaroid:hover,
    .mn-item--polaroid:focus-within {
        transition: none;
    }

    .mn-item--polaroid:hover,
    .mn-item--polaroid:focus-within {
        transform: rotate(var(--mn-tilt));
    }
}

/* Sold-out tags on the fixed-colour materials. */
.pr-tag .mn-item--chalk[data-soldout] .mn-item__price {
    background: var(--mn-chalk-dust);
    color: var(--mn-chalk-soft);
}

.pr-tag .mn-item--polaroid[data-soldout] .mn-item__price {
    background: var(--mn-pola-wash);
    color: var(--mn-pola-soft);
}

.pr-tag .mn-item--polaroid .mn-item__price {
    color: var(--accent-ink);
}