/* ==========================================================================
   MODELLISMO ROSSI — RESTYLING 2026
   File caricato SOLO in modalita anteprima (admin oppure cookie mr_preview).
   Ogni regola parte da body.mr-preview: fuori dall'anteprima il sito resta
   identico a prima, bit per bit.

   INDICE
     1. Token
     2. Tipografia
     3. Pulsanti
     4. Link
     5. Campi e form
     6. Stati semantici (disponibilita) — tonalita armonizzate
   ========================================================================== */


/* ==========================================================================
   1. TOKEN
   ========================================================================== */
:root {
	/* Azioni e accenti: UN SOLO rosso per tutto il sito */
	--mr-rosso: #C41E2A;
	--mr-rosso-hover: #8E1520;

	/* Superfici scure */
	--mr-nero: #16181C;
	--mr-footer: #0F1013;

	/* Superfici chiare e bordi */
	--mr-grigio-chiaro: #F3F2EF;
	--mr-bordo: #E6E4DF;
	/* Il bordo dei campi non puo' essere lo stesso dei filetti: su fondo
	   bianco #E6E4DF ha un contrasto di 1,2:1 e il campo sparisce. Questo
	   sta a 3:1, la soglia minima per i bordi degli elementi di modulo. */
	--mr-bordo-campo: #9B968E;
	--mr-testo-secondario: #5A5F66;

	/* Raggi */
	--mr-radius-btn: 10px;
	--mr-radius-card: 14px;

	/* Derivati, per non ripetere valori sparsi nel file */
	--mr-testo: var(--mr-nero);
	--mr-bianco: #FFFFFF;
	--mr-ombra-card: 0 2px 10px rgba(22, 24, 28, .06);
	--mr-ombra-card-hover: 0 8px 24px rgba(22, 24, 28, .10);
	--mr-transizione: .18s ease;

	/* Famiglie tipografiche */
	--mr-font-display: "Barlow Condensed", "Oswald", Impact, sans-serif;
	--mr-font-testo: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
}


/* ==========================================================================
   2. TIPOGRAFIA
   Archivo per la lettura, Barlow Condensed per i titoli e i numeri grandi.
   ========================================================================== */
body.mr-preview,
body.mr-preview button,
body.mr-preview input,
body.mr-preview select,
body.mr-preview textarea {
	font-family: var(--mr-font-testo);
}

body.mr-preview {
	color: var(--mr-testo);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Titoli: condensato, pesante, crenatura stretta come nel mockup */
body.mr-preview h1,
body.mr-preview h2,
body.mr-preview h3,
body.mr-preview h4,
body.mr-preview .entry-title,
body.mr-preview .page-title,
body.mr-preview .product_title,
body.mr-preview .woocommerce-products-header__title,
body.mr-preview .widget-title,
body.mr-preview .cart_totals h2,
body.mr-preview #order_review_heading,
body.mr-preview .woocommerce-billing-fields h3,
body.mr-preview .woocommerce-column__title {
	font-family: var(--mr-font-display);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.08;
	color: var(--mr-testo);
}

/* I titoli di sezione piu grandi vanno in 800, come da mockup */
body.mr-preview h1,
body.mr-preview .entry-title,
body.mr-preview .page-title,
body.mr-preview .woocommerce-products-header__title {
	font-weight: 800;
}

/* I nomi dei prodotti restano in Archivo: in condensato maiuscolo
   diventerebbero illeggibili (sono codici lunghi tipo "TAM58751"). */
body.mr-preview .woocommerce-loop-product__title,
body.mr-preview .wc-product__title,
body.mr-preview .wc-product__title a,
body.mr-preview ul.products li.product h2,
body.mr-preview ul.products li.product h3 {
	font-family: var(--mr-font-testo);
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.35;
}

/* Prezzi: condensato, pesante — e un solo rosso per il prezzo attivo */
body.mr-preview .price,
body.mr-preview .amount,
body.mr-preview .woocommerce-Price-amount {
	font-family: var(--mr-font-display);
	font-weight: 700;
	letter-spacing: 0;
}

body.mr-preview .summary .price,
body.mr-preview .summary .price .woocommerce-Price-amount {
	color: var(--mr-rosso);
}

/* Prezzo barrato: grigio, non rosso, cosi lo sconto si legge subito */
body.mr-preview .price del,
body.mr-preview .price del .woocommerce-Price-amount {
	color: var(--mr-testo-secondario);
	font-weight: 400;
	opacity: 1;
}

body.mr-preview .price ins,
body.mr-preview .price ins .woocommerce-Price-amount {
	text-decoration: none;
	color: var(--mr-rosso);
}


/* ==========================================================================
   3. PULSANTI
   Un unico rosso pieno per le azioni. Scavalca sia il CSS del Customizer
   (#871717) sia i blocchi <style> stampati in wp_footer, che usano
   !important: qui la specificita e' piu alta grazie a body.mr-preview.

   ATTENZIONE (vale per tutto il file): classi come .woocommerce,
   .single-product, .woocommerce-cart, .woocommerce-checkout stanno SUL
   BODY, non su un contenitore interno. Quindi "body.mr-preview .woocommerce"
   cerca un discendente che non esiste e non applica nulla: vanno
   concatenate al body ("body.mr-preview.woocommerce") oppure, meglio
   ancora, va usato un selettore che non dipende da loro e che alzi la
   specificita aggiungendo il nome del tag (es. "button.button.alt").
   ========================================================================== */
body.mr-preview .button,
body.mr-preview a.button,
body.mr-preview button.button,
body.mr-preview input.button,
body.mr-preview button[type="submit"],
body.mr-preview input[type="submit"],
body.mr-preview button.button.alt,
body.mr-preview a.button.alt,
body.mr-preview input.button.alt,
body.mr-preview a.button.add_to_cart_button,
body.mr-preview button.button.add_to_cart_button,
body.mr-preview a.button.checkout,
body.mr-preview a.button.product_type_variable,
body.mr-preview a.button.product_type_simple,
body.mr-preview .products .product a.button.add_to_cart_button,
body.mr-preview .products .product a.button.product_type_simple,
body.mr-preview .products .product a.button.product_type_variable,
body.mr-preview .product .cart button.single_add_to_cart_button.button,
body.mr-preview .product .cart input.single_add_to_cart_button.button,
body.mr-preview #btn_avvisami,
body.mr-preview button.btn_avvisami_ajax,
body.mr-preview button.trigger-login-overlay,
body.mr-preview .avvisami-container button {
	background-color: var(--mr-rosso) !important;
	background-image: none !important;
	border: 1px solid var(--mr-rosso) !important;
	color: var(--mr-bianco) !important;
	border-radius: var(--mr-radius-btn) !important;
	font-family: var(--mr-font-testo);
	font-weight: 600;
	letter-spacing: .01em;
	text-transform: none;
	box-shadow: none;
	transition: background-color var(--mr-transizione), border-color var(--mr-transizione);
}

body.mr-preview .button:hover,
body.mr-preview a.button:hover,
body.mr-preview button.button:hover,
body.mr-preview input.button:hover,
body.mr-preview button[type="submit"]:hover,
body.mr-preview input[type="submit"]:hover,
body.mr-preview button.button.alt:hover,
body.mr-preview a.button.alt:hover,
body.mr-preview a.button.add_to_cart_button:hover,
body.mr-preview button.button.add_to_cart_button:hover,
body.mr-preview a.button.checkout:hover,
body.mr-preview .products .product a.button.add_to_cart_button:hover,
body.mr-preview .products .product a.button.product_type_simple:hover,
body.mr-preview .products .product a.button.product_type_variable:hover,
body.mr-preview .product .cart button.single_add_to_cart_button.button:hover,
body.mr-preview #btn_avvisami:hover,
body.mr-preview button.btn_avvisami_ajax:hover,
body.mr-preview button.trigger-login-overlay:hover {
	background-color: var(--mr-rosso-hover) !important;
	border-color: var(--mr-rosso-hover) !important;
	color: var(--mr-bianco) !important;
}

/* "Visualizza carrello": era blu (#235787), stampato in wp_footer con
   !important. Diventa secondario in outline: stessa famiglia cromatica
   dell'azione principale, ma chiaramente subordinato. */
body.mr-preview .woocommerce ul.products.wc-grid-view li.product .wc-product__add_to_cart a.added_to_cart,
body.mr-preview .woocommerce a.added_to_cart,
body.mr-preview a.added_to_cart {
	background-color: transparent !important;
	background: transparent !important;
	color: var(--mr-rosso) !important;
	border: 1px solid var(--mr-rosso) !important;
	border-radius: var(--mr-radius-btn) !important;
	font-weight: 600;
}

body.mr-preview .woocommerce ul.products.wc-grid-view li.product .wc-product__add_to_cart a.added_to_cart:hover,
body.mr-preview .woocommerce a.added_to_cart:hover,
body.mr-preview a.added_to_cart:hover {
	background-color: var(--mr-rosso) !important;
	background: var(--mr-rosso) !important;
	color: var(--mr-bianco) !important;
	border-color: var(--mr-rosso) !important;
}

/* Badge contatore carrello nell'header */
body.mr-preview .item--wc_cart .cart-icon .cart-qty .customify-wc-total-qty {
	background-color: var(--mr-rosso) !important;
	color: var(--mr-bianco) !important;
}


/* ==========================================================================
   4. LINK
   Via i blu sparsi (#4ca1af, #2c5b88, #235786, #34779a, #007aff…):
   un solo rosso per i link di azione.
   ========================================================================== */
body.mr-preview a {
	color: var(--mr-rosso);
	transition: color var(--mr-transizione);
}

body.mr-preview a:hover,
body.mr-preview a:focus {
	color: var(--mr-rosso-hover);
}

/* I link dentro i titoli e le card restano del colore del testo:
   diventerebbero una macchia rossa illeggibile. */
body.mr-preview h1 a,
body.mr-preview h2 a,
body.mr-preview h3 a,
body.mr-preview .woocommerce-loop-product__title a,
body.mr-preview .wc-product__title a,
body.mr-preview ul.products li.product a:not(.button):not(.added_to_cart) {
	color: inherit;
}

body.mr-preview ul.products li.product .wc-product__title a:hover {
	color: var(--mr-rosso);
}


/* ==========================================================================
   5. CAMPI E FORM
   ========================================================================== */
body.mr-preview input[type="text"],
body.mr-preview input[type="email"],
body.mr-preview input[type="tel"],
body.mr-preview input[type="url"],
body.mr-preview input[type="password"],
body.mr-preview input[type="number"],
body.mr-preview input[type="search"],
body.mr-preview textarea,
body.mr-preview select,
body.mr-preview .select2-container .select2-selection--single {
	border: 1px solid var(--mr-bordo-campo);
	border-radius: var(--mr-radius-btn);
	background-color: var(--mr-bianco);
	color: var(--mr-testo);
	font-family: var(--mr-font-testo);
	transition: border-color var(--mr-transizione), box-shadow var(--mr-transizione);
}

body.mr-preview input[type="text"]:focus,
body.mr-preview input[type="email"]:focus,
body.mr-preview input[type="tel"]:focus,
body.mr-preview input[type="password"]:focus,
body.mr-preview input[type="number"]:focus,
body.mr-preview input[type="search"]:focus,
body.mr-preview textarea:focus,
body.mr-preview select:focus {
	border-color: var(--mr-rosso);
	box-shadow: 0 0 0 3px rgba(196, 30, 42, .12);
	outline: none;
}

body.mr-preview ::placeholder {
	color: var(--mr-testo-secondario);
	opacity: 1;
}

/* Asterisco dei campi obbligatori: stesso rosso del resto */
body.mr-preview .required,
body.mr-preview abbr.required {
	color: var(--mr-rosso);
	border: none;
	text-decoration: none;
}


/* ==========================================================================
   6. STATI SEMANTICI — DISPONIBILITA
   Restano verde/arancio/rosso (sono informazione, non stile): qui vengono
   solo armonizzati nelle tonalita, piu sobri e coerenti con la palette.
   ========================================================================== */
body.mr-preview .custom-disponibilita-wrapper {
	background-color: var(--mr-grigio-chiaro);
	border: 1px solid var(--mr-bordo);
	border-radius: var(--mr-radius-btn);
}

body.mr-preview .disponibilita-label {
	color: var(--mr-testo-secondario);
	font-weight: 600;
}

body.mr-preview .status-ottima,
body.mr-preview .status-buona,
body.mr-preview .status-media {
	color: #1F8F4E;
}

body.mr-preview .status-in-arrivo {
	color: #B9701A;
}

body.mr-preview .status-scarsa {
	color: #C2561B;
}

body.mr-preview .status-non-disponibile {
	color: var(--mr-rosso);
}


/* ==========================================================================
   7. BARRA SUPERIORE
   Stampata in anteprima da un hook su wp_body_open (vedi functions.php).
   ========================================================================== */
body.mr-preview .mr-topbar {
	background: var(--mr-nero);
	color: #C9CCD1;
	font-family: var(--mr-font-testo);
	font-size: 12.5px;
	line-height: 1.35;
}

body.mr-preview .mr-topbar__inner {
	max-width: 1248px;
	margin: 0 auto;
	padding: 9px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
}

body.mr-preview .mr-topbar a {
	color: var(--mr-bianco);
	text-decoration: none;
}

body.mr-preview .mr-topbar a:hover {
	color: #FF6B76;
}

body.mr-preview .mr-topbar__sep {
	opacity: .35;
	margin: 0 9px;
}

body.mr-preview .mr-topbar__right {
	display: flex;
	align-items: center;
	gap: 20px;
}

body.mr-preview .mr-topbar__tel {
	font-weight: 600;
}

body.mr-preview .mr-topbar__dji {
	font-weight: 600;
}

body.mr-preview .mr-topbar__dji::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--mr-rosso);
	margin-right: 7px;
	vertical-align: 1px;
}


/* ==========================================================================
   8. HEADER DESKTOP — ricerca a sinistra, logo al centro, carrello a destra
   La riga dell'header e' una CSS grid a 3 colonne (.row-v2), quindi le
   colonne si riordinano con grid-column senza toccare il builder di
   Customify ne' spostare nulla nel pannello del tema.
   Le due colonne laterali sono 1fr uguali: cosi' il logo, che sta in
   quella di mezzo, cade esattamente a meta' della riga qualunque sia la
   larghezza della ricerca e del carrello.
   ========================================================================== */
@media (min-width: 1025px) {

	body.mr-preview #cb-row--header-top .cb-row--desktop .row-v2 {
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
		align-items: center;
		gap: 26px;
	}

	/* logo: al centro della riga */
	body.mr-preview #cb-row--header-top .cb-row--desktop .col-v2-center {
		grid-column: 2 !important;
		grid-row: 1 !important;
		justify-content: center !important;
	}

	/* ricerca: a sinistra */
	body.mr-preview #cb-row--header-top .cb-row--desktop .col-v2-left {
		grid-column: 1 !important;
		grid-row: 1 !important;
		justify-content: flex-start !important;
	}

	/* la ricerca non deve allargarsi oltre misura, altrimenti schiaccia
	   il logo: la colonna resta 1fr, il campo si ferma a 420px */
	body.mr-preview #cb-row--header-top .cb-row--desktop .col-v2-left > #search_box,
	body.mr-preview #cb-row--header-top .cb-row--desktop .col-v2-left > .item--inner {
		flex: 0 1 auto;
		width: 100%;
		max-width: 420px;
	}

	/* carrello: resta a destra */
	body.mr-preview #cb-row--header-top .cb-row--desktop .col-v2-right {
		grid-column: 3 !important;
		grid-row: 1 !important;
		justify-content: flex-end !important;
	}

	body.mr-preview #cb-row--header-top .header--row-inner {
		padding: 14px 0;
	}

	body.mr-preview #logo .site-branding img,
	body.mr-preview .site-header .site-branding img {
		max-height: 60px;
		width: auto;
	}

	/* La ricerca diventa l'elemento centrale dell'header */
	body.mr-preview .header-search_box-item,
	body.mr-preview .header-search_box-item .header-search-form,
	body.mr-preview .header-search_box-item .search-form-fields {
		width: 100%;
		max-width: none;
	}

	body.mr-preview .header-search_box-item .search-field {
		width: 100%;
		height: 48px;
		font-size: 15px;
	}

	/* Menu: riga a tutta larghezza, allineato al centro */
	body.mr-preview #cb-row--header-main .cb-row--desktop .row-v2 {
		grid-template-columns: 0px minmax(0, 1fr) 0px !important;
	}

	body.mr-preview #cb-row--header-main .cb-row--desktop .col-v2-center {
		justify-content: center !important;
	}
	body.mr-preview #cb-row--header-main .cb-row--desktop .col-v2-center > .item--inner {
		margin-left: auto !important;
		margin-right: auto !important;
	}
	body.mr-preview #cb-row--header-main #mega-menu-wrap-menu-1 > ul.mega-menu {
		display: flex !important;
		justify-content: center !important;
		align-items: center;
	}

	body.mr-preview #cb-row--header-main .header--row-inner {
		border-top: 1px solid var(--mr-bordo);
	}
}

/* Campo di ricerca e pulsante: un blocco unico arrotondato.
   Attenzione: .search-submit NON sta dentro .search-form-fields, e' un
   fratello dentro il form. Quindi il contenitore flex dev'essere il form
   e i due pezzi si arrotondano a meta' ciascuno. */
body.mr-preview .header-search_box-item .header-search-form {
	display: flex;
	align-items: stretch;
	width: 100%;
}

body.mr-preview .header-search_box-item .search-form-fields,
body.mr-preview .dark-mode .header-search_box-item .search-form-fields {
	flex: 1 1 auto;
	border: 1px solid var(--mr-bordo);
	border-right: none;
	border-radius: var(--mr-radius-btn) 0 0 var(--mr-radius-btn);
	overflow: hidden;
	display: flex;
	align-items: stretch;
	background: var(--mr-bianco);
}

body.mr-preview .header-search_box-item .search-field {
	border: none;
	border-radius: 0;
	box-shadow: none;
}

body.mr-preview .header-search_box-item .search-field:focus {
	box-shadow: none;
}

body.mr-preview .header-search_box-item .search-submit,
body.mr-preview .header-search_box-item .header-search-form button.search-submit {
	margin-left: 0 !important;
	background: var(--mr-rosso) !important;
	color: var(--mr-bianco);
	/* !important necessario: la regola generica dei pulsanti (sez. 3)
	   impone gia' border-radius con !important su button[type=submit]. */
	border: 1px solid var(--mr-rosso) !important;
	border-radius: 0 var(--mr-radius-btn) var(--mr-radius-btn) 0 !important;
	width: 54px;
	flex: 0 0 54px;
	cursor: pointer;
	transition: background-color var(--mr-transizione);
}

body.mr-preview .header-search_box-item .search-submit:hover {
	background: var(--mr-rosso-hover);
}

/* Carrello: pastiglia rossa */
body.mr-preview .builder-header-wc_cart-item a.cart-item-link {
	background: var(--mr-rosso);
	border-radius: var(--mr-radius-btn);
	padding: 11px 16px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	transition: background-color var(--mr-transizione);
}

body.mr-preview .builder-header-wc_cart-item a.cart-item-link:hover {
	background: var(--mr-rosso-hover);
}

body.mr-preview .builder-header-wc_cart-item .customify-wc-sub-total,
body.mr-preview .builder-header-wc_cart-item .woocommerce-Price-amount {
	color: var(--mr-bianco) !important;
	font-family: var(--mr-font-display);
	font-weight: 700;
	font-size: 15px;
}

/* L'icona del carrello usa FontAwesome: va lasciato il suo font,
   altrimenti il glifo diventa un quadratino vuoto. */
body.mr-preview .builder-header-wc_cart-item .cart-icon,
body.mr-preview .builder-header-wc_cart-item .cart-icon i {
	color: var(--mr-bianco) !important;
	font-size: 15px;
}


/* ==========================================================================
   9. MENU PRINCIPALE (Max Mega Menu)
   Si sovrascrive solo l'aspetto: nessuna modifica alle impostazioni del
   plugin e nessuna modifica alle voci. I selettori di MMM hanno 2 id,
   quindi serve body.mr-preview davanti per superarli.
   ========================================================================== */
body.mr-preview #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link {
	font-family: var(--mr-font-testo) !important;
	font-weight: 600 !important;
	font-size: 14.5px !important;
	color: var(--mr-testo) !important;
	background: transparent !important;
	border-radius: 0 !important;
	position: relative;
	text-transform: none !important;
}

body.mr-preview #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item:hover > a.mega-menu-link,
body.mr-preview #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {
	color: var(--mr-rosso) !important;
	background: transparent !important;
}

/* Voce attiva: rossa con sottolineatura, al posto della pastiglia piena */
body.mr-preview #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
body.mr-preview #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link,
body.mr-preview #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item.mega-current_page_item > a.mega-menu-link {
	color: var(--mr-rosso) !important;
	background: transparent !important;
}

body.mr-preview #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link::after,
body.mr-preview #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item.mega-current_page_item > a.mega-menu-link::after {
	content: "";
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 8px;
	height: 3px;
	border-radius: 2px;
	background: var(--mr-rosso);
}


/* ==========================================================================
   10. HEADER MOBILE — compatto, ricerca a tutta larghezza sotto il logo
   ========================================================================== */
@media (max-width: 1024px) {

	/* Il titolo rosso "MODELLISMO ROSSI" ripete il logo che sta
	   appena sopra: in anteprima si toglie per compattare l'header. */
	body.mr-preview #cb-row--header-main .cb-row--mobile {
		display: none !important;
	}

	body.mr-preview #cb-row--header-bottom .cb-row--mobile .row-v2 {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	body.mr-preview #cb-row--header-bottom .col-v2-center {
		justify-content: stretch !important;
	}

	/* La catena e': col-v2-center > #search_box.item--inner >
	   .header-search_box-item > form. Va forzata a larghezza piena
	   tutta la catena, altrimenti il form si ferma a meta' colonna. */
	body.mr-preview #cb-row--header-bottom .col-v2-center > .item--inner,
	body.mr-preview #cb-row--header-bottom #search_box,
	body.mr-preview #cb-row--header-bottom .header-search_box-item,
	body.mr-preview #cb-row--header-bottom .header-search-form,
	body.mr-preview #cb-row--header-bottom .search-form-fields {
		width: 100% !important;
		max-width: none !important;
		flex: 1 1 auto;
	}

	/* Il carrello su mobile mostra la sola icona: pastiglia piu compatta */
	body.mr-preview .builder-header-wc_cart-item a.cart-item-link {
		padding: 9px 12px;
	}

	body.mr-preview #cb-row--header-bottom .search-field {
		width: 100% !important;
		height: 44px;
	}

	body.mr-preview #logo .site-branding img,
	body.mr-preview .site-header .site-branding img {
		max-height: 46px;
		width: auto;
	}

	body.mr-preview .mr-topbar__inner {
		justify-content: center;
		text-align: center;
		gap: 8px;
		padding: 7px 14px;
		font-size: 11.5px;
	}

	body.mr-preview .mr-topbar__luogo,
	body.mr-preview .mr-topbar__sep {
		display: none;
	}
}


/* ==========================================================================
   11. FOOTER SCURO
   Il Customizer forza "background: transparent !important" sulle righe del
   footer e "color:#555 !important" su .footer--row-inner.dark-mode *, quindi
   qui serve una specificita piu alta (body.mr-preview davanti) e !important.
   Le colonne vengono riordinate con grid-column: contatti, link, social,
   mappa — senza toccare il Footer Builder di Customify.
   ========================================================================== */
body.mr-preview #site-footer,
body.mr-preview #site-footer .footer--row-inner,
body.mr-preview #site-footer .footer-main-inner,
body.mr-preview #site-footer .footer-bottom-inner,
body.mr-preview #site-footer .customify-grid,
body.mr-preview #site-footer .builder-item {
	background-color: var(--mr-footer) !important;
}

body.mr-preview #site-footer {
	color: #C9CCD1;
	border-top: 3px solid var(--mr-rosso);
}

body.mr-preview #site-footer p,
body.mr-preview #site-footer li,
body.mr-preview #site-footer span,
body.mr-preview .footer--row-inner.dark-mode * {
	color: #C9CCD1 !important;
}

body.mr-preview #site-footer a,
body.mr-preview .footer--row-inner.dark-mode a {
	color: #C9CCD1 !important;
	text-decoration: none;
	transition: color var(--mr-transizione);
}

body.mr-preview #site-footer a:hover,
body.mr-preview .footer--row-inner.dark-mode a:hover {
	color: var(--mr-bianco) !important;
}

body.mr-preview #site-footer .widget-title,
body.mr-preview #site-footer h2,
body.mr-preview #site-footer h3,
body.mr-preview #site-footer h4 {
	color: var(--mr-bianco) !important;
	font-family: var(--mr-font-display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: 15px;
	margin-bottom: 14px;
}

body.mr-preview #cb-row--footer-main .footer--row-inner {
	padding: 48px 0 40px;
}

/* Ordine colonne: contatti, link legali, social, mappa */
@media (min-width: 1025px) {
	body.mr-preview #cb-row--footer-main .row-v2 {
		align-items: start;
	}
	body.mr-preview #cb-row--footer-main .col-v2-right  { grid-column: 1 !important; grid-row: 1 !important; } /* contatti */
	body.mr-preview #cb-row--footer-main .col-v2-center { grid-column: 2 !important; grid-row: 1 !important; } /* link legali */
	body.mr-preview #cb-row--footer-main .col-v2-col4   { grid-column: 3 !important; grid-row: 1 !important; } /* social */
	body.mr-preview #cb-row--footer-main .col-v2-left   { grid-column: 4 !important; grid-row: 1 !important; } /* mappa */
}

/* I link legali erano centrati: a sinistra come nel mockup */
body.mr-preview #site-footer .builder-item--footer-1 .widget-area,
body.mr-preview #site-footer .builder-item--footer-3 .widget-area {
	align-items: flex-start;
	text-align: left;
}

body.mr-preview #site-footer .builder-item--footer-1 li {
	margin-bottom: 7px !important;
	line-height: 1.5;
}

body.mr-preview #site-footer .builder-item--footer-3 p {
	text-align: left;
	font-size: 14px;
	line-height: 1.75;
	color: #C9CCD1 !important;
}

/* Mappa: piu piccola, angoli arrotondati, bordo coerente col fondo scuro */
body.mr-preview #site-footer .builder-item--footer-4 iframe {
	height: 150px !important;
	border-radius: var(--mr-radius-card) !important;
	border: 1px solid #2A2E35 !important;
	filter: grayscale(35%) contrast(92%) brightness(.95);
}

/* Social: tondi chiari su fondo scuro. I colori brand restano sull'hover. */
body.mr-preview #site-footer .wp-social-link a {
	background: rgba(255, 255, 255, .08) !important;
	color: var(--mr-bianco) !important;
}

body.mr-preview #site-footer .wp-social-link svg {
	fill: var(--mr-bianco);
}


/* ==========================================================================
   12. FASCIA PAGAMENTI (riga bottom del footer)
   Da fondo grigio chiaro a fondo scuro, con le icone su pastiglie bianche
   arrotondate come nel mockup.
   ========================================================================== */
body.mr-preview .custom-footer-layout {
	background-color: var(--mr-footer) !important;
	color: #C9CCD1 !important;
	border-top: 1px solid #22252B;
	padding: 26px 15px 22px !important;
}

body.mr-preview .payment-icon-title {
	color: var(--mr-bianco) !important;
	font-family: var(--mr-font-display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: 13px;
}

body.mr-preview .footer-credit-card ul li img {
	background: var(--mr-bianco);
	border-radius: 8px;
	padding: 5px 7px;
	height: 34px !important;
	box-sizing: content-box;
}

body.mr-preview .footer-bottom-links ul li a {
	color: #C9CCD1 !important;
	font-size: 13.5px;
}

body.mr-preview .footer-bottom-links ul li a:hover {
	color: var(--mr-bianco) !important;
}

body.mr-preview .footer-copyright {
	color: #8A8F96 !important;
	font-size: 12px;
}


/* ==========================================================================
   13. PULSANTE DEI MODULI WPForms
   Era blu: rientra nel rosso unico delle azioni.
   ========================================================================== */
body.mr-preview .wpforms-container button.wpforms-submit,
body.mr-preview button.wpforms-submit,
body.mr-preview input.wpforms-submit {
	background-color: var(--mr-rosso) !important;
	border: 1px solid var(--mr-rosso) !important;
	color: var(--mr-bianco) !important;
	border-radius: var(--mr-radius-btn) !important;
	font-family: var(--mr-font-testo) !important;
	font-weight: 600 !important;
}

body.mr-preview .wpforms-container button.wpforms-submit:hover,
body.mr-preview button.wpforms-submit:hover {
	background-color: var(--mr-rosso-hover) !important;
	border-color: var(--mr-rosso-hover) !important;
}

/* Il CSS del Customizer azzera il contenitore nelle righe footer
   "layout-fullwidth" (max-width:none; padding:0), percio' i contenuti
   toccavano i bordi della finestra: qui si ripristina la gabbia. */
body.mr-preview #site-footer .footer--row.layout-fullwidth .customify-container,
body.mr-preview #site-footer .customify-container {
	max-width: 1248px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}


/* ==========================================================================
   14. SHOP E CARD PRODOTTO
   ========================================================================== */

/* Badge sconto: era verde (#0ace00), diventa rosso come le altre azioni */
body.mr-preview span.onsale,
body.mr-preview .onsale {
	background-color: var(--mr-rosso) !important;
	color: var(--mr-bianco) !important;
	border-radius: 6px !important;
	font-family: var(--mr-font-testo) !important;
	font-weight: 700 !important;
	font-size: 12px !important;
	letter-spacing: .02em;
	padding: 4px 9px !important;
	box-shadow: none !important;
}

/* Prezzo nelle card: piu grande e marcato */
body.mr-preview ul.products li.product .price,
body.mr-preview ul.products li.product .wc-product__price .price,
body.mr-preview ul.products li.product .price .woocommerce-Price-amount {
	font-family: var(--mr-font-display);
	font-size: 22px;
	font-weight: 700;
	color: var(--mr-rosso);
	line-height: 1.15;
}

/* Prezzo pieno barrato: piccolo e grigio, accanto allo scontato */
body.mr-preview ul.products li.product .price del,
body.mr-preview ul.products li.product .price del .woocommerce-Price-amount {
	font-size: 15px;
	font-weight: 400;
	color: var(--mr-testo-secondario);
	margin-right: 6px;
}

body.mr-preview ul.products li.product .price ins,
body.mr-preview ul.products li.product .price ins .woocommerce-Price-amount {
	color: var(--mr-rosso);
	text-decoration: none;
}

/* Etichetta categoria sopra il titolo: occhiello discreto.
   Il prefisso numerico viene tolto da un filtro PHP (solo a video). */
body.mr-preview ul.products li.product .wc-product__category,
body.mr-preview ul.products li.product .wc-product__category a {
	font-family: var(--mr-font-testo);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--mr-testo-secondario) !important;
	line-height: 1.4;
}

/* Card: bordo e raggio coerenti col resto */
body.mr-preview .woocommerce ul.products.wc-grid-view li.product .wc-product-inner {
	border-radius: var(--mr-radius-card) !important;
	border: 1px solid var(--mr-bordo) !important;
	transition: border-color var(--mr-transizione), box-shadow var(--mr-transizione), transform var(--mr-transizione) !important;
}

body.mr-preview .woocommerce ul.products.wc-grid-view li.product .wc-product-inner:hover {
	border-color: var(--mr-rosso) !important;
	box-shadow: var(--mr-ombra-card-hover) !important;
}

/* Un solo "Ordina per": si tiene quello sopra la griglia e si toglie
   il doppione nella barra laterale (il Customizer lo forza con
   !important, quindi qui serve specificita piu alta). */
body.mr-preview .sidebar .woocommerce-ordering,
body.mr-preview .widget-area .woocommerce-ordering,
body.mr-preview .sidebar-primary-inner .woocommerce-ordering {
	display: none !important;
}


/* ==========================================================================
   15. TITOLO DELL'ARCHIVIO
   Il box grigio della briciola di pane diventa il titolo di pagina:
   Barlow Condensed grande, senza riquadro.
   ========================================================================== */
body.mr-preview .custom-top-breadcrumb {
	background: transparent !important;
	border: none !important;
	padding: 6px 0 2px !important;
	margin-bottom: 18px !important;
	box-shadow: none !important;
}

body.mr-preview .custom-top-breadcrumb nav.woocommerce-breadcrumb,
body.mr-preview .custom-top-breadcrumb .woocommerce-breadcrumb {
	font-family: var(--mr-font-display) !important;
	font-size: 40px !important;
	font-weight: 800 !important;
	line-height: 1.05 !important;
	letter-spacing: -0.015em !important;
	color: var(--mr-testo) !important;
	text-transform: uppercase;
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 0 !important;
}

body.mr-preview .custom-top-breadcrumb nav.woocommerce-breadcrumb a {
	color: var(--mr-testo) !important;
	text-decoration: none;
}

@media (max-width: 768px) {
	body.mr-preview .custom-top-breadcrumb nav.woocommerce-breadcrumb,
	body.mr-preview .custom-top-breadcrumb .woocommerce-breadcrumb {
		font-size: 28px !important;
	}
}


/* ==========================================================================
   16. ELEMENTI FLOTTANTI
   Il badge Google e' fixed in basso a sinistra (215x83) e finiva sopra i
   pulsanti "Aggiungi al carrello" delle card. In anteprima si riduce a una
   pastiglia circolare che si apre al passaggio del mouse; su mobile resta
   sempre la sola icona. La pastiglia "Anteprima" si sposta a destra per
   non sovrapporsi.
   ========================================================================== */
body.mr-preview #google-reviews-badge {
	bottom: 16px !important;
	left: 16px !important;
}

body.mr-preview .custom-gr-widget {
	width: 52px;
	height: 52px;
	padding: 0 !important;
	border-radius: 999px !important;
	overflow: hidden;
	justify-content: center;
	gap: 10px;
	border: 1px solid var(--mr-bordo) !important;
	box-shadow: 0 4px 14px rgba(22, 24, 28, .18) !important;
	transition: width .22s ease, padding .22s ease;
}

body.mr-preview .custom-gr-widget .custom-gr-info {
	display: none;
	white-space: nowrap;
}

body.mr-preview .custom-gr-widget .custom-gr-icon {
	margin: 0 !important;
	width: 26px;
	height: 26px;
}

body.mr-preview .gr-close-btn {
	display: none;
}

@media (min-width: 769px) {
	body.mr-preview .custom-gr-widget:hover {
		width: 232px;
		padding: 10px 16px !important;
		justify-content: flex-start;
	}

	body.mr-preview .custom-gr-widget:hover .custom-gr-info {
		display: block;
	}

	body.mr-preview #google-reviews-badge:hover .gr-close-btn {
		display: flex;
	}
}

/* Su mobile resta la sola icona, piu piccola e piu defilata */
@media (max-width: 768px) {
	body.mr-preview #google-reviews-badge {
		bottom: 12px !important;
		left: 12px !important;
	}

	body.mr-preview .custom-gr-widget {
		width: 44px;
		height: 44px;
	}

	body.mr-preview .custom-gr-widget .custom-gr-icon {
		width: 22px;
		height: 22px;
	}
}


/* ==========================================================================
   17. HOME NUOVA (blocco E) — solo in anteprima
   Le sezioni della bozza vivono dentro contenitori Elementor a tutta
   larghezza. Qui si neutralizza il contenitore del tema sulla home e si
   danno le regole alle sezioni nuove (hero, trust, categorie, marchi...).
   Tutto resta sotto body.mr-preview: fuori dall'anteprima nulla cambia.
   ========================================================================== */

/* Nessuno scorrimento orizzontale: con i contenitori a tutta larghezza
   basta un margine negativo di un widget di terze parti (Elementor,
   Trustindex) per far sbordare la pagina di una decina di pixel su
   telefono. "clip" taglia senza creare un contenitore di scorrimento,
   quindi non rompe gli elementi appiccicati in alto. */
body.mr-preview.home #site-content {
	overflow-x: clip;
}

/* La home a tutta larghezza: il wrapper del tema limita a ~1248px. */
body.mr-preview.home #site-content > .customify-container {
	max-width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
/* Customify compensa il padding del contenitore con margini negativi di
   -16px sulla griglia: azzerato il padding, quei margini sporgevano e su
   telefono la pagina scorreva in orizzontale (414 px invece di 390). */
body.mr-preview.home #site-content > .customify-container > .customify-grid {
	margin-left: 0 !important;
	margin-right: 0 !important;
}
body.mr-preview.home #main.content-area {
	padding: 0 !important;
}
/* Sulla home le briciole di pane non servono: si parte dall'hero. */
body.mr-preview.home .page-breadcrumb {
	display: none !important;
}
/* I contenitori Elementor della bozza non devono aggiungere margini. */
body.mr-preview.home .entry-content > .elementor,
body.mr-preview.home .elementor-element.e-con {
	--padding-top: 0;
	--padding-bottom: 0;
	--padding-left: 0;
	--padding-right: 0;
}

/* --------------------------------------------------------- 17.1 impalcatura */
body.mr-preview .mr-sez {
	max-width: 1248px;
	margin: 0 auto;
	padding: 56px 24px 0;
}
body.mr-preview .mr-sez__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}
body.mr-preview .mr-sez__head h2 {
	font-family: var(--mr-font-display);
	font-weight: 800;
	font-size: clamp(28px, 3.4vw, 42px);
	line-height: 1.04;
	letter-spacing: -.01em;
	text-transform: uppercase;
	margin: 0;
	color: var(--mr-nero);
}
body.mr-preview .mr-sez__head h2::after {
	content: "";
	display: block;
	width: 56px;
	height: 4px;
	background: var(--mr-rosso);
	border-radius: 2px;
	margin-top: 12px;
}
body.mr-preview a.mr-sez__link {
	font-family: var(--mr-font-testo);
	font-weight: 600;
	font-size: 14px;
	color: var(--mr-rosso) !important;
	text-decoration: none;
	white-space: nowrap;
}
body.mr-preview a.mr-sez__link:hover {
	color: var(--mr-rosso-hover) !important;
	text-decoration: underline;
}

/* Pulsanti della home: classi nostre, non toccano quelli del tema. */
body.mr-preview a.mr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-family: var(--mr-font-testo);
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	padding: 15px 26px;
	border-radius: var(--mr-radius-btn);
	border: 2px solid transparent;
	text-decoration: none !important;
	transition: all var(--mr-transizione);
	cursor: pointer;
}
body.mr-preview a.mr-btn--primary {
	background: var(--mr-rosso) !important;
	color: var(--mr-bianco) !important;
}
body.mr-preview a.mr-btn--primary:hover {
	background: var(--mr-rosso-hover) !important;
	transform: translateY(-2px);
}
body.mr-preview a.mr-btn--ghost {
	background: rgba(255, 255, 255, .10) !important;
	color: var(--mr-bianco) !important;
	border-color: rgba(255, 255, 255, .55);
	backdrop-filter: blur(4px);
}
body.mr-preview a.mr-btn--ghost:hover {
	background: var(--mr-bianco) !important;
	color: var(--mr-nero) !important;
}
body.mr-preview a.mr-btn--ghost-dark {
	background: transparent !important;
	color: var(--mr-nero) !important;
	border-color: var(--mr-bordo);
}
body.mr-preview a.mr-btn--ghost-dark:hover {
	border-color: var(--mr-rosso);
	color: var(--mr-rosso) !important;
}
body.mr-preview a.mr-btn--white {
	background: var(--mr-bianco) !important;
	color: var(--mr-rosso) !important;
}
body.mr-preview a.mr-btn--white:hover {
	background: var(--mr-nero) !important;
	color: var(--mr-bianco) !important;
}
body.mr-preview a.mr-btn--sm {
	padding: 11px 18px;
	font-size: 14px;
}

/* ---------------------------------------------------------------- 17.2 hero */
body.mr-preview .mr-hero {
	position: relative;
	height: clamp(430px, 52vw, 620px);
	overflow: hidden;
	background: var(--mr-nero);
}
body.mr-preview .mr-hero__slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	/* Le tre foto (13 ottobre 2026) sono 2400x600. La slide e' molto meno
	   larga di 4:1, quindi dell'immagine se ne vede solo una parte: a 1440px
	   il 58%, il resto viene tagliato ai lati. Questo e' il ripiego per i
	   browser che non capiscono le regole qui sotto. */
	background-position: 74% center;
	display: flex;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity .7s ease;
}
/* Quanto a destra sta la foto. Misurati i tre soggetti sulle immagini vere,
   occupano in larghezza: droni 58,3-82,3%, automodello 48,6-83,1%,
   veliero 51,5-77,7%. Larghezze diverse: spingendole tutte a filo del bordo
   destro, i due soggetti piu' stretti (droni e veliero) finivano schiacciati
   contro il bordo mentre l'automodello stava bene. Il riferimento e' quindi
   l'automodello: le altre due slide sono messe in modo che il CENTRO del
   soggetto cada dove cade il suo, cioe' circa al 69% della finestra.
   Il numero decimale di ogni regola e' (centro del soggetto + 0,1725), dove
   0,1725 e' la mezza larghezza del soggetto dell'automodello.
   Il conto: l'immagine e' tagliata in altezza, quindi e' larga 4 volte
   l'altezza della slide, cioe' clamp(1720px, 208vw, 2480px); il bordo
   sinistro va messo a (larghezza finestra - 24px - bordo destro del soggetto).
   min(0px, ...) serve oltre i 2480px, dove la foto copre tutta la larghezza
   e un valore positivo lascerebbe una fascia vuota.
   Sostituendo una foto, si rimisurano i soggetti e si cambiano i tre numeri
   decimali qui sotto (e i tre valori per telefono, piu' in basso). */
body.mr-preview .mr-hero__slide:nth-child(1) {
	background-position-x: min(0px, calc(100vw - 24px - .8755 * clamp(1720px, 208vw, 2480px)));
	background-position-y: center;
}
body.mr-preview .mr-hero__slide:nth-child(2) {
	background-position-x: min(0px, calc(100vw - 24px - .831 * clamp(1720px, 208vw, 2480px)));
	background-position-y: center;
}
body.mr-preview .mr-hero__slide:nth-child(3) {
	background-position-x: min(0px, calc(100vw - 24px - .8185 * clamp(1720px, 208vw, 2480px)));
	background-position-y: center;
}
/* Il titolo della terza slide, "Un vero negozio, con chi ti capisce", e' il
   piu' lungo dei tre: su una riga sola arriva in mezzo all'alberatura del
   veliero. Mandandolo a capo si ferma prima e la nave resta libera. Solo da
   tablet in su: su telefono i titoli vanno a capo da soli. */
@media (min-width: 769px) {
	body.mr-preview .mr-hero__slide:nth-child(3) .mr-hero__title { max-width: 9em; }
}
body.mr-preview .mr-hero__slide.is-active {
	opacity: 1;
	visibility: visible;
}
/* Velo scuro: il testo deve restare leggibile su qualunque foto. */
body.mr-preview .mr-hero__slide::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(10, 11, 13, .88) 0%, rgba(10, 11, 13, .68) 46%, rgba(10, 11, 13, .25) 100%);
}
body.mr-preview .mr-hero__inner {
	position: relative;
	max-width: 1248px;
	width: 100%;
	margin: 0 auto;
	padding: 0 24px;
	color: var(--mr-bianco);
}
body.mr-preview .mr-hero__kicker {
	display: inline-block;
	font-family: var(--mr-font-testo);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mr-bianco);
	background: var(--mr-rosso);
	padding: 7px 13px;
	border-radius: 999px;
	margin-bottom: 18px;
}
body.mr-preview .mr-hero__title {
	font-family: var(--mr-font-display) !important;
	font-weight: 800 !important;
	font-size: clamp(40px, 6.2vw, 82px) !important;
	line-height: .96 !important;
	letter-spacing: -.015em;
	text-transform: uppercase;
	color: var(--mr-bianco) !important;
	margin: 0 0 16px !important;
	max-width: 15em;
}
body.mr-preview .mr-hero__sub {
	font-family: var(--mr-font-testo);
	font-size: clamp(15px, 1.4vw, 18px);
	line-height: 1.55;
	color: rgba(255, 255, 255, .88) !important;
	max-width: 34em;
	margin: 0 0 28px;
}
body.mr-preview .mr-hero__cta {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}
body.mr-preview .mr-hero__dots {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 22px;
	display: flex;
	gap: 9px;
	z-index: 3;
}
/* Il tema da ai <button> display:flex, min-height e line-height propri:
   senza azzerarli i pallini diventano quadrati alti 42px. */
body.mr-preview .mr-hero__dots button {
	display: block !important;
	width: 28px !important;
	height: 4px !important;
	min-height: 0 !important;
	line-height: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 2px !important;
	background: rgba(255, 255, 255, .38) !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background var(--mr-transizione);
}
body.mr-preview .mr-hero__dots button.is-active {
	background: var(--mr-rosso) !important;
}
body.mr-preview .mr-hero__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 42px !important;
	height: 42px !important;
	min-height: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, .14);
	color: var(--mr-bianco);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	transition: background var(--mr-transizione);
}
body.mr-preview .mr-hero__nav:hover {
	background: var(--mr-rosso);
}
body.mr-preview .mr-hero__prev { left: 14px; }
body.mr-preview .mr-hero__next { right: 14px; }

/* ----------------------------------------------------------- 17.3 trust bar */
body.mr-preview .mr-trust {
	background: var(--mr-nero);
	color: var(--mr-bianco);
}
body.mr-preview .mr-trust__inner {
	max-width: 1248px;
	margin: 0 auto;
	padding: 24px;
	display: grid;
	/* L'ultima voce ha la riga piu lunga (metodi di pagamento): le si da
	   una colonna piu larga invece di lasciarla andare a capo da sola. */
	grid-template-columns: 1fr 1fr 1fr 1.3fr;
	gap: 10px 24px;
}
body.mr-preview .mr-trust__item {
	display: flex;
	align-items: center;
	gap: 13px;
	min-width: 0;
}
/* Icone della trust bar e del pulsante WhatsApp.
 * Vanno qui e non nel contenuto della pagina: su questo sito i widget HTML
 * di Elementor vengono ripuliti e gli <svg> in linea spariscono (succede
 * anche al widget gia esistente della 19309). Come sfondi CSS, invece,
 * arrivano a destinazione. */
body.mr-preview .mr-trust__ico {
	flex: 0 0 27px;
	width: 27px;
	height: 27px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 27px 27px;
}
body.mr-preview .mr-trust__ico--spedizione { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23C41E2A%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M1%203h15v13H1z%22%2F%3E%3Cpath%20d%3D%22M16%208h4l3%203v5h-7V8z%22%2F%3E%3Ccircle%20cx%3D%225.5%22%20cy%3D%2218.5%22%20r%3D%222.5%22%2F%3E%3Ccircle%20cx%3D%2218.5%22%20cy%3D%2218.5%22%20r%3D%222.5%22%2F%3E%3C%2Fsvg%3E"); }
body.mr-preview .mr-trust__ico--negozio { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23C41E2A%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2021h18%22%2F%3E%3Cpath%20d%3D%22M5%2021V7l7-4%207%204v14%22%2F%3E%3Cpath%20d%3D%22M9%2021v-6h6v6%22%2F%3E%3C%2Fsvg%3E"); }
body.mr-preview .mr-trust__ico--dji { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23C41E2A%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202l3%206%206%201-4.5%204.3%201%206.2L12%2016.8%206.5%2019.5l1-6.2L3%209l6-1z%22%2F%3E%3C%2Fsvg%3E"); }
body.mr-preview .mr-trust__ico--pagamenti { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23C41E2A%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2022s8-4%208-10V5l-8-3-8%203v7c0%206%208%2010%208%2010z%22%2F%3E%3Cpath%20d%3D%22M9%2012l2%202%204-4%22%2F%3E%3C%2Fsvg%3E"); }

/* Icona del pulsante di contatto del banner. Finche il cliente non da
   un cellulare il pulsante e "Chiamaci" sul fisso: wa.me su un numero
   fisso non apre WhatsApp. La regola .mr-ico-wa resta pronta. */
body.mr-preview .mr-ico-wa,
body.mr-preview .mr-ico-tel {
	display: inline-block;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
}
body.mr-preview .mr-ico-tel { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23C41E2A%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2016.9v3a2%202%200%2001-2.2%202%2019.8%2019.8%200%2001-8.6-3.1%2019.5%2019.5%200%2001-6-6A19.8%2019.8%200%20012.1%204.2%202%202%200%20014.1%202h3a2%202%200%20012%201.7c.1.9.3%201.8.6%202.7a2%202%200%2001-.5%202.1L8.1%209.6a16%2016%200%20006%206l1.1-1.1a2%202%200%20012.1-.5c.9.3%201.8.5%202.7.6a2%202%200%20011.7%202z%22%2F%3E%3C%2Fsvg%3E"); }
body.mr-preview a.mr-btn--white:hover .mr-ico-tel { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2016.9v3a2%202%200%2001-2.2%202%2019.8%2019.8%200%2001-8.6-3.1%2019.5%2019.5%200%2001-6-6A19.8%2019.8%200%20012.1%204.2%202%202%200%20014.1%202h3a2%202%200%20012%201.7c.1.9.3%201.8.6%202.7a2%202%200%2001-.5%202.1L8.1%209.6a16%2016%200%20006%206l1.1-1.1a2%202%200%20012.1-.5c.9.3%201.8.5%202.7.6a2%202%200%20011.7%202z%22%2F%3E%3C%2Fsvg%3E"); }
body.mr-preview .mr-trust__item strong {
	display: block;
	font-family: var(--mr-font-testo);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.25;
	color: var(--mr-bianco);
}
body.mr-preview .mr-trust__item span {
	display: block;
	font-family: var(--mr-font-testo);
	font-size: 12.5px;
	line-height: 1.35;
	color: rgba(255, 255, 255, .62);
	margin-top: 2px;
}

/* ------------------------------------------------------ 17.4 categorie */
body.mr-preview .mr-catgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}
body.mr-preview a.mr-cat {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--mr-bianco);
	border: 1px solid var(--mr-bordo);
	border-radius: var(--mr-radius-card);
	overflow: hidden;
	text-decoration: none !important;
	box-shadow: var(--mr-ombra-card);
	transition: box-shadow var(--mr-transizione), transform var(--mr-transizione), border-color var(--mr-transizione);
}
body.mr-preview a.mr-cat:hover {
	transform: translateY(-3px);
	box-shadow: var(--mr-ombra-card-hover);
	border-color: var(--mr-rosso);
}
body.mr-preview .mr-cat__img {
	display: block;
	aspect-ratio: 16 / 10;
	background-size: cover;
	background-position: center;
	background-color: var(--mr-grigio-chiaro);
}
body.mr-preview .mr-cat__body {
	display: block;
	padding: 17px 54px 19px 20px;
}
body.mr-preview .mr-cat__t {
	display: block;
	font-family: var(--mr-font-display);
	font-weight: 700;
	font-size: 24px;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--mr-nero);
}
body.mr-preview .mr-cat__s {
	display: block;
	font-family: var(--mr-font-testo);
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--mr-testo-secondario);
	margin-top: 5px;
}
body.mr-preview .mr-cat__go {
	position: absolute;
	right: 18px;
	bottom: 18px;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--mr-grigio-chiaro);
	color: var(--mr-nero);
	font-size: 20px;
	line-height: 1;
	transition: background var(--mr-transizione), color var(--mr-transizione);
}
body.mr-preview a.mr-cat:hover .mr-cat__go {
	background: var(--mr-rosso);
	color: var(--mr-bianco);
}

/* -------------------------------------------------- 17.5 ultime novita */
/* Il titolo "ULTIME NOVITÁ" della 19309 non esiste piu nella bozza:
   qui si impagina la griglia dello shortcode esistente, limitandola a
   due righe. Lo shortcode non viene modificato: si nascondono le voci
   oltre la seconda riga, 6 colonne su desktop, 4 su tablet, 2 su mobile. */
body.mr-preview .mr-sez--novita { padding-bottom: 0; }
body.mr-preview .custom-minimal-grid {
	max-width: 1248px !important;
	padding: 0 24px !important;
}
body.mr-preview .custom-minimal-grid ul.products li.minimal-product:nth-child(n+13) {
	display: none !important;
}
body.mr-preview .custom-minimal-grid ul.products li.minimal-product .woocommerce-loop-product__title {
	font-family: var(--mr-font-testo) !important;
}
body.mr-preview .custom-minimal-grid ul.products li.minimal-product .price {
	font-family: var(--mr-font-display) !important;
	font-weight: 700 !important;
	color: var(--mr-rosso) !important;
}
body.mr-preview .mr-sez--cta {
	display: flex;
	justify-content: center;
	padding-top: 26px;
}

/* ------------------------------------------------- 17.6 banner WhatsApp */
body.mr-preview .mr-banner {
	max-width: 1248px;
	margin: 56px auto 0;
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	background: var(--mr-rosso);
	border-radius: var(--mr-radius-card);
	overflow: hidden;
}
body.mr-preview .mr-banner__txt {
	padding: 44px 40px;
	color: var(--mr-bianco);
}
body.mr-preview .mr-banner__txt h2 {
	font-family: var(--mr-font-display);
	font-weight: 800;
	font-size: clamp(27px, 3vw, 40px);
	line-height: 1.04;
	text-transform: uppercase;
	color: var(--mr-bianco) !important;
	margin: 0 0 12px;
}
body.mr-preview .mr-banner__txt p {
	font-family: var(--mr-font-testo);
	font-size: 15.5px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .92) !important;
	max-width: 36em;
	margin: 0 0 24px;
}
body.mr-preview .mr-banner__img {
	background-size: cover;
	background-position: center;
	min-height: 220px;
}

/* ----------------------------------------------------- 17.7 nastro marchi */
body.mr-preview .mr-sez--marchi { padding-top: 56px; }
body.mr-preview .mr-marquee {
	position: relative;
	overflow: hidden;
	padding: 10px 0;
	/* Sfumatura ai lati: i loghi entrano ed escono senza tagli netti. */
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
body.mr-preview .mr-marquee__track {
	display: flex;
	align-items: center;
	gap: 56px;
	width: max-content;
	animation: mr-scorri 64s linear infinite;
}
body.mr-preview .mr-marquee:hover .mr-marquee__track {
	animation-play-state: paused;
}
body.mr-preview a.mr-marchio {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	height: 46px;
}
body.mr-preview a.mr-marchio img {
	max-height: 46px;
	width: auto;
	filter: grayscale(1);
	opacity: .5;
	transition: filter var(--mr-transizione), opacity var(--mr-transizione);
}
body.mr-preview a.mr-marchio:hover img {
	filter: none;
	opacity: 1;
}
@keyframes mr-scorri {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
	body.mr-preview .mr-marquee__track { animation: none; }
}

/* ------------------------------------------------------- 17.8 recensioni */
body.mr-preview .mr-sez--rec { padding-bottom: 8px; }
body.mr-preview .mr-sez--rec .mr-sez__head { justify-content: center; text-align: center; }
body.mr-preview .mr-sez--rec .mr-sez__head h2::after { margin-left: auto; margin-right: auto; }
/* Il widget Trustindex usa margini negativi di -8px sulle recensioni: nella
   home nuova i contenitori sono a tutta larghezza, quindi quel margine
   sbordava dallo schermo (405 px invece di 390). Gli si da una cornice. */
body.mr-preview.home .elementor-widget-shortcode .ti-widget {
	max-width: 1248px;
	margin: 0 auto;
	padding: 0 24px;
}

/* --------------------------------------------- 17.9 chi siamo e orari */
body.mr-preview .mr-about {
	max-width: 1248px;
	margin: 56px auto 0;
	padding: 0 24px;
	display: grid;
	grid-template-columns: .85fr 1.15fr;
	gap: 40px;
	align-items: start;
}
body.mr-preview .mr-about__img {
	position: relative;
	border-radius: var(--mr-radius-card);
	background-size: cover;
	background-position: center;
	background-color: var(--mr-grigio-chiaro);
	aspect-ratio: 4 / 3;
}
/* Segnaposto: va sostituito con una foto vera del negozio. */
body.mr-preview .mr-about__ph {
	position: absolute;
	left: 12px;
	bottom: 12px;
	font-family: var(--mr-font-testo);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--mr-bianco);
	background: rgba(22, 24, 28, .72);
	padding: 6px 10px;
	border-radius: 6px;
}
body.mr-preview .mr-kicker {
	display: inline-block;
	font-family: var(--mr-font-testo);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mr-rosso);
	margin-bottom: 10px;
}
body.mr-preview .mr-about__txt h2 {
	font-family: var(--mr-font-display);
	font-weight: 800;
	font-size: clamp(27px, 3vw, 40px);
	line-height: 1.05;
	text-transform: uppercase;
	margin: 0 0 14px;
	color: var(--mr-nero);
}
body.mr-preview .mr-about__txt > p {
	font-family: var(--mr-font-testo);
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--mr-testo-secondario);
	margin: 0 0 28px;
	max-width: 42em;
}
body.mr-preview .mr-about__cols {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 32px;
}
body.mr-preview .mr-about__cols h3 {
	font-family: var(--mr-font-testo);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mr-nero);
	margin: 0 0 14px;
	padding-bottom: 9px;
	border-bottom: 2px solid var(--mr-rosso);
	display: inline-block;
}
body.mr-preview ul.mr-orari {
	list-style: none;
	margin: 0;
	padding: 0;
}
body.mr-preview ul.mr-orari li {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-family: var(--mr-font-testo);
	font-size: 14px;
	padding: 7px 0;
	border-bottom: 1px dashed var(--mr-bordo);
}
body.mr-preview ul.mr-orari li:last-child { border-bottom: 0; }
body.mr-preview ul.mr-orari .g {
	flex: 0 0 92px;
	font-weight: 600;
	color: var(--mr-nero);
}
body.mr-preview ul.mr-orari .o {
	color: var(--mr-testo-secondario);
	white-space: nowrap;
}
/* Chiuso: resta rosso perche e uno stato, non un accento decorativo. */
body.mr-preview ul.mr-orari .o.is-chiuso {
	color: var(--mr-rosso);
	font-weight: 700;
}
body.mr-preview p.mr-about__addr {
	font-family: var(--mr-font-testo);
	font-size: 14px;
	line-height: 1.75;
	color: var(--mr-testo-secondario);
	margin: 0 0 18px;
}
body.mr-preview p.mr-about__addr a {
	color: var(--mr-nero) !important;
	text-decoration: none;
	font-weight: 600;
}
body.mr-preview p.mr-about__addr a:hover {
	color: var(--mr-rosso) !important;
}

/* ----------------------------------------------------- 17.10 avvisi legali */
/* Stesso contenuto della 19309, ma in Archivo normale 14px grigio:
   non piu cinque <h4> tutti in grassetto e maiuscolo. */
body.mr-preview .mr-avvisi {
	max-width: 1248px;
	margin: 56px auto 0;
	padding: 28px 24px 8px;
	border-top: 1px solid var(--mr-bordo);
	text-align: center;
}
body.mr-preview .mr-avvisi p {
	font-family: var(--mr-font-testo) !important;
	font-weight: 400 !important;
	font-size: 14px !important;
	line-height: 1.65 !important;
	text-transform: none !important;
	color: var(--mr-testo-secondario) !important;
	margin: 0 auto 9px;   /* centrati in pagina, non a bandiera */
	max-width: 80ch;
}
body.mr-preview .mr-avvisi a {
	color: var(--mr-nero) !important;
	text-decoration: underline;
}
body.mr-preview .mr-avvisi a:hover { color: var(--mr-rosso) !important; }

/* ------------------------------------------------------- 17.11 responsive */
@media (max-width: 1024px) {
	body.mr-preview .mr-trust__inner { grid-template-columns: repeat(2, 1fr); }
	body.mr-preview .mr-catgrid { grid-template-columns: repeat(2, 1fr); }
	body.mr-preview .mr-about { grid-template-columns: 1fr; }
	body.mr-preview .mr-banner { grid-template-columns: 1fr; }
	body.mr-preview .mr-banner__img { min-height: 180px; order: -1; }
	body.mr-preview .custom-minimal-grid ul.products li.minimal-product:nth-child(n+9) { display: none !important; }
}
@media (max-width: 768px) {
	body.mr-preview .mr-sez { padding: 40px 18px 0; }
	body.mr-preview .mr-sez__head { margin-bottom: 18px; }
	body.mr-preview .mr-hero { height: auto; min-height: 480px; }
	body.mr-preview .mr-hero__slide {
		position: relative;
		inset: auto;
		min-height: 480px;
		display: none;
	}
	body.mr-preview .mr-hero__slide.is-active { display: flex; }
	/* Su telefono la slide e' alta e stretta e di una foto 4:1 se ne vede solo
	   un quinto: col taglio unico del desktop (74%) la seconda slide perdeva
	   proprio l'automodello, che e' il prodotto. Qui ogni slide ha il suo
	   centro, calcolato sul soggetto: droni al 76%, automodello al 56%,
	   veliero al 68%. Sostituendo una foto, se il soggetto si sposta vanno
	   ritoccati questi tre valori oltre a quello della sezione 17.2. */
	body.mr-preview .mr-hero__slide:nth-child(1) { background-position: 76% center; }
	body.mr-preview .mr-hero__slide:nth-child(2) { background-position: 56% center; }
	body.mr-preview .mr-hero__slide:nth-child(3) { background-position: 68% center; }
	body.mr-preview .mr-hero__inner { padding: 0 18px; }
	body.mr-preview .mr-hero__title { font-size: 38px !important; }
	body.mr-preview .mr-hero__cta { flex-direction: column; align-items: stretch; }
	body.mr-preview a.mr-btn { width: 100%; }
	body.mr-preview .mr-hero__nav { display: none; }
	body.mr-preview .mr-trust__inner { grid-template-columns: 1fr; padding: 20px 18px; gap: 14px; }
	body.mr-preview .mr-catgrid { grid-template-columns: 1fr; gap: 14px; }
	body.mr-preview .mr-cat__img { aspect-ratio: 16 / 9; }
	body.mr-preview .mr-banner { margin-top: 40px; border-radius: 0; }
	body.mr-preview .mr-banner__txt { padding: 30px 18px; }
	body.mr-preview .mr-about { margin-top: 40px; padding: 0 18px; gap: 26px; }
	body.mr-preview .mr-about__cols { grid-template-columns: 1fr; gap: 24px; }
	body.mr-preview .mr-avvisi { margin-top: 40px; padding: 24px 18px 8px; }
	body.mr-preview .mr-marquee__track { gap: 34px; animation-duration: 42s; }
	body.mr-preview a.mr-marchio, body.mr-preview a.mr-marchio img { height: 36px; max-height: 36px; }
	body.mr-preview .custom-minimal-grid { padding: 0 18px !important; }
	body.mr-preview.home .elementor-widget-shortcode .ti-widget { padding: 0 18px; }
	body.mr-preview .custom-minimal-grid ul.products li.minimal-product:nth-child(n+5) { display: none !important; }
}


/* ==========================================================================
   18. TITOLO <h1> DELLE PAGINE ARCHIVIO (blocco F) — solo in anteprima
   Shop, categorie e tag ricevono un <h1> vero (stampato da mr-restyling.php);
   marchi e ricerca ne hanno gia' uno nella titlebar del tema e si riusa
   quello. In entrambi i casi la briciola di pane ingrandita del blocco C
   viene nascosta: il titolo grande deve essere uno solo, ed essere l'<h1>.
   Le schede prodotto non hanno la classe mr-archivio, quindi restano com'erano.
   ========================================================================== */

/* L'<h1> del tema non sta nella titlebar ma dentro .woocommerce-listing
   (lo stampa woocommerce_content), quindi lo si prende per classe. */
body.mr-preview h1.mr-titolo-archivio,
body.mr-preview.mr-archivio h1.page-title {
	font-family: var(--mr-font-display) !important;
	font-size: 40px !important;
	font-weight: 800 !important;
	line-height: 1.05 !important;
	letter-spacing: -.015em !important;
	text-transform: uppercase;
	color: var(--mr-testo) !important;
	background: none !important;
	margin: 0 0 18px !important;
	padding: 6px 0 2px !important;
	border: 0 !important;
}

/* La briciola ingrandita ha fatto il suo tempo: ora il titolo e' l'<h1>. */
body.mr-preview.mr-archivio .custom-top-breadcrumb {
	display: none !important;
}

@media (max-width: 768px) {
	body.mr-preview h1.mr-titolo-archivio,
	body.mr-preview.mr-archivio h1.page-title {
		font-size: 28px !important;
		margin-bottom: 14px !important;
	}
}


/* ==========================================================================
   19. MENU CATALOGO E DJI su telefono — solo in anteprima

   LA CAUSA DELLE FRECCETTE STORTE
   Le due tendine usano la STESSA classe .gm-toggle-icon in due modi diversi:
     - il menu DJI ([woo_menu_icone]) mette uno <span> VUOTO e lo disegna
       via CSS: 8x8, due bordi, rotate(45deg) -> chevron corretto;
     - il menu Catalogo ([woo_menu_cat]) mette dentro lo stesso span il
       carattere "▼".
   Risultato: sul Catalogo si vedono insieme il chevron disegnato e il
   triangolo ruotato di 45°, cioe' il triangolo storto con la lineetta.
   Con la voce aperta, .gm-toggle-icon.open { transform: rotate(180deg) }
   raddrizza il chevron in un angolo e gira il "▼" in "▲" rosso: la freccia
   rossa in su con il trattino.
   Non e' un effetto del restyling: si vede identica sul sito pubblico.

   IL MODELLO
   L'impaginazione segue il menu catalogo di modellismogianni.it indicato
   dal cliente: lineare, fondo bianco, nessun riquadro, voci in maiuscolo
   con la freccetta attaccata al testo, filetto chiaro sotto ogni voce
   lungo quanto il testo, ramo aperto tutto in rosso.

   PERCHE' TUTTO DENTRO UNA MEDIA QUERY
   Il tema nasconde del tutto le freccette da 992px in su
   (`.gm-toggle-icon { display: none }`) e disegna il chevron solo dentro
   `@media (max-width: 991px)`. Sul mega menu desktop, quindi, il "▼" e' nel
   markup ma non si vede: non c'e' nessuna freccetta storta da sistemare, e
   farne comparire una sarebbe una freccia che il disegno non ha mai avuto.
   Stessa soglia del tema: 991px.
   ========================================================================== */
@media (max-width: 991px) {

	/* --------------------------------------------- 19.1 niente riquadri */
	/* Fondo bianco ovunque: via il grigio delle righe, via il riquadro
	   rosso che il tema disegna intorno alla sezione aperta. */
	body.mr-preview .gm-menu-column,
	body.mr-preview .gm-menu-column > ul > li,
	body.mr-preview .gm-menu-column .gm-item-wrapper,
	body.mr-preview .gm-sub-menu {
		background: var(--mr-bianco) !important;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
	}
	body.mr-preview .gm-menu-column > ul > li.section-open {
		margin: 0 !important;
		padding: 0 !important;
		overflow: visible !important;
	}
	body.mr-preview .gm-menu-column > ul {
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
	}
	body.mr-preview .gm-menu-column .gm-item-wrapper {
		display: block !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	/* ------------------------------------------------ 19.2 le voci */
	/* Il link si stringe sul testo e non ha filetti: l'unica riga sotto
	   una voce e' la sottolineatura rossa di quella aperta, cosi' non ce
	   ne sono mai due. In altezza restano 44px di area toccabile. */
	body.mr-preview .gm-menu-column .gm-item-wrapper a,
	body.mr-preview .gm-menu-column .gm-item-wrapper a.active-parent {
		display: inline-flex !important;
		align-items: center;
		gap: 4px;
		min-height: 44px;
		margin: 0 !important;
		padding: 2px 10px 2px 0 !important;
		border: 0 !important;          /* niente filetto grigio sotto le voci */
		background: transparent !important;
		font-family: var(--mr-font-testo) !important;
		font-size: 15px !important;
		font-weight: 400 !important;
		line-height: 1.3;
		letter-spacing: .01em;
		text-transform: uppercase;
		text-decoration: none !important;
		color: var(--mr-testo) !important;
	}
	/* Unica sottolineatura della tendina: quella rossa della voce aperta. */
	body.mr-preview .gm-menu-column .gm-item-wrapper a.active-parent {
		color: var(--mr-rosso) !important;
		text-decoration: underline !important;
		text-underline-offset: 3px;
	}

	/* ---------------------------------------------- 19.3 il chevron */
	/* Vale per tutte e due le tendine, Catalogo e DJI. Il carattere "▼"
	   resta nel markup ma non si vede piu'. */
	body.mr-preview .gm-item-wrapper .gm-toggle-icon,
	body.mr-preview .gm-row-title .gm-toggle-icon {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		flex: 0 0 18px;
		width: 18px !important;
		height: 18px !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;        /* via il chevron disegnato dal tema */
		transform: none !important;  /* via la rotazione di 45° sullo span */
		font-size: 0 !important;
		line-height: 0 !important;
		color: transparent !important;
	}
	body.mr-preview .gm-item-wrapper .gm-toggle-icon::after,
	body.mr-preview .gm-row-title .gm-toggle-icon::after {
		content: "";
		display: block;
		width: 7px;
		height: 7px;
		margin-top: -4px;            /* centra il chevron nel suo quadrato */
		border-right: 2px solid var(--mr-testo-secondario);
		border-bottom: 2px solid var(--mr-testo-secondario);
		transform: rotate(45deg);
		transition: transform .18s ease, border-color .18s ease;
	}
	/* Aperta: il chevron si gira di 180° e diventa rosso. */
	body.mr-preview .gm-item-wrapper .gm-toggle-icon.open::after,
	body.mr-preview .gm-item-wrapper a.active-parent .gm-toggle-icon::after,
	body.mr-preview .gm-horizontal-row-wrapper.is-open .gm-row-title .gm-toggle-icon::after {
		margin-top: 3px;
		transform: rotate(225deg);
		border-color: var(--mr-rosso);
	}
	/* La rotazione del tema sullo span non deve tornare a galla. */
	body.mr-preview .gm-item-wrapper .gm-toggle-icon.open,
	body.mr-preview .gm-horizontal-row-wrapper.is-open .gm-row-title .gm-toggle-icon {
		transform: none !important;
	}

	/* ------------------------------------------- 19.4 le sottovoci */
	/* Tutto il ramo aperto e' rosso, rientrato, senza filetti. */
	body.mr-preview .gm-sub-menu {
		padding: 2px 0 10px 12px !important;
		margin: 0 !important;
		list-style: none !important;
	}
	body.mr-preview .gm-sub-menu li {
		margin: 0 !important;
		background: transparent !important;
	}
	body.mr-preview .gm-sub-menu li a {
		display: flex;
		align-items: center;
		min-height: 40px;
		padding: 2px 0 !important;
		border: 0 !important;
		font-family: var(--mr-font-testo) !important;
		font-size: 14px !important;
		font-weight: 400 !important;
		line-height: 1.3;
		letter-spacing: .01em;
		text-transform: uppercase;
		text-decoration: none !important;
		color: var(--mr-rosso) !important;
	}
	body.mr-preview .gm-sub-menu li a:hover {
		color: var(--mr-rosso-hover) !important;
		text-decoration: underline !important;
		text-underline-offset: 3px;
	}

	/* --------------------------------------- 19.5 titoli di sezione */
	body.mr-preview .gm-menu-column h5 {
		display: block;
		margin: 22px 0 6px !important;
		padding: 0 0 10px !important;
		border-bottom: 1px solid var(--mr-bordo);
		background: transparent !important;
		font-family: var(--mr-font-testo) !important;
		font-size: 17px !important;
		font-weight: 700 !important;
		letter-spacing: .02em;
		line-height: 1.2;
		text-transform: uppercase;
		color: var(--mr-nero) !important;
	}
	body.mr-preview .gm-menu-column h5:first-child {
		margin-top: 8px !important;
	}

	/* ------------------------------- 19.6 menu DJI, stessa impaginazione */
	/* ALLINEAMENTO E PASSO DELLE RIGHE
	   Le quattro righe stanno in quattro widget HTML distinti del mega
	   menu. Max Mega Menu da' a ogni widget 10px di fianchi e 15px sopra
	   e sotto, ma non al primo ("Droni con fotocamera"), che li ha a
	   zero: da qui sia il rientro delle altre tre, sia i 30px di aria in
	   piu' fra una riga e l'altra (74px invece di 44).
	   Azzerando il riempimento sui widget che contengono la tendina DJI,
	   le quattro righe partono tutte dallo stesso punto e hanno lo stesso
	   passo delle voci del Catalogo.
	   Si tocca solo il widget giusto grazie a :has(); nei browser che non
	   lo conoscono resta la spaziatura di oggi. */
	body.mr-preview li.mega-menu-item:has(.gm-horizontal-row-wrapper) {
		padding: 0 !important;
	}

	body.mr-preview .gm-horizontal-row-wrapper,
	body.mr-preview .gm-horizontal-icon-menu {
		background: var(--mr-bianco) !important;
		border: 0 !important;
		box-shadow: none !important;
	}
	body.mr-preview h6.gm-row-title {
		/* width:auto, altrimenti il titolo resta largo quanto la colonna e
		   la sottolineatura non finisce dove finisce la scritta. */
		display: inline-flex !important;
		width: auto !important;
		max-width: 100%;
		align-items: center;
		justify-content: flex-start !important;
		gap: 4px;
		min-height: 44px;
		margin: 0 !important;
		padding: 2px 10px 2px 0 !important;
		border: 0 !important;          /* niente filetto grigio, come nel Catalogo */
		border-radius: 0 !important;
		background: transparent !important;
		font-family: var(--mr-font-testo) !important;
		font-size: 15px !important;
		font-weight: 400 !important;
		letter-spacing: .01em;
		text-transform: uppercase;
		color: var(--mr-testo) !important;
	}
	body.mr-preview .gm-horizontal-row-wrapper.is-open h6.gm-row-title {
		color: var(--mr-rosso) !important;
		text-decoration: underline !important;
		text-underline-offset: 3px;
	}
	body.mr-preview .gm-horizontal-icon-menu {
		padding: 2px 0 10px 12px !important;
	}
	body.mr-preview .gm-horizontal-icon-menu a.gm-icon-item {
		display: flex !important;
		align-items: center;
		gap: 10px;
		width: 100%;
		min-height: 40px;
		padding: 2px 0 !important;
		border: 0 !important;
		font-family: var(--mr-font-testo) !important;
		font-size: 14px !important;
		font-weight: 400 !important;
		letter-spacing: .01em;
		text-transform: uppercase;
		text-align: left !important;
		color: var(--mr-rosso) !important;
	}
	/* Il tema colora di #555 il testo dentro lo span, non il link: senza
	   questa riga le sottovoci DJI restano grigie mentre quelle del
	   Catalogo sono rosse. Le miniature le nasconde gia' il tema su
	   telefono, anche sul sito pubblico. */
	body.mr-preview .gm-horizontal-icon-menu a.gm-icon-item .gm-icon-title {
		color: inherit !important;
		font-family: var(--mr-font-testo) !important;
		font-size: 14px !important;
		font-weight: 400 !important;
		letter-spacing: .01em;
		text-transform: uppercase;
	}
	body.mr-preview .gm-horizontal-icon-menu a.gm-icon-item:hover {
		color: var(--mr-rosso-hover) !important;
		text-decoration: underline !important;
		text-underline-offset: 3px;
	}

}


/* ==========================================================================
   20. VOCE "CONTATTACI" A PILLOLA (solo in anteprima)
   La disposizione della testata e del menu sta nella sezione 8: qui c'e'
   solo la voce di menu con i colori che si invertono al passaggio del
   mouse, come sul sito indicato dal cliente.
   ========================================================================== */
@media (min-width: 1025px) {
	body.mr-preview #cb-row--header-main #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link[href*="contattaci"] {
		margin-left: 14px;
		padding: 7px 18px !important;
		border: 2px solid var(--mr-rosso) !important;
		border-radius: 999px !important;
		background: transparent !important;
		color: var(--mr-rosso) !important;
		font-weight: 600 !important;
		line-height: 1.1 !important;
		height: auto !important;
		transition: background-color .18s ease, color .18s ease, border-color .18s ease;
	}
	body.mr-preview #cb-row--header-main #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link[href*="contattaci"]:hover,
	body.mr-preview #cb-row--header-main #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link[href*="contattaci"]:focus,
	body.mr-preview #cb-row--header-main #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item.mega-toggle-on > a.mega-menu-link[href*="contattaci"] {
		background: var(--mr-rosso) !important;
		border-color: var(--mr-rosso) !important;
		color: var(--mr-bianco) !important;
	}
}


/* ==========================================================================
   21. BANNER ROSSO: due pulsanti affiancati
   ========================================================================== */
body.mr-preview .mr-banner__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}
body.mr-preview a.mr-btn--ghost-white {
	background: transparent !important;
	color: var(--mr-bianco) !important;
	border: 2px solid rgba(255, 255, 255, .75);
}
body.mr-preview a.mr-btn--ghost-white:hover {
	background: var(--mr-bianco) !important;
	border-color: var(--mr-bianco);
	color: var(--mr-rosso) !important;
}


/* ==========================================================================
   22. PAGINA "PRODOTTI DJI" (solo in anteprima)

   La pagina riusa i quattro shortcode [woo_menu_icone] del mega menu, che
   sono fatti per una tendina: qui le sezioni vanno tenute sempre aperte e
   le voci impaginate a griglia, con le immagini visibili (nel menu, su
   telefono, il tema le nasconde).
   ========================================================================== */
/* Niente testata: la pagina e' solo l'elenco delle categorie, come nel
   menu. Un po' d'aria sopra la prima sezione. */
body.mr-preview.mr-pagina-dji .elementor-widget-shortcode {
	padding-top: 30px;
}

/* Le quattro sezioni, sempre aperte */
body.mr-preview.mr-pagina-dji .mega-sub-menu,
body.mr-preview.mr-pagina-dji li.mega-menu-item {
	display: block !important;
	max-width: 1248px;
	margin: 0 auto !important;
	padding: 0 !important;
	list-style: none !important;
	background: transparent !important;
	border: 0 !important;
}
body.mr-preview.mr-pagina-dji .gm-horizontal-row-wrapper {
	max-width: 1248px;
	margin: 0 auto !important;
	padding: 26px 24px 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}
body.mr-preview.mr-pagina-dji h6.gm-row-title {
	display: block !important;
	width: auto !important;
	min-height: 0 !important;
	margin: 0 0 16px !important;
	padding: 0 0 10px !important;
	border-bottom: 1px solid var(--mr-bordo) !important;
	background: transparent !important;
	font-family: var(--mr-font-display) !important;
	font-size: 24px !important;
	font-weight: 800 !important;
	letter-spacing: .01em;
	text-transform: uppercase;
	text-decoration: none !important;
	color: var(--mr-nero) !important;
	text-align: left !important;
	cursor: default;
	pointer-events: none;   /* niente fisarmonica: qui resta tutto aperto */
}
body.mr-preview.mr-pagina-dji h6.gm-row-title .gm-toggle-icon { display: none !important; }

/* Le voci: griglia di tessere con l'immagine della categoria */
/* Il tema mette un ::before e un ::after vuoti sul contenitore (un vecchio
   clearfix): dentro una griglia diventano due caselle fantasma e spostano
   tutte le tessere di un posto. */
body.mr-preview.mr-pagina-dji .gm-horizontal-icon-menu::before,
body.mr-preview.mr-pagina-dji .gm-horizontal-icon-menu::after {
	display: none !important;
	content: none !important;
}
body.mr-preview.mr-pagina-dji .gm-horizontal-icon-menu {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 16px;
	padding: 0 0 10px !important;
	background: transparent !important;
}
body.mr-preview.mr-pagina-dji a.gm-icon-item {
	display: flex !important;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	min-height: 0 !important;
	padding: 0 !important;
	border: 1px solid var(--mr-bordo) !important;
	border-radius: var(--mr-raggio, 10px);
	overflow: hidden;
	background: var(--mr-bianco) !important;
	text-decoration: none !important;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
body.mr-preview.mr-pagina-dji a.gm-icon-item:hover {
	border-color: var(--mr-rosso) !important;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
	transform: translateY(-2px);
}
body.mr-preview.mr-pagina-dji a.gm-icon-item .gm-icon-img-wrap {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1;
	margin: 0 !important;
	background: var(--mr-grigio-chiaro);
}
body.mr-preview.mr-pagina-dji a.gm-icon-item .gm-icon-img-wrap img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	/* il tema ingrandisce le miniature del menu con transform: scale(1.6):
	   in una tessera di pagina l'immagine uscirebbe dal riquadro */
	transform: none !important;
	object-fit: contain;
	display: block;
	mix-blend-mode: multiply;
}
body.mr-preview.mr-pagina-dji a.gm-icon-item .gm-icon-title {
	display: block !important;
	padding: 12px 14px 14px !important;
	font-family: var(--mr-font-testo) !important;
	font-size: 14.5px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-align: left !important;
	color: var(--mr-nero) !important;
}
body.mr-preview.mr-pagina-dji a.gm-icon-item:hover .gm-icon-title {
	color: var(--mr-rosso) !important;
}
@media (max-width: 768px) {
	body.mr-preview.mr-pagina-dji .mr-djihead { padding: 32px 18px 4px; }
	body.mr-preview.mr-pagina-dji .gm-horizontal-row-wrapper { padding: 22px 18px 0 !important; }
	body.mr-preview.mr-pagina-dji .gm-horizontal-icon-menu {
		grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
		gap: 12px;
	}
}


/* ==========================================================================
   23. CARRELLO E CASSA — via l'azzurro (solo in anteprima)

   Solo colori: nessun campo, nessuna etichetta, nessun comportamento.
   L'azzurro veniva da due posti:
     - i radio e le caselle di spunta, che senza accent-color prendono il
       blu di sistema del browser;
     - gli avvisi di WooCommerce (.woocommerce-info), che hanno il filetto
       superiore e l'icona del font WooCommerce in #1E85BE.
   Restano azzurri, di proposito, il marchio PayPal e il suo riquadro
   "Paga in 3 rate": sono marchi registrati e il cliente ha chiesto di non
   toccare i pagamenti.
   ========================================================================== */
body.mr-preview input[type="radio"],
body.mr-preview input[type="checkbox"] {
	accent-color: var(--mr-rosso);
}

body.mr-preview .woocommerce-info,
body.mr-preview .woocommerce-message {
	border-top-color: var(--mr-rosso) !important;
}
body.mr-preview .woocommerce-info::before,
body.mr-preview .woocommerce-message::before {
	color: var(--mr-rosso) !important;
}

/* Lo stesso vale per gli avvisi dentro il riepilogo dell'ordine e per i
   link azzurri che WooCommerce stampa nei moduli di carrello e cassa. */
body.mr-preview .woocommerce-form-login-toggle .woocommerce-info::before,
body.mr-preview .woocommerce-form-coupon-toggle .woocommerce-info::before {
	color: var(--mr-rosso) !important;
}