/*
 * Parte clienti: il forno a legna di sera.
 *
 * Fondo color fuliggine caldo, testo color mozzarella, zafferano per le azioni
 * e i prezzi, pomodoro per le offerte, basilico per "aperto". I titoli sono in
 * Bricolage Grotesque stretta e pesante, come un'insegna dipinta a mano; il
 * testo corrente in Montserrat. Le pagine clienti sono sempre scure
 * (theme-customer.js): qui si scaldano i colori della palette scura comune,
 * così carrello, ordini e accesso prendono lo stesso aspetto senza riscriverli.
 * Sotto: menu (cm-) e composizione su misura (cb-).
 */

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/montserrat-latin.woff2") format("woff2");
}
@font-face {
    font-family: "Bricolage Grotesque";
    font-style: normal;
    font-weight: 200 800;
    font-stretch: 75% 100%;
    font-display: swap;
    src: url("../fonts/bricolage-latin.woff2") format("woff2");
}

/* ---------------- Palette e caratteri ---------------- */
:root[data-theme="dark"] body.customer-body,
:root[data-theme="dark"] body.auth-body-customer {
    --cm-font: "Montserrat", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    --cm-display: "Bricolage Grotesque", "Montserrat", "Arial Narrow", system-ui, sans-serif;
    --cm-bg: #1f1611;
    --cm-bg-deep: #170f0b;
    --cm-surface: #2b1f18;
    --cm-surface-2: #3a2a20;
    --cm-ink: #fbf1e1;
    --cm-muted: #c4ae95;
    --cm-line: rgba(251, 241, 225, .1);
    --cm-line-strong: rgba(251, 241, 225, .2);
    --cm-sun: #ffb82e;
    --cm-sun-hover: #ffc853;
    --cm-on-sun: #1f1611;
    --cm-tomato: #ff5b3a;
    --cm-on-tomato: #fff6ec;
    --cm-basil: #86d06f;
    --cm-radius: 26px;
    --cm-gutter: 20px;
    --cm-ease: cubic-bezier(.2, .8, .2, 1);

    --serif: var(--cm-display);
    --sans: var(--cm-font);

    /* La palette scura comune, scaldata: la usano anche le altre pagine clienti. */
    --cream: var(--cm-bg);
    --cream-deep: var(--cm-bg-deep);
    --paper: var(--cm-surface);
    --gray-0: var(--cm-surface);
    --gray-50: #251a14;
    --gray-100: var(--cm-surface-2);
    --ink: var(--cm-ink);
    --muted: var(--cm-muted);
    --line: var(--cm-line);
    --line-strong: var(--cm-line-strong);
    --surface-tint: #251a14;
    --theme-primary: var(--cm-sun);
    --theme-dark: var(--cm-sun-hover);
    --theme-ink: var(--cm-sun);
    --theme-soft: rgba(255, 184, 46, .14);
    --theme-rgb: 255, 184, 46;
    --green: var(--cm-sun);
    --green-soft: rgba(255, 184, 46, .14);

    color: var(--cm-ink);
    background: var(--cm-bg);
    font-family: var(--cm-font);
    font-weight: 500;
}
:root[data-theme="dark"] .customer-body h1, :root[data-theme="dark"] .customer-body h2, :root[data-theme="dark"] .customer-body h3, :root[data-theme="dark"] .auth-body-customer h1, :root[data-theme="dark"] .auth-body-customer h2 {
    font-family: var(--cm-display);
    font-weight: 800;
}
:root[data-theme="dark"] .customer-body .eyebrow, :root[data-theme="dark"] .auth-body-customer .eyebrow, :root[data-theme="dark"] .auth-body-customer .auth-kicker, :root[data-theme="dark"] .auth-body-customer .auth-form-badge, :root[data-theme="dark"] .customer-body .auth-form-badge {
    letter-spacing: 0; text-transform: none; font-size: .92rem; font-weight: 600;
}
:root[data-theme="dark"] .customer-body .eyebrow, :root[data-theme="dark"] .auth-body-customer .eyebrow, :root[data-theme="dark"] .auth-body-customer .auth-kicker { color: var(--cm-sun); }
:root[data-theme="dark"] .customer-body :focus-visible, :root[data-theme="dark"] .auth-body-customer :focus-visible { outline: 3px solid var(--cm-sun); outline-offset: 3px; }
:root[data-theme="dark"] .customer-body ::selection { color: var(--cm-on-sun); background: var(--cm-sun); }

:root[data-theme="dark"] .customer-body .button, :root[data-theme="dark"] .auth-body-customer .button { border-radius: 999px; font-family: var(--cm-font); font-weight: 700; }
:root[data-theme="dark"] .customer-body .button-primary, :root[data-theme="dark"] .auth-body-customer .button-primary, :root[data-theme="dark"] .customer-body .button-dark, :root[data-theme="dark"] .auth-body-customer .button-dark {
    color: var(--cm-on-sun); background: var(--cm-sun); box-shadow: none;
}
:root[data-theme="dark"] .customer-body .button-primary:hover, :root[data-theme="dark"] .auth-body-customer .button-primary:hover, :root[data-theme="dark"] .customer-body .button-dark:hover, :root[data-theme="dark"] .auth-body-customer .button-dark:hover { color: var(--cm-on-sun); background: var(--cm-sun-hover); }

/* ---------------- Intestazione e piè di pagina ---------------- */
:root[data-theme="dark"] .customer-body .site-header {
    border-bottom: 1px solid var(--cm-line);
    background: rgba(31, 22, 17, .9);
    box-shadow: none;
}
:root[data-theme="dark"] .customer-body .brand-copy strong { font-family: var(--cm-display); font-weight: 800; font-stretch: 85%; font-size: 1.2rem; letter-spacing: 0; }
:root[data-theme="dark"] .customer-body .brand-copy small { color: var(--cm-muted); letter-spacing: 0; text-transform: none; font-size: .74rem; font-weight: 600; }
:root[data-theme="dark"] .customer-body .brand-mark { color: var(--cm-on-sun); background: var(--cm-sun); box-shadow: none; border-radius: 14px; font-family: var(--cm-display); }
:root[data-theme="dark"] .customer-body .nav-item { border-radius: 999px; font-weight: 700; }
:root[data-theme="dark"] .customer-body .nav-item:hover { color: var(--cm-ink); background: rgba(251, 241, 225, .08); }
:root[data-theme="dark"] .customer-body .nav-item-active, :root[data-theme="dark"] .customer-body .nav-item-active:hover { color: var(--cm-on-sun); background: var(--cm-sun); box-shadow: none; }
:root[data-theme="dark"] .customer-body .cart-count { color: var(--cm-on-tomato); background: var(--cm-tomato); }
:root[data-theme="dark"] .customer-body .site-footer { background: var(--cm-bg-deep); border-top: 1px solid var(--cm-line); }
:root[data-theme="dark"] .customer-body .brand-footer .brand-mark { background: var(--cm-sun); color: var(--cm-on-sun); }

/* ---------------- Elementi comuni del menu ---------------- */
.cm-shell { width: min(1240px, 100% - 2 * var(--cm-gutter)); margin-inline: auto; }
.cm-heading {
    margin: 0 0 22px;
    font-size: clamp(2.1rem, 6vw, 3.4rem);
    line-height: .95;
    font-stretch: 78%;
}

.cm-btn {
    min-height: 56px; padding: 0 30px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 0; border-radius: 999px;
    font: 700 1rem var(--cm-font); text-decoration: none; cursor: pointer;
    transition: background-color .2s ease, transform .12s ease;
}
.cm-btn:active { transform: scale(.97); }
.cm-btn-sun { color: var(--cm-on-sun); background: var(--cm-sun); }
.cm-btn-sun:hover { color: var(--cm-on-sun); background: var(--cm-sun-hover); }

.cm-status {
    min-height: 40px; padding: 0 16px;
    display: inline-flex; align-items: center; gap: 9px;
    border-radius: 999px; border: 1px solid var(--cm-line-strong);
    background: rgba(23, 15, 11, .55);
    color: var(--cm-ink); font-size: .9rem; font-weight: 700;
    backdrop-filter: blur(6px);
}
.cm-status i { width: 9px; height: 9px; border-radius: 50%; background: var(--cm-muted); }
.cm-status-open i { background: var(--cm-basil); box-shadow: 0 0 0 4px rgba(134, 208, 111, .22); }
.cm-status-closed i { background: var(--cm-tomato); }

.cm-search {
    min-height: 48px; padding: 0 18px;
    display: flex; align-items: center; gap: 10px;
    border-radius: 999px; border: 1px solid var(--cm-line);
    background: var(--cm-surface);
    color: var(--cm-muted);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.cm-search:focus-within { border-color: var(--cm-sun); box-shadow: 0 0 0 3px rgba(255, 184, 46, .22); }
.cm-search svg { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.cm-search input {
    flex: 1; min-width: 0; min-height: 46px;
    border: 0; outline: 0; background: transparent;
    color: var(--cm-ink); font: 500 1rem var(--cm-font);
}
/* Il bordo zafferano è già sul contenitore: niente secondo contorno sul campo */
:root[data-theme="dark"] .customer-body .cm-search input:focus-visible { outline: 0; }
.cm-search input::placeholder { color: var(--cm-muted); opacity: .85; }
.cm-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* ---------------- Home: copertina ---------------- */
.cm-hero {
    position: relative; isolation: isolate; overflow: hidden;
    min-height: min(80vh, 720px);
    display: flex; align-items: flex-end;
    padding: 120px 0 64px;
    background: var(--cm-bg);
}
.cm-hero-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.cm-hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(90deg, rgba(31, 22, 17, .94) 0%, rgba(31, 22, 17, .72) 45%, rgba(31, 22, 17, .12) 80%),
        linear-gradient(0deg, var(--cm-bg) 0%, rgba(31, 22, 17, 0) 34%);
}
.cm-hero-plain { min-height: 0; padding: 72px 0 40px; }
.cm-hero-plain::before { display: none; }
.cm-hero-shell { position: relative; display: grid; gap: 28px; }
.cm-hero-copy { max-width: 720px; }
.cm-hero-eyebrow { margin: 0 0 16px; color: var(--cm-sun); font-size: 1.02rem; font-weight: 600; }
.cm-hero h1 {
    margin: 0;
    font-size: clamp(3.1rem, 11vw, 7rem);
    font-stretch: 75%;
    line-height: .88;
    letter-spacing: -.015em;
    text-wrap: balance;
}
.cm-hero-text { max-width: 33rem; margin: 22px 0 0; color: rgba(251, 241, 225, .84); font-size: 1.08rem; line-height: 1.6; }
.cm-hero-actions { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }

/* Il bollino delle offerte: un adesivo sul cartone della pizza */
.cm-sticker {
    width: 172px; height: 172px;
    display: grid; place-content: center; justify-items: center; gap: 4px;
    border-radius: 50%;
    color: var(--cm-on-tomato); background: var(--cm-tomato);
    text-align: center; text-decoration: none;
    rotate: -9deg;
    box-shadow: 0 0 0 6px var(--cm-bg), 0 0 0 8px var(--cm-tomato);
    transition: rotate .4s var(--cm-ease);
}
.cm-sticker:hover { rotate: -3deg; }
.cm-sticker strong { font: 800 3rem/0.9 var(--cm-display); font-stretch: 75%; }
.cm-sticker span { max-width: 112px; font-size: .78rem; font-weight: 700; line-height: 1.25; }

.cm-promises {
    margin-top: 26px; margin-bottom: 0; padding: 0;
    list-style: none;
    display: flex; flex-wrap: wrap; gap: 10px 28px;
    color: var(--cm-muted); font-size: .95rem; font-weight: 600;
}
.cm-promises li { display: inline-flex; align-items: center; gap: 10px; }
.cm-promises li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cm-sun); }

/* ---------------- Home: ricerca ---------------- */
.cm-finder {
    position: sticky; top: calc(var(--cm-header-h, 72px) + 10px); z-index: 40;
    margin-top: 44px;
    scroll-margin-top: calc(var(--cm-header-h, 72px) + 20px);
}
.cm-search-big { min-height: 62px; padding: 0 22px; box-shadow: 0 14px 34px rgba(10, 6, 4, .45); }
.cm-search-big svg { width: 22px; height: 22px; flex-basis: 22px; color: var(--cm-sun); }
.cm-search-big input { min-height: 60px; font-size: 1.05rem; }

/* ---------------- Home: le sezioni ---------------- */
.cm-content { padding: 40px 0 120px; }
.cm-content .flash-stack {
    position: fixed; z-index: 60;
    left: 50%; bottom: max(88px, calc(env(safe-area-inset-bottom) + 88px));
    translate: -50% 0;
    width: min(460px, 100% - 32px); margin: 0;
    pointer-events: none;
}
.cm-body .flash {
    border: 0; border-radius: 18px;
    color: var(--cm-ink); background: var(--cm-surface-2);
    box-shadow: 0 18px 40px rgba(10, 6, 4, .5);
    font-weight: 600;
    animation: cm-toast 4.5s var(--cm-ease) forwards;
}
.cm-body .flash > span:first-child { color: var(--cm-on-sun); background: var(--cm-sun); }
.cm-body .flash-error > span:first-child { color: var(--cm-on-tomato); background: var(--cm-tomato); }
@keyframes cm-toast {
    0% { opacity: 0; transform: translateY(14px); }
    8%, 85% { opacity: 1; transform: none; }
    100% { opacity: 0; transform: translateY(8px); visibility: hidden; }
}

.cm-sections[hidden], .cm-offers[hidden], .cm-results[hidden] { display: none; }
.cm-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
    gap: 16px;
}
.cm-tile {
    position: relative; isolation: isolate; overflow: hidden;
    aspect-ratio: 4 / 3.4;
    display: flex; align-items: flex-end;
    padding: 22px;
    border-radius: var(--cm-radius);
    background: var(--cm-surface);
    color: var(--cm-ink); text-decoration: none;
}
.cm-tile img {
    position: absolute; inset: 0; z-index: -2;
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .6s var(--cm-ease);
}
.cm-tile::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(0deg, rgba(23, 15, 11, .92) 0%, rgba(23, 15, 11, .35) 48%, rgba(23, 15, 11, .05) 100%);
}
.cm-tile:hover img { transform: scale(1.06); }
.cm-tile-fallback {
    position: absolute; right: 16px; bottom: -.18em; z-index: -2;
    color: rgba(255, 184, 46, .16);
    font: 800 13rem/1 var(--cm-display); font-stretch: 75%;
    pointer-events: none;
}
.cm-tile-label { display: grid; gap: 6px; min-width: 0; }
.cm-tile-label strong {
    font: 800 clamp(1.9rem, 4vw, 2.6rem)/.92 var(--cm-display); font-stretch: 75%;
    overflow-wrap: anywhere;
}
.cm-tile-label small { color: var(--cm-muted); font-size: .88rem; font-weight: 600; }
.cm-tile-go {
    position: absolute; right: 18px; top: 18px;
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border-radius: 50%;
    color: var(--cm-on-sun); background: var(--cm-sun);
    transition: transform .3s var(--cm-ease);
}
.cm-tile:hover .cm-tile-go { transform: translateX(3px); }
.cm-tile-go svg, .cm-cartbar svg, .cm-back svg {
    width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
}

/* La creazione su misura: una tessera zafferano tra le sezioni */
.cm-tile-maker { color: var(--cm-on-sun); background: var(--cm-sun); }
.cm-tile-maker::after { display: none; }
/* L'impasto che spunta dall'angolo: cornicione, pomodoro e due fiocchi di mozzarella */
.cm-tile-maker::before {
    content: ""; position: absolute; z-index: -1;
    right: -22%; top: -26%; width: 78%; aspect-ratio: 1; border-radius: 50%;
    background:
        radial-gradient(circle at 38% 62%, #fbf1e1 0 7%, transparent 7.5%),
        radial-gradient(circle at 58% 44%, #fbf1e1 0 6%, transparent 6.5%),
        radial-gradient(circle, var(--cm-tomato) 0 58%, #ffd27a 59% 70%, transparent 71%);
    transition: transform .7s var(--cm-ease);
}
.cm-tile-maker:hover { color: var(--cm-on-sun); }
.cm-tile-maker:hover::before { transform: rotate(40deg); }
.cm-tile-maker .cm-tile-label small { color: rgba(31, 22, 17, .72); }
.cm-tile-maker .cm-tile-go { top: auto; bottom: 18px; color: var(--cm-sun); background: var(--cm-on-sun); }
.cm-tile-maker:hover .cm-tile-go { transform: rotate(90deg); }
.cm-tile-maker .cm-tile-label { padding-right: 56px; }

/* Nella pagina della sezione: un pulsante compatto sotto il titolo */
.cm-make {
    margin-top: 22px;
    min-height: 50px; padding: 0 22px 0 7px;
    display: inline-flex; align-items: center; gap: 10px;
    border-radius: 999px;
    color: var(--cm-on-sun); background: var(--cm-sun);
    font-weight: 700; text-decoration: none;
    transition: background-color .2s ease;
}
.cm-make:hover { color: var(--cm-on-sun); background: var(--cm-sun-hover); }
.cm-make-icon {
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 50%; color: var(--cm-sun); background: var(--cm-on-sun);
    transition: transform .3s var(--cm-ease);
}
.cm-make:hover .cm-make-icon { transform: rotate(90deg); }
.cm-make-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; }

.cm-offers { margin-top: 64px; }
.cm-results .cm-heading { font-size: clamp(1.8rem, 5vw, 2.6rem); }

/* ---------------- Schede prodotto ---------------- */
.cm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 14px; }
.cm-card {
    min-width: 0;
    padding: 14px;
    display: flex; gap: 18px;
    border-radius: 24px;
    background: var(--cm-surface);
    scroll-margin-top: calc(var(--cm-header-h, 72px) + 96px);
}
.cm-card[hidden] { display: none; }
.cm-card:target { box-shadow: 0 0 0 2px var(--cm-sun); }
.cm-card-photo {
    position: relative;
    width: 128px; height: 128px; flex: 0 0 128px;
    border-radius: 18px; overflow: hidden;
    background: var(--cm-surface-2);
}
.cm-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-card-initial {
    width: 100%; height: 100%; display: grid; place-items: center;
    color: rgba(255, 184, 46, .45);
    font: 800 3.4rem/1 var(--cm-display); font-stretch: 75%;
}
.cm-card-badge {
    position: absolute; left: 8px; top: 8px;
    padding: 4px 9px; border-radius: 999px;
    color: var(--cm-on-tomato); background: var(--cm-tomato);
    font: 800 .82rem/1 var(--cm-display);
}
.cm-card-body { flex: 1; min-width: 0; padding: 4px 4px 0 0; display: flex; flex-direction: column; }
.cm-card-section { margin: 0 0 2px; color: var(--cm-sun); font-size: .8rem; font-weight: 600; }
.cm-card h3 {
    margin: 0;
    font-size: 1.42rem; font-weight: 750; font-stretch: 84%;
    line-height: 1.05;
}
.cm-card-text {
    margin: 6px 0 0;
    color: var(--cm-muted); font-size: .88rem; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cm-card-allergens { margin: 4px 0 0; color: rgba(196, 174, 149, .72); font-size: .76rem; line-height: 1.4; }
.cm-card-foot { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cm-card-foot form { margin: 0; }
.cm-price { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; }
.cm-price strong { color: var(--cm-sun); font: 800 1.45rem/1 var(--cm-display); font-stretch: 85%; }
.cm-price s { color: var(--cm-muted); font-size: .86rem; }
.cm-card-promo .cm-price strong { color: var(--cm-tomato); }
.cm-add {
    min-height: 46px; padding: 0 18px 0 14px;
    display: inline-flex; align-items: center; gap: 6px;
    border: 0; border-radius: 999px;
    color: var(--cm-on-sun); background: var(--cm-sun);
    font: 700 .92rem var(--cm-font); cursor: pointer;
    transition: background-color .2s ease, transform .12s ease;
}
.cm-add:hover { background: var(--cm-sun-hover); }
.cm-add:active { transform: scale(.94); }
.cm-add svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; }

.cm-empty, .cm-no-results {
    margin: 8px 0 24px; padding: 36px 24px;
    border: 2px dashed var(--cm-line-strong); border-radius: var(--cm-radius);
    color: var(--cm-muted); text-align: center;
}
.cm-empty h2 { margin: 0 0 6px; }
.cm-empty p { margin: 0; }

/* ---------------- Pagina di una sezione ---------------- */
.cm-cover {
    position: relative; isolation: isolate; overflow: hidden;
    min-height: min(58vh, 520px);
    display: flex; align-items: flex-end;
    padding: 110px 0 44px;
}
.cm-cover-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.cm-cover::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(0deg, var(--cm-bg) 2%, rgba(31, 22, 17, .7) 45%, rgba(31, 22, 17, .25) 100%);
}
.cm-cover-plain { min-height: 0; padding: 48px 0 36px; }
.cm-cover-plain::before { display: none; }
.cm-back {
    position: absolute; top: -78px; left: 0;
    min-height: 42px; padding: 0 16px 0 10px;
    display: inline-flex; align-items: center; gap: 4px;
    border-radius: 999px; background: rgba(23, 15, 11, .6);
    color: var(--cm-ink); font-size: .9rem; font-weight: 700; text-decoration: none;
    backdrop-filter: blur(6px);
}
.cm-back:hover { color: var(--cm-ink); background: rgba(23, 15, 11, .85); }
.cm-cover-plain .cm-back { position: static; margin-bottom: 22px; background: var(--cm-surface); }
.cm-cover-shell { position: relative; }
.cm-cover h1 {
    margin: 0;
    font-size: clamp(3.6rem, 15vw, 9rem);
    font-stretch: 75%;
    line-height: .84;
    letter-spacing: -.02em;
    overflow-wrap: anywhere;
}
.cm-cover-text { max-width: 36rem; margin: 18px 0 0; color: rgba(251, 241, 225, .86); font-size: 1.05rem; line-height: 1.6; }
.cm-cover-meta { margin: 14px 0 0; color: var(--cm-sun); font-size: .95rem; font-weight: 700; }

.cm-bar {
    position: sticky; top: var(--cm-header-h, 72px); z-index: 40;
    border-bottom: 1px solid var(--cm-line);
    background: rgba(31, 22, 17, .94);
    backdrop-filter: blur(14px);
}
.cm-bar-shell { min-height: 70px; padding: 11px 0; display: flex; align-items: center; gap: 14px; }
.cm-chips {
    flex: 1; min-width: 0;
    display: flex; gap: 8px;
    overflow-x: auto; scrollbar-width: none;
}
.cm-chips::-webkit-scrollbar { display: none; }
.cm-chip {
    flex: 0 0 auto;
    min-height: 44px; padding: 0 20px;
    display: inline-flex; align-items: center;
    border-radius: 999px; border: 1px solid var(--cm-line-strong);
    color: var(--cm-ink); font-size: .92rem; font-weight: 700; text-decoration: none; white-space: nowrap;
    transition: background-color .2s ease, border-color .2s ease;
}
.cm-chip:hover { color: var(--cm-ink); background: rgba(251, 241, 225, .07); }
.cm-chip.is-active, .cm-chip.is-active:hover { color: var(--cm-on-sun); border-color: var(--cm-sun); background: var(--cm-sun); }
.cm-bar .cm-search { flex: 0 1 320px; }

.cm-grid-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr)); }

.cm-next { margin-top: 64px; border-top: 1px solid var(--cm-line); }
.cm-next a {
    padding: 30px 0 0;
    display: grid; gap: 6px;
    color: var(--cm-ink); text-decoration: none;
}
.cm-next small { color: var(--cm-muted); font-size: .92rem; font-weight: 600; }
.cm-next strong {
    display: inline-flex; align-items: center; gap: 14px;
    font: 800 clamp(2.4rem, 8vw, 4.6rem)/.9 var(--cm-display); font-stretch: 75%;
    transition: color .2s ease;
}
.cm-next strong::after {
    content: ""; width: .55em; height: .55em; flex: 0 0 .55em;
    border-top: .12em solid currentColor; border-right: .12em solid currentColor;
    rotate: 45deg; translate: -.1em 0;
}
.cm-next a:hover strong { color: var(--cm-sun); }

/* ---------------- Carrello a portata di pollice ---------------- */
.cm-cartbar {
    position: fixed; z-index: 45;
    left: 50%; bottom: max(16px, env(safe-area-inset-bottom));
    translate: -50% 0;
    min-height: 58px; padding: 0 22px 0 10px;
    display: inline-flex; align-items: center; gap: 12px;
    border-radius: 999px;
    color: var(--cm-on-sun); background: var(--cm-sun);
    box-shadow: 0 16px 34px rgba(10, 6, 4, .5);
    font-weight: 800; text-decoration: none; white-space: nowrap;
}
.cm-cartbar:hover { color: var(--cm-on-sun); }
.cm-cartbar-count {
    min-width: 40px; height: 40px; padding: 0 10px;
    display: grid; place-items: center;
    border-radius: 999px; color: var(--cm-sun); background: var(--cm-on-sun);
    font-family: var(--cm-display);
}

/* ---------------- Composizione su misura ---------------- */
.cb-page { padding: 0 0 140px; }
.cb-head { padding: 34px 0 30px; }
.cb-head .cm-back { position: static; margin-bottom: 26px; background: var(--cm-surface); }
.cb-head h1 {
    margin: 0;
    font-size: clamp(3rem, 11vw, 6.4rem);
    font-stretch: 75%;
    line-height: .88;
    letter-spacing: -.015em;
    text-wrap: balance;
}
.cb-head p { max-width: 36rem; margin: 16px 0 0; color: var(--cm-muted); font-size: 1.05rem; line-height: 1.6; }
.cb-layout { display: grid; gap: 28px; align-items: start; }
.cb-steps { display: grid; gap: 22px; min-width: 0; }
.cb-step {
    padding: 26px;
    border-radius: var(--cm-radius);
    background: var(--cm-surface);
}
.cb-step-head { margin-bottom: 18px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cb-step-num {
    width: 42px; height: 42px; flex: 0 0 42px;
    display: grid; place-items: center;
    border-radius: 50%; color: var(--cm-on-sun); background: var(--cm-sun);
    font: 800 1.3rem/1 var(--cm-display);
}
.cb-step-head h2 { margin: 0; font-size: clamp(1.7rem, 4vw, 2.2rem); line-height: 1; font-stretch: 80%; }
.cb-step-head p { flex-basis: 100%; margin: 0; color: var(--cm-muted); font-size: .92rem; }
.cb-step-head .cb-count {
    margin-left: auto;
    padding: 6px 13px; border-radius: 999px;
    color: var(--cm-ink); background: var(--cm-surface-2);
    font-size: .86rem; font-weight: 700;
}
.cb-count.is-full { color: var(--cm-on-tomato); background: var(--cm-tomato); }
.cb-step-note { margin: 0; color: var(--cm-muted); }

.cb-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 10px; }
.cb-option { position: relative; display: block; cursor: pointer; }
.cb-option input { position: absolute; opacity: 0; pointer-events: none; }
.cb-option-face {
    height: 100%; min-height: 76px;
    padding: 14px 14px 14px 16px;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-content: center;
    border-radius: 18px; border: 2px solid var(--cm-line);
    background: var(--cm-bg);
    transition: border-color .18s ease, background-color .18s ease, transform .12s ease;
}
.cb-option:hover .cb-option-face { border-color: var(--cm-line-strong); }
.cb-option input:focus-visible + .cb-option-face { outline: 3px solid var(--cm-sun); outline-offset: 2px; }
.cb-option input:checked + .cb-option-face { border-color: var(--cm-sun); background: rgba(255, 184, 46, .1); }
.cb-option input:active + .cb-option-face { transform: scale(.98); }
.cb-option-name { font: 700 1.15rem/1.1 var(--cm-display); font-stretch: 88%; color: var(--cm-ink); }
.cb-option-price { color: var(--cm-sun); font-weight: 700; font-size: .92rem; white-space: nowrap; }
.cb-option-note { grid-column: 1 / -1; color: var(--cm-muted); font-size: .76rem; line-height: 1.35; }
.cb-option-tick {
    position: absolute; right: -6px; top: -6px;
    width: 26px; height: 26px;
    display: grid; place-items: center;
    border-radius: 50%; color: var(--cm-on-sun); background: var(--cm-sun);
    opacity: 0; transform: scale(.4);
    transition: opacity .18s ease, transform .25s var(--cm-ease);
}
.cb-option-tick svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.cb-option input:checked ~ .cb-option-tick { opacity: 1; transform: none; }
.cb-option.is-blocked .cb-option-face { opacity: .45; }
.cb-step .field-error { display: block; margin-top: 12px; color: var(--cm-tomato); font-weight: 700; }

/* Lo scontrino della creazione */
.cb-receipt {
    padding: 26px;
    border-radius: var(--cm-radius);
    color: var(--cm-on-sun); background: #fbf1e1;
}
.cb-receipt h2 { margin: 0; color: var(--cm-on-sun); font-size: 1.9rem; line-height: 1; font-stretch: 78%; }
.cb-receipt-list {
    margin: 18px 0 0; padding: 16px 0 0; list-style: none;
    border-top: 2px dashed rgba(31, 22, 17, .25);
    display: grid; gap: 9px;
    font-size: .95rem; font-weight: 600;
}
.cb-receipt-list li { display: flex; justify-content: space-between; gap: 12px; }
.cb-receipt-list li span:last-child { white-space: nowrap; }
.cb-receipt-empty { color: rgba(31, 22, 17, .6); font-weight: 500; }
.cb-receipt-total {
    margin: 16px 0 18px; padding-top: 14px;
    border-top: 2px dashed rgba(31, 22, 17, .25);
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    font-weight: 700;
}
.cb-receipt-total strong { font: 800 2.3rem/1 var(--cm-display); font-stretch: 80%; }
.cb-receipt .cm-btn { width: 100%; color: var(--cm-sun); background: var(--cm-on-sun); }
.cb-receipt .cm-btn:hover { color: var(--cm-sun-hover); background: #000; }
.cb-cancel { display: block; margin-top: 12px; color: rgba(31, 22, 17, .7); font-size: .9rem; font-weight: 700; text-align: center; }
.cb-cancel:hover { color: var(--cm-on-sun); }

.cb-closed {
    padding: 40px 26px; border-radius: var(--cm-radius);
    background: var(--cm-surface); text-align: center;
}
.cb-closed h2 { margin: 0 0 8px; font-size: 2rem; }
.cb-closed p { margin: 0 0 20px; color: var(--cm-muted); }

/* ---------------- Schermi larghi ---------------- */
@media (min-width: 900px) {
    :root[data-theme="dark"] body.customer-body { --cm-gutter: 32px; }
    .cm-hero-shell { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
    .cm-sticker { width: 200px; height: 200px; margin: 0 12px 18px 0; }
    .cm-sticker strong { font-size: 3.6rem; }
    .cm-cartbar { display: none; }
    .cm-finder { max-width: 720px; margin-left: max(var(--cm-gutter), (100% - 1240px) / 2); }
    .cm-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* La prima sezione è la più importante: diventa grande, scelta in modo da non lasciare buchi */
    .cm-tiles:has(> .cm-tile:nth-child(3n+5):last-child) > .cm-tile:first-child { grid-row: span 2; aspect-ratio: auto; }
    .cm-tiles:has(> .cm-tile:nth-child(3n+4):last-child) > .cm-tile:first-child { grid-column: 1 / -1; aspect-ratio: 21 / 7; }
    .cm-tiles:has(> .cm-tile:nth-child(3n+5):last-child) > .cm-tile:first-child .cm-tile-label strong,
    .cm-tiles:has(> .cm-tile:nth-child(3n+4):last-child) > .cm-tile:first-child .cm-tile-label strong { font-size: clamp(2.8rem, 5vw, 4.6rem); }
    .cb-layout { grid-template-columns: minmax(0, 1fr) 360px; }
    .cb-receipt { position: sticky; top: calc(var(--cm-header-h, 72px) + 20px); }
}
@media (max-width: 899px) {
    /* Su telefono lo scontrino diventa una barra in fondo con totale e pulsante */
    .cb-receipt {
        position: fixed; z-index: 45; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom));
        padding: 12px 12px 12px 20px;
        display: flex; align-items: center; gap: 12px;
        border-radius: 22px;
        box-shadow: 0 18px 40px rgba(10, 6, 4, .55);
    }
    .cb-receipt h2, .cb-receipt-list, .cb-cancel { display: none; }
    .cb-receipt-total { flex: 1; margin: 0; padding: 0; border: 0; display: grid; gap: 2px; font-size: .8rem; }
    .cb-receipt-total strong { font-size: 1.7rem; }
    .cb-receipt .cm-btn { width: auto; min-height: 52px; padding: 0 22px; }
}
@media (max-width: 600px) {
    .cm-hero { min-height: 600px; padding-top: 96px; padding-bottom: 44px; }
    .cm-hero::before {
        background: linear-gradient(0deg, var(--cm-bg) 6%, rgba(31, 22, 17, .8) 52%, rgba(31, 22, 17, .3) 100%);
    }
    /* Il bollino resta un adesivo, più piccolo, in alto a destra: non copre il titolo */
    .cm-sticker {
        position: absolute; right: 0; top: -210px;
        width: 116px; height: 116px; gap: 2px;
    }
    .cm-sticker strong { font-size: 2.1rem; }
    .cm-sticker span { max-width: 84px; font-size: .64rem; }
    .cm-hero-plain .cm-sticker { position: static; justify-self: start; }
    .cm-search-big { min-height: 56px; }
    .cm-search-big input { min-height: 54px; font-size: 1rem; }
    .cm-bar-shell { flex-direction: column; align-items: stretch; gap: 8px; }
    .cm-bar .cm-search { flex: 1 1 auto; }
    .cm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .cm-tile { aspect-ratio: 4 / 5; padding: 14px; border-radius: 22px; }
    .cm-tile-label strong { font-size: 1.7rem; }
    .cm-tile-label small { font-size: .78rem; }
    .cm-tile-go { width: 36px; height: 36px; right: 12px; top: 12px; }
    .cm-tiles > .cm-tile:first-child { grid-row: auto; }
    .cm-tiles:has(> .cm-tile:nth-child(2n+3):last-child) > .cm-tile:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
    .cm-tiles:has(> .cm-tile:nth-child(2n+3):last-child) > .cm-tile:first-child .cm-tile-label strong { font-size: 2.5rem; }
    .cm-tile-maker .cm-tile-go { bottom: 12px; }
    .cm-tile-maker .cm-tile-label { padding-right: 40px; }
    .cm-card { gap: 14px; padding: 12px; }
    .cm-card-photo { width: 104px; height: 104px; flex-basis: 104px; }
    .cm-card h3 { font-size: 1.25rem; }
    .cm-add span { display: none; }
    .cm-add { width: 46px; height: 46px; padding: 0; justify-content: center; }
    .cm-cover { min-height: 400px; padding-bottom: 32px; }
    .cm-cover-plain { min-height: 0; padding-top: 32px; }
    .cb-step { padding: 20px 16px; }
    .cb-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .cb-option-face { grid-template-columns: 1fr; min-height: 84px; padding: 12px; }
}
@media (max-width: 360px) {
    .cm-card-photo { width: 80px; height: 80px; flex-basis: 80px; border-radius: 14px; }
    .cm-card-initial { font-size: 2.6rem; }
}
@media (prefers-reduced-motion: reduce) {
    .cm-tile img, .cm-sticker, .cm-tile-maker::before, .cm-make-icon, .cb-option-tick, .cb-option-face { transition: none; }
    .cm-body .flash { animation: none; }
}