@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 300;
  font-stretch: normal;
  font-display: swap;
  src: url("../fonts/Archivo-Light.ttf") format('truetype');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  font-display: swap;
  src: url("../fonts/Archivo-Regular.ttf") format('truetype');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: normal;
  font-display: swap;
  src: url("../fonts/Archivo-Medium.ttf") format('truetype');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: normal;
  font-display: swap;
  src: url("../fonts/Archivo-SemiBold.ttf") format('truetype');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: normal;
  font-display: swap;
  src: url("../fonts/Archivo-Bold.ttf") format('truetype');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: normal;
  font-display: swap;
  src: url("../fonts/Archivo-ExtraBold.ttf") format('truetype');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 900;
  font-stretch: normal;
  font-display: swap;
  src: url("../fonts/Archivo-Black.ttf") format('truetype');
}
/* Solo per Firefox → cambia il logo */
@-moz-document url-prefix() {
  .logo img {
    content: url("/images/logo-gpsco.png");
  }
  .logo-footer img {
	  content: url("/images/logo-gpsco-nomarg.png");
  }
}
html {
  scroll-behavior: smooth;
}
body, html {
  margin: 0;
  padding: 0;
  font-family: 'Archivo', sans-serif;
  overflow-x: hidden;
}
a {
  text-decoration: none;
  color: #333;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
h1 {
	font-size: calc(3rem + 1vw);
	color: #0a5898;
	font-weight: 900;
	margin: 0;
	line-height: 1.2;
}
h2 {
	font-size: 2rem;
	font-weight: 800;
}
p {
	font-size: calc(1rem + 0.5vw);
	color: #0a5898;
}

main p {
	font-size: 1rem;
	color: #000;
}
main {
	/*padding: 0 8%;*/
}
main a {
	color: #0a5898;
}
main a:hover {
	text-decoration: underline;
}
hr {
	border: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, #0a5898 40%, #0a5898 60%, transparent);
	margin: 1.5rem 0;
	opacity: .9;
}

.site-header {
  width: 90%;
  position: fixed;
  top: 0;
  z-index: 1000;
  padding: 0px 5%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0)); /* Gradiente nero trasparente */
  transition: background-color 0.4s ease;
}
.site-header.scrolled {
  background-color: #0a5898;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.header-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  max-width: 100%;
  margin: 0 auto;
}
.header-left {
  display: flex;
  align-items: center;
  gap: 40px;
  flex: 1;
}
.header-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 15px;
  margin-left: auto;
}
.logo {
  flex: 0 0 auto;
}
.logo img {
  margin-left: 10px;
}
@media (max-width: 992px){
  .logo img{
    margin-left: 0;
  }
}
.main-menu {
  padding-left: 3%;
}
.main-menu > ul {
  display: flex;
  gap: 30px;
  align-items: center;
}
.main-menu > ul > li {
  position: relative;
}
.main-menu > ul > li > a,
.main-menu > ul > li > span {
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 10px 0;
  box-sizing: border-box;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.main-menu > ul > li > a:hover {
  color: #f9f9f9;
}
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.8rem;
  cursor: pointer;
  color: #333;
}
.logo p {
  margin: 0;
}

.language-switcher select,
.search input[type="text"] {
  border: none;
  background: rgba(255, 255, 255, 0.9);
  padding: 6px 10px;
  border-radius: 3px;
  font-size: 14px;
}

.search button {
  background: transparent;
  border: none;
  cursor: pointer;
}
/* Stato iniziale: nascosto e trasparente */
.search-overlay {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease;
}

/* Stato attivo: visibile e opaco */
.search-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Evita salti nel layout durante l’animazione */
.search-overlay,
.search-overlay.active {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 10, 10, 0.95);
  padding: 20px;
}


/*MENU MOBILE*/
/* Pulsante menu mobile */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 26px;
  color: #fff;
  cursor: pointer;
  margin-left: 10px;
}

/* Chiudi X */
.mobile-menu-close {
  font-size: 30px;
  color: #fff;
  background: none;
  border: none;
  align-self: flex-end;
  cursor: pointer;
  margin-bottom: 20px;
}

.nav-header, .separator {
	color: #fff;
}

/*HEADER-DEFAULT*/
.site-header.no-fixed {
  position: static;
  background-color: #0a5898; /* fallback se manca .scrolled */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/*BREADCRUMB*/
.page-header {
  background-color: #0a5898;
  color: #fff;
  padding: 90px 0;
  text-align: left;
}

.page-header .container {
  max-width: 90%;
  margin: 0 auto;
  padding: 0 20px;
}

.page-header .breadcrumb-wrap {
  margin-bottom: 20px;
}

.page-header .page-title {
	display: inline-block;
	/*border-bottom: 2px solid #fff;*/
  text-align: left;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.1;

  /* Responsive font size */
  font-size: clamp(2.2rem, 4vw + 1rem, 5rem);
}

/* ====== HERO a piena altezza con layer sovrapposti (no absolute) ====== */

/* Contenitore principale dell'header (togliamo il blu di base) */
.page-header-vmart{
  background: transparent !important;
  padding: 0; /* gestiamo le altezze dentro ph-wrap */
}

/* Grid a un'unica cella: tutti i figli sovrapposti in 1/1 */
.ph-wrap{
  display: grid;
  grid-template-rows: 1fr; /* una riga */
  grid-template-columns: 1fr; /* una colonna */
  min-height: clamp(320px, 46vw, 560px); /* hero “a tutta altezza” */
  position: relative;
}
.ph-wrap > *{ grid-area: 1 / 1; }

/* Layer blu: 70% dell'altezza, attaccato sopra */
.ph-bg{
  align-self: start;   /* agganciato all’inizio del contenitore */
  height: 70%;
  background: #0a5898;
  width: 100%;
}

/* Layer contenuto: occupa tutta l’altezza. 
   Dentro usiamo una flex a due colonne (testo sx, immagine dx). */
.ph-row{
  display: flex;
  align-items: flex-start;        /* centra verticalmente il contenuto rispetto all’intera hero */
  justify-content: space-between;
  gap: clamp(20px, 4vw, 80px);
  width: 90%;  /* coerente col tuo container */
  margin: 0 auto;
  padding: clamp(28px, 4vw, 48px) 20px; /* spazio interno senza allungare il blu */
}

/* Colonna testo (sta sopra al blu, quindi testo bianco) */
.ph-text{
  flex: 1 1 50%;
  min-width: 300px;
  color: #fff;
}
.ph-text .page-title{ display: inline-block; color:#fff; /*border-bottom: 2px solid #fff;*/ }
.ph-text .menu-note{ color:#fff; }

/*BORDER BOTTOM ANIMATO*/
.page-title {
  display: inline-block;
  position: relative;
  padding-bottom: 6px; /* spazio sotto il testo */
  color: #fff;
}

.page-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;                   /* parte da 0 */
  background-color: #fff;     /* colore linea */
  animation: underlineGrow 0.8s ease-out forwards;
  animation-delay: 0.3s;      /* ritardo opzionale dopo il caricamento */
}

@keyframes underlineGrow {
  from { width: 0; }
  to   { width: 100%; }
}

/* Colonna immagine */
.ph-media{
  flex: 1 1 50%;
  min-width: 300px;
  display: flex;
  /*justify-content: flex-end;*/
  overflow: visible;  /* consente lo “sbordo” */
}

/* Wrapper immagine: grande e con bleed a destra */
.ph-media-inner{
  width: min(50vw, 760px);
  max-width: 760px;
  /* Il tuo container è 90%: 5vw di margine laterale → esci a dx con margine negativo */
  margin-right: calc(-5vw - 24px); /* aumenta i px finali per più sporgenza */
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: flex;
  justify-content: center !important;
  position: relative;
  flex-shrink: 0;
  width: 100%;
  align-items: center;
  border-radius: 15px;
}
.ph-media-inner img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  border-radius: 15px;
}

/* Spazio sotto la hero: il blu non si allunga perché è su ph-bg al 70% */
.page-header + *{
  /* opzionale: se vuoi più aria subito sotto la hero */
  /* margin-top: clamp(12px, 2vw, 24px); */
}

/* ===== Responsive: sotto 992px impiliamo, niente bleed ===== */
@media (max-width: 991.98px){
  .ph-row{
    flex-direction: column;
    align-items: flex-start;
  }
  .ph-media{
    width: 100%;
    justify-content: center;
  }
  .ph-media-inner{
    margin-right: 0;       /* stop bleed in mobile */
    width: min(72vw, 520px);
  }
  .ph-bg{ height: 62%; }   /* leggermente meno alto su mobile */
}



.menu-note {
	padding-top: 2%;
	font-size: clamp(1rem, 0.9rem + 0.5vw, 1.3rem);
}

/*INTRO*/
.intro-columns {
  display: flex;
  align-items: center; /* allineamento verticale */
  flex-wrap: wrap;
  gap: 30px;
  margin: 5em auto;
  padding: 0 5%;
  max-width: 90%;
}

.intro-columns .column {
  flex: 1 1 48%;
}

@media (max-width: 768px) {
  .intro-columns .column {
    flex: 1 1 100%;
  }
}
/*WORLD BLOCK*/
.world-block {
  background-color: #f5f5f5;
  padding: 100px 5%;
}

.world-block .world-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
  max-width: 90%;
  margin: 0 auto;
}

.world-block .world-item {
  background: #fff;
  padding: 30px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

.world-block .world-item-wrap .world-items .world-item:hover {
  transform: translateY(-10px);
}

.world-block .world-icon {
  font-size: 40px;
  color: #0a5898;
  margin-bottom: 20px;
}

.world-block .world-title {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: #0a5898;
}

.world-block .world-text {
  font-size: 1rem;
  color: #555;
  line-height: 1.6;
}
@media (max-width: 768px) {
	.world-block .world-items {
		max-width: 90%;
	}
}

/* ===== Hero Overlap Section ===== */
.hero-overlap{
  /* margine negativo più leggero */
  --overlap-amt: clamp(-80px, -6vw, -40px);
  position: relative;
  z-index: 5;
  margin-top: var(--overlap-amt);
  padding: clamp(20px, 2vw, 32px) 0;
  background: transparent;   /* nessun background */
  box-shadow: none;          /* niente shadow */
  border-radius: 0;          /* niente border radius */
}
@media (max-width:768px){
  .hero-overlap{ --overlap-amt: clamp(-80px, -8vw, -40px); }
}

/* Modificatori opzionali (mettili nel moduleclass_sfx di un modulo in hero_overlap) */
.hero-overlap.overlap-xs{ --overlap-amt: -40px; }
.hero-overlap.overlap-sm{ --overlap-amt: -70px; }
.hero-overlap.overlap-md{ --overlap-amt: -110px; }
.hero-overlap.overlap-lg{ --overlap-amt: -160px; }

/* Item wrapper (se vuoi spacing tra più moduli nella stessa section) */
.hero-overlap .hero-overlap-item + .hero-overlap-item{
  margin-top: clamp(12px, 1.2vw, 16px);
}

/* ===== Contact Feature (solo dentro .hero-overlap) ===== */
.hero-overlap .world-items.contact-feature{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
  gap:40px;
  max-width:90%;
  margin:0 auto;
  padding:clamp(12px,1.5vw,24px) 0;
}

.hero-overlap .world-items.contact-feature .world-item{
  background:#fff;
  padding:30px;
  border-radius:12px;
  text-align:center;
  /* shadow più marcata rispetto a world-block */
  box-shadow:0 18px 48px rgba(0,0,0,.22), 0 6px 18px rgba(0,0,0,.10);
  transition:transform .25s ease, box-shadow .25s ease;
}

.hero-overlap .world-items.contact-feature .world-item:hover{
  transform:translateY(-6px);
  box-shadow:0 26px 64px rgba(0,0,0,.26), 0 8px 24px rgba(0,0,0,.12);
}

.hero-overlap .world-items.contact-feature .world-icon{
  font-size:42px;
  color:#0a5898;
  margin-bottom:18px;
}

.hero-overlap .world-items.contact-feature .world-title{
	position: relative;
  font-size:1.3rem;
  font-weight:700;
  padding-bottom: 12px; /* spazio per la linea */
  margin-bottom: 14px;  /* distacco dal testo */
  color:#222;
}

.hero-overlap .world-items.contact-feature .world-title::after {
  content: "";
  position: absolute;
  left: 30%;
  bottom: 0;
  width: 40%;
  height: 2px;
  background: linear-gradient(to right, transparent, #0a5898, transparent);
  border-radius: 2px;
  opacity: 0.35;
}

.hero-overlap .world-items.contact-feature .world-text{
  font-size:1rem;
  color:#555;
  line-height:1.6;
}
.hero-overlap .world-items.contact-feature .world-text a{
  color:#0a5898; font-weight:600; text-decoration:none;
}
.hero-overlap .world-items.contact-feature .world-text a:hover{
  text-decoration:underline;
}

/* responsive */
@media (max-width:768px){
  .hero-overlap .world-items.contact-feature{ gap:24px; }
  .hero-overlap .world-items.contact-feature .world-item{ padding:22px; }
}


/*PHOTO BLOCK*/
.photo-text-split {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  min-height: 600px;
  align-items: stretch;
}

.photo-text-col {
  width: 50%;
  box-sizing: border-box;
}

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

.photo-content-col {
  display: flex;
  align-items: center;
  padding: 60px;
  background-color: #0a5898;
}

.photo-content-col .custom {
  text-align: left;
}

.photo-content-col h2,
.photo-content-col h3 {
  color: #fff;
  margin-bottom: 20px;
}

.photo-content-col p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #fff;
}
.photo-img-col .mod-custom {
	height: 100%;
}
.photo-img-col p {
	margin: 0;
	height:100%;
}

@media (max-width: 768px) {
  .photo-text-col {
    width: 100%;
  }
  .photo-content-col {
    padding: 30px;
  }
}

/*VM CATEGORY BLOCK*/
/* Titolo sezione prodotti */
.section-header {
  text-align: center;
  margin-bottom: 40px;
}
.section-header h2 {
  display: inline-block;
  background-color: #c80000;
  color: #fff;
  padding: 10px 25px;
  font-size: 2rem;
  letter-spacing: 1px;
  border-radius: 4px;
}

/* Layout griglia responsive */
.vm-featured-categories {
  padding: 100px 0;
  background-color: #f9f9f9;
}
.vm-category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 90%;
  margin: 0 auto;
}

/* Card singola */
.vm-category-wrapper {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 6px;
}
.vm-category-wrapper:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  z-index: 2;
}
.vm-category-box {
	height: 100%;
  background: #fff;
  border-radius: 10px;
  /*overflow: hidden;*/
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  transform-origin: center center;
  will-change: transform;
  display: flex;
  flex-direction: column;
}

.vm-category-box:hover {
  transform: scale(0.90);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  z-index: 2;
}

.vm-category-box a {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* Immagine */
.vm-cat-img {
	position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vm-cat-img img {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  transition: transform 0.3s ease;
}
.vm-cat-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Contenuti */
.vm-cat-content {
position: absolute;
  left: -12px;         /* bandina sporge a sinistra */
  bottom: 16px;        /* distanza dal fondo */
  background: #c80000; /* colore blu bandina, cambia se vuoi rosso #c80000 */
  color: #fff;
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  min-width: 180px;
  max-width: 80%;
  padding: 12px 28px 12px 18px;
  box-shadow: 2px 4px 18px rgba(0,0,0,0.13);
  z-index: 2;
  display: inline-block;
  /* taglia eventuali overflow */
  overflow: hidden;
  text-align: left;
}
.vm-cat-content h3, .vm-cat-content p {
  color: #fff;
  margin: 0 0 2px 0;
  font-size: 1.07em;
  line-height: 1.18;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* mostra 3 righe */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal; /* permette più righe */
}
.vm-cat-content p {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 1024px) {
  .vm-category-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
	.vm-cat-content {
    font-size: 0.95rem;
    min-width: 120px;
    left: -7px;
    padding: 8px 16px 8px 12px;
  }
  .vm-category-grid {
    grid-template-columns: 1fr;
  }
  .section-header h2 {
    font-size: 1.2rem;
    padding: 8px 20px;
  }
}

/*PHOTO 2*/
/* PHOTO BLOCK 2 (testo sinistra, immagine destra) usa lo stesso stile */
.photo-text-split-alt {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  min-height: 600px;
  align-items: stretch;
}

.photo-text-split-alt .photo-text-col {
  width: 50%;
  box-sizing: border-box;
}

.photo-text-split-alt .photo-img-col img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-text-split-alt .photo-content-col {
  display: flex;
  align-items: center;
  padding: 60px;
  background-color: #0a5898;
}

.photo-text-split-alt .photo-content-col .custom {
  text-align: left;
}

.photo-text-split-alt .photo-content-col h2,
.photo-text-split-alt .photo-content-col h3 {
  color: #fff;
  margin-bottom: 20px;
}

.photo-text-split-alt .photo-content-col p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #fff;
}

@media (max-width: 768px) {
  .photo-text-split-alt .photo-text-col {
    width: 100%;
  }
  .photo-text-split-alt .photo-content-col {
    padding: 30px;
  }
  /*INVERSIONE SU MOBILE*/
  .photo-text-split-alt {
      display: flex;
    flex-direction: column-reverse !important; /* prima immagine, poi testo */
    flex-wrap: nowrap !important;
  }

  .photo-text-split-alt .photo-text-col {
    width: 100% !important;
  }
}

/*MAPPA*/
.map {
  margin-top: clamp(24px, 4vw, 48px);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-radius: 0;
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}


.map iframe {
  width: 100%;
  min-height: 420px;
  border: 0;
  display: block;
}

.map .gmap {
  width: 100%;
  min-height: 420px;
}

.map p {
	margin: 0 !important;
}

/* FOOTER */
.site-footer {
  background-color: #0a5898;
  color: #fff;
  font-size: 14px;
  padding: 40px 20px 20px;
}

.footer-top {
  max-width: 90%;
  margin: 0 auto;
  padding-bottom: 30px;
}

.footer-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.footer-col {
  flex: 1 1 calc(25% - 30px);
  min-width: 200px;
}

.footer-col h3,
.footer-col h4 {
  color: #fff;
  margin-bottom: 15px;
}

.footer-col a {
  color: #fff;
  text-decoration: none;
}

.footer-col a:hover {
  text-decoration: underline;
}
.footer-col p {
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
}

.footer-col hr {
	background: #fff;
}

.footer-bottom {
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 20px;
  font-size: 13px;
}

.footer-bottom p {
	font-size: 14px;
	color: #fff;
}
.footer-bottom a {
	font-size: 14px;
	color: #fff;
}
.footer-bottom a:hover {
	text-decoration: underline;
}

.menu-footer ul.mod-menu li a,
.menu-footer ul.mod-menu li span {
  font-size: 20px !important;
}
.menu-footer ul.mod-menu li {
	padding-bottom: 15px;
}

/* Responsive */
@media (max-width: 768px) {
  .footer-cols {
    flex-direction: column;
  }

  .footer-col {
    flex: 1 1 100%;
  }
  
  .menu-toggle {
    display: block;
  }

  .main-menu {
    display: none !important;
  }
  .site-header {
	position: unset;
	width: 100%;
	background-color: #0a5898;
	padding: 0 3%;
	box-sizing: border-box;
  }
  .menu-toggle {
    display: block;
  }
  .main-menu {
    display: none;
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    background-color: #fff;
    flex-direction: column;
    padding: 20px 0;
    z-index: 1001;
  }
  .main-menu.active {
    display: flex;
  }
  .main-menu > ul {
    flex-direction: column;
    gap: 15px;
    padding-left: 0;
  }
  .page-header {
	  padding: 40px 0;
  }
}
/* ===== Mobile accordion per mod_menu ===== */
/* ===== BASE: nascondi il toggle di default (desktop) ===== */
.submenu-toggle { display:none; }

/* ===== MOBILE ===== */
@media (max-width: 992px){
  #mobileMenuOverlay .mod-menu{
    display:block !important;
    width:100%;
    column-count:initial !important;
    column-gap:0 !important;
  }
  #mobileMenuOverlay .mod-menu > li{
    display:block;
    width:100%;
  }
  #mobileMenuOverlay .mod-menu > li > ul,
  #mobileMenuOverlay .mod-menu > li > ul.mod-menu__sub{
    left:auto !important;
    width:auto !important;
    max-width:none !important;
    padding-inline:0 !important;
  }
  #mobileMenuOverlay .mod-menu__sub > li > a.menu-link-row,
  #mobileMenuOverlay .mod-menu__sub > li > span.mod-menu__heading{
    display:block !important;
    width:100%;
    padding:12px 14px !important;
    box-sizing:border-box;
  }
  #mobileMenuOverlay .mod-menu__sub > li > a.menu-link-row .menu-row,
  #mobileMenuOverlay .mod-menu__sub > li > .menu-row{
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;
    gap:10px;
    width:100%;
    padding:0 !important;
    margin:0;
  }
  #mobileMenuOverlay .mod-menu__sub > li > a.menu-link-row .menu-col,
  #mobileMenuOverlay .mod-menu__sub > li > .menu-row .menu-col{
    display:flex;
    flex-direction:column;
    width:100%;
    min-width:0;
  }
  #mobileMenuOverlay .mod-menu__sub > li > a.menu-link-row .menu-text,
  #mobileMenuOverlay .mod-menu__sub > li > .menu-row .mod-menu__heading{
    display:block;
    width:100%;
    font-size:16px;
    line-height:1.35;
    font-weight:600;
    text-align:left;
    color:#fff !important;
  }
  #mobileMenuOverlay .mod-menu__sub > li > a.menu-link-row .menu-item-note{
    margin-top:4px;
    font-size:14px;
    line-height:1.35;
    text-align:left;
    color:rgba(255,255,255,.88) !important;
  }
  #mobileMenuOverlay .mod-menu__sub > li.deeper.parent > ul.mod-menu__sub{
    margin:0 !important;
    padding:0 0 0 18px !important;
    border-left:0 !important;
  }
  /* stile uniforme a TUTTE le voci (padre incluso) */
  #mainMenu .mod-menu > li > a,
  #mainMenu .mod-menu > li > span,
  #mobileMenuOverlay .mod-menu > li > a,
  #mobileMenuOverlay .mod-menu > li > span{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 14px; line-height:1.2; font-weight:inherit; /* niente bold forzato */
    text-decoration:none;
  }

  /* mostra il piccolo + a destra SOLO in mobile */
  #mainMenu .submenu-toggle,
  #mobileMenuOverlay .submenu-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:auto; height:auto; padding:0; margin-left:.5rem;
    border:0; background:transparent; cursor:pointer;
    color:#fff; /* bianco sul tuo fondo scuro */
    font-size:14px; line-height:1; /* piccolo */
  }
  #mainMenu .submenu-toggle:focus-visible,
  #mobileMenuOverlay .submenu-toggle:focus-visible{
    outline:2px solid rgba(255,255,255,.7); outline-offset:2px;
  }

  /* sottovoci: testo bianco e rientro */
  #mainMenu .mod-menu__sub > li > a,
  #mainMenu .mod-menu__sub > li > span,
  #mobileMenuOverlay .mod-menu__sub > li > a,
  #mobileMenuOverlay .mod-menu__sub > li > span{
    color:#fff;
  }
  #mainMenu .mod-menu__sub > li > a:hover,
  #mobileMenuOverlay .mod-menu__sub > li > a:hover{
    color:#fff; text-decoration:underline;
  }

  /* livello 3: ulteriore rientro */
  #mainMenu .mod-menu__sub .mod-menu__sub > li > a,
  #mainMenu .mod-menu__sub .mod-menu__sub > li > span,
  #mobileMenuOverlay .mod-menu__sub .mod-menu__sub > li > a,
  #mobileMenuOverlay .mod-menu__sub .mod-menu__sub > li > span{
    padding-left:46px;
  }

  /* pannelli mega desktop disattivati in mobile (se presenti) */
  #mainMenu .mod-menu li.parent > ul,
  #mobileMenuOverlay .mod-menu li.parent > ul{
    position:static; width:auto; background:transparent; box-shadow:none; border-radius:0;
    grid-template-columns:1fr !important; gap:0; padding:0; margin:0;
    opacity:1; visibility:visible; transform:none;
  }

  /* comportamento accordion: nascosto/aperto */
  #mainMenu .mod-menu__sub,
  #mobileMenuOverlay .mod-menu__sub{ display:none; }
  #mainMenu li.is-open > .mod-menu__sub,
  #mobileMenuOverlay li.is-open > .mod-menu__sub{ display:block; }
 
	#mobileMenuOverlay .menu-row {
		padding-left: 10px;
	}
}
/* ===== Overlay mobile: fade + leggero slide ===== */
#mobileMenuOverlay {
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
#mobileMenuOverlay.active {
  opacity: 1;
  visibility: visible;
}
#mobileMenuOverlay .mod-menu {
  transform: translateY(12px);
  transition: transform .25s ease;
}
#mobileMenuOverlay.active .mod-menu {
  transform: translateY(0);
}

/* ===== Accordion sottomenu (mobile) ===== */
@media (max-width: 992px){
  #mainMenu .mod-menu__sub,
  #mobileMenuOverlay .mod-menu__sub {
    transition: max-height .28s ease, opacity .2s ease;
    overflow: hidden;
  }
  /* chiuso */
  #mainMenu .mod-menu__sub,
  #mobileMenuOverlay .mod-menu__sub {
    max-height: 0;
    opacity: 0;
  }
  /* aperto */
  #mainMenu li.is-open > .mod-menu__sub,
  #mobileMenuOverlay li.is-open > .mod-menu__sub {
    max-height: 800px; /* un valore sufficiente a contenere i tuoi link */
    opacity: 1;
  }
}
/* --- FIX transizione submenu mobile (override del display) --- */
@media (max-width: 992px){
  /* Tieni SEMPRE display:block, così la transizione su max-height funziona */
  #mainMenu .mod-menu__sub,
  #mobileMenuOverlay .mod-menu__sub{
    display:block !important;      /* <-- override del display:none precedente */
    overflow:hidden;
    max-height:0;                  /* chiuso */
    opacity:0;
    transition:max-height .28s ease, opacity .2s ease;
  }

  /* Stato aperto: solo altezza/opacità cambiano (animabili) */
  #mainMenu li.is-open > .mod-menu__sub,
  #mobileMenuOverlay li.is-open > .mod-menu__sub{
    max-height:800px;              /* valore “sufficientemente grande” */
    opacity:1;
  }
}

/* (opzionale ma carino) leggero fade/slide del contenuto menu nell’overlay */
#mobileMenuOverlay .mod-menu{
  transform:translateY(10px);
  transition:transform .25s ease;
}
#mobileMenuOverlay.active .mod-menu{
  transform:translateY(0);
}
/* Menu mobile: pannello laterale scrollabile, pagina bloccata dietro */
/* ===== Overlay mobile fullscreen ===== */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;                /* copri tutta larghezza */
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: #0a5898;
  z-index: 9999;
  transition: transform .35s ease, opacity .35s ease;
  transform: translateX(100%); /* chiuso: fuori a destra */
  opacity: 0;
  overflow-y: auto;        /* scroll solo menu */
  -webkit-overflow-scrolling: touch;
  padding: 60px 20px 80px; /* spazio sopra e sotto */
  box-sizing: border-box;
}
.mobile-menu-overlay.active {
  transform: translateX(0);
  opacity: 1;
}

/* ===== Voci menu uniformi ===== */
.mobile-menu-overlay ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mobile-menu-overlay li {
  border-bottom: 1px solid rgba(255,255,255,.35); /* separatore bianco */
}
.mobile-menu-overlay li:last-child {
  border-bottom: none;
}
.mobile-menu-overlay li a,
.mobile-menu-overlay li span {
  display: block;
  /*padding: 18px 8px;*/
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  line-height: 1.3;
}

/* ===== Pulsante X ===== */
.mobile-menu-close {
  position: fixed;
  top: 16px;
  right: 16px;
  font-size: 34px;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10000; /* sopra tutto */
}

@media (max-width: 992px){
  #mobileMenuOverlay.mobile-menu-overlay{
    padding: 56px 20px 96px;
  }

  #mobileMenuOverlay.mobile-menu-overlay .mod-menu,
  #mobileMenuOverlay.mobile-menu-overlay .mod-menu ul,
  #mobileMenuOverlay.mobile-menu-overlay .mod-menu li{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    column-count:initial !important;
    column-gap:0 !important;
    break-inside:auto !important;
  }

  #mobileMenuOverlay.mobile-menu-overlay .mod-menu li{
    position:static !important;
    float:none !important;
    clear:both;
  }

  #mobileMenuOverlay.mobile-menu-overlay .mod-menu li > a,
  #mobileMenuOverlay.mobile-menu-overlay .mod-menu li > span.mod-menu__heading,
  #mobileMenuOverlay.mobile-menu-overlay .mod-menu li > .menu-row,
  #mobileMenuOverlay.mobile-menu-overlay .mod-menu li > a.menu-link-row{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    width:100% !important;
    max-width:none !important;
    padding:14px 0 !important;
    margin:0 !important;
    padding-right:42px !important;
    text-align:left !important;
    box-sizing:border-box;
    position:relative;
  }

  #mobileMenuOverlay.mobile-menu-overlay .mod-menu > li{
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    border-bottom:1px solid rgba(255,255,255,.18);
  }

  #mobileMenuOverlay.mobile-menu-overlay .mod-menu > li > a,
  #mobileMenuOverlay.mobile-menu-overlay .mod-menu > li > span.mod-menu__heading{
    font-size:18px !important;
    font-weight:700 !important;
    line-height:1.2 !important;
    letter-spacing:0 !important;
    text-transform:none !important;
    height:auto !important;
    min-height:0 !important;
    display:block !important;
    padding:16px 56px 16px 0 !important;
  }

  #mobileMenuOverlay.mobile-menu-overlay .mod-menu li > a.menu-link-row{
    gap:0 !important;
  }

  #mobileMenuOverlay.mobile-menu-overlay .mod-menu li > a.menu-link-row .menu-row,
  #mobileMenuOverlay.mobile-menu-overlay .mod-menu li > .menu-row{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    gap:12px !important;
    width:100% !important;
    padding:0 !important;
    margin:0 !important;
  }

  #mobileMenuOverlay.mobile-menu-overlay .mod-menu li > a.menu-link-row .menu-col,
  #mobileMenuOverlay.mobile-menu-overlay .mod-menu li > .menu-row .menu-col{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    min-width:0 !important;
  }

  #mobileMenuOverlay.mobile-menu-overlay .menu-row .menu-col > a,
  #mobileMenuOverlay.mobile-menu-overlay .menu-row .menu-col > span.mod-menu__heading,
  #mobileMenuOverlay.mobile-menu-overlay .menu-text,
  #mobileMenuOverlay.mobile-menu-overlay .mod-menu li > span.mod-menu__heading{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    text-align:left !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:anywhere;
    color:#fff !important;
    text-transform:none !important;
  }

  #mobileMenuOverlay.mobile-menu-overlay .mod-menu__sub > li > a.menu-link-row,
  #mobileMenuOverlay.mobile-menu-overlay .mod-menu__sub > li > span.mod-menu__heading,
  #mobileMenuOverlay.mobile-menu-overlay .mod-menu__sub > li > .menu-row{
    font-size:16px !important;
    font-weight:600 !important;
    line-height:1.35 !important;
    text-transform:none !important;
    letter-spacing:0 !important;
  }

  #mobileMenuOverlay.mobile-menu-overlay .menu-text{
    font-size:16px !important;
    font-weight:600 !important;
    line-height:1.35 !important;
    text-transform:none !important;
  }

  #mobileMenuOverlay.mobile-menu-overlay .menu-item-note{
    display:block !important;
    margin-top:4px !important;
    text-align:left !important;
    font-size:14px !important;
    line-height:1.35 !important;
    color:rgba(255,255,255,.88) !important;
    white-space:normal !important;
  }

  #mobileMenuOverlay.mobile-menu-overlay .menu-icon,
  #mobileMenuOverlay.mobile-menu-overlay .menu-icon-lg{
    flex:0 0 auto;
  }

  #mobileMenuOverlay.mobile-menu-overlay .submenu-toggle{
    position:absolute !important;
    right:2px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:24px !important;
    height:24px !important;
    margin:0 !important;
    padding:0 !important;
  }

  #mobileMenuOverlay.mobile-menu-overlay .submenu-toggle i{
    font-size:13px;
  }

  #mobileMenuOverlay.mobile-menu-overlay .mod-menu > li > .mod-menu__sub,
  #mobileMenuOverlay.mobile-menu-overlay .mod-menu__sub > li > .mod-menu__sub{
    position:static !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
    width:100% !important;
    margin:0 !important;
    padding:0 0 0 18px !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    border-radius:0 !important;
  }

  #mobileMenuOverlay.mobile-menu-overlay .mod-menu > li > .mod-menu__sub{
    padding:0 !important;
  }

  #mobileMenuOverlay.mobile-menu-overlay .mod-menu__sub .mod-menu__sub{
    padding:6px 0 10px 18px !important;
    margin:4px 0 8px !important;
    border-left:1px solid rgba(255,255,255,.18) !important;
  }

  #mobileMenuOverlay.mobile-menu-overlay .mod-menu__sub{
    display:none !important;
    max-height:0 !important;
    opacity:0 !important;
    overflow:hidden !important;
    transition:none !important;
  }

  #mobileMenuOverlay.mobile-menu-overlay li.is-open > .mod-menu__sub{
    display:block !important;
    max-height:none !important;
    opacity:1 !important;
    overflow:visible !important;
  }

  #mobileMenuOverlay.mobile-menu-overlay .mod-menu__sub > li{
    border-bottom-color:rgba(255,255,255,.12);
  }

  #mobileMenuOverlay.mobile-menu-overlay .mod-menu__sub > li > a.menu-link-row,
  #mobileMenuOverlay.mobile-menu-overlay .mod-menu__sub > li > span.mod-menu__heading,
  #mobileMenuOverlay.mobile-menu-overlay .mod-menu__sub > li > .menu-row{
    padding-top:12px !important;
    padding-bottom:12px !important;
  }

  #mobileMenuOverlay.mobile-menu-overlay .mod-menu__sub .mod-menu__sub > li > a,
  #mobileMenuOverlay.mobile-menu-overlay .mod-menu__sub .mod-menu__sub > li > span.mod-menu__heading,
  #mobileMenuOverlay.mobile-menu-overlay .mod-menu__sub .mod-menu__sub > li > a.menu-link-row{
    padding-top:10px !important;
    padding-bottom:10px !important;
    font-size:14px !important;
    font-weight:500 !important;
    line-height:1.35 !important;
  }

  #mobileMenuOverlay.mobile-menu-overlay li.deeper.parent > a .menu-text,
  #mobileMenuOverlay.mobile-menu-overlay li.deeper.parent > span.mod-menu__heading,
  #mobileMenuOverlay.mobile-menu-overlay li.deeper.parent > .menu-row .mod-menu__heading,
  #mobileMenuOverlay.mobile-menu-overlay li.deeper.parent > a.menu-link-row .menu-text{
    padding-right:16px !important;
  }

  #mobileMenuOverlay.mobile-menu-overlay .mod-menu > li.deeper.parent > a,
  #mobileMenuOverlay.mobile-menu-overlay .mod-menu > li.deeper.parent > span.mod-menu__heading,
  #mobileMenuOverlay.mobile-menu-overlay .mod-menu__sub > li.deeper.parent > a.menu-link-row,
  #mobileMenuOverlay.mobile-menu-overlay .mod-menu__sub > li.deeper.parent > span.mod-menu__heading,
  #mobileMenuOverlay.mobile-menu-overlay .mod-menu__sub > li.deeper.parent > .menu-row{
    padding-right:56px !important;
  }

  #mobileMenuOverlay.mobile-menu-overlay .mod-menu > li > a .menu-text,
  #mobileMenuOverlay.mobile-menu-overlay .mod-menu > li > span.mod-menu__heading,
  #mobileMenuOverlay.mobile-menu-overlay .mod-menu > li > .menu-row .mod-menu__heading{
    max-width:calc(100% - 28px);
  }
}

/*VIRTUEMART*/
/*VIRTUEMART*/
/* ===== Layout base (indipendente da Bootstrap) ===== */
.vm-category { --vm-blue: #0b4ea2; --vm-card-radius: 12px; --vm-card-border: #e6e8ec; }
.vm-cat-body { display:block; }

/* Colonne: sidebar fissa + contenuto fluido */
.vm-cat-body.has-sidebar{
  display:grid;
  grid-template-columns: 33% 1fr;   /* sidebar più larga */
  gap:24px;
}

/* Sidebar “appoggiata” */
.vm-cat-sidebar{ align-self:start; }

/* Mobile: stack */
@media (max-width: 767.98px){
  .vm-cat-body.has-sidebar{ grid-template-columns:1fr; }
}

/* ================== SIDEBAR ================== */

/* Wrapper sidebar con spaziatura tra moduli */
.vm-cat-sidebar { display:flex; flex-direction:column; gap:24px; }

/* Box modulo sidebar */
.vm-cat-sidebar .moduletable{
  background:#fff;
  border:1px solid #e6e8ec;
  border-radius:10px;
  padding:1rem 1.2rem;     /* tuo padding */
  /*min-height:400px;*/        /* richiesta */
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}

/* Titolo con border-bottom (sempre visibile) */
.vm-cat-sidebar .module-title,
.vm-cat-sidebar h3{
  display:block !important;
  font-size:1.3rem;
  font-weight:800;
  text-transform:uppercase;
  color:#0a5898;
  margin:0 0 .75rem;
  padding-bottom:.5rem;
  border-bottom:2px solid #e6e8ec;
}

/* Liste con separatore semplice */
.vm-cat-sidebar ul{ margin:0; padding:0; list-style:none; }
.vm-cat-sidebar ul li{ padding:.55rem 0; border-bottom:1px solid #e6e8ec; }
.vm-cat-sidebar ul li:last-child{ border-bottom:none; }
.vm-cat-sidebar ul li a{
  color:#333; text-decoration:none; font-size:1.1rem;
  transition:color .2s, transform .15s;
}
.vm-cat-sidebar ul li a:hover{ color:#0a5898; transform:translateX(2px); }

/* Mobile: niente min-height forzato sui moduli */
@media (max-width: 767.98px){
  .vm-cat-sidebar .moduletable{ min-height:auto; }
}

/* Se NON c'è sidebar, il contenuto occupa tutta la larghezza */
.vm-cat-products--full{ width:100%; }

/* ===== Ratio 1:1 (se Bootstrap non è presente) ===== */
.ratio{ position:relative; width:100%; }
.ratio::before{ content:""; display:block; padding-top:100%; } /* 1:1 */
.ratio > *{ position:absolute; inset:0; }

/* ================== GRIGLIA PRODOTTI ================== */

/* Griglia prodotti: colonne da VM (fallback 3) */
.vm-products-grid{
  --cols:3;
  display:grid;
  grid-template-columns:repeat(var(--cols), minmax(0,1fr));
  gap:16px;
}

/* Mobile: 1 per riga */
@media (max-width: 575.98px){
  .vm-products-grid{ grid-template-columns:1fr !important; }
}

/* ===== Card prodotto ===== */
.vm-card{
  display:flex; flex-direction:column;
  background:#fff;
  border:1px solid var(--vm-card-border);
  border-radius:var(--vm-card-radius);
  overflow:hidden; text-decoration:none; color:inherit;
  box-shadow:0 4px 10px rgba(0,0,0,.08);
  max-height:400px;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
.vm-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.18);
  border-color:transparent; background-color:var(--vm-blue);
}

/* Media: fill + zoom-in */
.vm-card-media{
  background:#f5f7fa;
  aspect-ratio:1 / 1;
  max-height:calc(400px - 72px); /* 400 card - 72 titolo */
}
.vm-card-media-inner,
.vm-card-media-inner img,
.vm-card-media-inner picture,
.vm-card-media-inner .img-thumbnail{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover !important; display:block; border:0 !important;
  transition:transform .35s ease;
}
.vm-card:hover .vm-card-media-inner img,
.vm-card:hover .vm-card-media-inner picture,
.vm-card:hover .vm-card-media-inner .img-thumbnail{ transform:scale(1.06); }

/* Body / titoli */
.vm-card-body{ padding:12px 14px 14px; min-height:72px; }
.vm-card-title{
  margin:0; font-size:1.2rem; line-height:1.25; font-weight:600;
  color:#0a5898; transition:color .18s ease;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
  min-height:calc(1.25em * 2);
}
.vm-card:hover .vm-card-title{ color:#fff; }

.vm-card:hover { text-decoration:none !important; }

@media (max-width: 575.98px){
  .vm-products-grid{
    padding-bottom:10px;
  }

  .vm-card{
    max-height:none;
  }

  .vm-card-media{
    max-height:none;
  }

  .vm-card-body{
    padding-bottom:16px;
    min-height:unset;
  }

  .vm-card-title{
    line-height:1.3;
    min-height:0;
    overflow:visible;
    display:block;
    -webkit-line-clamp:unset;
    padding-bottom:2px;
  }
}

/* ===== Paginazione (semplice) ===== */
.vm-pagination .pagination, .vm-pagination .pagination li{ margin:0; }
.vm-pagination .pagination a, .vm-pagination .pagination span{
  border-radius:999px; padding:8px 14px; display:inline-block;
}

/* Padding del blocco: tieni il tuo */
.vm-cat-body{ padding-inline:16px; }
@media (min-width: 992px){ .vm-cat-body{ padding:5%; } }

/* PAGINA SINGOLO ARTICOLO */
/* ====== VM Product – Hero ====== */
.vmart-product { max-width: 100%; }
.prod-hero{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
}
@media (max-width: 991.98px){
  .prod-hero{ grid-template-columns: 1fr; }
}

/* Media */
.prod-media { position: relative; }
.prod-media-main{
  background: #f5f7fa;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
  display:flex; align-items:center; justify-content:center;
  aspect-ratio: 4 / 3;
}
.prod-media-main img,
.prod-media-main picture,
.prod-media-main .img-thumbnail{
  width:100%; height:100%; object-fit:contain; display:block; border:0 !important;
}
.prod-thumbs{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:12px;
}
.prod-thumb{
  background:#fff; border:1px solid #e6e8ec; border-radius:8px; padding:6px;
  cursor:pointer; line-height:0; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.prod-thumb:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.10); }
.prod-thumb.is-active{ border-color:#0a5898; box-shadow:0 0 0 2px rgba(10,88,152,.15); }
.prod-thumb img{ width:72px; height:72px; object-fit:cover; display:block; }

/* Info */
.prod-info{ padding: 4%;}
.prod-title{
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3.2rem);
  color:#0a5898; font-weight:900; line-height:1.15; margin: 0 0 .4rem;
}
.prod-cat-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 0 0 1rem;
}
.prod-cat-tag{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:2px 12px;
  border-radius:15px;
  font-size:.9rem;
  font-weight:700;
  line-height:1.2;
  text-decoration:none;
  color:#fff;
}
.prod-cat-tag:hover,
.prod-cat-tag:focus{
  color:#fff;
  text-decoration:none;
  filter:brightness(.95);
}
.prod-cat-tag.cat-id-1{ background:#d7263d; }
.prod-cat-tag.cat-id-2{ background:#f46036; }
.prod-cat-tag.cat-id-3{ background:#2e294e; }
.prod-cat-tag.cat-id-4{ background:#1b998b; }
.prod-cat-tag.cat-id-5{ background:#c5a000; }
.prod-cat-tag.cat-id-6{ background:#5c7cfa; }
.prod-cat-tag.cat-id-7{ background:#8f2d56; }
.prod-cat-tag.cat-id-8{ background:#009688; }
.prod-cat-tag.cat-id-9{ background:#ff6f61; }
.prod-cat-tag.cat-id-10{ background:#6a4c93; }
.prod-cat-tag.cat-id-11{ background:#1982c4; }
.prod-cat-tag.cat-id-12{ background:#2b9348; }
.prod-cat-tag.cat-id-13{ background:#e36414; }
.prod-cat-tag.cat-id-14{ background:#4d908e; }
.prod-cat-tag.cat-id-15{ background:#a44a3f; }
.prod-cat-tag.cat-id-16{ background:#7b2cbf; }
.prod-cat-tag.cat-id-17{ background:#3a86ff; }
.prod-cat-tag.cat-id-18{ background:#6d597a; }
.prod-cat-tag.cat-id-19{ background:#ef476f; }
.prod-cat-tag.cat-id-20{ background:#386641; }
.prod-cat-tag[class*="cat-id-"]{ box-shadow: inset 0 -1px 0 rgba(255,255,255,.12); }
.prod-plus{
  display:grid; gap:8px; margin:.6rem 0 1rem; padding:0; list-style:none;
}
.prod-plus li{ display:flex; align-items:flex-start; gap:8px; font-weight:600; color:#0a5898; }
.prod-plus .check{ line-height:1; }

/* Descrizione breve */
.prod-short{
  color:#222;
  font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.35rem);
  line-height:1.7;
  margin: 0 0 1.2rem;
}
.prod-cta{ display:flex; gap:10px; margin-bottom: 1rem; }

/* Accordion */
.prod-acc .accordion-item{
  border:1px solid #e6e8ec; border-radius:10px; overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.06); margin-bottom:10px;
}
.prod-acc .accordion-button{
  font-weight:800; color:#0a5898; background:#fff;
}
.prod-acc .accordion-button:focus{ box-shadow: 0 0 0 .2rem rgba(10,88,152,.15); }
.prod-acc .accordion-button:not(.collapsed){ color:#0a5898; background:#f2f7fc; }
.prod-acc .accordion-body{ background:#fff; }

/* Tech list */
.prod-tech dt{ font-weight:700; color:#0a5898; }
.prod-tech dd{ margin-bottom:.5rem; }

/* Documenti */
.prod-docs{ list-style:none; padding:0; margin:0; }
.prod-docs li + li{ margin-top:.5rem; }
.prod-docs a{ color:#0a5898; font-weight:600; text-decoration:none; }
.prod-docs a:hover{ text-decoration:underline; }

/* Descrizione estesa */
.prod-hero > .prod-desc {
  grid-column: 1 / -1; /* occupa entrambe le colonne */
}
.prod-desc{
padding: clamp(16px, 2vw, 28px) clamp(28px, 6vw, 120px);
  /*border-top: 1px solid #e6e8ec;*/
}
.prod-desc h2, .prod-desc h3{ color:#0a5898; }
.prod-desc table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  margin:24px 0;
  border:1px solid #d9e4ea;
  border-radius:8px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}
.prod-desc table thead th{
  background:#0a5898;
  color:#fff;
  font-size:.95rem;
  font-weight:700;
  line-height:1.3;
  padding:14px 12px;
  text-align:left;
  border-right:1px solid rgba(255,255,255,.18);
  vertical-align:middle;
}
.prod-desc table thead th:last-child{ border-right:0; }
.prod-desc table tbody td{
  padding:12px;
  font-size:.95rem;
  line-height:1.45;
  color:#17324d;
  border-top:1px solid #d9e4ea;
  vertical-align:top;
}
.prod-desc table tbody tr:not(:has(td[colspan])) td{
  background:#b3e7fb;
}
.prod-desc table tbody tr:has(td[colspan]) td{
  background:#f7fbfe;
  color:#35516a;
  font-style:italic;
}
.prod-desc table tbody tr td + td{
  border-left:1px solid rgba(23,50,77,.08);
}
.prod-desc table tbody tr:not(:has(td[colspan])) td:first-child{
  font-weight:700;
}
@media (max-width: 991px){
  .prod-desc{ overflow-x:auto; }
  .prod-desc table{
    min-width:780px;
  }
}
@media (max-width: 767px){
  .prod-desc{
    overflow-x:visible;
    padding-inline:16px;
  }
  .prod-desc table{
    min-width:0;
    border:0;
    box-shadow:none;
    background:transparent;
  }
  .prod-desc table thead{
    display:none;
  }
  .prod-desc table tbody{
    display:block;
  }
  .prod-desc table tbody tr{
    display:block;
  }
  .prod-desc table tbody tr.is-data-row{
    margin:0 0 14px;
    border:1px solid #d9e4ea;
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 10px 24px rgba(0,0,0,.05);
    background:#fff;
  }
  .prod-desc table tbody tr.is-data-row td{
    display:grid;
    grid-template-columns:minmax(110px, 36%) 1fr;
    gap:12px;
    border-left:0;
    border-top:1px solid rgba(23,50,77,.08);
    padding:10px 12px;
    background:#b3e7fb;
    align-items:start;
  }
  .prod-desc table tbody tr.is-data-row td:first-child{
    border-top:0;
  }
  .prod-desc table tbody tr.is-data-row td::before{
    content:attr(data-label);
    font-weight:700;
    color:#0a5898;
    line-height:1.3;
  }
  .prod-desc table tbody tr.is-note-row{
    margin:0 0 14px;
  }
  .prod-desc table tbody tr.is-note-row td{
    display:block;
    border:1px solid #d9e4ea;
    border-radius:8px;
    padding:12px 14px;
    background:#f7fbfe;
    font-style:italic;
  }
}

.video-embed{
  aspect-ratio: 16 / 9;   /* cambia se vuoi 4/3, 21/9, ecc. */
}
.video-embed iframe{
  height:100%;
  border:0;
}

/* CTA con icona */
.btn-info-cta{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:800;
  letter-spacing: .2px;
  box-shadow: 0 10px 26px rgba(10,88,152,.25);
  border-radius: 999px;
  padding: 10px 18px;
}
/* === CTA "Richiedi info" con Font Awesome === */
.btn-info-cta{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:800; letter-spacing:.2px;
  border-radius:15px;
  padding:10px 18px;
  background:#fff;            /* bg brand */
  color:#0a5898;
  border:1px solid #0a5898;      /* bordo in tinta */
  text-decoration:none;          /* no underline */
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn-info-cta i{ font-size:1.05em; line-height:1; } /* icona FA */
.btn-info-cta:hover,
.btn-info-cta:focus{
  background:#0a5898;            /* invariato in hover */
  color:#fff;                    /* testo+icona bianchi */
  border-color:#0a5898;
  text-decoration:none;          /* no underline */
  transform: translateY(-1px);
  box-shadow:0 10px 24px rgba(10,88,152,.25);
}
.btn-info-cta:active{
  transform:none; box-shadow:none;
}
.btn-info-cta:focus-visible{
  outline:2px solid #0a5898;
  outline-offset:2px;
}

/*ACCORDION*/
/* ===== Accordion CSS (puro <details>/<summary>) ===== */
.c-acc { display: grid; gap: 10px; margin-top: 12px; }
.c-acc-item {
  border: 1px solid #e6e8ec;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
  overflow: hidden;
}

/* Summary senza marker nativo */
.c-acc-summary { list-style: none; }
.c-acc-summary::-webkit-details-marker { display: none; }

.c-acc-summary {
  position: relative;
  cursor: pointer;
  font-weight: 800;
  color: #0a5898;
  padding: 16px 56px 16px 18px;
  background: #fff;
  transition: background-color .2s ease;
  outline: none;
  user-select: none;
}
.c-acc-item[open] > .c-acc-summary { background: #f2f7fc; }

/* Caret */
.c-acc-summary::after{
  content: "›";
  position: absolute;
  right: 18px; top: 50%;
  transform: translateY(-50%) rotate(90deg);
  font-size: 20px; line-height: 1;
  color: currentColor;
  transition: transform .2s ease;
}
.c-acc-item[open] > .c-acc-summary::after{
  transform: translateY(-50%) rotate(-90deg);
}

/* Pannello */
.c-acc-panel{
  border-top: 1px solid #e6e8ec;
  padding: 16px 20px;
  background: #fff;
}

/* ===== Bottoni PDF ===== */
.doc-btns{
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}
@media (min-width: 576px){
  .doc-btns{
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
}

.btn-doc{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 2px solid #0a5898;
  background: #fff;
  color: #0a5898;
  font-weight: 800;
  text-decoration: none;           /* niente underline */
  box-shadow: 0 8px 18px rgba(10,88,152,.12);
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.btn-doc i{ color: currentColor; font-size: 1.1em; }
.btn-doc:hover,
.btn-doc:focus{
  background: #0a5898;
  color: #fff;
  text-decoration: none;           /* niente underline all'hover */
  box-shadow: 0 10px 22px rgba(10,88,152,.22);
  transform: translateY(-1px);
}
.btn-doc:active{ transform: translateY(0); }
a.btn-doc,
a.btn-doc:visited,
a.btn-doc:hover,
a.btn-doc:focus,
a.btn-doc:active{
  text-decoration: none !important;
}
/* Pannello: animiamo l'altezza (serve overflow hidden) */
.c-acc-panel{
  background:#fff;
  border-top:1px solid #e6e8ec;
  overflow:hidden;              /* fondamentale per height */
  padding:0 20px;               /* padding laterale sempre visibile */
  /* niente transition qui: la gestiamo via JS per affidabilità */
}

/* padding verticale solo quando aperto (evita "spazio" quando è chiuso) */
.c-acc-item:not([open]) > .c-acc-panel{ padding-top:0; padding-bottom:0; }
.c-acc-item[open]        > .c-acc-panel{ padding-top:16px; padding-bottom:16px; }

/* caret già con transition, ok così */
.c-acc-summary::after{ transition: transform .22s ease; }