/* =====================================================================
   CORREZIONI DI ASPETTO CHE VIAGGIANO COL PACCHETTO

   Qui stanno le correzioni che non meritano un file del tema tutto loro:
   poche righe, mirate, che il pacchetto porta con se' e che spariscono
   disinstallandolo.
   ===================================================================== */


/* ---------------------------------------------------------------------
   LA FASCIA IN CIMA CHE SI SPEZZAVA IN DUE, SOLO NEL CHECKOUT

   Sintomo: nella pagina di checkout la bandierina, "Contatti" e "Account"
   finivano su due righe e disallineati. Nelle altre pagine no.

   Causa, misurata sulla pagina vera. La fascia e' una griglia di tre
   colonne. Ma il contenitore ha due elementi invisibili - ::before e
   ::after, avanzo di una tecnica di impaginazione vecchia usata per
   "chiudere" le colonne flottanti - e in una griglia quegli elementi NON
   sono invisibili: contano come caselle. Cosi' le tre caselle della prima
   riga se le prendevano ::before, la bandierina e "Contatti", e "Account"
   veniva spinto a capo.

   I conti tornavano al pixel: la bandierina si trovava esattamente dove
   comincia la SECONDA colonna, non la prima.

   La correzione e' togliere quei due elementi dalla griglia. Non si perde
   niente: servivano a una tecnica che qui non si usa piu'.
   --------------------------------------------------------------------- */

.header-nav .container::before,
.header-nav .container::after {
    content: none;
}

/* L'avviso quando manca il punto di ritiro: deve saltare all'occhio
   subito sotto al corriere scelto, senza spostare il resto della pagina. */
.sd-manca-locker {
    margin: 0 0 8px;
    padding: 8px 10px;
    border-left: 3px solid #d9534f;
    background: #fdf3f2;
    color: #a3302c;
    font-weight: 600;
}


/* =====================================================================
   LA TENDINA DEL MENU IN ALTO

   Quello che c'era: un rettangolo bianco senza bordo, senza ombra e
   senza imbottitura, con i collegamenti attaccati al vetro. Sembrava
   una svista piu' che un menu.

   Quello che c'e' ora: una scheda che scende dalla barra nera, con
   l'ombra sotto, gli angoli arrotondati in basso e le voci che si
   accendono al passaggio del mouse - lo stesso arancione del resto del
   negozio.

   ⚠️ Niente interruttore nuovo: queste regole viaggiano con quelle
   della barra in alto, che e' la stessa zona della pagina.
   ===================================================================== */

@media (min-width: 992px) {

    /*
      ⚠️ LARGA QUANTO SERVE, NON QUANTO CAPITA. Il modulo dava alla
      tendina una larghezza fissa - misurata: 585 pixel - mentre la voce
      piu' lunga ne occupa 165. Il risultato erano quattrocento pixel di
      bianco a destra delle scritte, che il negoziante ha giustamente
      trovato eccessivi.

      `max-content` la fa stringere sul testo; il minimo evita tendine
      ridicole da due parole, il massimo evita che una voce lunghissima
      la faccia uscire dallo schermo.
    */
    .ets_mm_megamenu_content .mm_columns_ul {
        width: max-content !important;
        min-width: 220px;
        max-width: 400px;
        padding: 8px !important;
        border: 1px solid #e4e6e8;
        border-top: 0;
        border-radius: 0 0 12px 12px;
        box-shadow: 0 16px 40px rgba(20, 23, 26, .18);
    }

    /* I contenitori interni tenevano la larghezza del modulo e il
       galleggiamento: senza toglierli, la tendina non si stringe. */
    .ets_mm_megamenu_content .mm_columns_ul .mm_columns_li,
    .ets_mm_megamenu_content .mm_columns_ul .mm_blocks_li,
    .ets_mm_megamenu_content .mm_columns_ul .ets_mm_block {
        float: none !important;
        width: auto !important;
        padding: 0 !important;
    }

    /* Le voci stavano a quaranta pixel l'una dall'altra: con
       l'imbottitura del collegamento ne bastano pochi. */
    .ets_mm_megamenu_content .mm_columns_ul .mm_blocks_li {
        margin: 0 !important;
    }

    .ets_mm_megamenu_content .mm_columns_ul .mm_columns_li {
        padding: 2px !important;
    }
}

/* Le voci: una riga comoda da leggere e da centrare col mouse. */
.ets_mm_megamenu_content .mm_columns_ul .mm_block_type_category a,
.ets_mm_megamenu_content .mm_columns_ul .ets_mm_block a {
    display: block;
    padding: 9px 14px;
    border-radius: 8px;
    color: #1f2328;
    font-size: 14px;
    line-height: 1.35;
    text-decoration: none;
    transition: background-color .14s, color .14s;
}

.ets_mm_megamenu_content .mm_columns_ul .mm_block_type_category a:hover,
.ets_mm_megamenu_content .mm_columns_ul .ets_mm_block a:hover {
    background: #fff7ea;
    color: #e88a00;
}

/* Sul telefono la tendina e' un elenco che scende dentro la pagina:
   niente ombra ne' angoli, solo un filo di rientro per far capire che
   quelle voci stanno sotto la voce principale. */
@media (max-width: 991px) {

    .ets_mm_megamenu_content .mm_columns_ul {
        padding: 4px 0 8px 12px !important;
    }
}
