/* ==========================================================================
   mg-nav — colla fra il design system (mg-design.css) e il contesto WordPress.
   Caricato su OGNI pagina, dopo style.css e mg-design.css.

   Qui dentro sta SOLO cio' che mg-design.css non puo' sapere:
     1. il mega-menu senza JavaScript (:hover / :focus-within)
     2. la neutralizzazione delle regole legacy di style.css su
        .cart-icon / .cart-contents / .minicart, che ora vestono il drawer
     3. l'adattamento del markup generato da WordPress (wp_nav_menu, widget WC)

   Nessuna regola di mg-design.css e' riscritta: dove serve, e' *estesa* con
   una specificita' appena superiore.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Utility
   -------------------------------------------------------------------------- */

/* .screen-reader-text di style.css NON nasconde nulla (e' uno stile di label
   visibile, riga ~1445). Serve una utility vera. */
.mg-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Focus visibile sul chrome scuro. */
.nav a:focus-visible,
.nav button:focus-visible,
.nav summary:focus-visible,
.mg-footer a:focus-visible,
.drawer a:focus-visible,
.drawer button:focus-visible {
  outline: 3px solid var(--accent-2);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Brand / logo
   -------------------------------------------------------------------------- */

/* wp_get_attachment_image() emette width/height reali dell'immagine: vanno
   sovrascritti, altrimenti il logo occuperebbe la sua taglia nativa.
   Gli attributi restano nel markup — servono al browser per riservare il box. */
.nav .brand img.logo,
.mg-footer .brand img.logo {
  width: 52px;
  height: 52px;
}

.mg-footer-brand {
  margin-bottom: 14px;
}

/* --------------------------------------------------------------------------
   Mega-menu senza JavaScript
   --------------------------------------------------------------------------
   mg-design.css apre il pannello con .mega.open (che presuppone JS). Qui la
   stessa transizione e' guidata da :hover e :focus-within sul wrapper.

   Da tastiera: TAB sull'ancora apre il pannello (il wrapper riceve il focus
   dall'interno), i link del pannello diventano raggiungibili, TAB fuori chiude.

   content-visibility a pannello chiuso non e' cosmesi: senza, i 9 pannelli
   restano nel viewport (opacity 0) e il browser scarica comunque le immagini
   di categoria, rubando banda all'LCP.
   -------------------------------------------------------------------------- */

.nav-anchors .has-mega {
  flex: 0 0 auto; /* .nav-anchors e' flex; l'ancora non e' piu' figlia diretta */
  display: inline-flex;
}

/* --------------------------------------------------------------------------
   Cursori-freccia della lista brand (‹ ›) — desktop E mobile
   --------------------------------------------------------------------------
   Bottoni figli di .nav-inner fuori dal flusso: js/mg-nav.js li posiziona sul
   box di .nav-anchors (offsetLeft/Top/Height), che su desktop e' la colonna
   centrale della griglia e su mobile la seconda riga a tutta larghezza.
   Ogni bottone porta il proprio fade (::before). Stati, come classi su
   .nav-inner, commutati sempre da js/mg-nav.js:
     mg-scrollable  la lista trabocca -> i cursori esistono
     mg-can-left    contenuto nascosto a sinistra -> ‹ acceso
     mg-nav-end     fine corsa -> › spento
   Senza JS nessuna classe arriva mai: i bottoni restano display:none. */
.nav-inner { position: relative; }
.nav-inner > .nav-scroll {
  position: absolute; z-index: 5;
  display: none;
  align-items: center;
  margin: 0; padding: 0 6px;
  background: none; border: 0; cursor: pointer;
  color: var(--accent);
  font-family: var(--font-display); font-size: 24px; line-height: 1;
  transition: opacity .25s ease;
}
.nav-inner.mg-scrollable > .nav-scroll { display: flex; }

/* fade: sotto il chevron, sopra le ancore che gli scorrono dietro
   (z-index:-1 resta nel contesto di stacking del bottone) */
.nav-inner > .nav-scroll::before {
  content: "";
  position: absolute; top: 0; bottom: 0; z-index: -1;
  width: 64px;
  pointer-events: none;
}
.nav-scroll--left::before  { left: -4px;  background: linear-gradient(to left,  transparent, var(--ink) 62%); }
.nav-scroll--right::before { right: -4px; background: linear-gradient(to right, transparent, var(--ink) 62%); }

/* ‹ parte spento e si accende quando c'e' strada alle spalle; › l'opposto. */
.nav-inner > .nav-scroll--left { opacity: 0; pointer-events: none; }
.nav-inner.mg-can-left > .nav-scroll--left { opacity: 1; pointer-events: auto; }
.nav-inner.mg-nav-end > .nav-scroll--right { opacity: 0; pointer-events: none; }

/* nudge: ognuno si allontana dal proprio bordo */
.nav-scroll--right { animation: mg-nav-nudge 1.5s ease-in-out infinite; }
.nav-scroll--left  { animation: mg-nav-nudge-left 1.5s ease-in-out infinite; }
@keyframes mg-nav-nudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-4px); }
}
@keyframes mg-nav-nudge-left {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-inner > .nav-scroll { animation: none; }
}

@media (min-width: 1081px) {

  /* Le 11 voci del cliente (~1337px, misurato col font Bangers) non stanno in
     una barra da ~850px: a riga singola sbordavano. Pattern Mary Jane -> le
     ancore SCORRONO in orizzontale anche su desktop (overflow-x:auto).
     Il pannello .mega e' figlio dello scroller, quindi verrebbe ritagliato:
     lo tiriamo fuori dal clip con position:fixed (nessun antenato crea un
     containing block per fixed -- verificato). --mg-nav-h e' l'altezza reale
     della nav sticky (misurata: 85px); e' l'unico valore da ritoccare se
     cambiano logo o padding della nav. */
  .nav .nav-anchors {
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
  }
  .nav .nav-anchors::-webkit-scrollbar { display: none; }

  /* I cursori-freccia (‹ ›) e i loro fade sono definiti FUORI da questa
     media query, valgono anche su mobile: vedi blocco "Cursori-freccia"
     sopra. Il posizionamento sul box delle ancore lo fa js/mg-nav.js. */

  /* Box COMPATTO, non banda a tutto schermo (richiesta cliente 07/2026):
     stesso layout card+sottocategorie, ma largo il giusto. Ancorato al bordo
     sinistro del container nav (stesso calcolo di width:min(1320px,95vw)
     centrato), qualunque sia l'ancora che lo apre. */
  .nav-anchors .has-mega > .mega {
    position: fixed;
    top: var(--mg-nav-h, 85px);
    left: max(2.5vw, calc((100vw - 1320px) / 2));
    right: auto;
    width: min(720px, 95vw);
    border: var(--outline-w) solid var(--ink);
    border-radius: var(--radius);
    content-visibility: hidden;
    visibility: hidden;
  }

  /* Nota: qui c'era un "ponte" (.mega::before) largo quanto la voce, pensato
     per coprire i ~28px fra il fondo della voce e la cima del pannello.
     Rimosso: risolveva solo la traiettoria perfettamente verticale. Chi punta
     una sottocategoria si muove in diagonale ed esce di LATO dalla voce dopo
     ~27px, molto prima di scendere -- misurato, 5 bersagli su 6 restavano
     irraggiungibili. Al suo posto c'e' il ritardo di chiusura in
     js/mg-nav.js, che copre qualunque traiettoria. */

  /* Dentro il box: niente centratura a 1320px, padding propri, feature piu'
     stretta e sottocategorie su 2 colonne ravvicinate invece di 3 sparse. */
  .nav-anchors .mega .mega-inner {
    width: auto;
    margin: 0;
    padding: 20px 22px 24px;
    grid-template-columns: 240px 1fr;
    gap: 24px;
    align-items: start;
  }
  .nav-anchors .mega .mega-cols {
    grid-template-columns: repeat(2, 1fr);
    gap: 2px 18px;
  }

  /* L'apertura col mouse la governa js/mg-nav.js tramite .mg-hover, NON il
     `:hover` puro. Il motivo: il pannello e' position:fixed e non tocca la
     voce, e chi punta una sottocategoria si muove in diagonale uscendo di
     LATO, cioe' sulla voce vicina (le voci sono affiancate con gap:4px). Con
     `:hover` nel selettore, quella voce sfiorata di passaggio aprirebbe il
     proprio pannello all'istante, sovrapponendolo a quello che l'utente sta
     cercando di raggiungere -- col rischio di cliccare la sottocategoria di un
     altro brand. Il JS aspetta 120ms prima di aprire, cosi' il passaggio non
     conta, e ne tiene aperto uno solo per volta.

     :focus-within resta: da tastiera non c'e' traiettoria da proteggere.
     Senza JavaScript il pannello non si apre, ma ogni voce e' comunque un link
     alla propria categoria, quindi il sito resta navigabile. */
  .nav-anchors .has-mega.mg-hover > .mega,
  .nav-anchors .has-mega:focus-within > .mega {
    content-visibility: visible;
    visibility: visible;
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
}

/* Sotto i 1081px niente hover: il PRIMO tap sulla voce apre il box compatto
   (classe mg-open commutata da js/mg-nav.js), il secondo tap naviga.
   Il pannello e' absolute con containing block .nav-inner (position:relative,
   vedi blocco cursori): essendo il containing block FUORI dallo scroller
   .nav-anchors, il clip di overflow-x non lo ritaglia. Layout interno mobile:
   card categoria orizzontale (thumb piccola + nome) sopra, sottocategorie in
   2 colonne sotto. */
@media (max-width: 1080px) {
  .nav-anchors .mega {
    display: none;
  }

  .nav-anchors .has-mega.mg-open > .mega {
    display: block;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    width: auto;
    transform: none;
    opacity: 1;
    visibility: visible;
    content-visibility: visible;
    pointer-events: auto;
    border: var(--outline-w) solid var(--ink);
    border-radius: var(--radius);
    box-shadow: 0 14px 26px rgba(0, 0, 0, .22);
    z-index: 120;
  }

  .nav-anchors .has-mega.mg-open .mega-inner {
    width: auto;
    margin: 0;
    padding: 14px;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* mg-design (<=1080) nasconde .mega-feature: dentro al box riappare come
     striscia orizzontale compatta. */
  .nav-anchors .has-mega.mg-open .mega-feature {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }
  .nav-anchors .has-mega.mg-open .mega-feature .mg-tile-media {
    width: 64px;
    flex: 0 0 64px;
    aspect-ratio: 1;
    border-bottom: 0;
    border-right: var(--outline-w) solid var(--line);
  }

  .nav-anchors .has-mega.mg-open .mega-cols {
    grid-template-columns: 1fr 1fr;
    gap: 2px 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mega {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Contenimento della cascata dentro .nav-anchors
   --------------------------------------------------------------------------
   mg-design.css stila `.nav-anchors a` (0,1,1) presumendo che li' dentro ci
   siano SOLO le ancore-chip. I pannelli .mega ora vivono dentro .nav-anchors
   (serve al :focus-within), quindi quella regola colpisce anche .mega-feature
   (0,1,0) e .mega-cols a (0,1,1: vince solo sulle proprieta' che ridichiara).

   Cola: flex, letter-spacing, white-space, border, border-radius, padding,
   line-height, e il `color: var(--surface)` di :hover — testo bianco su carta.
   Qui si rimette a posto, senza toccare mg-design.css.
   -------------------------------------------------------------------------- */

/* Colonna feature: e' un <a>, mg-design la disegna come card. */
.nav-anchors .mega-feature {
  display: flex;
  flex-direction: column;
  flex: initial;
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: normal;
  line-height: 1.4;
  white-space: normal;
  text-decoration: none;
  color: var(--ink);
  padding: 0;
  border: var(--outline-w) solid var(--line);
  border-radius: var(--radius);
}
.nav-anchors .mega-feature:hover {
  color: var(--ink);
  background: var(--surface) var(--newsprint);
}

.nav-anchors .mega-cols a {
  flex: initial;
  letter-spacing: normal;
  white-space: normal;
  line-height: 1.35;
  border: 0;
}
.nav-anchors .mega-cols a:hover {
  color: var(--ink);
  background: var(--accent-soft);
}

.mega-feature .mg-tile-media {
  width: 100%;
  background: var(--surface) var(--newsprint);
}
.mega-feature .mg-tile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mega-feature-cap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px 14px;
}
.mega-feature-name {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.mega-feature-count {
  font-family: var(--font-marker);
  font-size: 12px;
  color: var(--ink-3);
}

/* (0,3,0): deve battere anche `.nav-anchors .mega-cols a` qui sopra. */
.nav-anchors .mega-cols .mega-all {
  grid-column: 1 / -1;
  font-family: var(--font-graff);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--accent-2);
}
.nav-anchors .mega-cols .mega-all:hover {
  color: var(--accent-2);
  background: var(--accent-soft);
}

/* --------------------------------------------------------------------------
   Ricerca: <details> nativo, zero JavaScript
   -------------------------------------------------------------------------- */

.nav-search {
  position: relative;
  display: flex;
}
.nav-search > summary.icon-btn {
  list-style: none;
  cursor: pointer;
}
.nav-search > summary.icon-btn::-webkit-details-marker {
  display: none;
}
.nav-search > summary.icon-btn::marker {
  content: "";
}

.nav-search-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 101;
  width: min(420px, 88vw);
  padding: 8px;
  background: var(--paper);
  border: var(--outline-w) solid var(--ink);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
/* Il form arriva dal plugin "AJAX Search for WooCommerce". Il pannello .nav-
   search-panel e' gia' outlinato; l'input del plugin dentro pero' porta bordo
   1px grigio + radius 3px + fondo bianco propri (regola (0,3,1), vedi mg-home).
   Lo azzeriamo con (0,4,1) come per la ricerca grande della home. */
.nav-search-panel .dgwt-wcas-search-wrapp {
  /* Il CSS dinamico del plugin fissa `max-width: 250px !important`: dentro
     al box deve riempirlo tutto (i padding li da' il box, non il form).
     L'!important e' l'unico modo di battere quello del plugin. */
  max-width: 100% !important;
  width: 100%;
}
.nav-search-panel .dgwt-wcas-search-wrapp input[type="search"].dgwt-wcas-search-input {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: var(--font-ui);
  color: var(--ink);
  padding: 10px 8px 10px 42px;
}
.nav-search-panel .dgwt-wcas-search-wrapp input[type="search"].dgwt-wcas-search-input:focus {
  outline: none; box-shadow: none; border: 0;
}

/* mg-design.css:661 fa `.icon-btn.search-btn { display: none }` sotto i 680px.
   Decisione utente: su uno shop la ricerca deve restare raggiungibile da
   mobile. Neutralizzata qui con (0,3,0) contro la (0,2,0) originale — senza
   toccare mg-design.css e senza !important. */
@media (max-width: 680px) {
  .nav .icon-btn.search-btn {
    display: grid;
  }
  .nav-search {
    display: flex;
    /* static: il containing block del pannello diventa .nav (sticky = posizionato),
       cosi' top:100% = sotto TUTTA la nav e left/right sono in coordinate nav,
       non del <details> da 44px (il vecchio right:calc(50% - 44vw) calcolava
       il 50% sul details e il pannello sbordava dal viewport). */
    position: static;
  }
  /* Stesso box "carta outlinata" del desktop (il cliente lo preferisce),
     solo riposizionato: sotto TUTTA la nav e agganciato al bordo destro del
     viewport, cosi' non puo' piu' sbordare. */
  .nav-search-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 2.5vw;
    left: auto;
    width: min(420px, 95vw);
  }
  /* 16px: sotto quella soglia iOS zooma la pagina al focus dell'input. */
  .nav-search-panel .dgwt-wcas-search-wrapp input[type="search"].dgwt-wcas-search-input {
    font-size: 16px;
  }
}

/* Il dropdown dei suggerimenti del plugin AJAX viene appeso al body con stili
   propri (bianco anonimo, bordo 1px): outline, radius e ombra del design
   system lo integrano ovunque appaia — nav e ricerca grande della home. */
.dgwt-wcas-suggestions-wrapp {
  border: var(--outline-w) solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  font-family: var(--font-ui);
}

/* Su schermi stretti brand (logo + "MONKEYS GOD" a 22px) + 3 icone tools non
   stavano in ~375px: il bottone carrello veniva spinto contro il bordo. Riduco
   testo brand, logo e gap cosi' tutto rientra con un po' di respiro. */
@media (max-width: 480px) {
  .brand b { font-size: 16px; }
  .nav .brand img.logo { width: 42px; height: 42px; }
  .nav-tools { gap: 6px; }
  .nav-inner { column-gap: 8px; }
}

/* Sotto questa soglia marchio e tre strumenti (con il link alla lista) non stanno in riga. */
@media (max-width: 380px) {
  .brand b { font-size: 14px; }
}

/* Link alla lista (inc/wishlist.php): linguaggio di .icon-btn, ma target piu' grande. */

.mg-wl-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  min-width: 44px;
  height: 44px;
  padding: 0;
  color: var(--accent);
  background: transparent;
  border: 2px solid var(--accent);
  border-radius: 9px;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s, background .12s;
}
/* style.css `a:focus, a:hover` scurisce il colore: va ribadito qui. */
.mg-wl-link:hover,
.mg-wl-link:focus { color: var(--accent); }
.mg-wl-link:hover { background: rgba(245,181,14,.14); }
.mg-wl-link:active { transform: translate(1px,1px); }

/* Il blu su nero di .nav a:focus-visible non arriva a 3:1. */
.nav .mg-wl-link:focus-visible {
  outline: 3px solid var(--surface);
  outline-offset: 2px;
}

.mg-wl-link .mg-wl-ico { width: 20px; height: 20px; flex: none; }

.mg-wl-link-label {
  display: none;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.mg-wl-count {
  position: absolute;
  top: -7px;
  right: -7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  animation: pop .3s cubic-bezier(.34,1.56,.64,1);
}

@media (min-width: 1200px) {
  .mg-wl-link { padding: 0 12px; }
  .mg-wl-link-label { display: inline; }
  .mg-wl-count {
    position: static;
    border: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mg-wl-count { animation: none; }
}

/* --------------------------------------------------------------------------
   Bottone carrello
   --------------------------------------------------------------------------
   style.css veste .cart-icon come FAB fisso in basso a destra (position:fixed,
   z-index 9999) e .cart-icon .cart-contents come pastiglia grigia da 50px.
   La classe .cart-icon resta perche' js/script.js ci aggancia l'apertura del
   drawer; qui la si riporta a un bottone in linea.
   -------------------------------------------------------------------------- */

.nav .cart-icon {
  position: static;
  right: auto;
  bottom: auto;
  z-index: auto;
  display: inline-flex;
}

/* .woocommerce-cart .cart-icon / .woocommerce-checkout .cart-icon in style.css
   hanno specificita' (0,2,0): la superiamo con (0,3,0). */
.woocommerce-cart .nav .cart-icon,
.woocommerce-checkout .nav .cart-icon {
  display: inline-flex;
}

/* Sotto i 680px il carrello passa dalla barra in fondo (inc/minicart.php). Il bottone resta
   nel DOM per il fragment .cart-contents: va nascosto dopo le regole che lo mostrano. */
@media (max-width: 680px) {
  .nav .cart-icon,
  .woocommerce-cart .nav .cart-icon,
  .woocommerce-checkout .nav .cart-icon {
    display: none;
  }
}

.nav .cart-icon .cart-contents {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: auto;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  line-height: 1;
  font-size: inherit;
  color: inherit;
  cursor: inherit;
}
.nav .cart-icon .cart-contents svg {
  width: 18px;
  height: 18px;
}
.nav .cart-icon .cart-contents__number {
  position: static;
  width: auto;
  height: auto;
  right: auto;
  bottom: auto;
  line-height: 1;
  font-size: 13px;
  color: var(--accent);
  background: var(--ink);
}
.cart-btn-label {
  white-space: nowrap;
}

/* Su schermi stretti resta solo icona + contatore. */
@media (max-width: 520px) {
  .cart-btn-label {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Drawer carrello
   --------------------------------------------------------------------------
   L'elemento e' .drawer.minicart: .drawer per il design, .minicart perche'
   js/script.js commuta li' la classe .cart--open (click su .cart-icon e su
   .close). Le regole legacy di .minicart (fixed, 300px, right:-300px,
   justify-content:center, padding 60px) vanno azzerate.
   -------------------------------------------------------------------------- */

.drawer.minicart {
  right: 0;
  left: auto;
  top: 0;
  bottom: 0;
  width: min(420px, 92vw);
  height: 100%;
  min-width: 0;
  padding: 0;
  overflow: visible;
  justify-content: flex-start;
  z-index: 120;
  /* NIENTE ombra da chiuso. Il drawer chiuso e' translateX(100%) fuori schermo,
     ma il box-shadow -8px 0 0 var(--accent) proiettava l'ombra gialla 8px DENTRO
     il viewport: una barra gialla verticale a tutta altezza sul bordo destro
     (visibile su mobile). L'ombra ora c'e' solo da aperto, dove serve. */
  box-shadow: none;
}

.drawer.minicart.cart--open {
  right: 0;
  transform: translateX(0);
  box-shadow: -8px 0 0 var(--accent), -18px 0 30px rgba(0, 0, 0, .25);
}

/* Scrim: puramente visivo. Non intercetta i click perche' non c'e' JS che lo
   ascolti; il drawer si chiude con il bottone .close. */
.drawer.minicart.cart--open ~ .scrim {
  opacity: 1;
}

.drawer.minicart .drawer-head .close {
  position: static;
  padding: 0;
  border-color: var(--ink);
  color: var(--ink);
  background: transparent;
}
.drawer.minicart .drawer-head .close:hover {
  text-decoration: none;
  background: var(--accent-soft);
}
/* .minicart__inside di style.css imposta padding 20px e position:relative
   (serviva alla vecchia .close assoluta). Il drawer usa il proprio padding. */
.drawer.minicart .drawer-items {
  position: static;
  padding: 8px 20px calc(20px + var(--safe-bottom));
}
.drawer.minicart .drawer-items .widget {
  margin-bottom: 0;
}
/* Il widget WC porta il proprio totale e i propri bottoni: fanno da drawer-foot. */
.drawer.minicart .woocommerce-mini-cart__buttons .button {
  display: inline-block;
  margin-right: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .drawer,
  .scrim {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Cartbar mobile
   -------------------------------------------------------------------------- */

.cartbar .mg-btn {
  padding: 10px 16px 8px;
  font-size: 14px;
  border-color: var(--ink);
  flex: 0 0 auto;
}
/* La barra e' ridisegnata per intero dal fragment AJAX `.cartbar` (inc/minicart.php):
   queste regole valgono sia per il markup iniziale sia per quello sostituito. */
.cartbar .info,
.cartbar .cartbar-info {
  display: flex;
  align-items: baseline;
  gap: .3em;
  min-width: 0;
  white-space: nowrap;
}
/* A 375px lo spazio della barra e' esatto al pixel: la riga e' larga 147px per
   142px disponibili, e qualcosa deve cedere. Prima cedeva la fine della riga --
   cioe' l'importo, mostrato come "0,0...". Con un carrello vero
   ("3 articoli · 145,00€") sarebbe peggio, perche' il totale e' proprio
   l'informazione per cui questa barra esiste.
   Ora l'ellissi tocca al conteggio e la cifra non si tronca mai. */
.cartbar .cartbar-qty {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cartbar .cartbar-sep,
.cartbar .cartbar-tot {
  flex: 0 0 auto;
}
/* Sui telefoni stretti recuperiamo una dozzina di pixel dal bottone e dal gap:
   bastano perche' il caso comune ("0 articoli · 0,00€") non venga tagliato
   affatto, invece di perdere la coda dell'etichetta. Sopra, l'ellissi resta
   come rete di sicurezza per i carrelli lunghi. */
@media (max-width: 400px) {
  .cartbar { gap: 8px; }
  .cartbar .mg-btn { padding-left: 12px; padding-right: 12px; }
}
.cartbar .cartbar-tot .amount {
  font-family: var(--font-display);
}

/* --------------------------------------------------------------------------
   Footer: markup generato da wp_nav_menu()
   -------------------------------------------------------------------------- */

.mg-footer .mg-footer-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mg-footer .mg-footer-menu li {
  margin: 0;
}
.mg-footer .mg-footer-menu a {
  display: block;
}

.mg-footer-meta p {
  margin: 0 0 6px;
}
.mg-footer-meta p:last-child {
  margin-bottom: 0;
}
.mg-footer-meta a {
  color: var(--accent);
  padding: 0;
}
.mg-footer-disclaimer {
  font-style: italic;
}
.mg-footer-copy {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   Walker: la freccia dei dropdown e' un SVG, non piu' un glifo FontAwesome
   -------------------------------------------------------------------------- */

.dropdown-caret {
  display: inline-flex;
  align-items: center;
}
.dropdown-caret svg {
  width: 14px;
  height: 14px;
}