/* ZChalet - stili del sito (tema child di Hello Elementor) */

/* Font Century Gothic: registrato nel plugin Custom Fonts (Aspetto > Custom Fonts) */

:root {
	--zc-sfondo-header: #FBFBF6;
	--zc-giallo: #FFE500;
	--zc-nero: #000000;
	--zc-grigio: #7A7A7A;
}

body {
	font-family: "Century Gothic", Sans-serif;
}

/* ===== Header (template UAE "Header"), sticky come con Elementor Pro ===== */
#masthead {
	position: sticky;
	top: 0;
	z-index: 99;
	background: var(--zc-sfondo-header);
	transition: box-shadow .2s;
}
.admin-bar #masthead { top: 32px; }
@media (max-width: 782px) { .admin-bar #masthead { top: 0; } }
#masthead.zc-header--scorrimento { box-shadow: 0 0 10px 4px rgba(0, 0, 0, .15); }

/* ===== Menu principale [zchalet_menu] ===== */
.zc-menu { position: relative; }
.zc-menu__lista {
	display: flex;
	justify-content: flex-start; /* come il widget Pro: allineato a sinistra nella colonna */
	flex-wrap: wrap;
	gap: 0 35px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.zc-menu__lista a {
	display: block;
	padding: 13px 0;
	font-family: "Century Gothic", Sans-serif;
	font-size: 13px;
	font-weight: normal;
	text-transform: uppercase;
	color: var(--zc-grigio);
	text-decoration: none;
	position: relative;
}
.zc-menu__lista a:hover,
.zc-menu__lista .current-menu-item > a,
.zc-menu__lista .special > a { color: var(--zc-nero); }
.zc-menu__lista a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 6px;
	height: 2px;
	background: var(--zc-giallo);
	transform: scaleX(0);
	transition: transform .2s;
}
.zc-menu__lista a:hover::after,
.zc-menu__lista .current-menu-item > a::after { transform: scaleX(1); }

.zc-menu__toggle {
	display: none;
	margin-left: auto;
	padding: 8px 0;
	width: 24px;
	background: transparent;
	border: 0;
	cursor: pointer;
}
.zc-menu__toggle span {
	display: block;
	height: 2px;
	margin: 5px 0;
	background: var(--zc-nero);
}
.zc-menu__toggle:hover, .zc-menu__toggle:focus { background: transparent; }

/* Hamburger da tablet in giu' (come "dropdown tablet" del widget Pro), tendina a tutta larghezza */
@media (max-width: 1024px) {
	.zc-menu__toggle { display: block; }
	.zc-menu__lista {
		display: none;
		position: fixed;
		left: 0;
		right: 0;
		flex-direction: column;
		gap: 0;
		background: var(--zc-sfondo-header);
		box-shadow: 0 10px 10px rgba(0, 0, 0, .1);
		text-align: center;
	}
	.zc-menu--aperto .zc-menu__lista { display: flex; }
	.zc-menu__lista a::after { display: none; }
	.zc-menu__lista .current-menu-item > a { background: var(--zc-giallo); }
}

/* ===== Carrello [zchalet_carrello] ===== */
.zc-carrello {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 10px;
	font-size: 13px;
	font-weight: 400;
	color: var(--zc-grigio);
	text-decoration: none;
}
.elementor-widget-shortcode:has(.zc-carrello) { text-align: right; }
.zc-carrello__icona { position: relative; color: var(--zc-nero); line-height: 0; }
.zc-carrello__numero {
	position: absolute;
	top: -.7em;
	right: -.9em;
	min-width: 1.6em;
	height: 1.6em;
	border-radius: 50%;
	background: var(--zc-nero);
	color: #fff;
	font-size: 10px;
	line-height: 1.6em;
	text-align: center;
}

/* ===== Negozio (ex Shop Template di Elementor Pro) ===== */
/* Titolo di pagina (design system: titolo-pagina). Su shop/prodotto lo stampa il plugin;
   su carrello/pagamento/account e' il titolo di Hello (.page-header .entry-title). */
.zc-titolo-pagina,
.woocommerce-cart .page-header .entry-title,
.woocommerce-checkout .page-header .entry-title,
.woocommerce-account .page-header .entry-title,
.zc-pagina-legale .page-header .entry-title {
	margin: 130px 0 110px;
	font-family: "Century Gothic", Sans-serif;
	font-size: 20px;
	font-weight: normal;
	line-height: 1;
	text-transform: uppercase;
	text-align: center;
	color: var(--zc-nero);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price {
	font-family: inherit;
	font-weight: 400;
	text-transform: uppercase;
	text-align: center;
	color: inherit;
}
.woocommerce ul.products li.product .add_to_cart_button { display: none; }

/* ===== Modulo videoclip [zchalet_modulo_videoclip] ===== */
.zc-modulo { display: flex; flex-wrap: wrap; gap: 30px; }
.zc-modulo__campo { flex: 1 1 calc(50% - 15px); margin: 0; }
.zc-modulo__campo--100, .zc-modulo__msg { flex-basis: 100%; }
.zc-modulo input, .zc-modulo select { width: 100%; }
.zc-modulo__trappola { position: absolute; left: -9999px; }
.zc-modulo__msg { margin: 0; font-weight: bold; }
.zc-modulo__msg--errore { color: #b00020; }
@media (max-width: 767px) { .zc-modulo__campo { flex-basis: 100%; } }

/* ===== Testi e link (Hello usa il rosa #c36 per i link: qui com'era con Astra) ===== */
a, a:hover, a:active { color: inherit; text-decoration: none; }
.elementor-widget-text-editor p { margin-block-end: 1.6em; } /* spaziatura paragrafi di Astra */

/* Pagine WooCommerce larghe 960px come con Astra */
body.woocommerce .site-main,
body.woocommerce-page .site-main { max-width: 960px; }
.elementor-widget-heading .zc-ruota { font-weight: bold; }

/* ===== Archivio shop a una colonna ===== */
.woocommerce ul.products.columns-1 li.product {
	float: none;
	width: 100%;
	max-width: 600px;
	margin: 0 auto 80px;
	text-align: center;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 15px; }
.woocommerce .related ul.products li.product .woocommerce-loop-product__title { font-size: 13px; }

/* ===== Scheda prodotto ===== */
.woocommerce div.product .product_title {
	font-size: 20px;
	font-weight: bold;
	text-transform: uppercase;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price { color: var(--zc-nero); }
.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce div.product .rtrn { font-size: 13px; }
.woocommerce .related.products > h2 {
	font-size: 18px;
	text-transform: uppercase;
	text-align: center;
}
.woocommerce .product_meta { display: none; }

/* ===== Modulo: pulsante giallo a tutta larghezza come prima ===== */
.zc-modulo button.zc-modulo__invia { /* piu' specifico dei pulsanti del kit Elementor */
	width: 100%;
	padding: 10px;
	background: var(--zc-nero);
	border: 1px solid var(--zc-nero);
	border-radius: 0;
	color: #fff;
	font-size: 13px;
	text-transform: uppercase;
}
.zc-modulo button.zc-modulo__invia:hover, .zc-modulo button.zc-modulo__invia:focus { background: var(--zc-sfondo-header); color: var(--zc-nero); }

/* Galleria prodotto: miniature in riga sotto l'immagine (come con Astra) */
.woocommerce div.product .woocommerce-product-gallery { opacity: 1 !important; } /* senza slider WooCommerce a volte non la rende visibile */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; }
.woocommerce div.product div.images .woocommerce-product-gallery__image img { width: 100%; height: auto; }
.woocommerce div.product div.images .woocommerce-product-gallery__image:first-child { flex-basis: 100%; }
.woocommerce div.product div.images .woocommerce-product-gallery__image:not(:first-child) { flex: 0 0 calc(25% - 8px); }
.woocommerce .related.products { clear: both; }


/* Checkout a blocchi: pulsante "Effettua ordine" nero come i pulsanti del sito (Hello lo fa rosa) */
.wc-block-components-checkout-place-order-button,
.wc-block-components-button:not(.is-link) {
	background: var(--zc-nero);
	border: 1px solid var(--zc-nero);
	border-radius: 0;
	color: #fff;
	text-transform: uppercase;
}
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-button:not(.is-link):hover { background: var(--zc-nero); color: #fff; opacity: .85; }
.wc-block-components-button:not(.is-link), .wc-block-components-button:not(.is-link):hover { text-decoration: none; }
.wp-block-woocommerce-cart a, .wc-block-grid__product-title { text-decoration: none; }

/* Titoli ex "Animated Headline" di Elementor Pro (stile Rotate, animazione Flip):
   la parola resta ferma 2,5 s, poi si ribalta in avanti sparendo e rientra ribaltandosi dal basso,
   con le stesse fasi del widget Pro (uscita 1,2 s, entrata 1,2 s, perspective 300px). */
.zc-ruota {
	display: inline-block;
	font-weight: bold;
	transform-origin: 50% 100%;
	backface-visibility: hidden;
	animation: zc-flip 4.9s linear infinite;
}
.elementor-heading-title:has(.zc-ruota), .zc-titolo-pagina { perspective: 300px; }
@keyframes zc-flip {
	0%, 51%   { transform: rotateX(0deg);   opacity: 1; }  /* ferma 2,5 s */
	59.6%     { transform: rotateX(-40deg); opacity: 1; }  /* uscita */
	67.9%     { opacity: 0; }
	75.5%     { transform: rotateX(180deg); opacity: 0; }
	75.6%     { transform: rotateX(180deg); opacity: 0; }  /* entrata */
	84.2%     { transform: rotateX(300deg); opacity: 0; }
	92.4%     { opacity: 0.6; }
	100%      { transform: rotateX(360deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .zc-ruota { animation: none; } }

/* Testi: interlinea di Astra (1.85) e link senza sottolineatura come in produzione */
.elementor-widget-text-editor { line-height: 1.85; }
.elementor a, .elementor a:hover { text-decoration: none; }
.zc-modulo select { padding: 8px 10px; border: 1px solid var(--zc-nero); border-radius: 0; background: var(--zc-sfondo-header); color: var(--zc-nero); font: inherit; font-size: 14px; }

/* Header/footer dei modelli ZChalet (UAE) */
.zc-menu__lista .special > a { font-weight: 600; }   /* SHOP */
body.elementor-page .zc-footer-contatti { display: none; }   /* le pagine Elementor hanno i contatti nel contenuto; carrello e pagamento no */
/* L'hamburger e' un <button>: senza questo prende fondo nero e padding dei pulsanti del kit */
.zc-menu button.zc-menu__toggle,
.zc-menu button.zc-menu__toggle:hover,
.zc-menu button.zc-menu__toggle:focus { background: transparent; border: 0; border-radius: 0; padding: 8px 0; width: 24px; color: var(--zc-nero); }
.zc-menu button.zc-menu__toggle:focus-visible { outline: 2px solid var(--zc-nero); outline-offset: 4px; }
/* Scheda prodotto: respiro sopra come con Astra */
.single-product .site-main { padding-top: 80px; }

/* Scheda prodotto come con Astra: prezzo grande, quantita' con - e + (js/zchalet.js), pulsante a contorno */
.woocommerce div.product p.price { font-size: 18px; }
.woocommerce div.product form.cart { display: flex; align-items: center; gap: 10px; margin: 20px 0 30px; }
.woocommerce div.product form.cart div.quantity { display: flex; float: none; margin: 0; }
.woocommerce div.product form.cart button.zc-qta, .woocommerce div.product form.cart button.zc-qta:hover { width: 28px; padding: 0; border: 1px solid #ddd; border-radius: 0; background: transparent; color: var(--zc-nero); font-size: 14px; cursor: pointer; }
.woocommerce div.product form.cart .qty { width: 36px; height: 30px; padding: 0; border: 1px solid #ddd; border-left: 0; border-right: 0; border-radius: 0; text-align: center; -moz-appearance: textfield; }
.woocommerce div.product form.cart .qty::-webkit-inner-spin-button { -webkit-appearance: none; }
.woocommerce div.product form.cart button.single_add_to_cart_button {
	padding: 8px 22px; background: transparent; color: var(--zc-nero); border: 1px solid var(--zc-nero); border-radius: 0; font-size: 13px; text-transform: uppercase;
}
.woocommerce div.product form.cart button.single_add_to_cart_button:hover { background: var(--zc-nero); color: #fff; }
.woocommerce div.product .stock { color: #6b8f3a; }
.woocommerce div.product .stock strong { color: var(--zc-nero); }
.woocommerce-message, .woocommerce-info, .wc-block-components-notice-banner { border: 1px solid var(--zc-nero); border-radius: 0; background: var(--zc-sfondo-header); }

/* Hover di tutti i pulsanti: nero con testo bianco (design system, Pulsante) */
.elementor-button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover { background: var(--zc-nero); color: #fff; }

/* Taglie come pulsanti (metodo nevaris; design system: squadrati, bordo inchiostro, scelta in nero) */
.variations_form table.variations, .variations_form .variations tbody, .variations_form .variations tr,
.variations_form .variations th, .variations_form .variations td { display: block; border: 0; padding: 0; background: none; }
.variations_form .variations .label { margin-bottom: 10px; text-align: left; font-weight: 400; }
.variations_form .variations .label label { font-size: 13px; font-weight: 400; text-transform: uppercase; color: var(--zc-nero); }
.zc-taglia-scelta { font-weight: 700; }
.zc-select-nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.zc-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch {
	display: inline-flex; align-items: center; justify-content: center; min-width: 52px; height: 38px; padding: 0 12px;
	border: 1px solid var(--zc-nero); border-radius: 0; background: transparent; color: var(--zc-nero);
	font-size: 13px; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s;
}
.swatch:hover, .swatch.selected { background: var(--zc-nero); color: #fff; }
.swatch:focus-visible { outline: 2px solid var(--zc-nero); outline-offset: 2px; }
.swatch.is-esaurita { opacity: .35; cursor: not-allowed; text-decoration: line-through; background: transparent; color: var(--zc-nero); }
.variations_form .reset_variations { display: inline-block; margin-top: 8px; font-size: 12px; color: var(--zc-grigio); }
.woocommerce div.product form.variations_form { display: block; }
.woocommerce div.product form.variations_form .woocommerce-variation-add-to-cart { display: flex; align-items: center; gap: 10px; margin-top: 20px; }

/* Mobile e tablet --------------------------------------------------------- */
/* Carrello e checkout a blocchi sono "alignwide": Hello li allarga con margini negativi e su schermi
   stretti uscivano a sinistra (testo tagliato, foto del prodotto sparita). */
.wp-block-woocommerce-cart.alignwide,
.wp-block-woocommerce-checkout.alignwide { margin-left: 0; margin-right: 0; width: 100%; max-width: 100%; }
@media (max-width: 1024px) {
	/* Margine laterale sulle pagine del negozio (le pagine Elementor hanno il loro) */
	body.woocommerce .site-main,
	body.woocommerce-page .site-main { padding-left: 20px; padding-right: 20px; box-sizing: border-box; }
	.zc-titolo-pagina,
	.woocommerce-cart .page-header .entry-title,
	.woocommerce-checkout .page-header .entry-title,
	.woocommerce-account .page-header .entry-title,
	.zc-pagina-legale .page-header .entry-title { margin: 60px 0 50px; }
	.zc-modulo { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 767px) {
	.single-product .site-main { padding-top: 30px; }
	.woocommerce div.product form.cart:not(.variations_form) { flex-wrap: wrap; }
	.woocommerce div.product form.variations_form .woocommerce-variation-add-to-cart { flex-wrap: wrap; }
}
@media (max-width: 767px) {
	/* Footer: contatti centrati solo su mobile (su tablet e desktop restano allineati alla riga gialla) */
	.zc-footer-contatti .elementor-widget-heading,
	.zc-footer-contatti .elementor-widget-heading .elementor-heading-title,
	.zc-footer-contatti .elementor-widget-text-editor { text-align: center !important; }
}

/* Pagine legali: testo con margini laterali e aria sopra il footer */
body.zc-pagina-legale main.site-main { max-width: 960px; margin: 0 auto; padding: 0 0 90px; box-sizing: border-box; }
@media (max-width: 1024px) { body.zc-pagina-legale main.site-main { padding-left: 20px; padding-right: 20px; } }
.zc-pagina-legale .page-content h5 { margin: 34px 0 12px; font-size: 18px; }

/* h1 presente nel codice ma non visibile (pagine senza titolo grafico) */
.zc-solo-lettori { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Pagina 404 */
.zc-404 { max-width: 960px; margin: 0 auto; padding: 0 20px 90px; box-sizing: border-box; text-align: center; }
.zc-404__testo { margin: 0 0 24px; color: var(--zc-nero); }
.zc-404__azioni { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0 0 40px; }
.zc-404 a.zc-404__btn { display: inline-block; padding: 10px 28px; background: var(--zc-nero); border: 1px solid var(--zc-nero); border-radius: 0; color: #fff; font-size: 13px; text-transform: uppercase; text-decoration: none; }
.zc-404 a.zc-404__btn:hover, .zc-404 a.zc-404__btn:focus { background: var(--zc-sfondo-header); color: var(--zc-nero); }