/*
 * Mariblue — base comune dei widget.
 *
 * Le variabili --mb-* arrivano dalla configurazione (Mariblue → Impostazioni →
 * Stile), scritte in <head>; qui ci sono solo i valori di riserva. Ogni
 * widget ha la sua radice .mb-<nome> e non tocca il resto della pagina.
 */
:root {
    --mb-blu: #0047AB;
    --mb-blu-scuro: #005180;
    --mb-oro: #C6950D;
    --mb-giallo: #FAE810;
    --mb-testo: #1D2733;
    --mb-sfondo: #FFFFFF;
    --mb-mare: #EEF4FB;
    --mb-linea: #D7E3F2;
    --mb-tenue: #5A6B80;
    --mb-notte: #0A2E52;
    --mb-rosso: #C8202F;
    --mb-font-titoli: "Nunito", system-ui, sans-serif;
    --mb-font-testo: "Nunito Sans", system-ui, sans-serif;
    --mb-raggio: 10px;
    --mb-larghezza: 1240px;
    --mb-gusto-classiche: #2C6FD6;
    --mb-gusto-al-peperoncino: #D33A2C;
    --mb-gusto-al-prezzemolo: #2E9B4F;
}

/* Il riquadro Elementor del widget a larghezza piena: senza, da telefono
   l'altezza del riquadro non segue il contenuto (spazio bianco sotto, o
   contenuto sopra il footer). */
.elementor-widget[class*="elementor-widget-mariblue-"] { width: 100%; }

/* Ogni widget è un contenitore: le sue regole guardano la sua larghezza
   (desktop ≥ 981, tablet 700–980, telefono < 700), non quella dello schermo. */
.mb-widget { container: site / inline-size; }

.mb-widget,
.mb-widget *,
.mb-widget *::before,
.mb-widget *::after {
    box-sizing: border-box;
}

.mb-widget {
    font-family: var(--mb-font-testo);
    color: var(--mb-testo);
    line-height: 1.5;
}

.mb-widget :where(h1, h2, h3, h4, h5, h6) {
    font-family: var(--mb-font-titoli);
    margin: 0;
    line-height: 1.15;
}

.mb-widget :where(p) { margin: 0; }

.mb-wrap {
    width: 100%;
    max-width: var(--mb-larghezza);
    margin-inline: auto;
    padding-inline: 20px;
}

.mb-btn {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: .65em 1.6em;
    border-radius: var(--mb-raggio);
    background: var(--mb-oro);
    color: #fff;
    font-family: var(--mb-font-titoli);
    font-weight: 700;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition: filter .2s, transform .2s;
}
.mb-btn:hover { filter: brightness(1.08); color: #fff; }
.mb-btn:active { transform: translateY(1px); }
.mb-btn:focus-visible { outline: 3px solid var(--mb-blu); outline-offset: 2px; }
.mb-btn--blu { background: var(--mb-blu); }
.mb-btn--chiaro { background: #fff; color: var(--mb-blu); box-shadow: inset 0 0 0 1px var(--mb-linea); }
.mb-btn--chiaro:hover { color: var(--mb-blu); }

/* ---------------------------------------------------------------------
   Scheda prodotto condivisa (home, catalogo, articoli, Area B2B)
   <a|button class="mb-card"> [badge] __img __body(__cat __name __fmt __dots __price|__pub __go)
   --------------------------------------------------------------------- */
.mb-card { position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: 18px; border: 1px solid var(--mb-linea); background: #fff; overflow: hidden; text-decoration: none; color: inherit; text-align: left; font: inherit; padding: 0; transition: box-shadow .3s, transform .3s; }
button.mb-card { cursor: pointer; width: 100%; }
.mb-card:hover { box-shadow: 0 18px 36px -18px rgba(10,46,82,.35); transform: translateY(-3px); }
.mb-card:focus-visible { outline: 3px solid var(--mb-oro); outline-offset: 2px; }
.mb-card__img { aspect-ratio: 1; background: #F5F8FC; display: grid; place-items: center; }
.mb-card__img img { width: 88%; height: 88%; object-fit: contain; }
.mb-card__body { display: grid; gap: 6px; padding: 16px 18px 18px; align-content: start; }
.mb-card__cat { font: 800 11.5px var(--mb-font-testo); letter-spacing: .1em; text-transform: uppercase; color: var(--mb-oro); }
.mb-card__name { font: 800 17px/1.2 var(--mb-font-titoli); color: var(--mb-testo); }
.mb-card__fmt { font-size: 14px; color: var(--mb-tenue); }
.mb-card__dots { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--mb-tenue); margin-top: 2px; }
.mb-card__badge { position: absolute; z-index: 1; top: 10px; left: 10px; padding: 4px 9px; border-radius: 999px; background: var(--mb-notte); color: #fff; font: 800 11px var(--mb-font-testo); letter-spacing: .06em; text-transform: uppercase; }
.mb-card__price { margin-top: 6px; padding: 6px 10px; border-radius: 10px; background: #FFF6DB; color: #7A5A00; font: 800 13px var(--mb-font-titoli); width: max-content; max-width: 100%; }
.mb-card__pub { margin-top: 6px; font: 900 19px var(--mb-font-titoli); color: var(--mb-blu); font-variant-numeric: tabular-nums; }
.mb-card__pub small { font: 600 12px var(--mb-font-testo); color: var(--mb-tenue); }
.mb-card__go { margin-top: 8px; font: 800 14.5px var(--mb-font-titoli); color: var(--mb-blu); }
@container site (max-width: 699px) {
    .mb-card__body { padding: 12px 12px 14px; }
    .mb-card__name { font-size: 15px; }
}

/* pallino del gusto: <i class="mb-dot mb-dot--al-peperoncino"> */
.mb-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; background: var(--mb-tenue); }
.mb-dot--classiche { background: var(--mb-gusto-classiche); }
.mb-dot--al-peperoncino { background: var(--mb-gusto-al-peperoncino); }
.mb-dot--al-prezzemolo { background: var(--mb-gusto-al-prezzemolo); }

.mb-sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .mb-widget *, .mb-widget *::before, .mb-widget *::after {
        transition: none !important;
        animation: none !important;
    }
}

/* Pulsanti al passaggio del mouse, al tocco e col tasto Tab: il tema o le
   impostazioni globali di Elementor cambiano lo sfondo di button/a al
   passaggio, mentre il nostro testo resta bianco → pulsante "sparito".
   Lo sfondo resta il nostro, appena più chiaro. */
/* anche negli strati spostati nel <body> (pannello del catalogo, pannelli della gestione): .mb-pg */
:is(.mb-widget, .mb-pg) :is(a, button).btn:is(:hover, :focus, :active),
:is(.mb-widget, .mb-pg) :is(a, button).mb-btn:is(:hover, :focus, :active),
:is(.mb-widget, .mb-pg) :is(a, button).mbh-gold:is(:hover, :focus, :active) {
    background: var(--mb-oro) !important; background-image: none !important; color: #fff !important; border-color: transparent !important; text-decoration: none !important;
}
:is(.mb-widget, .mb-pg) :is(a, button).mb-btn--blu:is(:hover, :focus, :active),
:is(.mb-widget, .mb-pg) :is(a, button).mbh-blue:is(:hover, :focus, :active) { background: var(--mb-blu) !important; }
:is(.mb-widget, .mb-pg) :is(a, button).btn--ghost:is(:hover, :focus, :active) { background: transparent !important; color: var(--mb-blu) !important; }
/* nella striscia blu del totale (Area B2B) il pulsante leggero resta chiaro */
:is(.mb-widget, .mb-pg) .db-total :is(a, button).btn--ghost { color: #fff !important; border-color: rgba(255,255,255,.7) !important; background: transparent !important; }
:is(.mb-widget, .mb-pg) .db-total :is(a, button).btn--ghost:is(:hover, :focus, :active) { background: #fff !important; color: var(--mb-notte) !important; border-color: #fff !important; }
:is(.mb-widget, .mb-pg) :is(a, button):is(.mb-btn--chiaro, .btn--light):is(:hover, :focus, :active) { background: #fff !important; color: var(--mb-blu) !important; }
:is(.mb-widget, .mb-pg) :is(a, button).sv-btn:is(:hover, :focus, :active) { text-decoration: none !important; }

/* richiesta dei privati (1.6.0) */
.mb-pg .sp-req { display: grid; gap: 12px; padding: 16px; border-radius: 18px; background: var(--mb-mare); margin-top: 6px; }
.mb-pg .sp-req .price { font: 900 28px/1 var(--mb-font-titoli); color: var(--mb-blu); }
.mb-pg .sp-req .price small { font: 600 13px var(--mb-font-testo); color: var(--mb-tenue); margin-left: 6px; }
.mb-pg .sp-req .price span { font-size: 22px; }
.mb-pg .sp-req .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.mb-pg .sp-req__f { display: grid; gap: 4px; font-size: 13px; font-weight: 700; color: var(--mb-tenue); }
.mb-pg .sp-req__f select, .mb-pg .sp-req__f input { min-height: 44px; border: 1px solid var(--mb-linea); border-radius: 12px; padding: 0 12px; font: 600 15px var(--mb-font-testo); background: #fff; }
.mb-pg .sp-req__f input { width: 90px; }
.mb-pg .sp-req .sh-note, .mb-pg .sp-req .sh-added { margin: 0; font-size: 13.5px; color: var(--mb-tenue); }
.mb-pg .sp-req .sh-added { color: var(--mb-verde, #146C3C); font-weight: 700; }