/*
Theme Name: Servizi Theme
Theme URI: https://example.com/servizi-theme
Author: Team
Author URI: https://example.com
Description: Tema base per il progetto Servizi (integrazione con plugin Servizi).
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: servizi-theme
*/

/* Base styles */
:root{
	/* Navbar mobile: solo su iOS il JS imposta --vn-vv-delta (Visual Viewport). Su Android/desktop resta 0. */
	--vn-vv-delta: 0px;
}

html { 
	background-color: #ffffff;
	min-height: 100vh;
	min-height: 100svh;
	min-height: 100dvh;
}
body { 
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', sans-serif;
    font-size: 16px;
    color: #222; 
    background:#fff; 
    width: 100%; 
    margin-left:auto; 
    margin-right:auto; 
    overflow-x:hidden; 
    box-sizing:border-box;
    /* Layout a piena altezza: il footer resta in basso */
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}
*, *::before, *::after { box-sizing: inherit; }

/* Rimuovi padding dal contenitore main e fallo espandere per occupare lo spazio disponibile */
main {
	padding: 0 !important;
	margin: 0;
    flex: 1 0 auto;
}

/* Responsive body width */
/* 0px to 768px: 100% (default) */
@media (min-width: 768px) {
	body { width: 80%; }
}
@media (min-width: 1024px) {
	body { width: 60%; }
}
@media (min-width: 1536px) {
	body { width: 50%; }
}
a { color: #0a66c2; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Accessibilità: skip link "Salta al contenuto principale" */
.skip-link.screen-reader-text {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 0.75rem 1rem;
	background: #fff;
	color: #222;
	text-decoration: none;
	font-weight: 600;
	box-shadow: 0 2px 8px rgba(0,0,0,0.2);
	border-radius: 0 0 4px 0;
}
.skip-link.screen-reader-text:focus {
	left: 0;
	outline: 2px solid #e04e39;
	outline-offset: 2px;
}

/* Accessibilità: focus visibile per navigazione da tastiera */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid #e04e39;
	outline-offset: 2px;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible) {
	outline: none;
}

/* Smooth scroll anchor highlight effect */
.anchor-highlight {
	animation: anchorHighlight 2s ease-out;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

@keyframes anchorHighlight {
	0% {
		background-color: rgba(255, 243, 205, 1) !important;
		box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7), 0 0 20px rgba(255, 193, 7, 0.3) !important;
		outline: 2px solid rgba(255, 193, 7, 0.8) !important;
		outline-offset: 4px !important;
	}
	50% {
		background-color: rgba(255, 243, 205, 0.7) !important;
		box-shadow: 0 0 0 10px rgba(255, 193, 7, 0.2), 0 0 30px rgba(255, 193, 7, 0.2) !important;
		outline: 2px solid rgba(255, 193, 7, 0.5) !important;
	}
	100% {
		background-color: transparent !important;
		box-shadow: none !important;
		outline: none !important;
	}
}
.container { 
    max-width: 1080px; 
    margin: 0 auto; 
    padding: 24px;
}

/* Main container: nessun padding su desktop, padding orizzontale ridotto su tablet/mobile */
main.container {
    padding-left: 0;
    padding-right: 0;
}

/* ========================================
   HEADER CONTAINER
   Classe base = Mobile (default)
   ======================================== */
header.container {
	text-align: center; /* Centra il logo nell'header */
	background: #fff !important; /* Background bianco */
	padding: 12px !important; /* Mobile padding */
}

.site-title {
	display: inline-block; /* Limita il link solo alla dimensione dell'immagine */
}

.site-title img,
.header-logo {
	display: block;
	max-width: 260px;
	width: 100%;
	height: auto;
	aspect-ratio: 540 / 160; /* Riserva spazio per evitare CLS */
}

/* Tablet (da 768px a 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
	header.container {
		padding: 18px !important;
	}
	.site-title img,
	.header-logo {
		max-width: 320px;
	}
}

/* Desktop (da 1024px in su) */
@media (min-width: 1024px) {
	header.container {
		padding: 24px !important;
	}
	.site-title img,
	.header-logo {
		max-width: 360px;
	}
}

/* Container generici (non header) - solo mobile */
@media (max-width: 767px) {
	.container:not(header.container) {
		padding: 12px;
	}
}

/* Main container: override padding per tablet e mobile */
@media (max-width: 1023px) {
    main.container {
        padding-left: 4px;
        padding-right: 4px;
    }
}
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.card { border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; background: #fff; }
.card img { width: 100%; height: 160px; object-fit: cover; display: block; }
.card .content { padding: 12px 14px; }
.pill { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: #eef2ff; color: #3730a3; }

/* Home */
.container-icons { max-width: 1280px; margin: 0 auto; padding: 0; }
.home .container-icons,
.front-page .container-icons {
	max-width: 1280px;
}
/* Riserva altezza per sezione stories (popolata da JS) per evitare shift quando i cerchi compaiono */
.home-icons.container-icons {
	min-height: 100px; /* mobile: cerchi max 92px */
}
.home-icons.container-icons .stories-swiper {
	min-height: 96px;
}
@media (min-width: 768px) {
	.home-icons.container-icons {
		min-height: 130px; /* tablet/desktop: cerchi max 110px */
	}
	.home-icons.container-icons .stories-swiper {
		min-height: 120px;
	}
}
.home-icons .icons-row { display:flex; justify-content:center; padding: 0; overflow-x:auto; scroll-snap-type:x mandatory; max-width:1280px; margin:0 auto; }
.home-icons .icon-circle { border-radius:50%; overflow:hidden; border:1px solid #eee; background:#fff; display:flex; align-items:center; justify-content:center; scroll-snap-align:center; flex:0 0 calc((100% - 12px) / 3.5); aspect-ratio: 1 / 1; }
.home-icons .icon-circle img { width:100%; height:100%; object-fit:cover; }

/* Home (desktop): max 1200px + padding laterale 15% (max 180px) */
@media (min-width: 1024px) {
	.vn-desktop-shell:is(.home, .front-page) .home-icons.container-icons {
		max-width: 1200px;
		/* YYY */
        /* 15% di 1200px = 180px per lato */
        /* padding storie */
		/* padding-left: clamp(24px, 15vw, 360px);
		padding-right: clamp(24px, 15vw, 360px); */
		box-sizing: border-box;
		margin-left: auto;
		margin-right: auto;
	}

	/* Il contenuto interno segue il padding del container */
	.vn-desktop-shell:is(.home, .front-page) .home-icons.container-icons .stories-swiper {
		max-width: 100%;
	}
}
/* Swiper-driven story circle default sizes (if assets/css/swiper.css not loaded) */
.story-circle { border-radius:50%; background:center/cover no-repeat #fff; box-shadow:0 4px 12px rgba(0,0,0,.12); }

/* Stories (home): fallback spacing/width if swiper.css is missing */
.stories-swiper .swiper-slide {
	width: auto;
	flex-shrink: 0;
}

.home-hero .hero-slider { position:relative; }
.home-hero .hero-slide { position:relative; }
.home-hero .hero-slide img { width:100%; height:auto; display:block; border-radius:4px; }
.home-hero .hero-cta { position:absolute; bottom:10px; left:0; right:0; display:flex; justify-content:center; }
.btn { display:inline-block; background:#ee5a3f; color:#fff; padding:8px 16px; border-radius:3px; font-weight:600; }
.btn-secondary { display:inline-block; background:#efefef; color:#111; padding:8px 16px; border-radius:3px; font-weight:600; }
.home-hero .hero-dots { text-align:center; margin-top:8px; }
.home-hero .hero-dots .dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#bbb; margin:0 3px; }
.home-hero .hero-dots .dot.active { background:#333; }

.home-services { display:grid; grid-template-columns:1fr; gap:20px; margin-top:16px; }
.home-services .service-card { border:1px solid #eee; border-radius:6px; overflow:hidden; background:#fff; }
.home-services .service-card img { width:100%; height:auto; display:block; }
.home-services .service-card .content { padding:12px 14px; }
.home-services .service-carousel { position:relative; }
.home-services .service-carousel .slide { display:none; }
.home-services .service-carousel .slide.active { display:block; }
.home-services .service-carousel .dots { text-align:center; margin:6px 0 0; }
.home-services .service-carousel .dots .dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#c7c7c7; margin:0 3px; }
.home-services .service-carousel .dots .dot.active { background:#333; }

.home-works .h-section { font-size:18px; margin:18px 0 8px; }

/* ========================================
   PAGE HEADER (tutte le pagine)
   - Desktop / tablet: nessun padding
   - Mobile: padding orizzontale 8px
   ======================================== */
.page-header {
    padding: 0;
    margin: 0 0 24px;
}

/* ========================================
   PAGE TITLES (stile uniforme come Promo)
   ======================================== */
:where(
	.vn-page-title,
	.page-promo .promo-content > h1,
	.page-contatti .contatti-title,
	.page-team .su-team-title
) {
	font-size: 32px;
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -0.3px;
	margin: 0 0 18px 0;
}

@media (max-width: 767px) {
	:where(
		.vn-page-title,
		.page-promo .promo-content > h1,
		.page-contatti .contatti-title,
		.page-team .su-team-title
	) {
		font-size: 26px;
		margin-bottom: 14px;
	}
}

/* Override plugin Team styles (plugin CSS viene caricato dopo) */
.page-team .su-team-title {
	font-size: 32px !important;
	font-weight: 700 !important;
	line-height: 1.15 !important;
	letter-spacing: -0.3px !important;
	margin: 0 0 18px 0 !important;
}

/* Team: griglia card per breakpoint
   - smartphone: già 1 colonna dal plugin (max-width: 767px)
   - tablet: 2 colonne
   - desktop: 3 colonne
*/
@media (min-width: 768px) and (max-width: 1023px) {
	.page-team .su-team-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (min-width: 1024px) {
	.page-team .su-team-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 767px) {
    .page-header {
        padding: 0 8px;
    }
}

/* Home - Contenitore unico per Categorie e Progetti */
/* Wrapper principale per pagina categoria */
.categoria-page-wrapper {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0; /* Gap gestito uniformemente tra tutti gli item */
	box-sizing: border-box;
}

/* Responsive width del wrapper - stessa larghezza di .home-cards-container */
@media (min-width: 768px) {
	.categoria-page-wrapper {
		width: 70%;
	}
}

/* Assicura che .home-cards-container dentro il wrapper abbia la stessa larghezza */
.categoria-page-wrapper .home-cards-container {
	width: 100% !important;
	/* Padding gestito dalla classe .home-cards-container stessa */
	margin: 0 auto !important;
}

/* Rimuovi padding dal form dentro il wrapper categoria */
.categoria-page-wrapper .servizi-contact-section {
	padding: 0 !important;
	margin: 0 !important;
}

/* Padding orizzontale su mobile per form nella pagina categoria */
@media (max-width: 767px) {
	.categoria-page-wrapper .servizi-contact-section {
		padding: 0 20px 20px 20px !important;
	}
}

/* Categoria Hero Section */
.categoria-hero-section {
	background: radial-gradient(circle at center, #c73e2f 0%, #8b1a0f 100%);
	min-height: calc(100vh - 76px); /* Altezza fino al menu (100vh - altezza menu 76px) */
	display: flex;
	align-items: start;
	justify-content: center;
	padding: 24px;
	margin-bottom: 40px;
	box-sizing: border-box;
	position: relative;
	width: 100%;
}

.categoria-hero-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0;
	margin: 0;
	gap: 16px;
	width: 100%;
	box-sizing: border-box;
}

.categoria-hero-logo {
	margin-bottom: 10px;
}

.categoria-hero-logo a {
	display: inline-block;
	text-decoration: none;
}

.categoria-hero-logo img {
	max-width: 260px; /* Mobile size - stessa dimensione header */
	width: 100%;
	height: auto;
	display: block;
}

/* Tablet (da 768px a 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
	.categoria-hero-logo img {
		max-width: 320px; /* Tablet size - stessa dimensione header */
	}
}

/* Desktop (da 1024px in su) */
@media (min-width: 1024px) {
	.categoria-hero-logo img {
		max-width: 360px; /* Desktop size - stessa dimensione header */
	}
}

.categoria-hero-title {
	color: #fff;
	font-size: clamp(1.5rem, 5vw + 1rem, 2.5rem);
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
	width: 100%;
}

/* Titolo landing: variante mobile/desktop (testo diverso ma stesso layout) */
.categoria-hero-title .vn-landing-title-mobile { display: none; }
.categoria-hero-title .vn-landing-title-desktop { display: inline; }
@media (max-width: 767px) {
	.categoria-hero-title .vn-landing-title-mobile { display: inline; }
	.categoria-hero-title .vn-landing-title-desktop { display: none; }
}

.categoria-hero-description {
	color: #fff;
	font-size: clamp(1rem, 3vw + 0.5rem, 1.25rem);
	line-height: 1.4;
	margin: 0;
	width: 100%;
	opacity: 0.95;
}

.categoria-hero-cta {
	margin-top: 20px;
}

.categoria-hero-button {
	display: inline-block;
	background: #fff;
	color: #e04e39;
	padding: 10px 24px;
	border-radius: 30px;
	text-decoration: none;
	font-weight: 700;
	font-size: clamp(0.75rem, 1.5vw + 0.25rem, 0.9375rem);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	transition: all 0.3s ease;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.categoria-hero-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
	color: #c73e2f;
	text-decoration: none;
}

/* Tablet e Desktop */
@media (min-width: 768px) {
	.categoria-hero-section {
		min-height: auto;
		width: 100vw;
		margin-left: calc(-50vw + 50%);
		margin-right: calc(-50vw + 50%);
	}
	
	.categoria-hero-content {
		padding: 0;
		max-width: 70%;
		margin: 0 auto;
	}
}

.home-cards-container {
	width: 100%;
	margin: 0 auto;
	padding: 40px 0px 0px 0px;
	display: flex;
	flex-direction: column;
	gap: 40px;
	box-sizing: border-box;
	contain: layout; /* Riduce CLS: isola layout */
}

/* Responsive width del contenitore */
/* Schermi piccoli: 100% (default) con padding orizzontale */
/* Schermi >= 768px: 70% senza padding orizzontale */
@media (min-width: 768px) {
	.home-cards-container { 
		width: 70%;
		padding: 60px 0 0 0;
	}
}

/* Home - Categories layout */
.home-categories {
	display: flex;
	flex-direction: column;
	gap: 60px;
	width: 100%;
	align-items: center;
}

/* Desktop: limita solo la gallery/immagine a 80dvh */
@media (min-width: 1024px) {
	:where(
		/* Home - card servizi (swiper) */
		.home-categories .cat-card .cat-swiper,
		.home-categories .cat-card .cat-swiper.swiper,
		.home-categories .cat-card .cat-swiper.swiper-container,
		/* Home - "nostri lavori" */
		.home-projects .project-card .project-image,
		/* Servizi - dettaglio categoria (gallery singola o swiper) */
		.categoria-page-wrapper .cat-card .cat-swiper,
		.categoria-page-wrapper .cat-card .cat-swiper.swiper,
		/* Servizi - elenco servizi */
		.servizio-card-image,
		.servizio-card-image-placeholder
	) {
		max-height: 80dvh;
		max-height: 80vh;
		overflow: hidden;
	}

	/* Assicura che le immagini riempiano il box senza deformare */
	.home-projects .project-card .project-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}
}
.home-categories .category-block {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
}
.home-categories .cat-title { display:none; }
.home-categories .cat-card {
	display: flex;
	flex-direction: column;
	border: none;
	border-radius: 0;
	overflow: hidden;
	background: #fff;
	box-shadow: none;
	gap: 0;
	align-items: stretch;
	width: 100% !important;
	max-width: 640px !important; /* Larghezza massima contenitore card categoria */
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	contain: layout; /* Riduce CLS: isola layout della card */
}
/* Contenitore slide: dimensione 1:1 fissata da subito (prima che Swiper init) per evitare CLS */
.home-categories .cat-card .cat-swiper,
.home-categories .cat-card .cat-swiper.swiper,
.home-categories .cat-card .cat-swiper.swiper-container {
	position: relative;
	width: 100% !important;
	max-width: 640px !important;
	min-width: 0 !important;
	height: 0 !important;
	padding-bottom: 100% !important; /* 1:1, riserva spazio subito */
	background: transparent;
	line-height: 0;
	box-sizing: border-box;
	overflow: hidden;
	flex-shrink: 0; /* evita collasso nel flex layout */
}
.home-categories .cat-card .cat-swiper .swiper-wrapper {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
}
.home-categories .category-block {
	display: flex;
	justify-content: center;
}
.home-categories .cat-swiper + .cat-cta-block {
	width: 100%;
	margin-top: 0 !important;
	display: block;
}
.home-categories .cat-cta-block {
	width: 100%;
	margin: 0;
}
.home-categories .cat-card .cat-swiper .swiper-wrapper {
	width: 100% !important;
	height: 100% !important;
}
.home-categories .cat-card .cat-swiper .swiper-slide {
	width: 100% !important;
	height: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	display: block;
	line-height: 0;
}
.home-categories .cat-card .cat-swiper img {
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	display: block;
	border: 0;
	box-sizing: border-box;
	/* Evita CLS: riserva spazio con aspect-ratio coerente con il contenitore 1:1 */
	aspect-ratio: 1 / 1;
}

/* YouTube embeds inside Swiper (casi studio) */
.home-categories .cat-card .cat-swiper iframe.vn-youtube-embed,
.categoria-page-wrapper .cat-card .cat-swiper iframe.vn-youtube-embed {
	width: 100%;
	height: 100% !important;
	border: 0;
	display: block;
}

/* Poster (thumbnail) per evitare flash bianco mentre l'iframe YouTube ricarica */
.home-categories .cat-card .cat-swiper .swiper-slide,
.categoria-page-wrapper .cat-card .cat-swiper .swiper-slide {
	position: relative;
}
.home-categories .cat-card .cat-swiper .vn-yt-poster,
.categoria-page-wrapper .cat-card .cat-swiper .vn-yt-poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	background: #000;
	z-index: 2;
	pointer-events: none;
}

.home-categories .cat-card .cat-swiper iframe.vn-youtube-embed,
.categoria-page-wrapper .cat-card .cat-swiper iframe.vn-youtube-embed {
	position: relative;
	z-index: 1;
}

/* Fix UX: iframe blocks swipe -> show nav arrows only when active slide is video */
.home-categories .cat-card .cat-swiper,
.categoria-page-wrapper .cat-card .cat-swiper {
	position: relative;
}
.vn-video-nav {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 0 16px;
	pointer-events: none; /* buttons will re-enable */
	opacity: 0;
	visibility: hidden;
	transition: opacity .18s ease, visibility .18s ease;
	z-index: 5;
}
.vn-video-nav button {
	pointer-events: auto;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.3);
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(8px);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
}
.vn-video-nav button svg {
	width: 28px;
	height: 28px;
}
.vn-video-nav button:hover {
	background: rgba(0, 0, 0, 0.75);
	border-color: rgba(255, 255, 255, 0.6);
	transform: scale(1.1);
}
.vn-video-nav button {
	-webkit-tap-highlight-color: transparent;
}

/* Non mantenere lo stato "selezionato" dopo click/tap */
.vn-video-nav button:focus { outline: none; }
/* Mantieni comunque un focus accessibile da tastiera */
.vn-video-nav button:focus-visible { outline: 2px solid rgba(255,255,255,.75); outline-offset: 2px; }
.vn-cat-video-active .vn-video-nav {
	opacity: 1;
	visibility: visible;
}
/* ========================================
   STRUTTURA UNIFICATA PER TUTTE LE CARD
   ======================================== */

/* ========================================
   CONTENITORE INFO CARD - UNIFICATO
   ======================================== */
.card-info {
	order: 4 !important;
	padding: 6px 0 12px;
	margin: 0;
	width: 100%;
	line-height: 1.2;
	box-sizing: border-box;
}

/* Rimuovi spacing interno */
.card-info > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Padding orizzontale solo per mobile */
@media (max-width: 767px) {
	.card-info {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}
}

/* Retrocompatibilità per vecchie classi */
.home-categories .cat-info,
.project-info {
	order: 4 !important;
	padding: 6px 0 12px;
	margin: 0;
	width: 100%;
	line-height: 1.2;
	box-sizing: border-box;
}

.home-categories .cat-info > *,
.project-info > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

@media (max-width: 767px) {
	.home-categories .cat-info,
	.project-info {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}
}

/* ========================================
   CLASSI UNIFICATE PER TUTTE LE CARD
   Limitato solo agli elementi dentro .card-info
   ======================================== */

/* Categoria Card - opzionale, potrebbe non essere presente */
.card-info .card-category {
	display: block;
	margin: 0 0 4px 0;
	padding: 0;
	font-size: clamp(0.875rem, 1.5vw + 0.25rem, 1rem);
	color: #777;
	line-height: 1.2;
	font-weight: 400;
}

/* Nascondi se vuoto */
.card-info .card-category:empty {
	display: none;
}

/* Titolo Card - sempre presente */
.card-info .card-title {
	display: block;
	margin: 0;
	padding: 0;
	font-size: clamp(0.9375rem, 2.5vw + 0.75rem, 1.5rem);
	font-weight: 700;
	color: #111;
	line-height: 1.2;
}

/* Se c'è una categoria sopra, aggiungi un piccolo spazio */
.card-info .card-category + .card-title {
	margin-top: 4px;
}

/* Descrizione Card - sempre presente */
.card-info .card-desc {
	display: block;
	margin: 8px 0 0 0;
	padding: 0;
	color: #555;
	font-size: clamp(0.875rem, 2vw + 0.5rem, 1.25rem);
	line-height: 1.4;
}


.home-categories .cat-service-title,
.project-title {
	display: block;
	margin: 0;
	padding: 0;
	font-size: clamp(0.9375rem, 2.5vw + 0.75rem, 1.5rem);
	font-weight: 700;
	color: #111;
	line-height: 1.2;
}

.home-categories .cat-service-desc,
.project-desc {
	display: block;
	margin: 8px 0 0 0;
	padding: 0;
	color: #555;
	font-size: clamp(0.875rem, 2vw + 0.5rem, 1.25rem);
	line-height: 1.4;
}

.home-categories .cat-service-share {
	margin-top: 12px;
	padding: 4px 4px 0 4px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	position: relative;
}

.home-categories .cat-service-share-btn {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.home-categories .cat-service-share svg {
	width: 24px;
	height: 24px;
	color: #999;
	transition: color 0.3s ease;
}

.home-categories .cat-service-share-btn:hover svg,
.home-categories .cat-service-share-btn:focus svg {
	color: #e04e39;
	outline: none;
}

.home-categories .cat-service-share-menu {
	position: absolute;
	bottom: 100%;
	left: 0;
	margin-bottom: 8px;
	background: #fff;
	border: 1px solid #333;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	padding: 8px 0;
	min-width: 180px;
	display: none;
	z-index: 1000;
}

.home-categories .cat-service-share-menu.active {
	display: block;
}

.home-categories .cat-service-share-menu .share-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	color: #333;
	text-decoration: none;
	transition: background-color 0.2s ease;
	font-size: 14px;
}

.home-categories .cat-service-share-menu .share-link:hover {
	background-color: #f5f5f5;
	color: #e04e39;
	text-decoration: none;
}

.home-categories .cat-service-share-menu .share-link svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.home-categories .cat-service-share-menu .share-link span {
	font-weight: 500;
}
.home-categories .cat-cta {
	font-size: clamp(0.8125rem, 2vw + 0.25rem, 1rem) !important;
	color: #fff !important;
	text-decoration: none !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
}
.home-categories .cat-cta:hover {
	color: #fff !important;
	opacity: 0.9;
}
.home-categories .cat-cta-block {
	order: 2 !important;
	background: #e04e39 !important;
	padding: 6px 12px !important;
	text-align: center !important;
	margin: 0 !important;
	margin-top: 0 !important;
	display: block !important;
	width: 100% !important;
}

/* Home - Projects layout */
.home-projects {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 40px;
	align-items: center;
}

/* ============================================
   INTRO CASI STUDIO (pagina servizi categoria)
   ============================================ */
.vn-case-studies-intro {
	max-width: 720px;
	margin: 28px auto 18px;
	padding: 18px 14px 6px;
	text-align: center;
}
.vn-case-studies-title {
	margin: 0 0 10px;
	font-size: clamp(1.25rem, 3vw + 0.75rem, 2rem);
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -0.3px;
	color: #111;
}
.vn-case-studies-subtitle {
	margin: 0 auto;
	font-size: clamp(0.95rem, 1.6vw + 0.55rem, 1.15rem);
	line-height: 1.5;
	color: #555;
	max-width: 62ch;
}

@media (max-width: 767px) {
	.vn-case-studies-intro {
		margin: 22px auto 14px;
		padding: 14px 12px 4px;
	}
}

/* Gap aumentato per tablet e desktop */
@media (min-width: 768px) {
	.home-categories {
		gap: 60px;
	}
	
	.home-projects {
		gap: 60px;
	}
}
.projects-title {
	text-align: center;
	font-size: clamp(1.25rem, 4vw + 1rem, 2.25rem);
	font-weight: 700;
	margin: 0;
	color: #111;
	width: 100%;
}
.project-block {
	width: 100%;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
}
.project-card {
	width: 100%;
	max-width: 100%; /* occupa tutta la larghezza disponibile del blocco */
	display: flex;
	flex-direction: column;
	border: none;
	border-radius: 0;
	overflow: hidden;
	background: #fff;
	box-shadow: none;
	gap: 0;
	align-items: center;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
.project-image {
	order: 1;
	width: 100%;
	background: transparent;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	overflow: hidden;
	display: block; /* segue la larghezza della card */
	/* Riserva spazio per CLS: evita shift quando le img progetti (es. Elsa Group) caricano */
	aspect-ratio: 4 / 3;
}
.project-image img {
	width: 100%;
	max-width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
/* Home projects: sotto l'immagine prima descrizione poi CTA */
.home-projects .project-info {
	order: 2 !important;
}
/* Le classi .project-info, .project-title e .project-desc sono ora gestite dalle classi unificate .card-info, .card-title e .card-desc sopra */
.project-cta {
	order: 3;
	margin: 4px 0 0;
	text-align: center;
}
.project-btn { 
	display:inline-block; 
	background:#e04e39; 
	color:#fff; 
	padding: clamp(0.25rem, 1vw + 0.125rem, 0.5rem) clamp(2rem, 5vw + 1rem, 4rem); 
	border:2px solid #fff; 
	border-radius:24px; 
	text-decoration:none; 
	font-weight:600; 
	font-size: clamp(0.8125rem, 2vw + 0.25rem, 1rem); 
	cursor:pointer; 
	transition:all 0.3s ease; 
	box-shadow: 0 0 0 1px rgba(255,255,255,0.3);
}
.project-btn:hover { 
	background:#c73e2f; 
	color:#fff; 
	text-decoration:none; 
	box-shadow: 0 0 0 2px rgba(255,255,255,0.5);
}

/* Schermi piccoli - riduce descrizioni */
@media (max-width: 479px) {
  .card-info .card-desc { font-size: clamp(0.875rem, 2vw + 0.5rem, 1.25rem); }
  .card-info .card-title { font-size: clamp(0.9375rem, 2.5vw + 0.75rem, 1.5rem); }
  .card-info .card-category { font-size: clamp(0.875rem, 1.25vw + 0.375rem, 1rem); }
  .projects-title { font-size: clamp(1.125rem, 4vw + 0.5rem, 1.5rem); }
}

/* Schermi medi */
@media (min-width: 768px) and (max-width: 991px) {
  .projects-title { font-size: clamp(1.125rem, 3vw + 0.625rem, 1.375rem); }
  .card-info .card-title { font-size: clamp(0.9375rem, 2.5vw + 0.75rem, 1.5rem); }
  .card-info .card-desc { font-size: clamp(0.875rem, 2vw + 0.5rem, 1.25rem); }
  .card-info .card-category { font-size: clamp(0.875rem, 1.25vw + 0.5rem, 1rem); }
  .home-categories .cat-cta,
  .project-btn { font-size: clamp(0.6875rem, 1.5vw + 0.375rem, 0.8125rem) !important; }
}

/* Desktop */
@media (min-width: 992px) {
  .container-icons { padding: 0; }
  .home-icons .icons-row { justify-content:flex-start; gap:0; }
  .home-icons .icon-circle { width:74px; height:74px; flex:0 0 auto; aspect-ratio: auto; }
  .home-hero .hero-slide img { height:420px; object-fit:cover; }
  .home-services { grid-template-columns: 1fr; }
  
  /* Dimensioni testi ridotte per schermi grandi */
  .projects-title { font-size: clamp(1.25rem, 3vw + 0.75rem, 1.625rem); }
  .card-info .card-title { font-size: clamp(0.9375rem, 2.5vw + 0.75rem, 1.5rem); }
  .card-info .card-desc { font-size: clamp(0.875rem, 2vw + 0.5rem, 1.25rem); }
  .card-info .card-category { font-size: clamp(0.875rem, 1.25vw + 0.5rem, 1rem); }
  .home-categories .cat-cta,
  .project-btn { font-size: clamp(0.75rem, 1.5vw + 0.375rem, 0.875rem) !important; }
}

/* Schermi molto grandi */
@media (min-width: 1536px) {
  .projects-title { font-size: clamp(1.5rem, 3vw + 1.125rem, 2rem); }
  .card-info .card-title { font-size: clamp(0.9375rem, 2.5vw + 0.75rem, 1.5rem); }
  .card-info .card-desc { font-size: clamp(0.875rem, 2vw + 0.5rem, 1.25rem); }
  .card-info .card-category { font-size: clamp(0.875rem, 1.25vw + 0.75rem, 1.25rem); }
  .home-categories .cat-cta,
  .project-btn { font-size: clamp(0.8125rem, 1.5vw + 0.625rem, 0.9375rem) !important; }
}

/* Footer */
.site-footer { padding: 24px 0 0; }
.site-footer .footer-card { width:100%; max-width:100%; margin: 0 auto 0; background:#e04e39; border-radius: 0; box-shadow: none; overflow:hidden; }
.site-footer .footer-inner { padding: 28px 16px 20px; color:#fff; text-align:center; }
.site-footer .footer-logo { height:32px; width:auto; min-height:32px; aspect-ratio: 320/78; display:block; margin: 0 auto 12px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.site-footer .footer-logo-text { font-weight:700; font-size:20px; margin-bottom:12px; }
.site-footer .footer-text .row { font-size:12px; line-height:1.5; opacity:.95; }
.site-footer .footer-text .row + .row { margin-top:4px; }
.site-footer .footer-social { display:flex; justify-content:center; gap:14px; margin:12px 0 8px; }
.site-footer .footer-social .social { color:#fff; opacity:.95; }
.site-footer .footer-links a { color:#fff; font-size:12px; opacity:.9; text-decoration:none; }
.site-footer .footer-links a:hover { text-decoration:underline; }

/* Stories modal - regole base */
.stories-modal { 
	position: fixed; 
	inset: 0; 
	background: radial-gradient(circle at center, rgba(116, 48, 43, 0.4) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.8) 100%);
	color: #fff; 
	display: none; 
	align-items: center; 
	justify-content: center; 
	z-index: 1000001 !important; /* sopra al menu desktop */
}

.stories-modal.open { 
    display: flex; 
    z-index: 1000001 !important;
}

.stories-stage { 
	position: relative; 
	width: 100%; 
	height: 100%; 
	display: flex; 
	align-items: center; 
	justify-content: center; 
}

/* Stories modal CTA button - desktop default styles */
.stories-modal .stories-cta { 
	position: absolute; 
	left: 0; 
	right: 0; 
	bottom: 18px; 
	display: flex; 
	justify-content: center; 
	padding: 0 12px; 
	z-index: 10; 
	pointer-events: auto; 
}

.stories-modal .stories-cta-btn { 
	display: inline-flex; 
	align-items: center; 
	gap: 10px; 
	background: rgba(116,48,43,.88); 
	color: #fff; 
	padding: 10px 20px; 
	border-radius: 0; 
	text-decoration: none; 
	font-weight: 600; 
	
}

.stories-modal .stories-cta-btn:hover { 
	background: rgba(116,48,43,.95); 
}

.stories-modal .stories-cta-icon { 
	width: 18px; 
	height: 18px; 
	display: inline-block; 
	background: #fff; 
	color: #222; 
	border-radius: 4px; 
	font-size: 10px; 
	line-height: 18px; 
	text-align: center; 
}

/* Stories modal navigation and logo */
.stories-modal .stories-navigation { 
	position: absolute; 
	top: 16px; 
	left: 0; 
	right: 0; 
	z-index: 10; 
	padding: 0 12px; 
	box-sizing: border-box; 
}

.stories-modal .stories-logo-row { 
    position: relative; 
    top: 0; 
    left: 0; 
    right: 0; 
    display: flex; 
    align-items: center; 
    padding: 8px 12px; 
    box-sizing: border-box; 
    background: #e04e39; 
    border-radius: 0; 
    z-index: 10; 
    margin-top: 30px;
		margin-bottom: 4px;
}

.stories-modal .stories-logo { 
	display: flex; 
	align-items: center; 
	justify-content: flex-start; 
	flex: 1 1 auto; 
	min-width: 0; 
}

.stories-modal .stories-logo img { 
	height: 48px; 
	width: auto; 
	object-fit: contain; 
	filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); 
}

.stories-modal .stories-close { 
	position: absolute; 
	top: 6px; 
	right: 8px; 
	background: transparent; 
	color: #fff; 
	border: 0; 
	font-size: 36px; 
	line-height: 1; 
	width: 40px; 
	height: 40px; 
	border-radius: 0; 
	display: flex; 
	align-items: center; 
	justify-content: center; 
	box-shadow: none; 
	padding: 0; 
	cursor: pointer; 
}


/* Mobile overrides for stories modal: solid bg and CTA position */
@media (max-width: 479px) {
  .stories-modal { background: #e04e39 !important; }
  .stories-modal .stories-cta { position: fixed !important; left: 0; right: 0; bottom: 36px !important; padding: 0 12px !important; z-index: 10050 !important; display:flex; justify-content:center; }
  .stories-modal .stories-cta-btn { background:#e04e39 !important; color:#fff; padding:16px 48px; box-shadow: 0 6px 16px rgba(0,0,0,.35); border-radius:0; text-decoration:none; font-weight:600; font-size:22px; }
  .stories-modal .stories-cta-btn:hover { background:#e04e39 !important; opacity: 1 !important; }
  .stories-modal .stories-cta-icon { width:18px; height:18px; display:inline-block; background:#fff; color:#222; border-radius:4px; font-size:10px; line-height:18px; text-align:center; }
  .stories-modal .stories-viewer .swiper-wrapper { height: 100dvh !important; }
  .stories-modal .stories-viewer .swiper-slide img { object-fit: cover !important; }
}

/* ============================================
   FORM DI CONTATTO
   ============================================ */
.servizi-contact-form-wrapper {
    max-width: 600px;
    margin: 0 auto;
    padding: 0;
}

.servizi-contact-form-title {
    font-size: clamp(1.5rem, 4vw + 1rem, 2rem);
    font-weight: 600;
    margin-bottom: 24px;
    text-align: center;
    color: #fff;
}

.servizi-contact-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #ff8c42;
    padding: 24px;
    border-radius: 8px;
}

.servizi-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.servizi-form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.servizi-form-field-full {
    grid-column: 1 / -1;
}

.servizi-form-field label {
    font-weight: 500;
    color: #fff;
    font-size: 14px;
}

.servizi-form-field input,
.servizi-form-field textarea {
    padding: 10px 14px;
    border: 1px solid #E3E3E3;
    border-radius: 4px;
    font-size: 16px;
    font-family: inherit;
    color: #343537;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
}

.servizi-form-field input:focus,
.servizi-form-field textarea:focus {
    outline: none;
    border-color: #fff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.servizi-form-field textarea {
    resize: vertical;
    min-height: 100px;
}

.servizi-form-field-privacy {
    margin-top: 4px;
}

.servizi-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    line-height: 1.35;
    color: #fff;
    cursor: pointer;
}

.servizi-checkbox-label input[type="checkbox"] {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

.servizi-checkbox-label a {
    color: #fff;
    text-decoration: underline;
}

.servizi-checkbox-label a:hover {
    text-decoration: none;
    opacity: 0.9;
}

.servizi-contact-submit {
    padding: 12px 24px;
    background: #fff;
    color: #ff8c42;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 8px;
}

.servizi-contact-submit:hover:not(:disabled) {
    background: #f5f5f5;
    color: #e07a35;
}

.servizi-contact-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.servizi-contact-form-message {
    padding: 12px;
    border-radius: 4px;
    margin-top: 16px;
    font-size: 14px;
}

.servizi-contact-form-message-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.servizi-contact-form-message-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Responsive form */
@media (max-width: 767px) {
    .servizi-form-row {
        grid-template-columns: 1fr;
    }
}

/* Home contact section - padding bottom */
.home-contact-section {
    padding-bottom: 20px;
}

/* ========================================
   GLOBAL BOTTOM MENU
   ======================================== */
.global-bottom-menu {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 10000 !important;
    background: rgba(10, 10, 10, 0.80) !important;
    backdrop-filter: blur(10px);
    padding: 8px 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100%;
}
/* Solo su iOS: il JS aggiunge .vn-ios-viewport e aggiorna --vn-vv-delta; su Android la navbar resta bottom: 0 */
html.vn-ios-viewport .global-bottom-menu {
    bottom: var(--vn-vv-delta, 0px) !important;
}

/* iOS safe-area: aggiungi padding-bottom solo su dispositivi che supportano env() correttamente */
@supports (padding: env(safe-area-inset-bottom)) {
    .global-bottom-menu {
        /* Navbar resta attaccata al fondo, contenuto interno risale sopra l'home indicator */
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    }
}

/* Backup per iOS Safari: media query specifica per dispositivi iOS */
@supports (-webkit-touch-callout: none) {
    .global-bottom-menu {
        /* Su iOS, assicura che il contenuto non finisca sotto l'home indicator */
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    }
}

/* ========================================
   DESKTOP SHELL LAYOUT (SOLO DESKTOP, SOLO PAGINE IN SCOPE)
   - Header/Footer full width
   - Main: sidebar 1/3 + content 2/3
   - Nasconde il menu bottom su desktop (ma NON su Portfolio)
   ======================================== */
@media (min-width: 1024px) {
	body.vn-desktop-shell {
		/* Navbar fissa a sinistra; area destra a colonna singola con contenuto centrato (max 1024px) */
		--vn-main-max: min(1280px, 100vw);
		--vn-sidebar-w: calc(var(--vn-main-max) * 0.2);
		--vn-content-w: calc(var(--vn-main-max) * 0.8);
		width: calc(100vw - var(--vn-sidebar-w)) !important;
		margin-left: var(--vn-sidebar-w) !important;
		margin-right: 0 !important;
		display: grid !important;
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr auto;
		grid-template-areas:
			"header"
			"content"
			"footer";
		min-height: 100vh;
		overflow-x: hidden;
	}

	/* Header: larghezza piena dell'area destra */
	body.vn-desktop-shell > header.container {
		grid-area: header;
		grid-column: 1;
		grid-row: 1;
		max-width: none !important;
		width: 100% !important;
		margin: 0 !important;
		text-align: center;
	}

	/* Main: centrato nell'area destra, max-width = colonna contenuto (1024px) */
	body.vn-desktop-shell > main {
		grid-area: content;
		grid-column: 1;
		grid-row: 2;
		width: 100%;
		max-width: var(--vn-content-w);
		margin-left: auto !important;
		margin-right: auto !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
	body.vn-desktop-shell > .categoria-page-wrapper {
		grid-area: content;
		grid-column: 1;
		grid-row: 2;
		width: 100%;
		max-width: var(--vn-content-w);
		margin-left: auto !important;
		margin-right: auto !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	/* Footer: larghezza piena dell'area destra */
	body.vn-desktop-shell > footer.site-footer {
		grid-area: footer;
		grid-column: 1;
		grid-row: 3;
		width: 100% !important;
		margin: 0 !important;
	}

	/* Sidebar: fissa a sinistra viewport */
	body.vn-desktop-shell .vn-desktop-sidebar {
		position: fixed !important;
		left: 0 !important;
		top: 0 !important;
		bottom: 0 !important;
		width: var(--vn-sidebar-w) !important;
		display: block;
		background: #fff;
		padding: 18px 12px;
		box-sizing: border-box;
	}

	body.vn-desktop-shell .vn-desktop-sidebar-inner {
		position: sticky;
		top: 18px;
		display: inline-flex;
		flex-direction: column;
		gap: 6px;
		/* Adatta la larghezza al contenuto (voci menu) */
		width: -moz-max-content;
		width: max-content;
		max-width: 100%;
	}

	/* Hide bottom menu on desktop (only for vn-desktop-shell pages) */
	body.vn-desktop-shell .global-bottom-menu {
		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;
		pointer-events: none !important;
	}

	/* Make sure content doesn't reserve space for fixed bottom menu */
	body.vn-desktop-shell main {
		padding-bottom: 0 !important;
	}
}

/* Sidebar menu (Instagram-like) */
.vn-desktop-sidebar {
	display: none; /* shown only on desktop shell + desktop breakpoint */
}

.vn-nav-item,
.vn-nav-item-link {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	padding: 10px 60px 10px 10px;
	border-radius: 10px;
	color: #111;
	text-decoration: none;
	cursor: pointer;
	user-select: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.vn-nav-item:hover,
.vn-nav-item-link:hover {
	background: #f2f2f2;
	text-decoration: none;
}

.vn-nav-item--active:hover,
.vn-nav-item--active:focus,
.vn-nav-item--active:active,
.vn-nav-item--active:focus-visible {
	/* la voce attiva non deve cambiare colore con hover/focus */
	background: #e04e39;
	color: #fff;
	text-decoration: none;
}

/* Disabilita il link sulla voce attiva (ma mantiene il submenu via hover sul wrapper) */
.vn-desktop-sidebar a.vn-nav-item--active {
	pointer-events: none;
	cursor: default;
}

.vn-nav-icon {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: flex-start; /* icone allineate a sinistra */
	color: #111;
	flex: 0 0 32px;
}

.vn-nav-icon img {
	width: 28px;
	height: 28px;
	object-fit: contain;
	display: block;
	/* l'icona Home è un'immagine bianca: uniformala alle altre (nero) */
	filter: brightness(0) saturate(100%);
}

.vn-nav-icon svg {
	width: 28px;
	height: 28px;
	display: block;
	fill: none;
	stroke: currentColor;
}

.vn-nav-text {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.2px;
}

.vn-nav-item--active,
.vn-nav-item--active > .vn-nav-item-link {
	background: #e04e39;
	color: #fff;
}

.vn-nav-item--active .vn-nav-icon {
	color: #fff;
}

/* Icona Home (img) quando la voce è attiva: deve diventare bianca come le altre */
.vn-nav-item--active .vn-nav-icon img {
	filter: brightness(0) invert(1);
}

.vn-nav-item--has-flyout {
	position: relative;
}

.vn-flyout {
	position: absolute;
	top: 0;
	left: calc(100% + 10px);
	min-width: 260px;
	max-height: calc(100vh - 60px);
	overflow: auto;
	background: #fff;
	border: 0;
	border-radius: 12px;
	box-shadow: 0 12px 30px rgba(0,0,0,0.10);
	padding: 8px;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-6px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
	z-index: 999999 !important; /* sopra gallerie/overlay */
}

/* Anche la sidebar deve stare sopra al contenuto (swiper/gallerie) */
@media (min-width: 1024px) {
	body.vn-desktop-shell .vn-desktop-sidebar {
		position: relative;
		z-index: 999999 !important;
	}
}

.vn-nav-item--has-flyout:hover > .vn-flyout--cats {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}

.vn-flyout-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.vn-flyout-item {
	position: relative;
}

.vn-flyout-link {
	display: block;
	padding: 10px 12px;
	border-radius: 10px;
	color: #111;
	text-decoration: none;
	font-size: 14px;
	line-height: 1.2;
}

.vn-flyout-link:hover {
	background: #f2f2f2;
	text-decoration: none;
}

/* Submenu Servizi: accordion categorie -> servizi */
.vn-cat-row {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0px;
}

.vn-cat-link {
	flex: 1;
	font-weight: 600;
}

.vn-cat-toggle {
	width: 34px;
	height: 34px;
	border: 0;
	background: transparent;
	border-radius: 10px;
	cursor: pointer;
	color: #111;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.vn-cat-toggle--spacer {
	opacity: 0;
	pointer-events: none;
}

.vn-cat-toggle:hover {
	background: #f2f2f2;
}

.vn-cat-toggle-icon {
	font-size: 18px;
	line-height: 1;
	font-weight: 800;
}

.vn-cat-toggle-icon--minus {
	display: none;
}

.vn-cat-item.is-open .vn-cat-toggle-icon--plus {
	display: none;
}

.vn-cat-item.is-open .vn-cat-toggle-icon--minus {
	display: inline;
}

.vn-cat-services {
	list-style: none;
	margin: 0 0 6px 0;
	padding: 0 0 0 14px;
	border-left: 2px solid rgba(0,0,0,0.08);
}

.vn-service-link {
	font-size: 14px;
	font-weight: 500;
	opacity: 0.95;
}

/* + / - con lo stesso rosso della voce attiva */
.vn-cat-toggle,
.vn-cat-toggle-icon {
	color: #e04e39;
}

.vn-flyout-item--has-flyout:hover > .vn-flyout--services {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}

.vn-flyout--services {
	top: 0;
	left: calc(100% + 10px);
}

/* Categoria hero: su desktop shell evita altezze legate al bottom menu */
@media (min-width: 1024px) {
	body.vn-desktop-shell .categoria-hero-section {
		min-height: auto;
	}
}

/* Dettaglio categoria servizi (desktop): la hero è l'header, quello standard non deve comparire */
@media (min-width: 1024px) {
	body.vn-desktop-shell.vn-servizi-category > header.container {
		display: none !important;
	}
	body.vn-desktop-shell.vn-servizi-category > .categoria-hero-section {
		grid-area: header;
		grid-column: 1 / -1;
		grid-row: 1;
	}
}

/* Categoria servizi: mantieni look mobile/tablet (header "desktop shell" nascosto) */
@media (max-width: 1023px) {
	body.vn-servizi-category > header.container {
		display: none !important;
	}
}

.menu-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 8px;
    width: 100%;
}

@media (min-width: 768px) {
    .menu-container {
        width: 80%;
    }
}

@media (min-width: 1024px) {
    .menu-container {
        width: 60%;
    }
}

@media (min-width: 1536px) {
    .menu-container {
        width: 50%;
    }
}


.menu-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: transparent !important;
    border: none;
    cursor: pointer;
    text-decoration: none !important;
    color: #fff;
    position: relative;
    transition: all 0.3s ease;
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
}

.menu-btn:hover {
    text-decoration: none !important;
}

/* Bottone attivo del menu con sfondo rosso e bordi arrotondati */
.menu-btn.menu-btn-active,
.menu-container > .menu-btn.menu-btn-active,
.menu-container > a.menu-btn.menu-btn-active,
.menu-container > .menu-btn-active,
.menu-container > a.menu-btn-active {
    background: #e04e39 !important;
    border-radius: 12px;
}

.menu-btn:hover {
    opacity: 1;
}

/* Rimuovi l'effetto hover scuro per il bottone attivo */
.menu-btn.menu-btn-active:hover,
.menu-container > .menu-btn.menu-btn-active:hover,
.menu-container > a.menu-btn.menu-btn-active:hover,
.menu-container > .menu-btn-active:hover,
.menu-container > a.menu-btn-active:hover {
    opacity: 1 !important;
    text-decoration: none !important;
}

.menu-btn:focus,
.menu-btn:active,
.menu-btn:focus-visible {
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
}

/* Mantieni lo sfondo rosso per il bottone attivo anche negli stati hover/focus */
.menu-btn.menu-btn-active:hover,
.menu-container > .menu-btn.menu-btn-active:hover,
.menu-container > a.menu-btn.menu-btn-active:hover,
.menu-container > .menu-btn-active:hover,
.menu-container > a.menu-btn-active:hover {
    background: #e04e39 !important;
    opacity: 1;
}

.menu-btn.menu-btn-active:focus,
.menu-container > .menu-btn.menu-btn-active:focus,
.menu-container > a.menu-btn.menu-btn-active:focus,
.menu-container > .menu-btn-active:focus,
.menu-container > a.menu-btn-active:focus,
.menu-btn.menu-btn-active:active,
.menu-container > .menu-btn.menu-btn-active:active,
.menu-container > a.menu-btn.menu-btn-active:active,
.menu-container > .menu-btn-active:active,
.menu-container > a.menu-btn-active:active,
.menu-btn.menu-btn-active:focus-visible,
.menu-container > .menu-btn.menu-btn-active:focus-visible,
.menu-container > a.menu-btn.menu-btn-active:focus-visible,
.menu-container > .menu-btn-active:focus-visible,
.menu-container > a.menu-btn-active:focus-visible {
    background: #e04e39 !important;
    outline: none !important;
    box-shadow: none !important;
}

.menu-btn-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.menu-btn-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.menu-btn-icon svg {
    width: 28px;
    height: 28px;
    fill: #fff;
}

.menu-btn-text {
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.2;
}

.menu-btn-hamburger .menu-btn-text {
    display: none;
}

/* Dropdown Menu */
.menu-btn-dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    background: rgba(32, 32, 32, 0.75);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    min-width: 200px;
    max-width: 90vw;
    max-height: 70vh;
    overflow-y: auto;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.dropdown-menu.active {
    display: block;
    opacity: 1;
}

.dropdown-content {
    padding: 8px;
}

/* Menu Servizi */
.dropdown-category {
    margin-bottom: 16px;
}

.dropdown-category:last-child {
    margin-bottom: 0;
}

.dropdown-category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.dropdown-category-link {
    display: block;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    padding: 8px 0;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 8px;
    transition: color 0.2s ease;
    flex: 1;
}

.dropdown-category-link:hover {
    color: #DAA14C;
    text-decoration: none;
}

/* Bottone toggle categoria (solo mobile) */
.dropdown-category-toggle-name {
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    flex: 1;
    transition: opacity 0.2s ease;
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
    text-align: left;
    font-size: inherit;
    font-family: inherit;
}

.dropdown-category-toggle-name:hover {
    opacity: 0.8;
}

/* Link freccia categoria (solo mobile) */
.dropdown-category-link-arrow {
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
    text-decoration: none;
}

.dropdown-category-link-arrow .dropdown-category-toggle-icon {
	font-size: 18px;
	line-height: 1;
	font-weight: 700;
	width: 18px;
	text-align: center;
	display: inline-block;
}

.dropdown-category-link-arrow:hover {
    opacity: 0.8;
}

.dropdown-category-link-arrow svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Su tablet e desktop: nascondi il toggle e mostra sempre i servizi */
@media (min-width: 768px) {
    .dropdown-category-toggle-name,
    .dropdown-category-link-arrow {
        display: none;
    }
    
    /* Nascondi il button toggle su desktop/tablet */
    .dropdown-category-toggle-name {
        display: none !important;
    }
    
    /* Mostra il link desktop per tablet/desktop */
    .dropdown-category-link-desktop {
        display: block !important;
    }
    
    /* Su desktop, mostra il link normale della categoria */
    .dropdown-category-link {
        display: block;
    }
    
    .dropdown-services {
        display: block !important;
    }
    
    /* Centra le categorie e servizi su tablet e desktop */
    .dropdown-category {
        text-align: center;
    }
    
    .dropdown-category-link {
        text-align: center;
        justify-content: center;
    }
    
    .dropdown-category-header {
        justify-content: center;
    }
    
    .dropdown-services {
        text-align: center;
        padding-left: 0;
    }
    
    .dropdown-services li {
        text-align: center;
    }
    
    .dropdown-services a {
        text-align: center;
    }
    
    /* Bordo sopra il nome della categoria (tranne la prima) */
    .dropdown-category-link {
        border-bottom: none !important;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        margin-top: 8px;
        margin-bottom: 0;
    }
    
    .dropdown-category:first-child .dropdown-category-link {
        border-top: none !important;
        margin-top: 0;
    }
    
    /* Stili per il link desktop */
    .dropdown-category-link-desktop {
        border-bottom: none !important;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        margin-top: 8px;
        margin-bottom: 0;
        text-align: center;
    }
    
    .dropdown-category:first-child .dropdown-category-link-desktop {
        border-top: none !important;
        margin-top: 0;
    }
}

/* Su mobile: nascondi i servizi di default, mostra solo quando espanso */
@media (max-width: 767px) {
    /* Nascondi il link desktop su mobile */
    .dropdown-category-link-desktop {
        display: none !important;
    }
    .dropdown-services {
        display: none;
        padding-left: 16px;
    }
    
    .dropdown-category.expanded .dropdown-services {
        display: block;
    }
}

.dropdown-services {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-left: 16px;
}

.dropdown-services li {
    margin-bottom: 6px;
}

.dropdown-services li:last-child {
    margin-bottom: 0;
}

.dropdown-services a {
    display: block;
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    padding: 6px 0;
    text-decoration: none;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.dropdown-services a:hover {
    color: #DAA14C;
    padding-left: 8px;
    text-decoration: none;
}

/* Menu Hamburger */
#hamburger-menu {
    border-radius: 0 !important;
    background: rgba(32, 32, 32, 0.75) !important;
}

#hamburger-menu .dropdown-content {
    display: flex;
    flex-direction: column;
    gap: 0px;
    background: rgba(10, 10, 10, 0.80) !important;
}

#hamburger-menu .dropdown-content a {
    color: #fff;
    font-size: 14px;
    padding: 10px 12px;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.2s ease, color 0.2s ease;
}

#hamburger-menu .dropdown-content a:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #DAA14C;
    text-decoration: none;
}

/* ============================================
   BLOG PAGE LAYOUT
   Struttura a sezioni: 1 post in evidenza + 2 laterali
   ============================================ */

.blog-page {
    margin-top: 0px;
    margin-bottom: 10px;
}

.blog-page-header {
    margin-bottom: 32px;
}

.blog-page-header h1 {
    font-size: 28px;
    line-height: 1.2;
    margin: 0;
}

.blog-sections {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.blog-section {
    width: 100%;
}

.blog-section-inner {
    display: flex;
    gap: 24px;
    align-items: stretch;
    min-height: 0;
}

.blog-section--featured-right .blog-section-inner {
    flex-direction: row-reverse;
}

.blog-card {
    background: #ffffff;
    border-radius: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.08);
}

.blog-card.blog-card--featured {
    flex: 2;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.blog-card-featured-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    flex: 1 1 auto;
}

.blog-card.blog-card--side {
    /* flex: 1; */
    flex-direction: column;
}

.blog-card-media {
    display: block;
    overflow: hidden;
}

.blog-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.blog-card:hover .blog-card-media img {
    transform: scale(1.03);
}

.blog-card.blog-card--featured .blog-card-media {
    flex: 1 1 0;
    min-height: 220px;
    aspect-ratio: 16 / 9;
}

.blog-card.blog-card--side .blog-card-media {
    flex: none;
    max-height: 220px;
}

.blog-card-body {
    padding: 8px 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}

.blog-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #888888;
}

.blog-card-category {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 0;
    background-color: #ffb155;
    color: #ffffff;
    font-size: 11px;
    letter-spacing: 0.06em;
}

.blog-card-meta time {
    white-space: nowrap;
}

.blog-card-share {
    display: flex;
    justify-content: flex-start;
}

.blog-card-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 0;
    border: none;
    background-color: transparent;
    color: #343537;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s ease, transform 0.15s ease;
}

.blog-card-share-btn:hover {
    color: #DAA14C;
    transform: translateY(-1px);
}

.blog-card-share-btn svg {
    width: 16px;
    height: 16px;
}

.blog-card-title {
    font-size: 18px;
    line-height: 1.3;
    margin: 0;
}

.blog-card-title a {
    color: #343537;
    text-decoration: none;
}

.blog-card-title a:hover {
    color: #DAA14C;
}

.blog-card-excerpt {
    font-size: 14px;
    color: #666666;
}

.blog-side-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.blog-page .pagination {
    margin-top: 40px;
    text-align: center;
}

.blog-page .pagination .page-numbers {
    display: inline-block;
    margin: 0 4px;
    padding: 6px 10px;
    border-radius: 999px;
    background: transparent;
    color: #343537;
    text-decoration: none;
    font-size: 14px;
}

.blog-page .pagination .page-numbers.current {
    background: #DAA14C;
    color: #ffffff;
}

.blog-page .pagination .page-numbers:hover:not(.current) {
    background: #F1E3CA;
}

@media (max-width: 991px) {
    .blog-section-inner {
        flex-direction: column;
    }
    .blog-section--featured-right .blog-section-inner {
        flex-direction: column;
    }

    .blog-card.blog-card--featured,
    .blog-card.blog-card--side {
        flex: 1;
    }

    .blog-card.blog-card--featured .blog-card-media {
        max-height: 260px;
    }
}

@media (max-width: 640px) {
    .blog-section-inner {
        gap: 20px;
    }

    .blog-card.blog-card--side {
        flex-direction: column;
    }

    .blog-card.blog-card--side .blog-card-media {
        flex: none;
        max-height: 200px;
    }

    .blog-page-header h1 {
        font-size: 24px;
    }
}

/* ============================================
   SINGLE POST PAGE
   ============================================ */

.single-post-page {
    max-width: 1080px;
    margin: 0 auto;
    padding: 24px;
}

.single-post-article {
    width: 100%;
    max-width: 100%;
}

.single-post-thumbnail {
    width: 100%;
    margin-bottom: 16px;
    overflow: hidden;
}

.single-post-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}

.single-post-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #888888;
}

.single-post-meta-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.single-post-date {
    white-space: nowrap;
}

.entry-header {
    margin-bottom: 24px;
}

.entry-title {
    font-size: 28px;
    line-height: 1.3;
    margin: 0;
    color: #343537;
}

.entry-content {
    width: 100%;
    max-width: 100%;
    line-height: 1.6;
    color: #343537;
}

.entry-content img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 767px) {
    main.container.single-post-page {
        padding: 12px 8px !important;
    }

    .entry-title {
        font-size: 24px;
    }

    .single-post-meta {
        flex-wrap: wrap;
    }
}

/* Share menu styles for single post page */
.single-post-page .cat-service-share {
    margin-top: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
}

.single-post-page .cat-service-share-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.single-post-page .cat-service-share svg {
    width: 24px;
    height: 24px;
    color: #999;
    transition: color 0.3s ease;
}

.single-post-page .cat-service-share-btn:hover svg,
.single-post-page .cat-service-share-btn:focus svg {
    color: #e04e39;
    outline: none;
}

.single-post-page .cat-service-share-menu {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 8px;
    background: #fff;
    border: 1px solid #333;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 8px 0;
    min-width: 180px;
    display: none;
    z-index: 1000;
}

.single-post-page .cat-service-share-menu.active {
    display: block;
}

.single-post-page .cat-service-share-menu .share-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    color: #333;
    text-decoration: none;
    transition: background-color 0.2s ease;
    font-size: 14px;
}

.single-post-page .cat-service-share-menu .share-link:hover {
    background-color: #f5f5f5;
    color: #e04e39;
    text-decoration: none;
}

.single-post-page .cat-service-share-menu .share-link svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.single-post-page .cat-service-share-menu .share-link span {
    font-weight: 500;
}

/* Share menu styles for blog page */
.blog-page .cat-service-share {
    margin-top: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
}

.blog-page .cat-service-share-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-page .cat-service-share svg {
    width: 24px;
    height: 24px;
    color: #999;
    transition: color 0.3s ease;
}

.blog-page .cat-service-share-btn:hover svg,
.blog-page .cat-service-share-btn:focus svg {
    color: #e04e39;
    outline: none;
}

.blog-page .cat-service-share-menu {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 8px;
    background: #fff;
    border: 1px solid #333;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 8px 0;
    min-width: 180px;
    display: none;
    z-index: 1000;
}

.blog-page .cat-service-share-menu.active {
    display: block;
}

.blog-page .cat-service-share-menu .share-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    color: #333;
    text-decoration: none;
    transition: background-color 0.2s ease;
    font-size: 14px;
}

.blog-page .cat-service-share-menu .share-link:hover {
    background-color: #f5f5f5;
    color: #e04e39;
    text-decoration: none;
}

.blog-page .cat-service-share-menu .share-link svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.blog-page .cat-service-share-menu .share-link span {
    font-weight: 500;
}

/* Menu Servizi - Fullscreen quando attivo */
#servizi-menu.active {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100svh !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    max-height: 100svh !important;
    max-height: 100dvh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    min-height: 100svh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    border-radius: 0 !important;
    transform: none !important;
    z-index: 10001 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: rgba(32, 32, 32, 0.75) !important;
    box-sizing: border-box !important;
}

/* Bottone chiusura menu servizi */
.servizi-menu-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10002;
    color: #fff;
    transition: all 0.3s ease;
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
}

.servizi-menu-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.servizi-menu-close:active {
    transform: scale(0.95);
}

.servizi-menu-close svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

/* Rimuovi limitazioni dal contenitore quando il menu è attivo */
.menu-btn-dropdown[data-dropdown="servizi-menu"] {
    overflow: visible !important;
}

.global-bottom-menu {
    overflow: visible !important;
}

#servizi-menu.active .dropdown-content {
    padding: 24px;
    padding-top: 64px; /* Spazio per il bottone X */
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    min-height: 100dvh;
    height: auto;
    overflow-y: visible;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Mobile: menu Servizi collassato */
@media (max-width: 767px) {
    #servizi-menu:not(.active) {
        max-width: calc(100vw - 32px);
        left: 50%;
        transform: translateX(-50%);
    }
    
    .dropdown-menu:not(#servizi-menu.active) {
        max-height: 60vh;
    }
}

/* Tablet e Desktop: menu Servizi espanso */
@media (min-width: 768px) {
    .menu-btn-dropdown.active .dropdown-menu:not(#servizi-menu) {
        display: block;
        opacity: 1;
    }
    
    /* Menu servizi non attivo: dimensioni normali */
    #servizi-menu:not(.active) {
        min-width: 300px;
        max-width: 400px;
    }
    
    /* Menu servizi attivo: stessa larghezza del contenitore principale */
    #servizi-menu.active {
        width: 80% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    @media (min-width: 1024px) {
        #servizi-menu.active {
            width: 60% !important;
        }
    }
    
    @media (min-width: 1536px) {
        #servizi-menu.active {
            width: 50% !important;
        }
    }
}

/* Aggiungi padding al body per evitare che il contenuto sia coperto dal menu */
body {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Desktop shell: non c'è menu fisso in basso, quindi niente padding extra */
@media (min-width: 1024px) {
	body.vn-desktop-shell {
		padding-bottom: 0 !important;
		min-height: 100vh !important;
	}
}

/* ========================================
   PORTFOLIO PAGE
   ======================================== */
.portfolio-page {
    background-color: #E04E39;
    padding: 0 !important;
    margin: 0;
    overflow: hidden;
}

.portfolio-wall-wrapper {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background-color: #E04E39;
    touch-action: none;
}

.portfolio-wall {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.portfolio-inner {
    position: absolute;
    top: 0;
    left: 0;
    will-change: transform;
}

.portfolio-card {
    position: absolute;
    width: 320px;
    max-width: 320px;
    height: 480px;
    background-color: #000;
    overflow: hidden;
    border: none;
    border-radius: 0;
}

.portfolio-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.portfolio-card-center {
    background-color: #7e3a3a;
    display: flex;
    align-items: center;
    justify-content: center;
}

.portfolio-card-center-content {
    padding: 24px;
    text-align: center;
    color: #ffffff;
}

.portfolio-card-center-title {
    margin: 0 0 12px 0;
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
}

.portfolio-card-center-description {
    margin: 0;
    font-size: 16px;
    color: #ffffff;
    opacity: 0.9;
}

/* Nascondi eventuali scrollbar ma mantieni lo scroll logico */
.portfolio-wall::-webkit-scrollbar {
    display: none;
}

.portfolio-wall {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Pallino CookieYes: sempre sopra la navbar mobile (altezza variabile + safe-area su iPhone) */
.cky-btn-revisit-wrapper.cky-revisit-bottom-left,
.cky-revisit-bottom-left {
    left: 15px !important;
    /* Navbar ~72px + margine + safe-area così non si sovrappone al bottone Home */
    bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Cookie preferences button - sopra al menu desktop */
@media (min-width: 1024px) {
    .cky-revisit-bottom-left,
    .cky-button,
    [id*="cookie"] button,
    [class*="cookie"] button,
    [id*="cookie"] a,
    [class*="cookie"] a {
        z-index: 1000000 !important;
    }
}