/* Badge Novità */
.woocommerce ul.products li.product { position: relative; }
.oz-badge-new {
	position: absolute;
	z-index: 5;
	top: 10px;
	left: 10px;
	background: #d23c3c;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	padding: 6px 10px;
	border-radius: 3px;
	letter-spacing: .3px;
	text-transform: uppercase;
}
.single-product .oz-badge-new { top: 16px; left: 16px; }

/* Pulsante WhatsApp */
.oz-whatsapp-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 12px 0;
	padding: 12px 18px;
	background: #25d366;
	color: #fff !important;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 600;
	line-height: 1.25;
	max-width: 420px;
}
.oz-whatsapp-btn:hover { background: #1eba57; }
.oz-whatsapp-btn .oz-wa-ico { display: inline-flex; flex: 0 0 auto; }
.oz-whatsapp-btn .oz-wa-svg { display: block; }
.oz-whatsapp-btn .oz-wa-text { font-size: 15px; }

/* Quote button + modale */
.oz-quote-wrap { margin: 14px 0; }
.oz-modal { position: fixed; inset: 0; z-index: 99999; display: none; }
.oz-modal.is-open { display: block; }
.oz-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.oz-modal-box {
	position: relative;
	z-index: 1;
	max-width: 560px;
	margin: 5vh auto;
	max-height: 90vh;
	overflow: auto;
	background: #fff;
	border-radius: 8px;
	padding: 24px 26px;
	box-shadow: 0 12px 40px rgba(0,0,0,.3);
}
.oz-modal-close {
	position: absolute;
	top: 10px;
	right: 12px;
	background: none;
	border: 0;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	color: #666;
}
.oz-modal-box h3 { margin: 0 0 6px; }
.oz-modal-prod { margin: 0 0 16px; color: #444; }
.oz-field { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; }
.oz-field label { font-weight: 600; font-size: 14px; }
.oz-field input, .oz-field select, .oz-field textarea { width: 100%; font-family: inherit; }
.oz-field.oz-privacy label { font-weight: 400; flex-direction: row; }
.oz-field .oz-fixed { color: #555; }
.oz-form-msg { padding: 10px 12px; border-radius: 4px; margin: 8px 0; }
.oz-form-msg.ok { background: #e6f4ea; color: #1e7e34; }
.oz-form-msg.err { background: #fbeaea; color: #b02a2a; }

/* Allegati / schede tecniche */
.oz-allegati { margin: 16px 0; }
.oz-allegati-title { margin: 0 0 10px; font-size: 18px; }
.oz-allegati-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.oz-allegati-list li { margin: 0; }
.oz-allegato {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: #f3f4f6;
	border: 1px solid #e0e2e6;
	border-radius: 6px;
	text-decoration: none;
	color: #1f2937;
	font-weight: 600;
}
.oz-allegato:hover { background: #e9ebef; }
.oz-allegato-ico { font-size: 16px; }

/* Prezzo "a partire da" / su richiesta */
/* Prezzo: stesso stile per "a partire da" e "Prezzo su richiesta" (eredita dal tema) */
.oz-price-from,
.oz-price-request {
	font-weight: 700;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}
.oz-price-from-single { margin: 8px 0; }

/* Opzioni nel form aggiungi-al-carrello */
.oz-cart-options { margin: 10px 0 14px; }
.oz-cart-options .oz-field { display: flex; flex-direction: column; gap: 4px; margin: 0 0 10px; max-width: 380px; }
.oz-cart-options .oz-field label { font-weight: 600; font-size: 14px; }
.oz-cart-options .oz-fixed { color: #555; }

/* Pagina richiesta ordine */
.oz-request-page { max-width: 760px; }
.oz-request-form { margin-top: 18px; }
.oz-req-empty { text-align: center; padding: 30px 10px; }
.oz-req-empty .oz-list-empty { font-size: 17px; color: #555; }
.oz-req-msg { margin: 8px 0; font-weight: 600; }
.oz-req-wrap { margin: 14px 0; }
.oz-req-remove { color: #b02a2a; }

/* Filtri */
.oz-filtri { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin: 0 0 18px; }
.oz-filtri label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 14px; }
.oz-filtri select { min-width: 180px; }
.oz-filtri-reset { align-self: center; }

/* Ricerca AJAX */
.oz-search { position: relative; max-width: 480px; }
.oz-search-input { width: 100%; }
.oz-search-results {
	display: none; position: absolute; z-index: 50; left: 0; right: 0; top: 100%;
	background: #fff; border: 1px solid #ddd; border-radius: 0 0 6px 6px;
	max-height: 360px; overflow: auto; box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.oz-search-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; text-decoration: none; color: #222; border-bottom: 1px solid #f0f0f0; }
.oz-search-item:hover { background: #f6f7f9; }
.oz-search-item img { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; }
.oz-search-item em { color: #888; font-style: normal; font-size: 12px; }
.oz-search-item-noimg { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 4px; background: var(--oz-sand, #f6f6f3); }
.oz-search-empty { padding: 10px 12px; color: #888; }

/* Tendina di ricerca divisa per gruppo (Prodotti / Ambienti e collezioni / Magazine): ogni
   gruppo ha un'etichetta piccola in maiuscolo, coerente con le altre etichette del sito
   (es. .oz-altri-label), cosi' chi cerca capisce subito a cosa appartiene ogni risultato. */
.oz-search-group:not(:last-child) { border-bottom: 6px solid #f6f6f3; }
.oz-search-group-label {
	display: block;
	padding: 8px 12px 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--oz-ink-soft, #6b7280);
}

/* Aggiungi alla richiesta / lista */
.oz-addlist { margin: 14px 0; }
.oz-addlist--flash { outline: 3px solid #2271b1; outline-offset: 4px; transition: outline .3s; border-radius: 4px; }

/* Barra sticky mobile */
.oz-sticky-bar { display: none; }
@media (max-width: 768px) {
	.oz-sticky-bar {
		display: flex; align-items: center; gap: 10px;
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998;
		background: #fff; border-top: 1px solid #e0e2e6;
		padding: 10px 14px; box-shadow: 0 -4px 16px rgba(0,0,0,.12);
	}
	.oz-sticky-bar .oz-sticky-name { flex: 1; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.oz-sticky-bar .oz-sticky-btn { flex: 0 0 auto; }
	.oz-float-list { bottom: 74px; }
}
.oz-addlist-fields { max-width: 420px; margin-bottom: 12px; }
.oz-addlist-actions { margin: 0 0 6px; }
.oz-addlist-msg { display: block; margin-top: 6px; font-weight: 600; }
.oz-whatsapp-btn .oz-wa-svg { vertical-align: middle; }
.oz-correlati { margin-top: 34px; }
.oz-correlati-title { margin-bottom: 16px; }

/* Icona carrello [officezone_cart] */
.oz-cart-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: inherit;
	text-decoration: none;
	line-height: 1;
}
.oz-cart-icon .oz-cart-svg { display: block; }
.oz-cart-icon .oz-cart-count {
	position: absolute;
	top: -8px;
	left: 14px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	box-sizing: border-box;
	background: #d23c3c;
	color: #fff;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}
.oz-cart-icon .oz-cart-label { font-weight: 600; }
.oz-float-list {
	position: fixed; right: 18px; bottom: 18px; z-index: 9999;
	background: var(--oz-ink, #424242); color: #fff !important; padding: 10px 16px; border-radius: 4px;
	text-decoration: none; font-weight: 700; font-size: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.oz-float-count {
	display: inline-block; min-width: 22px; height: 22px; line-height: 22px; text-align: center;
	background: #d23c3c; border-radius: 50%; margin-left: 6px; font-size: 13px;
}
/* Newsletter (footer) */
.oz-newsletter { max-width: 420px; }
.oz-nl-title { display: block; font-weight: 700; margin-bottom: 8px; }
.oz-nl-row { display: flex; gap: 8px; }
.oz-nl-row input[type=email] { flex: 1; }
.oz-nl-privacy { display: block; font-size: 13px; margin-top: 6px; }
.oz-nl-msg { margin-top: 8px; padding: 8px 10px; border-radius: 4px; }
.oz-nl-msg.ok { background: #e6f4ea; color: #1e7e34; }
.oz-nl-msg.err { background: #fbeaea; color: #b02a2a; }

.oz-list-items { overflow-x: auto; }
.oz-list-table { width: 100%; border-collapse: collapse; margin: 0 0 18px; min-width: 560px; }
.oz-list-table th, .oz-list-table td { border: 1px solid #e5e7eb; padding: 8px 10px; text-align: left; vertical-align: middle; }
.oz-list-empty { padding: 20px 0; color: #666; }
.oz-list-imgcell { width: 72px; }
.oz-list-thumb { display: block; width: 60px; height: 60px; }
.oz-list-thumb img { width: 60px; height: 60px; object-fit: cover; border-radius: 6px; display: block; }
.oz-list-thumb--empty { background: #f0f0f1; border-radius: 6px; }
.oz-list-name { font-weight: 600; }

/* Filtri attivi (chip sopra la griglia prodotti).
   I colori ereditano dai token del tema quando ci sono, con fallback neutri. */
.oz-active-filters:empty { display: none; }
.oz-active-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	margin: 0 0 20px;
	padding: 0 0 16px;
	border-bottom: 1px solid var(--oz-line, #e5e7eb);
}
.oz-active-filters:not(:has(.oz-af-list)) { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.oz-af-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--oz-ink-soft, #6b7280);
}
.oz-af-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.oz-af-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px 6px 12px;
	background: var(--oz-sand, #f6f6f3);
	border: 1px solid var(--oz-line, #e5e7eb);
	border-radius: 2px;
	font-size: 13px;
	line-height: 1.3;
	color: var(--oz-ink, #1f2328);
}
.oz-af-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
	color: var(--oz-ink-soft, #6b7280);
	transition: background .15s ease, color .15s ease;
}
.oz-af-remove:hover, .oz-af-remove:focus {
	background: var(--oz-ink, #1f2328);
	color: #fff;
	text-decoration: none;
}
/* Blocco "Corrispondenze anche in" nella pagina risultati di ricerca: la ricerca principale
   resta sui soli prodotti (il tema/WooCommerce non gestirebbe bene risultati misti nella
   stessa griglia), questo blocco aggiunge solo i link diretti quando il termine cercato
   corrisponde anche ad ambienti, collezioni o articoli del Magazine. */
.oz-altri-risultati {
	margin: 0 0 24px;
	padding: 16px 18px;
	background: var(--oz-sand, #f6f6f3);
	border: 1px solid var(--oz-line, #e5e7eb);
	border-radius: 2px;
}
.oz-altri-titolo {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--oz-ink-soft, #6b7280);
}
.oz-altri-gruppo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 8px; }
.oz-altri-gruppo:last-child { margin-bottom: 0; }
.oz-altri-label { font-size: 13px; font-weight: 600; color: var(--oz-ink, #1f2328); margin-right: 4px; }
.oz-altri-chip, .oz-altri-articolo {
	display: inline-block;
	padding: 5px 12px;
	background: #fff;
	border: 1px solid var(--oz-line, #e5e7eb);
	border-radius: 2px;
	font-size: 13px;
	color: var(--oz-ink, #1f2328);
	text-decoration: none;
}
.oz-altri-chip:hover, .oz-altri-articolo:hover {
	border-color: var(--oz-ink, #1f2328);
	text-decoration: none;
}

.oz-af-reset {
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: underline;
	color: var(--oz-ink-soft, #6b7280);
}
.oz-af-reset:hover { color: var(--oz-ink, #1f2328); }
@media (max-width: 767px) {
	.oz-active-filters { gap: 8px; }
	.oz-af-chip { font-size: 12px; padding: 5px 6px 5px 10px; }
}

/* --------------------------------------------------------------------------
   Sidebar filtri catalogo
   Categoria e Sottocategoria restano aperte: sono i due filtri che il cliente
   usa per primi. Collezione e Destinazione nascono chiuse, cosi la colonna
   resta leggibile invece di diventare un muro di voci.
   -------------------------------------------------------------------------- */
.oz-filtri-titolo {
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: .02em;
	margin: 0 0 16px;
}
.oz-filtro {
	border-bottom: 1px solid var(--oz-line, #e5e7eb);
	padding-bottom: 14px;
	margin-bottom: 14px;
}
.oz-filtro:last-child { border-bottom: 0; margin-bottom: 0; }

.oz-filtro-testa {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--oz-ink, #1f2328);
	text-align: left;
}
.oz-filtro-freccia {
	width: 8px;
	height: 8px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform .18s ease;
	flex: 0 0 auto;
	margin-left: 10px;
}
.oz-filtro.is-aperta .oz-filtro-freccia { transform: rotate(-135deg) translateY(-2px); }

.oz-filtro-corpo {
	list-style: none;
	margin: 0;
	padding: 0;
	display: none;
	max-height: 260px;
	overflow-y: auto;
}
.oz-filtro.is-aperta .oz-filtro-corpo { display: block; margin-top: 12px; }

.oz-filtro-voce a {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 5px 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--oz-ink, #1f2328);
	text-decoration: none;
}
.oz-filtro-voce a:hover .oz-filtro-nome { text-decoration: underline; }

.oz-filtro-segno {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	border: 1px solid var(--oz-line, #d4d4d8);
	border-radius: 2px;
	background: #fff;
	position: relative;
}
.oz-filtro-voce.is-attiva .oz-filtro-segno {
	background: var(--oz-ink, #1f2328);
	border-color: var(--oz-ink, #1f2328);
}
.oz-filtro-voce.is-attiva .oz-filtro-segno::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 1px;
	width: 4px;
	height: 8px;
	border-right: 1.5px solid #fff;
	border-bottom: 1.5px solid #fff;
	transform: rotate(45deg);
}
.oz-filtro-voce.is-attiva .oz-filtro-nome { font-weight: 600; }
.oz-filtro-nome { flex: 1 1 auto; }
.oz-filtro-num {
	flex: 0 0 auto;
	font-size: 11px;
	color: var(--oz-ink-soft, #6b7280);
	font-variant-numeric: tabular-nums;
}

/* Avviso di correzione refuso nella ricerca: la correzione va detta, non nascosta. */
.oz-ricerca-corretta {
	font-size: 13px;
	color: var(--oz-ink-soft, #6b7280);
	margin: 0 0 16px;
	padding: 10px 14px;
	background: var(--oz-sand, #f6f6f3);
	border-left: 3px solid var(--oz-ink, #1f2328);
}
.oz-ricerca-corretta em { font-style: normal; text-decoration: line-through; }

/* Barra di ricerca nell'header: prima era dentro un popup, quindi di fatto invisibile. */
.oz-search--barra { position: relative; width: 100%; max-width: 380px; }
.oz-search--barra form {
	display: flex;
	align-items: center;
	gap: 6px;
	border: 1px solid var(--oz-line, #d4d4d8);
	background: #fff;
	border-radius: 2px;
	padding: 0 6px 0 12px;
	transition: border-color .15s ease;
}
.oz-search--barra form:focus-within { border-color: var(--oz-ink, #1f2328); }
.oz-search--barra .oz-search-input {
	flex: 1 1 auto;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	padding: 9px 0 !important;
	min-height: 0 !important;
	/* Senza !important restava a 14px: vince il selettore del kit sui campi. */
	font-size: 13px !important;
	color: var(--oz-ink, #1f2328);
}
.oz-search--barra .oz-search-input:focus { outline: none; box-shadow: none !important; }
.oz-search--barra .oz-search-input::placeholder { color: var(--oz-ink-soft, #9296a1); }
/* Il kit di Elementor stila OGNI <button> del sito con `.elementor-kit-5 button`, che ha
   specificita' (0,1,1) e batte una classe sola: la lente si ritrovava padding 19px 30px e il
   fondo dell'accento. Su un box border-box da 60x38 con 60px di padding orizzontale lo spazio
   per il contenuto resta 0, l'SVG calcolava width:0 e spariva del tutto — al suo posto si
   vedeva solo il quadratino grigio del fondo. Da qui il selettore a due classi: (0,2,0) sta
   sopra al kit e ci resta anche dopo un suo aggiornamento. Vale per tutti i <button> della
   ricerca, non solo per la lente. */
.oz-search .oz-search-btn,
.oz-search .oz-search-toggle,
.oz-search .oz-search-chiudi {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 2px;
	background: none;
	box-shadow: none;
	color: var(--oz-ink, #1f2328);
	cursor: pointer;
	min-height: 0;
	text-transform: none;
	letter-spacing: normal;
}
.oz-search .oz-search-btn {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	padding: 0;
}
.oz-search .oz-search-btn:hover { opacity: .65; background: none; }
.oz-search--barra .oz-search-results {
	position: absolute;
	z-index: 60;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid var(--oz-line, #e5e7eb);
	box-shadow: 0 12px 32px rgba(0,0,0,.10);
	max-height: 420px;
	overflow-y: auto;
	display: none;
}
@media (max-width: 1024px) {
	.oz-search--barra { max-width: 100%; }
}

/* ==========================================================================
   Ricerca a pannello (header)

   La ricerca era gia' stata dentro un popup e ne era uscita perche' non la trovava
   nessuno: il comando era una lente muta. Qui il pulsante porta la parola "Cerca"
   accanto all'icona ed e' disegnato come un campo raccolto, quindi si legge per quello
   che e' anche senza aprirlo. Sotto i 768px resta la sola lente, dove lo spazio non c'e'.

   Il pannello e' un <dialog> aperto con showModal(): sta nel top layer, quindi non lo
   tocca il will-change:transform dell'header appiccicoso (che invece farebbe agganciare
   un position:fixed all'header anziche' alla finestra), e porta con se' Esc, fondo
   scurito e focus che non esce.
   ========================================================================== */
.oz-search--popup { position: static; display: inline-flex; max-width: none; }

.oz-search--popup .oz-search-toggle {
	gap: 8px;
	height: 38px;
	padding: 0 14px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	color: inherit;
	border: 1px solid var(--oz-line, #E3E2DB);
	background: #fff;
	transition: border-color .15s ease;
}
.oz-search--popup .oz-search-toggle:hover,
.oz-search--popup .oz-search-toggle[aria-expanded="true"] {
	border-color: var(--oz-ink, #1f2328);
	background: #fff;
}
.oz-search--popup .oz-search-toggle svg { flex: 0 0 auto; display: block; }

.oz-search-panel {
	position: fixed;
	top: var(--oz-search-top, 70px);
	left: 0;
	right: 0;
	width: 100%;
	max-width: 100%;
	max-height: calc(100dvh - var(--oz-search-top, 70px));
	margin: 0;
	padding: 0;
	border: 0;
	border-top: 1px solid var(--oz-line, #E3E2DB);
	border-radius: 0;
	background: #fff;
	color: var(--oz-ink, #1f2328);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .12);
	overflow: hidden;
}
/* Lo scuro parte da sotto l'header, cosi' il pannello sembra scendere da li' invece che
   galleggiare su una pagina spenta. Se il browser non passa la variabile allo sfondo del
   dialog, i 70px di scorta sono l'altezza dell'header. */
.oz-search-panel::backdrop {
	background: linear-gradient(to bottom,
		rgba(20, 22, 24, 0) 0,
		rgba(20, 22, 24, 0) var(--oz-search-top, 70px),
		rgba(20, 22, 24, .42) var(--oz-search-top, 70px));
}

.oz-search-panel-inner {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0 12px;
	max-width: 1560px;
	margin: 0 auto;
	padding: 24px var(--oz-gutter, 40px) 26px;
}
.oz-search-panel form {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 0 10px;
	border: 0;
	border-bottom: 2px solid var(--oz-ink, #1f2328);
	border-radius: 0;
	background: none;
}
/* Il corpo del carattere vuole l'!important come il resto: il kit di Elementor stila i campi
   con `.elementor-kit-5 input:not([type="button"]):not([type="submit"])`, e i due :not()
   contano nella specificita' — (0,3,1) contro (0,2,0) di due classi. */
.oz-search-panel .oz-search-input {
	flex: 1 1 auto;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	padding: 4px 0 !important;
	min-height: 0 !important;
	font-size: 22px !important;
	line-height: 1.3 !important;
	color: var(--oz-ink, #1f2328);
}
.oz-search-panel .oz-search-input:focus { outline: none; box-shadow: none !important; }
.oz-search-panel .oz-search-input::placeholder { color: var(--oz-ink-faint, #8A9096); }
.oz-search-panel .oz-search-btn { width: 34px; height: 34px; }
.oz-search-panel .oz-search-chiudi {
	grid-column: 2;
	grid-row: 1;
	align-self: center;
	width: 38px;
	height: 38px;
	padding: 0;
	color: var(--oz-ink-soft, #5B6167);
}
.oz-search-panel .oz-search-chiudi:hover { color: var(--oz-ink, #1f2328); }

/* Nel pannello i suggerimenti stanno nel flusso, non in tendina: la tendina serviva a
   sovrapporsi alla pagina, qui la pagina e' gia' coperta. */
.oz-search-panel .oz-search-results {
	grid-column: 1 / -1;
	grid-row: 2;
	position: static;
	margin-top: 14px;
	max-height: min(52vh, 460px);
	overflow-y: auto;
	border: 0;
	box-shadow: none;
	background: none;
}

.oz-search .oz-search-toggle:focus-visible,
.oz-search .oz-search-chiudi:focus-visible,
.oz-search .oz-search-btn:focus-visible {
	outline: 2px solid var(--oz-ink, #1f2328);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
	.oz-search-panel[open] { animation: oz-search-scende .18s ease-out; }
	@keyframes oz-search-scende {
		from { opacity: 0; transform: translateY(-10px); }
		to   { opacity: 1; transform: none; }
	}
}

/* Fra tablet e desktop piccolo i tre gruppi dell'header valgono un terzo di riga ciascuno:
   la riga e' piena per costruzione e il pulsante va a capo comunque. Invece di lasciarlo
   cadere a sinistra da solo, lo si allinea ai comandi che stanno sopra. Sotto i 768px il
   problema non c'e': li' l'header e' su una riga sola e il pulsante ci sta. */
@media (min-width: 768px) and (max-width: 1024px) {
	.elementor-location-header .elementor-widget-shortcode:has(.oz-search--popup) {
		flex: 1 0 100%;
		width: 100%;
		order: 10;
		display: flex;
		justify-content: flex-end;
	}
}

@media (max-width: 767px) {
	.oz-search--popup .oz-search-toggle { width: 38px; padding: 0; }
	/* L'etichetta esce dalla vista ma resta al lettore di schermo. */
	.oz-search--popup .oz-search-toggle-testo {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.oz-search-panel-inner { padding: 18px var(--oz-gutter, 20px) 22px; }
	/* 17px: sotto i 16 iOS ingrandisce la pagina da solo appena si tocca il campo.
	   L'!important non e' per il tema ma per la regola qui sopra, che ce l'ha: senza,
	   il 22px del desktop resterebbe anche qui. */
	.oz-search-panel .oz-search-input { font-size: 17px !important; }
}

/* Griglia delle collezioni (pagina indice). */
.oz-collezioni {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--oz-collezioni-colonne, 4), minmax(0, 1fr));
	gap: 36px 28px;
}
.oz-collezione a {
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-decoration: none;
	color: var(--oz-ink, #1f2328);
}
.oz-collezione-img {
	display: block;
	overflow: hidden;
	background: var(--oz-sand, #f6f6f3);
	aspect-ratio: 4 / 3;
}
.oz-collezione-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}
.oz-collezione a:hover .oz-collezione-img img { transform: scale(1.04); }
.oz-collezione-img--vuota { display: block; width: 100%; height: 100%; }
.oz-collezione-nome { font-size: 15px; font-weight: 500; line-height: 1.4; }
.oz-collezione a:hover .oz-collezione-nome { text-decoration: underline; }
.oz-collezione-num { font-size: 12px; color: var(--oz-ink-soft, #6b7280); }
@media (max-width: 1024px) { .oz-collezioni { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px 20px; } }
@media (max-width: 767px)  { .oz-collezioni { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px 14px; } }

/* Sopratitolo con la tipologia: il nome del modello da solo non basta a distinguere
   cinque prodotti "Alplus", quindi la tipologia lo accompagna sempre. */
.oz-tipologia {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--oz-ink-soft, #6b7280);
	margin-bottom: 2px;
}
.single-product .oz-tipologia { font-size: 12px; margin-bottom: 6px; }

/* La nota IVA sta accanto al prezzo, ma non deve competere con la cifra. */
.oz-price-iva {
	font-size: .72em;
	font-weight: 400;
	letter-spacing: .02em;
	color: var(--oz-ink-soft, #6b7280);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Uniformita' delle immagini prodotto.

   Le foto non hanno tutte lo stesso rapporto: nella sola galleria di "Takk Mesh"
   convivono 1551x1920, 1200x1200 e 2560x1585. Con il ritaglio disattivato ogni
   immagine tiene il suo formato e la griglia si sfalsa.

   Si incorniciano tutte in un riquadro quadrato con object-fit: contain, cosi'
   l'allineamento e' perfetto senza tagliare via pezzi di prodotto — che con un
   ritaglio 1:1 succederebbe alle foto verticali.
   -------------------------------------------------------------------------- */
.woocommerce ul.products li.product img,
.e-loop-item .woocommerce-loop-product__link img,
.e-loop-item .elementor-widget-woocommerce-product-image img,
.oz-collezione-img img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
	width: 100%;
	height: auto;
	background: #fff;
}
.oz-collezione-img img { object-fit: cover; } /* le collezioni sono foto d'ambiente: meglio piene */

.woocommerce-product-gallery__image img,
.woocommerce-product-gallery .flex-control-thumbs img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
	width: 100%;
	height: auto;
	background: #fff;
}

/* --------------------------------------------------------------------------
   Gallerie dei progetti

   Sono foto di cantiere scattate a mano libera e non hanno tutte le stesse
   proporzioni: dentro lo stesso progetto si va da 1,41 a 1,50: La griglia di
   WordPress lascia a ogni foto la sua altezza naturale, e le righe risultano
   sfalsate — e' la segnalazione del cliente sul progetto "Societa'
   distribuzione carburanti".

   Qui ogni foto entra in un riquadro 3:2, la proporzione piu' vicina a quella
   che hanno gia', cosi' il ritaglio resta sotto il 6% e le righe si allineano.
   A differenza delle schede prodotto si taglia invece di rimpicciolire: sono
   ambienti, non oggetti su fondo bianco, e una banda vuota intorno si vedrebbe.
   -------------------------------------------------------------------------- */
.elementor-widget-image-gallery .gallery-item .gallery-icon {
	display: block;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background: var(--oz-sand, #f6f6f3);
}
.elementor-widget-image-gallery .gallery-item .gallery-icon a {
	display: block;
	width: 100%;
	height: 100%;
}
.elementor-widget-image-gallery .gallery-item .gallery-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ==========================================================================
   Mega-menu orizzontale (header costruito con il Theme Builder di Elementor)

   Il sottomenu di "Prodotti" ha 15 voci e una di queste ne contiene altre 13:
   come tendina verticale diventa una colonna lunghissima e impraticabile, ed e'
   esattamente la segnalazione del cliente. Qui la tendina diventa un pannello a
   tutta larghezza con le voci disposte su piu' colonne, e il terzo livello viene
   mostrato dentro la sua colonna invece di aprirsi come ulteriore sotto-tendina.

   Si lavora sul markup del widget menu di Elementor, che legge il menu di
   WordPress: le voci restano una cosa sola, gestita da Aspetto > Menu.

   L'aggancio e' .elementor-location-header, la classe che Elementor mette sul
   template di intestazione. Una classe CSS aggiunta a mano al contenitore non
   verrebbe resa: su questo sito gli elementi atomici sono attivi e la gestiscono
   diversamente.
   ========================================================================== */
@media (min-width: 1025px) {

	/* Il pannello si misura sulla RIGA dell'header, larga quanto la pagina, non sulla
	   singola voce di menu. Serve un antenato posizionato: senza, "left/right: 0" non
	   ha nulla su cui calcolarsi e il pannello resta largo zero. */
	.elementor-location-header .e-con:has(> .e-con > .elementor-widget-nav-menu) { position: relative; }
	.elementor-location-header .e-con:has(> .elementor-widget-nav-menu) { position: static; }
	/* Anche il widget e la lista del menu sono posizionati di loro: finche' restano
	   tali il pannello si misura su di essi (648px) invece che su tutta la riga. */
	.elementor-location-header .elementor-widget-nav-menu,
	.elementor-location-header .elementor-nav-menu--main,
	.elementor-location-header .elementor-nav-menu--main > .elementor-nav-menu,
	.elementor-location-header .elementor-nav-menu--main > .elementor-nav-menu > li.menu-item-has-children { position: static; }

	.elementor-location-header .elementor-nav-menu--main > .elementor-nav-menu > li.menu-item-has-children > ul.sub-menu {
		/* Il menu di Elementor e' mosso da SmartMenus, che posiziona le tendine con stili
		   inline: senza "!important" quelle regole vincerebbero e il pannello tornerebbe
		   una colonnina ancorata alla voce. Il display resta a SmartMenus, che lo usa per
		   aprire e chiudere. */
		position: absolute !important;
		left: 0 !important;
		right: 0 !important;
		top: 100% !important;
		width: 100% !important;
		max-width: none !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 22px 44px 26px;
		background: #fff;
		border-top: 1px solid var(--oz-line, #e5e7eb);
		box-shadow: 0 22px 44px rgba(0, 0, 0, .09);
		/* I tre gruppi si affiancano da soli come inline-block: lo spazio bianco fra
		   un blocco e l'altro conta come testo, e a font-size zero non occupa nulla.
		   Le voci lo riprendono qui sotto. */
		font-size: 0;
		z-index: 90;
		/* Apertura e chiusura restano in mano a SmartMenus, che agisce sul display: e'
		   l'unico comando, e vale per il mouse, per il tocco e per la tastiera.
		   Nessuna dissolvenza: un'animazione su un elemento che nasce display:none non
		   parte in modo affidabile, e il pannello rimaneva invisibile pur occupando
		   spazio. Meglio comparire netto che comparire a volte. */
	}

	/* I gruppi di secondo livello (Categorie, Ambienti, Collezioni) stanno in fila.
	   Non si usa una griglia: il display del pannello e' di SmartMenus, che lo apre
	   e lo chiude, e imporlo qui lo lascerebbe sempre aperto o sempre chiuso. */
	.elementor-location-header .elementor-nav-menu--main > .elementor-nav-menu > li > ul.sub-menu > li {
		display: inline-block;
		vertical-align: top;
		width: 37%;
		padding-right: 26px;
		font-size: 14px; /* ripreso dopo il font-size: 0 del pannello */
		margin-bottom: 0;
	}
	/* Collezioni: una colonna sola, quindi meno spazio. */
	.elementor-location-header .elementor-nav-menu--main > .elementor-nav-menu > li > ul.sub-menu > li:last-child {
		width: 25%;
		padding-right: 0;
	}
	/* Le voci vere non si spezzano fra due colonne. */
	.elementor-location-header .elementor-nav-menu--main ul.sub-menu ul.sub-menu > li {
		break-inside: avoid;
		page-break-inside: avoid;
		display: block;
	}
	.elementor-location-header .elementor-nav-menu--main ul.sub-menu a.elementor-sub-item {
		padding: 3px 0 !important;
		font-size: 13.5px;
		line-height: 1.4;
		white-space: normal;
	}

	/* Terzo livello: elenco dentro la colonna, non una seconda tendina. */
	.elementor-location-header .elementor-nav-menu--main ul.sub-menu ul.sub-menu {
		position: static !important;
		display: block !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		box-shadow: none !important;
		border: 0 !important;
		background: none !important;
		padding: 2px 0 0 !important;
		margin: 0 !important;
		/* 13 voci su due colonne: il browser le bilancia da solo in 7 e 6. */
		columns: 2;
		column-gap: 26px;
		width: auto !important;
		min-width: 0 !important;
	}
	.elementor-location-header .elementor-nav-menu--main > .elementor-nav-menu > li > ul.sub-menu > li:last-child ul.sub-menu {
		columns: 1;
	}

	/* "Scopri di piu" chiude la colonna delle collezioni.

	   Era disegnato come un pulsante bordato: in una colonna di sei nomi allineati
	   pesava piu' delle voci a cui doveva fare da coda, e allungava la colonna che
	   il cliente voleva piu' corta. Ora e' una voce come le altre, distinta dal
	   grassetto e dal corsivo invece che da una cornice. */
	.elementor-location-header .elementor-nav-menu--main ul.sub-menu li.oz-menu-cta { margin-top: 6px; }
	.elementor-location-header .elementor-nav-menu--main ul.sub-menu li.oz-menu-cta > a.elementor-sub-item {
		display: block;
		border: 0;
		padding: 0 !important;
		font-weight: 700;
		font-style: italic;
		text-transform: none;
	}

	/* La voce che fa da testata di colonna si legge come titolo, non come link qualunque. */
	.elementor-location-header .elementor-nav-menu--main > .elementor-nav-menu > li > ul.sub-menu > li.menu-item-has-children > a.elementor-sub-item {
		font-weight: 600;
		letter-spacing: .06em;
		text-transform: uppercase;
		font-size: 11px !important;
		color: var(--oz-ink-soft, #6b7280);
		pointer-events: none; /* e' una testata: il gruppo si raggiunge dalle voci sotto */
		margin: 0 0 6px;
	}
	.elementor-location-header .elementor-nav-menu--main ul.sub-menu ul.sub-menu a.elementor-sub-item {
		font-size: 13.5px;
		padding-left: 0 !important;
	}

	/* Niente frecce: le chiede il cliente e in un pannello aperto non servono. */
	.elementor-location-header .elementor-nav-menu .sub-arrow,
	.elementor-location-header .elementor-nav-menu .fa-caret-down,
	.elementor-location-header .elementor-nav-menu .e-font-icon-svg.e-fas-caret-down { display: none !important; }
}

/* L'header sta su una fascia sola: logo, menu, azioni. */
.elementor-location-header .elementor-nav-menu--main > .elementor-nav-menu { flex-wrap: nowrap; }

/* --------------------------------------------------------------------------
   Fascia dell'header: logo a sinistra, menu al centro, azioni a destra.

   Le larghezze le detta qui il foglio di stile e non le impostazioni del
   contenitore: Elementor genera comunque una regola di larghezza propria per i
   contenitori figli, e le due si contendevano lo spazio finche' un blocco
   finiva schiacciato a zero. I selettori guardano al CONTENUTO del contenitore
   (chi ha dentro il logo, chi il menu) invece che agli identificativi generati,
   cosi' reggono anche se il template viene rimaneggiato.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
	.elementor-location-header .e-con:has(> .elementor-widget-theme-site-logo),
	.elementor-location-header .e-con:has(> .elementor-widget-shortcode) {
		flex: 0 0 auto !important;
		width: auto !important;
	}
	.elementor-location-header .e-con:has(> .elementor-widget-nav-menu) {
		flex: 1 1 auto !important;
		width: auto !important;
		min-width: 0;
	}
	/* Il menu si centra nello spazio che avanza. */
	.elementor-location-header .elementor-nav-menu--main > .elementor-nav-menu {
		justify-content: center;
	}
	/* La barra di ricerca non deve rubare spazio al menu. */
	.elementor-location-header .oz-search--barra { max-width: 260px; }
}

/* Su schermi stretti la ricerca sta su una riga sua: affiancata a burger, logo e
   richiesta si riduceva a poco piu' di cento pixel, con il testo di aiuto illeggibile. */
@media (max-width: 1024px) {
	.elementor-location-header .e-con > .elementor-widget-shortcode:has(.oz-search--barra) {
		flex: 1 0 100%;
		width: 100%;
		order: 10;
	}
	.elementor-location-header .oz-search--barra { max-width: none; }
}

/* ==========================================================================
   Home: allineamenti fuori griglia

   Tre correzioni dall'audit del 27 agosto. Starebbero bene nello snippet
   "Officezone — Design system", ma quello vive nel database e da qui si
   arriva solo ai file: se un domani lo si sposta di la', queste regole vanno
   tolte da qui, altrimenti si torna a due posti che dicono la stessa cosa.
   ========================================================================== */

/* L'hero non aveva margine laterale: occhiello, titolo e paragrafo partivano da x=0,
   attaccati al bordo dello schermo, mentre tutte le altre sezioni stanno a 40px (28 e 20
   ai formati piu' stretti). Nasce da `:first-child { padding: 0 }` nello snippet, che
   serve a far arrivare la foto di sfondo da bordo a bordo: il rientro lo si restituisce
   al contenitore interno, cosi' la foto resta a tutta larghezza e il testo rientra.

   Il secondo rigo raddrizza i pulsanti: lo snippet gira l'hero in `flex-flow: row wrap` ma
   resta attivo il "centra" impostato in Elementor, che in colonna centrava in verticale e
   in riga centra in orizzontale. Risultato: testo a sinistra e pulsanti in mezzo. */
/* Il margine sta sul contenitore interno perche' la sezione ha padding:0, ma quello e' anche
   l'elemento che si ferma a 1560px: senza allargarne il tetto del margine stesso, il rientro
   mangerebbe il contenuto invece di stare fuori, e sopra i 1636px il testo dell'hero partiva
   72px piu' a destra di tutto il resto. */
.elementor-24 > .e-con.e-parent:first-child > .e-con-inner {
	padding-inline: var(--oz-gutter, 40px);
	max-width: calc(1560px + 2 * var(--oz-gutter, 40px));
	justify-content: flex-start;
}

/* Le tre card "Organizzazione / Uffici / Sale riunioni" sono in griglia, ma la prima e la
   terza si portavano dietro i margini laterali di quando erano un flex: la terza partiva
   20px piu' a destra e sbordava nel margine della pagina (1245 contro i 1225 di tutti gli
   altri blocchi), e lo stacco fra la seconda e la terza era 44px invece di 24. Lo spazio
   fra le colonne lo da' gia' il `gap` della griglia. */
.elementor-24 .e-con.elementor-element-fa39f6e > .e-con-inner > .e-con {
	margin: 0 !important;
}

/* Il carosello dei progetti aveva 20px di padding per parte sul proprio contenitore: era
   l'unico blocco della pagina largo 1145 invece di 1185, e rientrava rispetto alla propria
   fascia titolo. Le frecce stanno dentro al carosello, quindi non serve stringerlo. */
.elementor-24 .elementor-element-6d30d4a > .elementor-widget-container {
	padding-inline: 0 !important;
}

/* ==========================================================================
   Un solo margine laterale, per tutto il sito

   A 1280px il sito ne aveva tre. La home stava a 40px (--oz-gutter dello
   snippet), le altre pagine a 55,7 (il clamp qui sotto, arrivato con la
   1.13.3) e header e footer a 20, rimasti al default dei contenitori di
   Elementor: scorrendo una pagina sola il bordo sinistro si spostava due volte.

   Vince il clamp: e' la regola piu' recente ed e' l'unica che cresce con la
   finestra. --oz-gutter diventa il nome unico di quel valore, cosi' esiste un
   posto solo da cambiare. Ridefinirlo sul <body> basta a portarci anche la
   home: lo snippet lo usa solo per il padding delle sue sezioni, e un valore
   dichiarato sull'elemento batte quello ereditato da :root — comprese le
   ridefinizioni dello snippet nelle media query, che stanno su :root.
   ========================================================================== */
body { --oz-gutter: clamp(20px, 4.4vw, 72px); }

/* Header e footer al margine delle pagine. Sopra i 1636px il margine da solo
   non basta: li' il contenuto si ferma a 1560px centrati, quindi ci si fermano
   anche loro, altrimenti tornerebbero piu' larghi del contenuto.
   Gli id sono quelli dei contenitori nei template header e footer: se un domani
   i template si rifanno, questi due selettori vanno rifatti con loro. */
.elementor-location-header .elementor-element-50474d8 {
	padding-inline: var(--oz-gutter) !important;
	max-width: calc(1560px + 2 * var(--oz-gutter));
	margin-inline: auto;
}
.elementor-location-header .elementor-element-12b7709 {
	padding-inline: var(--oz-gutter) !important;
}
.elementor-location-header .elementor-element-12b7709 > .e-con-inner {
	max-width: 1560px;
	margin-inline: auto;
}

/* Le tre fasce del footer, barra bassa compresa: quella non aveva alcun margine
   e "© 2026 Stilgo Srl" partiva incollato al bordo dello schermo. */
.elementor-location-footer > .e-con {
	padding-inline: var(--oz-gutter) !important;
}
.elementor-location-footer > .e-con > .e-con-inner {
	max-width: 1560px;
	margin-inline: auto;
}

/* ==========================================================================
   Respiro laterale delle pagine

   I contenuti stavano a 20px dal bordo dello schermo, praticamente attaccati.
   Qui si da' un margine che cresce con la finestra e una larghezza massima,
   cosi' su monitor grandi il testo non si stira per tutto lo schermo.

   Si toccano solo i contenitori "boxed" di primo livello: quelli a tutta
   larghezza (fasce con foto di sfondo) devono restare da bordo a bordo.
   ========================================================================== */
[data-elementor-type="wp-page"] > .e-con.e-con-boxed,
[data-elementor-type="single-page"] > .e-con.e-con-boxed,
[data-elementor-type="single-post"] > .e-con.e-con-boxed,
[data-elementor-type="archive"] > .e-con.e-con-boxed,
[data-elementor-type="product-archive"] > .e-con.e-con-boxed,
[data-elementor-type="product"] > .e-con.e-con-boxed {
	padding-inline: var(--oz-gutter);
}
[data-elementor-type="wp-page"] > .e-con.e-con-boxed > .e-con-inner,
[data-elementor-type="single-page"] > .e-con.e-con-boxed > .e-con-inner,
[data-elementor-type="single-post"] > .e-con.e-con-boxed > .e-con-inner,
[data-elementor-type="archive"] > .e-con.e-con-boxed > .e-con-inner,
[data-elementor-type="product-archive"] > .e-con.e-con-boxed > .e-con-inner,
[data-elementor-type="product"] > .e-con.e-con-boxed > .e-con-inner {
	max-width: 1560px;
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Collezioni: legare il nome alla sua foto

   Il nome stava a meta' strada tra la foto sopra e quella sotto, e non si
   capiva a quale delle due si riferisse. Ora sta appiccicato alla propria
   immagine, e sono le righe ad avere piu' aria.
   -------------------------------------------------------------------------- */
.oz-collezioni { row-gap: 52px; }
.oz-collezione a { gap: 6px; }
.oz-collezione-nome { line-height: 1.35; }
.oz-collezione-num { margin-top: -1px; }
@media (max-width: 1024px) { .oz-collezioni { row-gap: 40px; } }
@media (max-width: 767px)  { .oz-collezioni { row-gap: 30px; } }

/* --------------------------------------------------------------------------
   Titolo di pagina uniforme

   Le pagine costruite a mano avevano il titolo a 48px, gli archivi (catalogo,
   risultati di ricerca) a 34px: da qui la segnalazione sui font disomogenei.
   La regola sta qui e non nelle impostazioni del widget perche' il foglio di
   stile del template archivio non viene caricato su quelle pagine, quindi
   qualsiasi impostazione presa dall'editor resterebbe senza effetto.
   -------------------------------------------------------------------------- */
.elementor-widget-theme-archive-title .elementor-heading-title,
.elementor-widget-theme-page-title .elementor-heading-title,
.elementor-page-title .elementor-heading-title {
	font-family: "Montserrat", sans-serif;
	/* Il tema stila i propri titoli con selettori piu' specifici: senza "!important"
	   gli archivi resterebbero a 34px mentre le altre pagine stanno a 48. */
	font-size: 48px !important;
	font-weight: 400 !important;
	line-height: 1.1;
}
@media (max-width: 1024px) {
	.elementor-widget-theme-archive-title .elementor-heading-title,
	.elementor-widget-theme-page-title .elementor-heading-title,
	.elementor-page-title .elementor-heading-title { font-size: 36px !important; }
}
@media (max-width: 767px) {
	.elementor-widget-theme-archive-title .elementor-heading-title,
	.elementor-widget-theme-page-title .elementor-heading-title,
	.elementor-page-title .elementor-heading-title { font-size: 28px !important; }
}

/* --------------------------------------------------------------------------
   Fascia di testata delle sezioni

   Il cliente chiede che le sezioni si presentino come "Collezioni": foto di
   sfondo e titolo centrato. La foto la porta OZ_Sezioni, prendendola
   dall'immagine della categoria; qui si allinea il resto della fascia.

   Il testo della categoria e' stato spostato fuori dalla fascia: era bianco
   perche' nato per il fondo nero, e sono 27 descrizioni da circa mille
   caratteri l'una — dentro una fascia da 37vh non ci stavano, e centrate non
   si leggerebbero. Ora stanno sotto, scure, in colonna stretta.
   -------------------------------------------------------------------------- */
.elementor-element-1f406da .woocommerce-breadcrumb,
.elementor-element-1f406da .elementor-heading-title { text-align: center; }

/* Le briciole di pane sulla foto: piu' leggere del titolo, ma leggibili. */
.elementor-element-1f406da .woocommerce-breadcrumb,
.elementor-element-1f406da .woocommerce-breadcrumb a { color: rgba(255, 255, 255, .82); }
.elementor-element-1f406da .woocommerce-breadcrumb a:hover { color: #fff; }

/* Colonna del testo di categoria: larghezza da lettura, non da pagina intera. */
.elementor-element-53eda37 { max-width: 900px; margin-inline: auto; }
.elementor-element-53eda37 p:last-child { margin-bottom: 0; }

/* Le categorie senza descrizione non devono lasciare un vuoto sopra la griglia. */
.elementor-element-526dd37:not(:has(p)) { display: none; }

/* --------------------------------------------------------------------------
   Indice di sezione (pagina Azienda)

   Riquadri di testo, senza immagini: le pagine collegate non ne hanno una di
   copertina, e una foto presa a caso direbbe meno di una riga di testo.
   -------------------------------------------------------------------------- */
.oz-indice {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 8px 0 0;
}
.oz-indice-voce {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 26px 26px 22px;
	border: 1px solid var(--oz-line, #e4e4e7);
	background: #fff;
	text-decoration: none;
	color: inherit;
	transition: border-color .18s ease, transform .18s ease;
}
.oz-indice-voce:hover {
	border-color: var(--oz-ink, #18181b);
	transform: translateY(-2px);
}
.oz-indice-icona {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--oz-line, #e4e4e7);
	color: var(--oz-ink, #18181b);
	margin-bottom: 4px;
}
.oz-indice-icona svg {
	width: 20px;
	height: 20px;
}
.oz-indice-nome {
	font-family: "Montserrat", sans-serif;
	font-size: 19px;
	font-weight: 500;
	line-height: 1.25;
}
.oz-indice-testo {
	font-size: 14px;
	line-height: 1.55;
	color: var(--oz-ink-soft, #6b7280);
	flex: 1 1 auto;
}
/* La freccia sta in fondo al riquadro e si sposta al passaggio del mouse. */
.oz-indice-freccia {
	font-size: 18px;
	line-height: 1;
	margin-top: 4px;
	transition: transform .18s ease;
}
.oz-indice-voce:hover .oz-indice-freccia { transform: translateX(4px); }

@media (max-width: 1024px) { .oz-indice { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .oz-indice { grid-template-columns: 1fr; gap: 14px; } }

/* --------------------------------------------------------------------------
   Header sempre visibile (richiesta del 28/08).

   Il tema tiene la fascia in "position: fixed" e la fa scivolare fuori schermo
   quando si scorre verso il basso, rimettendola al suo posto quando si risale:
   lo fa con la classe --fixed-hidden, che la trasla di tutta la sua altezza.
   Il cliente la vuole ferma in cima, uguale su desktop, tablet e telefono
   (da tablet in giu' ci pensa gia' lo sticky di Elementor sulla riga interna).
   -------------------------------------------------------------------------- */
body:not(.elementor-editor-active) .vamtam-sticky-header.vamtam-sticky-header--fixed-hidden {
	transform: translateY(0) !important;
}

/* --------------------------------------------------------------------------
   Da telefono e tablet le collezioni restano un semplice link.

   Nel pannello del desktop la quinta colonna elenca le prime collezioni, ma in
   una tendina a fisarmonica quell'elenco allungherebbe il menu senza aggiungere
   nulla: la pagina Collezioni le mostra tutte. Si nasconde l'elenco e la freccia
   che lo farebbe aprire, e la voce resta cliccabile.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.elementor-location-header ul.elementor-nav-menu > li > ul.sub-menu > li:last-child > ul.sub-menu { display: none !important; }
	.elementor-location-header ul.elementor-nav-menu > li > ul.sub-menu > li:last-child > a .sub-arrow,
	.elementor-location-header ul.elementor-nav-menu > li > ul.sub-menu > li:last-child > a .e-font-icon-svg { display: none !important; }
}

/* --------------------------------------------------------------------------
   Newsletter nel footer: casella piu' larga.

   La casella dell'indirizzo era larga 113 px, troppo poco per leggere quello che
   si scrive. Il modulo sta in una colonna da 245 px e il tema lo impagina su due
   colonne uguali (casella e pulsante affiancati), quindi allargare la casella
   dentro quella riga vorrebbe dire stringere il pulsante. Qui il modulo passa a
   una colonna sola: la casella prende tutta la larghezza e il pulsante va sotto.
   Vale solo per il footer, gli altri moduli del sito restano come sono.
   -------------------------------------------------------------------------- */
.elementor-location-footer .elementor-widget-form .elementor-form-fields-wrapper {
	display: grid !important;
	grid-template-columns: 1fr !important;
	gap: 10px;
}
.elementor-location-footer .elementor-widget-form .elementor-field-group {
	width: 100% !important;
	max-width: none !important;
}

/* --------------------------------------------------------------------------
   Testata delle pagine: altezza effettiva.

   La fascia con il titolo delle pagine (template 4871) e' un contenitore FIGLIO.
   Elementor le scrive l'altezza minima in una variabile, --min-height, ma su
   questo tema quella variabile viene consumata solo dai contenitori di primo
   livello: sulle pagine la fascia restava alta quanto il testo, 71 px, mentre
   sugli archivi di categoria era regolare. Qui la variabile viene resa
   effettiva; il valore continua a stare nelle impostazioni del contenitore in
   Elementor, quindi il cliente puo' cambiarlo di li.
   -------------------------------------------------------------------------- */
.elementor-location-single .elementor-element-3542190 {
	min-height: var(--min-height);
}

/* --------------------------------------------------------------------------
   Colonna dei filtri: larghezza piena e posizione fissa allo scorrimento.

   1. LARGHEZZA. Le sezioni (Categoria, Sottocategoria, Ambienti, Collezione)
      si dimensionavano sul proprio titolo — 260, 215, 152, 174 px nella stessa
      colonna — perche' .oz-filtri e' rimasta la classe del vecchio modulo a
      tendine affiancate, che e' un flex in riga. Qui torna un elenco verticale,
      ma solo quando contiene davvero le sezioni del filtro di catalogo: il
      vecchio modulo, che di sezioni non ne ha, resta com'era.

   2. POSIZIONE. Filtri e barra dei risultati seguono la pagina mentre si
      scorre l'elenco. La colonna dei filtri va tenuta "align-self: flex-start",
      altrimenti il flex della riga la allunga quanto la griglia e non si stacca
      mai da terra; e con l'elenco categorie aperto supera l'altezza dello
      schermo, quindi scorre al suo interno.
      Gli identificativi sono quelli dei due template che montano i filtri:
      2138 (archivio prodotti) e 6059 (risultati di ricerca).
   -------------------------------------------------------------------------- */
.oz-filtri:has(.oz-filtro) { display: block; }

@media (min-width: 1025px) {
	/* barra "Visualizzazione di ... risultati" + ordinamento */
	/* Il "!important" serve: il tema tiene i contenitori in position: relative con
	   una regola che vince sulla nostra, e senza forzatura la barra scorreva via. */
	.elementor-element-3e0a2cb {
		position: sticky !important;
		top: 70px !important; /* altezza della fascia dell'header */
		z-index: 6;
		background: #fff;
	}
	/* chip dei filtri attivi */
	.elementor-element-457016d,
	.elementor-element-1f44521a {
		position: sticky !important;
		top: 104px !important;
		z-index: 5;
		background: #fff;
	}
	/* colonna dei filtri
	   Richiesta del cliente (ottobre 2026): niente barra di scorrimento dentro la sidebar,
	   scorre solo la pagina. La colonna ha altezza naturale e non e' piu' sticky; il
	   "!important" serve a battere la forma abbreviata "overflow" che Elementor scrive
	   su .e-con e la posizione che il tema da' ai contenitori. */
	.elementor-element-efe6f98,
	.elementor-element-74aee9e5 {
		position: relative !important;
		top: auto !important;
		align-self: flex-start !important;
		max-height: none !important;
		overflow: visible !important;
	}
}

/* --------------------------------------------------------------------------
   Galleria della scheda prodotto su una colonna

   Il tema la dispone su due colonne. Con foto di proporzioni diverse le due
   colonne si sfalsano fra loro, ed e' la segnalazione del cliente del 28/08:
   ha chiesto una colonna sola per poter valutare il risultato. Su una colonna
   il disallineamento non si puo' proprio produrre, e ogni foto resta larga
   quanto la colonna invece di stare a meta'.
   -------------------------------------------------------------------------- */
.woocommerce-product-gallery__wrapper {
	grid-template-columns: 1fr !important;
	gap: 14px;
}

/* --------------------------------------------------------------------------
   Tastini della quantita'

   Le frecce di <input type="number"> le disegna il browser, e sui telefoni non
   le disegna: da desktop c'erano, da mobile no, ed e' la segnalazione del
   cliente. Qui il campo e' affiancato da due pulsanti veri, larghi abbastanza
   da premerli con il dito (44 px e' la misura minima consigliata per il tocco).
   -------------------------------------------------------------------------- */
.oz-qty-gruppo {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--oz-line, #d9dade);
	border-radius: 4px;
	overflow: hidden;
	max-width: 160px;
}
.oz-qty-gruppo .oz-qty-passo {
	flex: 0 0 44px;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: var(--oz-sand, #f6f6f3);
	color: var(--oz-ink, #1f2328);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
}
.oz-qty-gruppo .oz-qty-passo:hover { background: #ebebe6; }
.oz-qty-gruppo .oz-qty {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	border: 0;
	border-radius: 0;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}
/* Tolte le frecce native: ci sono i pulsanti, due comandi per la stessa cosa confondono. */
.oz-qty-gruppo .oz-qty::-webkit-outer-spin-button,
.oz-qty-gruppo .oz-qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Leggibilita' dei pulsanti al passaggio del mouse

   Il kit di Elementor riempie ogni pulsante con l'oliva del marchio (#796F51) e
   ci scrive sopra in #EEEDE6. Sono 4,25 di contrasto, sotto la soglia di 4,5
   sotto la quale un testo smette di essere comodo da leggere — ed e' la
   segnalazione del cliente. A riposo gli stessi pulsanti stanno sopra 14.

   Due interventi diversi, perche' i casi sono diversi:

   1. Sui pulsanti d'azione il fondo oliva e' voluto: cambia solo il testo, che
      da #EEEDE6 passa al bianco e sullo stesso fondo arriva a 4,99. I selettori
      ripetono quelli del kit con una classe in piu', cosi' vincono senza
      !important. Restano fuori i pulsanti che hanno gia' un proprio stato al
      passaggio (la lente di ricerca, i tastini della quantita'): riscriverne il
      colore alla cieca li peggiorerebbe.

   2. Le testate del filtro laterale sono intestazioni, non comandi: riempirle
      di colore al passaggio era un effetto collaterale del kit, non una scelta.
      Basta un fondo appena piu' scuro, e il testo resta quello di sempre.
   -------------------------------------------------------------------------- */
html body[class*="elementor-kit-"] .button:hover,
html body[class*="elementor-kit-"] input[type="submit"]:hover,
html body[class*="elementor-kit-"] input[type="button"]:hover,
html body[class*="elementor-kit-"] .elementor-button:hover {
	color: #fff;
}

html body[class*="elementor-kit-"] .oz-filtri .oz-filtro-testa:hover {
	background: #ebebe6;
	color: var(--oz-ink, #1f2328);
}

/* --------------------------------------------------------------------------
   FASCIA DI TESTATA DELLE PAGINE

   Una sola fascia per tutte le pagine sul template Elementor a larghezza
   intera, stampata da OZ_Sezioni::fascia_pagina(). Prima ogni pagina si
   disegnava la sua dentro Elementor: sei fasce con il titolo ora centrato ora
   a sinistra, il velo scuro dal 52% al 67% e, su due di esse, il titolo come
   H2 invece che H1. Il fondo scuro sotto la foto non e' decorativo: se
   l'immagine tarda o manca, il testo bianco resta leggibile lo stesso.
   -------------------------------------------------------------------------- */
.oz-fascia {
	min-height: 300px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 24px;
	box-sizing: border-box;
	background-color: #212529;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}
.oz-fascia-dentro {
	max-width: 900px;
	text-align: center;
}
.oz-fascia-titolo {
	margin: 0;
	font-size: 48px;
	line-height: 1.15;
	font-weight: 500;
	letter-spacing: -0.01em;
	text-wrap: balance;
}
.oz-fascia-sottotitolo {
	margin: 12px 0 0;
	font-size: 17px;
	line-height: 1.5;
}

/* Il colore del testo sta a parte e con un selettore piu' forte: il kit di
   Elementor colora tutti gli H1 di grigio scuro con una regola che ha piu'
   specificita' di una classe singola, e su una foto scurita il titolo
   spariva. Meglio una regola brutta che un titolo invisibile. */
html body[class*="elementor-kit-"] .oz-fascia .oz-fascia-titolo {
	color: #fff;
}
html body[class*="elementor-kit-"] .oz-fascia .oz-fascia-sottotitolo {
	color: rgba(255, 255, 255, 0.88);
}

/* Il titolo a 48px su uno schermo da 375 px occupa quattro righe: la fascia si
   allunga e spinge il contenuto sotto la piega. */
@media (max-width: 767px) {
	.oz-fascia { min-height: 220px; padding: 32px 20px; }
	.oz-fascia-titolo { font-size: 32px; }
	.oz-fascia-sottotitolo { font-size: 15px; }
}

/* Cornice per le pagine scritte con l'editor di WordPress e non con Elementor.
   Il template a larghezza intera stampa il contenuto senza contenitore: senza
   questa il testo correrebbe da bordo a bordo dello schermo. La misura ricalca
   quella dei contenitori Elementor del sito: 1300 px di contenuto su 1440. */
.oz-pagina-testo {
	max-width: 1340px;
	margin: 0 auto;
	padding: 56px 20px 72px;
	box-sizing: border-box;
}

/* ==========================================================================
   SCHEDA PRODOTTO — richieste del 02/09
   ========================================================================== */

/* --------------------------------------------------------------------------
   Prezzo dei "Prodotti simili" uguale a quello del catalogo.

   La regola del design system ingrandisce a 24 px ogni .price dentro
   div.product quando si e' su una scheda: prendeva anche le schede del
   carosello in fondo alla pagina, che sono un elenco e vanno lette come
   quelle del catalogo. Il selettore qui ha la stessa specificita' di quella
   regola e arriva dopo, quindi vince senza rincorrere gli !important.
   -------------------------------------------------------------------------- */
.single-product div.product .e-loop-item .price,
.single-product div.product .e-loop-item .price bdi,
.single-product div.product .e-loop-item .price .woocommerce-Price-amount,
.single-product div.product .e-loop-item .oz-price-from,
.single-product div.product .e-loop-item .oz-price-request {
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
}

/* --------------------------------------------------------------------------
   Il prezzo della scheda e' l'informazione che si cerca per prima.

   Era 24 px con lo stesso peso del titolo del prodotto: si perdeva nella
   colonna. Sale a 32 px e prende aria sopra, cosi' l'occhio ci cade sopra
   scendendo dal nome.
   -------------------------------------------------------------------------- */
.single-product div.product .oz-price-from,
.single-product div.product .oz-price-from .woocommerce-Price-amount,
.single-product div.product .oz-price-from bdi,
.single-product div.product .oz-price-request {
	font-size: 26px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	letter-spacing: -0.01em;
}
/* "a partire da" e "+ IVA" restano la cornice della cifra, non la cifra. */
.single-product div.product .oz-price-from .oz-price-iva {
	font-size: 14px !important;
	font-weight: 500 !important;
}

/* La cornice del prezzo: un fondo chiaro e un filetto a sinistra. A 32 px la cifra
   era troppo grande; qui si distingue per posizione e contrasto invece che per
   dimensione, e regge anche accanto a "Prezzo su richiesta", che e' una frase lunga
   e a 32 px andava a capo. */
.oz-prezzo-cornice {
	display: block;
	margin: 4px 0 0;
	padding: 12px 16px;
	background: #f6f6f3;
	border-left: 3px solid var(--oz-accent, #8a8f3a);
}
/* "a partire da" resta la premessa, non la cifra. */
.single-product .oz-price-from { display: block; }
.single-product .oz-price-from > .woocommerce-Price-amount { display: inline; }

/* La frase sull'IVA sta sotto il prezzo, in corsivo e in secondo piano. */
.oz-price-nota {
	display: block;
	margin-top: 4px;
	font-size: 13px !important;
	font-weight: 400 !important;
	font-style: italic;
	line-height: 1.4;
	color: var(--oz-ink-soft, #6b7280);
}

/* --------------------------------------------------------------------------
   Descrizione a tre righe con "leggi tutto".
   -------------------------------------------------------------------------- */
.oz-descr-testo {
	/* Il !important perche' il tema impone display: flow-root sui figli del widget
	   contenuto, e senza -webkit-box il ritaglio a tre righe dipende da quanto e'
	   permissivo il browser di turno. */
	display: -webkit-box !important;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.oz-descr--aperta .oz-descr-testo {
	display: block !important;
	overflow: visible;
	-webkit-line-clamp: unset;
}
/* Il primo paragrafo dentro il box troncato non deve staccarsi dall'alto,
   altrimenti una delle tre righe se ne va in margine. */
.oz-descr-testo > *:first-child { margin-top: 0; }
.oz-descr-testo > *:last-child { margin-bottom: 0; }

.oz-descr-toggle {
	margin-top: 6px;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--oz-ink, #1f2328);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
/* Il kit di Elementor riempie e imbottisce qualsiasi <button>: qui il "Leggi tutto"
   deve leggersi come un link dentro al testo, non come un secondo pulsante che
   compete con "Richiedi offerta". */
html body[class*="elementor-kit-"] .oz-descr-toggle,
html body[class*="elementor-kit-"] .oz-descr-toggle:hover,
html body[class*="elementor-kit-"] .oz-descr-toggle:focus-visible {
	background: none !important;
	border: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-decoration: underline;
	text-underline-offset: 3px;
	color: var(--oz-ink, #1f2328) !important;
}
html body[class*="elementor-kit-"] .oz-descr-toggle:hover,
html body[class*="elementor-kit-"] .oz-descr-toggle:focus-visible {
	color: var(--oz-accent, #796f51) !important;
}

/* La nota sulle finiture spiega perche' il prezzo e' "a partire da": sta fuori
   dal testo pieghevole, perche' li' dentro non si vedrebbe mai. */
.oz-nota-offerta {
	margin: 12px 0 0;
	padding: 10px 0 10px 14px;
	border-left: 2px solid var(--oz-line, #e3e2db);
	font-size: 13px;
	line-height: 1.5;
	color: var(--oz-ink-soft, #6b7280);
}
.oz-nota-offerta em { font-style: italic; }

/* --------------------------------------------------------------------------
   Un solo filetto dopo il prezzo.

   Ce n'erano due: il separatore del template, largo quanto la colonna, e il
   bordo superiore del blocco allegati, largo 40 px in meno. Due righe quasi
   uguali a distanza di un pixel sembrano un errore di impaginazione.
   -------------------------------------------------------------------------- */
html body[class*="elementor-kit-"].single-product .oz-allegati {
	border-top: 0 !important;
	padding-top: 0 !important;
	margin-top: 18px !important;
}

/* --------------------------------------------------------------------------
   Pulsanti chiari: al passaggio del mouse restano chiari.

   Il kit di Elementor riempie QUALSIASI <button> con l'oliva del marchio e ci
   scrive sopra in avorio. Sui pulsanti pieni va bene; sulla lente della ricerca
   e sui tastini + e - della quantita', che sono comandi neutri su fondo chiaro,
   il risultato era una macchia oliva con dentro un segno quasi invisibile.
   -------------------------------------------------------------------------- */
html body[class*="elementor-kit-"] .oz-search-btn:hover,
html body[class*="elementor-kit-"] .oz-search-btn:focus-visible,
html body[class*="elementor-kit-"] .oz-search-chiudi:hover,
html body[class*="elementor-kit-"] .oz-search-chiudi:focus-visible {
	background: #f1f1ec !important;
	color: var(--oz-ink, #1f2328) !important;
	border-color: transparent !important;
}
html body[class*="elementor-kit-"] .oz-search-toggle:hover,
html body[class*="elementor-kit-"] .oz-search-toggle:focus-visible,
html body[class*="elementor-kit-"] .oz-search-toggle[aria-expanded="true"] {
	background: #f1f1ec !important;
	color: var(--oz-ink, #1f2328) !important;
	border-color: var(--oz-ink, #1f2328) !important;
}
html body[class*="elementor-kit-"] .oz-qty-gruppo .oz-qty-passo:hover,
html body[class*="elementor-kit-"] .oz-qty-gruppo .oz-qty-passo:focus-visible {
	background: #e3e2db !important;
	color: var(--oz-ink, #1f2328) !important;
	border-color: var(--oz-ink, #1f2328) !important;
}

/* ==========================================================================
   SPAZIATURE — richieste del 02/09 (secondo giro)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Aria fra la fascia di testata e il contenuto.

   La fascia finiva e il contenuto cominciava attaccato: nessuno stacco fra il
   titolo della pagina e cio' che segue. Bastano pochi pixel perche' l'occhio
   capisca che sono due cose diverse.
   -------------------------------------------------------------------------- */
.oz-fascia { margin-bottom: 18px; }
body.tax-product_cat .elementor-element.elementor-element-1f406da,
body.woocommerce-shop .elementor-element.elementor-element-1f406da,
body[class*="tax-oz_collezione"] .elementor-element.elementor-element-1f406da {
	margin-bottom: 18px;
}

/* --------------------------------------------------------------------------
   Scheda prodotto: meno vuoto in cima.

   Sotto le briciole di pane restavano 33 px di niente prima del sopratitolo,
   messi insieme da un margine della lista e da un riempimento del contenitore.
   -------------------------------------------------------------------------- */
.single-product .woocommerce-breadcrumb { margin-bottom: 4px !important; }
.single-product .elementor-widget-woocommerce-breadcrumb .elementor-widget-container {
	padding-bottom: 6px !important;
	margin-bottom: 0 !important;
}

/* --------------------------------------------------------------------------
   Scheda prodotto: colonna di destra, respiro fra i blocchi.

   Il riquadro di richiesta e la riga di WhatsApp erano incollati fra loro e la
   colonna finiva a filo della fascia nera dei prodotti simili.
   -------------------------------------------------------------------------- */
.single-product .oz-addlist { margin-top: 6px !important; }
.single-product .elementor-element-ea33093 { margin-top: -8px; }

/* La fascia nera "Prodotti simili" prende aria sopra e sotto: sopra la stacca
   dalla colonna di richiesta, sotto dalle schede che introduce. */
.single-product .elementor-element-475b762 {
	margin-top: 40px;
	margin-bottom: 28px;
}

/* --------------------------------------------------------------------------
   Filtri: una barra di scorrimento sola, e i numeri staccati dal bordo.

   Ogni sezione aveva la sua altezza massima e quindi la sua barra: con tre
   sezioni aperte si contavano quattro barre di scorrimento nella stessa
   colonna, quella della colonna compresa. Ora scorre solo la colonna.
   -------------------------------------------------------------------------- */
.oz-filtro-corpo {
	max-height: none;
	overflow: visible;
}
/* Il conteggio stava appiccicato al bordo destro, e con la barra di scorrimento
   della colonna ci finiva proprio sotto. */
.oz-filtro-voce a { padding-right: 4px; }
.oz-filtro-num { margin-left: auto; padding-left: 10px; }
.elementor-element-efe6f98 .oz-filtri,
.elementor-element-74aee9e5 .oz-filtri { padding-right: 10px; }

/* --------------------------------------------------------------------------
   Categorie ad albero: sottocategorie chiuse, col tastino + a destra.

   Si aprono da sole quando la categoria o una sua sottocategoria e' selezionata
   (classe is-espansa, messa dal server e dal tastino). Il tastino e' un pulsante
   di 36 px per poterlo premere anche col dito; il + diventa un - da aperto.
   -------------------------------------------------------------------------- */
.oz-filtro-gruppo { list-style: none; margin: 0; padding: 0; }
.oz-filtro-gruppo > .oz-filtro-voce { display: flex; align-items: center; }
.oz-filtro-gruppo > .oz-filtro-voce > a { flex: 1 1 auto; min-width: 0; }
.oz-filtri .oz-filtro-espandi {
	flex: 0 0 auto;
	position: relative;
	width: 36px;
	height: 36px;
	min-height: 0;
	margin: 0 0 0 4px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--oz-ink, #1f2328);
	cursor: pointer;
}
.oz-filtro-piu::before,
.oz-filtro-piu::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	background: currentColor;
	transform: translate(-50%, -50%);
}
.oz-filtro-piu::before { width: 10px; height: 1.5px; }
.oz-filtro-piu::after { width: 1.5px; height: 10px; transition: opacity .15s ease; }
.oz-filtro-gruppo.is-espansa .oz-filtro-piu::after { opacity: 0; }
.oz-filtro-figli {
	list-style: none;
	margin: 0;
	padding: 0 0 6px 24px;
	display: none;
}
.oz-filtro-gruppo.is-espansa .oz-filtro-figli { display: block; }
.oz-filtro-figli .oz-filtro-voce a { font-size: 12.5px; }

/* --------------------------------------------------------------------------
   Pagina di ringraziamento dopo la richiesta di offerta.

   E' la pagina su cui atterra chi ha appena compilato il modulo: deve confermare
   che la richiesta e' partita e dire che cosa succede adesso, altrimenti chi la
   guarda non sa se ha funzionato ne' quanto deve aspettare.
   -------------------------------------------------------------------------- */
.oz-grazie { max-width: 720px; }
.oz-grazie-occhiello {
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--oz-accent, #796f51);
}
.oz-grazie-intro { margin: 0 0 34px; font-size: 19px; line-height: 1.55; }
.oz-grazie-titolo { margin: 0 0 18px; font-size: 20px; font-weight: 600; }

.oz-grazie-passi {
	margin: 0 0 34px;
	padding: 0;
	list-style: none;
	counter-reset: passo;
	display: grid;
	gap: 18px;
}
/* Il numero e' informazione, non decorazione: questi tre passaggi avvengono
   davvero in quest'ordine, e chi legge vuole sapere a che punto e'. */
.oz-grazie-passi li {
	counter-increment: passo;
	display: grid;
	grid-template-columns: 30px 1fr;
	gap: 4px 14px;
	align-items: baseline;
}
.oz-grazie-passi li::before {
	content: counter( passo );
	grid-row: span 2;
	font-size: 15px;
	font-weight: 700;
	color: var(--oz-accent, #796f51);
	border-top: 2px solid var(--oz-accent, #796f51);
	padding-top: 6px;
}
.oz-grazie-passi strong { font-size: 16px; font-weight: 600; }
.oz-grazie-passi span { font-size: 15px; line-height: 1.5; color: var(--oz-ink-soft, #6b7280); }

.oz-grazie-fretta { margin: 0 0 12px; font-weight: 600; }
.oz-grazie-contatti {
	margin: 0 0 34px;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
}
.oz-grazie-contatti a { font-size: 15px; }
.oz-grazie-contatti strong { font-weight: 600; }

.oz-grazie-azioni { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.oz-grazie-btn {
	display: inline-block;
	padding: 13px 24px;
	border: 1px solid var(--oz-ink, #1f2328);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
}
.oz-grazie-btn--pieno { background: var(--oz-ink, #1f2328); color: #fff; }
html body[class*="elementor-kit-"] .oz-grazie-btn--pieno:hover { background: #000; color: #fff; }
html body[class*="elementor-kit-"] .oz-grazie-btn:not(.oz-grazie-btn--pieno):hover {
	background: #f1f1ec;
	color: var(--oz-ink, #1f2328);
}