/*
Theme Name:   Buzzi Child
Theme URI:    https://www.pasticceriabuzzi.it
Description:  Child theme di Divi per Pasticceria Buzzi. Tutto il CSS e il PHP personalizzato del sito vive qui.
Author:       Gabriele Pesando
Template:     Divi
Version:      1.0.0
Text Domain:  buzzi-child
*/

/* ==========================================================================
   Sistema colori
   Il colore del marchio non e' una scelta grafica: e' il colore dei grembiuli
   che indossano in negozio. Comanda lui.

   Aggiornato il 23/09/2026. Prima era bordeaux #9d2235, dedotto dai grembiuli
   rossi di una fotografia di famiglia. Giulia ha chiarito che quella foto e'
   vecchia e che il rosso non lo usano piu': i grembiuli di oggi sono verde
   oliva. Il colore qui sotto e' campionato da quelli.

   La variabile si chiama "marchio" e non "verde" apposta: se un domani
   cambiano di nuovo grembiule, cambia il valore e non serve toccare
   quarantasette punti.

   Restano due verdi, e non devono mai incontrarsi:
   - questo, spento e scuro, e' interfaccia;
   - #007a4b, lo smeraldo del fondale fotografico, e' un altro mondo.
   Accostati leggerebbero come un addobbo natalizio. E' il motivo per cui i
   fondali verdi degli scatti prodotto sono stati portati su crema: quella
   scelta, presa quando il marchio era bordeaux, vale ancora di piu' adesso.
   ========================================================================== */

:root {
	--buzzi-marchio: #616756;
	--buzzi-marchio-scuro: #41463a;
	--buzzi-crema: #e5d8c3;
	--buzzi-crema-chiara: #f4f1ec;
	--buzzi-inchiostro: #1f1f1f;
	--buzzi-grigio: #6f6f6f;
	/* campionato dal fondale del servizio fotografico: solo per le immagini */
	--buzzi-verde-foto: #007a4b;
}

/* ==========================================================================
   Apertura della home
   La sezione era "standard" con un gradiente beige che la incassava: da qui
   diventa a tutta larghezza, con velatura solo sul lato del testo.
   ========================================================================== */

.buzzi-hero {
	position: relative;
	min-height: 86vh;
	display: flex;
	align-items: center;
	background-size: cover !important;
	background-position: center !important;
}

.buzzi-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		rgba(26, 8, 12, 0.78) 0%,
		rgba(26, 8, 12, 0.55) 38%,
		rgba(26, 8, 12, 0.12) 68%,
		rgba(26, 8, 12, 0) 100%
	);
	z-index: 1;
}

.buzzi-hero .et_pb_row {
	position: relative;
	z-index: 2;
	padding-left: clamp(1.5rem, 6vw, 7rem) !important;
	padding-right: clamp(1.5rem, 6vw, 7rem) !important;
}

.buzzi-hero__testo {
	max-width: 34rem;
}

.buzzi-hero__testo h1 {
	font-family: "Playfair Display", Georgia, serif !important;
	font-weight: 400 !important;
	font-size: clamp(2.6rem, 6vw, 4.6rem) !important;
	line-height: 1.04 !important;
	letter-spacing: 0.02em;
	color: #fff !important;
	padding: 0 !important;
	text-shadow: none !important;
}

.buzzi-hero__testo p {
	margin-top: 1.4rem !important;
	font-family: "Montserrat", sans-serif !important;
	font-weight: 300 !important;
	font-size: clamp(1rem, 1.4vw, 1.15rem) !important;
	line-height: 1.6 !important;
	color: rgba(255, 255, 255, 0.93) !important;
}

/* Il bottone: contorno chiaro che al passaggio si riempie di bordeaux.
   Divi applica la classe personalizzata direttamente sull'<a>, non a un
   contenitore: va quindi agganciata sull'elemento stesso. */
a.buzzi-hero__bottone.et_pb_button,
.buzzi-hero .et_pb_button_module_wrapper a.et_pb_button {
	display: inline-block;
	margin-top: 2.1rem !important;
	padding: 0.95rem 2.2rem !important;
	border: 1px solid rgba(255, 255, 255, 0.85) !important;
	border-radius: 0 !important;
	background-color: transparent !important;
	color: #fff !important;
	font-family: "Montserrat", sans-serif !important;
	font-size: 0.82rem !important;
	font-weight: 500 !important;
	letter-spacing: 0.14em !important;
	line-height: 1.2 !important;
	text-transform: uppercase !important;
	transition: background-color 0.3s ease, border-color 0.3s ease !important;
}

a.buzzi-hero__bottone.et_pb_button:hover,
.buzzi-hero .et_pb_button_module_wrapper a.et_pb_button:hover {
	background-color: var(--buzzi-marchio) !important;
	border-color: var(--buzzi-marchio) !important;
	color: #fff !important;
}

/* Divi aggiunge una freccia al passaggio e allarga il padding: qui non serve */
a.buzzi-hero__bottone.et_pb_button::after {
	display: none !important;
	content: none !important;
}

@media (max-width: 767px) {
	.buzzi-hero {
		min-height: 78vh;
	}
	.buzzi-hero::before {
		background: linear-gradient(
			180deg,
			rgba(97, 103, 86, 0.35) 0%,
			rgba(26, 8, 12, 0.55) 55%,
			rgba(26, 8, 12, 0.82) 100%
		);
	}
	.buzzi-hero .et_pb_row {
		display: flex;
		align-items: flex-end;
		min-height: 78vh;
		padding-bottom: 3rem !important;
	}
}

/* ==========================================================================
   CSS ereditato dal sito live
   Migrato il 21/09/2026 da Aspetto > Personalizza > CSS aggiuntivo (tema Divi),
   dove viveva come testo nel database. Il record originale e' rimasto intatto
   sul tema Divi come copia di sicurezza.
   ========================================================================== */

.et_header_style_centered #logo {
	max-height: 97%;
}

.woocommerce a.button.alt,
.woocommerce-page a.button.alt,
.woocommerce button.button.alt,
.woocommerce button.button.alt.disabled,
.woocommerce-page button.button.alt,
.woocommerce-page button.button.alt.disabled,
.woocommerce input.button.alt,
.woocommerce-page input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce-page #respond input#submit.alt,
.woocommerce #content input.button.alt,
.woocommerce-page #content input.button.alt,
.woocommerce a.button,
.woocommerce-page a.button,
.woocommerce button.button,
.woocommerce-page button.button,
.woocommerce input.button,
.woocommerce-page input.button,
.woocommerce #respond input#submit,
.woocommerce-page #respond input#submit,
.woocommerce #content input.button,
.woocommerce-page #content input.button,
.woocommerce-message a.button.wc-forward {
	background-color: var(--buzzi-marchio);
	border-radius: 10px;
	color: #fff;
}

#top-header {
	background-color: var(--buzzi-marchio);
}

/* ==========================================================================
   Restyling — da qui in avanti
   ========================================================================== */

/* ==========================================================================
   Griglia prodotti — primo passo del restyling
   Obiettivo: la fotografia diventa l'elemento dominante.
   Divi annida immagine, titolo e prezzo dentro un unico <a>: le regole sotto
   tengono conto di quella struttura (.et_shop_image avvolge solo la foto).
   ========================================================================== */

.woocommerce ul.products,
.woocommerce-page ul.products,
.et_pb_shop ul.products {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 3.5rem 2rem;
	margin: 0 !important;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none !important;
}

.woocommerce ul.products li.product,
.et_pb_shop ul.products li.product {
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: none !important;
}

/* Contenitore della sola immagine: proporzione costante e zoom morbido */
.woocommerce ul.products li.product .et_shop_image {
	display: block;
	overflow: hidden;
	background-color: #f4f1ec;
}

.woocommerce ul.products li.product .et_shop_image img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	display: block;
	margin: 0 !important;
	transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.woocommerce ul.products li.product:hover .et_shop_image img {
	transform: scale(1.04);
}

/* La sovrapposizione con la lente di Divi compete con lo zoom: si toglie */
.woocommerce ul.products li.product .et_overlay {
	display: none !important;
}

/* Tipografia della scheda.
   Il modulo Shop di Divi impone il proprio stile ai titoli con una regola
   .et_pb_shop_N.et_pb_shop ... h2 { ...!important } — specificita' (0,5,3).
   Per prevalere servono almeno 5 classi piu' un elemento in piu'. */
body .et_pb_shop .woocommerce ul.products li.product h2.woocommerce-loop-product__title,
body .et_pb_shop .woocommerce ul.products li.product h3,
body .woocommerce .related.products ul.products li.product h2.woocommerce-loop-product__title,
body .woocommerce ul.products li.product h2.woocommerce-loop-product__title {
	font-family: "Montserrat", sans-serif !important;
	font-size: 1rem !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	letter-spacing: 0.005em !important;
	color: #1f1f1f !important;
	text-align: left !important;
	padding: 1.1rem 0 0.35rem !important;
	margin: 0 !important;
}

body .et_pb_shop .woocommerce ul.products li.product .price,
body .woocommerce .related.products ul.products li.product .price,
body .woocommerce ul.products li.product .price,
body .woocommerce ul.products li.product .price .amount {
	font-family: "Montserrat", sans-serif !important;
	font-size: 0.95rem !important;
	font-weight: 400 !important;
	color: #6f6f6f !important;
	text-align: left !important;
	display: block;
	margin: 0 !important;
}

/* Bottone: compare al passaggio, non compete con la foto */
.woocommerce ul.products li.product .button {
	display: inline-block;
	margin-top: 0.9rem !important;
	padding: 0.7rem 1.4rem !important;
	background-color: var(--buzzi-marchio) !important;
	color: #fff !important;
	font-family: "Montserrat", sans-serif !important;
	font-size: 0.78rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase;
	border-radius: 2px !important;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.woocommerce ul.products li.product:hover .button,
.woocommerce ul.products li.product:focus-within .button {
	opacity: 1;
	transform: translateY(0);
}

/* Su touch il passaggio del mouse non esiste: il bottone resta visibile */
@media (hover: none) {
	.woocommerce ul.products li.product .button {
		opacity: 1;
		transform: none;
	}
}

@media (max-width: 980px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products,
	.et_pb_shop ul.products {
		grid-template-columns: repeat(2, 1fr);
		gap: 2.5rem 1.25rem;
	}
}

@media (max-width: 480px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products,
	.et_pb_shop ul.products {
		gap: 2rem 1rem;
	}
}

/* ==========================================================================
   Intestazione
   Un filetto di servizio in bordeaux e la fascia principale bianca con il logo
   storico e il menu.

   Nota di specificita': sulle pagine WooCommerce Divi prefissa le proprie
   regole con .et-db #et-boc .et-l, cioe' con un ID. Senza !important le regole
   di impaginazione del menu verrebbero scavalcate solo li'.
   ========================================================================== */

/* --- Filetto di servizio: una riga sola, centrata --- */

.buzzi-barra-servizio {
	padding: 0 !important;
}

.buzzi-barra-servizio .et_pb_row {
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
}

.buzzi-servizio p {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0;
	margin: 0 !important;
	padding: 7px 0 !important;
	font-family: "Nunito", system-ui, sans-serif !important;
	font-size: 0.72rem !important;
	font-weight: 400 !important;
	letter-spacing: 0.06em;
	line-height: 1.4 !important;
	color: rgba(255, 255, 255, 0.94) !important;
}

.buzzi-servizio .buzzi-sep {
	display: inline-block;
	margin: 0 1.15rem;
	color: rgba(255, 255, 255, 0.4);
}

.buzzi-servizio .buzzi-luogo {
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
}

/* --- Fascia principale --- */

.buzzi-barra-principale {
	padding: 0 !important;
	border-bottom: 1px solid rgba(31, 31, 31, 0.08);
}

/* Il contenuto della navbar sta sullo stesso contenitore del resto del sito:
   logo e carrello cadono sulla stessa verticale dei titoli di sezione. */
.buzzi-barra-principale .et_pb_row {
	width: min(92%, 1280px) !important;
	max-width: min(92%, 1280px) !important;
	margin-inline: auto !important;
	padding: 0 !important;
}

/* Tutti gli elementi sulla stessa linea mediana: logo, voci e carrello. */
.buzzi-menu .et_pb_menu__wrap {
	justify-content: flex-end !important;
	align-items: center !important;
	min-height: 84px;
}

.buzzi-menu .et_pb_menu__logo-wrap {
	margin-right: auto !important;
	align-items: center !important;
}

.buzzi-menu .et_pb_menu__logo {
	margin-right: 0 !important;
	display: flex !important;
	align-items: center !important;
}

/* Il logo e' calligrafico: ha bisogno di respiro, non di dimensioni.
   Divi azzera il vincolo di altezza sul logo dell'header del Theme Builder. */
.buzzi-menu .et_pb_menu__logo img,
.buzzi-menu .et_pb_menu_inner_container > .et_pb_menu__logo-wrap .et_pb_menu__logo img,
.buzzi-menu .et_pb_menu__logo-slot .et_pb_menu__logo img {
	max-height: 26px !important;
	height: 26px !important;
	width: auto !important;
	display: block !important;
}

.buzzi-menu .et_pb_menu__logo-wrap,
.buzzi-menu .et_pb_menu__logo {
	overflow: visible !important;
}

/* Voci del menu */
.buzzi-menu .et_pb_menu__menu > nav > ul {
	align-items: center !important;
}

.buzzi-menu .et_pb_menu__menu > nav > ul > li {
	display: flex !important;
	align-items: center !important;
	margin: 0 !important;
	padding: 0 1.05rem !important;
}

.buzzi-menu .et_pb_menu__menu > nav > ul > li > a {
	display: inline-block;
	color: var(--buzzi-inchiostro) !important;
	padding: 0 0 0.4rem !important;
	font-size: 0.78rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	line-height: 1.2 !important;
	text-decoration: none !important;
	border-bottom: 1px solid transparent;
	transition: color 0.25s ease, border-color 0.25s ease;
}

.buzzi-menu .et_pb_menu__menu > nav > ul > li > a:hover {
	color: var(--buzzi-marchio) !important;
	border-bottom-color: var(--buzzi-marchio);
	opacity: 1;
}

.buzzi-menu .et_pb_menu__menu > nav > ul > li.current-menu-item > a {
	color: var(--buzzi-marchio) !important;
	box-shadow: none !important;
	border-bottom-color: var(--buzzi-marchio);
}

/* Carrello: staccato dalle voci, con margine verso il bordo destro */
.buzzi-menu .et_pb_menu__icon,
.buzzi-menu .et_pb_menu__cart-button {
	display: flex !important;
	align-items: center !important;
	color: var(--buzzi-inchiostro) !important;
	font-size: 1.15rem !important;
	transition: color 0.25s ease;
}

.buzzi-menu .et_pb_menu__icon:hover {
	color: var(--buzzi-marchio) !important;
}

.buzzi-menu .et_pb_menu__cart-button {
	margin-left: 1.8rem !important;
	padding-left: 1.8rem;
	border-left: 1px solid rgba(31, 31, 31, 0.12);
}

/* ==========================================================================
   Caratteri scelti dal cliente
   Fraunces per i titoli grandi, Nunito per tutto il resto. Divi impone i
   propri font con regole per modulo, quindi qui si riafferma la scelta sulle
   parti che restano di Divi: intestazione e pie' di pagina.
   ========================================================================== */

.buzzi-menu .et_pb_menu__menu > nav > ul > li > a,
.buzzi-servizio p,
.buzzi-claim p {
	font-family: "Nunito", system-ui, sans-serif !important;
}

#main-footer,
#main-footer p,
#main-footer a,
#footer-info {
	font-family: "Nunito", system-ui, sans-serif !important;
}

/* La griglia del negozio segue la stessa scelta */
body .et_pb_shop .woocommerce ul.products li.product h2.woocommerce-loop-product__title,
body .woocommerce ul.products li.product h2.woocommerce-loop-product__title,
body .woocommerce ul.products li.product .price,
body .woocommerce ul.products li.product .button {
	font-family: "Nunito", system-ui, sans-serif !important;
}

/* La voce "Carrello" serve solo dove l'icona non c'e', cioe' su telefono. */
.buzzi-menu .et_pb_menu__menu li.buzzi-voce-mobile {
	display: none !important;
}

@media (max-width: 980px) {
	.et_mobile_menu li.buzzi-voce-mobile {
		display: block !important;
	}

	.et_mobile_menu li.buzzi-voce-mobile > a {
		color: var(--buzzi-marchio) !important;
		font-weight: 700 !important;
	}
}

/* ==========================================================================
   Intestazione su telefono
   Il filetto di servizio viene tolto: su schermo stretto i recapiti si
   accavallavano e rubavano spazio alla barra vera. Il numero resta comunque
   nel pie' di pagina e nella pagina Contatti.
   ========================================================================== */

@media (max-width: 980px) {
	.buzzi-barra-servizio {
		display: none !important;
	}

	/* La barra bianca ha bisogno di respiro: schiacciata sembrava provvisoria */
	.buzzi-barra-principale .et_pb_row {
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 5% !important;
	}

	.buzzi-menu .et_pb_menu_inner_container {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: space-between !important;
		width: 100% !important;
		min-height: 74px;
	}

	.buzzi-menu .et_pb_menu__logo-wrap {
		flex: 0 1 auto !important;
		min-width: 0 !important;
		margin: 0 !important;
	}

	.buzzi-menu .et_pb_menu__logo img,
	.buzzi-menu .et_pb_menu_inner_container > .et_pb_menu__logo-wrap .et_pb_menu__logo img,
	.buzzi-menu .et_pb_menu__logo-slot .et_pb_menu__logo img {
		max-height: 21px !important;
		height: 21px !important;
	}

	/* Il gruppo destro va spinto al bordo: lo "space-between" del contenitore
	   non basta perche' Divi lascia altri figli flessibili in mezzo. */
	.buzzi-menu .et_pb_menu__wrap {
		flex: 0 0 auto !important;
		width: auto !important;
		min-height: 0 !important;
		margin: 0 0 0 auto !important;
		justify-content: flex-end !important;
	}

	/* Sul telefono il carrello vive come voce del menu, non come icona */
	.buzzi-menu .et_pb_menu__cart-button {
		display: none !important;
	}

	/* --- Pulsante del menu ---
	   Divi lo colorava di beige, invisibile sul bianco, e lo rendeva con il
	   glifo "a" del proprio font di icone. */
	.buzzi-menu .et_mobile_nav_menu,
	.buzzi-menu .et_mobile_nav_menu .mobile_nav {
		display: flex !important;
		align-items: center !important;
		float: none !important;
		position: relative;
		z-index: 100000;
	}

	.buzzi-menu .et_mobile_nav_menu {
		margin: 0 0 0 auto !important;
	}

	.buzzi-menu .mobile_menu_bar {
		display: block !important;
		line-height: 1 !important;
	}

	.buzzi-menu .mobile_menu_bar:before {
		content: "\61" !important;
		font-family: ETmodules !important;
		font-size: 30px !important;
		line-height: 1 !important;
		color: var(--buzzi-inchiostro, #1f1f1f) !important;
		display: block !important;
	}

	/* Aperto: il glifo diventa una croce */
	.buzzi-menu .mobile_nav.opened .mobile_menu_bar:before {
		content: "\4d" !important;
		color: var(--buzzi-marchio) !important;
	}

	/* --- Menu a schermo intero ---
	   Di serie Divi apre una tendina sotto la barra, attraverso cui si vede la
	   pagina. Qui diventa un pannello pieno che copre tutto. */
	/* Divi imposta il fondo del menu a trasparente con !important e un
	   selettore a tre classi sullo stesso elemento: per prevalere ne servono
	   quattro. */
	.buzzi-menu.et_pb_menu.et_pb_module .et_mobile_menu,
	.buzzi-menu .et_mobile_menu {
		position: fixed !important;
		inset: 0 !important;
		width: 100vw !important;
		max-width: none !important;
		height: 100vh !important;
		height: 100dvh !important;
		margin: 0 !important;
		padding: 28vh 8% 3rem !important;
		background-color: #fdfaf4 !important;
		background-image: none !important;
		border: 0 !important;
		box-shadow: none !important;
		overflow-y: auto !important;
		z-index: 99999 !important;
	}

	/* Nessuna dichiarazione di display qui sopra: e' Divi ad aprire e chiudere
	   il menu (display:none di base, inline display:block all'apertura). Un
	   display forzato lo lascerebbe aperto in permanenza. La centratura
	   verticale si ottiene quindi con lo spazio interno, non con flex. */

	.buzzi-menu .et_mobile_menu ul,
	.buzzi-menu .et_mobile_menu li {
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
	}

	.buzzi-menu .et_mobile_menu li a {
		font-family: "Nunito", system-ui, sans-serif !important;
		font-size: 1.35rem !important;
		font-weight: 600 !important;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--buzzi-inchiostro) !important;
		padding: 1.05rem 0 !important;
		border-bottom: 1px solid rgba(31, 31, 31, 0.08) !important;
		background: none !important;
	}

	.buzzi-menu .et_mobile_menu li:last-child a {
		border-bottom: 0 !important;
	}

	.buzzi-menu .et_mobile_menu li.current-menu-item > a,
	.buzzi-menu .et_mobile_menu li a:hover {
		color: var(--buzzi-marchio) !important;
		background: none !important;
		opacity: 1;
	}

	.buzzi-menu .et_mobile_menu li.buzzi-voce-mobile > a {
		color: var(--buzzi-marchio) !important;
		font-weight: 700 !important;
	}
}

@media (min-width: 981px) {
	.buzzi-menu .et_mobile_nav_menu {
		display: none !important;
	}

	.buzzi-menu .et_pb_menu__menu li.buzzi-voce-mobile {
		display: none !important;
	}
}