/* Stili delle pagine del tema (template-parts/pages/*.php e componenti di inc/components.php).
   Prima parte: le sezioni (slider, sezioni, hero, shop, premi, caroselli, colori degli oli…).
   Seconda parte: le strutture che hanno preso il posto del markup a blocchi core (mm-cols,
   mm-split, mm-cover, mm-buttons, figure), con le misure che quei blocchi producevano su questo
   sito (verificate in wp-includes/css/dist/block-library/style.min.css e negli style inline di
   WordPress sulla pagina live), poi le regole delle sezioni legate a quelle strutture. L'ordine
   conta: a parità di specificità la seconda parte prevale sulla prima. */

/* ---------- Sezioni ---------- */

/* Slider (slider.js): hero e servizi della home (.mm-slider) e caroselli prodotti
   (.mm-products ul.products). slider.js avvolge ogni fila in .mm-slider-wrap con i pulsanti. */
.mm-slider-wrap { position: relative; }
.mm-slider { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.mm-slider::-webkit-scrollbar { display: none; }
.mm-slider > * { flex: 0 0 100%; max-width: none; margin: 0; scroll-snap-align: start; }
.mm-slider__btn { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .35); color: #fff; cursor: pointer; transform: translateY(-50%); }
.mm-slider__btn svg { width: 20px; height: 20px; }
.mm-slider__btn--prev { left: 16px; }
.mm-slider__btn--next { right: 16px; }
/* Pausa/riprendi dell'autoplay (slider.js): stesso pulsante delle frecce, in basso al centro. */
.mm-slider__btn--pause { top: auto; bottom: 16px; left: calc(50% - 22px); transform: none; }

/* Sezioni riusabili */
/* padding-inline: sotto i 1150px circa (--mm-wrap + i due margin-inline:auto sotto) il
   max-width dei figli smette di generare margine automatico e il testo tocca il bordo dello
   schermo (bug mobile). Il padding qui garantisce sempre almeno --mm-gutter ai lati; non serve
   scontarlo dal max-width dei figli perché sotto quella soglia sono comunque larghi 100%. */
.mm-section { padding-block: 80px; padding-inline: var(--mm-gutter); }
.mm-section > * { max-width: var(--mm-wrap); margin-inline: auto; }
/* Etichetta piccola sopra i titoli di sezione (Shop, Magazine, Premi): oliva, serif, non maiuscolo */
.mm-eyebrow { margin: 0 0 8px; color: var(--mm-olive-dark); font: 400 1rem var(--mm-serif); }
/* Titolo di sezione in stile "display": Poppins bold maiuscolo (Shop, Magazine, Premi).
   I titoli grandi in serif (hero, "Ti aspettiamo", "Io sono arte...", "Il regalo perfetto...")
   restano lo stile h2 di base, senza questa classe. */
.mm-title { color: var(--mm-ink); font: 700 1.4rem var(--mm-sans); text-transform: uppercase; letter-spacing: .02em; }

/* Hero: slide a tutta larghezza con testo centrato, frecce in basso al centro */
.mm-hero h2 { color: #fff; }
.mm-hero .mm-eyebrow { color: #fff; font: 700 1rem var(--mm-sans); text-transform: uppercase; letter-spacing: .04em; }
/* slider.js mette i pulsanti come FRATELLI della track dentro .mm-slider-wrap, non come suoi
   discendenti: ".mm-hero .mm-slider__btn" non li trova mai. Li seleziona il fratello successivo.
   Il centraggio in basso è solo da tablet in su: sotto i 768px le frecce restano ancorate ai
   bordi come negli altri caroselli (regola generica già in @media max-width:767px). */
@media (min-width: 768px) {
  .mm-hero ~ .mm-slider__btn { top: auto; bottom: 32px; transform: none; }
  .mm-hero ~ .mm-slider__btn--prev { left: calc(50% - 52px); right: auto; }
  .mm-hero ~ .mm-slider__btn--next { left: calc(50% + 8px); right: auto; }
  /* hero in autoplay: pulsante pausa al centro, frecce ai suoi lati */
  .mm-slider--autoplay.mm-hero ~ .mm-slider__btn--prev { left: calc(50% - 74px); }
  .mm-slider--autoplay.mm-hero ~ .mm-slider__btn--next { left: calc(50% + 30px); }
}
/* I pulsanti dell'hero finiscono sul bordo bianco curvo qui sotto (la pausa sempre, al centro):
   sfondo scuro pieno come nello slider servizi, così icona e cerchio restano a contrasto sul bianco. */
.mm-hero ~ .mm-slider__btn { background: rgba(8, 8, 8, .7); }
/* Bordo bianco curvo in fondo all'hero, come sul live (nice-to-have via maschera CSS).
   Raggio verticale esplicito invece di sporgere oltre il viewport (causerebbe overflow-x). */
.mm-slider-wrap:has(.mm-hero)::after {
  content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: -1px; height: 60px;
  background: #fff; border-radius: 50% 50% 0 0 / 60px 60px 0 0; pointer-events: none;
}

/* Slider servizi: la freccia "next" cade sul pannello di testo bianco, lo sfondo grigio chiaro
   di base (nero al 35%) non basta contro il bianco. Sfondo scuro pieno per entrambe le frecce
   (stesso selettore "fratello successivo" dell'hero). */
.mm-services ~ .mm-slider__btn { background: rgba(8, 8, 8, .7); }

/* Citazione */
.mm-quote { text-align: center; font-family: var(--mm-serif); font-size: 1.2em; }
.mm-quote__author { color: var(--mm-olive-dark); font: 600 .9rem var(--mm-sans); letter-spacing: .1em; text-transform: uppercase; }

/* Shop: fascia grigio chiaro, eyebrow+titolo a sinistra e categorie a cerchi a destra */
.mm-shop { background: var(--mm-light); }
.mm-shop-top { margin-bottom: 20px; }
.mm-cats { display: flex; flex-wrap: wrap; gap: 20px; margin: 0; }
.mm-cats figure { width: 70px; margin: 0; text-align: center; }
.mm-cats img { display: block; width: 70px; height: 70px; border-radius: 50%; object-fit: cover; }
.mm-cats figcaption { margin-top: 8px; font: 600 .7rem var(--mm-sans); text-transform: uppercase; }

/* Premi: loghi in griglia 5x2 */
.mm-awards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 30px 20px; margin-block: 40px; text-align: center; }
.mm-awards figure { margin: 0; text-align: center; }
.mm-awards img { max-height: 110px; width: auto; }
.mm-awards figcaption { font: 600 .75rem var(--mm-sans); text-transform: uppercase; }

/* Carosello prodotti (muraglia_products_carousel(): shortcode [products] in .mm-products, reso
   scorrevole da slider.js). Card: woocommerce/content-product.php e woocommerce.css; qui il
   contenitore e la larghezza delle card nella fila. */
.mm-products { position: relative; margin-top: 40px; }
.mm-products ul.products {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding: 4px;
}
.mm-products ul.products::-webkit-scrollbar { display: none; }
.mm-products ul.products > li { flex: 0 0 calc(25% - 15px); scroll-snap-align: start; }
@media (min-width: 1240px) {
  .mm-products .mm-slider-wrap { margin-inline: 44px; }
  .mm-products .mm-slider__btn--prev { left: -44px; }
  .mm-products .mm-slider__btn--next { right: -44px; }
}

/* "Io sono arte che si versa": fascia lilla chiaro (colore campionato dal live) */
.mm-art { background: #EEEDF5; }

/* Magazine + regalo: due colonne, lista articoli senza immagine con separatori */
.mm-magazine-regalo { gap: 60px; }
.mm-posts-list { list-style: none; margin: 24px 0 0; padding: 0; }
.mm-posts-list li { border-top: 1px solid #e5e5e5; padding-block: 16px; }
.mm-posts-list li:first-child { border-top: 0; padding-top: 0; }
.mm-regalo { min-height: 280px; }

/* Pagine prodotto (il frantoio, il nostro olio, singoli oli): hero chiaro con testo + foto
   prodotto, box "note di gusto" con bordo, testo guida più grande, firma citazione. */
/* padding-inline: .mm-tasting non ha (a differenza di .mm-section) un elemento interno con
   max-width+margin:auto, quindi senza questo il testo tocca il bordo a ogni larghezza. */
.mm-tasting { background: var(--mm-light); padding-inline: var(--mm-gutter); }
.mm-tasting img { max-width: 340px; }
.mm-highlight { margin: 20px 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--mm-olive); font-weight: 600; }
.mm-lead { font: 400 1.5rem/1.4 var(--mm-serif); color: var(--mm-charcoal); }
.mm-signature { display: block; margin-top: 12px; font: 600 .8rem var(--mm-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--mm-olive-dark); }

/* Colore per tipo di olio, campionato dal live (stesso valore per lo sfondo della riga su
   il-nostro-olio e per l'hero della pagina di dettaglio, verificato via DOM sul live: sono
   identici). --mm-oil-text è scuro (--mm-ink) di default; passa a bianco dove il fondo non
   basta per l'AA su testo normale con inchiostro (solo Fumo: 3.84:1 con --mm-ink contro
   5.21:1 con bianco — gli altri 6 restano tra 6.9:1 e 14.2:1 con --mm-ink). */
.mm-oil--fruttato-intenso { --mm-oil: #c0c37b; --mm-oil-text: var(--mm-ink); }
.mm-oil--fruttato-medio   { --mm-oil: #c9c1c6; --mm-oil-text: var(--mm-ink); }
.mm-oil--biologico        { --mm-oil: #dadbbc; --mm-oil-text: var(--mm-ink); }
.mm-oil--denocciolato     { --mm-oil: #a09a50; --mm-oil-text: var(--mm-ink); }
.mm-oil--aromatici        { --mm-oil: #b5c6c3; --mm-oil-text: var(--mm-ink); }
.mm-oil--grand-cru        { --mm-oil: #c6a684; --mm-oil-text: var(--mm-ink); }
.mm-oil--fumo             { --mm-oil: #955f50; --mm-oil-text: #fff; }

.mm-tasting[class*="mm-oil--"] { background: var(--mm-oil); }
.mm-tasting[class*="mm-oil--"] :is(h1, h2, p) { color: var(--mm-oil-text); }
.mm-tasting[class*="mm-oil--"] .mm-highlight { border-left-color: var(--mm-oil-text); }

/* Citazione su foto (es. "i segreti della molitura a regola d'arte"): un'unica cover a tutta
   larghezza dietro sia alla galleria di foto sia al testo (due colonne nella stessa cover, come
   sul live: un solo background-image di sezione dietro a entrambe), testo bianco su cover scura. */
.mm-cover-quote h2, .mm-cover-quote h3, .mm-cover-quote .mm-lead { color: #fff; }
.mm-cover-quote .mm-signature { color: #fff; }

/* Fascia foto a tutta larghezza con titolo centrato, con o senza pulsante video (es. "Io sono un
   Capatosta", "Un ponte tra culture"). */
.mm-video-band h2, .mm-video-band h3 { color: #fff; }

@media (max-width: 1024px) {
  .mm-awards { grid-template-columns: repeat(3, 1fr); }
  .mm-products ul.products > li { flex-basis: calc(33.33% - 14px); }
}
@media (max-width: 767px) {
  .mm-section { padding-block: 50px; }
  .mm-awards { grid-template-columns: repeat(2, 1fr); }
  /* Il testo dello slider servizi occupa quasi tutta l'altezza dello slide: le frecce centrate
     verticalmente ci finiscono sopra. Le ancoriamo in basso (l'hero ha già le sue, sempre in basso). */
  .mm-slider__btn { top: auto; bottom: 24px; transform: none; }
  /* La regola generica sopra è per hero/servizi: nel carosello prodotti le card sono basse e quel
     bottom:24px porta la freccia "precedente" a sovrapporsi al prezzo/icona della prima card
     (stesso angolo in basso a sinistra). Restano centrate in verticale sulla riga di card. */
  .mm-products .mm-slider__btn { top: 50%; bottom: auto; transform: translateY(-50%); }
  .mm-products ul.products > li { flex-basis: calc(66% - 8px); }
  .mm-tasting img { max-width: 220px; }
  .mm-lead { font-size: 1.2rem; }
}

/* Iframe bloccati da Cookiebot (data-cookieblock-src) finché manca il consenso o Cookiebot non è
   caricato: nascosti invece di lasciare un riquadro vuoto; resta il link alternativo nel contenuto. */
iframe[data-cookieblock-src]:not([src]) { display: none; }

/* ---------- Strutture (al posto del markup a blocchi) e sezioni che le usano ---------- */

/* Sezione a tutta larghezza (wp:group alignfull mm-section): il margine laterale è già il
   padding-inline di .mm-section, che .mm-section > * limita a --mm-wrap; il padding di .mm-wrap
   lo raddoppierebbe (contenuto 40px più stretto dell'inner-container di prima). */
.mm-section > .mm-wrap { padding-inline: 0; }

/* Colonne affiancate (wp:columns): gap 2em, impilate sotto 782px come il core (flex-basis:100%
   sotto quella soglia). Di default le colonne si dividono lo spazio in parti uguali
   (flex-basis:0, flex-grow:1); una colonna con "--mm-col" impostato via style (es.
   style="--mm-col: 33%") non cresce oltre quella misura e le altre si dividono il resto —
   stessa logica del core, che azzera flex-grow sulla colonna con flex-basis inline.
   Come .wp-block-columns del core: colonne sempre stirate in altezza; gap e margin-bottom a
   specificità zero, così vincono le regole di sezione (es. .mm-magazine-regalo, .mm-shop-top). */
.mm-cols { display: flex; flex-wrap: wrap; align-items: normal; }
:where(.mm-cols) { gap: 2em; margin-bottom: 1.75em; }
.mm-col { flex-grow: 1; min-width: 0; overflow-wrap: break-word; word-break: break-word; }
@media (max-width: 781px) {
  .mm-col { flex-basis: 100%; }
}
@media (min-width: 782px) {
  .mm-cols { flex-wrap: nowrap; }
  .mm-col { flex-basis: 0; }
  .mm-col[style*="--mm-col"] { flex-basis: var(--mm-col); flex-grow: 0; }
}

/* Immagine + testo affiancati (wp:media-text): 50/50, impilati sotto 600px come il core.
   Il markup ha sempre media poi body (mm-split--reverse inverte solo le colonne via CSS, come
   fa il core con has-media-on-the-right). Foto sempre a tutta altezza in cover (opzione
   "Riempi"/imageFill, l'unica usata su questo sito: vedi is-image-fill-element nel core). */
/* --mm-split imposta la larghezza della colonna media quando non è 50/50 (es. il regalo della
   home, mediaWidth 40 nel blocco originale: style="--mm-split: 40%"), come --mm-col per le colonne. */
.mm-split { display: grid; grid-template-columns: var(--mm-split, 50%) 1fr; }
.mm-split__media { grid-column: 1; grid-row: 1; position: relative; height: 100%; min-height: 250px; margin: 0; }
.mm-split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mm-split__body { grid-column: 2; grid-row: 1; align-self: center; padding: 0 8%; word-break: break-word; }
.mm-split--reverse { grid-template-columns: 1fr var(--mm-split, 50%); }
.mm-split--reverse .mm-split__media { grid-column: 2; }
.mm-split--reverse .mm-split__body { grid-column: 1; }
@media (max-width: 600px) {
  .mm-split, .mm-split--reverse { grid-template-columns: 100%; }
  .mm-split__media, .mm-split--reverse .mm-split__media { grid-column: 1; grid-row: 1; }
  .mm-split__body, .mm-split--reverse .mm-split__body { grid-column: 1; grid-row: 2; }
}

/* Immagine a tutto riquadro con velo scuro e contenuto sopra (wp:cover). --mm-dim imposta
   l'opacità del velo (dimRatio del core in decimi, es. style="--mm-dim: .4"); default .5 come
   il core (has-background-dim senza classe -dim-NN). min-height 430px = default del core. */
.mm-cover { position: relative; display: flex; align-items: center; justify-content: center; min-height: 430px; overflow: hidden; padding: 1em; color: #fff; }
.mm-cover__bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.mm-cover::before { content: ""; position: absolute; inset: 0; z-index: 1; background: #000; opacity: var(--mm-dim, .5); }
.mm-cover__inner { position: relative; z-index: 2; width: 100%; }

/* Riga di pulsanti (wp:buttons): gap e impilamento come il core (is-layout-flex: display:flex,
   flex-wrap:wrap, align-items:center, gap:.5em); margin-top:30px solo dentro .mm-section (fuori,
   es. hero, righe degli oli, citazioni su foto, lo spazio sopra è solo il margine del paragrafo
   precedente). Centrata dove il blocco originale aveva justifyContent:center e nell'hero. */
.mm-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; }
.mm-section .mm-buttons { margin-top: 30px; }
.mm-buttons--center, .mm-hero .mm-buttons { justify-content: center; }

/* Immagini (wp:image → <figure> + <img>): come .wp-block-image del core, immagine allineata in
   basso (niente spazio della linea di testo sotto), link inline-block, didascalia .5em/1em
   (specificità zero: vincono le regole di sezione, es. .mm-cats figcaption). */
.mm-page--tpl figure img { vertical-align: bottom; }
:where(.mm-page--tpl figure) > a { display: inline-block; }
:where(.mm-page--tpl figcaption) { margin: .5em 0 1em; }
/* Righe di figure (gruppi con layout flex nel markup a blocchi: categorie dello Shop, premi):
   il layout flex del core le centrava in verticale (align-items:center). */
.mm-cats, .mm-awards { align-items: center; }

/* Slider (hero, servizi): slide centrate in verticale nella fila, come faceva il layout flex del
   gruppo a blocchi (le slide più basse non si allungano fino alla più alta). */
.mm-slider { align-items: center; }

/* Hero: sei slide mm-cover in un mm-slider--autoplay (frecce, pausa e bordo curvo sopra). Velatura
   radiale solo dietro al testo, non sull'intera foto, che resta chiara come sul live (il velo
   della cover resta a .4 su tutte le slide). */
.mm-hero .mm-cover { min-height: 100vh; padding: 180px 8vw 100px; }
.mm-hero .mm-cover__inner {
  max-width: 640px; margin-inline: auto; color: #fff; text-align: center;
  padding: 32px 40px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .65) 45%, rgba(0, 0, 0, 0) 75%);
}
@media (max-width: 767px) {
  .mm-hero .mm-cover { padding: 140px 24px 90px; }
}

/* Slider servizi: immagine a sinistra, contenuto centrato su bianco. */
.mm-services .mm-split { min-height: 600px; }
.mm-services .mm-split__body {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 60px 8vw;
}

/* "Io sono arte che si versa": altezza minima della riga (sfondo nella prima parte). */
.mm-art .mm-split { min-height: 480px; }

/* Magazine: elenco titoli con separatori (sostituisce wp:latest-posts). */
.mm-posts-list a { display: block; font: 400 1.1rem var(--mm-serif); text-decoration: none; }
/* Regalo (nella colonna Magazine): foto con angoli arrotondati, titolo più piccolo. */
.mm-regalo .mm-split__media img { border-radius: 8px; }
.mm-regalo h2 { font-size: 1.3rem; }

@media (max-width: 600px) {
  .mm-services .mm-split,
  .mm-art .mm-split,
  .mm-regalo { min-height: auto; }
  .mm-services .mm-split__media,
  .mm-art .mm-split__media { min-height: 260px; }
  .mm-regalo .mm-split__media { min-height: 200px; }
  .mm-services .mm-split__body { padding: 32px 24px; }
}

/* Il frantoio e gli oli: sezioni che nel markup a blocchi originale non erano "mm-section"
   (niente padding-block/max-width generici, vedi .mm-tasting) — restano div semplici, non
   <section class="mm-section">, come l'hero-slider della home. */
.mm-tasting .mm-col:last-child { display: flex; align-items: center; justify-content: center; }

.mm-video-band .mm-cover { min-height: 480px; }
.mm-video-band .mm-cover__inner { max-width: 640px; margin-inline: auto; color: #fff; text-align: center; }
.mm-video-band .mm-buttons { justify-content: center; margin-top: 24px; }

.mm-cover-quote .mm-cover { min-height: 560px; }
.mm-cover-quote .mm-cover__inner { width: 100%; max-width: none; padding: 48px 6vw; color: #fff; }
.mm-story-gallery figure { margin: 0 0 16px; }
.mm-story-gallery figure:last-child { margin-bottom: 0; }

/* il-nostro-olio: righe immagine/testo, una per tipo di olio, sfondo colore-per-olio. A differenza
   del resto del sito le foto NON sono a tutta altezza (niente opzione "Riempi" nel blocco
   originale): centrate, dimensione naturale con altezza massima — si sovrascrive la foto in cover
   di .mm-split__media di default. */
.mm-oil-rows .mm-split { min-height: 420px; align-items: stretch; margin-bottom: 0; background: var(--mm-light); }
.mm-oil-rows .mm-split[class*="mm-oil--"] { background: var(--mm-oil); }
.mm-oil-rows .mm-split[class*="mm-oil--"] :is(h2, p) { color: var(--mm-oil-text); }
.mm-oil-rows .mm-split__media { position: static; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 40px; }
.mm-oil-rows .mm-split__media img { position: static; width: auto; height: auto; max-height: 320px; object-fit: contain; }
.mm-oil-rows .mm-split__body { padding: 60px 6vw; }

@media (max-width: 767px) {
  .mm-tasting .mm-col:last-child { padding-top: 24px; }
  .mm-cover-quote .mm-cover, .mm-video-band .mm-cover { min-height: 360px; }
}
@media (max-width: 600px) {
  .mm-oil-rows .mm-split { min-height: auto; }
  .mm-oil-rows .mm-split__media img { max-height: 200px; }
  .mm-oil-rows .mm-split__body { padding: 32px 24px; }
}

/* Griglia articoli (muraglia_posts_list variante 'grid', es. elisir-di-lunga-vita): card con
   immagine, titolo, estratto e "Scopri di più »", al posto del Query Loop a card. */
.mm-posts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; list-style: none; margin: 0; padding: 0; }
.mm-posts-grid__item { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, .08); }
.mm-posts-grid__media { margin: 0; }
.mm-posts-grid__media img { display: block; width: 100%; height: 220px; object-fit: cover; }
.mm-posts-grid__title { margin: 0; padding: 20px 20px 4px; font: 400 1.1rem var(--mm-serif); }
.mm-posts-grid__title a { text-decoration: none; color: var(--mm-ink); }
.mm-posts-grid__excerpt { margin: 0; padding: 0 20px; font-size: .9rem; color: var(--mm-charcoal); }
.mm-posts-grid__more { display: block; padding: 8px 20px 20px; font: 700 .8rem var(--mm-sans); text-transform: uppercase; letter-spacing: .02em; color: var(--mm-olive-dark); text-decoration: none; }
@media (max-width: 767px) {
  .mm-posts-grid { grid-template-columns: 1fr; }
}

/* Separatore (wp:separator, sfoglia-il-catalogo), al posto di .wp-block-separator del core
   (stesso bordo, margine di default del browser). */
.mm-separator { border: none; border-top: 2px solid currentColor; margin: .5em 0; }

/* Hero di servizio-clienti e sono-un-consumatore (anche sono-un-rivenditore, stesso template):
   foto a sinistra a piena altezza e testo a destra allineato a sinistra (non centrato, a
   differenza di .mm-services). */
.mm-contact-hero .mm-split { min-height: 480px; margin-bottom: 0; }
.mm-contact-hero .mm-split__body { display: flex; flex-direction: column; justify-content: center; padding: 60px 8vw; }
.mm-contact-hero .mm-buttons { margin-top: 10px; }
@media (max-width: 600px) {
  .mm-contact-hero .mm-split { min-height: auto; }
  .mm-contact-hero .mm-split__media { min-height: 260px; }
  .mm-contact-hero .mm-split__body { padding: 32px 24px; }
}

/* i-nostri-prodotti: immagine decorativa accanto a un carosello (Gli Orci, Lattine e bag in box),
   mm-cols con una figura semplice invece di testo/carosello nell'altra colonna — il browser
   darebbe alla figure il suo margine di default (1em 40px). */
.mm-cols--figure figure { margin: 0; }
/* Gli Orci: testo e carosello a sinistra, immagine a destra alta quanto entrambi. Da 782px una
   griglia con le stesse misure delle due mm-col affiancate (colonne uguali, gap 2em, 40px tra
   testo e carosello come il margine di .mm-products); sotto, le colonne si impilano nell'ordine del
   markup — testo, immagine, carosello, come sul live — con il solo spazio tra le colonne. */
.mm-cols--aside .mm-products { margin-top: 0; }
@media (min-width: 782px) {
  .mm-cols--aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto 1fr; gap: 40px 2em; }
  .mm-cols--aside > :nth-child(2) { grid-area: 1 / 2 / 3; }
  .mm-cols--aside > :first-child > :last-child { margin-bottom: 0; }
}

/* Carosello .mm-products dentro una mm-col: il titolo della card non eredita più
   l'overflow-wrap/word-break di .mm-col (pensato per titoli e paragrafi lunghi, non per la card
   che già va a capo alle parole — altrimenti spezza le parole a metà). La card (pensata per una
   corsia a piena larghezza, 4 per riga) va a due per riga quando le colonne sono affiancate,
   in qualunque colonna: al 25% di una colonna sarebbe troppo stretta (118px in design-a-tavola,
   con prezzo e icona sovrapposti). Sotto 782px le colonne si impilano e vale la larghezza
   standard secondo il viewport (prima parte). */
.mm-col .mm-products { overflow-wrap: normal; word-break: normal; }
@media (min-width: 782px) {
  .mm-col .mm-products ul.products > li { flex-basis: calc(50% - 10px); }
}