:root{
  /* Softer palette (reduced contrast/saturation) */
  --primary: #12365f; /* calmer navy */
  --whatsapp-green: #25D366; /* keep WhatsApp green */
  --dark-bg: #0f2f55; /* softer dark */
  --muted: #f4f6f9; /* softer off-white */
  --text-dark: #0f172a; /* neutral text (less "blue everywhere") */
  --radius:12px;
  --transition:200ms ease;
  --max-width:1200px;
}

/* RESET (minimo) */
*{box-sizing:border-box}
html,body{height:100%;max-width:100%;overflow-x:hidden}
body{
  margin:0;
  padding-top: 0; /* Rimuoviamo il padding-top */
  font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  color:var(--text-dark);
  background:var(--muted);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}

/* Top bar */
.topbar{
  background:var(--dark-bg);
  color:#fff;
  font-size: clamp(0.78rem, 2.4vw, 1rem);
  position: relative;
  z-index: 41;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  min-height: 40px;
  display: flex;
  align-items: center;
}
.topbar .inner{
  max-width:var(--max-width);
  width: 100%;
  margin:0 auto;
  padding: 10px 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}
@media (max-width: 700px) {
  .topbar .inner {
    padding: 6px 10px;
  }
}
.topbar .hours{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  overflow: hidden;
}
.topbar-clock{
  flex-shrink: 0;
  opacity: 0.8;
}
.topbar #openingHours {
  line-height: 1.4;
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: 0.01em;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.status-label {
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  color: #fff;
  transition: background 0.2s ease;
}
.status-label.open {
  background: #16a34a;
}
.status-label.closed {
  background: #dc2626;
}

/* On mobile, status label stays visible */
@media (max-width: 700px) {
  .status-label { display: inline-flex; }
}
.topbar-clock.open{
  stroke: #86efac;
  opacity: 1;
}
/* Header (sticky) */
header.site-header{
  background:var(--muted);
  box-shadow:0 6px 18px rgba(0,0,0,0.04);
  position:sticky;
  top:0;
  z-index:40;
}
.nav-inner{
  max-width:var(--max-width);
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:20px;
  padding:14px 16px;
}
.logo{
  display:flex;
  align-items:center;
  gap:10px;
}
/* logo mark: replaced by an image-based logo (see HTML) */
.logo .mark{ display:none; }
.logo-mark{
  width:44px;
  height:44px;
  border-radius:8px;
  object-fit:contain;
  display:inline-block;
  box-shadow:0 6px 18px rgba(15,23,42,0.10);
  background:transparent;
}
.logo h1,.logo .logo-title{margin:0;font-size:1.05rem;line-height:1;color:var(--text-dark);font-weight:700}
nav.main-nav{
  margin-left:20px;
  flex:1;
}
nav.main-nav > ul{
  list-style:none;margin:0;padding:0;display:flex;gap:18px;align-items:center;justify-content:center;
  flex-wrap:nowrap;
}
nav.main-nav a{
  display:inline-block;padding:6px 10px;border-radius:8px;color:var(--text-dark);font-weight:600;font-size:0.95rem;
  transition:background var(--transition),color var(--transition);
}
nav.main-nav a:hover{background:rgba(15,23,42,0.04);color:var(--primary)}
.header-actions{
  display:flex;gap:12px;align-items:center;
}
/* Primary button: stronger gradient and depth */
.btn-primary{
  background-color: var(--primary);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0));
  color:#fff;padding:10px 16px;border-radius:12px;border:0;font-weight:800;
  box-shadow: 0 8px 22px rgba(15,23,42,0.16);
  transition: transform 160ms ease, box-shadow 180ms ease;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(15,23,42,0.18)}
.btn-primary:focus{outline:3px solid rgba(4,35,95,0.12);outline-offset:3px}

/* Ghost button - stile secondario */
.btn-ghost{
  display:inline-flex;align-items:center;gap:10px;
  background: rgba(15,23,42,0.02);
  border: 1px solid rgba(15,23,42,0.12);
  color:var(--primary);
  padding:10px 14px;border-radius:12px;font-weight:700;cursor:pointer;
  transition:transform 160ms ease, box-shadow 180ms ease, background 180ms ease;
  box-shadow:0 6px 16px rgba(15,23,42,0.05);
}
.btn-ghost:hover{transform:translateY(-2px);background: rgba(15,23,42,0.04);box-shadow:0 10px 22px rgba(15,23,42,0.08)}
.btn-ghost:focus{outline:2px solid rgba(4,35,95,0.12);outline-offset:3px}

/* add a subtle chevron indicator on the ghost button using pseudo-element */
.btn-ghost::after{
  content:'▸';font-size:0.9rem;margin-left:6px;opacity:0.95;color:var(--primary);
}

/* Hero-specific ghost override (white text on dark hero, more contrast) */
.hero .btn-ghost{background: rgba(255,255,255,0.08); color:#fff; border:1px solid rgba(255,255,255,0.12); box-shadow:0 8px 24px rgba(0,0,0,0.28)}
.hero .btn-ghost::after{color:#fff;opacity:0.95}

/* Hero */
.hero{
  position:relative;
  color:#fff;
  min-height:60vh;
  max-height:85vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:left;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;inset:0;
  background-image: linear-gradient(to bottom right, rgba(0,0,0,0.35), rgba(0,0,0,0.55));
  z-index:1;
}
.hero .bg{
  position:absolute;inset:0;background-image:image-set(url('homepage2.webp') type('image/webp'),url('homepage2.png') type('image/png'));background-position:center 22%;background-size:cover;z-index:0;
  filter:brightness(0.95);
}
@media(min-width:769px){
  .hero{min-height:max(60vh,42vw);}
  .hero .bg{background-image:image-set(url('homepage2-desktop.webp') type('image/webp'),url('homepage2-desktop.png') type('image/png'));background-position:top center;}
}
.hero .container{position:relative;z-index:2;max-width:var(--max-width);margin:0 auto;padding:48px 20px;display:flex;gap:24px;align-items:center}
.hero .left{flex:1;color:#fff}
.kicker{display:inline-block;background:rgba(255,255,255,0.08);padding:6px 10px;border-radius:999px;font-weight:700;margin-bottom:10px;font-size:0.9rem}
.hero h1{margin:0;font-size:clamp(1.6rem,3.6vw,3rem);line-height:1.05;font-weight:800;letter-spacing:-0.02em}
.hero p{margin:12px 0 20px;color:rgba(255,255,255,0.92);font-size:1.05rem;max-width:70%}
.hero .cta-row{display:flex;gap:12px;align-items:center}
.hero .cta-row .secondary{background:rgba(255,255,255,0.12);color:#fff;padding:10px 14px;border-radius:10px}

/* Why choose us */
.section{padding:56px 16px}
.container-inner{max-width:var(--max-width);margin:0 auto}
.why-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px
}
.card{
  background:#fff;
  border-radius:12px;
  padding:24px;
  box-shadow:0 6px 18px rgba(20,20,20,0.04);
  display:flex;
  gap:16px;
  align-items:flex-start;
  height: 100%;
  min-height: 160px;
}
.icon-wrap{
  flex: 0 0 56px;
  width:56px;
  height:56px;
  border-radius:10px;
  background:linear-gradient(180deg,rgba(4,35,95,0.12),rgba(4,35,95,0.06));
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--primary);
}
.icon-wrap svg {
  width: 28px;
  height: 28px;
  display: block;
}
.card h3{margin:0;font-size:1.05rem}
.card p{margin:6px 0 0;color:#666;font-size:0.95rem}

/* two-column about */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
.about .img{border-radius:12px;overflow:hidden;box-shadow:0 8px 30px rgba(40,40,40,0.06)}
.about h2{margin-top:0}
.about p{color:#444}

/* Services accordion */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.service-card{background:#fff;padding:16px;border-radius:12px;box-shadow:0 6px 18px rgba(20,20,20,0.04)}
.accordion{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,0.04)}
.acc-item{border-bottom:1px solid #f0f0f0}
.acc-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;cursor:pointer;font-weight:700}
.acc-body{padding:0 16px 14px 16px;color:#555;display:none}

/* Brands carousel (CSS-only infinite scroll using duplicated groups)
   - We create two identical .group containers and animate them together.
   - Hovering the parent (.brands.carousel) pauses the animation for both groups.
*/
.brands {
  padding: 28px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.04);
  overflow: hidden;
}

/* make the brands container also behave as the carousel root */
.brands.carousel {
  display: flex;
  width: 100%;
  align-items: center;
}
/* ensure each group takes the full carousel width so translateX(-100%) moves exactly one set */
.brands.carousel > * {
  flex: 0 0 100%;
}

/* Each group contains one full sequence of logos. Duplicate the group in HTML. */
.group {
  display: flex;
  gap: 28px;
  padding-right: 28px; /* small gap between end and duplicated start */
  will-change: transform;
  animation: scrolling 10s linear infinite;
  align-items: center;
}

/* Pause both groups when hovering the carousel root */
.brands.carousel:hover .group {
  animation-play-state: paused;
}

@keyframes scrolling {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* Brand item styles (unchanged visual behavior) */
.brand {
  width: 120px;
  flex: 0 0 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand img { max-height: 40px; max-width: 100%; }

/* CTA full width */
.cta-full{
  background-color: var(--primary);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0));
  color:#fff;padding:36px 16px;border-radius:14px;margin:28px 0;
}
.cta-full .inner-cta{max-width:var(--max-width);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px}
.cta-full h3{margin:0;font-size:1.25rem}
.cta-phone{font-weight:800;font-size:1.3rem;background:rgba(255,255,255,0.08);padding:10px 16px;border-radius:10px}

/* Responsive adjustments for contact page layout and hero buttons */
@media (max-width: 768px){
  .hero .container{flex-direction:column;align-items:flex-start}
  .hero p{max-width:100%}
  .hero .cta-row{flex-direction:column;align-items:stretch}
  .hero .cta-row a{width:100%;text-align:center}

  /* Generic fix for two-column grids defined inline on pages like contatti */
  .section .container-inner > div[style*="display:grid"]{
    display:block !important;
  }
  .section .container-inner > div[style*="display:grid"] > div{
    margin-bottom:24px;
  }
}

/* Footer */
footer{background:var(--dark-bg);color:#fff;padding:40px 16px;border-top:4px solid rgba(255,255,255,0.03)}
.footer-inner{max-width:var(--max-width);margin:0 auto;display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px}
.footer .col h4{margin-top:0}
.footer-heading{font-size:1rem;font-weight:600;margin:0 0 12px 0}
.foot-bottom{border-top:1px solid rgba(255,255,255,0.06);margin-top:20px;padding-top:12px;text-align:center;font-size:0.9rem;color:rgba(255,255,255,0.7)}

/* --- NUOVO CSS: Pulsanti Flottanti --- */
.floating-btn {
  position: fixed;
  right: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 50;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: none;
}
.floating-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}
.floating-btn svg {
  width: 28px;
  height: 28px;
  fill: #fff;
}
.call-btn {
  background-color: var(--primary);
  bottom: 20px;
  right: 90px; /* Posizionato a sinistra del pulsante WhatsApp */
}
.floating-btn.call-btn {
  width: 72px;
  height: 72px;
}
.floating-btn.call-btn svg {
  width: 34px;
  height: 34px;
}
.whatsapp-btn {
  background-color: var(--whatsapp-green);
  bottom: 20px;
  right: 20px; /* Posizione più a destra */
}
/* --- FINE NUOVO CSS --- */

/* Responsive */
@media (max-width:1000px){
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .two-col{grid-template-columns:1fr}
  .hero p{max-width:100%}
  .brand{width:100px;flex:0 0 100px}
}
/* Mobile menu button */
.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  margin-left: auto;
}
.mobile-menu-btn svg {
  width: 24px;
  height: 24px;
  fill: var(--text-dark);
}

/* Mobile dropdown menu */
.mobile-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  z-index: 39;
  padding: 8px 0;
}
.mobile-dropdown.active {
  display: block;
}
.mobile-dropdown a {
  display: block;
  padding: 12px 16px;
  color: var(--text-dark);
  font-weight: 600;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.mobile-dropdown a:last-child {
  border-bottom: none;
}
.mobile-dropdown a:hover {
  background: rgba(0,0,0,0.03);
}

/* Compact nav at medium widths: full nav visible, just tighter */
@media (max-width: 1050px) and (min-width: 701px){
  .nav-inner{
    gap: 8px;
    padding: 10px 12px;
  }
  nav.main-nav{
    margin-left: 8px;
  }
  nav.main-nav > ul{
    gap: 4px;
  }
  nav.main-nav a{
    font-size: 0.82rem;
    padding: 5px 7px;
  }
  .header-actions .btn-primary{
    padding: 8px 12px;
    font-size: 0.82rem;
    white-space: nowrap;
  }
  .logo h1, .logo .logo-title{
    font-size: 0.9rem;
  }
  .logo div[style*="font-size:0.8rem"]{
    display: none;
  }
  .logo .logo-mark{
    width: 36px;
    height: 36px;
  }
}
/* Hamburger nav: mobile only */
@media (max-width: 700px){
  .nav-inner{
    padding: 10px;
    gap: 10px;
  }
  .logo {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .logo > div {
    flex: 0 1 auto;
    min-width: 0;
  }
  .logo h1, .logo .logo-title {
    font-size: 0.9rem;
    white-space: nowrap;
    margin: 0;
  }
  .logo .logo-mark {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
  }
  .logo div[style*="font-size:0.8rem"] {
    font-size: 0.75rem !important;
  }
  nav.main-nav > ul{display:none}
  .mobile-menu-btn {
    display: block;
  }
  .header-actions{
    margin-left: auto;
    display: none;
  }
}
/* Layout reflows: small phones */
@media (max-width:700px){
  .hero{min-height:56vh}
  .why-grid{grid-template-columns:1fr}
  .services-grid{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr}
  .hero p{font-size:0.98rem}
  /* Adatta i pulsanti flottanti per schermi piccoli */
  .floating-btn {
    width: 55px;
    height: 55px;
  }
  .call-btn {
    bottom: 15px;
    right: 80px;
  }
  .whatsapp-btn {
    bottom: 15px;
    right: 15px;
  }
  .floating-call {
    bottom: 15px;
  }
}

/* small helpers */
.muted{color:#595959}
.center{text-align:center}
.mb-8{margin-bottom:8px}
.mt-6{margin-top:6px}

/* HERO CTA - mobile-first improvements */
.hero .cta-row{display:flex;gap:12px;align-items:center;margin-top:18px}
.hero .cta-row .btn-phone, .hero .cta-row .btn-primary{display:inline-flex;align-items:center;gap:10px}
.btn-phone{background-color: var(--primary); background-image: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0)); color:#fff; padding:10px 14px; border-radius:12px; font-weight:800; box-shadow:0 8px 22px rgba(15,23,42,0.14); text-decoration:none}
.btn-phone strong{font-weight:900;margin-left:6px}
.hero .btn-ghost{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.14);padding:10px 14px;border-radius:10px;color:rgba(255,255,255,0.95);font-weight:700;text-decoration:none}
.hero-subtext{margin-top:10px;color:rgba(255,255,255,0.9);font-size:0.95rem}

/* Floating mobile call button (pill, mobile-only) */
.floating-call{position:fixed;left:0;right:0;margin:0 auto;width:fit-content;bottom:20px;background-color:var(--primary);background-image:linear-gradient(180deg,rgba(255,255,255,0.12),rgba(255,255,255,0));color:#fff;border-radius:12px;padding:12px 20px;display:none;align-items:center;gap:10px;font-weight:800;font-size:0.95rem;white-space:nowrap;text-decoration:none;box-shadow:0 8px 22px rgba(15,23,42,0.18);z-index:600;animation:phone-pulse 2.6s infinite}
@keyframes phone-pulse{0%{transform:scale(1)}50%{transform:scale(1.06)}100%{transform:scale(1)}}

/* Hide the original floating small call on mobile (we use .floating-call) */
.floating-btn.call-btn{display:flex}

@media (max-width: 768px){
  .hero{min-height:46vh;padding:28px 18px}
  .hero .left{width:100%}
  .hero h1{font-size:1.5rem}
  .hero p{font-size:0.98rem;color:rgba(255,255,255,0.95)}
  /* Mobile: show hero CTAs stacked vertically */
  .hero .cta-row{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin-top:16px}
  .hero .cta-row a{width:100%;text-align:center;justify-content:center;font-size:0.95rem;padding:12px 16px}
  .header-actions .btn-primary{display:none}
  .floating-btn.call-btn{display:none}
  .floating-call{display:inline-flex}
  .hero .cta-row .btn-phone{display:none}
  .hero .btn-ghost{display:none}
}


/* BLOG STYLES */
.blog-section {
  padding: 48px 0;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}

.blog-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: all 200ms ease;
  display: flex;
  flex-direction: column;
}

.blog-card:hover {
  box-shadow: 0 4px 16px rgba(15,23,42,0.12);
  transform: translateY(-2px);
}

.blog-image {
  width: 100%;
  height: 240px;
  overflow: hidden;
  background: var(--muted);
}

.blog-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms ease;
}

.blog-card:hover .blog-image img {
  transform: scale(1.05);
}

.blog-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-meta {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 0.85rem;
  color: #666;
  flex-wrap: wrap;
}

.blog-date {
  font-weight: 600;
  color: var(--primary);
}

.blog-author {
  color: #888;
}

.blog-category {
  background: var(--muted);
  color: var(--primary);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
}

.blog-card h3 {
  margin: 0 0 12px 0;
  font-size: 1.3rem;
  line-height: 1.4;
  color: var(--text-dark);
}

.blog-title-link {
  color: inherit;
  text-decoration: none;
  transition: color 200ms ease;
}

.blog-title-link:hover {
  color: var(--primary);
}

.blog-excerpt {
  color: #666;
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
  flex: 1;
  margin-bottom: 16px;
}

.blog-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid #eee;
}

.read-more {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
  transition: all 200ms ease;
  display: inline-flex;
  align-items: center;
}

.read-more:hover {
  gap: 4px;
}

.read-time {
  font-size: 0.85rem;
  color: #999;
  white-space: nowrap;
}

.blog-article-full {
  margin-bottom: 32px;
}

.blog-article-text h3 {
  color: var(--primary);
  margin: 28px 0 16px 0;
  font-size: 1.2rem;
}

.blog-article-text h4 {
  margin: 20px 0 12px 0;
  font-size: 1.05rem;
}

.blog-article-text p {
  line-height: 1.8;
  margin: 16px 0;
  color: #333;
}

.blog-article-text ul,
.blog-article-text ol {
  margin: 16px 0;
  color: #333;
}

.blog-article-text li {
  margin: 8px 0;
}

.blog-article-text table {
  margin: 20px 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

@media (max-width: 768px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }
  
  .blog-article-full {
    padding: 16px !important;
  }
  
  .blog-article-meta {
    flex-direction: column;
    gap: 8px !important;
  }
  
  .blog-article-text h3 {
    font-size: 1.1rem;
  }
}

/* BREADCRUMB */
.breadcrumb {
  background: var(--muted);
  padding: 12px 0;
  border-bottom: 1px solid #ddd;
}

.breadcrumb-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 0.9rem;
}

.breadcrumb-list li {
  display: flex;
  align-items: center;
}

.breadcrumb-list li:not(:last-child)::after {
  content: "›";
  margin-left: 8px;
  color: #999;
}

.breadcrumb-list a {
  color: var(--primary);
  text-decoration: none;
  transition: all 200ms ease;
}

.breadcrumb-list a:hover {
  text-decoration: underline;
}

.breadcrumb-list li[aria-current="page"] {
  color: #666;
  font-weight: 500;
}

/* BREADCRUMB - Hero variant (dark background) */
.hero .breadcrumb {
  background: transparent;
  padding: 0;
  border-bottom: none;
}

.hero .breadcrumb-list a {
  color: rgba(255, 255, 255, 0.8);
}

.hero .breadcrumb-list a:hover {
  color: #fff;
  text-decoration: none;
}

.hero .breadcrumb-list li:not(:last-child)::after {
  color: rgba(255, 255, 255, 0.5);
}

.hero .breadcrumb-list li[aria-current="page"] {
  color: #fff;
}

/* BLOG ARTICLE PAGE */
.blog-article-page {
  padding: 48px 0;
}

.article-header {
  margin-bottom: 36px;
}

.article-header h1 {
  font-size: 2.2rem;
  line-height: 1.3;
  margin: 0 0 20px 0;
  color: var(--primary);
}

.article-meta {
  display: flex;
  gap: 20px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 2px solid #eee;
  flex-wrap: wrap;
  font-size: 0.95rem;
  color: #666;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.meta-item strong {
  color: var(--primary);
}

.article-hero-image {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  margin-bottom: 36px;
}

.article-body {
  font-size: 1.05rem;
  line-height: 1.8;
  color: #333;
}

.article-body h2 {
  color: var(--primary);
  margin: 36px 0 16px 0;
  font-size: 1.6rem;
  line-height: 1.3;
}

.article-body h3 {
  color: var(--primary);
  margin: 24px 0 12px 0;
  font-size: 1.2rem;
}

.article-body h4 {
  color: #333;
  margin: 20px 0 10px 0;
  font-size: 1.05rem;
  font-weight: 600;
}

.article-body p {
  margin: 16px 0;
}

.article-body ul,
.article-body ol {
  margin: 16px 0;
  padding-left: 24px;
}

.article-body li {
  margin: 10px 0;
  line-height: 1.8;
}

.benefits-table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.benefits-table thead {
  background: var(--primary);
  color: white;
}

.benefits-table th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
}

.benefits-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #ddd;
}

.benefits-table tbody tr:nth-child(even) {
  background: var(--muted);
}

.benefits-table tbody tr:hover {
  background: #f0f4ff;
}

.cta-box {
  background: var(--muted);
  padding: 20px;
  border-radius: 8px;
  margin: 28px 0;
  border-left: 4px solid var(--primary);
}

.cta-box p {
  margin: 0;
  line-height: 1.6;
}

.cta-box p:first-child {
  color: var(--primary);
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.article-footer {
  margin: 36px 0;
  padding: 24px 0;
  border-top: 2px solid #eee;
}

.article-tags {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.tag {
  background: var(--muted);
  color: var(--primary);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 200ms ease;
  border: 1px solid transparent;
}

.tag:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.related-articles {
  margin-top: 48px;
  padding-top: 36px;
  border-top: 2px solid #eee;
}

.related-articles h3 {
  color: var(--primary);
  font-size: 1.4rem;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .article-header h1 {
    font-size: 1.6rem;
  }

  .article-meta {
    gap: 12px;
    font-size: 0.85rem;
  }

  .article-body h2 {
    font-size: 1.3rem;
    margin: 28px 0 14px 0;
  }

  .article-body h3 {
    font-size: 1.05rem;
  }

  .benefits-table th,
  .benefits-table td {
    padding: 8px 12px;
    font-size: 0.9rem;
  }

  .breadcrumb-list {
    gap: 4px;
  }
}

/* =============================================
   MEGA-MENU: "Elettrodomestici" dropdown
   ============================================= */

/* Desktop: the <li> that holds the mega-menu */
nav.main-nav .has-megamenu{position:relative}
nav.main-nav .has-megamenu > a{cursor:default}

/* chevron indicator next to label */
nav.main-nav .has-megamenu > a::after{
  content:'';display:inline-block;width:5px;height:5px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);margin-left:5px;vertical-align:middle;
  transition:transform .2s ease;
}
nav.main-nav .has-megamenu:hover > a::after,
nav.main-nav .has-megamenu:focus-within > a::after{
  transform:rotate(-135deg);
}

/* Level-1 dropdown (category list) */
.megamenu{
  display:none;
  flex-direction:column;
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  min-width:220px;
  background:#fff;
  border-radius:12px;
  box-shadow:0 12px 36px rgba(0,0,0,.12);
  padding:8px 0;
  z-index:100;
  list-style:none;
  margin:0;
  gap:0;
  align-items:stretch;
  justify-content:flex-start;
}
/* Show on hover / focus-within */
nav.main-nav .has-megamenu:hover > .megamenu,
nav.main-nav .has-megamenu:focus-within > .megamenu{
  display:flex;
  flex-direction:column;
}
/* Invisible bridge so cursor doesn't lose hover going from trigger to menu */
.megamenu::before{
  content:'';position:absolute;top:-12px;left:0;right:0;height:14px;
}

/* Each category row — no position:relative so .megamenu-sub
   positions relative to .megamenu, always in the same spot */
.megamenu-cat > a{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 18px;color:var(--text-dark);font-weight:600;font-size:.93rem;
  transition:background .15s,color .15s;white-space:nowrap;text-decoration:none;
}
.megamenu-cat > a:hover,
.megamenu-cat > a:focus{background:rgba(15,23,42,.04);color:var(--primary)}

/* Arrow for categories that have a submenu */
.megamenu-cat.has-sub > a::after{
  content:'';display:inline-block;width:5px;height:5px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg);margin-left:10px;opacity:.6;
}

/* Level-2 brand submenu — positioned relative to .megamenu (not each category)
   so all submenus open in the same spot and only the active one shows */
.megamenu-sub{
  display:none;
  flex-direction:column;
  position:absolute;
  left:100%;
  top:0;
  min-width:210px;
  background:#fff;
  border-radius:12px;
  box-shadow:0 12px 36px rgba(0,0,0,.12);
  padding:8px 0;
  z-index:101;
  list-style:none;
  margin:0;
  gap:0;
  align-items:stretch;
  justify-content:flex-start;
}
/* Show on hover / focus-within */
.megamenu-cat.has-sub:hover > .megamenu-sub,
.megamenu-cat.has-sub:focus-within > .megamenu-sub{
  display:flex;
  flex-direction:column;
}

.megamenu-sub li a{
  display:block;padding:9px 18px;color:var(--text-dark);font-weight:500;font-size:.9rem;
  transition:background .15s,color .15s;white-space:nowrap;text-decoration:none;
}
.megamenu-sub li a:hover,
.megamenu-sub li a:focus{background:rgba(15,23,42,.04);color:var(--primary)}

/* =============================================
   MOBILE MEGA-MENU (accordion inside hamburger)
   ============================================= */
.mobile-mega-toggle{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;color:var(--text-dark);font-weight:600;
  border-bottom:1px solid rgba(0,0,0,.05);cursor:pointer;
  background:none;border-left:0;border-right:0;border-top:0;width:100%;
  font-family:inherit;font-size:inherit;text-align:left;
}
.mobile-mega-toggle .chevron{
  display:inline-block;transition:transform .2s ease;font-size:.75rem;
}
.mobile-mega-toggle.open .chevron{transform:rotate(180deg)}

.mobile-mega-content{
  display:none;background:rgba(0,0,0,.015);
}
.mobile-mega-content.open{display:block}

.mobile-mega-content a.mobile-cat-link{
  display:block;padding:10px 16px 10px 28px;color:var(--text-dark);font-weight:600;
  border-bottom:1px solid rgba(0,0,0,.04);text-decoration:none;font-size:.95rem;
}
.mobile-mega-content a.mobile-cat-link:hover{background:rgba(0,0,0,.03)}

.mobile-cat-toggle{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px 10px 28px;color:var(--text-dark);font-weight:600;
  border-bottom:1px solid rgba(0,0,0,.04);cursor:pointer;
  background:none;border-left:0;border-right:0;border-top:0;width:100%;
  font-family:inherit;font-size:.95rem;text-align:left;
}
.mobile-cat-toggle .chevron{
  display:inline-block;transition:transform .2s ease;font-size:.7rem;
}
.mobile-cat-toggle.open .chevron{transform:rotate(180deg)}

.mobile-cat-content{
  display:none;background:rgba(0,0,0,.02);
}
.mobile-cat-content.open{display:block}

.mobile-cat-content a{
  display:block;padding:9px 16px 9px 44px;color:#444;font-weight:500;font-size:.9rem;
  border-bottom:1px solid rgba(0,0,0,.03);text-decoration:none;
}
.mobile-cat-content a:hover{background:rgba(0,0,0,.03);color:var(--primary)}

/* Hide desktop mega-menu on mobile; mobile accordion handled via .mobile-dropdown */
@media(max-width:700px){
  .megamenu{display:none !important}
  nav.main-nav .has-megamenu > a::after{display:none}
}

/* =============================================
   GOOGLE REVIEWS SECTION
   ============================================= */
.reviews-section{
  padding:56px 0;
  background:#fff;
}
.reviews-header{
  text-align:center;
  margin-bottom:36px;
}
.reviews-header .reviews-stars-summary{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-bottom:8px;
}
.reviews-header .reviews-stars-summary .stars{
  color:#f4b400;
  font-size:1.4rem;
  letter-spacing:1px;
  line-height:1;
}
.reviews-header .reviews-stars-summary .rating-number{
  font-size:1.3rem;
  font-weight:700;
  color:var(--text-dark);
}
.reviews-header .reviews-stars-summary .rating-source{
  font-size:.95rem;
  color:#5f6368;
  font-weight:400;
}
.reviews-header .reviews-stars-summary .google-icon{
  width:20px;
  height:20px;
  flex-shrink:0;
}
.reviews-header h2{
  margin:8px 0 0;
  font-size:1.6rem;
}
.reviews-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.review-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:var(--radius);
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:12px;
  transition:box-shadow var(--transition),transform var(--transition);
}
.review-card:hover{
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  transform:translateY(-2px);
}
.review-card-head{
  display:flex;
  align-items:center;
  gap:12px;
}
.review-avatar{
  width:40px;
  height:40px;
  border-radius:50%;
  background:var(--primary);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:1rem;
  flex-shrink:0;
}
.review-author-info{
  display:flex;
  flex-direction:column;
}
.review-author-name{
  font-weight:600;
  font-size:.95rem;
  color:var(--text-dark);
}
.review-date{
  font-size:.8rem;
  color:#5f6368;
}
.review-card-stars{
  color:#f4b400;
  font-size:1rem;
  letter-spacing:2px;
}
.review-text{
  font-size:.93rem;
  line-height:1.6;
  color:#333;
  flex:1;
}
.review-source{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:.8rem;
  color:#5f6368;
  margin-top:auto;
}
.review-source svg{
  width:16px;
  height:16px;
}
.reviews-cta{
  text-align:center;
  margin-top:32px;
}
.reviews-cta a{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
@media(max-width:1000px){
  .reviews-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  .reviews-section{padding:40px 0}
  .reviews-grid{grid-template-columns:1fr}
  .reviews-header h2{font-size:1.3rem}
}

/* ===== SVG Icon System ===== */
.icon{
  display:inline-block;
  width:1em;
  height:1em;
  vertical-align:-0.125em;
  fill:currentColor;
  flex-shrink:0;
}
.icon-sm{width:0.875em;height:0.875em}
.icon-lg{width:1.35em;height:1.35em;vertical-align:-0.2em}
.icon-xl{width:2rem;height:2rem;vertical-align:-0.25em}
.icon-card{width:28px;height:28px}
.icon-outline{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon-wa{color:#25D366}

/* ===== Form Contatto ===== */
.form-section{padding:60px 0;background:var(--muted)}
.form-section h2{text-align:center;color:var(--primary);margin-bottom:8px}
.form-section>.container>p{text-align:center;color:#64748b;margin-bottom:32px}
.contact-form{max-width:640px;margin:0 auto;background:#fff;padding:32px;border-radius:var(--radius);box-shadow:0 6px 18px rgba(20,20,20,.04)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.form-group{display:flex;flex-direction:column;gap:4px}
.form-group-full{margin-bottom:24px}
.form-group label{font-size:.85rem;font-weight:700;color:var(--text-dark)}
.form-group input,
.form-group select,
.form-group textarea{padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-family:inherit;font-size:.95rem;transition:border-color var(--transition);background:#fff}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(18,54,95,.08)}
.btn-submit{width:100%;padding:14px 24px;font-size:1.05rem;cursor:pointer;border:none}
.form-disclaimer{text-align:center;font-size:.8rem;color:#94a3b8;margin-top:12px}
@media(max-width:600px){
  .form-grid{grid-template-columns:1fr}
  .contact-form{padding:20px}
}