/*
Theme Name: Technova
Author: Simone Cipolletta
Author URI: https://github.com/simonecipolletta
Description: Custom WordPress theme for promotions, quotes, and sections configurable via the Customizer.
Version: 1.0.1
Tags: custom-background, custom-logo, translation-ready
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: technova
Domain Path: /languages
Requires PHP: 7.4
Tested up to: 6.4

Copyright (c) 2025 Simone Cipolletta. All rights reserved.
*/



/* -------------------- Base (mobile) -------------------- */

/* -------------------- WordPress Core Recommended Classes -------------------- */

/* Scroolbar Style */
	/* Selettore globale per tutto il sito */
	::-webkit-scrollbar {
		width: 12px;              /* larghezza della barra verticale */
		height: 12px;             /* altezza della barra orizzontale (se presente) */
	}

	/* Sfondo della scrollbar */
	::-webkit-scrollbar-track {
		background: var(--color-primary);      /* colore dello sfondo (traccia) */
	}
	/* Parte mobile (il “pollice”) */
	::-webkit-scrollbar-thumb {
		background-color: var(--color-secondary);  /* colore del thumb */
		border-radius: 6px;         /* angoli arrotondati */
		border: 2px solid var(--color-primary);  /* crea un “effetto spazio” */
	}
	/* Evidenzia articoli sticky */
	.sticky {
		border: 2px solid var(--color-secondary);
		background-color: rgba(255,255,255,0.05);
		padding: 1rem;
	}

	/* Didascalia gallerie immagini */
	.gallery-caption {
		font-size: 0.9em;
		color: #666;
		text-align: center;
		margin-top: 0.5em;
	}

	/* Commenti dell'autore del post */
	.bypostauthor {
		border-left: 3px solid var(--color-secondary);
		background-color: rgba(0,0,0,0.05);
		padding-left: 0.75rem;
	}

	/* Allineamenti standard WordPress */
	.alignright {
		float: right;
		margin-left: 1em;
		margin-bottom: 1em;
	}

	.alignleft {
		float: left;
		margin-right: 1em;
		margin-bottom: 1em;
	}

	.aligncenter {
		display: block;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 1em;
	}
/*gestione wp-caption per immagini assegnate alla didascalia*/
	.wp-caption {
		max-width: 100%;
		margin: 1em auto;
		text-align: center;
	}

	.wp-caption img {
		display: block;
		margin: 0 auto;
	}

	.wp-caption .wp-caption-text {
		font-size: 0.9em;
		color: #666;
		margin-top: 0.5em;
	}
	.wp-block-image figcaption {
		font-size: 0.9em;
		color: #666;
		text-align: center;
		margin-top: 0.5em;
	}
	/* screen reader text */
	.screen-reader-text {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		border: 0;
		clip: rect(0, 0, 0, 0);
		overflow: hidden;
	}
	/* calcolo per corretto allineamento in caso di ancora HTML */
	[id] {
	scroll-margin-top: 80px; /* cambia 80px con l’altezza del tuo header */
	}
	/* spaziature per le pagine wordpress */
	.page-style{
		padding:15px;
	}
/* ----------------------------- SEZIONE HEADER ----------------------------- */

	.site-header{
		position: fixed;
		/* top: 0; */
		left: 0;
		width: 100%;
		z-index: 999; 
		background-color:var(--color-primary);
	}
/* menu responsive */
	.header-container{
		display:flex;
		align-items:center;
		gap:20px;
	}
	
	.main-navigation{
		position: absolute;
		top: 100%;
		left: 0;
		width: 70%;
		height: 100vh;
		background-color: var(--color-primary);
		transform: translateX(-100%);
		opacity: 0;
		transition: none; /* niente animazioni di default */
	}
	.main-navigation.animate {
		transition: transform 0.4s ease, opacity 0.3s ease;
	}
	.main-navigation.open{
		transform: translateX(0);
		opacity: 1;
		z-index:9999;
	}
	.main-navigation a{
		color:var(--color-font);
		text-decoration: none
	}
	.close-navigation{
		padding:0.5rem 1rem;
		position:absolute;
		right:5%;
		top:0.5%;
	}
	.menu-toggle {
		z-index: 1000;
		background:none;
		color:var(--color-secondary);
	}
	.menu-toggle:hover,
	.menu-toggle:focus {
		background: none;
	}

	.menu-item-has-children > a::after {
		content: ' ▾';
		font-size: 0.8em;
		margin-left: 5px;
	}
	.menu-item-has-children .sub-menu {
		display: none;
		position: absolute;
		background-color: var(--color-primary);
		min-width: 180px;
		z-index: 999;
		padding: 10px 0;
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		transition: max-height 0.4s ease, opacity 0.3s ease;
	}
	.menu-item-has-children.open > .sub-menu{
		display: block;
		max-height: 500px; /* abbastanza per contenere tutto */
		opacity: 1;
		position: static; /* su mobile viene sovrascritto */
	}
	.main-navigation ul li { 
		font-size: clamp(0.875rem, 2.5vw, 1.25rem);
		line-height: 1.4;
		letter-spacing: 0.5px;
		padding:0.5rem;
		margin:0.5rem;
	}
	/* Accessibilità */
	.main-navigation a:focus-visible {
		outline: 2px solid #00adee;
		outline-offset: 2px;
	}
/*debug barra in basso*/
	.nav-inner {
		display:flex;
		align-items:center;
		justify-content:space-around;
		flex-wrap:wrap;
		padding:10px 0;
	}

	.search-bar {
		transform: skewX(-26deg);
	}

	.nav-actions {
		display: flex;
		align-items: center;
		flex-wrap:wrap;
	}

	.nav-cart button,
	.login a {
		display: flex;
		align-items: center;
		font-size: 18px;
		background: none;
		border: none;
		cursor: pointer;
	}

	.cart-count {
		color: white;
		padding: 2px 6px;
		margin-left: 5px;
	}


	/*fake search*/
	.hidden{
		opacity:0; /*nasconde la search*/
		pointer-events:none;
		transition: opacity 0.8s ease;
	}
	/* visibilità pulsanti search */
	.close-search,
	.submit-search {
		opacity: 1;
		pointer-events: auto;
		transition: transform 0.6s ease, opacity 0.6s ease;
	}

	/* Stato nascosto: spostati fuori dallo schermo */
	.close-search.offscreen {
		transform: translateY(-400%);
		opacity: 0;
		pointer-events: none;
	}

	.submit-search.offscreen {
		transform: translateY(400%);
		opacity: 0;
		pointer-events: none;
	}
	.visible{
		transition: transform 1s ease;
	}
	.hide-search{
		opacity:1; /*mostra la search*/
		transition: opacity 0.8s ease;
	}
	.search-container {
		position: fixed;
		top: 0;
		left: 0;
		/* width: 100vw; */ /*generava errore di calcolo per il filters shop*/
		width:100%;
		height: 100vh;
		background-color: transparent;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1000;
	}
/* Triangoli con effetto rotazione */
.triangle {
    position: absolute;
    /* width: 100vw; */ /*generava errore di calcolo per il filters shop*/
	width:100%;
    height: 100vh;
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.8s ease;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    backface-visibility: hidden;
}

/* Stato iniziale: Ruotati di 90 gradi (di taglio) */
.triangle-top {
    top: 0;
    left: 0;
    fill: var(--color-background);
    transform: rotateY(-90deg);
    transform-origin: left center; /* Ruota dal bordo sinistro */
}

.triangle-bottom {
    bottom: 0;
    right: 0;
    fill: var(--color-primary);
    transform: rotateY(90deg);
    transform-origin: right center; /* Ruota dal bordo destro */
}

/* Stato attivo: Chiusura a libro verso il centro */
.triangle-top.right-move,
.triangle-bottom.left-move {
    opacity: 1;
    transform: rotateY(0deg);
}
	/* Contenuto sopra */
	.nav-search {
		position: relative;
		z-index: 1001; 
	}
	input{
		color:black;
	}
	/* gestione della search */
	.search-wrapper {
		position: relative;
	}

	.search-form {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	#search-field {
		width: 100%;
		height: 3rem; 
		padding: 1rem 1.5rem;transform: skewX(-26deg);
		border:5px inset var(--color-secondary);
	}
	.search-buttons {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
	}

	/* Bottone chiusura a sinistra */
	.submit-search {
		position: absolute;
		left: 0; /* distanza dal form */
		top: 80%;
		transform: translateY(90%);
		background-color: var(--color-background);
		padding: 1rem 1.2rem;
		border-radius: 99px;
		border: 3px solid var(--color-font);
		pointer-events: auto;
		color:black;
	}

	.submit-search::before {
		content: "";
		position: absolute;
		height: 3px;
		width: 50px; /* lunghezza fino al form */
		background-color: var(--color-font);
		bottom: 140%;
		right: 5%;
		transform: translateY(-100%) rotate(-90deg);
	}

	/* Bottone lente a destra */
	.close-search {
		position: absolute;
		right: 0; /* distanza dal form */
		bottom:80%;
		transform: translateY(-90%);
		background-color: var(--color-primary);
		padding: 1.1rem 1.6rem;
		border-radius: 99px;
		border: 3px solid var(--color-font);
		pointer-events: auto;
	}

	.close-search::before {
		content: "";
		position: absolute;
		height: 3px;
		width: 50px; /* lunghezza fino al form */
		background-color: var(--color-font);
		top:140%;
		left:8%;
		transform: translateY(100%) rotate(-90deg);
	}

	/* gestione grafica aweson woocommerce */
	.fas{
		color:var(--color-secondary);
	}
	.fas:hover{
		color:(--color-secondary);
	}

	/* codice dell'icona carrello*/
	.fa-cart-shopping{
		width: 20px;
		height: 20px;
		fill: currentColor;
	}

	/* Style risultati per ricerca */
	.search-title{
		color:var(--color-secondary);
		text-align:center;
	}
	.container-search-result {
		padding: 1rem;
	}
	.container-search-result article{
			position: relative;
			padding:0.75rem 0;

	}
	.container-search-result article:after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 2px;
		background-color: var(--color-secondary);
	}

	.search-results {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
		grid-auto-rows: 1fr;
		gap: 2rem;
	}

	.search-item {
		background-color: var(--color-primary);
		padding: 1rem;
		border-radius: 6px;
		transition: transform 0.2s ease;
		max-width: 400px;
		margin: 0 auto;
	}
	.search-item h3, .search-item p{
		padding:0 0.75rem;
	}

	.search-item:hover {
		transform: translateY(-4px);
	}

	.search-thumbnail img {
		width: 100%;
		height: auto;
		object-fit: cover;
		border-radius: 4px;
		margin-bottom: 1rem;
		padding:0.75rem;
	}
	input::-webkit-input-placeholder {
		color:#f8f9fa;
	}
	input:-moz-placeholder {
		color:#f8f9fa;
	}
	/* 2. LA REGOLA "NUCLEARE": Nasconde tutto ciò che segue la descrizione */
	/* Questo elimina la scritta "CARATTERISTICHE TECNICHE" ovunque essa sia */
	.search-item p ~ * {
		display: none !important;
	}

/* ----------------------------- FINE SEZIONE HEADER ----------------------------- */


/* ----------------------------- INIZIO SEZIONE FOOTER ----------------------------- */
	.wrapper{
		display:flex;
		flex-direction:column;
		min-height:100vh;
	}
	.site-main{
		flex:1;
	}
	.site-footer {
		background-color: var(--color-primary);
		color: #fff;
		padding: 2rem 0;
		font-size: 0.9rem;
	}

	.technova-footer-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2rem;
	}
	.footer-widgets{
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		gap: 1.5rem;
		width:100%;
	}
	.footer-menu{
		list-style: none;
		display: flex;
		justify-content: center;
		flex-direction: column; /* per mobile*/
		padding: 0;
		margin: 0;
		gap: 0.5rem;
	}
	.footer-menu li a {
	color: #fff;
	text-decoration: none;
	}

	.footer-social a {
		color: #fff;
		margin-right: 1rem;
		font-size: 1.2rem;
	}

	.footer-bottom {
		text-align: center;
		margin-top: 2rem;
		font-size: 0.8rem;
	}

/* ----------------------------- FINE SEZIONE FOOTER ----------------------------- */

/* ---- CONTROLLO GENERICO DELLO STILE ----- */
	.section-style{
		text-align:center;
		padding: clamp(1rem, 2vw, 3rem);
	}

/* ---- FINE CONTROLLO GENERICO ----- */

/* ----- FRONT PAGE => INIZIO SECTION HERO ----- */
	.hero-image img{
		width:100%;
		height:100%;
		top: 0;
		left: 0;
		object-fit: cover; /* Taglia l'immagine senza distorcerla */
    	object-position: center; /* Mantiene il focus al centro */
		position: absolute;
		z-index:1;
		object-fit: cover;
	}
	.hero-image::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.45);
		z-index:2;
	}
	.hero-image{
		position:relative;
		width:100%;
		height: 30vh;
		min-height: 350px;
		overflow:hidden;
	}

	.hero-content {
		font-size: clamp(0.875rem, 2.5vw, 1.25rem);
		position:absolute;
		top:0;
		left:0;
		z-index:3;
		display:flex;
		align-items:center;
		justify-content: center;
		flex-direction:column;
		width:100%;
		height:100%;
		padding: clamp(0.5rem, 1vh, 2rem);
		text-align:center;
	}
	.hero-content h2,
	.hero-content h3,
	.cta-button {
		width: fit-content;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
	}

	.hero-content h2 {
		font-size: clamp(1.2rem, 4vw, 3rem);
	}

	.hero-content h3 {
		font-size: clamp(1rem, 2.5vw, 1.4rem);
	}

	.cta-button {
		/* background-color: #0073e6;
		color: #fff; */
		padding: 0.4em 0.5em;
		text-decoration: none;
		border-radius: 5px;
		font-weight: bold;
		transition: background-color 0.3s ease;
		display: inline-block;
	}
/* ----- FRONT PAGE =>  FINE SECTION HERO ----- */

/* ----- FRONT PAGE =>  INIZIO SECTION SHOP ----- */
	.swiper-slide {
		background: var(--color-primary);
		border-radius: 10px;
		box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
		padding: 10px;
		transition: transform 0.3s ease;
	}

	.product-card img {
		width: 100%;
		height: auto;
		display: block;
		border-bottom: 1px solid black;
	}

	.product-card h3 {
		font-size: 1rem;
		margin: 10px 0 5px;
		text-align: center;
	}

	.product-card .price {
		font-weight: bold;
		color: var(--color-secondary);
		text-align: center;
	}
	.promotion-extra-text{
		display:flex;
		justify-content:space-around;
		align-items:baseline;
		align-content:center;
		flex-wrap:wrap;
	}

/* 	============================================================
	FIX CARD ALTEZZA UNIFORME (Home Page)
	============================================================ */
/* ----> gestione immagini responsive del carrosello */

	/* 1. Impostiamo lo Swiper Slide per estendersi in altezza */
	.promotion-swiper .swiper-slide {
		position: relative;   /* Necessario per il contenitore */
		overflow: hidden;     /* Nasconde l'eccesso fuori dal contenitore */
	    height: auto; /* Lascia che Swiper calcoli l'altezza massima della riga */
    	display: flex; /* Necessario per far estendere il figlio (.product-card) */
	}
	/* 2. La Card deve occupare il 100% dell'altezza della slide */
	.promotion-swiper .product-card {
		width: 100%;
		display: flex;
		flex-direction: column; /* Impila gli elementi (Foto, Titolo, Prezzo) */
		justify-content: space-between; /* Distribuisce lo spazio */
		background: var(--color-primary);
		border: 2px solid var(--color-primary); /* Bordo come nello shop */
		border-radius: 10px;
		padding: 10px;
		height: 100%; /* FONDAMENTALE: Forza la card a essere alta quanto la più alta della riga */
		transition: transform 0.3s ease, border-color 0.3s ease;
	}

	/* 3. Link interno che avvolge tutto */
	.promotion-swiper .product-card a {
		display: flex;
		flex-direction: column;
		height: 100%;
		text-decoration: none;
		color: var(--color-font);
	}
	/* 4. IMMAGINE RESPONSIVE E QUADRATA */
	/* Gestione immagini per farle adattare senza distorsioni */
	.promotion-swiper .swiper-slide img {
		width: 100%;          /* Immagine prende tutta la larghezza del contenitore */
		height: auto;         /* Altezza proporzionale  alternativamente usare 100% */
		aspect-ratio: 1 / 1; 
		object-fit: cover;    /* L'immagine riempie il contenitore, mantenendo le proporzioni */
		object-position: center; /* Centra l'immagine */
		border-radius: 6px;
		margin-bottom: 15px;
	}
	/* 5. TITOLO E PREZZO ALLINEATI */
	.promotion-swiper .product-card .woocommerce-loop-product__title {
		font-size: 1rem;
		margin: 0 0 10px 0;
		line-height: 1.3;
		/* Questo spinge il prezzo verso il basso se il titolo è corto */
		flex-grow: 1; 
	}
	.promotion-swiper .product-card .price {
		font-weight: bold;
		color: var(--color-secondary);
		margin-top: auto; /* Inchioda il prezzo in fondo alla card */
		display: block;
}

/* ============================================================
   FORZA VISIBILITÀ FRECCE (Anti-Scomparsa)
   ============================================================ */

	/* 1. Reset completo dello stile delle frecce */
	.promotion-swiper .swiper-button-next,
	.promotion-swiper .swiper-button-prev {
		/* Assicurati che siano blocchi flessibili per centrare l'icona */
		display: flex !important;
		align-items: center;
		justify-content: center;

		/* Posizionamento e Dimensioni */
		width: 44px !important;
		height: 44px !important;
		border-radius: 50%;
		
		/* Colori definiti e visibili (Sfondo scuro, freccia colorata) */
		background-color: rgba(0, 0, 0, 0.7) !important; 
		color: var(--color-secondary, #00ffff) !important; 
		border: 1px solid var(--color-secondary, #00ffff) !important;

		/* Z-INDEX ESTREMO: Devono stare sopra a tutto */
		z-index: 9999 !important;
		
		/* Forza la visibilità contro Swiper e Cookiebot */
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
		cursor: pointer !important;
	}

	/* 2. OVERRIDE DEL BLOCCO DI SWIPER */
	/* Se Swiper prova a nasconderle con la classe "lock", noi lo impediamo */
	.promotion-swiper .swiper-button-lock,
	.promotion-swiper .swiper-button-disabled {
		display: flex !important;
		opacity: 1 !important;
		pointer-events: auto !important;
	}

	/* 3. Posizionamento specifico */
	.promotion-swiper .swiper-button-prev {
		left: 10px !important;
	}
	.promotion-swiper .swiper-button-next {
		right: 10px !important;
	}

	/* 4. Dimensione icona interna */
	.promotion-swiper .swiper-button-next::after,
	.promotion-swiper .swiper-button-prev::after {
		font-size: 18px !important;
		font-weight: bold;
	}

/* ============================================================
   FIX ICONE FRECCE MANCANTI
   Disegniamo le frecce usando caratteri di testo standard
   ============================================================ */

/* 1. Reset del font per essere sicuri che il carattere venga letto */
.promotion-swiper .swiper-button-next::after,
.promotion-swiper .swiper-button-prev::after {
    font-family: sans-serif !important; /* Usa il font di sistema, sicuro al 100% */
    font-variant: initial;
    text-transform: none !important;
    line-height: 1;
    font-size: 22px !important; /* Grandezza icona */
    color: var(--color-secondary, #00ffff) !important; /* Colore acceso */
}

/* 2. Inseriamo il carattere "Freccia Sinistra" (❮) */
.promotion-swiper .swiper-button-prev::after {
    content: "\276E" !important; /* Codice Unicode per freccia sinistra */
    padding-right: 2px; /* Piccola correzione ottica per centrarla */
}

/* 3. Inseriamo il carattere "Freccia Destra" (❯) */
.promotion-swiper .swiper-button-next::after {
    content: "\276F" !important; /* Codice Unicode per freccia destra */
    padding-left: 2px; /* Piccola correzione ottica per centrarla */
}

/* 4. Assicuriamoci che il cerchio di sfondo sia visibile */
.promotion-swiper .swiper-button-next,
.promotion-swiper .swiper-button-prev {
    background-color: rgba(0, 0, 0, 0.8) !important; /* Sfondo scuro forte */
    border: 2px solid var(--color-secondary, #00ffff) !important; /* Bordo colorato */
    opacity: 1 !important; /* Visibilità forzata */
}

/* ----- FRONT PAGE =>  FINE SECTION SHOP ----- */

/* ----- FRONT PAGE =>  INIZIO SECTION SHIP ----- */
	#ship-section.web-su-misura {
		padding: 40px 20px;
		background-color:var(--color-primary);
		/*modifiche per centrare i contenuti*/
		overflow: hidden !important; /* Sigilla la sezione contro ogni sforamento */
		position: relative;
		width: 100%;
	}

	#ship-section .ship-title {
		margin-bottom: 18px;
	}

	#ship-section .ship-description {
		font-size: 1rem;
		margin-bottom: 30px;
	}

	#ship-section .svg-container {
		max-width: 1100px;
		margin: 0 auto;
	}

	#shipSvg {
		width: 100%;
		height: auto;
		display: block;
	}

	#ariaStatus {
		position: absolute;
		left: -9999px;
		top: auto;
		width: 1px;
		height: 1px;
		overflow: hidden;
	}

	.cta-button {
		display: inline-block;
		margin-top: 20px;
		padding: 10px 20px;
		background-color: var(--color-button, #0073aa);
		color: #fff;
		text-decoration: none;
		border-radius: 4px;
		font-weight: bold;
		transition: filter 0.3s ease;
	}

	.cta-button:hover {
		filter: brightness(0.9);
	}

	.ship-container {
		position: relative;
		width: 100%;
		max-width: 1350px;
		margin: 0 auto;
	}
	.svg-container {
		position: relative; /* contenitore di riferimento per le label */
	}

	.label {
		position: absolute;
		left: 50%!important;
		top: 50%;
		transform: translate(-50%, -50%);
		background: rgba(0, 0, 0, 0.95); 
		color: var(--color-font);
		padding: 20px 25px;
		border: 1px solid rgba(255,255,255,0.2); /* Definisce meglio i bordi */
		border-radius: 12px;
    /* --- GESTIONE LARGHEZZA E WRAPPING --- */
	    width: 85%;           /* Fluida su schermi piccoli */
	    max-width: 400px;     /* Limite fisso: oltre i 400px il testo VA A CAPO obbligatoriamente */
	    min-width: 220px;     /* Impedisce che diventi troppo stretta su cellulari mini */		
		font-weight: bold;
		/* forzo il wrapping per prevenire lo scroll su mobile-devices */
		white-space: normal !important; 
		word-wrap: break-word !important;
		overflow-wrap: break-word !important;
		text-align: center;
		opacity: 0;
		transition: opacity 0.3s ease;
		z-index: 100;
		pointer-events: none;
	}

	.label-text {
		display: block;
		width: 100%;
		/* display: inline-block; */
		line-height: 1.5;
		font-size: clamp(1rem, 2.5vw, 1.3rem);
	}
/* ----- FRONT PAGE =>  FINE SECTION SHIP ----- */


/* ----- FRONT PAGE =>  INIZIO SECTION TESTIMONIAL ----- */
	#testimonial h2 {
		padding: 10px 0;
		margin: 10px 0 40px 0;
	}

	.testimonial-flex{
		display:flex;
		flex-wrap:wrap;
		justify-content: center; /* Centra i box se sono meno di 3 */
		gap: 20px;
	}
	.testimonial-container{
		margin:2px;
		text-align:center;
		flex: 1 1 100%;
	}
	/* Consigliata 300x300 */
	.testimonial-img{
		width:150px;
		height:150px;
	  	border-radius: 50%; /* crea il cerchio */
	  	overflow: hidden;   /* nasconde le parti che escono dal cerchio */
		margin: 0 auto;     /* centra il div */
		display:flex;
		align-items:center;
		justify-content:center;
	  	background-color: #f0f0f0; /* colore di sfondo se l'immagine è piccola */
	}
	.testimonial-img img{
		width:100%;
		height:100%;
		object-fit:cover; /* taglia e riempie il cerchio */
	}
	.testimonial-container h3{
		color: var(--color-secondary);
	}
/* ----- FRONT PAGE =>  FINE SECTION TESTIMONIAL ----- */

/* ----- FRONT PAGE =>  INIZIO SECTION CONTACT ----- */

	#contact-front{
		padding:15px;
		background-color:var(--color-primary);
	}

	.contact-frontpage-container h2{
		text-align:center;
		padding:5px;
		margin-top:1rem;
		
	}
/* ----- FRONT PAGE =>  FINE SECTION CONTACT ----- */
	/* ----- ######################################## SEZIONE ALLA PAGINA CONTATTI ######################################## ----- */
	.helloform input, .helloform textarea{
		padding:10px;
		border:2px solid var(--color-secondary);
		border-radius:4px;
	}
	.helloform input[type='submit']{
		border:none;
	}
	/* ==== MAPPA GOOGLE ==== */
    .mappa-responsive {
        /* Diventa più quadrata su mobile per essere più leggibile */
        aspect-ratio: 5 / 3; 
    }
/* ----- ######################################## SEZIONE DEDICATA AL BLOG ######################################## ----- */
	.blog-main{
		display:flex;
		flex-direction:column;
		align-items:center;
	}

	.archive-main,.single-main{
	padding: clamp(1rem, 2vw, 3rem);
	}
	.hero-article{
		display:flex;
		align-items:center;
		justify-content:center;
		/* background-color:var(--color-secondary); */
		text-align:center;
		width:100%;
		padding:5vh;
	}
	.hero-shadow{
		background-color: rgba(0, 0, 0, 0.4);
	}

	/*stile impaginazione*/
	.pagination {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.75em;
		margin-top: 2em 0;
	}
	.pagination a,
	.pagination span {
		flex: 0 0 clamp(40px, 8vw, 80px);
		text-align: center;
		padding: 0.5em;
		background: var(--color-primary);
		border-radius: 4px;
		text-decoration: none;
		color: var(--color-font);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 0.9rem;
	}
	.pagination .current {
		background:var(--color-button);
		color: var(--color-font);
	}
	/*stile navigazione tra categorie*/
	.category-nav ul {
		display: flex;
		flex-wrap: wrap;
		justify-content:center;
		padding: 0;
		margin: 2em 0;
		gap:1em;
		list-style: none;
	}

	.category-nav li {
		flex: 0 0 40vw;
		text-align: center;
		min-width: 100px;
		max-width: 200px; /* opzionale per contenere l'espansione */
	}

	.category-nav a {
		display: block;
		padding: 0.75rem 0.5rem;
		height: 100%; /* forza altezza uniforme */
		line-height: 1.2;
		white-space: nowrap; /* evita il wrap */
		overflow: hidden;
		text-overflow: ellipsis;
		background-color: var(--color-button);
		color: var(--color-font);
		border-radius: 4px;
		font-size: 0.9rem;
	}

	.separator {
		display: block;
		width: 100%;
		height: 2px;
		margin: 2em 0;
		color: var(--color-primary)
	}
	.separator line {
		stroke: currentColor;
		stroke-width: 2;
	}

	/* stile grafico per commenti */
	.comment-list li {
		margin-bottom: 20px;
		list-style: none;
	}
	.children{
		margin-left:25px;
	}
/* ----- ######################################## FINE SEZIONE DEDICATA AL BLOG ######################################## ----- */

/* ================================= WOOCOMMERCE ================================= */


/* REGOLA MODIFICATA: Esclude i tasti .minus e .plus */
	.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit, 
	.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button, 
	.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button:not(.minus):not(.plus), 
	.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button:not(.minus):not(.plus), 
	:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit, 
	:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button, 
	:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button:not(.minus):not(.plus), 
	:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button:not(.minus):not(.plus) {
		color: var(--color-font);
		background-color: var(--color-button);
	}

	/* HOVER: Esclude i tasti .minus e .plus */
	.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit:hover, 
	.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button:hover, 
	.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button:not(.minus):not(.plus):hover, 
	.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button:not(.minus):not(.plus):hover, 
	:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit:hover, 
	:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button:hover, 
	:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button:not(.minus):not(.plus):hover, 
	:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button:not(.minus):not(.plus):hover {
		color: var(--color-font);
		background-color: var(--color-button);
	}		
	/* Pagina account definisco colore pulsante e campi dettagli account */
	.woocommerce form .form-row .input-text, .woocommerce form .form-row select {
		background-color:var(--color-primary);
		color:var(--color-font);
		border:1px solid black;;
	}

	#primary{
		padding:20px;
		flex:1;
	}

	#order-summary{
		padding:10px;
	}
	.woocommerce-Price-amount, .amount,.woocommerce-Price-currencySymbol,.woocommerce:where(body:not(.woocommerce-uses-block-theme)) ul.products li.product .price{
		color:var(--color-font);
	}
	.woocommerce span.onsale{
		background-color:red;
	}

	.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button{
		color:var(--color-font);
		background-color:var(--color-button);
	}
	.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button:hover{
		color:var(--color-font);
		background-color:var(--color-button);
	}

	/* SELEZIONE A TENDINA CATEGORIE */
	.shop-category-dropdown select {
		padding: 0.6rem;
		border-radius: 6px;
		/* border: 1px solid var(--color-font); */
		background-color: var(--color-primary);
		font-size: 1rem;
		width:100%;
		margin-bottom: 20px;
	} 
	.wrapper-archive-product{
		display:flex;
		flex-direction:column;
		gap:1rem;
	}
	.woocommerce .woocommerce-ordering, .woocommerce-page .woocommerce-ordering{
		float:none;
	}
	/* .woocommerce-ordering select{  era il codice per l'ordering generato di default, l'ho sostituito con uno personalizzato per disattivare l'AJAX di wordpress
		padding: 0.6rem;
		border-radius: 6px;
		border: 1px solid #ccc;
		background-color: var(--color-primary);
		font-size: 1rem;
		width:100%; filtro woocommerce su tutta larghezza
	} */
	.woocommerce ul.products li.product, .woocommerce-page ul.products li.product{
		border:2px solid var(--color-primary);
		padding:5px;
		background-color: var(--color-primary);
	}
		.woocommerce .products ul, .woocommerce ul.products{
		padding:5px;
	}
	.woocommerce ul.products li.product .woocommerce-loop-category__title, .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product h3{
		font-size: 0.9em;
	    flex-grow: 1; /* MODIFICA: Questa è la "molla" che spinge tutto il resto in basso */
		margin-bottom: 10px !important;
		
	}
	/* SEZIONE DEDICATA AI FILTRI */
	.price-slider-wrapper {
		margin: 20px 0;
		padding: 0 15px;
		min-width: 250px;
		flex-grow: 1;
	}

	#price-range-slider {
		margin-top: 15px;
		height: 8px;
		background: #e0e0e0;
		border-radius: 4px;
		border: none;
	}

	/* Colore della barra tra le due levette */
	.noUi-connect {
		background: var(--color-secondary);
	}

	/* Stile delle levette (handles) */
	.noUi-horizontal .noUi-handle {
		width: 18px;
		height: 18px;
		border-radius: 50%;
		background: var(--color-font);
		border: 2px solid var(--color-secondary);
		box-shadow: none;
		cursor: pointer;
		top: -6px;
	}

	.noUi-handle::before, .noUi-handle::after {
		display: none; /* Rimuove le lineette estetiche standard */
	}

	#price-slider-value {
		font-weight: bold;
		color: var(--color-secondary);
		margin-left: 10px;
	}
	.noUi-handle {
		z-index: 99 !important;
		pointer-events: auto !important;
	}
	.price-slider-wrapper {
		overflow: visible !important; /* Fondamentale per far uscire le levette */
	}

	.mobile-wrapper{
		position:fixed;
		bottom:0;
		left:0;
		height:100%;
		width:100%;
		transform:translateY(100%);
		opacity:0;
		overflow-y: auto; /* Permette di scorrere i filtri se non entrano nello schermo */
		padding: 20px;
		box-sizing: border-box;
		z-index:99999;
		background-color:var(--color-primary);
		/* Impedisce lo scroll del body di trascinarsi dietro */
		overscroll-behavior: contain;
	}
	.toggle-filters-animate{
		transition: transform 0.4s ease, opacity 0.3s ease;
	}
	.toggle-filters-open{
		transform: translateY(0);
		opacity:1;
	}
	/* 1. Mettiamo in ordine il Form per centrare tutto il contenuto */
	.mobile-wrapper form.shop-category-dropdown {
		display: flex;
		flex-direction: column;
		align-items: center; 
		width: 100%;
	}
	/* 2. Stile specifico per il bottone "Applica" */
	.mobile-wrapper .button-filter-apply {
		display: block;
		width: 80%;              
		max-width: 300px;
		margin-top: 20px;       
		text-align: center;
		justify-content: center; 
	}
	.close-filters{
		margin-bottom:20px;
	}
	/* fine SEZIONE DEDICATA AI FILTRI */

	/* DISPOSIZIONE SIMMETTRICA ARTICOLI IN SHOP */
	/* ============================================================
	1. REGOLE BASE (MOBILE - 2 COLONNE)
	Queste regole si applicano subito a smartphone e tablet piccoli.
	============================================================ */

	/* FIX FONDAMENTALE */
	.woocommerce ul.products::before,
	.woocommerce ul.products::after {
		display: none !important;
	}

	/* CONTENITORE GRIGLIA */
	.woocommerce ul.products {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 15px !important; /* Spazio stretto tra le due colonne mobile */
		justify-content: flex-start !important; /* Allineamento standard */
	}

	/* SINGOLA CARD (Mobile) */
	.woocommerce ul.products li.product {
		/* MATEMATICA 2 COLONNE:
		50% larghezza meno metà del gap (7.5px).
		Cosi entrano perfettamente 2 prodotti per riga. */
		width: calc(50% - 7.5px) !important;   /*calcolo fatto su 5 colonn*/
		/* width: calc(16.66% - 25px) !important;  questo calcolo crea un errore sulla visualizzazione dei prodotti nello shop */
		background-color: #111 !important;
		border-radius: 4px;
		display: flex !important;
		flex-direction: column !important;
		justify-content: space-between;
		height: auto !important;
		min-height: 380px;
		padding: 10px !important;        /* Padding leggermente ridotto per risparmiare spazio */
		/* padding-bottom: 15px !important;  */
		margin: 0 !important;            /* Margini gestiti dal gap */
		margin-bottom: 15px !important;  /* Spazio tra le righe */
		position: relative !important;
		float: none !important;
	}

	/* PREZZI */
	.woocommerce ul.products li.product .price {
		color: #fff !important;
		margin-bottom: 10px !important;
		margin-top: auto !important; 
		font-size: 0.9em !important; /* Prezzo leggermente più piccolo su mobile */
	}

	/* BOTTONE MOBILE (Statico e compatto) */
	.woocommerce ul.products li.product .button,
	.woocommerce ul.products li.product .add_to_cart_button {
		position: static !important;
		display: block !important;
		width: 100% !important;
		margin-top: 5px !important;
		text-align: center !important;
		padding: 10px 0 !important;
		font-size: 0.85em !important; /* Testo più piccolo per farlo stare in 2 colonne */
	}

	/* Select WooCommerce per prodotti interni */
	#pa_color,#logo{
		background-color:var(--color-primary);
		padding:5px;
	}
	/* Border per distanziare immagini */
	.woocommerce-product-gallery__image{
		border:1px solid var(--color-primary);
	}

	/* Tasto aggiungi carrello WooCommerce*/
	.woocommerce ul.products li.product .button {
		background-color: var(--color-button); 
	}
	.woocommerce button.button.alt.disabled:hover {
		background-color: var(--color-button);
	}

	/* Pulsante Aggiungi al carrello nella pagina prodotto */
	.woocommerce div.product form.cart .button {
		background-color: var(--color-button);
	}

	.woocommerce div.product p.price,
	.woocommerce div.product span.price {
		color: var(--color-secondary);
	}

	/* freccietta indicativa per la selezione di elementi con più caratteristiche */

	.woocommerce div.product form.cart .variations select {
		background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwb2x5bGluZSBwb2ludHM9IjYgOSAxMiAxNSAxOCA5Ii8+PC9zdmc+") no-repeat;
		background-size: 16px;
		-webkit-background-size: 16px;
		background-position: calc(100% - 12px) 50%;
		-webkit-background-position: calc(100% - 12px) 50%;
	}
	
	/* stile carrello vuoto */
	.technova-empty-cart {
    padding: 6rem 1rem;
    text-align: center;
    background-color: var(--color-background);
    color: var(--color-font);
	}

	.empty-cart-title {
		font-size: 2rem;
		margin-bottom: 1rem;
		color: var(--color-title);
	}

	.empty-cart-message {
		font-size: 1.1rem;
		margin-bottom: 2rem;
		color: var(--color-font);
	}

	.return-to-shop.button {
		display: inline-block;
		padding: 0.9rem 1.8rem;
		background-color: var(--color-button);
		color: #fff;
		border-radius: 6px;
		font-weight: 600;
		transition: background-color 0.3s ease;
	}
	/* Pulsante procedi pagamento */
	.wc-block-cart__submit-container{
		background-color:var(--color-button);
		border-radius:9px;
	}

	/* - - - PAGINA CARRELLO - - - */

	/* imposto 2 colonne */
	.cartcontainer-wrapper{
		display:grid;
	}
	/* parte dedicata ai prodotti singoli */
	.cartcontainer-wrapper{
		display:flex;
		flex-direction:column-reverse;
	}
	.cart-wrapper tr{
		display:flex;
		flex-direction:column;
	}
	.cart-wrapper tr {
		border: 1px solid #444;
		padding: 20px;
		border-radius: 8px;
		background-color: var(--color-primary);
		margin:5px;
	}
	/* spazio fatturazione su riepilogo in carrello appariva troppo stretto */
	.shipping th{
		padding:10px;
	} 
	.cart_totals table tbody tr th{
	border-right: 1px solid var(--color-secondary);
	}
	.cart_totals table tbody tr td{
		padding:10px;
	}
	/* aggiungo sottolineatura al pulsante per modificare indirizzo */
	.shipping-calculator-button{
			text-decoration: underline;
	}


	.cart-collaterals{
		display:flex;
		flex-direction:column-reverse;
		align-items:center;
		justify-content:start;
		margin-bottom: 20px; /* per spazio su mobile */
	}
	.quantity input{
		padding:0 15px;
		border-radius:99px;
	}
	.remove{
		font-size:1.5em;	color:var(--color-secondary);
		background-color:var(--color-background);
		border:1px solid var(--color-font);
		border-radius: 10% !important;      /* Questo crea il cerchio */
    	width: 30px !important;             /* Larghezza fissa */
    	height: 30px !important;            /* Altezza IDENTICA alla larghezza */
    	min-width: 30px !important;         /* Impedisce che si schiacci */
    	padding: 0 !important;              /* Rimuove l'imbottitura che lo deforma */
    
    	/* Centra perfettamente la X dentro il cerchio */
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		line-height: 1 !important;
		padding-bottom: 5px !important; 
	}

	/* Stile per il pulsante quando è in modalità RIMOZIONE */
	.custom-quantity-input .minus.is-remove-button {
		font-weight: bold;
		font-size: 1.2em; /* Rende la 'X' più grande e leggibile */
		color: #e2401c; /* Colore rosso standard per azioni di eliminazione */
	}

	/* Stile generale del pulsante (aggiunto per assicurare che 'X' sia centrata) */
	.custom-quantity-input .minus,
	.custom-quantity-input .plus {
		/* ... (regole precedenti) ... */
		display: flex; /* Assicura che il contenuto sia centrato */
		align-items: center;
		justify-content: center;
	}

	/* PAGINA PAGAMENTO */
	/* Pulsante "Effetua ordine" */
	:root :where(.wp-element-button, .wp-block-button__link) {
		background-color:var(--color-button);
		color:var(--color-font);
	}
	/* ---------------------------------------------------------------- */
	/* STILE CUSTOM PER PULSANTI INTEGRATI NELL'INPUT */
	/* ---------------------------------------------------------------- */

	/* 1. Contenitore principale: Abilita il posizionamento assoluto interno */
	.custom-quantity-input {
		display: inline-flex; /* Contiene solo gli elementi, non si allarga */
		position: relative; /* Base per i figli assoluti */
		width: 120px; /* Larghezza totale del campo */
		height: 30px; /* Altezza fissa per il campo */
	}

	/* 2. Nasconde le frecce di default dell'input numerico */
	.custom-quantity-input input[type="number"]::-webkit-inner-spin-button,
	.custom-quantity-input input[type="number"]::-webkit-outer-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}
	.custom-quantity-input input[type="number"] {
		-moz-appearance: textfield; /* Per Firefox */
	}

	/* 3. Stile e posizionamento dell'input centrale */
	.custom-quantity-input .input-qty {
		/* L'input occupa il 100% dello spazio interno */
		width: 100%;
		text-align: center;
		border: none;
		padding: 0 30px; /* Spazio per i pulsanti ai lati (30px a sx e 30px a dx) */
		height: 100%; /* Copre l'altezza del contenitore */
		margin: 0;
		box-shadow: none !important;
	}

	/* 4. Stile e posizionamento dei pulsanti (assoluti) */
	.custom-quantity-input .minus,
	.custom-quantity-input .plus {
		position: absolute; /* Posiziona il pulsante sopra l'input */
		top: 0;
		height: 100%; /* Occupano l'intera altezza del contenitore */
		width: 30px; /* Larghezza dei pulsanti */
		
		/* Centratura contenuto del pulsante */
		display: flex;
		align-items: center;
		justify-content: center;

		/* Stile pulito */
		background-color: transparent;
		border: none;
		cursor: pointer;
		font-size: 1.2em;
		color: #333;
		z-index: 2; /* Assicura che siano cliccabili sopra l'input */
		padding: 0;
	}

	/* 5. Posizionamento specifico */
	.custom-quantity-input .minus {
		left: 0; /* Il pulsante MENO a sinistra */
	}

	.custom-quantity-input .plus {
		right: 0; /* Il pulsante PIÙ a destra */
	}

	/* 6. Aggiunta opzionale di bordi sottili per separarli visivamente (non obbligatorio) */
	.custom-quantity-input .minus {
		border-right: 1px solid #ccc;
	}
	.custom-quantity-input .plus {
		border-left: 1px solid #ccc;
	}

	.wc-proceed-to-checkout{
		text-align:center;
	}
	.wc-proceed-to-checkout a{
		margin:10px 0;
		width:100%;
	}

	.price-quantity-wrapper {
		display: flex;
		align-items: center;
		gap: 15px;
		padding-bottom:15px;
		border-bottom:1px solid var(--color-font);
	}
		/*  - - - PULSANTE COUPON - - - */

		/* 1. Contenitore di riferimento */
	.coupon-toggle-wrapper {
		position: relative;
		text-align:center;
	}
	/* Codice Coupon nel carrello*/
	.coupon input {
		background-color:var(--color-background);
		border: 1px solid var(--color-secondary);
		color:var(--color-font);
	}
	.coupon input::placeholder{
		color:grey;
	}
	/* 2. Nasconde l'area del form di default e la prepara per la transizione */
	#coupon-form-container {
		opacity: 0;
		opacity: 0;
		visibility: hidden;        /* impedisce interazioni quando nascosto */
		transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s;
		margin-top: 5px; 
	}
	/* 3. Stato APERTO: Rendi l'area visibile e fagli occupare lo spazio */
	#coupon-form-container.coupon-open {
		opacity: 1;
		visibility: visible;
		transition: opacity 0.3s ease-in-out;
	}
	/* Stile interno per allineare input e bottone "Apply coupon" */
	#coupon-form-container .coupon {
		display: flex;
		gap: 10px;
	}
	#coupon-form-container #coupon_code {
		flex-grow: 1;
	}
	/* Stile per il pulsante toggle ( simile a un link) */
	.coupon-toggle-btn {
		cursor: pointer;
		text-decoration: underline;
		background: none!important;
		border: none;
		padding: 0;
	}
	#coupon_code{
		padding:5px;
		border-radius:9px;
	}
	.coupon .button{
		padding:0.25rem;
	}
/* ================================= WOOCOMMERCE ================================= */



/* ----------------------------- INIZIO SEZIONE MINI-CART ----------------------------- */

    /* 1. STRUTTURA GENERALE SIDEBAR */
    .side-cart {
        position: fixed;
        right: 0;
        top: 0;
        width: 100%;
        height: 100dvh; /* Altezza dinamica */
        background: var(--color-primary);
        z-index: 10000;
        display: flex;
        flex-direction: column; /* Head, Content, Footer */
        overflow: hidden; 
        transform: translateX(100%);
        transition: transform 0.3s ease;
        box-sizing: border-box;
    }

    .side-cart.active {
        transform: translateX(0);
    }

    /* Blocca scroll del sito background */
    body.no-scroll {
        overflow: hidden !important;
        position: fixed;
        width: 100%;
    }

    /* 2. TESTATA (Titolo e X chiusura) */
    .head-cart {
        flex-shrink: 0; 
        padding: 20px 15px;
        position: relative;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    
    #minicart-title {
        font-size: 18px;
        font-weight: bold;
        padding: 10px 15px;
        margin: 0;
        flex-shrink: 0;
    }

    .close-cart {
        border: none;
        font-size: 24px;
        position: absolute;
        right: 15px;
        top: 15px;
        cursor: pointer;
        z-index: 10000;
        color: var(--color-font);
    }

    /* 3. CONTENUTO SCROLLABILE */
    .cart-content {
        flex: 1; 
        overflow-y: auto; 
        padding: 15px;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch; 
    }

    /* Override stili default WooCommerce che creano spazi vuoti */
    .cart-content .widget_shopping_cart_content,
    .cart-content .woocommerce-mini-cart {
        height: auto !important;
        margin: 0;
        padding: 0;
    }
    /* Nascondi totali e bottoni standard di WooCommerce (usiamo i nostri custom) */
    .cart-content .woocommerce-mini-cart__total,
    .cart-content .woocommerce-mini-cart__buttons {
        display: none !important;
    }

    /* 4. SINGOLO PRODOTTO (Layout Riga) */
    .product-details {
        position: relative;      /* Necessario per posizionare la X assoluta */
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;       /* FIX: impedisce di andare a capo */
        align-items: center;     /* FIX: centra verticalmente */
        padding: 20px 0;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    /* --- Immagine Prodotto (FIX) --- */
    .side-cart .product-img {
        flex-shrink: 0;          /* FIX: non si schiaccia mai */
        margin-right: 15px;
        width: 80px;             /* Larghezza fissa contenitore */
    }

    .side-cart .product-img img {
        width: 80px !important; 
        height: 80px !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: cover;       /* FIX: taglio quadrato perfetto */
        border-radius: 5px;
        display: block;
        margin: 0;
    }

    /* --- Nome Prodotto (FIX) --- */
    .side-cart .product-name {
        width: 100%;
        padding: 0;
        padding-right: 40px !important; /* FIX: Spazio riservato alla X */
        align-content: center;
    }

    /* Gestione Emoji/Icone nel testo (evita che diventino giganti) */
    .side-cart .product-name img {
        width: 1em !important;
        height: 1em !important;
        display: inline-block !important;
        vertical-align: middle;
        box-shadow: none !important;
    }

    /* --- Tasto Rimuovi X (FIX) --- */
    .side-cart .remove-item {
        position: absolute !important; /* FIX: inchiodato a destra */
        top: 50%;
        right: 0;
        transform: translateY(-50%);   /* Centrato verticalmente */
        z-index: 10;
        width: 30px;
        height: 30px;
        text-align: center;
    }

    .remove-item a[href*="remove"] {
        color: var(--color-font);
        border-radius: 5px;
        font-size: 24px;
        display: block;
        width: 100%;
        height: 100%;
        cursor: pointer;
        line-height: 30px; /* Centra la X nel box */
    }

    /* 5. FOOTER DEL CARRELLO (Totali e Bottoni) */
    .footer-minicart {
        flex-shrink: 0; 
        background: rgba(0, 0, 0, 0.3);
        padding: 20px 15px;
        box-shadow: 0 -5px 15px rgba(0,0,0,0.2);
    }

    .total-minicart {
        display: flex;
        justify-content: space-between;
        font-weight: bold;
        margin-bottom: 15px;
        font-size: 1.1rem;
        padding: 5px;
    }

    .footernav-minicart {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        margin-top: 10px;
    }

    .footernav-minicart a {
        flex: 1;
        text-align: center;
        padding: 15px 5px;
        background: var(--color-button);
        color: white;
        text-decoration: none;
        border-radius: 5px;
        font-weight: bold;
        font-size: 14px;
        display: block;
    }

/* ----------------------------- FINE SEZIONE MINI-CART ----------------------------- */

/* ----------------------------- INIZIO SEZIONE PAG. 404 ----------------------------- */

	.error-wrapper {
		position: relative;
		width: 100%;
		height: 100vh;
		overflow: hidden;
	}

	.error-background {
		position: absolute;
		top: 0; left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		z-index: 0;
	}

	.error-overlay {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 1;
		text-align: center;
		color: white;
		padding: 2rem;
	}

	.error-overlay h1 {
		font-size: 3rem;
		margin-bottom: 1rem;
	}

	.error-overlay p {
		font-size: 1.2rem;
		margin-bottom: 2rem;
	}

	.btn-home {
		display: inline-block;
		padding: 0.75rem 1.5rem;
		background-color: rgba(255,255,255,0.1);
		color: white;
		border: 1px solid white;
		text-decoration: none;
		border-radius: 4px;
		transition: background-color 0.3s ease;
	}
/* ----------------------------- FINE SEZIONE PAG. 404 ----------------------------- */

/* ============= INIZIO Gestione visuale in Landscape ============== */

/* -------------------- Smartphone in Orizzontale (Landscape) -------------------- */
@media (max-height: 500px) and (orientation: landscape) {
    .site-header {
        position: absolute; /* L'header scorre via con il resto del sito invece di restare incollato */
    }
    .site-header {
        padding: 5px 0; /* Riduce drasticamente lo spazio sopra e sotto l'header */
    }

    /* Ridimensiona il logo per occupare meno altezza */
    .site-logo img, 
    .custom-logo-link img {
        max-height: 40px !important; /* Forza il logo a restare piccolo */
        width: auto;
    }

    /* Rimpicciolisce le icone del carrello e login se necessario */
    .nav-actions {
        gap: 10px;
    }
    
    .nav-actions .fas, 
    .nav-cart button {
        font-size: 16px;
    }

    /* Opzionale: riduce il font del menu se è troppo ingombrante */
    .main-navigation ul li {
        margin: 0 10px;
        padding: 2px;
    }
}
@media (max-height: 450px) and (orientation: landscape) {
    .side-cart {
        display: block; /* Cambiamo da flex a block */
        overflow-y: auto; /* Tutta la sidebar ora scorre insieme */
    }

    .footer-minicart {
        position: relative; 
        box-shadow: none;
        background: var(--color-primary);
        border-top: 1px solid rgba(255,255,255,0.1);
    }

    .cart-content {
        overflow-y: visible; /* Disabilitiamo lo scroll interno */
        height: auto;
    }
}
/* ============= FINE Gestione visuale in Landscape ============== */
/* -------------------- Tablet (da 769px a 1024px) -------------------- */
@media (min-width: 769px){	
	/* ----------------------------- INIZIO SEZIONE SHOP ----------------------------- */

	/* 5. Mobile Adjustment (Frecce più piccole ma sempre visibili) */
    .promotion-swiper .swiper-button-next,
    .promotion-swiper .swiper-button-prev {
        width: 35px !important;
        height: 35px !important;
        background-color: rgba(0, 0, 0, 0.8) !important;
    }
    .promotion-swiper .swiper-button-next::after,
    .promotion-swiper .swiper-button-prev::after {
        font-size: 14px !important;
    }

	/* ----------------------------- FINE SEZIONE SHOP ----------------------------- */	
	
	/* ----- FRONT PAGE => INIZIO SECTION SHIP ----- */
	.label {
		max-width: 600px;
	}
	/* ----- FRONT PAGE => FINE SECTION SHIP ----- */

	/* ----- FRONT PAGE =>  INIZIO SECTION TESTIMONIAL ----- */
    .testimonial-container {
        /* Calcola lo spazio per 2 o 3 colonne a seconda della larghezza */
        flex: 0 1 calc(33.333% - 30px); 
        min-width: 300px; /* Impedisce che diventino troppo stretti */
        margin: 0; /* Ripristina il margine per il wrap corretto */
    }
	/* ----- FRONT PAGE =>  FINE SECTION TESTIMONIAL ----- */
	/* ================================= PAGINA CONTATTI ================================= */
	.mappa-responsive {
		width: 100%;           /* Occupa tutta la larghezza del contenitore */
		aspect-ratio: 38 / 9;  /* Proporzione rettangolare su PC */
		height: auto;          /* Sovrascrive l'altezza fissa */
		display: block;
		border-radius: 8px;    /* Opzionale: arrotonda leggermente gli angoli */
	}

	/*================================= WOOCOMMERCE =================================*/
	/* SELEZIONE A TENDINA CATEGORIE */
	/* .wrapper-archive-product{
		flex-direction:row;
	} */
	/* disposizione griglia shop layout >> */
	.woocommerce .products ul, .woocommerce ul.products{
		border:1px solid var(--color-primary);
		box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
		padding:10px;
	}
	.woocommerce ul.products li.product, .woocommerce-page ul.products li.product{
		border:3px solid var(--color-primary);
		padding:10px;
	}
	.woocommerce .quantity .qty {
		padding: 0px 5px !important; /* Aggiunge un minimo di padding interno laterale */
	}


	/* ====== PAGINA SHOP CENTRATA ====== */
	.my-shop-style main{
		max-width: 1200px;
		margin: auto;
	}
	/* ============================================================
	2. REGOLE DESKTOP (Solo PC > 769px)
   	============================================================ */
	/* GRIGLIA DESKTOP */
    .woocommerce ul.products {
        justify-content: flex-start !important;
        align-items: stretch !important;
        gap: 30px !important; /* Spazio più largo su PC */
    }

    /* CARD SU DESKTOP (4 Colonne) */
    .woocommerce ul.products li.product {
        /* MATEMATICA 4 COLONNE: 25% meno la quota parte del gap */
        width: calc(25% - 22.5px) !important; 
        
        padding: 15px !important; /* Ripristina padding standard */
        padding-bottom: 80px !important; /* Spazio per bottone inchiodato */
        margin-bottom: 40px !important;
    }

    /* Link e Prezzo Desktop */
    .woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
        margin-bottom: 0 !important;
    }
    .woocommerce ul.products li.product .price {
        font-size: 1em !important; /* Prezzo grandezza normale */
        margin-bottom: 15px !important;
    }

    /* BOTTONE INCHIODATO (Desktop) */
    .woocommerce ul.products li.product .button,
    .woocommerce ul.products li.product .add_to_cart_button {
        position: absolute !important; 
        bottom: 20px !important;       
        left: 20px !important;
        right: 20px !important;        
        width: auto !important;        
        padding: 10px 0 !important;
        margin: 0 !important;
        font-size: 1em !important;
    }
	/* ====== PAGINA PRODOTTO SINGOLO ====== */
    /* 1. Contenitore principale: NIENTE overflow qui! */
    .single-product div.product {
		max-width: 1200px; /* Larghezza ideale per e-commerce */
    	margin: 0 auto !important; /* Centra il blocco nella pagina */
        /*Codice da rimuovere*/
		/* display: flex !important; 
        flex-wrap: wrap;
        gap: 40px; 
        align-items: flex-start; */
    }

    /* 2. Colonna Galleria: L'overflow va solo qui per nascondere il robot */
    .woocommerce-product-gallery {
        flex: 0 0 550px !important;
        /* width: 550px !important; */
        max-width: 550px !important;
        position: relative;
        overflow: hidden !important; /* Questo nasconde il robot senza tagliare la descrizione */
    }

    /* 3. Forza le slide a occupare tutti i 550px */
    .woocommerce-product-gallery__wrapper {
        display: flex !important;
        width: 100% !important;
    }

    .woocommerce-product-gallery__image {
        flex: 0 0 100% !important; /* Fondamentale: ogni slide larga 550px */
        width: 100% !important;
    }

    /* 4. Riassunto/Testo a destra */
    .summary {
        flex: 1 !important;
    }

    /* 5. Descrizione sotto: Flex-basis 100% la manda a capo */
    .woocommerce-tabs.wc-tabs-wrapper, 
    section.related.products {
        flex: 0 0 100% !important;
        width: 100% !important;
        order: 10;
        overflow: visible !important; /* Per sicurezza, assicuriamo che sia visibile */
    }
	
	/* 1. Assicura che ogni "diapositiva" del carosello non abbia margini interni */
	.woocommerce-product-gallery__image {
		padding: 0 !important;
		margin: 0 !important;
		border: none !important;
	}

	/* 2. CRUCIALE: Rimuove spazi dal link dello zoom che avvolge l'immagine */
	.woocommerce-product-gallery__image a {
		display: block !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}
/* ================================= WOOCOMMERCE ================================= */

}

/* -------------------- Desktop medio (da 1025px a 1440px) -------------------- */
@media (min-width: 1025px) {
/* layout desktop standard */
	.wrapper-archive-product{
		flex-direction:row;
	}
	/* SEZIONE DEDICATA AI FILTRI */
	.mobile-wrapper{
		position:relative;
		padding:0px;
		background:transparent;
		opacity:1;
		transform:translateY(0);
		transition:none!important;
		height: auto;
		width: auto;
		overflow-y: visible;
		overscroll-behavior: auto;
		z-index: auto;
		bottom: auto;
	}
	.toggle-filters, .close-filters{
		display:none;
	}
	
	.woocommerce ul.products li.product .woocommerce-loop-category__title, .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product h3{
		font-size: 0.9em;
	}

	/* Stile grafico della sezione filtri (Stile della dropdown select)*/
			/* Stile per il contenitore del form */
	.shop-category-dropdown select {
		position: relative;
		margin-bottom: 20px;
	}
	/* Stile moderno per la select */
	#product_cat_select, 
	.shop-category-dropdown select {
		width: 100%;
		background-color: var(--color-primary); /* Grigio molto scuro */
		color: var(--color-font);
		padding: 12px 15px;
		border-radius: 8px;
		font-size: 14px;
		font-family: 'Inter', sans-serif; /* O il tuo font */
		cursor: pointer;
		transition: all 0.3s ease;
		appearance: none; /* Rimuove freccia default */
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C2.185 5.355 2.398 5 2.801 5h9.398c.403 0 .616.355.351.658l-4.796 5.482a.503.503 0 0 1-.754 0z'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right 15px center;
	}

	/* Rendi le opzioni più leggibili (alcuni browser limitano questo) */
	#product_cat_select option {
		background-color: var(--color-primary);
		color: var(--color-font);
		padding: 10px;
	}

	/* DEFINIZIONE LAYOUT A 2 COLONNE PER LA SEZIONE FILTRI E LO SHOP SU DESKTOP */
		.my-shop-style main { /* Il tuo contenitore */
		display: grid;
		/* Definisci due colonne: la prima auto-dimensionata (o fissa), la seconda prende il resto */
		grid-template-columns: 250px 1fr; 
		/* Definisci le righe: automatiche in base al contenuto */
		grid-template-rows: auto auto auto; 
		gap: 20px; /* Spazio tra gli elementi */
	}

	/* Il primo elemento (es. il Titolo o un'immagine) */
	.my-shop-style main > :first-child {
		/* Gli diciamo di occupare la colonna 1, e di estendersi per 3 righe verticali */
		grid-column: 1 / 2;
		grid-row: 1 / span 4; /* Occupa altezza 
	}

	/* Gli altri elementi si posizioneranno automaticamente nella colonna 2 uno sotto l'altro */
	}
	.wrapper-archive-product{
			display:block;
		}
	/* Effetto Hover e Focus */
	#product_cat_select:hover, 
	.shop-category-dropdown select:hover {
		border-color: #007bff; /* Un blu tech o il tuo colore accent */
		background-color: #222;
	}
	/* FINE SEZIONE DEDICATA AI FILTRI */
/* ----------------------------- SEZIONE HEADER ----------------------------- */

	.menu-toggle,.close-navigation{
		display:none;
	}	
/* menu responsive desktop */
	.header-container{
		width:100%;
		max-width: 97%;
		margin: 0 auto;
		padding: 0 2rem;
	}
	.main-navigation{
		position:static;
		transform: none;
		width: auto;
		height: auto;
		background: transparent;
		opacity: 1;
		transition:none;
	}
/*submenu*/
	.menu-item-has-children > a::after {
		content: none;
		}	
	.menu-item-has-children.open > .sub-menu {
		position: absolute;
		border: 2px solid var(--color-secondary);
	}
	.menu-item-has-children:hover > .sub-menu {
		display: block;
		max-height: 500px;
		opacity: 1;
	}
/*sistemazione lista nav*/
	.main-navigation ul{
		display: flex;
		flex-direction:row;
		gap: 20px;
	}	
	.main-navigation ul li { 
		font-size: clamp(0.8rem, 1vw, 1.2rem);
	}
	.nav-inner{
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		padding: 5px 20px;
	}
	.search-bar {
		grid-column: 2;
		justify-self: center; 
	}	
	.nav-actions{
		grid-column: 3;
		gap: 5px; 
		justify-content: flex-end;
	}

	.side-cart.active {
		transform: translateX(0);
	} 

	.label {
		max-width:900px;
	}
/* ----------------------------- FINE SEZIONE HEADER ----------------------------- */

/* ----------------------------- INIZIO SEZIONE HERO ----------------------------- */

	.hero-image {
			height: 800px; /* Altezza fissa per schermi grandi */
		}
/* ----------------------------- FINE SEZIONE HERO ----------------------------- */

/* ----------------------------- INIZIO SEZIONE SHOP ----------------------------- */
/* Effetto Hover */
.promotion-swiper .product-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-secondary);
}
/* Freccette della sezione promotion (carrosello) che si collega a quella shop */
/* Effetto illuminazione frecce Swiper al passaggio del mouse (Solo Desktop) */
@media (min-width: 1025px) {
    .promotion-swiper .swiper-button-next:hover,
    .promotion-swiper .swiper-button-prev:hover {
        background-color: rgba(0, 0, 0, 0.9) !important; /* Sfondo leggermente più scuro */
        border-color: #fff !important; /* Il bordo diventa bianco o un colore più acceso */
        box-shadow: 0 0 15px var(--color-secondary); /* Effetto bagliore (glow) */
        filter: brightness(1.3); /* Aumenta la luminosità generale */
        transition: all 0.3s ease;
    }

    .promotion-swiper .swiper-button-next:hover::after,
    .promotion-swiper .swiper-button-prev:hover::after {
        color: #fff !important; /* La freccia interna diventa bianca */
        text-shadow: 0 0 8px var(--color-secondary); /* Bagliore anche sul carattere della freccia */
    }
}
/* ----------------------------- FINE SEZIONE SHOP ----------------------------- */

	
/* ----------------------------- INIZIO SEZIONE MINI-CART ----------------------------- */
	.side-cart {
		max-width:40vw;
	}

	.product-details .product-name{
		padding: 0 20px;
	}
/* ----------------------------- FINE SEZIONE MINI-CART ----------------------------- */
	
/* ----------------------------- INIZIO SEZIONE FOOTER ----------------------------- */
	.footer-menu{
		flex-direction: row;
		gap: 1.5rem;
	}
	.footer-widgets{
		flex-direction: row;
	}

	.footer-menu {
		gap: 0; /* nessuno spazio tra gli elementi */
	}

	.footer-menu li {
		position: relative;
		padding: 0 40px; /* spazio interno per il contenuto */
	}

	/* Bordo inclinato a sinistra */
	.footer-menu li::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 1px;
		height: 100%;
		background-color: var(--color-secondary);
		transform: skewX(-26deg);
	}

	/* Bordo inclinato a destra */
	.footer-menu li::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		width: 1px;
		height: 100%;
		background-color: var(--color-secondary);
		transform: skewX(-26deg);
	}
/* ----------------------------- FINE SEZIONE FOOTER ----------------------------- */

/*================================= WOOCOMMERCE =================================*/

	.added_to_cart, .wc-forward{
		padding-top:0;
		padding:5px;
	}
/* Pagina carrello */
	.cartcontainer-wrapper{
		display:grid;
		grid-template-columns: 2fr 1fr;
		gap:20px;
	}
	.cart-wrapper tr {
		display: grid;
		grid-template-columns: 1fr 2fr; /* due colonne */
		grid-template-rows: auto auto auto; /* quattro righe */
		gap: 10px;
	}
	 /* Riga 1 */
	.cart-wrapper td.product-remove {
		grid-column: 1;
		grid-row: 1;
	}
  /* colonna 2 riga 1 vuota → non serve assegnare nulla */

  /* Riga 2 */
	.cart-wrapper td.product-thumbnail {
		grid-column: 1;
		grid-row: 2;
	}
	.cart-wrapper td.product-name {
		grid-column: 2;
		grid-row: 2;
		align-self:start;
	}
	.cart-wrapper td.product-price-quantity{
		grid-column:1;
		grid-row:3;
	} 
	.cart-wrapper td.product-price-quantity {
		grid-column: 1;
		grid-row: 3;
	}

	.price-quantity-wrapper {
		display: flex;
		align-items: center;
		gap: 15px;
		padding-bottom:0;
		border-bottom:none;
	}
	/* Riga 4 */
	.cart-wrapper td.product-subtotal{
		grid-column:2;
		grid-row:3;
	}
	/* Ordinamento total e coupon su desktop */
	.cart-collaterals{
		flex-direction: column;
	}
/*================================= WOOCOMMERCE =================================*/



/* ----------------------------- INIZIO SEZIONE PAG. 404 ----------------------------- */

	.btn-home:hover {
		background-color: rgba(255,255,255,0.3);
	}
/* ----------------------------- FINE SEZIONE PAG. 404 ----------------------------- */

}
/* -------------------- Desktop largo (oltre 1440px) -------------------- */@media (min-width: 1441px) {
	/* layout ultra-wide */
}