/*
Theme Name:   DetergentiTheme
Theme URI:    https://xstore.8theme.com
Description:  XStore is a multi-purpose theme that offers the ultimate WordPress and WooCommerce synergy, providing a comprehensive, all-in-one solution.
Author:       8theme
Author URI:   https://www.8theme.com
Template:     xstore
Version:      1.0
Text Domain:  xstore-child
Tags: e-commerce, two-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, custom-logo, featured-images, full-width-template, threaded-comments, accessibility-ready, rtl-language-support, footer-widgets, sticky-post, theme-options, translation-ready, ecommerce, woocommerce, shop, elementor, business, corporate, blog, news, light, dark
*/

/* =====================================================================
   PALETTE DI RIFERIMENTO DEL SITO (da kirki-styles.css / Elementor)
   Blu:   #0a36ef
   Rosso: #ed2020 (rosso scuro alternativo: #c62828)
   ===================================================================== */
:root{
	--site-blue: #0a36ef;
	--site-red: #ed2020;
	--site-red-dark: #c62828;
}

/* =====================================================================
   TASK 7 - Sostituzione colore residuo #00796B con la palette del sito
   Selettori individuati in kirki-styles.css e nei CSS Elementor per-pagina
   (menu header, banner homepage, form, star rating, divider, footer widget)
   ===================================================================== */
.star-rating,
#review_form .stars{
	--et_yellow-color: var(--site-red) !important;
}
.template-content .footer .vc_wp_posts .widget_recent_entries li a:hover{
	color: var(--site-red) !important;
}
/* Voci menu header (Home, Detergenti, Lubrificanti, Lucidanti, Sbloccanti, ecc.) */
.elementor-nav-menu .elementor-item:hover,
.elementor-nav-menu .elementor-item.elementor-item-active,
.elementor-repeater-item-6215044:hover .menu-title,
.elementor-repeater-item-de4ca49:hover .menu-title,
.elementor-repeater-item-b7aae42:hover .menu-title,
.elementor-repeater-item-1406afd:hover .menu-title,
.elementor-repeater-item-99fd33a:hover .menu-title,
.elementor-repeater-item-b5c35ae:hover .menu-title,
.elementor-repeater-item-40341e2:hover .menu-title,
.theme-elementor-nav-menu-item-parent .elementor-item,
.etheme-elementor-nav-menu-item-parent{
	color: var(--site-red) !important;
}
.theme-elementor-nav-menu-item-parent .elementor-item.elementor-item-active,
span.elementor-item.elementor-item-active,
.elementor-item.elementor-item-active{
	fill: var(--site-red) !important;
	color: var(--site-red) !important;
}
span.elementor-item.elementor-item-active span{
	color: var(--site-red) !important;
}
.elementor-item.elementor-item-active:after{
	background-color: var(--site-red) !important;
	border-color: var(--site-red) !important;
}
/* =====================================================================
   TASK 12 - Icone menu header (Home, Detergenti, Lubrificanti, Lucidanti,
   Sbloccanti, Contatti). Aggiunte via ::before con SVG in mask-image,
   nessuna modifica ai dati Elementor: solo CSS agganciato agli href.
   ===================================================================== */
.etheme-elementor-nav-menu-item-parent{
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
}
/* TASK 20 - Sfondo a pillola sulle voci del menu desktop + menu centrato */
.etheme-elementor-nav-menu{
	justify-content: center !important;
}
.etheme-elementor-nav-menu-item-parent{
	padding: 8px 16px !important;
	border-radius: 50px !important;
	transition: background-color .2s ease, color .2s ease !important;
}
.etheme-elementor-nav-menu-item-parent:hover,
.etheme-elementor-nav-menu-item-parent .elementor-item.elementor-item-active{
	background-color: rgba(255,255,255,0.15) !important;
}
.etheme-elementor-nav-menu-item-parent::before{
	content: "";
	display: inline-block;
	width: 15px;
	height: 15px;
	background-color: currentColor;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	flex-shrink: 0;
}
a.etheme-elementor-nav-menu-item-parent[href="https://detergentindustriali.com/"]::before{
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.47 3.84a.75.75 0 0 1 1.06 0l8.69 8.69a.75.75 0 1 1-1.06 1.06l-.97-.97V19.5a2.25 2.25 0 0 1-2.25 2.25h-3a.75.75 0 0 1-.75-.75v-4.5a.75.75 0 0 0-.75-.75h-1.5a.75.75 0 0 0-.75.75v4.5a.75.75 0 0 1-.75.75h-3A2.25 2.25 0 0 1 4.5 19.5v-6.87l-.97.97a.75.75 0 1 1-1.06-1.06z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.47 3.84a.75.75 0 0 1 1.06 0l8.69 8.69a.75.75 0 1 1-1.06 1.06l-.97-.97V19.5a2.25 2.25 0 0 1-2.25 2.25h-3a.75.75 0 0 1-.75-.75v-4.5a.75.75 0 0 0-.75-.75h-1.5a.75.75 0 0 0-.75.75v4.5a.75.75 0 0 1-.75.75h-3A2.25 2.25 0 0 1 4.5 19.5v-6.87l-.97.97a.75.75 0 1 1-1.06-1.06z'/%3E%3C/svg%3E");
}
a.etheme-elementor-nav-menu-item-parent[href="https://detergentindustriali.com/product-category/detergenti/"]::before{
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.25c.28 0 .55.12.73.34l5.1 6.16a7 7 0 1 1-11.66 0l5.1-6.16c.18-.22.45-.34.73-.34z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.25c.28 0 .55.12.73.34l5.1 6.16a7 7 0 1 1-11.66 0l5.1-6.16c.18-.22.45-.34.73-.34z'/%3E%3C/svg%3E");
}
a.etheme-elementor-nav-menu-item-parent[href="https://detergentindustriali.com/product-category/lubrificanti/"]::before{
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 8.25A2.25 2.25 0 0 1 6.25 6h1.19l.66-1.98A1.5 1.5 0 0 1 9.53 3h4.94a1.5 1.5 0 0 1 1.42 1.02L16.56 6h1.19A2.25 2.25 0 0 1 20 8.25v10.5A2.25 2.25 0 0 1 17.75 21H6.25A2.25 2.25 0 0 1 4 18.75zm4 3a.75.75 0 0 0 0 1.5h8a.75.75 0 0 0 0-1.5zm0 3.5a.75.75 0 0 0 0 1.5h5a.75.75 0 0 0 0-1.5z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 8.25A2.25 2.25 0 0 1 6.25 6h1.19l.66-1.98A1.5 1.5 0 0 1 9.53 3h4.94a1.5 1.5 0 0 1 1.42 1.02L16.56 6h1.19A2.25 2.25 0 0 1 20 8.25v10.5A2.25 2.25 0 0 1 17.75 21H6.25A2.25 2.25 0 0 1 4 18.75zm4 3a.75.75 0 0 0 0 1.5h8a.75.75 0 0 0 0-1.5zm0 3.5a.75.75 0 0 0 0 1.5h5a.75.75 0 0 0 0-1.5z'/%3E%3C/svg%3E");
}
a.etheme-elementor-nav-menu-item-parent[href="https://detergentindustriali.com/product-category/lucidante/"]::before{
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.25 13.5 8l5.75 1.5-5.75 1.5L12 16.75 10.5 11 4.75 9.5 10.5 8zM19 15.5l.72 2.3 2.28.7-2.28.7-.72 2.3-.72-2.3-2.28-.7 2.28-.7z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.25 13.5 8l5.75 1.5-5.75 1.5L12 16.75 10.5 11 4.75 9.5 10.5 8zM19 15.5l.72 2.3 2.28.7-2.28.7-.72 2.3-.72-2.3-2.28-.7 2.28-.7z'/%3E%3C/svg%3E");
}
a.etheme-elementor-nav-menu-item-parent[href="https://detergentindustriali.com/product-category/sbloccante/"]::before{
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.25 3a4.5 4.5 0 0 0-4.36 5.6L4.4 14.09a1.5 1.5 0 0 0 0 2.12l3.4 3.4a1.5 1.5 0 0 0 2.12 0l5.48-5.49A4.5 4.5 0 0 0 21 9.75c0-.6-.12-1.17-.34-1.69l-2.7 2.7-2.12-2.12 2.7-2.7A4.48 4.48 0 0 0 14.25 3z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.25 3a4.5 4.5 0 0 0-4.36 5.6L4.4 14.09a1.5 1.5 0 0 0 0 2.12l3.4 3.4a1.5 1.5 0 0 0 2.12 0l5.48-5.49A4.5 4.5 0 0 0 21 9.75c0-.6-.12-1.17-.34-1.69l-2.7 2.7-2.12-2.12 2.7-2.7A4.48 4.48 0 0 0 14.25 3z'/%3E%3C/svg%3E");
}
a.etheme-elementor-nav-menu-item-parent[href="https://detergentindustriali.com/contatti/"]::before{
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.25 6.75A2.25 2.25 0 0 1 4.5 4.5h15a2.25 2.25 0 0 1 2.25 2.25v10.5A2.25 2.25 0 0 1 19.5 19.5h-15a2.25 2.25 0 0 1-2.25-2.25zm2.4-.75 7.1 5.3a.4.4 0 0 0 .5 0l7.1-5.3z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.25 6.75A2.25 2.25 0 0 1 4.5 4.5h15a2.25 2.25 0 0 1 2.25 2.25v10.5A2.25 2.25 0 0 1 19.5 19.5h-15a2.25 2.25 0 0 1-2.25-2.25zm2.4-.75 7.1 5.3a.4.4 0 0 0 .5 0l7.1-5.3z'/%3E%3C/svg%3E");
}

/* Banner homepage e bottoni con hover verde */
.banner-content .button-wrap .banner-button{
	background-color: var(--site-blue) !important;
}
.banner-content .button-wrap .banner-button:hover{
	color: var(--site-red) !important;
}
/* Form con submit verde (es. contatti) */
input[type="submit"]{
	background-color: var(--site-blue) !important;
}
input[type="submit"]:hover{
	background-color: var(--site-red) !important;
	color: #ffffff !important;
}
/* =====================================================================
   TASK 10 - Searchbar header a pillola
   ===================================================================== */
.etheme-search-form,
.etheme-search-input-wrapper,
.etheme-search-input-form-wrapper,
.etheme-search-form-input{
	border-radius: 50px !important;
}
.etheme-search-form-input,
.etheme-search-input-form-wrapper{
	overflow: hidden;
}
.etheme-search-input-form-wrapper button,
.etheme-search-input-form-wrapper .etheme-search-submit{
	border-radius: 50px !important;
}

/* =====================================================================
   Icone header (Preferiti/Carrello/Profilo) - sfondo e hover coerenti
   (prima erano piatte, senza sfondo, hover grigio #555555)
   ===================================================================== */
.etheme-elementor-off-canvas__toggle .elementor-button{
	background-color: #f3f5fb !important;
	border-radius: 50% !important;
	transition: background-color .2s ease, color .2s ease !important;
	width: 42px !important;
	height: 42px !important;
	padding: 0 !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}
.etheme-elementor-off-canvas__toggle .elementor-button .button-text{
	display: none !important;
}
.etheme-elementor-off-canvas__toggle .elementor-button .elementor-button-content-wrapper{
	justify-content: center;
	width: 100%;
	height: 100%;
}
.etheme-elementor-off-canvas__toggle .elementor-button .elementor-button-icon{
	margin: 0 !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.etheme-elementor-off-canvas__toggle .elementor-button svg{
	width: 18px;
	height: 18px;
}
.etheme-elementor-off-canvas__toggle .elementor-button:hover,
.etheme-elementor-off-canvas__toggle .elementor-button:hover:focus{
	background-color: var(--site-red) !important;
	color: #ffffff !important;
}
.etheme-elementor-off-canvas__toggle .elementor-button:hover svg,
.etheme-elementor-off-canvas__toggle .elementor-button:hover:focus svg{
	fill: #ffffff !important;
}

/* Divider decorativo */
[style*="--divider-color:#00796B"],
[style*="--divider-color: #00796B"]{
	--divider-color: var(--site-red) !important;
}
.elementor-widget-divider{
	--divider-color: var(--site-red);
}
/* Badge categoria prodotto (post categories) */
.etheme-post-categories a{
	background-color: var(--site-blue) !important;
}
/* Bottone "Load More" catalogo (nero -> blu con hover rosso, verificato in etheme-elementor-lazy-button) */
.etheme-elementor-lazy-button,
a.elementor-button.etheme-elementor-lazy-button{
	background-color: var(--site-blue) !important;
	color: #ffffff !important;
}
.etheme-elementor-lazy-button:hover{
	background-color: var(--site-red) !important;
	color: #ffffff !important;
}

/* =====================================================================
   TASK 13 - Dropdown/select e campi form a pillola
   ===================================================================== */
select,
.variations select,
.woocommerce-input-wrapper select{
	border-radius: 50px !important;
	padding: 8px 20px !important;
	height: auto !important;
	line-height: normal !important;
	box-sizing: border-box !important;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
.woocommerce-input-wrapper input{
	border-radius: 24px !important;
	height: auto !important;
	line-height: normal !important;
	box-sizing: border-box !important;
}
textarea{
	border-radius: 18px !important;
	line-height: normal !important;
}

/* =====================================================================
   TASK 15 - Breadcrumb: sfondo e colore coerenti su tutte le pagine
   ===================================================================== */
.woocommerce-breadcrumb,
nav.woocommerce-breadcrumb,
#breadcrumb{
	background: #f3f5fb;
	padding: 10px 18px;
	border-radius: 10px;
	display: inline-block;
	margin-bottom: 16px;
}
.woocommerce-breadcrumb a,
#breadcrumb a{
	color: var(--site-blue);
	text-decoration: none;
}
.woocommerce-breadcrumb a:hover,
#breadcrumb a:hover{
	color: var(--site-red);
}
.woocommerce-breadcrumb .delimeter,
.woocommerce-breadcrumb .delimiter,
#breadcrumb .delimeter,
#breadcrumb .delimiter{
	color: #999999;
	margin: 0 6px;
}
/* Bottone secondario "Vedi il carrello" (grigio piatto -> outline coerente) */
.button.wc-forward{
	background-color: #ffffff !important;
	color: var(--site-blue) !important;
	border: 2px solid var(--site-blue) !important;
}
.button.wc-forward:hover{
	background-color: var(--site-blue) !important;
	color: #ffffff !important;
}

/* =====================================================================
   TASK 2 + TASK 9 - Bottoni a pillola + effetti hover moderni
   Applica forma "a pillola" e una transizione morbida e più curata
   a tutti i bottoni del sito (WooCommerce, Elementor, form).
   ===================================================================== */
.button,
a.button,
button.button,
input[type="submit"],
input[type="button"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.add_to_cart_button,
.single_add_to_cart_button,
.checkout-button,
.elementor-button,
.elementor-button-wrapper .elementor-button,
.banner-content .button-wrap .banner-button{
	border-radius: 50px !important;
	transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s cubic-bezier(.4,0,.2,1), background-color .25s ease, color .25s ease !important;
	overflow: hidden;
	letter-spacing: .2px;
	box-shadow: 0 3px 10px rgba(10, 36, 239, 0.12);
}
.button:hover,
a.button:hover,
button.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover,
.add_to_cart_button:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover,
.elementor-button:hover,
.elementor-button-wrapper .elementor-button:hover{
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(10, 54, 239, 0.28);
}
.button:active,
a.button:active,
button.button:active,
input[type="submit"]:active,
input[type="button"]:active,
.add_to_cart_button:active,
.single_add_to_cart_button:active,
.checkout-button:active,
.elementor-button:active{
	transform: translateY(0) scale(.97);
	box-shadow: 0 3px 8px rgba(10, 36, 239, 0.18);
}
.single_add_to_cart_button:hover,
.checkout-button:hover{
	box-shadow: 0 10px 24px rgba(237, 32, 32, 0.32);
}

/* =====================================================================
   TASK 8 - Fix immagini prodotto tagliate/deformate ("object-fit: fill"
   distorceva/ingrandiva le foto in modo incoerente). Con "contain" la
   foto si vede sempre intera, mai tagliata o deformata.
   ===================================================================== */
/* Pagina prodotto singolo (galleria principale) */
.woocommerce-product-gallery img,
.woocommerce div.product .images img,
.woocommerce div.product .woocommerce-product-gallery__image img{
	object-fit: contain !important;
	max-height: 460px;
	width: auto;
	max-width: 100%;
	margin: 0 auto;
}
.woocommerce-product-gallery__image,
.woocommerce div.product .images{
	max-height: 460px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
/* Miniature galleria prodotto */
.woocommerce-product-gallery__trigger,
.flex-control-thumbs img{
	object-fit: contain !important;
}
/* Card prodotto in catalogo/archivio (sia WooCommerce nativo che Elementor Loop Grid) */
.woocommerce ul.products li.product img,
.products .product img,
.product .attachment-woocommerce_thumbnail,
[class*="loop-item"] img,
.e-loop-item img{
	object-fit: contain !important;
	max-height: 220px;
	width: auto;
	max-width: 100%;
	margin: 0 auto;
}

/* =====================================================================
   TASK 6 - Miglioramento estetico card prodotto (catalogo/archivio)
   Solo stile: ombre, arrotondamenti, hover. Nessun elemento aggiunto o
   rimosso rispetto alla struttura esistente della card.
   ===================================================================== */
.woocommerce ul.products li.product,
.products .product{
	border-radius: 14px;
	transition: transform .3s ease, box-shadow .3s ease;
	overflow: hidden;
}
.woocommerce ul.products li.product:hover,
.products .product:hover{
	transform: translateY(-4px);
	box-shadow: 0 14px 30px rgba(10, 36, 239, 0.12);
}
.woocommerce ul.products li.product img,
.products .product img{
	transition: transform .4s ease;
}
.woocommerce ul.products li.product:hover img,
.products .product:hover img{
	transform: scale(1.04);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.products .product .woocommerce-loop-product__title{
	transition: color .2s ease;
}
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title,
.products .product:hover .woocommerce-loop-product__title{
	color: var(--site-red);
}

/* =====================================================================
   TASK 5 - Bottom app bar (mobile/tablet)
   Visibile solo sotto i 992px. Markup iniettato via functions.php
   (hook wp_footer), qui solo lo stile.
   ===================================================================== */
.di-bottom-appbar{
	display: none;
}
@media (max-width: 991px){
	.di-bottom-appbar{
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99999;
		background: #ffffff;
		box-shadow: 0 -4px 16px rgba(0,0,0,0.12);
		padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
		justify-content: space-between;
		align-items: stretch;
	}
	.di-bottom-appbar a{
		flex: 1 1 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		color: #333333;
		text-decoration: none;
		font-size: 11px;
		font-weight: 600;
		padding: 6px 2px;
		position: relative;
	}
	.di-bottom-appbar a svg{
		width: 22px;
		height: 22px;
		fill: none;
		stroke: currentColor;
		stroke-width: 1.8;
	}
	.di-bottom-appbar a.is-active{
		color: var(--site-blue);
	}
	.di-bottom-appbar a:active,
	.di-bottom-appbar a:hover{
		color: var(--site-red);
	}
	.di-bottom-appbar .di-appbar-badge{
		position: absolute;
		top: 0;
		right: 18%;
		background: var(--site-red);
		color: #fff;
		font-size: 9px;
		font-weight: 700;
		min-width: 15px;
		height: 15px;
		line-height: 15px;
		border-radius: 50%;
		text-align: center;
		padding: 0 2px;
	}
	/* Evita che la bottom bar copra contenuti/sticky cart */
	body{
		padding-bottom: 62px;
	}
}

/* =====================================================================
   TASK 4 - Redesign leggero pagina prodotto singolo
   Solo stile (tab, spaziature, galleria), struttura e sticky cart bar
   invariate.
   ===================================================================== */
.woocommerce-tabs ul.tabs li.active,
.woocommerce-tabs ul.tabs li a{
	transition: color .2s ease;
}
.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover{
	color: var(--site-blue) !important;
}
.woocommerce-tabs ul.tabs li.active:after,
.woocommerce-tabs ul.tabs li.active::before{
	background-color: var(--site-red) !important;
	border-color: var(--site-red) !important;
}
.woocommerce-product-gallery{
	border-radius: 16px;
	padding: 12px;
	background: #fafbfe;
}
.summary.entry-summary{
	padding-left: 8px;
}
div.product .woocommerce-tabs{
	margin-top: 32px;
}

/* =====================================================================
   TASK 16 - Margine laterale su laptop 15" (~1280-1440px): il contenitore
   Elementor ha max-width 1440px ma padding 0, quindi su schermi piu'
   stretti del max-width il contenuto tocca i bordi. Aggiunto respiro
   laterale globale, sicuro (box-sizing border-box mantiene il max-width).
   ===================================================================== */
@media (min-width: 992px){
	.elementor-section-boxed > .elementor-container,
	.elementor-container{
		padding-left: 24px;
		padding-right: 24px;
		box-sizing: border-box;
	}
}

/* =====================================================================
   TASK 19 - Barra di testo scorrevole (marquee) in cima alla pagina
   ===================================================================== */
.di-marquee-bar{
	background: var(--site-blue);
	color: #ffffff;
	overflow: hidden;
	white-space: nowrap;
	padding: 7px 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .3px;
}
.di-marquee-track{
	display: inline-flex;
	animation: di-marquee-scroll 22s linear infinite;
}
.di-marquee-track span{
	display: inline-block;
	padding-right: 60px;
}
@keyframes di-marquee-scroll{
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
	.di-marquee-track{
		animation: none;
	}
}

/* =====================================================================
   TASK 21 (fix) - Box descrizione prodotto: sfondo grigio chiaro + bordi
   arrotondati. Il tema forzava padding:45px 0 0 0 (solo sopra), da qui
   il testo "attaccato" ai lati/fondo e troppo spazio sopra. Con
   !important su padding uniforme si risolve; overflow:hidden evita che
   il margine del paragrafo interno "sfugga" fuori dal box (margin
   collapse).
   ===================================================================== */
.woocommerce-Tabs-panel--description{
	background: #f5f6fa !important;
	border-radius: 14px !important;
	padding: 28px !important;
	overflow: hidden;
}
.woocommerce-Tabs-panel--description > *:first-child{
	margin-top: 0 !important;
}
.woocommerce-Tabs-panel--description > *:last-child{
	margin-bottom: 0 !important;
}

/* =====================================================================
   TASK 22 (fix) - Layout compatto pagina prodotto singolo, con CSS Grid:
   Riga 1: Formato | Quantita' (stessa riga, allineati in basso)
   Riga 2: Aggiungi al carrello (larghezza piena)
   Riga 3: Acquista ora (larghezza piena)
   ".single_variation_wrap" e il suo contenuto diventano "display:contents"
   cosi' i loro figli (quantita', bottoni) entrano direttamente nella
   griglia del form, allo stesso livello di "Formato".
   ===================================================================== */
.variations_form.cart{
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	column-gap: 20px;
	row-gap: 12px;
	align-items: end;
}
.variations_form.cart > .variations{
	grid-column: 1;
	grid-row: 1;
	margin: 0;
}
.variations_form.cart > .single_variation_wrap,
.woocommerce-variation-add-to-cart.variations_button{
	display: contents !important;
}
.variations_form.cart .quantity{
	grid-column: 2;
	grid-row: 1;
}
.variations_form.cart .single_add_to_cart_button{
	grid-column: 1 / -1;
	grid-row: 2;
	width: 100%;
}
.variations_form.cart .et-single-buy-now{
	grid-column: 1 / -1;
	grid-row: 3;
	width: 100%;
}

/* Scambio posizione SKU <-> blocco "Hai domande sul prodotto?" (WhatsApp) */
.elementor-widget-wrap.elementor-element-populated{
	display: flex;
	flex-direction: column;
}
.elementor-element-28663a75{
	order: 8;
}
.elementor-element-5ed83138{
	order: 6;
}
.elementor-element-ecd3575{
	order: 5;
}