*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ── Card promozionale storefront (Admin > Messaggi personalizzati) ── */
.promo-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    border: 2px solid #fc070c;
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
}
.promo-card-body { flex: 1; min-width: 0; text-align: var(--pa-d, left); }
/* Allineamento responsive (come Elementor): tablet < 1024px, mobile < 640px.
   Le variabili --pa-t/--pa-m sono già pre-calcolate con cascata lato C#. */
@media (max-width: 1024px) { .promo-card-body { text-align: var(--pa-t, var(--pa-d, left)); } }
@media (max-width: 640px)  { .promo-card-body { text-align: var(--pa-m, var(--pa-t, var(--pa-d, left))); } }
.promo-card-t1 { font-weight: 800; line-height: 1.15; }
.promo-card-t2 { font-weight: 600; margin-top: .25rem; line-height: 1.2; }
.promo-card-lines { list-style: none; margin: .85rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.promo-card-line { display: flex; align-items: center; gap: .6rem; font-size: 15px; color: #1A1A1A; justify-content: var(--pj-d, flex-start); }
/* Le righe promo seguono l'allineamento scelto, anche per dispositivo. */
@media (max-width: 1024px) { .promo-card-line { justify-content: var(--pj-t, var(--pj-d, flex-start)); } }
@media (max-width: 640px)  { .promo-card-line { justify-content: var(--pj-m, var(--pj-t, var(--pj-d, flex-start))); } }
.promo-card-ic { display: inline-flex; flex: 0 0 auto; }
.promo-card-logo { flex: 0 0 auto; }
.promo-card-logo img { display: block; width: 120px; height: 120px; object-fit: contain; border-radius: 14px; }

@media (max-width: 640px) {
    .promo-card { flex-direction: column-reverse; align-items: stretch; text-align: center; gap: .85rem; padding: 1.1rem; }
    .promo-card-line { justify-content: center; }
    .promo-card-logo img { width: 92px; height: 92px; margin: 0 auto; }
}

/* ── Fotocamera + ritaglio foto prodotto (Scatta foto) ── */
.mcam-overlay {
    position: fixed; inset: 0; z-index: 4000;
    background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1rem; padding: 1rem;
}
.mcam-stage { position: relative; width: min(86vw, 70vh); aspect-ratio: 1; }
.mcam-video { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; background: #111; }
.mcam-frame { position: absolute; inset: 0; border: 2px solid rgba(255,255,255,.9); border-radius: 12px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.35); pointer-events: none; }
.mcam-hint { color: #eee; font-size: 14px; text-align: center; }
.mcam-bar { display: flex; gap: .75rem; }
.mcam-btn { padding: 12px 22px; border-radius: 10px; border: 1px solid #888; background: #2a2a2a; color: #fff; font-weight: 600; cursor: pointer; }
.mcam-btn-primary { background: #fc070c; border-color: #fc070c; }
.mcam-cropwrap { display: flex; align-items: center; justify-content: center; }
.mcam-cropframe { position: relative; width: min(82vw, 60vh); aspect-ratio: 1; overflow: hidden; border-radius: 12px; border: 2px solid rgba(255,255,255,.9); touch-action: none; background: #111; }
.mcam-cropimg { position: absolute; top: 0; left: 0; user-select: none; cursor: grab; }
.mcam-zoomrow { display: flex; align-items: center; gap: .75rem; width: min(82vw, 60vh); color: #fff; }
.mcam-zoom { flex: 1; }

/* ── Editor Messaggi personalizzati (Admin) ── */
.adm-msg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
.adm-color { width: 56px; height: 38px; padding: 2px; border: 1px solid #D9CFBA; border-radius: 8px; background: #fff; cursor: pointer; }
.adm-msg-line { padding: .75rem; border: 1px solid #EFE9DC; border-radius: 10px; margin-bottom: .6rem; }
@media (max-width: 900px) { .adm-msg-grid { grid-template-columns: 1fr; } }

/* Picker icona a griglia per i messaggi promo */
.icon-picker { display: flex; flex-wrap: wrap; gap: .4rem; }
.icon-pick {
    width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid #D9CFBA; border-radius: 9px; background: #fff; color: #4A4A4A; cursor: pointer;
    transition: border-color .12s, background .12s, color .12s;
}
.icon-pick:hover { border-color: #fc070c; color: #fc070c; }
.icon-pick--on { border-color: #fc070c; background: #fff1f1; color: #fc070c; box-shadow: 0 0 0 1px #fc070c inset; }

:root {
    --gold: #E2231A;
    --gold-light: #E8D5A3;
    --gold-dark: #B0151B;
    --anthracite: #141414;
    --ivory: #FAF8F3;
    --ivory-dark: #F0EDE4;
    --white: #FFFFFF;
    --text-primary: #1A1A1A;
    --text-secondary: #6B6B6B;
    --border: #E0D9C8;
    --shadow: 0 2px 20px rgba(0,0,0,0.08);
    --shadow-hover: 0 8px 40px rgba(0,0,0,0.14);
    --radius: 12px;
    --radius-sm: 6px;
}

html, body {
    margin: 0 !important;
    padding: 0 !important;
    background: var(--ivory) !important;
    /* Font predefinito = font del TESTO (i titoli usano il font dei titoli tramite le
       loro classi). Così il font scelto in Admin > Tema vale su tutte le schermate. */
    font-family: var(--th-body-font);
    color: var(--text-primary);
    min-height: 100vh;
    /* Nessuno scroll orizzontale: i contenuti restano dentro la larghezza schermo.
       NB: 'clip' (non 'hidden') perché overflow-x:hidden sul root creerebbe un
       contesto di scroll che ROMPE position:sticky dei discendenti (header/catbar). */
    max-width: 100%;
    overflow-x: clip;
}

#app, [b-app], .page, main, article {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

.content {
    padding: 0 !important;
    margin: 0 !important;
}

.top-row {
    display: none !important;
}

a, .btn-link {
    color: var(--gold-dark);
}

/* ── Layout ─────────────────────────────────────── */
.app-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
    gap: 0;
}

.left-panel {
    background: var(--ivory);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-y: auto;
}

.right-panel {
    background: #e8e6e0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1.5rem;
    height: 100vh;
    position: sticky;
    top: 0;
    overflow-y: auto;
}

/* ── User bar ────────────────────────────────────── */
.user-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(226,35,26,0.2);
    margin-bottom: 0.25rem;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.user-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--anthracite);
    font-size: 14px;
    font-weight: 700;
    font-family: var(--th-body-font);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.user-email {
    font-size: 12px;
    color: rgba(255,255,255,0.65);
    font-family: var(--th-body-font);
}

/* Bottone tondo icona — usato per gear e simili */
.icon-btn-round {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(226,35,26,0.3);
    border-radius: 50%;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: all 0.18s;
    flex-shrink: 0;
}

    .icon-btn-round:hover {
        border-color: var(--gold);
        color: var(--gold);
        background: rgba(226,35,26,0.1);
    }

/* Variante per sfondo chiaro (preview controls) */
.preview-controls .icon-btn-round {
    border-color: var(--border);
    color: var(--text-secondary);
}

    .preview-controls .icon-btn-round:hover {
        border-color: var(--gold-dark);
        color: var(--gold-dark);
        background: rgba(154,122,46,0.08);
    }

.logout-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: 1px solid rgba(226,35,26,0.3);
    color: rgba(255,255,255,0.5);
    font-size: 12px;
    font-family: var(--th-body-font);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
}

    .logout-btn:hover {
        border-color: var(--gold);
        color: var(--gold);
        background: rgba(226,35,26,0.08);
    }

/* ── Header ─────────────────────────────────────── */
.menu-header {
    background: var(--anthracite) !important;
    /* No extra left/top/right padding: the .left-panel--full container already pads the tab.
       Only keep a small vertical inner breathing room so the dark strip isn't razor-thin. */
    padding: 0.9rem 1rem;
    /* Stretch full width negating the parent padding, so the dark strip runs edge-to-edge. */
    margin: -1.25rem -1.5rem 0;
    display: flex !important;
    flex-direction: column;
    gap: 1.25rem;
}

.menu-header-top {
    display: flex !important;
    align-items: center;
    gap: 1.25rem;
}

.logo-area {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border: 2px dashed var(--gold);
    border-radius: var(--radius-sm);
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: default;
    overflow: hidden;
    position: relative;
    transition: border-color 0.2s;
}

    .logo-area:hover {
        border-color: var(--gold-light);
    }

    .logo-area img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.logo-placeholder {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--gold);
    font-size: 11px;
    font-family: var(--th-body-font);
    text-align: center;
}

.logo-hover-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: var(--radius-sm);
}

.logo-overlay-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 13px;
    cursor: pointer;
    border: none;
    transition: all 0.15s;
}

.logo-remove-btn {
    background: rgba(220,38,38,0.85);
    color: #fff;
}

    .logo-remove-btn:hover {
        background: #dc2626;
    }

.logo-change-btn {
    background: rgba(255,255,255,0.2);
    color: #fff;
    cursor: pointer;
}

    .logo-change-btn:hover {
        background: rgba(255,255,255,0.35);
    }

.hotel-info {
    flex: 1;
}

.hotel-name-input {
    font-family: var(--th-heading-font);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--white) !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(226,35,26,0.3) !important;
    width: 100%;
    padding: 4px 0;
    outline: none;
    box-shadow: none !important;
}

    .hotel-name-input::placeholder {
        color: rgba(255,255,255,0.3) !important;
    }

    .hotel-name-input:focus {
        border-top-color: var(--gold) !important;
    }

.menu-header-fields {
    display: flex !important;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.field-group {
    display: flex !important;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 130px;
}

.field-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    font-family: var(--th-body-font);
}

.field-input {
    font-family: var(--th-body-font);
    font-size: 15px;
    color: var(--white) !important;
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(226,35,26,0.25) !important;
    border-radius: var(--radius-sm);
    padding: 9px 12px;
    outline: none;
    box-shadow: none !important;
}

    .field-input:focus {
        border-color: var(--gold) !important;
    }

/* Allineato allo stile bottoni della home (.md-btn): niente maiuscolo forzato,
   stesso peso/tipografia, così l'editor admin è coerente con lo storefront. */
.btn-gold {
    font-family: var(--th-body-font);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.01em;
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.btn-gold-outline {
    background: transparent !important;
    border: 1px solid var(--gold) !important;
    color: var(--gold) !important;
}

    .btn-gold-outline:hover {
        background: rgba(226,35,26,0.1) !important;
    }

.btn-gold-fill {
    background: var(--gold) !important;   /* rosso brand */
    color: #fff !important;
    border: none !important;
}

    /* Hover su rosso più scuro (come .md-btn-gold della home), non più il vecchio tan. */
    .btn-gold-fill:hover {
        background: var(--gold-dark) !important;
    }

/* ── Categorie ───────────────────────────────────── */
.categories-wrapper {
    padding: 1.25rem 1.75rem 2rem;
    flex: 1;
}

.categories-list {
    display: grid !important;
    grid-template-columns: 1fr;   /* default: 1 colonna (selezionabile 1/2/3) */
    gap: 0.75rem;
    align-items: start;
}
.categories-list--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.categories-list--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
/* Su schermi stretti le colonne multiple collassano per restare leggibili. */
@media (max-width: 1100px) {
    .categories-list--cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 960px) {
    .categories-list,
    .categories-list--cols-2,
    .categories-list--cols-3 { grid-template-columns: 1fr !important; }
}

/* Toolbar selezione vista categorie (1/2/3 colonne). */
.cat-view-toolbar { display:flex; align-items:center; gap:.6rem; padding:1rem 1.75rem 0; }
.cat-view-label { font-size:13px; font-weight:600; color:var(--text-secondary); }
.cat-view-seg { display:inline-flex; border:1.5px solid #E0D9C8; border-radius:8px; overflow:hidden; }
.cat-view-btn { border:none; background:#fff; color:#6B6B6B; padding:6px 14px; font-size:13px; font-weight:700; cursor:pointer; font-family:var(--th-body-font); }
.cat-view-btn + .cat-view-btn { border-left:1px solid #E0D9C8; }
.cat-view-btn--on { background:#C81E1E; color:#fff; }

/* Category order badge */
.category-order-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 0.5rem;
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
    color: var(--anthracite);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    margin-right: 0.5rem;
}

.category-card {
    background: var(--white) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: box-shadow 0.2s;
}

    .category-card:hover {
        box-shadow: var(--shadow-hover);
    }

    .category-card.drag-over {
        border-color: var(--gold) !important;
    }

.category-header {
    display: flex !important;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 1.1rem;
    background: var(--ivory-dark) !important;
    cursor: pointer;
    user-select: none;
}

.drag-handle {
    color: var(--text-secondary);
    cursor: grab;
    font-size: 18px;
    opacity: 0.4;
    font-family: monospace;
}

.category-name {
    font-family: var(--th-heading-font);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary) !important;
    white-space: nowrap;
}

.category-header-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
}

.category-stats {
    font-size: 10px;
    font-family: var(--th-body-font);
    color: var(--gold-dark);
    font-weight: 600;
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.cat-stat-sep {
    color: var(--border);
    font-weight: 400;
}

.category-name-input {
    font-family: var(--th-heading-font);
    font-size: 1.05rem;
    font-weight: 600;
    flex: 1;
    border: none !important;
    border-bottom: 2px solid var(--gold) !important;
    background: transparent !important;
    outline: none !important;
    padding: 2px 4px;
    box-shadow: none !important;
}

.category-actions {
    display: flex !important;
    gap: 4px;
}

.icon-btn {
    background: none !important;
    border: none !important;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 16px;
    color: var(--text-secondary);
    transition: all 0.15s;
    box-shadow: none !important;
}

    .icon-btn:hover {
        background: var(--ivory) !important;
        color: var(--text-primary) !important;
    }

    .icon-btn.danger:hover {
        background: #fef2f2 !important;
        color: #dc2626 !important;
    }

/* Icone più grandi per i prodotti */
.icon-btn-lg {
    font-size: 20px !important;
    padding: 6px 10px !important;
}

.chevron {
    font-size: 13px;
    color: var(--text-secondary);
    transition: transform 0.2s;
    display: inline-block;
}

    .chevron.open {
        transform: rotate(180deg);
    }

.category-option-row {
    padding: 0.5rem 1rem 0.25rem;
}

.category-option-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary, #555);
    cursor: pointer;
    user-select: none;
}

/* ── Prodotti ────────────────────────────────────── */
.products-list {
    padding: 0.75rem 1rem 1.1rem;
    display: flex !important;
    flex-direction: column;
    gap: 0.6rem;
}

.product-row {
    display: flex !important;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.8rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border) !important;
    background: var(--ivory) !important;
    transition: all 0.15s;
}

    .product-row:hover {
        border-color: var(--gold-light) !important;
    }

    .product-row.drag-over {
        border-color: var(--gold) !important;
        background: #fefae8 !important;
    }

/* Immagine prodotto grande */
.product-img-wrap {
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
}

/* Spinner di caricamento immagine: mostrato finché l'<img> non ha finito di
   caricare (le immagini sono lazy, quindi partono solo quando entrano in vista).
   Alla fine del load un listener globale aggiunge .img-loaded e lo spinner sparisce. */
.product-card-img:not(.img-loaded)::after,
.product-img-wrap:has(.product-thumb):not(.img-loaded)::after {
    content: ""; position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px;
    border: 2.5px solid rgba(0,0,0,.12); border-top-color: #E2231A; border-radius: 50%;
    animation: img-spin .7s linear infinite; z-index: 0; pointer-events: none;
}
.product-card-img img, .product-thumb { position: relative; z-index: 1; }
@keyframes img-spin { to { transform: rotate(360deg); } }

.product-thumb {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    border: 1px solid var(--border);
    display: block;
}
/* Logo di default quando il prodotto non ha foto (come negli altri elenchi). */
.product-thumb--default { object-fit: contain; padding: 6px; background: var(--ivory-dark); }

.product-thumb-placeholder {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-sm);
    background: var(--ivory-dark) !important;
    border: 1px dashed var(--border) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

/* Testo prodotto — nome + descrizione */
.product-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.product-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary) !important;
    font-family: var(--th-body-font);
    cursor: pointer;
}

.product-desc {
    font-size: 12px;
    color: var(--text-secondary);
    font-family: var(--th-body-font);
    font-style: italic;
    line-height: 1.3;
}

.product-name-input {
    font-size: 15px;
    font-weight: 600;
    border: none !important;
    border-bottom: 1px solid var(--gold) !important;
    background: transparent !important;
    outline: none !important;
    padding: 2px 4px;
    font-family: var(--th-body-font);
    box-shadow: none !important;
    width: 100%;
}

.product-desc-input {
    font-size: 12px;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm);
    background: var(--white) !important;
    outline: none !important;
    padding: 4px 8px;
    font-family: var(--th-body-font);
    font-style: italic;
    resize: none;
    color: var(--text-secondary);
    width: 100%;
    box-shadow: none !important;
}

    .product-desc-input:focus {
        border-color: var(--gold) !important;
    }

/* Checkbox pranzo/cena più grandi */
.meal-checks {
    display: flex !important;
    gap: 1rem;
    align-items: center;
    flex-shrink: 0;
}

.meal-check {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-family: var(--th-body-font);
}

    .meal-check input[type=checkbox] {
        width: 22px;
        height: 22px;
        accent-color: var(--gold-dark);
        cursor: pointer;
    }

.product-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
    align-items: stretch;
}
/* Bottoni "Modifica" / "Rimuovi da categoria" etichettati (con icona + testo). */
.menu-act-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:6px 12px;
    border:1.5px solid #E0D9C8; border-radius:8px; background:#fff; color:#3a342b; font-size:13px; font-weight:600;
    font-family:var(--th-body-font); cursor:pointer; white-space:nowrap; transition:all .15s; }
.menu-act-btn:hover { border-color:#C81E1E; color:#C81E1E; background:#FFF8F8; }
.menu-act-btn svg { flex:0 0 auto; }
.menu-act-btn--danger { color:#C81E1E; border-color:#E6BCB8; background:#FFF7F6; }
.menu-act-btn--danger:hover { background:#C81E1E; border-color:#C81E1E; color:#fff; }
.menu-act-x { font-weight:800; font-size:14px; line-height:1; }
/* Tag prodotto (Novità/Vegetariano/Piccante/+18) nella riga dell'editor menù. */
.product-tags-row { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.product-tags-row .sf-tag { box-shadow:none; }

.add-product-btn {
    margin-top: 0.4rem;
    width: 100%;
    padding: 9px;
    background: transparent !important;
    border: 1px dashed var(--border) !important;
    border-radius: var(--radius-sm);
    font-family: var(--th-body-font);
    font-size: 16px;
    color: var(--text-secondary) !important;
    cursor: pointer;
    transition: all 0.15s;
}

    .add-product-btn:hover {
        border-color: var(--gold) !important;
        color: var(--gold-dark) !important;
    }

.add-category-btn {
    width: 100%;
    padding: 14px;
    background: transparent !important;
    border: 2px dashed var(--border) !important;
    border-radius: var(--radius);
    font-family: var(--th-heading-font);
    font-size: 15px;
    color: var(--text-secondary) !important;
    cursor: pointer;
    margin-top: 0.5rem;
    transition: all 0.2s;
}

    .add-category-btn:hover {
        border-color: var(--gold) !important;
        color: var(--gold-dark) !important;
    }

.divider {
    height: 1px;
    background: var(--border);
    margin: 0 1rem;
}

/* ── Preview destra ──────────────────────────────── */
.right-panel-title {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-family: var(--th-body-font);
}

.preview-sticky {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.preview-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 210mm;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.preview-controls {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}

/* ── Mode toggle ─────────────────────────────────── */
.mode-toggle {
    display: flex;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 2px solid var(--gold-dark);
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

.mode-btn {
    flex: 1;
    padding: 8px 14px;
    font-family: var(--th-body-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border: none;
    background: #F5F0E8;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.18s;
    white-space: nowrap;
}

    .mode-btn + .mode-btn {
        border-left: 2px solid var(--gold-dark);
    }

    .mode-btn:hover:not(.active) {
        background: #EDE6D6;
        color: var(--gold-dark);
    }

    .mode-btn.active {
        background: var(--anthracite);
        color: var(--gold);
        font-weight: 700;
        letter-spacing: 0.06em;
    }

/* ── Zoom controls ───────────────────────────────── */
.zoom-controls {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--white);
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.zoom-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    font-size: 18px;
    font-weight: 400;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
    line-height: 1;
    font-family: var(--th-body-font);
    user-select: none;
}

    .zoom-btn:hover {
        background: var(--ivory-dark);
        color: var(--anthracite);
    }

.zoom-label {
    font-size: 11px;
    font-family: var(--th-body-font);
    font-weight: 700;
    color: var(--text-primary);
    min-width: 38px;
    text-align: center;
    border-left: 1.5px solid var(--border);
    border-right: 1.5px solid var(--border);
    line-height: 30px;
    letter-spacing: 0.03em;
}

/* ── Settings panels (overlay + pannello) ────────── */
.panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.25);
    backdrop-filter: blur(2px);
    z-index: 900;
}

.settings-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 901;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: 0 12px 60px rgba(0,0,0,0.22);
    width: 360px;
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 2rem);
    overflow: hidden;
}

/* Popup dimensioni preview: scroll interno se piu' alto del viewport */
.settings-panel.preview-dims-panel {
    width: 380px;
    display: flex;
    flex-direction: column;
}
.settings-panel.preview-dims-panel .settings-panel-body {
    overflow-y: auto;
    max-height: calc(100vh - 6rem);
}
.preview-dims-help {
    font-size: 12px;
    color: #6B6B6B;
    line-height: 1.45;
    margin: 0 0 0.85rem 0;
    padding: 0.6rem 0.75rem;
    background: #FDECEC;
    border: 1px solid #E8D5A3;
    border-radius: 6px;
    font-family: var(--th-body-font);
}

.settings-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--anthracite);
    border-bottom: 2px solid var(--gold-dark);
}

.settings-panel-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
}

.settings-close-btn {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 16px;
    cursor: pointer;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 4px;
    transition: all 0.15s;
}

    .settings-close-btn:hover {
        color: var(--gold);
        background: rgba(255,255,255,0.08);
    }

.settings-panel-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    max-height: 70vh;
    overflow-y: auto;
}

.settings-section-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold-dark);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
}

.settings-divider {
    height: 1px;
    background: var(--border);
    margin: 0.25rem 0;
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.settings-row-check {
    justify-content: space-between;
}

.settings-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--gold-dark);
    cursor: pointer;
    flex-shrink: 0;
}

.settings-label {
    font-size: 12px;
    color: var(--text-primary);
    font-weight: 500;
    flex: 1;
    min-width: 0;
}

.settings-num-wrap {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.settings-num-btn {
    width: 22px;
    height: 26px;
    border: 1.5px solid var(--border);
    background: #fff;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
    padding: 0;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.12s, border-color 0.12s;
    user-select: none;
}

.settings-num-btn:hover {
    background: var(--ivory);
    border-color: var(--gold);
    color: var(--gold-dark);
}

.settings-num-btn:active {
    background: var(--gold-light);
}

.settings-num-input {
    width: 52px;
    padding: 5px 8px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-family: var(--th-body-font);
    font-weight: 600;
    color: var(--text-primary);
    background: var(--white);
    text-align: right;
    transition: border-color 0.15s;
    -moz-appearance: textfield;
}

.settings-text-input {
    flex: 1;
    min-width: 0;
    padding: 6px 9px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-family: var(--th-body-font);
    font-weight: 600;
    color: var(--text-primary);
    background: var(--white);
    transition: border-color 0.15s;
}
.settings-text-input:focus { outline: none; border-color: var(--gold-dark); }

    .settings-num-input::-webkit-outer-spin-button,
    .settings-num-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .settings-num-input:focus {
        outline: none;
        border-color: var(--gold-dark);
    }

    .settings-num-input.input-error {
        border-color: #D94040;
        background: #FFF5F5;
    }

.settings-px {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 500;
    font-family: var(--th-body-font);
}

.settings-error {
    font-size: 11px;
    color: #D94040;
    font-family: var(--th-body-font);
    margin-top: -4px;
    padding-left: 2px;
}

.settings-select {
    flex: 1;
    padding: 6px 10px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-family: var(--th-body-font);
    color: var(--text-primary);
    background: var(--white);
    cursor: pointer;
    transition: border-color 0.15s;
}

    .settings-select:focus {
        outline: none;
        border-color: var(--gold-dark);
    }

.font-preview-sample {
    font-size: 13px;
    color: var(--text-primary);
    padding: 8px 10px;
    background: var(--ivory-dark);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    margin-top: -2px;
    font-style: italic;
    opacity: 0.85;
}

.settings-reset-btn {
    margin-top: 0.25rem;
    padding: 8px 14px;
    background: transparent;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-family: var(--th-body-font);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
    align-self: flex-start;
}

    .settings-reset-btn:hover {
        border-color: var(--gold-dark);
        color: var(--gold-dark);
        background: rgba(154,122,46,0.06);
    }

/* ── Palette colori ──────────────────────────────── */
.color-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.color-label {
    font-size: 12px;
    color: var(--text-primary);
    font-weight: 500;
    flex: 1;
}

.color-input-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.color-swatch {
    width: 36px;
    height: 28px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    padding: 2px;
    background: transparent;
}

.color-hex {
    font-size: 11px;
    font-family: monospace;
    color: var(--text-secondary);
    min-width: 60px;
}

/* ── Foglio A4 con zoom wrapper ──────────────────── */
.a4-wrapper {
    transform-origin: top center;
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    /* L'altezza visiva si adatta allo scale */
    margin-bottom: calc((297mm * var(--scale, 0.9)) - 297mm);
}

/* ── Foglio A4 ───────────────────────────────────── */
.a4-sheet {
    /* Dimensioni lette dalle CSS var --page-w / --page-h impostate inline
       dal Razor a partire dalle const PreviewA4PortraitWidthMm etc. del @code.
       Cosi' le 4 combinazioni A4/A5 portrait/landscape sono tutte tweakable
       da un singolo punto in C#. Fallback a A4 portrait standard. */
    width: var(--page-w, 210mm);
    height: var(--page-h, 297mm);
    background: var(--pb, #FFFFFF);
    box-shadow: 0 4px 32px rgba(0,0,0,0.22);
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}

    .a4-sheet .print-area {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: var(--pb, #FFFFFF);
    }

    .a4-sheet .menu-block {
        width: 100%;
        padding: 10mm 14mm;
        background: var(--pb, #FFFFFF);
        flex-shrink: 0;
    }

/* ── Modalità single: scorre su più pagine ───────── */
.a4-sheet.a4-multipage {
    height: auto;
    min-height: var(--page-h, 297mm);
    overflow: visible;
}

    .a4-sheet.a4-multipage .print-area {
        position: static;
        height: auto;
        overflow: visible;
    }

    /* Linea di confine pagina in preview: dietro al contenuto, non lo taglia.
       --page-h è impostato inline sul foglio (A4 portrait=297mm, landscape=210mm,
       A5 portrait=210mm, landscape=148mm). Una singola riga gold marca la fine di
       ogni pagina virtuale; il contenuto sopra ha z-index: 1 così resta leggibile. */
    .a4-sheet.a4-multipage::before {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        background-image: repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent calc(var(--page-h, 297mm) - 12px),
            rgba(0, 0, 0, 0.05) calc(var(--page-h, 297mm) - 12px),
            rgba(0, 0, 0, 0.05) calc(var(--page-h, 297mm) - 2px),
            rgba(184, 151, 42, 0.75) calc(var(--page-h, 297mm) - 2px),
            rgba(184, 151, 42, 0.75) var(--page-h, 297mm)
        );
    }

    @media print {
        .a4-sheet.a4-multipage::before {
            display: none !important;
        }
    }

    /* Quando il JS di paginazione ha trasformato il foglio in una finestra
       di pagina, nasconde la riga di confine (ogni clone è già un foglio a sé). */
    .a4-sheet[data-paginated="1"]::before {
        display: none !important;
    }

    /* Cloni generati dal JS di paginazione: stessa resa del foglio base,
       con uno stacco visibile tra fogli (≈ simulazione del salto pagina PDF). */
    .a4-sheet-clone {
        position: relative;
    }


    /* Il contenuto va sopra la riga */
    .a4-sheet.a4-multipage .print-area > * {
        position: relative;
        z-index: 1;
    }

.print-spacer {
    flex-shrink: 0;
    background: var(--pb, #FFFFFF);
}

.print-separator {
    width: 100%;
    height: 1px;
    background: #CCCCCC;
    flex-shrink: 0;
}

/* ── Elementi print ──────────────────────────────── */
.print-gold-thick {
    height: 0;
    border-top: 2.5px solid var(--pa, #C81E1E);
    display: block;
}

.print-gold-thin {
    height: 0;
    border-top: 1px solid var(--pa, #D4B96A);
    display: block;
    opacity: 0.6;
}

.print-gap {
    height: 6px;
    display: block;
}

.print-gap-sm {
    height: 3px;
    display: block;
}

.print-header-row {
    /* Layout orizzontale che ottimizza lo spazio: logo a sinistra, tavolo al
       centro, data a destra, tutto su un'unica riga. */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    padding: 4px 0;
}

.print-logo {
    width: 34px;
    height: 34px;
    object-fit: contain;
    flex-shrink: 0;
}

.print-hotel-name {
    font-size: 16px;
    font-weight: bold;
    color: var(--ptm, #1A1A1A);
}

.print-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-self: start;
    text-align: left;
}

.print-header-center {
    justify-self: center;
    text-align: center;
}

.print-date {
    font-size: 13px;
    font-weight: 700;
    color: var(--ptm, #1A1A1A);
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.print-header-right {
    justify-self: end;
    text-align: right;
}

.print-table {
    font-size: 11px;
    font-weight: 700;
    color: var(--ptm, #1A1A1A);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.print-meal-section {
    margin-top: 6px;
}

.print-meal-section-dinner {
    margin-top: 10px;
    border-top: 0.5px solid var(--pts, #7A7469);
    opacity: 0.4;
    padding-top: 6px;
}

.print-meal-section-dinner {
    opacity: 1;
    border-top: 0.5px solid rgba(0,0,0,0.12);
}

.print-meal-title {
    font-size: 10px;
    font-weight: bold;
    color: var(--pmt, #C81E1E);
    letter-spacing: 0.15em;
    margin-bottom: 3px;
}

/* Controllo upload logo (tab Anteprima > Impostazioni header). */
.logo-upload-wrap { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.logo-upload-preview { height:34px; max-width:130px; object-fit:contain; background:#f3f3f3; border:1px solid var(--border); border-radius:6px; padding:2px; }
.logo-upload-btn { cursor:pointer; margin:0; display:inline-flex; align-items:center; gap:5px; }
.logo-upload-remove { color:#B0151B; }

.print-meal-line {
    height: 0;
    border-top: 0.5px solid rgba(0,0,0,0.1);
    display: block;
    margin-bottom: 4px;
}

.print-cat-name {
    font-size: 11px;
    font-weight: bold;
    color: var(--ptm, #1A1A1A);
    margin-top: 6px;
    margin-bottom: 3px;
}

.print-single-row {
    margin-top: 4px;
    margin-bottom: 2px;
    color: var(--ptm, #1A1A1A);
    line-height: 1.4;
    font-weight: bold;
}

.print-single-row-cat {
    font-weight: bold;
}

.print-single-row--centered {
    text-align: center;
}

.print-cat-line {
    height: 0;
    border-top: 0.3px solid rgba(0,0,0,0.1);
    display: block;
    margin-bottom: 3px;
}

/* Griglia prodotti 4 colonne */
.print-product-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 3px 5px;
    margin-bottom: 2px;
    /* Lascia che il grid riempia naturalmente da col 1 ogni riga, senza
       riordinare le celle (auto-flow:row dense provoca posizionamenti
       inattesi quando alcuni card hanno altezze diverse). */
    grid-auto-flow: row;
}

.print-product-card {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    padding: 2px 0;
    /* In stampa evita di tagliare un card a meta' tra due pagine. In
       preview HTML non ha effetto ma e' fondamentale per il PDF reale. */
    break-inside: avoid;
    page-break-inside: avoid;
}

.print-product-img {
    width: 24px;
    height: 24px;
    object-fit: cover;
    border-radius: 3px;
    flex-shrink: 0;
}

.print-product-img-placeholder {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.print-product-info {
    flex: 1;
    min-width: 0;
}

.print-product-name {
    font-size: 10px;
    font-weight: 600;
    color: var(--ptm, #1A1A1A);
    line-height: 1.3;
}

.print-product-desc {
    font-size: 8.5px;
    color: var(--pts, #7A7469);
    font-style: italic;
    line-height: 1.3;
    margin-top: 2px;
}

.print-checkbox {
    width: 24px;
    height: 24px;
    border: 1.5px solid var(--pa, #C81E1E);
    border-radius: 3px;
    background: var(--pb, #FFFFFF);
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── Toast ───────────────────────────────────────── */
.toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: var(--anthracite);
    color: var(--white);
    padding: 12px 24px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    border-left: 3px solid var(--gold);
    z-index: 1000;
    animation: fadeInUp 0.3s ease;
    font-family: var(--th-body-font);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Login ───────────────────────────────────────── */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--anthracite);
}

.login-card {
    background: var(--ivory);
    border-radius: var(--radius);
    padding: 3rem 2.5rem;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.login-logo {
    width: 64px;
    height: 64px;
    background: var(--anthracite);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.login-title {
    font-family: var(--th-heading-font);
    font-size: 1.6rem;
    font-weight: bold;
    color: var(--anthracite);
    margin: 0;
}

.login-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    font-family: var(--th-body-font);
    margin: 0;
}

.login-error {
    width: 100%;
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #dc2626;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-family: var(--th-body-font);
}
.login-error.login-offline {
    background: #fdfaf3;
    border-color: #e8dfc4;
    color: #6f5a1c;
    line-height: 1.5;
}

.login-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 0.5rem;
}

.login-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.login-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-family: var(--th-body-font);
}

.login-input {
    font-family: var(--th-body-font);
    font-size: 15px;
    color: var(--text-primary);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 11px 14px;
    outline: none;
    transition: border-color 0.2s;
}

    .login-input:focus {
        border-color: var(--gold);
    }

.login-btn {
    width: 100%;
    padding: 13px;
    background: var(--gold);
    color: var(--anthracite);
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--th-body-font);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 0.5rem;
}

    .login-btn:hover {
        background: var(--gold-light);
    }

    .login-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 1100px) {
    .app-layout {
        grid-template-columns: 1fr;
    }

    .right-panel {
        position: static;
        height: auto;
        padding: 1.5rem 1rem;
    }
    /* NB: la vecchia regola `.a4-sheet { width: 100%; max-width: 210mm }`
       qui è stata rimossa: combinata col nuovo `.a4-wrapper { width: fit-content }`
       creava una dipendenza circolare (wrapper vuole le dimensioni dei figli,
       i figli volevano il 100% del wrapper) che azzerava la larghezza del
       foglio nel layout a colonna dell'Anteprima, rendendo la preview vuota
       a metà schermo. Il foglio ora usa la sua `width: 210mm` esplicita base. */
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "Si è verificato un errore.";
    }

/* ── Footer ──────────────────────────────────────── */
.app-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 1rem 1.75rem;
    border-top: 1px solid rgba(226,35,26,0.15);
    margin-top: auto;
}

.footer-logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
    opacity: 0.7;
}

.footer-text {
    font-size: 11px;
    font-family: var(--th-body-font);
    color: rgba(255,255,255,0.35);
    letter-spacing: 0.05em;
}

/* ── Login page ──────────────────────────────────── */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--anthracite);
    padding: 1rem;
}

.login-card {
    background: var(--ivory);
    border-radius: var(--radius);
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.login-logo-wrap {
    margin-bottom: 0.6rem;
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Logo a cerchio (semplice), non più il grande lockup nero. */
.login-app-logo {
    width: 116px;
    height: 116px;
    object-fit: contain;
    display: block;
}

.login-title {
    font-family: var(--th-heading-font);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--anthracite);
    margin: 0 0 4px;
}

.login-subtitle {
    font-size: 1.3rem;
    font-weight: 700;
    font-family: var(--th-body-font);
    color: var(--anthracite);
    margin: 0.25rem 0 1.75rem;
}

.login-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.login-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.login-label {
    font-size: 12px;
    font-family: var(--th-body-font);
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.login-input {
    padding: 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: var(--th-body-font);
    color: var(--text-primary);
    background: var(--white);
    transition: border-color 0.15s;
    outline: none;
}

    .login-input:focus {
        border-color: var(--gold-dark);
    }

.login-error {
    font-size: 12px;
    font-family: var(--th-body-font);
    color: #D94040;
    background: #FFF5F5;
    border: 1px solid #F5C2C2;
    border-radius: var(--radius-sm);
    padding: 8px 12px;
}

/* Bottone ACCEDI coerente col resto dell'app: rosso brand pieno, testo bianco
   (come "Accedi" nell'header e "Procedi" nel carrello), non più nero/rosso. */
.login-btn {
    margin-top: 0.5rem;
    width: 100%;
    padding: 12px;
    background: var(--th-accent, #E2231A);
    border: none;
    border-radius: var(--radius-sm);
    color: #fff;
    font-size: 14px;
    font-family: var(--th-body-font);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.18s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

    .login-btn:hover:not(:disabled) {
        background: #B0151B;
    }

    .login-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

.login-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.login-footer-brand {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    opacity: 1;
}

.login-brand-logo {
    width: 126px; /* 240 -25% -30% ≈ 126px */
    height: auto;
    object-fit: contain;
}

.login-footer-brand span {
    font-size: 12px;
    font-family: var(--th-heading-font);
    font-style: italic;
    color: var(--text-secondary);
}

.login-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.login-input-pw {
    width: 100%;
    padding-right: 2.75rem;
}

.login-pw-toggle {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    transition: color 0.15s;
}

    .login-pw-toggle:hover {
        color: var(--text-primary);
    }

.login-brand-link {
    text-decoration: none;
    transition: opacity 0.18s;
}

    .login-brand-link:hover {
        opacity: 0.7;
    }

/* ── Users page ──────────────────────────────────── */
.users-page-wrap {
    min-height: 100vh;
    background: var(--ivory, #FAF8F3);
    font-family: var(--th-body-font);
}

.users-page {
    max-width: 700px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    font-family: var(--th-body-font);
}

.users-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.btn-back {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 14px;
    font-size: 13px;
    font-family: var(--th-body-font);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}

    .btn-back:hover {
        border-color: var(--gold-dark);
        color: var(--gold-dark);
    }

.users-title {
    font-family: var(--th-heading-font);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
}

.users-card {
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow);
}

.users-card-title {
    font-family: var(--th-heading-font);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.users-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.users-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.users-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.users-input, .users-select {
    padding: 9px 13px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: var(--th-body-font);
    color: var(--text-primary);
    background: var(--white);
    outline: none;
    transition: border-color 0.15s;
}

    .users-input:focus, .users-select:focus {
        border-color: var(--gold-dark);
    }

.users-error {
    font-size: 12px;
    color: #D94040;
    background: #FFF5F5;
    border: 1px solid #F5C2C2;
    border-radius: var(--radius-sm);
    padding: 8px 12px;
}

.users-success {
    font-size: 12px;
    color: #2D8A4E;
    background: #F0FFF5;
    border: 1px solid #B2DFC4;
    border-radius: var(--radius-sm);
    padding: 8px 12px;
}

.btn-create {
    align-self: flex-start;
    padding: 10px 20px;
    background: var(--anthracite);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--gold);
    font-size: 13px;
    font-family: var(--th-body-font);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
}

    .btn-create:hover:not(:disabled) {
        background: #262626;
    }

    .btn-create:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

.users-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.users-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--ivory-dark);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.users-row-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.users-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--anthracite);
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.users-email {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.users-role-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 20px;
    margin-top: 2px;
}

.role-admin {
    background: var(--anthracite);
    color: var(--gold);
}

.role-user {
    background: var(--ivory);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.users-you {
    font-size: 11px;
    color: var(--text-secondary);
    font-style: italic;
}

.btn-delete {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}

    .btn-delete:hover {
        border-color: #D94040;
        color: #D94040;
        background: #FFF5F5;
    }

.users-loading, .users-empty {
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
    padding: 1rem;
}

/* ── Site footer (pagine normali) ────────────────── */
.site-footer {
    width: 100%;
    padding: 1.25rem 2rem 1.5rem;
    font-family: var(--th-body-font);
    background: #000;
    color: rgba(255,255,255,0.75);
}

.site-footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: 1rem;
}

.site-footer-brand {
    display: flex;
    align-items: center;
}

.site-footer-logo {
    height: 44px;
    width: auto;
    object-fit: contain;
    display: block;
}

.site-footer-links {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.site-footer-link {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s;
}

    .site-footer-link:hover {
        color: #fff;
    }

/* I link legali del footer sono <button> per aprire il modal: azzero lo stile bottone */
.site-footer-linkbtn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--th-body-font);
}

.site-footer-sep {
    color: rgba(255,255,255,0.25);
    font-size: 12px;
}

/* ── Popup documenti legali (privacy/cookie/termini) ── */
.policy-overlay { position:fixed; inset:0; z-index:1200; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; padding:1rem; animation:sf-fade .15s ease; }
.policy-modal { width:100%; max-width:760px; max-height:88vh; display:flex; flex-direction:column; background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 24px 70px rgba(0,0,0,.45); }
.policy-head { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.25rem; background:#141414; color:#fff; font-size:1.05rem; font-weight:800; }
.policy-close { background:none; border:none; color:#fff; font-size:1.8rem; line-height:1; cursor:pointer; padding:0 .25rem; }
.policy-close:hover { color:#E2231A; }
.policy-body { overflow-y:auto; padding:1.25rem 1.5rem; font-family:var(--th-body-font); font-size:14px; line-height:1.6; color:#222; }
.policy-body h1, .policy-body h2, .policy-body h3 { color:#141414; }
.policy-body a { color:#E2231A; }
.policy-body img { max-width:100%; height:auto; }

/* ── Gestione Email (admin) ── */
.em-form { display:grid; grid-template-columns:repeat(3, 1fr); gap:.9rem; margin-top:1rem; }
.em-field { display:flex; flex-direction:column; gap:5px; }
.em-col-2 { grid-column:span 2; }
.em-col-3 { grid-column:1 / -1; }
.em-check { display:inline-flex; align-items:center; gap:.5rem; font-size:14px; color:#1A1A1A; font-family:var(--th-body-font); cursor:pointer; }
@media (max-width:680px) { .em-form { grid-template-columns:1fr; } .em-col-2, .em-col-3 { grid-column:auto; } }

.em-list { display:flex; flex-direction:column; gap:.75rem; }
.em-row { background:#fff; border:1px solid #E0D9C8; border-radius:10px; padding:.85rem 1rem; }
.em-row-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; cursor:pointer; }
.em-row-main { min-width:0; }
.em-subject { font-weight:700; color:#1A1A1A; font-family:var(--th-body-font); }
.em-meta { font-size:12.5px; color:#777; margin-top:2px; word-break:break-word; }
.em-audience { display:inline-block; background:#F0EDE4; color:#444; border-radius:20px; padding:1px 9px; font-weight:700; font-size:11px; }
.em-status { flex:0 0 auto; align-self:center; white-space:nowrap; border-radius:20px; padding:4px 12px; font-size:12px; font-weight:700; font-family:var(--th-body-font); }
.em-status-Sent { background:#E4F5EA; color:#1E7C42; border:1px solid #B7E3C6; }
.em-status-Failed { background:#FBEAEA; color:#B83232; border:1px solid #F1C4C4; }
.em-status-Pending { background:#FFF4E0; color:#9A6B2E; border:1px solid #F0D9A8; }
.em-error { margin-top:.5rem; font-size:12.5px; color:#B83232; background:#FBEAEA; border:1px solid #F1C4C4; border-radius:8px; padding:6px 10px; word-break:break-word; }
.em-body-wrap { margin-top:.7rem; border:1px solid #E0D9C8; border-radius:8px; overflow:auto; max-height:420px; }
.em-body { padding:1rem 1.15rem; font-family:var(--th-body-font); font-size:13.5px; line-height:1.55; color:#222; }
.em-body table { border-collapse:collapse; }
.em-body a { color:#E2231A; }
.em-row-actions { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.7rem; }

/* ── Editor prodotto: attributi piatto + foto in attesa ── */
.edit-attr-row { display:flex; flex-wrap:wrap; gap:.5rem; margin:.3rem 0 .25rem; }
.edit-attr-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border:1.5px solid #E0D9C8; border-radius:20px; font-size:13px; font-weight:600; font-family:var(--th-body-font); color:#444; cursor:pointer; user-select:none; transition:all .15s; }
.edit-attr-chip input { accent-color:#C81E1E; }
.edit-attr-chip--on { background:#FBF1F0; border-color:#E2231A; color:#B0151B; }
.edit-img-thumb--ready { display:flex; align-items:center; justify-content:center; background:#E4F5E8; color:#1E7C42; font-size:1.6rem; font-weight:800; cursor:pointer; }
.edit-img-pending { font-size:12px; color:#1E7C42; margin-top:4px; flex-basis:100%; }

.site-footer-divider {
    height: 1px;
    background: rgba(255,255,255,0.12);
    width: 100%;
}

.site-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-top: 1rem;
    font-size: 12px;
}

.site-footer-copy {
    color: rgba(255,255,255,0.55);
    font-weight: 500;
}

.site-footer-powered {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,0.7);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.18s, opacity 0.18s;
}

    .site-footer-powered:hover {
        color: #fff;
        opacity: 1;
    }

    .site-footer-powered:hover .site-footer-powered-name {
        color: #fff;
    }

.site-footer-powered-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
}

.site-footer-powered-name {
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    letter-spacing: 0.01em;
}

@media (max-width: 640px) {
    .site-footer-top,
    .site-footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* Wrapper per pagine con footer globale */
.page-with-footer {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

    .page-with-footer > .app-layout {
        flex: 1;
        min-height: auto;
    }

    .page-with-footer > .up-page {
        flex: 1;
    }

    .page-with-footer > .site-footer {
        flex-shrink: 0;
    }

/* ══════════════════════════════════════════════════════════════
   MAIN TAB BAR  – single fixed-height row
   ══════════════════════════════════════════════════════════════ */
.main-tab-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    background: var(--ivory);
    border-bottom: 2px solid var(--border);
    padding: 0 1.5rem;
    height: 52px;
    position: sticky;
    top: 58px; /* impilata sotto la StoreHeader (sticky top:0) */
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    gap: 0;
}
@media (max-width: 640px) { .main-tab-bar { top: 50px; } }

/* Barra superiore "Torna alla dashboard" nelle viste editor (Menù/Stampa),
   coerente con Ordini e le altre schermate admin: il pulsante in cima, e (solo
   nell'editor Menù) la barra dei tab come SECONDA riga sotto. */
.admin-backbar { padding: 1rem 1.5rem 0; }
.admin-backbar .md-back-btn { margin-bottom: .85rem; }
@media (max-width: 640px) { .admin-backbar { padding: .75rem .9rem 0; } }

/* Freccia "torna alla dashboard" nella tab bar dell'editor */
.tab-back-btn { flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:36px; height:36px; margin-right:.5rem; border:1.5px solid var(--border); border-radius:8px; background:#fff; color:#141414; cursor:pointer; transition:all .15s; }
.tab-back-btn:hover { background:#E2231A; border-color:#E2231A; color:#fff; }
/* Il bottone unificato dentro la tab bar: niente margin-bottom (sballerebbe il
   centraggio verticale nella barra alta 52px), solo un po' di aria a destra. */
.main-tab-bar .admin-back-btn { flex:0 0 auto; margin:0 .6rem 0 0; }

.tab-buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
    gap: 0;
}

.tab-btn {
    display: inline-flex;
    align-items: center;
    height: 100%;
    padding: 0 1.4rem;
    background: none;
    border: none;
    /* active indicator via inset shadow – avoids layout tricks with border-bottom */
    box-shadow: inset 0 -3px 0 transparent;
    font-size: 0.9rem;
    font-family: inherit;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, box-shadow 0.15s;
    letter-spacing: 0.02em;
}

.tab-btn:hover {
    color: var(--gold-dark);
}

.tab-btn--active {
    color: var(--gold-dark);
    font-weight: 700;
    box-shadow: inset 0 -3px 0 var(--gold);
}

.tab-user-area {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* ── Tab-bar specific overrides (light ivory background) ── */
.tab-user-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 0.5rem;
    border-left: 1px solid var(--border);
    margin-left: 0.25rem;
}

.tab-user-email {
    font-size: 12px;
    color: var(--text-secondary);
    font-family: var(--th-body-font);
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Override ghost styles for buttons inside the tab bar */
.tab-bar-btn.icon-btn-round {
    color: var(--text-secondary);
    border-color: var(--border);
    background: transparent;
}

.tab-bar-btn.icon-btn-round:hover {
    color: var(--gold-dark);
    border-color: var(--gold);
    background: rgba(226,35,26,0.08);
}

.tab-bar-btn.logout-btn {
    color: var(--text-primary);
    border-color: var(--border);
    background: var(--white);
    font-weight: 600;
    font-size: 0.82rem;
}

.tab-bar-btn.logout-btn:hover {
    color: #b91c1c;
    border-color: #fca5a5;
    background: #fff1f2;
}

/* ── Menu tab: single-column full-width panel ── */
.menu-tab-panel {
    display: block;
    min-height: calc(100vh - 52px);
}

.left-panel--full {
    border-right: none;
    max-width: 100%;
    margin: 0;
    width: 100%;
    min-height: calc(100vh - 52px);
    padding: 1.25rem 1.5rem 3rem;
}

/* ── Anteprima tab: right-panel takes full page ── */
.right-panel--full {
    width: 100%;
    min-height: calc(100vh - 52px);
    background: #e8e6e0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1.5rem;
    overflow-y: auto;
}

/* keep app-layout compatible for any remaining uses */
.main-tab-bar ~ .app-layout,
.page-with-footer .app-layout {
    min-height: calc(100vh - 52px);
}

/* ══════════════════════════════════════════════════════════════
   PRODUCTS TAB
   ══════════════════════════════════════════════════════════════ */
.products-tab-content {
    padding: 1.25rem 1.5rem 3rem;
    width: 100%;
    margin: 0;
}

.products-tab-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

/* ── Search bar ── */
.products-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
}

.products-search-icon {
    position: absolute;
    left: 0.75rem;
    color: var(--text-secondary);
    pointer-events: none;
    flex-shrink: 0;
}

.products-search-input {
    width: 100%;
    padding: 0.55rem 2.4rem 0.55rem 2.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-family: inherit;
    background: var(--white);
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.products-search-input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(226,35,26,0.12);   /* focus rosso brand */
}

.products-search-clear {
    position: absolute;
    right: 0.6rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0.2rem 0.3rem;
    border-radius: 4px;
    line-height: 1;
    transition: color 0.15s;
}

.products-search-clear:hover { color: var(--text-primary); }

/* ── Category filter chips ── */
.products-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
}

.products-filter-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 0.2rem;
}

.filter-chip {
    padding: 0.28rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--white);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
    font-weight: 500;
}

.filter-chip:hover {
    border-color: var(--gold);
    color: var(--gold-dark);
}

.filter-chip--active {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--white);
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(226,35,26,0.30);   /* glow rosso brand */
}

.filter-chip-clear {
    padding: 0.28rem 0.8rem;
    border: 1px dashed var(--border);
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.filter-chip-clear:hover { color: #c0392b; border-color: #c0392b; }

.products-tab-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.03em;
}

.products-empty {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-secondary);
    font-size: 1rem;
}

.products-grid {
    display: grid;
    /* Card un po' più larghe per ospitare i due bottoni etichettati Modifica/Elimina. */
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 1rem;
}

.product-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: box-shadow 0.2s, transform 0.15s;
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.product-card-img {
    width: 100%;
    aspect-ratio: 1 / 1;   /* quadrata, come le card ingredienti */
    background: var(--ivory-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

.product-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* nitida: riempie il quadrato senza deformare */
    display: block;
}

.product-card-img-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    cursor: pointer;
    color: var(--text-secondary);
    transition: background 0.15s;
}

.product-card-img-placeholder:hover {
    background: var(--ivory-dark);
}

.product-card-img-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.42);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    opacity: 0;
    transition: opacity 0.2s;
}

.product-card-img:hover .product-card-img-overlay {
    opacity: 1;
}

/* Immagine di default (logo) quando il prodotto non ha una foto: mostrata
   contenuta e attenuata come placeholder, con l'overlay "Aggiungi foto" all'hover. */
.product-card-img--default { object-fit: contain; padding: 16%; opacity: .5; background: #fff; }

.img-overlay-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.55);
    background: rgba(255,255,255,0.15);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    backdrop-filter: blur(4px);
}

.img-overlay-btn:hover {
    background: rgba(255,255,255,0.3);
    border-color: rgba(255,255,255,0.9);
    transform: scale(1.08);
}

.img-overlay-btn--danger:hover {
    background: rgba(200,40,40,0.65);
    border-color: rgba(255,100,100,0.8);
}

.product-card-body {
    padding: 0.75rem 0.875rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.product-card-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-primary);
    line-height: 1.3;
    cursor: default;
}

.product-card-desc {
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-style: italic;
    line-height: 1.3;
}

.product-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.4rem;
}

.product-cat-tag {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: rgba(226,35,26,0.12);
    border: 1px solid rgba(226,35,26,0.35);
    color: var(--gold-dark);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.product-card-actions {
    /* Flex con wrap: i bottoni Modifica/Elimina stanno affiancati quando la card
       è abbastanza larga, e si IMPILANO automaticamente (uno per riga, a piena
       larghezza) quando la card è stretta — così non sforano MAI fuori dalla card. */
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: auto;
    padding-top: 0.6rem;
}
.product-card-actions .md-btn,
.product-card-actions .menu-act-btn {
    flex: 1 1 84px;     /* affiancati se c'è spazio per ~2×84px, altrimenti a capo */
    min-width: 84px;
    justify-content: center;
    gap: 5px;
    padding: 8px 6px;
    white-space: nowrap;
}
.product-card-actions .md-btn svg,
.product-card-actions .menu-act-btn svg { flex: 0 0 auto; }

/* ══════════════════════════════════════════════════════════════
   MENU TAB: product row read-only variant
   ══════════════════════════════════════════════════════════════ */
.product-row--menu .product-img-wrap {
    cursor: default !important;
}

/* Drag-handle visibile sui prodotti per indicare la possibilità di riordinare. */
.product-drag-handle {
    flex-shrink: 0;
    width: 22px;
    color: var(--text-secondary);
    cursor: grab;
    user-select: none;
    font-size: 1rem;
    line-height: 1;
    text-align: center;
    letter-spacing: -2px;
    opacity: 0.5;
    transition: opacity 0.15s, color 0.15s;
}
.product-row:hover .product-drag-handle { opacity: 1; color: var(--gold-dark); }
.product-drag-handle:active { cursor: grabbing; }

.product-row--drag-over {
    background: var(--ivory) !important;
    box-shadow: inset 0 2px 0 var(--gold);
}

/* Import button style */
.import-btn {
    background: linear-gradient(135deg, #f5f0e8, #ebe5d5) !important;
    border: 1px dashed var(--gold) !important;
    color: var(--gold-dark) !important;
    font-weight: 600 !important;
}

.import-btn:hover {
    background: linear-gradient(135deg, #ebe5d5, #ddd5c0) !important;
}

/* ══════════════════════════════════════════════════════════════
   IMPORT MODAL
   ══════════════════════════════════════════════════════════════ */
.import-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(560px, 94vw);
    max-height: 80vh;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.import-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: var(--ivory);
}

.import-modal-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.import-modal-search {
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--border);
}

.import-search-input {
    width: 100%;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-family: inherit;
    background: var(--ivory);
    outline: none;
}

.import-search-input:focus {
    border-color: var(--gold);
}

.import-modal-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0;
}

.import-empty {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.import-product-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1.25rem;
    cursor: pointer;
    transition: background 0.1s;
}

.import-product-row:hover {
    background: var(--ivory-dark);
}

.import-product-row--selected {
    background: rgba(226,35,26,0.1);
}

.import-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--gold);
    flex-shrink: 0;
    cursor: pointer;
}

.import-product-img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    border: 1px solid var(--border);
}

.import-product-img-placeholder {
    width: 44px;
    height: 44px;
    background: var(--ivory-dark);
    border: 1px solid var(--border);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    color: var(--text-secondary);
}

.import-product-info {
    flex: 1;
    min-width: 0;
}

.import-product-name {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.import-product-desc {
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-style: italic;
    margin-top: 2px;
}

.import-modal-footer {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--border);
    background: var(--ivory);
}

.import-add-product-btn {
    margin-right: auto;
}

/* ── Outline button ── */
.btn-outline {
    padding: 0.5rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.btn-outline:hover {
    background: var(--ivory-dark);
    color: var(--text-primary);
}

/* ══════════════════════════════════════════════════════════════
   IMPERSONATE BANNER (admin remote support)
   ══════════════════════════════════════════════════════════════ */
.impersonate-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.55rem 1rem;
    background: linear-gradient(90deg, #141414 0%, #262626 100%);
    color: #E2231A;
    font-size: 0.85rem;
    font-weight: 600;
    border-bottom: 1px solid #1a1a1a;
}
.impersonate-banner-btn {
    padding: 0.3rem 0.85rem;
    border: 1px solid #E2231A;
    border-radius: var(--radius-sm);
    background: transparent;
    color: #E2231A;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.impersonate-banner-btn:hover {
    background: #E2231A;
    color: #141414;
}

/* ══════════════════════════════════════════════════════════════
   OFFLINE / SYNC BANNER (bottom of page)
   ══════════════════════════════════════════════════════════════ */
.offline-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 1rem;
    font-size: 0.82rem;
    border-top: 1px solid transparent;
    flex-wrap: wrap;
}
.offline-banner--offline {
    background: #fdf3f2;
    color: #8e2a22;
    border-top-color: #e4c4c0;
}
.offline-banner--syncing {
    background: #fdfaf3;
    color: #B0151B;
    border-top-color: #e8dfc4;
}
.offline-banner--pending {
    background: #f7f3e8;
    color: #6f5a1c;
    border-top-color: #e8dfc4;
}
.offline-banner-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #b3382e;
    box-shadow: 0 0 0 3px rgba(179, 56, 46, 0.18);
    flex-shrink: 0;
}
.offline-banner-spinner {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #e8dfc4;
    border-top-color: #C81E1E;
    animation: offline-spin 0.9s linear infinite;
    flex-shrink: 0;
}
@keyframes offline-spin { to { transform: rotate(360deg); } }
.offline-banner-pending {
    margin-left: auto;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background: rgba(179, 56, 46, 0.12);
    color: #8e2a22;
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.offline-banner-retry {
    margin-left: auto;
    padding: 0.25rem 0.7rem;
    border: 1px solid #C81E1E;
    border-radius: var(--radius-sm);
    background: #fff;
    color: #B0151B;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s;
}
.offline-banner-retry:hover { background: var(--ivory); }
.offline-banner-error {
    flex-basis: 100%;
    font-size: 0.72rem;
    color: #b3382e;
    font-style: italic;
    margin-top: 0.15rem;
}

/* ══════════════════════════════════════════════════════════════
   DAY NAVIGATION (Menu tab header)
   ══════════════════════════════════════════════════════════════ */
.day-nav {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.day-nav-input {
    width: auto;
    min-width: 150px;
}
/* Replace the browser-default (gray) calendar picker icon with a gold one
   so it matches the rest of the tab/icon palette. Works in Chromium-based
   browsers (Chrome, Edge, Opera). The data-URI is a single-stroke SVG of
   a calendar; %23C81E1E is the URL-encoded gold accent (#C81E1E). */
input[type="date"]::-webkit-calendar-picker-indicator {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23C81E1E' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='16' rx='2'/><path d='M3 10h18M8 3v4M16 3v4'/></svg>");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    opacity: 1;
    filter: none;
}
.day-nav-btn {
    height: 36px;
    min-width: 36px;
    padding: 0 0.55rem;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text-primary);
    font-size: 1rem;
    line-height: 1;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.day-nav-btn:hover {
    background: var(--ivory);
    border-color: var(--gold);
    color: var(--gold-dark);
}
.day-nav-btn--today {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.day-nav-btn--today.is-today {
    background: var(--gold);
    border-color: var(--gold-dark);
    color: #fff;
    cursor: default;
}
.day-nav-history {
    height: 36px;
    padding: 0 0.85rem;
    margin-left: 0.4rem;
    border: 1px solid var(--gold);
    background: #fff;
    color: var(--gold-dark);
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    line-height: 1;
}
.day-nav-history:hover {
    background: var(--ivory);
}
.history-icon-svg {
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
}
.history-header h3 {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* ══════════════════════════════════════════════════════════════
   CRONOLOGIA POPUP
   ══════════════════════════════════════════════════════════════ */
.history-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}
.history-modal {
    background: #fff;
    border-radius: var(--radius-md, 8px);
    width: 100%;
    max-width: 560px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}
.history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: var(--ivory);
}
.history-header h3 {
    margin: 0;
    font-size: 1.05rem;
    color: var(--gold-dark);
    font-weight: 600;
}
.history-close {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 1.4rem;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
}
.history-close:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-primary);
}
.history-hint {
    padding: 0.75rem 1.25rem;
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
    background: #fcfcfc;
}
.history-empty {
    padding: 2rem 1.25rem;
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
}

/* ── Search bar in cronologia (list mode) ─────────────────────── */
.history-search {
    position: relative;
    padding: 0.6rem 1.25rem 0.7rem;
    border-bottom: 1px solid var(--border);
    background: #fcfcfc;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.history-search-icon {
    position: absolute;
    left: calc(1.25rem + 0.55rem);
    pointer-events: none;
}
.history-search-input {
    flex: 1;
    height: 34px;
    padding: 0 1.8rem 0 2rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--text-primary);
    transition: border-color 0.12s, box-shadow 0.12s;
}
.history-search-input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(184, 151, 42, 0.15);
}
.history-search-clear {
    position: absolute;
    right: calc(1.25rem + 0.4rem);
    width: 22px;
    height: 22px;
    border: none;
    background: var(--ivory);
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.history-search-clear:hover {
    background: var(--gold-light);
    color: var(--gold-dark);
}
.history-list {
    list-style: none;
    margin: 0;
    padding: 0.25rem 0;
    overflow-y: auto;
    flex: 1;
}
.history-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 1.25rem;
    border-bottom: 1px solid #f1efe8;
    gap: 1rem;
}
.history-row:last-child { border-bottom: none; }
.history-row--current {
    background: var(--ivory);
}
.history-row-label {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.history-row-date {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
}
.history-row-weekday {
    font-size: 0.78rem;
    color: var(--text-secondary);
    text-transform: capitalize;
}
.history-row-badge {
    align-self: flex-start;
    font-size: 0.7rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--gold);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.2rem;
}
.history-row-actions {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
    align-items: center;
}

.history-context {
    padding: 0.85rem 1.25rem;
    background: linear-gradient(180deg, #fcf8ec 0%, #fdfaf3 100%);
    border-bottom: 1px solid var(--border);
}
.history-context-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}
.history-context-day {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gold-dark);
    text-transform: capitalize;
    margin-top: 0.15rem;
}

.history-legend {
    padding: 0.65rem 1.25rem;
    background: #fafaf7;
    border-bottom: 1px solid var(--border);
    font-size: 0.78rem;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.history-legend strong { color: var(--text-primary); }
.history-legend-icon {
    display: inline-block;
    width: 1.1rem;
    text-align: center;
    color: var(--gold-dark);
    font-weight: bold;
}

.history-row-busy-label {
    font-size: 0.7rem;
    color: var(--gold-dark);
    font-style: italic;
    margin-top: 0.15rem;
}
.history-row--busy { opacity: 0.6; }

.history-action-btn {
    height: 32px;
    padding: 0 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--text-primary);
    font-size: 0.82rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    line-height: 1;
}
.history-action-btn:hover:not(:disabled) {
    background: var(--ivory);
    border-color: var(--gold);
    color: var(--gold-dark);
}
.history-action-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.history-action-import {
    background: var(--gold);
    color: #fff;
    border-color: var(--gold-dark);
    font-weight: 600;
}
.history-action-import:hover:not(:disabled) {
    background: var(--gold-dark);
    color: #fff;
    border-color: var(--gold-dark);
}
.history-action-delete {
    width: 32px;
    padding: 0;
    color: #b3382e;
    border-color: #e4c4c0;
    justify-content: center;
}
.history-action-delete:hover:not(:disabled) {
    background: #fdf3f2;
    color: #8e2a22;
    border-color: #b3382e;
}
.history-action-delete-filled {
    background: #b3382e;
    color: #fff;
    border-color: #8e2a22;
    font-weight: 600;
    padding: 0 0.95rem;
}
.history-action-delete-filled:hover:not(:disabled) {
    background: #8e2a22;
    color: #fff;
    border-color: #6f1e18;
}

/* ── Wizard step (import + delete confirm) ─────────────────────────── */
.history-wizard {
    padding: 1.1rem 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    overflow-y: auto;
}
.history-wizard-step {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gold-dark);
    font-weight: 600;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.55rem;
}
.history-wizard-step--danger {
    color: #b3382e;
    font-size: 0.95rem;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 700;
}
.history-wizard-row {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.history-wizard-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    font-weight: 600;
}
.history-wizard-source {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    background: var(--ivory);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.history-wizard-source-date {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}
.history-wizard-source-weekday {
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-transform: capitalize;
}
.history-wizard-dest-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.history-wizard-date {
    width: auto;
    min-width: 180px;
    flex: 0 0 auto;
    /* Override del .field-input globale (white-on-dark): qui il popup ha
       sfondo chiaro, quindi il testo della data deve essere nero per
       leggersi. Bordo con accent oro per coerenza visuale. */
    color: #1a1a1a !important;
    background: #ffffff !important;
    border: 1px solid #d8c98a !important;
}
.history-wizard-date::-webkit-calendar-picker-indicator {
    filter: none;
    cursor: pointer;
}
.history-wizard-info {
    background: #f7f3e8;
    border: 1px solid #e8dfc4;
    border-radius: var(--radius-sm);
    padding: 0.65rem 0.85rem;
    font-size: 0.85rem;
    color: var(--text-primary);
    line-height: 1.45;
}
.history-wizard-info strong {
    color: var(--gold-dark);
}
.history-wizard-info--warn {
    background: #fdf3f2;
    border-color: #e4c4c0;
    color: #8e2a22;
}
.history-wizard-info--warn strong { color: #8e2a22; }
.history-wizard-info--neutral {
    background: #f4f4ef;
    border-color: var(--border);
    color: var(--text-secondary);
}
.history-wizard-message {
    background: #fdf3f2;
    border: 1px solid #e4c4c0;
    border-radius: var(--radius-sm);
    padding: 0.85rem 1rem;
    font-size: 0.92rem;
    color: var(--text-primary);
    line-height: 1.5;
}
.history-wizard-warning {
    margin-top: 0.4rem;
    font-size: 0.8rem;
    color: #8e2a22;
    font-style: italic;
}
.history-wizard-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    border-top: 1px solid var(--border);
    padding-top: 0.85rem;
}

/* ══════════════════════════════════════════════════════════════
   ANTEPRIMA & STAMPA – two-column layout
   ══════════════════════════════════════════════════════════════ */
.anteprima-layout {
    display: flex;
    flex-direction: row;
    /* Altezza fissata al viewport (- tab bar) così le due colonne possono
       scrollare indipendentemente: la sidebar di config non segue lo scroll
       della preview. min-height + overflow:auto sui figli non basta perché
       il parent crescerebbe col contenuto e i figli userebbero lo scroll
       della pagina, non il proprio. */
    height: calc(100vh - 52px);
    align-items: stretch;
}

.anteprima-config-col {
    width: 300px;
    flex-shrink: 0;
    background: var(--ivory);
    border-right: 1px solid var(--border);
    padding: 1.25rem 1rem;
    overflow-y: auto;
    /* min-height:0 in flex-children consente all'overflow di lavorare
       quando il contenuto eccede l'altezza disponibile. */
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.anteprima-preview-col {
    flex: 1;
    min-width: 0;
    min-height: 0;
    background: #e8e6e0;
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1.5rem;
    overflow: auto;
}

/* ── Config column header ── */
.config-panel-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gold);
    padding: 0.6rem 0 0.8rem;
    border-bottom: 2px solid var(--gold);
    margin-bottom: 0.2rem;
}

/* ── Config column sections ── */
.config-section {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--border);
}

.config-section:last-child {
    border-bottom: none;
    padding-bottom: 1.5rem;
}

.config-section-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-secondary);
    margin-bottom: 0.2rem;
}

.profile-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.profile-select {
    flex: 1;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text-primary);
    font-size: 0.85rem;
    cursor: pointer;
}

.profile-select:focus {
    outline: 2px solid var(--gold);
    outline-offset: -1px;
}

.profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.profile-action-btn {
    /* flex-basis 50% - metà del gap = 2 bottoni per riga che riempiono
       l'intera larghezza disponibile (4 azioni → 2x2). */
    flex: 1 1 calc(50% - 0.18rem);
    min-width: 0;
    padding: 0.35rem 0.55rem !important;
    font-size: 0.78rem !important;
    margin: 0 !important;
    text-align: center;
    justify-content: center;
}

.profile-action-btn--danger {
    color: #b94343 !important;
    border-color: #d8a8a8 !important;
}

/* Override del .field-input globale (white-on-dark): nella modale "Nuovo
   profilo di anteprima" lo sfondo è chiaro (history-modal) e il testo deve
   essere nero per leggibilità. */
.profile-name-input {
    color: #1A1A1A !important;
    background: #FFFFFF !important;
    border: 1px solid var(--border) !important;
}

.profile-name-input::placeholder {
    color: #9A9A9A !important;
}

/* Lista checkbox per la modale di export selettivo */
.export-checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.export-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}

.export-checkbox-row:hover {
    background: rgba(184, 151, 42, 0.06);
}

.export-checkbox-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: var(--gold);
    cursor: pointer;
    flex-shrink: 0;
}

.export-checkbox-label {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text-primary);
    margin-bottom: 0.15rem;
}

.export-checkbox-desc {
    font-size: 0.76rem;
    color: var(--text-secondary);
    line-height: 1.35;
}

.config-hint {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-style: italic;
    line-height: 1.4;
}

.config-section-actions {
    flex-direction: row;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

/* Language print selection */
.lang-print-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--text-primary);
    cursor: pointer;
    padding: 0.1rem 0;
}

/* ── Preview toolbar ── */
.preview-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    flex-shrink: 0;
}

/* ── Preview scroll area ── */
.preview-scroll-area {
    flex: 1;
    overflow: auto;
    padding: 1.5rem 1.5rem 2rem;
}

/* A5 format override */
/* Le vecchie regole .a5-format / .landscape-format hardcoded (148mm,
   297mm, 210mm ecc.) sono state RIMOSSE: ora le dimensioni vengono
   tutte da --page-w / --page-h, settate inline dal Razor a partire
   dalle const PreviewA4Portrait... in @code. Modificare i valori
   solo li' per calibrare la preview alla stampa. */

/* ══════════════════════════════════════════════════════════════
   IMPOSTAZIONI TAB
   ══════════════════════════════════════════════════════════════ */
.impostazioni-tab-content {
    padding: 2rem 2.5rem 3rem;
    max-width: 960px;
    margin: 0 auto;
    width: 100%;
}

.impostazioni-section {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.75rem 2rem;
    box-shadow: var(--shadow);
}

.impostazioni-heading {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.impostazioni-desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    max-width: 600px;
}

/* Sezione branding hotel in tab Impostazioni: logo a sinistra, nome+tavolo a destra. */
.branding-settings-row {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    flex-wrap: wrap;
}
.branding-logo-cell {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.branding-logo-cell .logo-area--settings {
    width: 140px;
    height: 100px;
}
.branding-fields-cell {
    flex: 1 1 280px;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.branding-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.impostazioni-field-label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
}
.branding-input {
    width: 100%;
    max-width: 420px;
    /* Override del .field-input globale (white-on-dark): la sezione
       Impostazioni ha sfondo chiaro, quindi il testo dell'input deve
       essere nero per leggersi. */
    color: #1a1a1a !important;
    background: #ffffff !important;
    border: 1px solid #d8c98a !important;
}
.branding-input::placeholder { color: #9a9a9a; }

.languages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.45rem;
}

.lang-checkbox-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--ivory);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    user-select: none;
}

.lang-checkbox-row:hover {
    border-color: var(--gold);
    background: rgba(226,35,26,0.05);
}

.lang-checkbox-row--active {
    border-color: var(--gold);
    background: rgba(226,35,26,0.1);
    box-shadow: 0 0 0 2px rgba(226,35,26,0.18);
}

.lang-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    cursor: pointer;
}

.lang-checkbox-row input[type="checkbox"] {
    accent-color: var(--gold);
    width: 15px;
    height: 15px;
    cursor: pointer;
    flex-shrink: 0;
}

.lang-copies-wrap {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    margin-left: auto;
}

.lang-copies-val {
    min-width: 1.6rem;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.lang-pagebreak-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem 0.55rem 2.1rem;
    margin-top: -0.35rem;
    cursor: pointer;
}

.lang-pagebreak-row input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: var(--gold);
    margin: 0;
}

.lang-pagebreak-label {
    font-size: 0.78rem;
    color: var(--text-secondary);
    user-select: none;
}

.lang-name {
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--text-primary);
}

.impostazioni-enabled-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.impostazioni-enabled-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 0.25rem;
}

/* ══════════════════════════════════════════════════════════════
   PRODUCT TRANSLATIONS (in Products tab)
   ══════════════════════════════════════════════════════════════ */
.product-translations-toggle {
    border-top: 1px solid var(--border);
    padding-top: 0.4rem;
    margin-top: 0.2rem;
}

.translations-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.77rem;
    font-family: inherit;
    cursor: pointer;
    padding: 0.2rem 0;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: color 0.15s;
}

.translations-toggle-btn:hover { color: var(--gold-dark); }

.toggle-arrow {
    font-size: 0.6rem;
    opacity: 0.7;
}

.translations-body {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

.translation-row {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.6rem 0.65rem;
    background: var(--ivory-dark);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.translation-lang-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gold-dark);
}

.translation-fields {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.translation-actions {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.2rem;
}

.btn-sm {
    padding: 0.2rem 0.55rem !important;
    font-size: 0.74rem !important;
    border-radius: 5px !important;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE LAYOUT – all tabs
   ══════════════════════════════════════════════════════════════ */

/* ── Tablet ≤ 960px ── */
@media (max-width: 960px) {
    .main-tab-bar { padding: 0 0.75rem; }
    .tab-btn { padding: 0 0.9rem; font-size: 0.84rem; }
    .tab-user-email { display: none; }

    .products-tab-content { padding: 1.25rem 1.25rem 2.5rem; }
    .products-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

    .left-panel--full { max-width: 100%; }

    .impostazioni-tab-content { padding: 1.5rem 1.5rem 2.5rem; }
}

/* ── Anteprima: switch a layout a colonna quando lo schermo non basta
   a mostrare sidebar (300px) + foglio A4 al 90% (~714px) + margini
   affiancati. Soglia 1100px così copre desktop a metà schermo (1920/2). */
@media (max-width: 1100px) {
    .anteprima-layout {
        flex-direction: column;
        /* Su mobile/tablet torniamo al flusso naturale: l'header + config +
           preview scrollano insieme; non c'è abbastanza spazio per due
           pannelli con scroll indipendenti. */
        height: auto;
        min-height: calc(100vh - 52px);
    }
    .anteprima-config-col {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border);
        max-height: 38vh;
        overflow-y: auto;
    }
    .anteprima-preview-col {
        flex: 1;
        /* Dare spazio sufficiente alla preview perché un foglio A4 al 90%
           è alto ~714px (~75% di un viewport 1080px). */
        min-height: 62vh;
        padding: 1rem;
    }
    .preview-toolbar { justify-content: space-between; }
    .preview-scroll-area { overflow-x: auto; }
}

/* ── Mobile ≤ 640px ── */
@media (max-width: 640px) {
    /* Tab bar */
    .main-tab-bar { padding: 0 0.4rem; height: 44px; }
    .tab-buttons {
        overflow-x: auto;
        scrollbar-width: none;
        flex-shrink: 1;
        min-width: 0;
    }
    .tab-buttons::-webkit-scrollbar { display: none; }
    .tab-btn { padding: 0 0.65rem; font-size: 0.78rem; }
    .tab-user-area { gap: 0.3rem; flex-shrink: 0; }
    .tab-user-info { display: none; }
    .logout-btn span.btn-label { display: none; }

    /* Products */
    .products-tab-content { padding: 0.75rem 0.75rem 2rem; }
    .products-tab-header { flex-direction: column; align-items: stretch; gap: 0.6rem; }
    .products-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; }

    /* Menu */
    .left-panel--full { padding-left: 0.75rem; padding-right: 0.75rem; }

    /* Anteprima */
    .anteprima-config-col { max-height: 38vh; }
    .anteprima-preview-col { padding: 0.5rem; min-height: 58vh; }

    /* Impostazioni */
    .impostazioni-tab-content { padding: 0.75rem; }
    .impostazioni-section { padding: 1rem; }
    .languages-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ── Primary language badge (Impostazioni) ─────────── */
.impostazioni-primary-lang {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    background: linear-gradient(135deg, #FFF8E7 0%, #F9EEDA 100%);
    border: 1px solid var(--gold);
    border-radius: var(--radius-sm);
}
.primary-lang-badge {
    flex-shrink: 0;
    font-weight: 700;
    color: var(--anthracite);
    padding: 0.35rem 0.7rem;
    background: #fff;
    border-radius: 999px;
    border: 1px solid var(--gold-dark);
    white-space: nowrap;
}
.primary-lang-note {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.35;
}

/* ── Product translations hint when no languages enabled ─── */
.product-translations-hint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    margin-top: 0.75rem;
    background: #FAF7F0;
    border: 1px dashed var(--gold-dark);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.btn-link-gold {
    background: none;
    border: none;
    color: var(--gold-dark);
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    font-size: 0.85rem;
    text-decoration: underline;
}
.btn-link-gold:hover { color: var(--anthracite); }

/* ══════════════════════════════════════════════════════════════
   PRODUCT EDIT MODAL
   ══════════════════════════════════════════════════════════════ */
.product-edit-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(720px, 94vw);
    max-height: 92vh;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.product-edit-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: var(--ivory);
}
.product-edit-modal-title {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text-primary);
}
.product-edit-modal-body {
    padding: 1.25rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    flex: 1;
}
.product-edit-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--border);
    background: var(--ivory);
}
.edit-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.edit-section-title {
    font-weight: 700;
    color: var(--gold-dark);
    font-size: 0.95rem;
    letter-spacing: 0.03em;
}
.edit-section-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.edit-field-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-top: 0.25rem;
}
.edit-img-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.edit-img-thumb {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    flex-shrink: 0;
}
.edit-img-thumb--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ivory);
    cursor: pointer;
}
.edit-img-thumb--empty:hover {
    border-color: var(--gold);
}
/* Logo di default nel modale prodotto quando non c'è una foto. */
.edit-img-thumb--default {
    object-fit: contain;
    padding: 8px;
    background: #fff;
    cursor: pointer;
}
.edit-img-thumb--default:hover {
    border-color: var(--gold);
}
.edit-img-actions {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.edit-img-remove-btn {
    color: #c0392b;
    border-color: #c0392b;
}
.edit-img-remove-btn:hover {
    background: #c0392b;
    color: #fff;
}
.edit-category-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 160px;
    overflow-y: auto;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--ivory);
}
.edit-category-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 14px;
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
    padding: 0.15rem 0;
}
.edit-category-item:hover span {
    color: var(--gold-dark);
}
.edit-category-checkbox {
    accent-color: var(--gold);
    width: 15px;
    height: 15px;
    cursor: pointer;
    flex-shrink: 0;
}
.edit-category-empty {
    font-size: 13px;
    color: var(--text-secondary);
    font-style: italic;
}

/* ── Selettore categorie a toggle (modale prodotto) ──────────────────── */
/* Selezionate: chip in cima con ✕ per rimuovere. */
.cat-toggle-selected {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}
.cat-toggle-sublabel {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
}
/* Rimanenti: box con chip cliccabili. */
.cat-toggle-available {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    max-height: 160px;
    overflow-y: auto;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--ivory);
}
.cat-toggle-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border: 1.5px solid #E0D9C8;
    border-radius: 999px;
    background: #fff;
    color: #3a342b;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--th-body-font);
    cursor: pointer;
    transition: all 0.13s;
}
.cat-toggle-chip:hover { border-color: var(--gold-dark); color: var(--gold-dark); }
.cat-toggle-plus { font-weight: 800; font-size: 15px; line-height: 1; color: var(--gold-dark); }
/* Selezionata (in cima): pieno verde/oro con ✕. */
.cat-toggle-chip--on {
    background: #FBF3DE;
    border-color: var(--gold);
    color: #6B5A12;
    cursor: default;
    padding-right: 6px;
}
.cat-toggle-chip--on:hover { color: #6B5A12; }
.cat-toggle-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,0.08);
    color: #8a6d00;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition: all 0.13s;
}
.cat-toggle-x:hover { background: #C81E1E; color: #fff; }
.edit-category-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.edit-translation-row {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.75rem;
    background: #FAF7F0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.edit-translation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

/* ── Confirm modal (delete) ───────────────────────── */
.confirm-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(440px, 94vw);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    z-index: 1002;
    overflow: hidden;
}
.confirm-modal-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.25rem 0.5rem;
}
.confirm-modal-icon { font-size: 1.5rem; }
.confirm-modal-title { font-weight: 700; font-size: 1.05rem; color: var(--text-primary); }
.confirm-modal-body {
    padding: 0.5rem 1.25rem 1.25rem;
    color: var(--text-secondary);
    line-height: 1.4;
    font-size: 0.9rem;
}
.confirm-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--border);
    background: var(--ivory);
}
.btn-danger-fill {
    background: #c0392b;
    color: #fff;
    border: 1px solid #a5281b;
    padding: 0.45rem 1rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-danger-fill:hover { background: #a5281b; }

/* ── Category translations bar (Menù tab) ──────────── */
.category-translations-bar {
    padding: 0.5rem 0.75rem;
    background: #FAF7F0;
    border-bottom: 1px solid var(--border);
}
.category-translations-body {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.category-translations-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-bottom: 0.4rem;
}

/* ── Translation completion badge (Prodotti + Menù) ─── */
.translation-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    background: #F5EED8;
    color: var(--gold-dark);
    border: 1px solid var(--gold-dark);
    white-space: nowrap;
    flex-shrink: 0;
    /* Shrink-to-content: don't stretch in column flex containers (product card body) */
    align-self: flex-start;
    width: fit-content;
    max-width: fit-content;
}
.translation-badge--full {
    background: linear-gradient(135deg, #E6F4EA 0%, #C8E6C9 100%);
    color: #1B5E20;
    border-color: #2E7D32;
}
/* Nessuna lingua tradotta: badge rosso "Non tradotto". */
.translation-badge--none {
    background: #FBEAEA;
    color: #B0151B;
    border-color: #E6BCB8;
}

/* Status filter chips (Senza categoria / Tradotto / Non tradotto) */
.filter-chip--status {
    border-style: dashed;
}
.filter-chip--status.filter-chip--active {
    border-style: solid;
}

/* Between sheets in preview (diverse lingue, cloni di paginazione o split
   pranzo/cena): stacco visibile che simula la separazione fisica dei fogli
   stampati. In stampa viene azzerato e rimpiazzato da un vero page-break. */
.a4-sheet--page-break {
    margin-top: 2.5rem;
}

@media print {
    .a4-sheet--page-break {
        margin-top: 0 !important;
        break-before: page;
        page-break-before: always;
    }
    .a4-sheet-clone {
        display: none !important;
    }
}

.preview-lang-count {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    background: #F5EED8;
    border: 1px solid var(--gold-dark);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gold-dark);
    white-space: nowrap;
}

/* ── Meal page break (tra Pranzo e Cena quando la checkbox è attiva) ─── */
/* In anteprima simula il taglio fisico tra due fogli stampati:
   fine pagina → spazio vuoto visibile → inizio nuova pagina.
   La distanza viene calcolata in JS (paginateMealBreaks) così la cena
   inizia davvero all'altezza del foglio successivo, come nel PDF.
   In stampa il div viene azzerato e il break-before: page fa il lavoro. */
.meal-page-break {
    display: block;
    width: 100%;
    min-height: 3rem;
    margin: 0;
    border: 0;
    background: transparent;
    page-break-before: always;
    break-before: page;
    position: relative;
}

@media print {
    .meal-page-break {
        min-height: 0;
        height: 0;
    }
}

/* Tab icons: color fixed gold, never inherits from button text color */
.tab-icon {
    flex-shrink: 0;
    margin-right: 0.4rem;
    vertical-align: middle;
    display: inline-block;
}
.tab-btn .tab-icon,
.tab-btn--active .tab-icon { /* explicit = same → does not change color on active */
    color: inherit;
}
/* The SVG strokes/fills use a hardcoded #C81E1E so active/inactive look identical */

/* ============================================================================
   Grico — Storefront, carrello, ordini, form utente (delivery app)
   ============================================================================ */

/* Tema condiviso */
.md-page { min-height:100vh; background:#FAF8F3; font-family:var(--th-body-font); }
.md-container { max-width:980px; margin:0 auto; padding:1.5rem 1.25rem 4rem; }
.md-narrow { max-width:520px; }
.md-h1 { font-family:var(--th-heading-font); font-size:1.6rem; font-weight:700; color:#1A1A1A; margin:0; }
.md-h2 { font-family:var(--th-heading-font); font-size:1.1rem; font-weight:700; color:#1A1A1A; margin:0 0 1rem; }
.md-muted { color:#6B6B6B; font-size:13px; }
.md-card { background:#fff; border:1.5px solid #E0D9C8; border-radius:12px; padding:1.5rem; box-shadow:0 2px 16px rgba(0,0,0,.06); }
.md-error { font-size:13px; color:#D94040; background:#FFF5F5; border:1px solid #F5C2C2; border-radius:6px; padding:9px 12px; }
.md-success { font-size:13px; color:#2D8A4E; background:#F0FFF5; border:1px solid #B2DFC4; border-radius:6px; padding:9px 12px; }

/* Bottoni */
/* Pagina 404 (errore "pagina non trovata"). */
.nf-wrap { display:flex; align-items:center; justify-content:center; padding-top:2.5rem; padding-bottom:3.5rem; }
.nf-box { text-align:center; max-width:430px; }
.nf-logo { width:88px; height:88px; object-fit:contain; margin-bottom:.8rem; }
.nf-code { font-family:var(--th-heading-font); font-size:4.6rem; font-weight:800; line-height:1; color:#E2231A; letter-spacing:.02em; }
.nf-title { margin:.3rem 0 .35rem; }
.nf-text { margin-bottom:1.6rem; }
.nf-btn { display:inline-flex; align-items:center; gap:8px; text-decoration:none; }

.md-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:10px 18px; border-radius:6px; font-size:14px; font-weight:700; font-family:var(--th-body-font); cursor:pointer; border:none; transition:all .15s; text-decoration:none; }
.md-btn-primary { background:#141414; color:#E2231A; }
.md-btn-primary:hover:not(:disabled) { background:#262626; }
.md-btn-primary:disabled { opacity:.5; cursor:not-allowed; }
.md-btn-gold { background:#E2231A; color:#141414; }
.md-btn-gold:hover:not(:disabled) { background:#b9982f; }
.md-btn-outline { background:transparent; border:1.5px solid #E0D9C8; color:#6B6B6B; }
.md-btn-outline:hover { border-color:#B0151B; color:#B0151B; }
.md-btn-danger { background:transparent; border:1.5px solid #E0D9C8; color:#6B6B6B; }
.md-btn-danger:hover { border-color:#D94040; color:#D94040; background:#FFF5F5; }
.md-btn-sm { padding:6px 12px; font-size:12px; }

/* Top bar storefront/dashboard */
.md-topbar { display:flex; align-items:center; justify-content:space-between; gap:.85rem; background:#141414; padding:.55rem 1.1rem; }
/* Email utente loggato, in alto a sinistra accanto al logo */
.md-user-email { display:inline-flex; align-items:center; gap:6px; color:#CFCAC0; font-size:13px; font-family:var(--th-body-font); max-width:38vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.md-user-email svg { flex:0 0 auto; opacity:.8; }
.md-topbar-actions { margin-left:auto; }
@media (max-width:640px) { .md-user-email { max-width:34vw; font-size:12px; } }
.md-brand { font-family:var(--th-heading-font); font-size:1.2rem; font-weight:700; color:#E2231A; text-decoration:none; }
.md-topbar-actions { display:flex; align-items:center; gap:.6rem; }
/* Utility: etichette solo-mobile (default nascoste; mostrate nella media query ≤640). */
.md-mobonly { display:none; }
.md-cart-link { position:relative; display:inline-flex; align-items:center; gap:7px; color:#FAF8F3; text-decoration:none; font-size:13px; }
.md-cart-ico { position:relative; display:inline-flex; align-items:center; }
/* Badge numero: mini-cerchio in alto a destra dell'icona carrello */
.md-cart-badge { position:absolute; top:-7px; right:-9px; min-width:17px; height:17px; padding:0 4px;
    display:inline-flex; align-items:center; justify-content:center; border-radius:9px;
    background:#E2231A; color:#fff; font-size:10.5px; font-weight:800; line-height:1;
    box-shadow:0 0 0 2px #141414; }
.md-topbar-link { color:#FAF8F3; text-decoration:none; font-size:13px; opacity:.85; }
.md-topbar-link:hover { opacity:1; color:#E2231A; }
/* Bottoni header con icona+etichetta (Dashboard / Esci) */
.md-topbar-btn { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:8px; border:1.5px solid rgba(255,255,255,.25); background:rgba(255,255,255,.06); color:#FAF8F3; font-size:13px; font-weight:600; font-family:var(--th-body-font); text-decoration:none; cursor:pointer; transition:all .15s; }
.md-topbar-btn:hover { background:#E2231A; border-color:#E2231A; color:#fff; }
.md-topbar-btn-logout { border-color:rgba(226,35,26,.5); }
.md-topbar-btn-logout:hover { background:#E2231A; border-color:#E2231A; }

/* Form utente (UserForm) */
.uf-form { display:flex; flex-direction:column; gap:1rem; }
.uf-field { display:flex; flex-direction:column; gap:5px; }
.uf-label { font-size:12px; font-weight:600; color:#1A1A1A; letter-spacing:.04em; text-transform:uppercase; }
.uf-input { padding:9px 13px; border:1.5px solid #E0D9C8; border-radius:6px; font-size:14px; font-family:var(--th-body-font); color:#1A1A1A; background:#fff; outline:none; transition:border-color .15s; width:100%; box-sizing:border-box; }
.uf-input:focus { border-color:#B0151B; }

/* Etichette attributi piatto (🥬 veg / 🌶️ piccante / +18) — sovrapposte
   in alto a DESTRA sull'immagine, impilate; piccole pill con ombra per
   leggibilità sopra la foto. */
.sf-prod-tags { position:absolute; top:8px; right:8px; z-index:2; display:flex; flex-direction:column; align-items:flex-end; gap:5px; }
.sf-tag { display:inline-flex; align-items:center; gap:3px; font-size:11px; font-weight:700; font-family:var(--th-body-font); padding:3px 9px; border-radius:20px; line-height:1.3; box-shadow:0 2px 8px rgba(0,0,0,.18); backdrop-filter:saturate(1.1); }
.sf-tag-spicy { background:#FBE7E5; color:#C0341D; border:1px solid #F2C2BB; }
.sf-tag-veg { background:#E4F5E8; color:#1E7C42; border:1px solid #BBE5C7; }
.sf-tag-adult { background:#2B2B2B; color:#fff; border:1px solid #000; letter-spacing:.02em; }

/* Tag "Nuovo" in alto a SINISTRA sull'immagine */
.sf-badge-new { position:absolute; top:8px; left:8px; z-index:2; display:inline-flex; align-items:center; gap:4px; background:#F5C518; color:#1A1A1A; font-family:var(--th-body-font); font-size:11px; font-weight:800; letter-spacing:.02em; padding:4px 10px; border-radius:20px; box-shadow:0 3px 10px rgba(0,0,0,.22); }

/* Storefront catalogo */
.sf-cat { margin-bottom:2rem; }
.sf-cat-title { font-family:var(--th-heading-font); font-size:1.25rem; font-weight:700; color:#1A1A1A; margin:0 0 1rem; padding-bottom:.5rem; border-bottom:2px solid #E2231A; }
.sf-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:1rem; }

/* ── Categoria "In Evidenza" a scorrimento orizzontale ──
   Il titolo della sezione resta FUORI (sopra), come le altre categorie; il
   riquadro color crema avvolge solo il carosello. */
.sf-cat--featured { }
.sf-featured-box { background:#FFF7EC; border:1px solid #F1E4CB; border-radius:14px; padding:.85rem .85rem .5rem; }
.sf-hscroll {
    display:flex; gap:.8rem; overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding:6px 2px .7rem;
}
.sf-hscroll > .sf-prod { flex:0 0 auto; width:210px; scroll-snap-align:start; }
.sf-hscroll > .sf-fcard { flex:0 0 auto; width:130px; scroll-snap-align:start; }

/* Card compatta "In Evidenza": immagine quadrata + "+", titolo e prezzo. */
.sf-fcard { background:#fff; border:1.5px solid #E0D9C8; border-radius:12px; display:flex; flex-direction:column; cursor:pointer; transition:transform var(--dur,.18s) var(--ease,ease), box-shadow var(--dur,.18s) var(--ease,ease), border-color var(--dur,.18s) var(--ease,ease); }
.sf-fcard:hover { transform:translateY(-3px); box-shadow:var(--shadow-md,0 8px 22px rgba(0,0,0,.12)); border-color:#EBD7B8; }
.sf-fcard-media { position:relative; }
.sf-fcard-img, .sf-fcard-noimg { display:block; width:100%; aspect-ratio:1/1; object-fit:cover; background:#F0EDE4; border-radius:11px 11px 0 0; }
.sf-fcard-noimg { display:flex; align-items:center; justify-content:center; color:#E2231A; }
.sf-fcard-noimg .md-icon { opacity:.55; }
/* "+"/quantità che sborda dall'angolo in basso a destra dell'immagine, come nelle righe. */
.sf-fcard-add { position:absolute; bottom:-6px; right:-6px; z-index:3; }
.sf-fcard-body { padding:.5rem .6rem .6rem; display:flex; flex-direction:column; gap:.2rem; }
.sf-fcard-name { font-family:var(--th-body-font); font-weight:700; color:#1A1A1A; font-size:13.5px; line-height:1.2;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.4em; }
/* scrollbar rossa ben visibile: comunica che si scorre */
.sf-hscroll::-webkit-scrollbar { height:8px; }
.sf-hscroll::-webkit-scrollbar-thumb { background:#E2231A; border-radius:4px; }
.sf-hscroll::-webkit-scrollbar-track { background:#EFE2C8; border-radius:4px; }
.sf-scroll-hint { font-family:system-ui,sans-serif; font-size:.7rem; font-weight:700; color:#E2231A;
    text-transform:uppercase; letter-spacing:.5px; vertical-align:middle; margin-left:.6rem; }
.sf-scroll-arrow { display:inline-block; animation:sf-nudge 1.1s ease-in-out infinite; }
@keyframes sf-nudge { 0%,100%{transform:translateX(0)} 50%{transform:translateX(5px)} }

/* ── Rendiconto (report admin) ── */
.rpt-period { padding:1.1rem 1.25rem; margin-bottom:1.25rem; }
.rpt-dates { display:flex; gap:.8rem; align-items:flex-end; flex-wrap:wrap; }
.rpt-date { display:flex; flex-direction:column; gap:.3rem; }
.rpt-date > span { font-size:.78rem; font-weight:700; color:#6b6256; display:inline-flex; align-items:center; gap:.3rem; }
.rpt-presets { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.9rem; }
.rpt-chip { border:1.5px solid #E0D9C8; background:#fff; color:#3a342b; border-radius:999px;
    padding:.35rem .85rem; font-size:.8rem; font-weight:600; cursor:pointer; transition:all .15s; }
.rpt-chip:hover { border-color:#E2231A; color:#E2231A; }

.rpt-kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:1rem; margin-bottom:1.25rem; }
.rpt-kpi { background:#fff; border:1.5px solid #E0D9C8; border-radius:12px; padding:1.1rem 1.2rem; }
.rpt-kpi-val { font-family:var(--th-heading-font); font-size:1.6rem; font-weight:700; color:#1A1A1A; line-height:1.1; }
.rpt-kpi-lbl { margin-top:.35rem; font-size:.82rem; font-weight:600; color:#6b6256; display:inline-flex; align-items:center; gap:.35rem; }

.rpt-section-title { font-family:var(--th-heading-font); font-size:1.05rem; font-weight:700; color:#1A1A1A; margin-bottom:.9rem; }
.rpt-split { display:flex; flex-direction:column; gap:.35rem; }
.rpt-split-row { display:flex; justify-content:space-between; align-items:center; gap:.6rem; font-size:.9rem; }
.rpt-split-lbl { display:inline-flex; align-items:center; gap:.4rem; font-weight:600; }
.rpt-split-num { color:#6b6256; font-size:.85rem; white-space:nowrap; }
.rpt-bar { height:10px; background:#EFE9DC; border-radius:6px; overflow:hidden; margin-bottom:.5rem; }
.rpt-bar-fill { height:100%; border-radius:6px; transition:width .4s ease; }
.rpt-bar-pickup { background:#1A1A1A; }
.rpt-bar-delivery { background:#E2231A; }
.rpt-bar-table { background:#B0151B; }

.rpt-table { width:100%; border-collapse:collapse; font-size:.9rem; }
.rpt-table th { text-align:left; font-size:.75rem; text-transform:uppercase; letter-spacing:.4px;
    color:#9a9082; font-weight:700; padding:.4rem .5rem; border-bottom:2px solid #EFE9DC; }
.rpt-table td { padding:.55rem .5rem; border-bottom:1px solid #F1ECE0; vertical-align:middle; }
.rpt-r { text-align:right; white-space:nowrap; }
.rpt-rank { font-family:var(--th-heading-font); font-weight:700; color:#E2231A; width:2rem; }
.rpt-minibar { height:5px; background:#F1ECE0; border-radius:3px; overflow:hidden; margin-top:.3rem; max-width:220px; }
.rpt-minibar-fill { height:100%; background:#E2231A; opacity:.55; border-radius:3px; }

.sf-prod { background:#fff; border:1.5px solid #E0D9C8; border-radius:10px; overflow:hidden; display:flex; flex-direction:column; }
.sf-prod--click { cursor:pointer; }
.sf-prod-media { position:relative; overflow:hidden; }
.sf-prod-img { display:block; width:100%; height:140px; object-fit:cover; background:#F0EDE4; }
.sf-prod-noimg { width:100%; height:140px; background:#F0EDE4; display:flex; align-items:center; justify-content:center; color:#E2231A; }
.sf-prod-noimg .md-icon { opacity:.55; }
.sf-prod-body { padding:.85rem; display:flex; flex-direction:column; gap:.4rem; flex:1; }
.sf-prod-name { font-weight:700; color:#1A1A1A; font-size:15px; }
.sf-prod-desc { font-size:12px; color:#6B6B6B; flex:1; }
.sf-prod-foot { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-top:.3rem; }
.sf-price { font-weight:700; color:#B0151B; font-size:15px; }

/* ── Righe prodotto storefront: titolo sopra, descrizione sotto, immagine a destra ── */
.sf-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(360px,1fr)); column-gap:2rem; position:relative; }
.sf-row { display:flex; gap:1rem; align-items:flex-start; padding:1.05rem 0; border-bottom:1px solid #ECE5D6; transition:background .12s; }
.sf-row:hover { background:#FCFAF4; }
.sf-row--in { } /* stato "nel carrello" (hook per evidenziazioni future) */
.sf-row-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:.3rem; }
.sf-row-name { font-weight:700; color:#1A1A1A; font-size:15.5px; line-height:1.3; }
.sf-row-price { font-weight:700; }
.sf-row-desc { font-size:12.5px; color:#7A7264; line-height:1.45;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sf-row-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:.2rem; }
.sf-row-tags .sf-tag { box-shadow:none; }
.sf-tag-new { background:#FFF3CC; color:#8A6D00; border:1px solid #F2D98A; }

.sf-row-media { position:relative; width:81px; height:81px; flex-shrink:0; }
.sf-row-img { width:100%; height:100%; object-fit:cover; border-radius:12px; background:#F0EDE4; display:block; }
.sf-row-noimg { width:100%; height:100%; border-radius:12px; background:#F0EDE4; display:flex; align-items:center; justify-content:center; color:#E2231A; }
.sf-row-noimg .md-icon { opacity:.55; }

/* Controllo "aggiungi" (+) e pill quantità: angolo in basso a destra dell'immagine
   miniatura. SOLO nel contesto della miniatura: nel modal e nel carrello a destra
   la pill resta nel flusso normale (inline accanto al prodotto). */
.sf-row-media .sf-add, .sf-row-media .sf-rowqty { position:absolute; bottom:-8px; right:-8px; z-index:2; }
.sf-add { width:36px; height:36px; border-radius:50%; border:2px solid #fff; background:#E2231A; color:#fff;
    cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0;
    box-shadow:0 4px 12px rgba(226,35,26,.4); transition:transform .12s, background .12s; }
.sf-add svg { display:block; }
.sf-add:hover { background:#c11d15; transform:scale(1.06); }
.sf-add:active { transform:scale(.96); }
.sf-rowqty { display:inline-flex; align-items:center; background:#fff; border:2px solid #E2231A; border-radius:22px;
    box-shadow:0 4px 12px rgba(0,0,0,.16); overflow:hidden; }
.sf-rowqty button { width:32px; height:32px; border:none; background:#fff; color:#E2231A; font-size:18px; font-weight:800;
    line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.sf-rowqty button:hover:not(:disabled) { background:#FCE8E7; }
.sf-rowqty button:disabled { opacity:.4; cursor:not-allowed; }
.sf-rowqty-del { color:#E2231A; }
.sf-rowqty-num { min-width:26px; text-align:center; font-weight:800; font-size:14px; color:#1A1A1A; }

/* Carrello — riga prodotto compatta: immagine · (nome + prezzo unitario) · (quantità + totale riga).
   Layout unico su tutte le larghezze: niente "a capo", spazio ottimizzato, tutti gli elementi sempre presenti. */
.cart-row { display:flex; align-items:center; gap:.85rem; padding:.7rem 0; border-bottom:1px solid #E0D9C8; }
.cart-row-img { width:56px; height:56px; border-radius:8px; object-fit:contain; background:#141414; flex-shrink:0; }
.cart-row-main { flex:1; min-width:0; }
.cart-row-name { font-weight:600; color:#1A1A1A; line-height:1.25; }
.cart-row-unit { color:#6B6B6B; font-size:13px; margin-top:2px; }
.cart-row-side { display:flex; flex-direction:column; align-items:flex-end; gap:.4rem; flex-shrink:0; }
.cart-row-line { font-weight:700; color:#1A1A1A; min-width:64px; text-align:right; font-size:14.5px; }
.cart-qty { display:inline-flex; align-items:center; border:1.5px solid #E0D9C8; border-radius:6px; overflow:hidden; }
.cart-qty button { width:28px; height:30px; border:none; background:#F0EDE4; cursor:pointer; color:#141414; font-weight:700; }
.cart-qty button:hover { background:#E6E0D0; }
.cart-qty span { min-width:30px; text-align:center; font-weight:600; }
.cart-total-row { display:flex; align-items:center; justify-content:space-between; margin-top:1rem; font-size:1.15rem; font-weight:700; color:#1A1A1A; }

/* Tabella ordini / liste dashboard */
.ord-list { display:flex; flex-direction:column; gap:.75rem; }
.ord-card { background:#fff; border:1.5px solid #E0D9C8; border-radius:10px; padding:1rem 1.25rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.ord-card-main { min-width:0; }
.ord-id { font-weight:700; color:#1A1A1A; }
.ord-meta { font-size:12px; color:#6B6B6B; }
.ord-badge { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.04em; padding:3px 10px; border-radius:20px; }
.ord-badge-Ricevuto { background:#FFF4E0; color:#9A6B2E; }
.ord-badge-InPreparazione { background:#E8F0FF; color:#2E5A9A; }
.ord-badge-InConsegnaConFattorino { background:#E0F4FF; color:#2E7A9A; }
.ord-badge-Completato { background:#E8FFE8; color:#2D8A4E; }
.ord-badge-Annullato { background:#FFE8E8; color:#B83232; }
/* auto-FILL (non auto-fit): le tracce vuote restano, così una categoria con poche
   card NON allarga le card a tutta riga → tutte le card hanno la STESSA larghezza,
   allineate a sinistra, riga dopo riga (altezze uniformi per riga). */
.dash-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1rem; }
.dash-tile { background:#fff; border:1.5px solid #E0D9C8; border-radius:12px; padding:1.5rem; text-decoration:none; color:#1A1A1A; transition:all .15s; display:block; }
.dash-tile:hover { border-color:#E2231A; box-shadow:0 4px 16px rgba(0,0,0,.08); }
.dash-tile-title { font-family:var(--th-heading-font); font-weight:700; font-size:1.05rem; margin-bottom:.35rem; }
/* Titolo di categoria nella dashboard configurabile */
.dash-cat-title { font-family:var(--th-heading-font); font-size:1.05rem; color:#7A746A; font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin:.2rem 0 .7rem; padding-bottom:.4rem; border-bottom:2px solid #ECE6D8; }

/* ============================================================================
   Grico — Ottimizzazione mobile (storefront, carrello, ordini, dash)
   ============================================================================ */
@media (max-width: 640px) {
    .md-container { padding:1rem .85rem 3rem; }

    /* Top bar: LOGO + bottoni tutti su UN'UNICA riga (niente a-capo). */
    .md-topbar { padding:.6rem .6rem; flex-wrap:nowrap; gap:.4rem; }
    .md-brand { font-size:1.05rem; flex:0 1 auto; min-width:0; }
    .md-brand-logo { max-width:34vw; object-fit:contain; }
    /* Su mobile l'email dell'admin si nasconde: occupa troppo spazio e fa
       sovrapporre il logo alle icone sul Sunmi (schermo stretto). */
    .md-user-email { display:none; }
    /* Spaziatura uniforme: globe ↔ bell == bell ↔ dashboard. */
    .md-topbar-actions { gap:.4rem; flex-wrap:nowrap; flex:0 0 auto; }
    .md-topbar-group { gap:.4rem; flex-wrap:nowrap; }
    .md-topbar-link { font-size:12px; }
    /* Lingua: SOLO l'icona del mappamondo. Il <select> resta sopra, invisibile ma
       cliccabile (apre il menù nativo del browser), così non serve mostrare il testo. */
    .md-lang-wrap { position:relative; gap:0; padding:7px 9px; }
    .md-lang-select { position:absolute; inset:0; width:100%; height:100%; opacity:0; padding:0; margin:0; }
    /* Carrello in cima anche su mobile (per il cliente non si perde): solo icona
       col badge, compatto. È comunque nascosto ad admin/fattorino dal markup. */
    .md-cart-link { display:inline-flex; padding:7px 10px; }
    .md-cart-link .md-cart-txt { display:none; }
    /* Bottoni azione più compatti per stare in riga su mobile. */
    .md-topbar-btn { padding:7px 10px; }
    /* Etichette mobile-only (es. "Ordini") vs desktop-only ("I miei ordini"). */
    .md-deskonly { display:none; }
    .md-mobonly { display:inline; }

    .md-h1 { font-size:1.3rem; }
    .md-h2 { font-size:1rem; }
    .md-card { padding:1.1rem; border-radius:10px; }
    .md-btn { padding:11px 16px; }

    /* Storefront: lista prodotti a una colonna; immagine più piccola */
    .sf-grid { grid-template-columns:1fr; gap:.85rem; }
    .sf-list { grid-template-columns:1fr; }
    .sf-cat-title { font-size:1.1rem; }
    .sf-row { padding:.9rem 0; gap:.85rem; }
    .sf-row-media { width:69px; height:69px; }
    .sf-row-name { font-size:15px; }

    /* Carrello: riga compatta anche su mobile (immagine · nome/prezzo · qtà/totale),
       senza andare a capo: tutti gli elementi restano allineati su una riga. */
    .cart-row { gap:.7rem; }
    .cart-row-img { width:50px; height:50px; }
    .cart-row-line { min-width:56px; font-size:14px; }
    .cart-total-row { font-size:1.05rem; }

    /* Ordini / dashboard */
    .ord-card { padding:.85rem 1rem; }
    .dash-grid { grid-template-columns:1fr; }
}

/* Schermi molto stretti */
@media (max-width: 380px) {
    .md-cart-link .md-cart-txt { display:none; } /* solo icona carrello col badge */
    .sf-prod { flex-direction:column; }
    .sf-prod-media { width:100%; }
    .sf-prod-img, .sf-prod-noimg { width:100%; height:130px; }
}

/* Login: padding ridotto e card a tutta larghezza su mobile */
@media (max-width: 640px) {
    .login-page { padding:1rem; }
    .login-card { padding:2rem 1.4rem; max-width:100%; }
    .login-title { font-size:1.3rem; }
}

/* ============================================================================
   Grico — Desktop e desktop grandi: lo storefront usa più larghezza
   (più colonne di prodotti) mantenendo strette le pagine form/carrello.
   ============================================================================ */
.md-container--shop { max-width: 1280px; }

/* Desktop grandi / ultra-wide: ancora più colonne, ma con un tetto per non
   stirare troppo le card. */
@media (min-width: 1700px) {
    .md-container--shop { max-width: 1560px; }
}

/* Tablet/desktop: card prodotto un filo più ariose */
@media (min-width: 700px) {
    .sf-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.25rem; }
}

/* ============================================================================
   Grico — Tema brand Grico (nero / rosso / bianco)
   Override di contrasto: testo bianco sugli elementi a sfondo rosso.
   ============================================================================ */
:root { --brand-red:#E2231A; --brand-red-dark:#B0151B; --brand-black:#141414; }

/* Bottoni accento (rosso) → testo bianco */
.md-btn-gold { background:#E2231A; color:#fff; }
.md-btn-gold:hover:not(:disabled) { background:#B0151B; }
.md-cart-badge { background:#E2231A; color:#fff; }
.up-avatar { color:#fff; }

/* CTA primaria: nero con testo bianco, hover rosso (più leggibile del rosso su nero) */
.md-btn-primary { background:#141414; color:#fff; }
.md-btn-primary:hover:not(:disabled) { background:#E2231A; color:#fff; }

/* Badge ruolo admin: rosso su nero ok; assicuriamo leggibilità */
.up-badge-admin { background:#141414; color:#E2231A; }

/* Storefront: titolo categoria con sottolineatura rossa, prezzo rosso */
.sf-cat-title { border-bottom-color:#E2231A; }
.sf-price { color:#E2231A; }

/* Top bar nero pieno (#000) come lo sfondo del logo, sempre visibile (sticky) */
.md-topbar { background:#000000; position:sticky; top:0; z-index:1000; box-shadow:0 2px 10px rgba(0,0,0,.35); }
.md-brand { color:#E2231A; display:inline-flex; align-items:center; }
/* Logo del ristorante al posto del testo del brand */
.md-brand-logo { height:36px; width:auto; display:block; }
@media (max-width: 640px) { .md-brand-logo { height:30px; } }

/* ============================================================================
   Grico — Stepper quantità sulle card + barra categorie sticky in basso
   ============================================================================ */
/* Stepper quantità (− N +) nella card prodotto, 0..10 */
.sf-qty { display:inline-flex; align-items:center; border:1.5px solid #E0D9C8; border-radius:6px; overflow:hidden; }
.sf-qty button { width:30px; height:32px; border:none; background:#F0EDE4; cursor:pointer; color:#141414; font-weight:700; font-size:17px; line-height:1; display:flex; align-items:center; justify-content:center; }
.sf-qty button:hover:not(:disabled) { background:#E2231A; color:#fff; }
.sf-qty button:disabled { opacity:.4; cursor:not-allowed; }
.sf-qty span { min-width:30px; text-align:center; font-weight:700; font-size:14px; }

/* Le sezioni categoria tengono conto di header+catbar sticky quando ci si salta sopra */
.sf-cat { scroll-margin-top: 118px; }

.md-container--withcatbar { padding-bottom: 1.5rem; }

/* Wrapper sticky: header + barra categorie restano SEMPRE visibili in cima durante lo scroll */
.sf-sticky-top { position: sticky; top: 0; z-index: 1000; }

/* Barra categorie in cima (sotto l'header), scorrevole orizzontalmente */
.sf-catbar { display:flex; gap:.5rem; overflow-x:auto; padding:.6rem .85rem; background:#141414; border-bottom:2px solid #E2231A; box-shadow:0 3px 14px rgba(0,0,0,.3); }
.sf-catbar::-webkit-scrollbar { height:6px; }
.sf-catbar::-webkit-scrollbar-thumb { background:#E2231A; border-radius:3px; }
.sf-catbar::-webkit-scrollbar-track { background:transparent; }
.sf-catbar-btn { flex:0 0 auto; white-space:nowrap; padding:7px 14px; border-radius:20px; border:1.5px solid #3a3a3a; background:#1d1d1d; color:#fff; font-size:13px; font-weight:600; font-family:var(--th-body-font); cursor:pointer; transition:all .15s; }
.sf-catbar-btn:hover { background:#E2231A; border-color:#E2231A; color:#fff; }
/* Categoria attualmente in vista (scroll-spy): evidenziata in rosso */
.sf-catbar-btn--active { background:#E2231A; border-color:#E2231A; color:#fff; box-shadow:0 0 0 2px rgba(226,35,26,.35); }
/* Bottone "tutte le categorie" fissato all'inizio della barra */
.sf-catbar-trigger { flex:0 0 auto; position:sticky; left:0; z-index:2; display:inline-flex; align-items:center; justify-content:center; width:38px; height:34px; border-radius:10px; border:1.5px solid #E2231A; background:#E2231A; color:#fff; cursor:pointer; transition:all .15s; }
.sf-catbar-trigger:hover { background:#b81a13; border-color:#b81a13; }
/* Spazio finale in coda alla barra categorie */
.sf-catbar-spacer { flex:0 0 auto; width:96px; height:1px; }

/* Footer sticky del carrello (in fondo): quantità + "Procedi al carrello" + totale */
.sf-cartbar { position:fixed; left:0; right:0; bottom:0; z-index:950; display:flex; align-items:center; gap:12px; padding:13px 18px; background:#E2231A; color:#fff; text-decoration:none; font-family:var(--th-body-font); font-weight:700; box-shadow:0 -4px 16px rgba(0,0,0,.28); }
.sf-cartbar:hover { background:#c81d14; }
.sf-cartbar-ico { position:relative; flex:0 0 auto; display:inline-flex; align-items:center; }
.sf-cartbar-badge { position:absolute; top:-8px; right:-9px; min-width:18px; height:18px; padding:0 4px; border-radius:9px;
    background:#fff; color:#E2231A; display:inline-flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:800; line-height:1; box-shadow:0 0 0 2px #E2231A; }
.sf-cartbar-text { flex:1 1 auto; text-align:center; font-size:16px; letter-spacing:.3px; }
.sf-cartbar-total { flex:0 0 auto; font-size:16px; font-weight:800; white-space:nowrap; }
.sf-cartbar-was { text-decoration:line-through; opacity:.75; font-weight:600; font-size:13px; margin-right:6px; }

/* Dock carrello: riepilogo promo (stile coerente col pannello desktop) sopra la
   barra "Procedi al carrello". Superficie bianca con angoli superiori arrotondati. */
.sf-cartdock { position:fixed; left:0; right:0; bottom:0; z-index:950; background:#fff;
    border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden;
    box-shadow:0 -6px 24px rgba(0,0,0,.22); }
.sf-cartdock .sf-cartbar { position:static; box-shadow:none; }
/* Promo già sbloccate: riga verde chiaro con testo verde e spunta (come desktop) */
.sf-promo-active { display:flex; align-items:center; gap:8px; background:#E8F5EC; color:#1E7C42;
    padding:9px 16px; font-family:var(--th-body-font); font-size:13.5px; font-weight:700; }
.sf-promo-active + .sf-promo-active { border-top:1px solid #D6EEDD; }
.sf-promo-active .md-icon { flex:0 0 auto; }
/* Prossima promo da sbloccare: riga ambra con barra di avanzamento */
.sf-promo-nudge { background:#FBF3E8; color:#6a5d44; padding:9px 16px; font-family:var(--th-body-font); }
.sf-promo-nudge-row { display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; }
.sf-promo-nudge-row .md-icon { color:#C9962E; flex:0 0 auto; }
.sf-promo-bar { height:6px; background:#EADFC8; border-radius:4px; overflow:hidden; margin-top:7px; }
.sf-promo-bar-fill { height:100%; background:#E2231A; border-radius:4px; transition:width .4s ease; }

/* Admin > Messaggi: regole promozione configurabili */
.adm-promo-rule { background:#FBF8F0; border:1px solid #ECE3CE; border-radius:10px; padding:.8rem .9rem; }
.adm-promo-fields { display:flex; align-items:center; flex-wrap:wrap; gap:.4rem; margin-top:.6rem; font-size:14px; color:#3a342b; }
.adm-promo-fields.adm-promo-off { opacity:.45; pointer-events:none; }
.adm-promo-num { width:84px; flex:0 0 auto; text-align:center; }

/* ════════════ Anteprima prodotto (modal) ════════════ */
.sf-row--click { cursor:pointer; }
.sf-detail-overlay { position:fixed; inset:0; z-index:1100; background:rgba(20,16,14,.55);
    display:flex; align-items:center; justify-content:center; padding:1rem; backdrop-filter:blur(2px); }
.sf-detail { background:#fff; border-radius:16px; width:min(520px,100%); max-height:94vh;
    overflow-y:auto; overflow-x:hidden; position:relative; box-shadow:0 20px 60px rgba(0,0,0,.4); }
.sf-detail-close { position:absolute; top:10px; right:10px; z-index:2; width:34px; height:34px; border-radius:50%;
    border:none; background:rgba(255,255,255,.92); color:#1A1A1A; font-size:23px; line-height:1; cursor:pointer;
    box-shadow:0 2px 8px rgba(0,0,0,.25); display:flex; align-items:center; justify-content:center; }
.sf-detail-close:hover { background:#fff; }
.sf-detail-media { position:relative; width:100%; height:230px; background:#F0EDE4; }
.sf-detail-media img { width:100%; height:100%; object-fit:cover; display:block; }
.sf-detail-noimg { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#E2231A; }
.sf-detail-tags { position:absolute; left:12px; bottom:12px; display:flex; gap:6px; flex-wrap:wrap; }
.sf-detail-body { padding:1.25rem 1.4rem 1.5rem; }
.sf-detail-name { font-family:var(--th-heading-font); font-size:1.5rem; font-weight:700; color:#1A1A1A; margin:0 0 .35rem; line-height:1.2; }
.sf-detail-price { font-size:1.2rem; font-weight:800; color:#B0151B; margin-bottom:.85rem; }
.sf-detail-desc { font-size:14.5px; color:#5a5247; line-height:1.55; margin:0 0 1rem; }
.sf-detail-allergens { display:flex; gap:.55rem; align-items:flex-start; background:#FBF3E8; border:1px solid #F0E2C8;
    border-radius:10px; padding:.7rem .85rem; font-size:13.5px; color:#6a5d44; line-height:1.5; }
.sf-detail-allergens .md-icon { color:#C9962E; flex:0 0 auto; margin-top:1px; }
.sf-detail-allergens a { color:#E2231A; font-weight:800; text-decoration:none; white-space:nowrap; }
.sf-detail-allergens a:hover { text-decoration:underline; }
.sf-detail-actions { display:flex; align-items:center; gap:.85rem; margin-top:1.2rem; }
.sf-detail-add { width:100%; }
.sf-rowqty--lg button { width:42px; height:42px; font-size:21px; }
.sf-rowqty--lg .sf-rowqty-num { min-width:36px; font-size:16px; }
.sf-detail-inline { color:#6B6B6B; font-size:13.5px; white-space:nowrap; }

/* ════════════ Carrello sempre aperto a destra (desktop) ════════════ */
.sf-main { width:100%; }
.sf-cartaside { display:none; }   /* nascosto: mostrato solo su desktop (vedi media query) */
.sf-cartaside-head { display:flex; align-items:center; gap:.6rem; padding:.9rem 1rem; background:#141414; color:#fff;
    font-weight:700; font-size:15px; font-family:var(--th-body-font); }
/* Icona sacchetto con badge rosso (numero pezzi) in alto a destra: chiarisce che
   è il carrello. Il badge appare solo se i pezzi sono più di 1. */
.sf-cartaside-bag { position:relative; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.sf-cartaside-badge { position:absolute; top:-7px; right:-9px; background:#E2231A; color:#fff; min-width:18px; height:18px;
    padding:0 5px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; font-size:11px;
    font-weight:800; line-height:1; border:2px solid #141414; box-sizing:content-box; }
.sf-cartaside-empty { padding:2.2rem 1rem; text-align:center; color:#9a9082; }
.sf-cartaside-empty .md-icon { opacity:.4; }
.sf-cartaside-empty p { margin:.6rem 0 0; font-size:13.5px; line-height:1.5; }
.sf-cartaside-list { overflow-y:auto; padding:.3rem .25rem; flex:1 1 auto; min-height:0; }
.sf-cartaside-item { display:flex; align-items:center; gap:.6rem; padding:.55rem .75rem; border-bottom:1px solid #F1ECE0; }
.sf-cartaside-item:last-child { border-bottom:none; }
.sf-cartaside-item-main { flex:1; min-width:0; }
.sf-cartaside-item-name { font-size:13.5px; font-weight:600; color:#1A1A1A; line-height:1.25; }
.sf-cartaside-item-price { font-size:12.5px; color:#B0151B; font-weight:700; margin-top:1px; }
.sf-rowqty--sm { flex:0 0 auto; }
.sf-rowqty--sm button { width:26px; height:26px; font-size:15px; }
.sf-rowqty--sm .sf-rowqty-num { min-width:20px; font-size:13px; }
.sf-cartaside-nudge { background:#FBF3E8; padding:.6rem .85rem; font-size:12.5px; color:#6a5d44; }
.sf-cartaside-nudge-row { display:flex; align-items:center; gap:6px; font-weight:600; }
.sf-cartaside-nudge-row .md-icon { color:#C9962E; flex:0 0 auto; }
.sf-cartaside-nudge .sf-promo-bar { background:#EADFC8; margin-top:6px; }
.sf-cartaside-active { background:#E8F5EC; color:#1E7C42; padding:.6rem .85rem; font-size:13px; font-weight:700;
    display:flex; align-items:center; gap:6px; }
.sf-cartaside-sum { padding:.75rem 1rem; border-top:1px solid #ECE5D6; }
.sf-cartaside-sumrow { display:flex; justify-content:space-between; font-size:13.5px; padding:.16rem 0; color:#3a342b; }
.sf-cartaside-disc { color:#1E7C42; font-weight:600; }
.sf-cartaside-tot { font-weight:800; font-size:15px; color:#1A1A1A; padding-top:.4rem; }
.sf-cartaside-cta { display:flex; margin:.1rem 1rem 1rem; }

/* ════════════ Desktop: 2 colonne prodotti + carrello aperto a destra ════════════ */
@media (min-width:1024px) {
    /* padding-bottom: stacca il riepilogo carrello (aside) e il menù dal footer,
       che altrimenti su desktop resta appiccicato a fine pagina. */
    .sf-main { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:1.6rem;
        max-width:1280px; margin:0 auto; align-items:start; padding:0 1.75rem 3rem; }
    .sf-main .md-container--shop { max-width:none; margin:0; width:auto; padding-left:0; padding-right:0; }
    .sf-list { grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:3rem; }
    .sf-list:has(.sf-row + .sf-row)::before {
        content:""; position:absolute; top:.4rem; bottom:.4rem; left:50%; width:1px;
        background:#E2D9C4; pointer-events:none;
    }
    /* align-self:stretch così la colonna è alta quanto il menù: lo sticky interno
       resta visibile per tutto lo scroll, non solo finché dura il contenuto del carrello */
    .sf-cartaside { display:block; align-self:stretch; }
    .sf-cartaside-inner { position:sticky; top:calc(152px - var(--sf-hdr-shift, 0px)); margin-top:1.5rem; background:#fff; border:1.5px solid #E0D9C8;
        border-radius:14px; overflow:hidden; display:flex; flex-direction:column; max-height:calc(100vh - 172px + var(--sf-hdr-shift, 0px));
        box-shadow:0 2px 16px rgba(0,0,0,.06); transition:top .22s cubic-bezier(.4,0,.2,1), max-height .22s cubic-bezier(.4,0,.2,1); }
    .sf-cartdock { display:none; }            /* su desktop il carrello è l'aside */
    .sf-with-cartbar { padding-bottom:0; }
}

/* Schermi ampi: sfrutta lo spazio → container più largo e 3 colonne prodotti */
@media (min-width:1400px) {
    .sf-main { max-width:1600px; gap:2rem; }
    .sf-list { grid-template-columns:repeat(3, minmax(0,1fr)); column-gap:2.6rem; }
    /* due linee divisorie (al posto della centrale) per le 3 colonne */
    .sf-list:has(.sf-row + .sf-row)::before { left:33.333%; }
    .sf-list:has(.sf-row + .sf-row)::after {
        content:""; position:absolute; top:.4rem; bottom:.4rem; left:66.666%; width:1px;
        background:#E2D9C4; pointer-events:none;
    }
}

/* Tablet: due colonne prodotti, carrello ancora come barra in basso */
@media (min-width:680px) and (max-width:1023px) {
    .sf-list { grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:2.5rem; }
    .sf-list:has(.sf-row + .sf-row)::before {
        content:""; position:absolute; top:.4rem; bottom:.4rem; left:50%; width:1px;
        background:#E2D9C4; pointer-events:none;
    }
}
/* Spazio in fondo alla pagina così la barra non copre footer/ultimi contenuti */
/* Spazio in fondo pari all'altezza reale del dock carrello (misurata via JS in
   --cartdock-h), così su mobile si scorre e si vede TUTTO il footer sopra la barra. */
.sf-with-cartbar { padding-bottom:calc(var(--cartdock-h, 70px) + 1rem); }

/* Bottone "Tutte le categorie" + selettore categorie a schermo intero */
.sf-catmenu-btn { display:inline-flex; align-items:center; gap:9px; margin-bottom:1.5rem; padding:11px 20px; border-radius:10px; border:1.5px solid #141414; background:#141414; color:#fff; font-size:15px; font-weight:700; font-family:var(--th-body-font); cursor:pointer; transition:all .15s; }
.sf-catmenu-btn:hover { background:#E2231A; border-color:#E2231A; }
.sf-catmenu-overlay { position:fixed; inset:0; z-index:1100; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; padding:1rem; animation:sf-fade .15s ease; }
@keyframes sf-fade { from { opacity:0; } to { opacity:1; } }
.sf-catmenu-panel { width:100%; max-width:520px; max-height:88vh; display:flex; flex-direction:column; background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 24px 70px rgba(0,0,0,.45); }
.sf-catmenu-head { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.25rem; background:#141414; color:#fff; font-size:1.1rem; font-weight:800; letter-spacing:.02em; }
.sf-catmenu-close { background:none; border:none; color:#fff; font-size:1.8rem; line-height:1; cursor:pointer; padding:0 .25rem; }
.sf-catmenu-close:hover { color:#E2231A; }
.sf-catmenu-list { overflow-y:auto; padding:.75rem; display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.sf-catmenu-item { padding:14px 16px; border-radius:10px; border:1.5px solid #E0D9C8; background:#FAF6EE; color:#141414; font-size:15px; font-weight:600; font-family:var(--th-body-font); text-align:left; cursor:pointer; transition:all .15s; }
.sf-catmenu-item:hover { background:#E2231A; border-color:#E2231A; color:#fff; }
@media (max-width:480px) { .sf-catmenu-list { grid-template-columns:1fr; } }

/* Ricerca prodotto nello storefront */
.sf-search { position:relative; display:flex; align-items:center; margin-bottom:1.5rem; }
.sf-search-icon { position:absolute; left:14px; color:#9A8F7A; pointer-events:none; }
.sf-search-input { width:100%; box-sizing:border-box; padding:12px 40px 12px 42px; border:1.5px solid #E0D9C8; border-radius:10px; font-size:15px; font-family:var(--th-body-font); color:#1A1A1A; background:#fff; outline:none; transition:border-color .15s; }
.sf-search-input:focus { border-color:#E2231A; }
.sf-search-clear { position:absolute; right:10px; width:26px; height:26px; border:none; border-radius:50%; background:#F0EDE4; color:#555; font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.sf-search-clear:hover { background:#E2231A; color:#fff; }

/* Toolbar menù: Tutte le categorie · Cerca · Filtri.
   Desktop/tablet → una sola riga (la ricerca cresce). Mobile → ricerca a tutta
   larghezza in cima, poi categorie e filtri sotto. */
.sf-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem .7rem; margin-bottom:1.5rem; }
.sf-toolbar .sf-catmenu-btn { margin:0; flex:0 0 auto; }
.sf-toolbar .sf-search { margin:0; flex:1 1 220px; min-width:190px; }
.sf-toolbar .sf-filters { margin:0; flex:0 0 auto; }
@media (max-width:719px) {
    /* Stesso ordine del desktop, impilato: Categorie · Cerca · Filtri (tutto a tutta larghezza) */
    .sf-toolbar .sf-catmenu-btn { flex:1 1 100%; justify-content:center; }
    .sf-toolbar .sf-search { flex:1 1 100%; }
}

/* Selettore lingua nell'header */
/* Il WRAP è il pulsante (pill): icona mondo + select dentro lo stesso bordo. */
.md-lang-wrap { display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.08);
    border:1.5px solid rgba(255,255,255,.25); border-radius:8px; padding:5px 9px; transition:border-color .15s; }
.md-lang-wrap:hover { border-color:#E2231A; }
/* Icona mondo: chiara così è visibile sull'header scuro (l'Icon SVG usa currentColor). */
.md-lang-icon { display:inline-flex; align-items:center; color:#FAF8F3; }
.md-lang-icon .md-icon { vertical-align:middle; }
/* Select trasparente: si fonde nel pill del wrap (niente bordo/sfondo propri). */
.md-lang-select { background:transparent; color:#FAF8F3; border:none; border-radius:0; padding:1px 2px;
    font-size:13px; font-family:var(--th-body-font); cursor:pointer; outline:none; }
.md-lang-select option { color:#1A1A1A; }

/* ============================================================================
   Grico — Frecce "indietro" (navigazione semplice)
   ============================================================================ */
/* Login: freccia bianca in alto a sinistra, ben visibile sullo sfondo scuro */
.login-back {
    position: fixed;
    top: 1.1rem;
    left: 1.1rem;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255,255,255,.10);
    border: 2px solid #ffffff;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 50;
    transition: all .15s;
}
.login-back:hover { background: #E2231A; border-color: #E2231A; }

/* Carrello (e pagine chiare): bottone indietro con freccia, rosso brand */
.md-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 1rem;
    padding: 8px 16px;
    background: #141414;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--th-body-font);
    cursor: pointer;
    transition: all .15s;
}
.md-back-btn:hover { background: #E2231A; }

/* ============================================================================
   Grico — Riepilogo carrello, zona e regole consegna
   ============================================================================ */
/* Gestione ordine: gruppo di bottoni stato (applicazione immediata) + notifica email */
.ord-status-group { display:flex; flex-wrap:wrap; gap:.5rem; }
.ord-status-btn { flex:0 0 auto; padding:8px 14px; border-radius:8px; border:1.5px solid #E0D9C8; background:#fff; color:#444; font-size:13px; font-weight:600; font-family:var(--th-body-font); cursor:pointer; transition:all .15s; }
.ord-status-btn:hover:not(:disabled) { border-color:#E2231A; color:#E2231A; }
.ord-status-btn:disabled { opacity:.6; cursor:default; }
.ord-status-btn--active { background:#E2231A; border-color:#E2231A; color:#fff; }
.ord-status-btn--active:hover:not(:disabled) { color:#fff; }
.ord-notify-row { display:flex; flex-wrap:wrap; align-items:center; gap:1rem; }
.ord-chk { display:inline-flex; align-items:center; gap:.35rem; font-size:14px; color:#1A1A1A; cursor:pointer; }

.sum-row { display:flex; justify-content:space-between; padding:.35rem 0; font-size:15px; color:#1A1A1A; }
.sum-row-discount { color:#2D8A4E; font-weight:600; }
.sum-total { border-top:2px solid #E0D9C8; margin-top:.4rem; padding-top:.7rem; font-size:1.2rem; font-weight:800; }
.sum-hint { margin-top:.6rem; font-size:13px; color:#9A6B2E; background:#FFF7E8; border:1px solid #F0D9A8; border-radius:8px; padding:8px 12px; }

/* Stato promozioni nel riepilogo carrello: sbloccate (verde) + prossima (ambra con barra) */
.sum-promo { margin-top:.55rem; border-radius:9px; padding:9px 12px; font-size:13px; }
.sum-promo--done { display:flex; align-items:center; gap:7px; background:#E8F5EC; border:1px solid #BFE3CB; color:#1E7C42; font-weight:700; }
.sum-promo--next { background:#FFF7E8; border:1px solid #F0D9A8; color:#9A6B2E; }
.sum-promo-row { display:flex; align-items:center; gap:7px; font-weight:600; margin-bottom:7px; }
.sum-promo .md-icon { flex:0 0 auto; }
.sum-promo--next .sf-promo-bar { background:#EADFC8; }

.delivery-zone-box { margin-top:.75rem; padding-top:.75rem; border-top:1px dashed #E0D9C8; }
.zone-opt { display:flex; align-items:flex-start; gap:.6rem; padding:.45rem 0; cursor:pointer; font-size:14px; }
.zone-opt input { margin-top:3px; }
.delivery-rules { margin-top:.75rem; background:#FBF1F0; border:1px solid #F3C9C5; border-radius:8px; padding:12px 14px; font-size:13px; color:#7a2a22; }
.delivery-rules ul { margin:.4rem 0 0; padding-left:1.1rem; display:flex; flex-direction:column; gap:.25rem; }

/* ============================================================================
   Grico — Footer: contatti negozio
   ============================================================================ */
/* Riga contatti: logo Sushi a sinistra, contatti a destra */
.site-footer-contact { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem 1.5rem; padding:.25rem 0 1rem; }
.site-footer-contacts { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1.5rem; }
.footer-logo-img { width:auto; max-width:170px; max-height:60px; height:auto; display:block; margin:0; }
.footer-contact-item { color:#e9e9e9; text-decoration:none; font-size:13.5px; transition:color .15s; display:inline-flex; align-items:center; gap:5px; }
.footer-contact-item:hover { color:#E2231A; }

/* Riga 3: link legali centrati, sotto il copyright */
.site-footer-links--center { justify-content:center; flex-wrap:wrap; padding-top:1rem; }

/* Link "Le tue preferenze relative alla privacy": stile dei link footer + scudo blu */
.site-footer-link--pref { display:inline-flex; align-items:center; gap:6px; }
.footer-pref-ico { flex-shrink:0; display:block; }

/* Nasconde SOLO il pulsante FLOTTANTE delle preferenze privacy di iubenda.
   Il pulsante imposta inline `display:inline-block !important` (che batte un
   `display:none` esterno), quindi lo neutralizziamo con proprietà che l'inline
   NON tocca: lo rendiamo invisibile, non cliccabile e fuori schermo.
   Il link "Le tue preferenze..." nel footer NON è toccato (ha iubenda-cs-
   preferences-link ma non tp-btn/floating). */
.iubenda-tp-btn,
[class*="iub"][class*="floating"],
[id*="iub"][id*="floating"] {
    opacity:0 !important; pointer-events:none !important;
    position:fixed !important; left:-9999px !important; right:auto !important; bottom:auto !important;
    width:0 !important; height:0 !important; overflow:hidden !important;
}

@media (max-width:640px) {
    .site-footer-contact { flex-direction:column; align-items:center; text-align:center; gap:.6rem; }
    .site-footer-contacts { justify-content:center; flex-direction:column; gap:.4rem; }
    .footer-logo-img { margin:0 auto; }
}

/* ============================================================================
   Grico — Home: barra orari + banner promozioni
   ============================================================================ */
/* Orari: striscia rossa ben visibile sotto l'header */
.shop-hours { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.4rem .9rem; background:#E2231A; color:#fff; padding:.6rem 1rem; font-size:15px; letter-spacing:.02em; }
.shop-hours-icon { font-size:1.1rem; }
.shop-hours-sep { opacity:.6; }
/* Placeholder neutro mostrato mentre gli orari si caricano (niente "Oggi chiuso"). */
.shop-hours-skel { opacity:.85; font-style:italic; }
@media (max-width:640px){ .shop-hours { font-size:13.5px; } }

/* Avviso "solo contanti" in home */
.cash-only-banner { display:flex; align-items:center; gap:8px; background:#FFF7E8; border:1px solid #F0DCA8; color:#8A6D1E; border-radius:10px; padding:9px 14px; font-size:13.5px; font-weight:600; margin-bottom:1rem; }
.cash-only-banner svg { flex-shrink:0; color:#C79A2E; }

/* Locandina promozioni (immagine responsive) */
.promo-locandina { display:block; margin-bottom:.5rem; }
.promo-locandina img { display:block; width:100%; height:auto; border-radius:14px; }
.age-redeclare { display:block; margin:0 auto 1.5rem; background:none; border:none; color:#9A7A2E; font-size:12px; text-decoration:underline; cursor:pointer; padding:2px 6px; }
.age-redeclare:hover { color:#E2231A; }

/* Popup verifica età (+18) */
.age-gate-overlay { position:fixed; inset:0; z-index:1300; background:rgba(20,16,12,.8); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:1.25rem; animation:sf-fade .2s ease; }
.age-gate-panel { width:100%; max-width:410px; background:#fff; border-radius:22px; overflow:hidden;
    box-shadow:0 30px 90px rgba(0,0,0,.55); animation:age-pop .28s cubic-bezier(.2,.8,.25,1.05); }
@keyframes age-pop { from { opacity:0; transform:translateY(16px) scale(.96); } to { opacity:1; transform:none; } }

/* Header brandizzato: logo circolare su sfondo rosso→nero, badge 18+ */
.age-gate-hero { position:relative; height:142px; display:flex; align-items:center; justify-content:center;
    background:radial-gradient(120% 140% at 50% -10%, #E2231A 0%, #7a0d0a 42%, #161311 100%); }
.age-gate-hero::after { content:""; position:absolute; inset:0;
    background:radial-gradient(60% 80% at 50% 125%, rgba(255,255,255,.10), transparent 60%); }
.age-gate-logo-ring { position:relative; z-index:1; width:106px; height:106px; border-radius:50%; background:#fff;
    display:flex; align-items:center; justify-content:center; box-shadow:0 12px 32px rgba(0,0,0,.38); border:4px solid rgba(255,255,255,.9); }
.age-gate-logo-ring img { width:82px; height:82px; object-fit:contain; border-radius:50%; }
.age-gate-badge { position:absolute; z-index:2; top:18px; right:22px; background:#fff; color:#E2231A; font-family:var(--th-heading-font);
    font-weight:800; font-size:18px; line-height:1; padding:7px 11px; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.32); letter-spacing:.5px; }
.age-gate-badge small { font-size:12px; vertical-align:top; }

.age-gate-body { padding:1.5rem 1.6rem 1.7rem; text-align:center; }
.age-gate-title { font-family:var(--th-heading-font); font-size:1.5rem; font-weight:800; color:#141414; margin:0 0 .5rem; }
.age-gate-text { color:#5a534a; font-size:14.5px; line-height:1.55; margin:0 0 1.4rem; }
.age-gate-actions { display:flex; flex-direction:column; gap:.7rem; margin-bottom:1.1rem; }
.age-gate-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 18px; border-radius:12px;
    font-size:15.5px; font-weight:700; font-family:var(--th-body-font); cursor:pointer; border:2px solid transparent; transition:all .15s; }
.age-gate-btn--yes { background:#E2231A; color:#fff; box-shadow:0 8px 22px rgba(226,35,26,.32); }
.age-gate-btn--yes:hover { background:#c01b14; transform:translateY(-1px); box-shadow:0 10px 26px rgba(226,35,26,.4); }
.age-gate-btn--no { background:#FAF6EE; color:#4a443c; border-color:#E5DDCC; }
.age-gate-btn--no:hover { background:#f1ead9; border-color:#d8cdb6; }
/* Avvertimento responsabilità: card ambra ben visibile */
.age-gate-warn { display:flex; align-items:center; gap:.6rem; text-align:left;
    background:#FCEFD6; border:1.5px solid #EBCF8F; border-radius:12px; padding:.7rem .85rem; }
.age-gate-warn-icon { flex:0 0 auto; width:30px; height:30px; border-radius:50%; background:#E8A93420;
    display:flex; align-items:center; justify-content:center; color:#B9791C; }
.age-gate-warn-text { font-size:12px; line-height:1.45; color:#7a5a1e; }
.age-gate-warn-text strong { color:#5e4413; }

/* Backup per categoria (admin) */
.bk-cat-grid { display:flex; flex-wrap:wrap; gap:.5rem .9rem; margin-top:.5rem; }
.bk-cat { display:inline-flex; align-items:center; gap:.45rem; padding:7px 12px; border:1.5px solid #E0D9C8; border-radius:9px; background:#FAF6EE; font-size:14px; font-weight:600; color:#1a1a1a; cursor:pointer; }
.bk-cat input { accent-color:#E2231A; }
.btn-outline.is-disabled { opacity:.5; pointer-events:none; }

/* Campanella notifiche (header) */
.nbell-wrap { position:relative; display:inline-flex; }
.nbell-btn { position:relative; display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:10px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:#fff; cursor:pointer; transition:all .15s; }
.nbell-btn:hover { background:rgba(255,255,255,.14); }

/* Tutti i controlli dell'header alla STESSA altezza (lingua, campanella e
   bottoni Dashboard/Esci/Accedi/Carrello): box-sizing uniforme + altezza fissa. */
.md-lang-wrap, .nbell-btn, .md-topbar-btn, .md-cart-link { height:38px; box-sizing:border-box; border-radius:9px; }
.nbell-badge { position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 4px; border-radius:9px; background:#E2231A; color:#fff; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px #141414; }
.nbell-backdrop { position:fixed; inset:0; z-index:1190; }
.nbell-panel { position:absolute; top:46px; right:0; z-index:1200; width:340px; max-width:88vw; max-height:70vh; display:flex; flex-direction:column; background:#fff; color:#1a1a1a; border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.35); overflow:hidden; }
/* Mobile/tablet: il pannello è fisso dentro al viewport (ancorato in alto a dx)
   così non esce fuori schermo a sinistra. */
@media (max-width:1024px) {
    .nbell-panel { position:fixed; top:62px; right:10px; left:auto; width:min(340px, calc(100vw - 20px)); max-width:none; max-height:75vh; }
}
.nbell-head { display:flex; align-items:center; justify-content:space-between; padding:.85rem 1rem; border-bottom:1px solid #eee7d6; font-size:1.02rem; }
.nbell-clear { background:none; border:none; color:#9A7A2E; font-size:12.5px; cursor:pointer; text-decoration:underline; }
.nbell-list { overflow-y:auto; }
.nbell-empty { padding:1.6rem 1rem; text-align:center; color:#9a9a9a; font-size:14px; }
.nbell-item { display:block; width:100%; text-align:left; padding:.7rem 1rem; border:none; border-bottom:1px solid #f1ece0; background:#fff; cursor:pointer; transition:background .12s; }
.nbell-item:hover { background:#FAF6EE; }
.nbell-item--unread { background:#FFF7F2; }
.nbell-item--unread:hover { background:#fdeee5; }
.nbell-item-title { font-weight:700; font-size:13.5px; color:#141414; }
.nbell-item-body { font-size:12.5px; color:#555; margin-top:1px; }
.nbell-item-time { font-size:11px; color:#a09a8c; margin-top:3px; }
.nbell-push-btn { margin:.6rem; padding:10px; border-radius:10px; border:1.5px solid #E2231A; background:#fff; color:#E2231A; font-weight:700; font-size:13.5px; cursor:pointer; }
.nbell-push-btn:hover:not(:disabled) { background:#E2231A; color:#fff; }
.nbell-push-on { margin:.6rem .6rem 0; padding:8px 10px; border-radius:8px; background:#F0FAF0; color:#2D8A4E; font-size:12.5px; text-align:center; }
.nbell-push-btn--off { border-color:#C9C2B4; color:#777; }
.nbell-push-btn--off:hover:not(:disabled) { background:#777; border-color:#777; color:#fff; }

/* Stato notifiche push (Impostazioni admin) */
.settings-push-state { display:inline-block; padding:8px 12px; border-radius:8px; font-size:13.5px; font-weight:600; }
.settings-push-state--on { background:#F0FAF0; color:#2D8A4E; }

/* Toggle "Non disponibile" nel popup prodotto (rosso quando attivo) */
.edit-attr-chip--unavail { border-color:#E0C2C2; }
.edit-attr-chip--unavail-on { background:#FBE9E9 !important; border-color:#E2231A !important; color:#B0151B !important; font-weight:700; }

/* Codice ordine (10 caratteri) nella gestione ordini admin */
.ord-code { font-family:'Courier New', monospace; font-weight:700; letter-spacing:.06em; color:#141414; background:#F0EDE4; border-radius:5px; padding:1px 6px; }

/* Filtri rapidi storefront (sotto la ricerca) */
.sf-filters { display:flex; flex-wrap:wrap; gap:.5rem; margin:-.5rem 0 1.25rem; }
.sf-filter { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:20px; border:1.5px solid #E0D9C8; background:#fff; color:#1a1a1a; font-size:13.5px; font-weight:600; font-family:var(--th-body-font); cursor:pointer; transition:all .15s; }
.sf-filter:hover { border-color:#141414; }
.sf-filter--on { background:#141414; border-color:#141414; color:#fff; }
.sf-filter--on:hover { background:#E2231A; border-color:#E2231A; }
.sf-filter-clear { background:#fff; border-color:#E2231A; color:#E2231A; }
.sf-filter-clear:hover { background:#E2231A; border-color:#E2231A; color:#fff; }

.cart-edit-link { background:none; border:none; color:#9A7A2E; font-size:12px; text-decoration:underline; cursor:pointer; padding:0 2px; }
.cart-edit-link:hover { color:#E2231A; }

/* Omaggio nel carrello (birra/lattina sopra € 25) */
.cart-gift { border:2px dashed #E2231A; background:#FFF7F2; }
.cart-gift-head { display:flex; align-items:center; gap:.5rem; font-size:1.05rem; color:#141414; margin-bottom:.4rem; }
.cart-gift-icon { color:#E2231A; display:inline-flex; }
.cart-gift-badge { margin-left:auto; background:#E2231A; color:#fff; font-size:11px; font-weight:800; letter-spacing:.04em; border-radius:6px; padding:3px 8px; }
.cart-gift-text { color:#4a4a4a; font-size:14px; margin:.2rem 0 .6rem; }
.cart-gift select { max-width:260px; }

/* ============================================================================
   Grico — Editor orari di apertura (admin)
   ============================================================================ */
.hours-day { display:flex; align-items:flex-start; gap:1rem; padding:.7rem 0; border-bottom:1px solid #F0EDE4; }
.hours-day-name { flex:0 0 110px; font-weight:700; color:#1A1A1A; padding-top:6px; }
.hours-day-body { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.hours-range { display:inline-flex; align-items:center; gap:.35rem; background:#F7F4EF; border:1px solid #E0D9C8; border-radius:8px; padding:4px 8px; }
.hours-range input[type="time"] { border:1px solid #E0D9C8; border-radius:6px; padding:4px 6px; font-size:14px; font-family:var(--th-body-font); }
.hours-x { background:transparent; border:none; color:#D94040; cursor:pointer; font-size:13px; line-height:1; padding:2px; }
.hours-x:hover { color:#b83232; }
.hours-closed { color:#9A6B2E; font-style:italic; font-size:13px; }
.hours-exc { background:#FBF9F4; border:1px solid #E0D9C8; border-radius:10px; padding:.85rem 1rem; margin-bottom:.75rem; }
.hours-exc-dates { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-bottom:.6rem; }
.hours-exc-dates input[type="date"] { border:1px solid #E0D9C8; border-radius:6px; padding:5px 8px; font-size:14px; font-family:var(--th-body-font); }
.hours-exc-ranges { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
/* Orari su schermi medio-piccoli (incl. Sunmi ~720px CSS): il giorno impila
   nome sopra e fasce sotto, gli input ora si restringono, tutto resta dentro. */
@media (max-width:768px){
    .hours-day { flex-direction:column; gap:.4rem; align-items:stretch; }
    .hours-day-name { padding-top:0; flex-basis:auto; }
    .hours-day-body { width:100%; }
    /* Ogni fascia occupa l'intera riga; i due input ora si dividono lo spazio
       disponibile (flex:1, min-width:0) così "11:30 – 15:00 ✕" non sfora mai. */
    .hours-range { display:flex; width:100%; box-sizing:border-box; flex-wrap:nowrap; align-items:center; }
    .hours-range input[type="time"] { flex:1 1 0; min-width:0; width:auto; }
    /* Eccezioni (chiusure/aperture/override): righe a piena larghezza, a capo. */
    .hours-exc-dates, .hours-exc-ranges { width:100%; }
    .hours-exc-dates input[type="date"] { flex:1 1 120px; min-width:0; }
}
/* Backstop anti-sforamento per le schermate admin fino a ~820px (copre il
   Sunmi a 720): clip non crea scroll-container, non rompe gli header sticky. */
@media (max-width:820px){ .md-container { overflow-x: clip; } }

/* Stato aperto/chiuso nella striscia orari */
.shop-status { font-weight:800; padding:2px 10px; border-radius:20px; font-size:13px; }
.shop-status-open { background:#fff; color:#1f8a4c; }
.shop-status-closed { background:#fff; color:#B83232; }
/* Avviso pre-ordine quando chiuso ma ci sono ancora fasce disponibili oggi */
.shop-preorder { display:inline-flex; align-items:center; gap:5px; font-weight:700; font-size:12.5px;
    padding:2px 10px; border-radius:20px; background:#1F9D4D; color:#fff;
    border:1px solid rgba(255,255,255,.55); }
.shop-preorder .md-icon { flex:0 0 auto; }

/* Dettaglio importi ordine (account / admin / delivery) */
.ord-bd { display:flex; justify-content:space-between; font-size:13px; padding:1px 0; color:#1A1A1A; }

/* ============================================================================
   Grico — Pagina ordine cliente (stato + timeline)
   ============================================================================ */
.ord-status-big { display:inline-block; font-size:1.1rem; font-weight:800; padding:8px 22px; border-radius:24px; }
.ord-steps { display:flex; justify-content:space-between; margin-top:1.25rem; position:relative; }
.ord-steps::before { content:""; position:absolute; top:9px; left:8%; right:8%; height:2px; background:#E0D9C8; z-index:0; }
.ord-step { display:flex; flex-direction:column; align-items:center; gap:.4rem; flex:1; position:relative; z-index:1; }
.ord-step-dot { width:18px; height:18px; border-radius:50%; background:#E0D9C8; border:2px solid #fff; }
.ord-step.done .ord-step-dot { background:#E2231A; }
.ord-step-lbl { font-size:11px; color:#6B6B6B; text-align:center; line-height:1.2; }
.ord-step.done .ord-step-lbl { color:#1A1A1A; font-weight:600; }

/* ════════════════════════════════════════════════════════════════════════════
   Grico — DESIGN REFINEMENT LAYER
   Pass front-end avanzato: elevazione a strati, micro-interazioni, focus
   accessibile, tipografia più nitida e coerenza brand (nero/rosso/bianco).
   Tocca SOLO proprietà visive/di interazione (ombre, transizioni, transform,
   outline, colore) — mai il layout — quindi non altera le strutture esistenti.
   ════════════════════════════════════════════════════════════════════════════ */
:root {
    /* Brand semantico (alias chiari sui colori legacy) */
    --brand: #E2231A;
    --brand-600: #C81E16;
    --brand-700: #B0151B;
    --ink: #141414;
    --paper: #FAF8F3;
    --line: #E0D9C8;

    /* Tipografia: display elegante (serif) + UI nitida (sans) */
    --font-display: 'Georgia', 'Times New Roman', serif;
    --font-ui: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;

    /* Elevazione a strati: più naturale di un singolo blur piatto */
    --shadow-xs: 0 1px 2px rgba(20,20,20,.06);
    --shadow-sm: 0 1px 2px rgba(20,20,20,.05), 0 2px 8px rgba(20,20,20,.05);
    --shadow-md: 0 2px 6px rgba(20,20,20,.05), 0 10px 26px rgba(20,20,20,.09);
    --shadow-lg: 0 10px 24px rgba(20,20,20,.09), 0 24px 56px rgba(20,20,20,.14);
    --shadow-brand: 0 6px 22px rgba(226,35,26,.26);

    /* Movimento */
    --ease: cubic-bezier(.2,.7,.2,1);
    --dur: .18s;

    /* Anello di focus accessibile, coerente ovunque */
    --ring: 0 0 0 3px rgba(226,35,26,.32);
}

/* Icone inline (componente Icon) allineate al testo */
.md-icon { display:inline-block; vertical-align:-.15em; flex:0 0 auto; }

/* ── Rendering & basi ───────────────────────────────────────────────────── */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
html { scroll-behavior: smooth; }
::selection { background: rgba(226,35,26,.18); color: var(--ink); }

/* Scrollbar discreta su desktop */
@media (pointer: fine) {
    * { scrollbar-width: thin; scrollbar-color: #cfc7b4 transparent; }
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-thumb { background: #d9d1bd; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
    ::-webkit-scrollbar-thumb:hover { background: #c7bda3; }
}

/* ── Focus accessibile su tutti gli elementi interattivi ────────────────── */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, .md-btn:focus-visible,
.dash-tile:focus-visible, .sf-catbar-btn:focus-visible, .sf-catmenu-item:focus-visible,
.up-btn-create:focus-visible, .login-btn:focus-visible {
    outline: none;
    box-shadow: var(--ring);
}

/* Rispetta "riduci movimento" */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ── Tipografia: gerarchia più curata ───────────────────────────────────── */
.md-h1, .up-title, .login-subtitle, .impostazioni-heading, .dash-tile-title { letter-spacing: -.012em; }
.md-h1 { line-height: 1.16; }
.md-h2 { letter-spacing: -.008em; line-height: 1.25; }
.md-muted { line-height: 1.5; }

/* ── Bottoni: micro-interazione (lift + press) + ombra brand ────────────── */
.md-btn, .up-btn-create, .login-btn, .btn-gold, .btn-outline {
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
                background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.md-btn:not(:disabled):hover { transform: translateY(-1px); }
.md-btn:not(:disabled):active { transform: translateY(0); }
.md-btn-primary { box-shadow: var(--shadow-sm); }
.md-btn-primary:not(:disabled):hover { box-shadow: var(--shadow-brand); }
.md-btn-gold:not(:disabled):hover, .md-btn-gold:not(:disabled):focus-visible { box-shadow: var(--shadow-brand); }
.md-back-btn { transition: transform var(--dur) var(--ease), background var(--dur) var(--ease); }
.md-back-btn:hover { transform: translateX(-2px); }

/* ── Card, tile, contenitori: elevazione + lift al hover ────────────────── */
.md-card { box-shadow: var(--shadow-sm); transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.dash-tile { box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.dash-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.up-card { box-shadow: var(--shadow-sm); }

/* ── Storefront: card prodotto con lift e zoom immagine ─────────────────── */
.sf-prod { box-shadow: var(--shadow-xs); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.sf-prod:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #EBD7B8; }
.sf-prod-img { transition: transform .4s var(--ease); }
.sf-prod:hover .sf-prod-img { transform: scale(1.05); }
.sf-prod-name { letter-spacing: -.004em; }
.sf-catbar-btn, .sf-catbar-trigger { transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.sf-catbar-btn:hover { transform: translateY(-1px); }
.sf-catmenu-item { transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.sf-catmenu-item:hover { transform: translateY(-1px); }

/* ── Input/textarea/select: anello di focus morbido (non solo bordo) ─────── */
.md-input, .uf-input, .up-input, .up-select, .login-input, .product-name-input,
.product-desc-input, .sf-search-input {
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.md-input:focus, .uf-input:focus, .up-input:focus, .up-select:focus, .login-input:focus,
.product-name-input:focus, .product-desc-input:focus {
    box-shadow: var(--ring);
}

/* ── Badge/tag: tracking e nitidezza ────────────────────────────────────── */
.sf-tag, .ord-badge, .up-badge, .product-cat-tag { letter-spacing: .012em; }

/* ── Header & barre: separazione più morbida e profonda ─────────────────── */
.md-topbar { box-shadow: 0 1px 0 rgba(255,255,255,.05), 0 8px 22px rgba(0,0,0,.30); }
.main-tab-bar { box-shadow: 0 4px 14px rgba(0,0,0,.06); }

/* ── Login: card più presente, con elevazione marcata ───────────────────── */
.login-card { box-shadow: var(--shadow-lg); }
.login-btn { box-shadow: var(--shadow-sm); }
.login-btn:not(:disabled):hover { box-shadow: var(--shadow-brand); }

/* ── Modali/overlay: entrata morbida + elevazione coerente ──────────────── */
/* Pannelli NON centrati con translate (dropdown categorie, policy a tutta
   larghezza): possono animare il transform liberamente. */
.sf-catmenu-panel, .policy-modal {
    box-shadow: var(--shadow-lg);
    animation: md-pop .2s var(--ease);
}
@keyframes md-pop { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }

/* Modali CENTRATE con transform: translate(-50%,-50%): l'animazione DEVE
   preservare quel transform di centratura. Con md-pop (che andava a
   transform:none) il modale partiva spostato in basso a destra e poi
   "scattava" al centro a fine animazione. md-pop-center resta sempre centrato. */
.up-modal, .product-edit-modal, .confirm-modal {
    box-shadow: var(--shadow-lg);
    animation: md-pop-center .2s var(--ease);
}
@keyframes md-pop-center {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)) scale(.985); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* ── Promo / orari: rifinitura ombra ────────────────────────────────────── */
.promo-banner { box-shadow: var(--shadow-sm); }
.shop-hours { box-shadow: 0 2px 10px rgba(226,35,26,.12); }

/* ── Allineamento icona+testo nei contenitori che prima avevano un'emoji ─── */
.dash-tile-title, .impostazioni-heading, .edit-section-title { display:flex; align-items:center; gap:9px; }
.footer-contact-item { display:inline-flex; align-items:center; gap:7px; }
.promo-emoji { display:inline-flex; align-items:center; justify-content:center; }
.shop-hours-icon { display:inline-flex; align-items:center; }
.edit-attr-chip { display:inline-flex; align-items:center; gap:5px; }
/* Chip "Novità" nell'editor: evidenziata quando attiva */
.edit-attr-chip--new.edit-attr-chip--on { background:#FDEAE8; border-color:#F3B3AD; color:#B0151B; }
/* Le icone dentro i bottoni ereditano il colore del testo del bottone */
.md-btn .md-icon, .btn-gold .md-icon, .btn-outline .md-icon, .up-btn-create .md-icon { vertical-align:-.18em; }

/* ── Metodi di pagamento (Admin) + checkout carta ─────────────────────────── */
/* Guida Stripe (infobox) */
.pay-guide { padding:1.1rem 1.25rem; border-left:4px solid #2F6FED; background:#F4F8FF; }
.pay-guide-head { display:flex; align-items:center; gap:8px; font-weight:800; color:#1F4FB0; margin-bottom:.6rem; }
.pay-guide-list { margin:0; padding-left:1.2rem; display:flex; flex-direction:column; gap:.45rem; color:#33414F; font-size:13.5px; line-height:1.5; }
.pay-guide-list a { color:#2F6FED; font-weight:600; }
.pay-guide-list code { background:#E5EDFA; border-radius:4px; padding:1px 5px; font-size:12px; }

/* Scelta metodo di pagamento al checkout */
.pay-pick { display:flex; flex-direction:column; gap:.55rem; margin-top:.4rem; }
.pay-opt { display:flex; align-items:center; gap:.7rem; padding:.7rem .85rem; border:1.5px solid #E3DFD4;
           border-radius:12px; cursor:pointer; transition:border-color .15s, background .15s; }
.pay-opt:hover { border-color:#C9C2B2; }
.pay-opt.is-on { border-color:#E2231A; background:#FFF6F5; }
.pay-opt input { accent-color:#E2231A; }
.pay-opt-ico { display:inline-flex; color:#B0151B; }
.pay-opt-txt { display:flex; flex-direction:column; line-height:1.25; }
.pay-opt-txt small { color:#7A7264; font-size:11.5px; }

/* Banner esito pagamento nel dettaglio ordine */
.pay-banner { display:flex; align-items:center; gap:.7rem; }
.pay-banner-ico { display:inline-flex; }
.pay-banner--ok { border-color:#BCE3C9; background:#EFFaf2; color:#1E6B3A; }
.pay-banner--ok .pay-banner-ico { color:#2D8A4E; }
.pay-banner--warn { border-color:#F3C9A8; background:#FFF6EE; color:#9A5A1E; }
.pay-banner--warn .pay-banner-ico { color:#C9781E; }

/* Guida Satispay: accento rosso del brand */
.pay-guide--satispay { border-left-color:#F94B4B; background:#FFF5F5; }
.pay-guide--satispay .pay-guide-head { color:#D32020; }
.pay-guide--satispay .pay-guide-list a { color:#D32020; }
.pay-guide--satispay .pay-guide-list code { background:#FBE0E0; }

/* ── Anteprima risultato Google (Admin > SEO) ─────────────────────────────── */
.seo-serp { max-width:600px; font-family:Arial, sans-serif; }
.seo-serp-url { color:#202124; font-size:13px; line-height:1.3; }
.seo-serp-title { color:#1a0dab; font-size:20px; line-height:1.3; margin:.1rem 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.seo-serp-desc { color:#4d5156; font-size:14px; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ── Header storefront: restyling azioni (cart pill, Accedi in evidenza, gruppo) ── */
/* Stessa spaziatura tra (lingua → gruppo) e tra i bottoni del gruppo, così
   l'icona lingua è vicina a "Ordini" come "Ordini" lo è ad "Accedi". */
.md-topbar-actions { gap:.55rem; }
.md-topbar-group { display:inline-flex; align-items:center; gap:.55rem; }
.md-lang-wrap + .md-topbar-group { padding-left:0; }
/* Carrello come pill-button coerente con gli altri bottoni dell'header */
.md-cart-link { padding:7px 13px; border-radius:9px; border:1.5px solid rgba(255,255,255,.2);
    background:rgba(255,255,255,.05); font-weight:600; transition:background .15s, border-color .15s, color .15s; }
.md-cart-link:hover { background:#E2231A; border-color:#E2231A; color:#fff; }
/* Account/Dashboard/Consegne/Esci: già .md-topbar-btn. "Accedi" in evidenza (pieno rosso). */
.md-topbar-btn-accent { background:#E2231A; border-color:#E2231A; color:#fff; }
.md-topbar-btn-accent:hover { background:#c01d15; border-color:#c01d15; color:#fff; }
/* Bottone header solo-icona (Dashboard): quadrato, icona centrata. */
.md-topbar-btn--icon { padding:7px; width:38px; justify-content:center; }
@media (max-width:640px) {
    .md-topbar-group { gap:.4rem; }
    /* Spaziatura uniforme: nessun padding extra tra lingua e gruppo, così
       globe ↔ bell == bell ↔ dashboard. */
    .md-lang-wrap + .md-topbar-group { padding-left:0; }
    .md-cart-link { padding:7px 9px; }
}

/* ============================================================================
   Sunmi V2s / mobile stretto (~360px CSS): evita che le schermate admin
   sforino in larghezza. `overflow-x: clip` NON crea un contenitore di scroll,
   quindi non rompe gli header sticky (a differenza di overflow:hidden).
   ============================================================================ */
@media (max-width: 640px) {
    .md-container { overflow-x: clip; }
    /* Testi/codici lunghi non allargano il layout. */
    .md-card, .config-section, .settings-row, .product-card, .category-card { overflow-wrap: anywhere; }

    /* Tab bar editor (Menù/Prodotti/Ingredienti): scrollabile, tab compatti. */
    .main-tab-bar { padding: 0 .4rem; }
    .tab-buttons { overflow-x: auto; flex: 1 1 auto; scrollbar-width: none; }
    .tab-buttons::-webkit-scrollbar { display: none; }
    .tab-btn { padding: 0 .8rem; font-size: .82rem; }

    /* Categorie: i bottoni Modifica/Elimina vanno a capo se non ci stanno. */
    .category-header { flex-wrap: wrap; row-gap: .5rem; }
    .category-actions { flex-wrap: wrap; }
    .menu-act-btn { font-size: 12.5px; padding: 6px 10px; }

    /* Riga prodotto nel tab Menù: azioni a piena larghezza sotto, affiancate;
       "Rimuovi da categoria" può andare a capo invece di sforare. */
    .product-row--menu { flex-wrap: wrap; }
    .product-row--menu .product-actions { flex-direction: row; width: 100%; }
    .product-row--menu .product-actions .menu-act-btn { flex: 1 1 0; white-space: normal; }

    /* Tabelle admin: scroll orizzontale interno invece di sforare la pagina. */
    .md-card table, table.adm-table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Righe impostazioni / selettori colore: a capo invece di sforare. */
    .color-row, .config-row { flex-wrap: wrap; }

    /* Campi a piena larghezza: input/select/textarea non escono mai dal contenitore. */
    .md-card input:not([type=color]):not([type=checkbox]):not([type=radio]),
    .md-card select, .md-card textarea,
    .uf-input, .settings-text-input { max-width: 100%; box-sizing: border-box; }

    /* Editor a 2 colonne (Messaggi / Pop-up): l'anteprima non deborda. */
    .adm-msg-grid { gap: 1rem; }
    .pp-preview { padding: .9rem; }

    /* Presentazione (PDF): documento a piena larghezza, toolbar a capo,
       tabella costi scrollabile. La pagina ha layout proprio (no .md-container). */
    .pres-wrap { overflow-x: clip; }
    .pres-doc { max-width: 100%; margin: 1rem .55rem; }
    .pres-toolbar { flex-wrap: wrap; gap: .5rem; padding: .6rem .8rem; }
    .pres-cover h1 { font-size: 1.7rem; }
    .pres-cost-table { display: block; overflow-x: auto; white-space: nowrap; }

    /* Gestione email — corpo del messaggio mostrato: contenuto largo (email HTML)
       scrolla nel suo riquadro invece di sforare la pagina. */
    .em-body-wrap, .em-body { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .em-body img, .em-body table { max-width: 100%; height: auto; }
}

/* ── Autocompletamento indirizzo (carrello) ───────────────────────────────── */
/* Via (autocomplete) + Civico affiancati: il dropdown scende SOTTO la sola via. */
.addr-grid { display:flex; gap:.5rem; align-items:flex-start; }
.addr-street { flex:1 1 auto; position:relative; min-width:0; }
.addr-civico { flex:0 0 110px; width:110px; }
.addr-suggest { list-style:none; margin:0; padding:.25rem; position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:60;
    background:#fff; border:1.5px solid #E0D9C8; border-radius:10px; box-shadow:0 8px 22px rgba(0,0,0,.12); max-height:240px; overflow-y:auto; }
.addr-suggest-item { display:flex; align-items:center; gap:8px; padding:.5rem .6rem; border-radius:7px; cursor:pointer; font-size:13.5px; color:#3a342b; }
.addr-suggest-item:hover { background:#FFF5F5; color:#B0151B; }
.addr-suggest-item .md-icon { flex:0 0 auto; color:#B0151B; }

/* ── Allergeni nel dettaglio prodotto (storefront) ────────────────────────── */
.sf-allergens { margin:.1rem 0 1rem; }
.sf-allergens-title { display:flex; align-items:center; gap:6px; font-weight:800; font-size:13.5px; color:#9A5A1E; margin-bottom:.45rem; }
.sf-allergens-title .md-icon { color:#C9781E; }
.sf-allergen-chips { display:flex; flex-wrap:wrap; gap:.4rem; }
.sf-allergen-chip { display:inline-flex; align-items:center; gap:5px; padding:.32rem .6rem; border-radius:999px;
    background:#FFF6EE; border:1px solid #F3D9BE; color:#7a5a35; font-size:12.5px; font-weight:600; }
.sf-allergen-emoji { font-size:14px; line-height:1; }
.sf-allergens-note { margin:.55rem 0 0; font-size:11.5px; color:#8a8175; line-height:1.4; }
.sf-allergens-note a { color:#B0151B; font-weight:600; }

/* ── Header che si nasconde su scroll giù (resta la barra categorie) ───────── */
/* Niente più collasso dell'altezza (causava reflow = rimbalzo). L'INTERO wrapper
   sticky scorre verso l'alto via transform di esattamente l'altezza dell'header
   (--sf-hdr-h, misurata da JS): la barra categorie sale in cima e l'header esce
   dallo schermo. transform è composito (GPU, zero reflow) → slide fluido e diretto,
   nessun rimbalzo. L'opacità dell'header sfuma in parallelo. */
.sf-sticky-top { transition: transform .22s cubic-bezier(.4, 0, .2, 1); will-change: transform; }
.sf-sticky-top.sf-header-hidden { transform: translateY(calc(-1 * var(--sf-hdr-h, 60px))); }
.sf-sticky-top .md-topbar { transition: opacity .18s ease; }
.sf-sticky-top.sf-header-hidden .md-topbar { opacity: 0; pointer-events: none; }

/* ── Allergeni compatti sulla card prodotto (storefront) ──────────────────── */
.sf-allerg-mini { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px; margin-top:.3rem; font-size:12px; color:#8a8175; line-height:1.25; }
.sf-allerg-mini-lbl { font-weight:700; color:#9A5A1E; }
.sf-allerg-mini-em { font-size:14px; line-height:1; }
/* Allergeni in chiaro (testo, senza emoji) nelle card/righe del menù. */
.sf-allerg-mini-txt { color:#8a8175; }

/* ── Spinner di caricamento riutilizzabile (schermate admin) ──────────────── */
.md-loading { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.8rem; padding:3.5rem 1rem; min-height:40vh; }
.md-loading-spinner { width:42px; height:42px; border:4px solid #f0d2d2; border-top-color:#E2231A; border-radius:50%; animation: md-spin .8s linear infinite; }
/* Caricamento: il logo che ruota su sé stesso. */
.md-loading-logo { width:84px; height:84px; object-fit:contain; animation: md-spin 1.2s linear infinite; will-change:transform; }
@keyframes md-spin { to { transform: rotate(360deg); } }
.md-loading-text { color:#9a9082; font-size:13.5px; font-weight:600; letter-spacing:.01em; }
/* Overlay: copre l'area contenuto mentre i dati caricano (es. editor menù). */
.md-loading--overlay { position:fixed; inset:0; z-index:900; background:rgba(250,248,243,.96); min-height:0; }

/* Header editor menù: tabs centrate ora che l'area utente a destra è stata rimossa. */
.main-tab-bar .tab-buttons { margin-left:auto; margin-right:auto; }

/* Titoli di sezione nei Metodi di pagamento (Contanti / Carta / Satispay) */
.pay-section-title { display:flex; align-items:center; gap:8px; margin:1.75rem 0 .7rem; padding-bottom:.5rem; border-bottom:2px solid #EFE7D6; }
.pay-section-title .md-icon { color:#B0151B; }
/* Logo del provider (Stripe/Satispay) accanto al titolo della sezione. */
.pay-brand-img { height:24px; width:auto; display:inline-block; vertical-align:middle; border-radius:6px; }

/* Sottotitolo nel backup per categoria (gruppo "Impostazioni negozio") */
.bk-subhead { font-size:12px; font-weight:700; color:#9a9082; text-transform:uppercase; letter-spacing:.04em; margin:.9rem 0 .4rem; }

/* Upload immagine/logo social in Admin > SEO */
.seo-og-upload { display:flex; align-items:center; flex-wrap:wrap; gap:.6rem; margin-top:.55rem; }
.seo-og-preview { width:48px; height:48px; object-fit:contain; border:1px solid #E0D9C8; border-radius:8px; background:#fff; padding:3px; }

/* ── Admin > Coupon ───────────────────────────────────────────────── */
.cpn-card { border:1.5px solid #E0D9C8; }
.cpn-card.cpn-off { opacity:.6; }
.cpn-code { font-weight:800; letter-spacing:.04em; background:#141414; color:#fff; padding:3px 10px; border-radius:6px; font-family:'Segoe UI',monospace; }
.cpn-disc { font-weight:800; color:#B0151B; }
.cpn-uses { font-size:12.5px; color:#6B6B6B; }
.cpn-toggle { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:#3a342b; cursor:pointer; }

/* ── Carrello: coupon ─────────────────────────────────────────────── */
.cart-coupon-row { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.cart-coupon-row .uf-input { flex:1; min-width:160px; }
.cart-coupon-applied { display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap;
    background:#E8F5EC; border:1px solid #B2DFC4; color:#1E7C42; padding:.6rem .85rem; border-radius:8px; font-size:13.5px; font-weight:600; }
.cart-coupon-applied .cart-edit-link { color:#1E7C42; }

/* ── Ordine al tavolo: banner storefront ──────────────────────────── */
.table-mode-banner { display:flex; align-items:center; gap:.6rem; background:#141414; color:#fff; border-radius:10px;
    padding:.7rem 1rem; margin-bottom:1rem; font-size:14px; }
.table-mode-banner svg { flex:0 0 auto; color:#E2231A; }

/* ── Selettore dispositivo per l'allineamento (stile Elementor) ──────── */
.align-device-tabs { display:inline-flex; gap:4px; margin-bottom:.5rem; }
.align-device-tab { display:inline-flex; align-items:center; justify-content:center; width:32px; height:28px;
    border:1.5px solid #E0D9C8; border-radius:6px; background:#fff; color:#8a8175; cursor:pointer; transition:all .13s; }
.align-device-tab:hover { border-color:#C81E1E; color:#C81E1E; }
.align-device-tab--on { background:#1A1A1A; border-color:#1A1A1A; color:#fff; }
.align-device-hint { font-size:12px; color:#8a8175; margin-top:.4rem; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.align-device-reset { background:none; border:1px solid #E0D9C8; border-radius:6px; padding:2px 8px; font-size:11.5px;
    font-weight:700; color:#B0151B; cursor:pointer; }
.align-device-reset:hover { border-color:#C81E1E; background:#FFF5F5; }

/* ── Righe articolo negli ordini (admin + utente): con immagine ──────── */
.ord-item-row { display:flex; align-items:center; gap:.6rem; padding:.4rem 0; border-bottom:1px solid #F0EDE4; }
.ord-item-row:last-child { border-bottom:none; }
.ord-item-img { width:40px; height:40px; border-radius:6px; object-fit:contain; background:#141414; flex-shrink:0; }
.ord-item-main { flex:1; min-width:0; }
.ord-item-price { font-weight:700; white-space:nowrap; color:#1A1A1A; }

/* ── Filtro ordini per tipo (Admin > Ordini, Statistiche) ───────────── */
.ord-typefilter { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.25rem; }
.ord-typebtn { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:999px; border:1.5px solid #E0D9C8; background:#fff; color:#6B6B6B; font-size:13px; font-weight:600; font-family:var(--th-body-font); cursor:pointer; transition:all .15s; }
.ord-typebtn:hover { border-color:#B0151B; color:#B0151B; }
.ord-typebtn--on { background:#E2231A; border-color:#E2231A; color:#fff; }
.ord-typecount { background:rgba(0,0,0,.12); border-radius:10px; padding:0 7px; font-size:12px; font-weight:800; }
.ord-typebtn--on .ord-typecount { background:rgba(255,255,255,.25); }

/* ── Admin > Ingredienti ──────────────────────────────────────────── */
.ing-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:.85rem; }
.ing-card { background:#fff; border:1.5px solid #E0D9C8; border-radius:12px; padding:.85rem; text-align:center; }
.ing-img { width:72px; height:72px; border-radius:10px; object-fit:contain; background:#141414; display:block; margin:0 auto .5rem; }
.ing-name { font-weight:700; color:#1A1A1A; margin-bottom:.5rem; word-break:break-word; }
.ing-actions { display:flex; gap:.4rem; justify-content:center; flex-wrap:wrap; }

/* ── Pop-up iniziale (builder + storefront) ───────────────────────── */
.popup-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:3000; display:flex; padding:1.5rem; }
.popup-overlay--top { align-items:flex-start; justify-content:center; }
.popup-overlay--center { align-items:center; justify-content:center; }
.popup-overlay--bottom { align-items:flex-end; justify-content:center; }
.popup-card { position:relative; width:100%; border-radius:16px; padding:1.6rem; box-shadow:0 20px 60px rgba(0,0,0,.35); text-align: var(--pa-d, center); }
/* Allineamento responsive del pop-up (come Elementor): tablet <1024px, mobile <640px. */
@media (max-width: 1024px) { .popup-card { text-align: var(--pa-t, var(--pa-d, center)); } }
@media (max-width: 640px)  { .popup-card { text-align: var(--pa-m, var(--pa-t, var(--pa-d, center))); } }
.popup-close { position:absolute; top:8px; right:12px; background:transparent; border:none; font-size:26px; line-height:1; color:#999; cursor:pointer; }
.popup-close:hover { color:#444; }
.popup-img { width:100%; max-height:220px; object-fit:cover; border-radius:12px; margin-bottom:1rem; display:block; }
.popup-title { font-family:var(--th-heading-font); font-weight:800; line-height:1.2; margin-bottom:.5rem; }
.popup-body { line-height:1.5; white-space:pre-line; }
.popup-btn { margin-top:1.1rem; border:none; border-radius:10px; padding:11px 22px; font-weight:800; font-size:15px; cursor:pointer; font-family:var(--th-body-font); }
/* Anteprima admin */
.pp-preview { background:#EDEAE3; border:1.5px solid #E0D9C8; border-radius:12px; padding:1.2rem; display:flex; min-height:300px; }
.pp-preview--top { align-items:flex-start; justify-content:center; }
.pp-preview--center { align-items:center; justify-content:center; }
.pp-preview--bottom { align-items:flex-end; justify-content:center; }
.pp-preview .popup-card { box-shadow:0 8px 24px rgba(0,0,0,.15); }
/* Controllo segmentato (allineamento/posizione) */
.pp-seg { display:inline-flex; border:1.5px solid #E0D9C8; border-radius:8px; overflow:hidden; }
.pp-seg-btn { border:none; background:#fff; color:#6B6B6B; padding:7px 16px; font-size:13px; font-weight:700; cursor:pointer; font-family:var(--th-body-font); }
.pp-seg-btn + .pp-seg-btn { border-left:1px solid #E0D9C8; }
.pp-seg-btn--on { background:#E2231A; color:#fff; }

/* ── Scelta ingredienti (prodotti complessi) ──────────────────────── */
.ing-picker { background:#fff; border-radius:16px; max-width:560px; width:100%; padding:1.5rem; position:relative; max-height:88vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.ing-picker-title { font-family:var(--th-heading-font); font-size:1.3rem; margin:0 1.5rem 0 0; color:#1A1A1A; }
.ing-picker-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:.6rem; margin-bottom:1.2rem; }
.ing-opt { position:relative; display:flex; flex-direction:column; align-items:center; gap:.4rem; padding:.7rem .5rem; border:2px solid #E0D9C8; border-radius:12px; background:#fff; cursor:pointer; transition:all .12s; font-family:inherit; }
.ing-opt:hover { border-color:#E2231A; }
.ing-opt--on { border-color:#E2231A; background:#FFF5F5; }
.ing-opt-img { width:54px; height:54px; border-radius:8px; object-fit:contain; background:#141414; }
.ing-opt-name { font-size:13px; font-weight:600; color:#1A1A1A; text-align:center; line-height:1.2; }
.ing-opt-check { position:absolute; top:6px; right:8px; width:20px; height:20px; border-radius:50%; background:#E2231A; color:#fff; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.ing-picker-cta { width:100%; }
/* Riga prodotto con ingredienti nel carrello */
.cart-row-ing { font-size:12px; color:#6B6B6B; margin-top:2px; }
.cart-row-ing-edit { color:#B0151B; font-weight:700; background:none; border:none; padding:0; cursor:pointer; font-size:12px; }
.cart-row-comp { font-size:12px; color:#4A4A4A; line-height:1.35; }

/* ── Configurazione prodotto multiplo/composto (CompositePickerModal) ── */
.comp-picker { max-width:600px; }
.comp-block { border:1px solid #ECE6D8; border-radius:12px; padding:.85rem 1rem; margin-bottom:.85rem; background:#FCFBF8; }
.comp-block-head { display:flex; align-items:center; gap:.6rem; margin-bottom:.4rem; }
.comp-block-img { width:40px; height:40px; border-radius:8px; object-fit:contain; background:#141414; flex:0 0 auto; }
.comp-block-name { font-weight:700; font-size:15px; color:#1A1A1A; }
.comp-block-hint { font-size:12px; color:#8a8175; margin:.1rem 0 .55rem; }

/* Bottone "Auto" (traduzione automatica) per lingua nell'editor ingredienti */
.ing-tr-auto { display:inline-flex; align-items:center; gap:4px; background:none; border:1px solid #E0D9C8; border-radius:7px; padding:2px 7px; color:#B0151B; font-weight:700; font-size:11px; cursor:pointer; }
.ing-tr-auto:hover:not(:disabled) { border-color:#E2231A; background:#FFF5F5; }
.ing-tr-auto:disabled { opacity:.5; cursor:default; }

/* Card ingrediente: badge stato traduzione + bottoni con testo */
.ing-card { display:flex; flex-direction:column; align-items:center; text-align:center; }
.ing-tr-badge { display:inline-block; margin-top:.35rem; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:700; }
.ing-tr-badge--ok { background:#E7F6EC; color:#1E7C42; }
.ing-tr-badge--no { background:#FBEAEA; color:#B0151B; }
/* Due bottoni etichettati impilati: stanno sempre interi nella card stretta. */
.ing-actions { display:grid; grid-template-columns:1fr; gap:.4rem; margin-top:.55rem; }
.ing-actions .menu-act-btn { width:100%; min-width:0; justify-content:center; padding:7px 8px; white-space:nowrap; }
.ing-act-btn { display:inline-flex; align-items:center; gap:5px; }

/* Modale CREA / MODIFICA ingrediente (overlay globale, centrato) */
.ing-modal-overlay { position:fixed; inset:0; z-index:1200; background:rgba(0,0,0,.5); backdrop-filter:blur(3px);
    display:flex; align-items:center; justify-content:center; padding:1rem; animation:sf-fade .15s ease; }
.ing-modal { position:relative; background:#fff; border-radius:14px; padding:1.5rem 1.6rem; max-width:480px; width:100%;
    max-height:90vh; overflow-y:auto; box-shadow:0 24px 60px rgba(0,0,0,.3); }
.ing-modal-title { font-family:var(--th-heading-font); font-size:1.2rem; margin:0 0 1rem; color:#1A1A1A; display:flex; align-items:center; gap:8px; }
.ing-modal-close { position:absolute; top:.7rem; right:.9rem; background:none; border:none; font-size:1.6rem; line-height:1; color:#9a9388; cursor:pointer; }
.ing-modal-close:hover { color:#1A1A1A; }
.ing-modal-sep { border:none; border-top:1px solid #ECE6D8; margin:1rem 0; }
.ing-modal-actions { display:flex; justify-content:flex-end; gap:.6rem; margin-top:.5rem; }

/* ════════════════════════════════════════════════════════════════════════════
   TEMA / BRANDING CONFIGURABILE (Admin > Impostazioni > Tema)
   Le variabili --th-* hanno qui i default del brand Miyako; gricoTheme.apply le
   sovrascrive su :root con i valori scelti dall'admin. Bloccо in fondo al file
   così queste regole vincono sulle precedenti (stessa specificità, ultima vince).
   ════════════════════════════════════════════════════════════════════════════ */
:root {
    --th-header-bg: #000000;
    --th-header-text: #FAF8F3;
    --th-catbar-bg: #141414;
    --th-catbar-text: #FFFFFF;
    --th-accent: #E2231A;
    --th-text: #1A1A1A;
    --th-menu-bg: #FAF8F3;
    --th-card-bg: #FFFFFF;
    --th-price: #E2231A;
    --th-logo-h: 36px;
    --th-heading-font: 'Georgia', serif;
    --th-body-font: 'Segoe UI', sans-serif;
}

/* Sfondo pagine/menù + colore testo predefinito */
.md-page { background: var(--th-menu-bg); color: var(--th-text); font-family: var(--th-body-font); }

/* Font configurabili: TITOLI (es. "Il nostro menù", titoli categoria, header) usano
   il font dei titoli; i TESTI dei prodotti (nome, descrizione, prezzo) usano il font
   del testo (di norma sans-serif). */
.md-h1, .md-h2, .md-brand, .sf-detail-title, .ing-picker-title, .pres-h2, .sf-cat-title { font-family: var(--th-heading-font); }
.sf-prod-name, .sf-row-name, .sf-prod-desc, .sf-row-desc, .sf-price, .md-muted, .sf-catbar-btn { font-family: var(--th-body-font); }

/* Dimensioni font configurabili per le sezioni del menù (default = valori attuali) */
/* Titoli categoria nello scorrimento verticale: grandi come "Il nostro menù" (.md-h1 = 1.6rem). */
.sf-cat-title { font-size: var(--th-fs-cattitle, 1.6rem); }
.sf-prod-name, .sf-row-name { font-size: var(--th-fs-prodname, 15px); }
.sf-prod-desc, .sf-row-desc { font-size: var(--th-fs-proddesc, 12px); }
.sf-price { font-size: var(--th-fs-price, 15px); }
/* Bottoni di selezione categoria (barra in alto): piccoli, come prima. */
.sf-catbar-btn { font-size: var(--th-fs-catbar, 13px); }

/* Header in alto */
.md-topbar { background: var(--th-header-bg); }
.md-user-email, .md-topbar-link, .md-cart-link, .md-cart-txt { color: var(--th-header-text); }
.md-brand-logo { height: var(--th-logo-h); }

/* Barra categorie (secondo header / barra a scorrimento orizzontale) */
.sf-catbar { background: var(--th-catbar-bg); border-bottom-color: var(--th-accent); }
.sf-catbar-btn { color: var(--th-catbar-text); }
.sf-catbar-btn--active { background: var(--th-accent); border-color: var(--th-accent); color: #fff; }
.sf-catbar-trigger { color: var(--th-catbar-text); }

/* Accento: prezzi, bottoni d'aggiunta e bottoni principali */
.sf-price { color: var(--th-price); }
.sf-add { background: var(--th-accent); }
.sf-add:hover { background: var(--th-accent); filter: brightness(.92); }
.btn-gold-fill, .md-btn-gold, .md-topbar-btn-accent, .md-cart-badge {
    background: var(--th-accent); border-color: var(--th-accent);
}

/* Sfondo card prodotto / contenitori */
.sf-prod-card, .md-card { background: var(--th-card-bg); }

/* Modalità Sunmi: scelta larghezza di stampa (58/80 mm) */
.sunmi-w-opt { flex:1; min-width:180px; display:flex; align-items:center; gap:.6rem; padding:.8rem 1rem; border:1.5px solid #E0D9C8; border-radius:12px; background:#fff; cursor:pointer; transition:border-color .12s, background .12s; }
.sunmi-w-opt:hover { border-color:#E2231A; }
.sunmi-w-opt--on { border-color:#E2231A; background:#FFF5F5; }
.sunmi-w-opt input { accent-color:#E2231A; width:18px; height:18px; flex:0 0 auto; }

/* Configuratore dashboard (drag & drop delle card in categorie) */
.dashcfg-cat { border:1.5px solid #E0D9C8; border-radius:12px; padding:.9rem 1rem 1.1rem; margin-bottom:1rem; background:#FCFBF8; transition:border-color .12s, background .12s; }
.dashcfg-cat--over { border-color:#E2231A; background:#FFF7F6; }
.dashcfg-cat-head { display:flex; align-items:center; gap:.6rem; margin-bottom:.7rem; }
.dashcfg-cat-title { flex:1; min-width:0; font-family:var(--th-heading-font); font-weight:700; font-size:1rem; color:#1A1A1A; border:1px solid transparent; border-radius:8px; padding:5px 8px; background:transparent; }
.dashcfg-cat-title:hover, .dashcfg-cat-title:focus { border-color:#E0D9C8; background:#fff; outline:none; }
.dashcfg-cards { display:flex; flex-wrap:wrap; gap:.5rem; min-height:42px; }
.dashcfg-chip { display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border:1.5px solid #E0D9C8; border-radius:10px; background:#fff; cursor:grab; font-size:13.5px; font-weight:600; color:#1A1A1A; user-select:none; box-shadow:0 1px 3px rgba(0,0,0,.05); }
.dashcfg-chip:hover { border-color:#E2231A; }
.dashcfg-chip--dragging { opacity:.45; }
.dashcfg-grip { color:#B8B0A2; font-size:15px; line-height:1; cursor:grab; }
.dashcfg-empty { width:100%; text-align:center; color:#9a9388; font-size:13px; font-style:italic; padding:.6rem; border:1.5px dashed #E0D9C8; border-radius:10px; }

/* Editor tema: griglia dei selettori colore */
.theme-color-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:.85rem 1.2rem; }
.theme-color-row { display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.theme-color-input { width:42px; height:34px; padding:0; border:1px solid #E0D9C8; border-radius:8px; background:none; cursor:pointer; }