/* ========================================
   PRODUCT CARDS ENHANCED STYLES
   ======================================== */

/* Stile migliorato per le card dei prodotti */
.card {
	overflow: hidden !important;
	transition: all 0.3s ease !important;
	border-radius: 1.5rem !important;
	border: 2px solid transparent !important;
	background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 50%, #f1f3f4 100%) !important;
	box-shadow: none !important;
	position: relative !important;
}

.card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 1.5rem;
	padding: 2px;
	background: linear-gradient(135deg, #bf9e75, #8B7355, #bf9e75);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: exclude;
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask-composite: exclude;
	z-index: -1;
}

.card:hover {
	transform: translateY(-8px) scale(1.02) !important;
	box-shadow: 0 15px 40px rgba(139, 115, 85, 0.25) !important;
}

.card-img-top {
	border-radius: 1.25rem 1.25rem 0 0 !important;
	transition: all 0.3s ease !important;
	background: linear-gradient(135deg, #f8f9fa, #ffffff) !important;
}

.card:hover .card-img-top {
	transform: scale(1.05) !important;
}

.card-body {
	background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
	border-radius: 0 0 1.25rem 1.25rem !important;
	padding: 1.5rem !important;
}

/* ========================================
   SINGLE PRODUCT PAGE IMAGE STYLES
   ======================================== */

/* Stile per le immagini del singolo prodotto */
/* Riquadro 4:5 sempre pieno: con "cover" la foto riempie il riquadro
   (taglia pochi bordi se ha un formato diverso), così cambiando foto il
   riquadro non si allarga/restringe. La foto intera si vede cliccandoci
   sopra (lightbox, che usa "contain"). */
#mainImage {
	display: block;
	width: 100%;
	max-width: 520px;
	margin: 0 auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	background: #fbf4ef !important;
	border-radius: 1rem !important;
	box-shadow: 0 8px 25px rgba(139, 115, 85, 0.12) !important;
}

.thumbnail-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	max-width: 520px;
	margin: 0 auto;
}

.thumbnail {
	display: block;
	width: 76px;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border: 2px solid transparent;
	background: #fbf4ef !important;
	border-radius: 0.5rem !important;
	transition: all 0.3s ease !important;
}

.thumbnail:hover {
	opacity: 1 !important;
	transform: scale(1.05) !important;
}

.thumbnail.active {
	border: 2px solid #bf9e75 !important;
	opacity: 1 !important;
}

/* ========================================
   PRODUCT CARDS MOBILE STYLES
   ======================================== */

/* Aumenta il contrasto tra le card dei prodotti su mobile */
@media (max-width: 768px) {
	.card {
		margin-bottom: 1.5rem; /* Maggiore spazio tra le card */
		border-radius: 1.25rem; /* Bordi leggermente più piccoli su mobile */
		box-shadow: none !important; /* Rimuovi ombra per evitare contorno bianco */
	}
	
	.card:hover {
		border-color: transparent; /* Mantieni il bordo gradiente */
		box-shadow: 0 10px 30px rgba(139, 115, 85, 0.3);
		transform: translateY(-5px) scale(1.01); /* Animazione più delicata su mobile */
	}
	
	.card-img-top {
		border-radius: 1rem 1rem 0 0; /* Bordi più piccoli su mobile */
	}
	
	.card-body {
		border-radius: 0 0 1rem 1rem; /* Bordi più piccoli su mobile */
		padding: 1.25rem; /* Padding leggermente ridotto */
	}
	
	/* Spazio extra tra le colonne */
	.col-md-4 {
		margin-bottom: 2rem;
	}
	
	/* Background della sezione prodotti per maggiore contrasto */
	#productsContainer {
		background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 50%, #f1f3f4 100%);
		padding: 2rem 1rem;
		border-radius: 1rem;
		margin: 1rem 0;
	}
}

/* ========================================
   DESKTOP HEADER STYLES
   ======================================== */

/* Garantisce che l'header desktop sia sempre su due righe */
@media (min-width: 992px) {
	.site-name {
		display: block !important;
		text-align: left !important;
	}
	
	.site-name .site-title {
		display: block !important;
		margin-bottom: 0.25rem !important;
		line-height: 1.2 !important;
		font-size: 1.75rem !important;
		font-family: 'Playfair Display', serif !important;
		color: #8B7355 !important;
	}
	
	.site-name .site-title:first-child {
		margin-bottom: 0.1rem !important;
	}
	
	.site-name .site-title:last-child {
		margin-bottom: 0.25rem !important;
	}
	
	.site-name p {
		display: block !important;
		margin: 0 !important;
		font-size: 0.9rem !important;
		font-family: 'avenir_next_condensedregular', sans-serif !important;
		color: #8B7355 !important;
		line-height: 1.3 !important;
	}
	
	/* Nascondi social icons mobile su desktop */
	.social-icons-mobile {
		display: none !important;
	}
	
	.social-icons-desktop {
		display: flex !important;
	}
	
	/* Riduci dimensioni icone social su desktop */
	.social-icons-desktop .social-icon {
		font-size: 1.5rem !important;
	}
}

@media (min-width: 1200px) {
	/* Icone social ancora più piccole su schermi grandi */
	.social-icons-desktop .social-icon {
		font-size: 1.5rem !important;
	}
}

/* ========================================
   RESPONSIVE HEADER STYLES
   ======================================== */

/* Prevenire scroll orizzontale */
body {
	overflow-x: hidden;
}

/* "overflow-x: hidden" qui forzava il browser a trasformare ogni
   .container in un box scrollabile in verticale: bastava lo zoom
   al passaggio del mouse (es. miniature Instagram) per far comparire
   una barra di scorrimento interna. "clip" taglia senza creare scroll;
   i browser vecchi che non lo conoscono usano "visible" (e il body
   ha comunque overflow-x: hidden). */
.container {
	max-width: 100%;
	overflow: visible;
	overflow-x: clip;
}

/* Stili responsive per mobile e tablet */
@media (max-width: 991.98px) {
	/* WhatsApp text su mobile con background quasi trasparente */
	.whatsapp-text {
		background: rgba(139, 115, 85, 0.3); /* Background quasi trasparente */
		backdrop-filter: blur(5px); /* Effetto blur leggero */
		border: 1px solid rgba(255, 255, 255, 0.1);
		font-size: 11px;
		padding: 6px 10px;
		color: rgba(255, 255, 255, 0.9); /* Testo leggermente trasparente */
	}
	/* Header mobile */
	.header-mobile {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0.5rem 0;
		gap: 0.5rem;
		width: 100%;
		max-width: 100%;
		overflow-x: hidden;
	}
	
	.site-name-mobile {
		flex: 1;
		min-width: 0;
		overflow: hidden;
	}
	
	.site-name-mobile .site-title {
		font-size: 1.25rem;
		margin-bottom: 0.25rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-family: 'Playfair Display', serif !important;
		color: #8B7355 !important;
		line-height: 1.2 !important;
	}
	
	.site-name-mobile .site-title:first-child {
		margin-bottom: 0.1rem !important;
	}
	
	.site-name-mobile .site-title:last-child {
		margin-bottom: 0.25rem !important;
	}
	
	.site-name-mobile p {
		font-size: 0.875rem;
		margin: 0;
		display: block !important;
		font-family: 'avenir_next_condensedregular', sans-serif !important;
		color: #8B7355 !important;
		line-height: 1.3 !important;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-top: 0.1rem !important;
	}
	
	/* Burger menu a destra */
	.navbar-toggler {
		order: 2;
		border: none;
		padding: 0.25rem 0.5rem;
		flex-shrink: 0;
		margin-left: 0.5rem;
	}
	
	.navbar-toggler:focus {
		box-shadow: none;
	}
	
	/* Social icons più grandi per mobile */
	.social-icons-mobile {
		display: flex;
		align-items: center; /* Allineamento verticale */
		gap: 0.75rem;
		order: 1;
		margin-right: 0.5rem;
		flex-shrink: 0;
	}
	
	.social-icon-mobile {
		font-size: 1.5rem;
		color: #8B7355;
		transition: all 0.3s ease;
		display: flex;
		align-items: center; /* Allineamento verticale per l'icona */
		justify-content: center; /* Allineamento orizzontale per l'icona */
	}
	
	.social-icon-mobile:hover {
		color: #bf9e75;
		transform: scale(1.1);
	}
	
	/* Nascondi social icons desktop */
	.social-icons-desktop {
		display: none;
	}
}

/* Mobile - Hero section */
@media (max-width: 991.98px) {
	/* Non deve riempire lo schermo: le categorie sotto vanno intraviste */
	.hero-section {
		min-height: 60vh !important;
	}
	
	/* Riduci dimensioni testo hero su mobile */
	.hero-section h1 {
		font-size: 1.8rem !important;
		line-height: 1.3 !important;
	}
	
	.hero-section p {
		font-size: 1.1rem !important;
		line-height: 1.4 !important;
	}
}

/* Schermi molto piccoli */
@media (max-width: 576px) {
	.header-mobile {
		padding: 0.25rem 0;
		gap: 0.25rem;
	}
	
	.site-name-mobile .site-title {
		font-size: 1.5rem;
		font-family: 'Playfair Display', serif !important;
		color: #8B7355 !important;
		line-height: 1.2 !important;
	}
	
	/* Riduci ulteriormente testo hero su schermi molto piccoli */
	.hero-section h1 {
		font-size: 1.5rem !important;
		line-height: 1.2 !important;
	}
	
	.hero-section p {
		font-size: 1rem !important;
		line-height: 1.3 !important;
	}
	
	/* Card 2 per riga su mobile con più padding */
	.container {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}
	
	.row {
		margin-left: -0.5rem !important;
		margin-right: -0.5rem !important;
	}
	
	/* Padding per le card della sezione "Mi presento" solo su mobile */
	.service-card {
		padding: 25px !important;
		width: 100% !important;
		height: -webkit-fill-available;
		display: flex !important;
		flex-direction: column !important;
		justify-content: left;
		align-items: center !important;
		text-align: center !important;
	}
	
	
	/* 2 prodotti per riga nelle pagine delle categorie su mobile */
	.col-md-4.col-lg-3 {
		flex: 0 0 50% !important;
		max-width: 50% !important;
	}
	
	/* Standardizza altezza e layout delle card dei prodotti su mobile */
	.col-md-4.col-lg-3 .card {
		height: 100% !important;
		display: flex !important;
		flex-direction: column !important;
	}
	
	/* Standardizza dimensioni immagini nelle card */
	.col-md-4.col-lg-3 .card-img-top {
		/* Formato 4:5 come i post Instagram */
		height: auto !important;
		aspect-ratio: 4 / 5 !important;
		object-fit: cover !important;
		flex-shrink: 0 !important;
	}
	
	/* Standardizza corpo delle card */
	.col-md-4.col-lg-3 .card-body {
		flex: 1 !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: space-between !important;
		padding: 1rem !important;
	}
	
	/* Standardizza testo e prezzi */
	.col-md-4.col-lg-3 .card-title {
		font-size: 0.9rem !important;
		margin-bottom: 0.5rem !important;
		line-height: 1.2 !important;
	}
	
	.col-md-4.col-lg-3 .card-text {
		font-size: 0.85rem !important;
		margin-bottom: 0.5rem !important;
	}
	
	/* Riduci spazio tra le card su mobile */
	.my-3 {
		margin-top: 0.5rem !important;
		margin-bottom: 0.5rem !important;
	}
}

/* ========================================
   DESKTOP STYLES - Sezione "Mi presento"
   ======================================== */

@media (min-width: 769px) {
	/* Ripristina layout desktop originale SOLO per le card della sezione "Mi presento" */
	.service-card {
		padding: 2rem !important;
		height: auto !important;
		display: block !important;
		text-align: center !important;
		width: auto !important;
	}
	
	/* Aggiungi spazio laterale su desktop per la sezione "Mi presento" */
	.container {
		padding-left: 3rem !important;
		padding-right: 3rem !important;
	}
	
	/* Font per tutta la navbar solo desktop */
	.navbar-nav .nav-link {
		font-family: 'avenir_next_condensedregular', sans-serif !important;
		text-transform: uppercase !important;
		position: relative !important;
		transition: all 0.3s ease !important;
	}
	
	/* Evidenziazione pagina attiva */
	.navbar-nav .nav-link.active {
		color: #bf9e75 !important;
		font-weight: 600 !important;
	}
	
	.navbar-nav .nav-link.active::after {
		content: '' !important;
		position: absolute !important;
		bottom: -5px !important;
		left: 50% !important;
		transform: translateX(-50%) !important;
		width: 30px !important;
		height: 2px !important;
		background-color: #bf9e75 !important;
		border-radius: 1px !important;
	}
	
	/* Service cards equal height on desktop */
	.service-card {
		height: 280px !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: space-between !important;
	}
	
	/* Riduci dimensioni icone e testo delle card */
	.service-icon {
		font-size: 2rem !important;
	}
	
	.card-title {
		font-size: 1.1rem !important;
		padding-top: 0.25rem !important;
		padding-bottom: 0.25rem !important;
	}
	
	.blog-paragraph {
		font-size: 0.9rem !important;
	}
	
	/* Riduci ulteriormente su schermi molto piccoli */
	.service-icon {
		font-size: 1.8rem !important;
	}
	
	.card-title {
		font-size: 1rem !important;
		padding-top: 0.2rem !important;
		padding-bottom: 0.2rem !important;
	}
	
	.blog-paragraph {
		font-size: 0.85rem !important;
	}
	
	.site-name-mobile .site-title:first-child {
		margin-bottom: 0.1rem !important;
	}
	
	.site-name-mobile .site-title:last-child {
		margin-bottom: 0.25rem !important;
	}
	
	.site-name-mobile p {
		font-size: 0.75rem;
		font-family: 'avenir_next_condensedregular', sans-serif !important;
		color: #8B7355 !important;
		line-height: 1.3 !important;
		margin-top: 0.1rem !important;
	}
	
	.social-icons-mobile {
		gap: 0.5rem;
		margin-right: 0.25rem;
		align-items: center; /* Mantieni allineamento verticale */
	}
	
	.social-icon-mobile {
		font-size: 1.25rem;
		display: flex;
		align-items: center; /* Allineamento verticale per l'icona */
		justify-content: center; /* Allineamento orizzontale per l'icona */
	}
	
	.navbar-toggler {
		padding: 0.125rem 0.25rem;
		margin-left: 0.25rem;
	}
	
	/* Contrasto ancora maggiore per smartphone */
	.card {
		margin-bottom: 2rem; /* Spazio ancora maggiore */
		border-radius: 1rem; /* Bordi ancora più piccoli */
		box-shadow: none !important; /* Rimuovi ombra per evitare contorno bianco */
	}
	
	.card-img-top {
		border-radius: 0.75rem 0.75rem 0 0; /* Bordi molto piccoli */
	}
	
	.card-body {
		border-radius: 0 0 0.75rem 0.75rem; /* Bordi molto piccoli */
		padding: 1rem; /* Padding ridotto */
	}
	
	.col-md-4 {
		margin-bottom: 2.5rem; /* Spazio extra tra le colonne */
	}
	
	#productsContainer {
		background: linear-gradient(135deg, #f1f3f4 0%, #ffffff 50%, #f8f9fa 100%); /* Background più contrastato */
		padding: 2.5rem 1rem;
		margin: 1.5rem 0;
	}
}

/* ========================================
   HERO HOMEPAGE
   ======================================== */

.hero-contenuto {
	padding: 3rem 1rem;
}

.hero-sottotitolo {
	font-size: 1.5rem;
}

.btn-hero {
	display: inline-block;
	margin-top: 1.75rem;
	padding: 0.75rem 2rem;
	background: #bf9e75;
	color: #fff;
	border-radius: 2rem;
	text-decoration: none;
	font-family: 'avenir_next_condensedregular', sans-serif;
	font-size: 1.05rem;
	letter-spacing: 0.02em;
	box-shadow: 0 2px 10px rgba(90, 74, 60, 0.18);
	transition: background 0.25s, transform 0.2s;
}

.btn-hero:hover,
.btn-hero:focus {
	background: #a9875f;
	color: #fff;
	transform: translateY(-2px);
}

@media (max-width: 767px) {
	/* Gli a capo sono pensati per il desktop: su mobile spezzano male le frasi */
	.solo-desktop {
		display: none;
	}

	.hero-contenuto {
		padding: 1.75rem 1.25rem;
	}

	.hero-sottotitolo {
		font-size: 1.05rem;
		line-height: 1.55;
	}

	.btn-hero {
		margin-top: 1.5rem;
		padding: 0.7rem 1.75rem;
		font-size: 1rem;
	}
}

/* ========================================
   TORNA SU - tutti i dispositivi
   ======================================== */

.torna-su-btn {
	display: flex;
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 1000;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #bf9e75;
	color: white;
	border: none;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
	cursor: pointer;
	transition: opacity 0.3s, transform 0.2s;
}

.torna-su-btn:hover {
	transform: scale(1.1);
}

.torna-su-btn[hidden] {
	display: none !important;
}

/* ========================================
   COMMON BUTTON STYLES
   ======================================== */

.btn-outline-primary {
	border-color: #8B7355;
	color: #8B7355;
	transition: all 0.3s ease;
}

.btn-outline-primary:hover {
	background-color: #bf9e75;
	color: white;
	border-color: #bf9e75;
}

/* ========================================
   BARRA RICERCA / ORDINAMENTO PRODOTTI
   ======================================== */
.products-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}
.products-toolbar__search {
	position: relative;
	flex: 1 1 260px;
}
.products-toolbar__search .icona {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: #bf9e75;
}
.products-toolbar input,
.products-toolbar select {
	width: 100%;
	border: 1px solid #e6d8c8;
	border-radius: 999px;
	background: #fffaf6;
	color: #695841;
	padding: 0.6rem 1rem;
	font-size: 0.95rem;
	outline: none;
}
.products-toolbar input { padding-left: 2.4rem; }
.products-toolbar select { flex: 0 1 220px; width: auto; cursor: pointer; }
.products-toolbar input:focus,
.products-toolbar select:focus {
	border-color: #bf9e75;
	box-shadow: 0 0 0 3px rgba(191, 158, 117, 0.2);
}
.products-toolbar__count {
	color: #8B7355;
	font-size: 0.9rem;
	white-space: nowrap;
}
@media (max-width: 576px) {
	.products-toolbar select { flex: 1 1 auto; }
	.products-toolbar input,
	.products-toolbar select { font-size: 16px; } /* evita lo zoom automatico su iPhone */
}