/*
 * Mariblue — aree riservate: Il mio account, Area B2B, area di gestione.
 * Regole dal mockup approvato, annidate in .mb-pg (contenitore "site"):
 * battono gli stili del tema senza !important.
 */


.mb-pg {
    /* =========================================================
       AREE RISERVATE: account, Area B2B, area amministrativa
       ========================================================= */
    .db-head { background: var(--mb-notte); color: #fff; }
    .db-head .wrap { padding-block: 34px 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; }
    .db-head .mbh-av { width: 56px; height: 56px; font-size: 19px; box-shadow: none; }
    .db-head h1 { font: 900 clamp(26px, 3cqw, 34px)/1.1 var(--mb-font-titoli); }
    .db-head p { color: #B9CBE2; font-size: 15px; margin-top: 2px; }
    .db-head .tag { margin-left: auto; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.12); font: 800 13px var(--mb-font-titoli); }
    .db-head .tag.oro { background: var(--mb-oro); }
    .db { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 34px; padding-block: 30px 80px; align-items: start; }
    .db-nav { position: sticky; top: calc(var(--mb-hdr-h, 80px) + 20px); display: grid; gap: 4px; }
    .db-nav :is(a, button) { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 14px; border: 0; border-radius: 12px; background: transparent; color: var(--mb-testo); font: 700 15px var(--mb-font-titoli); cursor: pointer; text-align: left; }
    .db-nav :is(a, button) svg { width: 19px; height: 19px; color: var(--mb-tenue); flex: 0 0 auto; }
    .db-nav :is(a, button):hover { background: var(--mb-mare); }
    .db-nav :is(a, button)[aria-current="page"] { background: var(--mb-blu); color: #fff; }
    .db-nav :is(a, button)[aria-current="page"] svg { color: #fff; }
    .db-nav :is(a, button) .n { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--mb-oro); color: #fff; font: 800 12px var(--mb-font-testo); text-align: center; }
    .db-nav :is(a, button)[disabled] { opacity: .45; cursor: default; }
    .db-nav hr { border: 0; border-top: 1px solid var(--mb-linea); margin: 8px 0; }
    .db-main { min-width: 0; display: grid; gap: 20px; }
    .db-main h2 { font: 900 26px var(--mb-font-titoli); color: var(--mb-blu); }
    .db-main > p.lead2 { color: var(--mb-tenue); margin-top: -10px; }
    @container site (max-width: 980px) {
        .db { grid-template-columns: 1fr; gap: 18px; padding-top: 0; }
        .db-nav { position: sticky; top: var(--mb-hdr-h, 80px); z-index: 6; display: flex; overflow-x: auto; gap: 6px; padding: 10px 0; margin-inline: -40px; padding-inline: 40px; background: rgba(255,255,255,.95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--mb-linea); scrollbar-width: none; }
        .db-nav :is(a, button) { flex: 0 0 auto; width: auto; padding: 9px 14px; border-radius: 999px; border: 1.5px solid var(--mb-linea); font-size: 14px; }
        .db-nav :is(a, button) svg { display: none; }
        .db-nav hr { display: none; }
    }
    @container site (max-width: 699px) { .db-nav { top: var(--mb-hdr-h, 80px); margin-inline: -18px; padding-inline: 18px; } .db-head .tag { margin-left: 0; } }

    .db-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
    .db-card { padding: 18px; border-radius: 18px; background: #fff; border: 1px solid var(--mb-linea); display: grid; gap: 4px; text-align: left; font: inherit; cursor: pointer; }
    .db-card b { font: 900 30px/1 var(--mb-font-titoli); color: var(--mb-blu); font-variant-numeric: tabular-nums; }
    .db-card span { font-size: 14px; color: var(--mb-tenue); }
    .db-card.warn b { color: var(--mb-oro); }
    @container site (max-width: 980px) { .db-cards { grid-template-columns: repeat(2, 1fr); } }
    .db-box { padding: 22px; border-radius: 20px; background: #fff; border: 1px solid var(--mb-linea); display: grid; gap: 14px; }
    .db-box h3 { font: 800 18px var(--mb-font-titoli); color: var(--mb-testo); display: flex; align-items: center; gap: 10px; justify-content: space-between; }
    .db-box.mare { background: var(--mb-mare); border-color: transparent; }
    .db-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
    .db-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    @container site (max-width: 699px) { .db-grid2 { grid-template-columns: 1fr; } }
    .db-form { display: grid; gap: 12px; }
    .db-form .ct-f input, .db-form .ct-f select, .db-form .ct-f textarea { width: 100%; border: 1px solid #C9D6E6; border-radius: 12px; padding: 11px 13px; font: 600 15.5px var(--mb-font-testo); background: #fff; color: var(--mb-testo); }
    .db-form .ct-f textarea { min-height: 120px; }
    .db-ok { padding: 12px 14px; border-radius: 12px; background: #E8F6EE; color: #146C3C; font-weight: 700; font-size: 14px; }
    .db-ex { padding: 8px 12px; border-radius: 10px; border: 1.5px dashed #A9BAD0; color: var(--mb-tenue); font-size: 13px; }
    .db-chips { display: flex; flex-wrap: wrap; gap: 6px; }
    .db-chips :is(a, button) { border: 1.5px solid var(--mb-linea); background: #fff; color: var(--mb-testo); padding: 7px 13px; border-radius: 999px; font: 800 13.5px var(--mb-font-titoli); cursor: pointer; }
    .db-chips :is(a, button)[aria-pressed="true"] { background: var(--mb-blu); border-color: var(--mb-blu); color: #fff; }
    .db-search { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border-radius: 12px; border: 1px solid #C9D6E6; background: #fff; flex: 1; min-width: 200px; max-width: 360px; }
    .db-search input { border: 0; outline: none; flex: 1; min-width: 0; font: 600 15px var(--mb-font-testo); }
    .db-tablewrap { overflow-x: auto; border-radius: 16px; border: 1px solid var(--mb-linea); background: #fff; }
    .db-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
    .db-table th { text-align: left; padding: 11px 12px; background: var(--mb-mare); font: 800 12px var(--mb-font-testo); letter-spacing: .06em; text-transform: uppercase; color: var(--mb-tenue); white-space: nowrap; }
    .db-table td { padding: 11px 12px; border-top: 1px solid var(--mb-linea); vertical-align: middle; }
    .db-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .db-table tr:hover td { background: #FAFCFF; }
    .db-table img { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; background: #F5F8FC; }
    .db-table input[type=number] { width: 72px; height: 36px; border: 1px solid #C9D6E6; border-radius: 9px; padding: 0 8px; font: 700 14px var(--mb-font-testo); text-align: right; }
    .db-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font: 800 12px var(--mb-font-testo); white-space: nowrap; }
    .db-pill.blu { background: var(--mb-mare); color: var(--mb-blu); }
    .db-pill.oro { background: #FFF3CF; color: #8A6500; }
    .db-pill.verde { background: #E8F6EE; color: #146C3C; }
    .db-pill.rosso { background: #FDECEE; color: var(--mb-rosso); }
    .db-pill.grigio { background: #EEF1F5; color: var(--mb-tenue); }
    .db-act { border: 0; background: none; color: var(--mb-blu); font: 800 13.5px var(--mb-font-titoli); cursor: pointer; padding: 4px 6px; border-radius: 8px; }
    .db-act:hover { background: var(--mb-mare); }
    .db-act.ok { color: #146C3C; } .db-act.no { color: var(--mb-rosso); }
    .db-meter { display: inline-flex; gap: 3px; }
    .db-meter i { width: 9px; height: 9px; border-radius: 3px; background: #E3EBF5; }
    .db-meter i.on { background: #2E9B4F; }
    .db-total { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 14px 18px; border-radius: 16px; background: var(--mb-notte); color: #fff; }
    .db-total b { font: 900 22px var(--mb-font-titoli); font-variant-numeric: tabular-nums; }
    .db-total span { color: #B9CBE2; font-size: 14px; }
    .db-total .btn { margin-left: auto; }
    /* pulsanti leggeri su fondo scuro: bordo e testo bianchi (il reset del tema li farebbe neri) */
    .db-total .btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
    .db-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
    .db-steps div { position: relative; padding: 16px 16px 16px 0; display: grid; gap: 4px; }
    .db-steps div::before { content: ""; display: block; width: 26px; height: 26px; border-radius: 50%; background: #E3EBF5; border: 3px solid #fff; box-shadow: 0 0 0 2px #E3EBF5; margin-bottom: 6px; }
    .db-steps div.done::before { background: #2E9B4F; box-shadow: 0 0 0 2px #2E9B4F; }
    .db-steps div.now::before { background: var(--mb-oro); box-shadow: 0 0 0 2px var(--mb-oro); }
    .db-steps b { font: 800 16px var(--mb-font-titoli); }
    .db-steps span { font-size: 14px; color: var(--mb-tenue); }
    @container site (max-width: 699px) { .db-steps { grid-template-columns: 1fr; } }
    .db-docs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .db-doc { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; border: 1px solid var(--mb-linea); background: #fff; text-decoration: none; color: var(--mb-testo); }
    .db-doc i { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; background: #FDECEE; color: var(--mb-rosso); font: 900 11px var(--mb-font-testo); font-style: normal; flex: 0 0 auto; }
    .db-doc i.xls { background: #E8F6EE; color: #146C3C; }
    .db-doc b { display: block; font: 800 15px var(--mb-font-titoli); }
    .db-doc small { color: var(--mb-tenue); }
    @container site (max-width: 699px) { .db-docs { grid-template-columns: 1fr; } }
    .db-drop { display: grid; place-items: center; gap: 8px; padding: 30px; border: 2px dashed #A9BAD0; border-radius: 18px; background: var(--mb-mare); text-align: center; cursor: pointer; }
    .db-drop b { font: 800 17px var(--mb-font-titoli); color: var(--mb-blu); }
    .db-drop.is-over { border-color: var(--mb-blu); background: #E1ECF9; }
    .db-diff td.up { color: var(--mb-rosso); font-weight: 800; } .db-diff td.down { color: #146C3C; font-weight: 800; }
    .db-editor { display: grid; gap: 12px; }
    .db-tb { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border: 1px solid #C9D6E6; border-bottom: 0; border-radius: 12px 12px 0 0; background: var(--mb-mare); }
    .db-tb button { border: 0; background: #fff; border-radius: 8px; padding: 6px 10px; font: 800 13px var(--mb-font-titoli); cursor: pointer; color: var(--mb-testo); }
    .db-rte { min-height: 220px; padding: 16px; border: 1px solid #C9D6E6; border-radius: 0 0 12px 12px; background: #fff; font-size: 16px; line-height: 1.65; outline: none; }
    .db-rte:focus { border-color: var(--mb-blu); }
    .db-rte h2 { font: 800 21px var(--mb-font-titoli); color: var(--mb-blu); margin: 10px 0 6px; }
    .db-rte blockquote { margin: 10px 0; padding-left: 14px; border-left: 4px solid var(--mb-oro); font-weight: 700; }
    .db-tb button:hover { background: var(--mb-blu); color: #fff; }
    .db-sugg { display: grid; gap: 4px; }
    .db-sugg button { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border: 1px solid var(--mb-linea); border-radius: 10px; background: #fff; font: 700 14px var(--mb-font-titoli); text-align: left; cursor: pointer; }
    .db-sugg button:hover { background: var(--mb-mare); }
    .db-sugg img, .db-pc img { width: 34px; height: 34px; object-fit: contain; border-radius: 6px; background: #F5F8FC; }
    .db-chosen { display: flex; flex-wrap: wrap; gap: 8px; }
    .db-pc { display: inline-flex; align-items: center; gap: 8px; padding: 6px 6px 6px 8px; border-radius: 12px; background: #fff; border: 1px solid var(--mb-linea); font: 700 13.5px var(--mb-font-titoli); }
    .db-pc button { border: 0; background: var(--mb-mare); width: 26px; height: 26px; border-radius: 50%; cursor: pointer; color: var(--mb-blu); }
    .db-form select { width: 100%; border: 1px solid #C9D6E6; border-radius: 12px; padding: 11px 13px; font: 600 15.5px var(--mb-font-testo); background: #fff; color: var(--mb-testo); }
    .db-lock { padding: 40px; border-radius: 24px; background: var(--mb-mare); display: grid; gap: 12px; justify-items: center; text-align: center; }
    .db-lock h2 { font: 900 26px var(--mb-font-titoli); color: var(--mb-blu); }
    /* tabelle da telefono: solo le colonne essenziali */
    @container site (max-width: 699px) { .db-table { min-width: 0; } .db-table .hs { display: none; } .db-table td, .db-table th { padding: 9px 8px; } }
    /* landing pubblica Area B2B */
    .b2l-how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .b2l-how div { padding: 22px; border-radius: 20px; background: var(--mb-mare); display: grid; gap: 8px; }
    .b2l-how b { font: 900 34px var(--mb-font-titoli); color: var(--mb-oro); }
    .b2l-how h3 { font: 800 19px var(--mb-font-titoli); color: var(--mb-blu); }
    @container site (max-width: 800px) { .b2l-how { grid-template-columns: 1fr; } }
    .db-nav a { text-decoration: none; color: inherit; }
    .db-nav button[disabled] { opacity: .45; cursor: not-allowed; }
    .db-notice { margin-bottom: 18px; padding: 12px 16px; border-radius: 14px; font-weight: 700; font-size: 15px; }
    .db-notice.ok { background: #E8F6EE; color: #146C3C; }
    .db-notice.err { background: #FDECEE; color: var(--mb-rosso); }
    .db-danger { color: var(--mb-rosso) !important; box-shadow: inset 0 0 0 2px var(--mb-rosso) !important; }
    .db-form .ct-f + .ct-f, .db-form .db-grid2 + .ct-f, .db-form .ct-f + .db-grid2 { margin-top: 12px; }
    .db-box form { display: grid; gap: 12px; }
    .mb-wc :is(input[type=text], input[type=password], input[type=email]) { width: 100%; height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid #C9D6E6; font: 600 16px var(--mb-font-testo); }
    .mb-wc button[type=submit] { display: inline-flex; padding: 12px 26px; border-radius: var(--mb-raggio); background: var(--mb-oro); color: #fff; font: 800 16px var(--mb-font-titoli); margin-top: 10px; }
    .mbh-av { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--mb-blu); color: #fff; font: 800 16px/1 var(--mb-font-titoli); letter-spacing: .02em; box-shadow: 0 0 0 2px #fff; flex: 0 0 auto; }
    .mbh-av.is-pending { background: var(--mb-oro); }
    .mbh-link { color: var(--mb-blu); font: 700 14px var(--mb-font-testo); text-decoration: underline; text-underline-offset: 3px; }
    .db-inline { display: inline; margin: 0; }
    .db-chips a { text-decoration: none; }
    .db-search { display: inline-flex; align-items: center; gap: 8px; }
    .db-search svg { width: 18px; height: 18px; color: var(--mb-tenue); }
    button.db-doc { width: 100%; text-align: left; font: inherit; cursor: pointer; }
    .db-table details summary { cursor: pointer; display: inline-block; margin-top: 4px; }
    .db-table details ul { margin: 6px 0 0; padding-left: 18px; font-size: 13.5px; color: var(--mb-tenue); }
    .db-drop input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
    .db-drop { position: relative; }
    .db-drop:focus-within { outline: 3px solid var(--mb-oro); outline-offset: 2px; }
    .db-drop [data-file] { font: 800 14px var(--mb-font-testo); color: var(--mb-testo); }
    @media print { .db-nav, .db-head, .db-total, .mb-hdr, .mb-ftr, .db-row { display: none !important; } .db { display: block !important; } }
    /* campi affiancati allineati: niente margine in alto dentro la stessa riga */
    .db-grid2 > .ct-f + .ct-f { margin-top: 0; }
    .db-grid2 { align-items: start; }
}

/* =========================================================
   PANNELLI DI MODIFICA (area di gestione, 1.1): prodotto e articolo.
   Lo strato .db-layer è anch'esso .mb-pg, spostato in <body>.
   ========================================================= */
html.mb-drawer-open { overflow: hidden; }
.mb-pg.db-layer { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh; z-index: 100002; }
.mb-pg {
    .db-scrim { position: absolute; inset: 0; background: rgba(8,30,58,.35); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
    .db-drawer { position: absolute; top: 0; right: 0; bottom: 0; z-index: 1; width: min(760px, 94%); background: #fff; box-shadow: -30px 0 60px -20px rgba(10,46,82,.45); overflow: auto; overscroll-behavior: contain; animation: db-in .35s cubic-bezier(.32,.72,0,1); }
    @media (prefers-reduced-motion: reduce) { .db-drawer { animation: none; } }
    .db-drawer__head { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--mb-linea); }
    .db-drawer__head b { font: 900 18px/1.25 var(--mb-font-titoli); color: var(--mb-blu); }
    .db-drawer__head .x { flex: 0 0 40px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--mb-mare); color: var(--mb-blu); text-decoration: none; font-weight: 800; }
    .db-confirm { position: sticky; top: 69px; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 22px; background: #FFF6DB; border-bottom: 1px solid #F0DE9E; font-weight: 700; color: #6B5000; }
    .db-confirm[hidden] { display: none; }
    /* conferma del cambio di stato: dentro la tabella, sotto la riga scelta */
    .db-st-row td { padding: 0 !important; }
    .db-st-row .db-confirm { position: static; border-radius: 0 0 12px 12px; border-bottom: 0; }
    .db-table tr.is-sel > td { background: #FFF6DB; }
    /* richieste (1.6.2): colonna Azione larga, "Rispondi" pulsante, tendina leggibile, dettaglio ordinato */
    .db-rq td:last-child { min-width: 220px; }
    .db-rq td:last-child .db-inline { display: block; margin-top: 8px; }
    .db-rq .db-st { width: 100%; min-width: 190px; min-height: 40px; }
    .db-rq .db-rq-btn { min-height: 38px; padding: 0 16px; font-size: 14px; }
    .db-rq details ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13.5px; color: var(--mb-tenue); }
    .db-rq td:first-child small, .db-rq td:nth-child(2) small { color: var(--mb-tenue); }
    /* risposta del cliente: pulsante pieno e, accanto, il link per rinunciare */
    .db-accept { align-items: center; gap: 16px; margin-top: 6px; }
    .db-decline { border: 0; background: none !important; padding: 0; font: 600 14px var(--mb-font-testo); color: var(--mb-tenue) !important; text-decoration: underline; cursor: pointer; }
    .db-confirm span { flex: 1 1 220px; }
    .db-drawer__body { padding: 20px 22px 0; display: grid; gap: 16px; }
    .db-drawer__body .db-notice { margin: 0; }
    .db-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--mb-mare); font-size: 14px; line-height: 1.5; }
    .db-note b { color: var(--mb-blu); }
    .db-note a { color: inherit; }
    .db-note::before { content: "i"; flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--mb-blu); color: #fff; font: 900 13px/22px var(--mb-font-titoli); text-align: center; }
    .db-sec { display: grid; gap: 12px; padding-top: 4px; }
    .db-sec > h3, .db-recipe > h3, .db-used > h3 { font: 900 16px var(--mb-font-titoli); color: var(--mb-blu); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; justify-content: flex-start; }
    :is(.db-sec, .db-recipe, .db-used) > h3 small { font: 600 13px var(--mb-font-testo); color: var(--mb-tenue); }
    .db-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--mb-linea); cursor: pointer; }
    .db-switch b { font: 800 15px var(--mb-font-titoli); }
    .db-switch small { display: block; color: var(--mb-tenue); font-size: 13px; }
    .db-switch input { width: 22px; height: 22px; accent-color: var(--mb-blu); flex: 0 0 auto; }
    .db-form select { width: 100%; border: 1px solid #C9D6E6; border-radius: 12px; padding: 11px 13px; font: 600 15.5px var(--mb-font-testo); background: #fff; color: var(--mb-testo); }
    .db-gal { display: flex; flex-wrap: wrap; gap: 10px; }
    .db-gal figure { position: relative; margin: 0; width: 92px; height: 92px; border-radius: 12px; background: #F5F8FC; border: 1px solid var(--mb-linea); cursor: grab; }
    .db-gal.one figure { cursor: default; }
    .db-gal figure img { width: 100%; height: 100%; object-fit: contain; border-radius: 12px; pointer-events: none; }
    .db-gal figure.main { border: 2px solid var(--mb-oro); }
    .db-gal figure.main::after { content: "Principale"; position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 99px; background: var(--mb-oro); color: #fff; font: 800 10.5px var(--mb-font-titoli); }
    .db-gal figure button { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(10,46,82,.25); color: var(--mb-rosso); cursor: pointer; font-size: 12px; padding: 0; }
    .db-gal .add { width: 92px; height: 92px; border: 1.5px dashed #A9BAD0; border-radius: 12px; background: #fff; color: var(--mb-blu); font: 800 13px/1.3 var(--mb-font-titoli); cursor: pointer; }
    .db-gal .add[hidden] { display: none; }
    .db-wpe { border: 1px solid #C9D6E6; border-radius: 12px; overflow: hidden; }
    .db-wpe .mce-tinymce { border: 0 !important; box-shadow: none !important; }
    .db-wpe .wp-media-buttons { padding: 6px; }
    .db-nut { width: 100%; border-collapse: collapse; font-size: 14.5px; }
    .db-nut td { padding: 5px 0; border-bottom: 1px solid var(--mb-linea); }
    .db-nut td:last-child { text-align: right; }
    .db-nut td.sub { padding-left: 16px; color: var(--mb-tenue); }
    .db-nut td small { color: var(--mb-tenue); }
    .db-nut input { width: 110px; border: 1px solid #C9D6E6; border-radius: 10px; padding: 7px 10px; font: 600 14.5px var(--mb-font-testo); text-align: right; }
    .db-var { display: grid; gap: 8px; }
    .db-var > div { display: grid; grid-template-columns: 58px 1fr 190px; gap: 12px; align-items: center; padding: 8px; border: 1px solid var(--mb-linea); border-radius: 12px; }
    .db-var .pic { width: 58px; height: 58px; padding: 0; border: 1px dashed #A9BAD0; border-radius: 8px; background: #F5F8FC; cursor: pointer; }
    .db-var .pic img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }
    .db-var b { font: 800 15px var(--mb-font-titoli); }
    .db-var b small { display: block; font: 600 12.5px var(--mb-font-testo); color: var(--mb-tenue); }
    .db-var input:not([type=hidden]) { width: 100%; border: 1px solid #C9D6E6; border-radius: 10px; padding: 8px 10px; font: 600 14.5px var(--mb-font-testo); }
    .db-recipe[hidden], .db-used[hidden], .db-row [hidden] { display: none; }
    .db-picks { display: flex; flex-wrap: wrap; gap: 8px; }
    .db-pick { display: none; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 12px; background: #fff; border: 1px solid var(--mb-linea); font: 700 13.5px var(--mb-font-titoli); cursor: pointer; }
    .db-pick input { position: absolute; opacity: 0; pointer-events: none; }
    .db-pick img { width: 34px; height: 34px; object-fit: contain; border-radius: 6px; background: #F5F8FC; }
    .db-pick i { display: none; width: 22px; height: 22px; border-radius: 50%; background: var(--mb-mare); color: var(--mb-blu); font-style: normal; font-size: 11px; place-items: center; }
    .db-pick:has(input:checked) { display: inline-flex; border-color: var(--mb-blu); }
    .db-pick:has(input:checked) i { display: grid; }
    .db-picks.q .db-pick.m { display: inline-flex; }
    .db-picks.q .db-pick.m:not(:has(input:checked)) { background: var(--mb-mare); }
    .db-foot { position: sticky; bottom: 0; z-index: 3; margin: 6px -22px 0; padding: 14px 22px; background: #fff; border-top: 1px solid var(--mb-linea); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
    /* pulsanti leggeri in fondo ai pannelli: sempre leggibili (fondo bianco, testo e bordo blu) */
    .db-foot .btn--ghost { background: #fff !important; color: var(--mb-blu) !important; box-shadow: inset 0 0 0 2px var(--mb-blu); white-space: nowrap; }
    .db-foot .adv { margin-left: auto; font: 700 13.5px var(--mb-font-titoli); color: var(--mb-blu); }
    .db-chipsro { display: flex; flex-wrap: wrap; gap: 6px; }
    .db-chipsro span { padding: 5px 12px; border-radius: 999px; background: var(--mb-mare); font: 800 13.5px var(--mb-font-titoli); color: var(--mb-blu); }
    /* Panoramica della gestione: 6 schede su 3 colonne (2 righe), non 5 + 1 */
    &.mb-gestione .db-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    @container site (max-width: 699px) {
        &.mb-gestione .db-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .db-drawer { left: 0; width: auto; animation: none; }
        .db-var > div { grid-template-columns: 50px 1fr; }
        .db-var > div > input { grid-column: 1 / -1; }
        .db-foot .adv { margin-left: 0; width: 100%; }
    }
}
/* il pannello "Contatta" è spostato nel <body> da aree.js (i contenitori lo chiuderebbero) */
.mb-pg.ro-oc { position: fixed; inset: 0; z-index: 100003; }
.mb-pg.ro-oc[hidden] { display: none; }
@keyframes db-in { from { transform: translateX(40px); } to { transform: none; } }

/* =========================================================
   1.7 — Richieste e ordini: funnel, schede, percorso, menu d'azione,
   pannello "Contatta", menu a sinistra riducibile, tendine (mockup 1.7)
   ========================================================= */
.mb-pg {
    .ro-funnel { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; }
    .ro-funnel a { display: grid; gap: 2px; justify-items: start; min-width: 140px; padding: 12px 16px; border-radius: 16px; border: 1px solid var(--mb-linea); background: #fff; text-decoration: none; }
    .ro-funnel a b { font: 900 26px/1 var(--mb-font-titoli); color: var(--mb-blu); }
    .ro-funnel a span { font: 700 13px var(--mb-font-testo); color: var(--mb-tenue); }
    .ro-funnel a[aria-pressed="true"] { border-color: var(--mb-blu); box-shadow: inset 0 0 0 2px var(--mb-blu); }
    .ro-funnel a.all { min-width: 0; align-content: center; }
    .ro-funnel i { align-self: center; font-style: normal; font-size: 22px; color: var(--mb-tenue); }
    @container site (max-width: 980px) { .ro-funnel a { min-width: 0; flex: 1 1 40%; } .ro-funnel i { display: none; } }

    .ro-wrap { container-type: inline-size; container-name: ro; }
    .ro-list { display: grid; gap: 12px; }
    .ro-head, .ro-row { display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(150px, 1.3fr) 100px minmax(140px, 1fr) minmax(170px, 1fr) 80px; gap: 14px; align-items: start; }
    .ro-head { padding: 0 18px; font: 800 11px var(--mb-font-testo); letter-spacing: .1em; text-transform: uppercase; color: var(--mb-tenue); }
    .ro-card { background: #fff; border: 1px solid var(--mb-linea); border-radius: 18px; box-shadow: 0 6px 18px -12px rgba(10,46,82,.25); scroll-margin-top: 120px; }
    .ro-card.is-sel { border-color: var(--mb-oro); box-shadow: 0 0 0 2px #F4D98A, 0 6px 18px -12px rgba(10,46,82,.25); }
    .ro-card > :last-child { border-radius: 0 0 17px 17px; }
    .ro-row { padding: 16px 18px; font-size: 14px; }
    .ro-row > div { min-width: 0; overflow-wrap: anywhere; }
    .ro-row small { display: block; color: var(--mb-tenue); font-size: 12.5px; }
    .ro-row .c-code b { font: 800 14.5px var(--mb-font-titoli); }
    .ro-row .num { text-align: right; }
    .ro-row .lab { display: none; }
    .ro-row .c-open { text-align: right; }
    .ro-row .c-act { position: relative; }
    .ro-sub { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
    .ro-btn { min-height: 38px; padding: 0 16px; font-size: 14px; }
    .ro-link { border: 0; background: none !important; padding: 0; font: 600 14px var(--mb-font-testo); color: var(--mb-tenue) !important; text-decoration: underline; cursor: pointer; }
    .ro-card .db-confirm { position: static; border-radius: 0; border-bottom: 0; border-top: 1px solid #F0DE9E; }
    .ro-detail { padding: 18px; background: var(--mb-mare); border-top: 1px solid var(--mb-linea); }
    .ro-dgrid { display: grid; grid-template-columns: minmax(200px, 1fr) 2fr; gap: 24px; }
    .ro-dgrid h4 { font: 800 13px var(--mb-font-testo); letter-spacing: .1em; text-transform: uppercase; color: var(--mb-tenue); margin: 0 0 10px; }
    .ro-tl { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--mb-linea); display: grid; gap: 14px; }
    .ro-tl li { position: relative; display: grid; }
    .ro-tl li::before { content: ''; position: absolute; left: -25px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--mb-blu); box-shadow: 0 0 0 3px var(--mb-mare); }
    .ro-tl li.is-last::before { background: var(--mb-oro); }
    .ro-tl b { font: 700 14px var(--mb-font-testo); color: var(--mb-testo); }
    .ro-tl small { color: var(--mb-tenue); }
    .ro-lines { width: 100%; table-layout: fixed; border-collapse: collapse; background: #fff; border-radius: 14px; overflow: hidden; font-size: 14px; }
    .ro-lines td { padding: 8px 12px; border-bottom: 1px solid var(--mb-linea); overflow-wrap: anywhere; vertical-align: top; }
    .ro-lines td:first-child { width: 56px; } .ro-lines td.num { width: 120px; text-align: right; }
    .ro-lines td small { display: block; color: var(--mb-tenue); }
    .ro-lines tr.tot td { font-weight: 800; color: var(--mb-blu); border-bottom: 0; }
    .ro-info { font-size: 14px; line-height: 1.7; margin: 10px 0; }
    .ro-ban { display: grid; gap: 8px; padding: 14px 16px; border-radius: 14px; margin-bottom: 12px; }
    .ro-ban.oro { background: #FFF6DB; } .ro-ban.verde { background: #E8F6EE; }
    .ro-ban b { font: 800 15px var(--mb-font-titoli); }
    .ro-accept, .ro-dbtns { gap: 14px; align-items: center; }
    @container ro (max-width: 820px) {
        .ro-head { display: none; }
        .ro-row { grid-template-columns: 1fr 1fr; gap: 12px 14px; }
        .ro-row .lab { display: block; font: 800 11px var(--mb-font-testo); letter-spacing: .1em; text-transform: uppercase; color: var(--mb-tenue); margin-bottom: 2px; }
        .ro-row .num { text-align: left; }
        .ro-row .c-act, .ro-row .c-open { grid-column: 1 / -1; text-align: left; }
        .ro-row .c-act:empty { display: none; }
        .ro-dgrid { grid-template-columns: 1fr; }
    }
    @container ro (max-width: 520px) { .ro-row { grid-template-columns: 1fr; } .ro-dbtns .btn { width: 100%; justify-content: center; } .ro-lines td.num { width: 90px; } }

    /* menu d'azione (al posto della tendina) */
    .ro-menu { position: relative; width: 100%; }
    .ro-menu__btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 40px; padding: 0 14px; border: 1.5px solid var(--mb-blu); border-radius: 999px; background: #fff; color: var(--mb-blu); font: 800 14px var(--mb-font-titoli); cursor: pointer; }
    .ro-menu__btn[aria-expanded="true"] { background: var(--mb-blu); color: #fff; }
    .ro-menu__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
    .ro-menu__list { position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; min-width: 100%; width: max-content; max-width: 300px; display: grid; gap: 2px; padding: 6px; border-radius: 16px; background: #fff; border: 1px solid var(--mb-linea); box-shadow: 0 18px 40px -16px rgba(10,46,82,.4); }
    .ro-menu__list[hidden] { display: none; }
    .ro-menu__f { margin: 0; }
    .ro-menu__list button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; border-radius: 12px; background: transparent; color: var(--mb-testo); font: 700 14px var(--mb-font-titoli); text-align: left; cursor: pointer; }
    .ro-menu__list button:hover, .ro-menu__list button:focus-visible { background: var(--mb-mare); color: var(--mb-testo); }
    .ro-menu__list i { flex: 0 0 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--mb-mare); color: var(--mb-blu); font-style: normal; font-weight: 900; }
    .ro-menu__list small { display: block; font: 600 12px var(--mb-font-testo); color: var(--mb-tenue); }

    /* pannello laterale "Contatta" */
    .ro-oc__scrim { position: absolute; inset: 0; background: rgba(10,46,82,.35); backdrop-filter: blur(3px); }
    .ro-oc__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 100%); overflow: auto; background: #fff; padding: 22px; display: grid; align-content: start; gap: 14px; box-shadow: -30px 0 60px -20px rgba(10,46,82,.45); animation: db-in .3s ease-out; }
    .ro-oc__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .ro-oc__head b { font: 900 20px var(--mb-font-titoli); color: var(--mb-blu); }
    .ro-oc__head .x { border: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--mb-mare); color: var(--mb-blu); cursor: pointer; }

    /* totale nel pannello Rispondi */
    .ro-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; padding: 14px 18px; border-radius: 16px; background: var(--mb-notte); color: #fff; }
    .ro-total b { font: 900 24px var(--mb-font-titoli); } .ro-total small { color: #B9CBE2; flex-basis: 100%; }

    /* menu a sinistra riducibile (solo schermi larghi) */
    .db-navmin { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 14px; border: 0; background: transparent; color: var(--mb-tenue); font: 700 13px var(--mb-font-titoli); cursor: pointer; text-align: left; }
    @container site (min-width: 981px) {
        .db.is-min { grid-template-columns: 64px minmax(0, 1fr); }
        .db.is-min .db-nav a, .db.is-min .db-nav button { justify-content: center; padding-inline: 0; position: relative; }
        .db.is-min .db-nav :is(a, button) > span:not(.n) { display: none; }
        .db.is-min .db-nav .n { position: absolute; top: 2px; right: 4px; min-width: 18px; padding: 0 4px; font-size: 11px; }
    }
    @container site (max-width: 980px) { .db-navmin { display: none !important; } }

    /* tendine dei moduli in stile Mari Blue */
    .db-main select, .db-drawer select { -webkit-appearance: none; appearance: none; min-height: 44px; padding: 0 40px 0 14px; border: 1.5px solid var(--mb-linea); border-radius: 12px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16' fill='none' stroke='%230047AB' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; font: 600 15px var(--mb-font-testo); color: var(--mb-testo); cursor: pointer; }
    .db-main select:focus, .db-drawer select:focus { outline: none; border-color: var(--mb-blu); box-shadow: 0 0 0 3px rgba(0,71,171,.15); }
}