/* =========================================================
   Fairway Comfort — stylesheet condiviso
   Font: Poppins Medium (titoli/bottoni/nav) + Poppins Regular (testo)
   Colori: nero (sfondo), #bbe31a (titoli/dettagli bottoni), bianco (testo)
   ========================================================= */

:root{
  --bg:#000000;
  --surface:#0d0d0d;
  --surface-2:#161616;
  --border:rgba(255,255,255,0.10);
  --border-acid:rgba(187,227,26,0.35);
  --acid:#bbe31a;
  --acid-dim:#93b512;
  --white:#ffffff;
  --muted:rgba(255,255,255,0.68);
  --radius-lg:24px;
  --radius-md:16px;
  --maxw:1240px;
  /* Freccetta del brand (assets/checklist-icon.svg) usata come marcatore
     degli elenchi puntati. E' una maschera CSS, quindi eredita il colore
     da background-color: cosi' la stessa icona serve in qualunque tinta. */
  --arrow-mask:url("data:image/svg+xml,%3Csvg%20id%3D%22Livello_1%22%20data-name%3D%22Livello%201%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2066.17%20104.03%22%3E%3Cpath%20d%3D%22M52.24%2C60.51l-.1-.09L17.56%2C95a5.14%2C5.14%2C0%2C0%2C1-7.26%2C0L8.85%2C93.56a5.14%2C5.14%2C0%2C0%2C1%2C0-7.26s33.48-35.7.6-68.57h0a5.14%2C5.14%2C0%2C0%2C1%2C0-7.26L10.9%2C9a5.14%2C5.14%2C0%2C0%2C1%2C7.26%2C0L57.32%2C48.19a5.13%2C5.13%2C0%2C0%2C1%2C0%2C7.25Z%22%2F%3E%3C%2Fsvg%3E");
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;max-width:100%;}
body{
  overflow-x:hidden;
  max-width:100%;
  margin:0;
  background:var(--bg);
  color:var(--white);
  font-family:'Poppins',sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
h1,h2,h3,h4{
  font-family:'Poppins',sans-serif;
  font-weight:500;
  color:var(--acid);
  margin:0 0 16px;
  line-height:1.15;
}
p{color:var(--white);line-height:1.7;margin:0 0 16px;}
.muted{color:var(--muted);}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important;transition-duration:0.001ms !important;}
}

/* ---------- Header / Nav ---------- */
header.site-header{
  position:fixed;top:0;left:0;right:0;z-index:500;
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-areas:"logo nav actions";
  align-items:center;
  column-gap:24px;
  padding:18px 24px;
  background:linear-gradient(to bottom, rgba(0,0,0,0.85), rgba(0,0,0,0));
  transition:background 0.3s ease, padding 0.3s ease, backdrop-filter 0.3s ease, transform 0.35s ease;
}
header.site-header.scrolled{
  background:rgba(0,0,0,0.92);
  backdrop-filter:blur(10px);
  padding:12px 24px;
  box-shadow:0 1px 0 var(--border);
}
header.site-header.header-hidden{
  transform:translateY(-100%);
}
.brand{grid-area:logo;display:flex;align-items:center;gap:12px;}
.brand img{height:60px;width:auto;}
.brand img.logo-mobile{display:none;}
@media (max-width:820px){
  .brand img.logo-desktop{display:none;}
  .brand img.logo-mobile{display:block;height:38px;width:auto;}
}

.header-actions{grid-area:actions;justify-self:end;display:flex;align-items:center;gap:18px;}

nav.main-nav{grid-area:nav;justify-self:center;display:flex;align-items:center;gap:34px;}
nav.main-nav a{
  font-size:13.5px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--white);position:relative;padding-bottom:4px;
}
nav.main-nav a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--acid);
  transition:width 0.25s ease;
}
nav.main-nav a:hover::after,
nav.main-nav a:focus-visible::after,
nav.main-nav a.active::after{width:100%;}
nav.main-nav a.active{color:var(--acid);}

/* ---------- Dropdown "Prodotti" (Divani / Poltrona) ---------- */
.nav-item{position:relative;display:flex;align-items:center;}
.nav-dropdown-trigger{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:none;cursor:pointer;padding:0 0 4px;margin:0;
  font-family:'Poppins',sans-serif;
  font-size:13.5px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--white);position:relative;
}
.nav-dropdown-trigger::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--acid);
  transition:width 0.25s ease;
}
.nav-dropdown-trigger:hover::after,
.nav-item.open .nav-dropdown-trigger::after,
.nav-dropdown-trigger.active::after{width:100%;}
.nav-dropdown-trigger.active,
.nav-item.open > .nav-dropdown-trigger{color:var(--acid);}
.nav-chevron{width:11px;height:11px;flex:none;transition:transform 0.25s ease;}
.nav-item.open > .nav-dropdown-trigger .nav-chevron{transform:rotate(180deg);}

.nav-dropdown{
  position:absolute;top:calc(100% + 14px);left:50%;
  transform:translateX(-50%) translateY(6px);
  min-width:240px;background:#0d0d0d;border:1px solid var(--border-acid);
  border-radius:var(--radius-md);padding:10px;
  box-shadow:0 20px 50px -14px rgba(0,0,0,0.65);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index:50;
}
.nav-dropdown::before{
  content:"";position:absolute;top:-7px;left:50%;
  width:13px;height:13px;
  background:#0d0d0d;border-left:1px solid var(--border-acid);border-top:1px solid var(--border-acid);
  transform:translateX(-50%) rotate(45deg);
}
.nav-dropdown::after{
  /* ponte invisibile che copre lo spazio tra il trigger e il pannello,
     cos\u00ec il collegamento visivo resta continuo */
  content:"";position:absolute;top:-14px;left:0;right:0;height:14px;
}
.nav-item.open .nav-dropdown{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
.nav-dropdown-group{display:flex;flex-direction:column;width:100%;box-sizing:border-box;}
.nav-dropdown-subtrigger{
  display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  box-sizing:border-box;
  background:none;border:none;cursor:pointer;padding:10px 12px;border-radius:8px;
  font-family:'Poppins',sans-serif;font-size:13px;font-weight:500;color:var(--white);
  text-transform:none;letter-spacing:0.02em;text-align:left;
  transition:background 0.2s ease, color 0.2s ease;
}
.nav-dropdown-subtrigger span{overflow-wrap:break-word;word-break:break-word;min-width:0;}
.nav-dropdown-subtrigger:hover{background:rgba(187,227,26,0.08);color:var(--acid);}
.nav-chevron-sm{width:12px;height:12px;flex:none;transition:transform 0.25s ease;}
.nav-dropdown-group.open .nav-chevron-sm{transform:rotate(180deg);}
.nav-dropdown-sublist{max-height:0;overflow:hidden;transition:max-height 0.3s ease;display:flex;flex-direction:column;width:100%;box-sizing:border-box;}
.nav-dropdown-group.open .nav-dropdown-sublist{max-height:320px;}
.nav-dropdown .nav-dropdown-sublist a{
  display:block;width:100%;box-sizing:border-box;
  padding:9px 12px 9px 26px;font-size:12.5px;font-weight:400;letter-spacing:0.01em;
  text-transform:none;color:var(--muted);border-radius:8px;
  overflow-wrap:break-word;word-break:break-word;white-space:normal;
  transition:background 0.2s ease, color 0.2s ease;
}
.nav-dropdown-sublist a::after{display:none;}
.nav-dropdown-sublist a:hover{background:rgba(187,227,26,0.08);color:var(--acid);}
.nav-dropdown .nav-dropdown-link{
  display:block;width:100%;box-sizing:border-box;
  padding:10px 12px;border-radius:8px;
  font-size:13px;font-weight:500;letter-spacing:0.02em;text-transform:none;
  overflow-wrap:break-word;word-break:break-word;white-space:normal;
  color:var(--white);transition:background 0.2s ease, color 0.2s ease;
}
.nav-dropdown-link::after{display:none;}
.nav-dropdown-link:hover{background:rgba(187,227,26,0.08);color:var(--acid);}
.nav-dropdown-viewall{
  display:block;width:100%;box-sizing:border-box;
  margin-top:6px;padding:10px 12px 0;border-top:1px solid var(--border);
  font-size:11px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;
  overflow-wrap:break-word;word-break:break-word;white-space:normal;
  color:var(--acid-dim);transition:color 0.2s ease;
}
.nav-dropdown-viewall::after{display:none;}
.nav-dropdown-viewall:hover{color:var(--acid);}

.social-icons{display:flex;align-items:center;gap:14px;}
.social-icons a{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  border:1px solid var(--border);color:var(--white);
  transition:border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.social-icons a svg{width:15px;height:15px;}
.social-icons a:hover{border-color:var(--acid);color:var(--acid);transform:translateY(-2px);}
.nav-social{display:none;}

/* ---------- Barra di ricerca (si espande a sinistra dell'icona) ---------- */
.search-widget{position:relative;display:flex;align-items:center;}
.search-input-wrap{
  position:relative;
  width:0;opacity:0;overflow:hidden;
  transition:width 0.32s ease, opacity 0.2s ease, margin 0.32s ease;
}
.search-input-wrap form{display:block;width:100%;margin:0;}
.search-widget.open .search-input-wrap{width:230px;opacity:1;margin-right:10px;}
.search-toggle{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;flex:none;
  border:1px solid var(--border);color:var(--white);background:none;cursor:pointer;
  transition:border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.search-toggle svg{width:15px;height:15px;}
.search-toggle:hover{border-color:var(--acid);color:var(--acid);transform:translateY(-2px);}
.search-widget.open .search-toggle{border-color:var(--acid);color:var(--acid);}
.search-input{
  width:230px;max-width:230px;box-sizing:border-box;
  background:var(--surface-2);border:1px solid var(--border);border-radius:10px;
  padding:10px 14px;color:var(--white);font-family:'Poppins',sans-serif;font-size:13.5px;
  transition:border-color 0.2s ease;
}
.search-input:focus{outline:none;border-color:var(--acid);}
.search-results{
  position:absolute;top:calc(100% + 10px);right:0;
  width:260px;max-width:min(260px, calc(100vw - 32px));
  background:#0d0d0d;border:1px solid var(--border-acid);border-radius:var(--radius-md);
  padding:8px;max-height:280px;overflow-y:auto;
  display:flex;flex-direction:column;gap:4px;
  opacity:0;visibility:hidden;transform:translateY(4px);pointer-events:none;
  transition:opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  box-shadow:0 20px 50px -14px rgba(0,0,0,0.65);
  z-index:50;
}
.search-widget.open .search-results:not(:empty){
  opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;
}
.search-result{display:flex;flex-direction:column;gap:2px;padding:9px 10px;border-radius:8px;transition:background 0.2s ease;}
.search-result:hover{background:rgba(187,227,26,0.08);}
.search-result .r-title{font-size:13px;font-weight:500;color:var(--white);}
.search-result .r-cat{font-size:10.5px;color:var(--acid-dim);text-transform:uppercase;letter-spacing:0.08em;}
.search-result.search-see-all{
  margin-top:4px;padding-top:12px;border-top:1px solid var(--border);
  align-items:center;
}
.search-result.search-see-all .r-title{color:var(--acid);font-size:12px;letter-spacing:0.06em;text-transform:uppercase;}
.search-empty{font-size:12.5px;color:var(--muted);padding:8px 4px;}

@media (max-width:820px){
  .search-widget.open .search-input-wrap{width:150px;margin-right:8px;}
  .search-input{width:150px;max-width:150px;padding:9px 12px;font-size:13px;}
}
@media (max-width:480px){
  .search-widget.open .search-input-wrap{width:120px;}
  .search-input{width:120px;max-width:120px;}
}


.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;z-index:600;}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--acid);margin:6px 0;transition:0.25s;}
.nav-toggle.open span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

@media (max-width:820px){
  header.site-header{
    grid-template-columns:1fr auto 1fr;
    grid-template-areas:"logo toggle actions";
    column-gap:12px;
  }
  .header-actions{gap:10px;}
  .social-icons{gap:8px;}
  .social-icons a{width:30px;height:30px;}
  .social-icons a svg{width:13px;height:13px;}
  .search-toggle{width:30px;height:30px;}
  .search-toggle svg{width:13px;height:13px;}
  nav.main-nav{
    position:fixed;top:0;right:0;height:100svh;width:min(80vw,320px);
    background:#050505;
    flex-direction:column;justify-content:flex-start;align-items:flex-start;
    gap:26px;padding:110px 40px 40px;
    transform:translateX(100%);transition:transform 0.35s ease;
    border-left:1px solid var(--border);
    overflow-x:hidden;overflow-y:auto;
    box-sizing:border-box;
  }
  nav.main-nav.open{transform:translateX(0);}
  .nav-toggle{display:block;grid-area:toggle;justify-self:center;}
  .nav-social{display:flex;gap:16px;margin-top:10px;}
  .nav-social a{
    display:flex;align-items:center;justify-content:center;width:36px;height:36px;
    border-radius:50%;border:1px solid var(--border);color:var(--white);
  }
  .nav-social a svg{width:16px;height:16px;}

  /* Dropdown Prodotti -> accordion in linea nel menu mobile */
  .nav-item{flex-direction:column;align-items:flex-start;width:100%;}
  .nav-dropdown-trigger{width:100%;justify-content:space-between;padding:0;}
  .nav-dropdown{
    position:static;transform:none;width:100%;min-width:0;max-width:100%;
    box-sizing:border-box;
    background:transparent;border:none;box-shadow:none;border-radius:0;padding:0 0 0 6px;
    opacity:1;visibility:visible;pointer-events:auto;
    max-height:0;overflow:hidden;transition:max-height 0.3s ease, margin-top 0.3s ease;
  }
  /* Fix: la regola base ".nav-item.open .nav-dropdown" (desktop) ha
     la stessa specificità e altrimenti vincerebbe comunque quando il
     sottomenu è aperto, riapplicando il translateX(-50%) e spingendo
     tutto il contenuto fuori dal bordo sinistro dello schermo. */
  .nav-item.open .nav-dropdown{transform:none;}
  .nav-dropdown::before,
  .nav-dropdown::after{
    content:none;display:none;
  }
  .nav-item.open .nav-dropdown{max-height:640px;margin-top:14px;}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Poppins',sans-serif;font-weight:500;font-size:13.5px;
  letter-spacing:0.08em;text-transform:uppercase;
  padding:15px 30px;border-radius:100px;
  transition:transform 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  border:1.5px solid var(--acid);
  cursor:pointer;
}
.btn-solid{background:var(--acid);color:#000000;}
.btn-solid:hover, .btn-solid:focus-visible{transform:translateY(-2px);background:#cdf34a;}
.btn-outline{background:transparent;color:var(--acid);}
.btn-outline:hover, .btn-outline:focus-visible{transform:translateY(-2px);background:rgba(187,227,26,0.1);}

/* ---------- Page header (interior pages) ---------- */
.page-header{
  padding:180px 0 70px;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(187,227,26,0.08), transparent 60%),
    var(--bg);
}
.page-header .eyebrow{margin-bottom:10px;}
.page-header h1{font-size:clamp(34px,5vw,54px);margin-bottom:14px;}
/* Su mobile il titolo va a capo dopo "Collezione" */
@media (max-width:700px){
  .page-header h1 .title-break{display:block;height:0;}
}
.page-header p{max-width:640px;color:var(--muted);margin:0;}

/* Menu-filtro categorie: barra orizzontale che resta in alto durante lo scroll */
.category-filter{
  position:sticky;top:64px;z-index:50;
  background:rgba(10,10,10,0.86);backdrop-filter:blur(12px);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.category-filter-inner{
  display:flex;gap:12px;padding-top:14px;padding-bottom:14px;
  overflow-x:auto;scrollbar-width:none;
}
.category-filter-inner::-webkit-scrollbar{display:none;}
.category-chip{
  flex:none;padding:9px 22px;border-radius:100px;
  border:1px solid var(--border);color:var(--white);
  font-size:13.5px;font-weight:500;letter-spacing:0.03em;white-space:nowrap;
  transition:background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.category-chip:hover{border-color:var(--border-acid);color:var(--acid);}
.category-chip.active{background:var(--acid);border-color:var(--acid);color:#0a0a0a;}
.section-intro{max-width:600px;color:var(--muted);margin:10px 0 0;font-size:15px;}
/* Compensazione dell'ancora per non far finire i titoli sotto la barra sticky */
section[id]{scroll-margin-top:130px;}
/* Sezione "Potrebbe interessarti" */
.suggestions-section{border-top:1px solid var(--border);}
.suggestion-cat{
  font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--acid);margin:0 0 4px;
}

.eyebrow{
  display:inline-block;font-size:12px;font-weight:500;letter-spacing:0.24em;
  text-transform:uppercase;color:var(--acid);margin-bottom:12px;
}

/* ---------- Sections ---------- */
section{position:relative;padding:60px 0;}
.section-title{font-size:clamp(28px,4vw,42px);margin-bottom:16px;}
.section-lede{max-width:600px;color:var(--muted);font-size:16px;}
.section-head{margin-bottom:52px;}
.alt-bg{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}

/* ---------- Cards ---------- */
.card{
  background:var(--surface);
  border:1px solid #bbe31a;
  border-radius:var(--radius-lg);
}

/* ---------- Product cards ---------- */
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.product-card{
  position:relative;
  background:var(--surface);border:1px solid #bbe31a;border-radius:var(--radius-lg);
  overflow:hidden;display:block;
  aspect-ratio:980/1530;
  transition:transform 0.35s ease, border-color 0.35s ease;
  /* Mantiene il ritaglio arrotondato anche mentre l'immagine interna
     viene ingrandita in hover (evita che la foto sbordi dai bordi). */
  isolation:isolate;transform:translateZ(0);
  -webkit-mask-image:-webkit-radial-gradient(#fff, #000);
}
.product-card:hover{transform:translateY(-6px) translateZ(0);border-color:var(--border-acid);}
a.product-media{
  position:absolute;inset:0;
  background:radial-gradient(90% 70% at 50% 15%, rgba(187,227,26,0.14), transparent 60%), #101010;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;overflow:hidden;border-radius:inherit;
}
.product-media img.placeholder-mark{width:30%;opacity:0.4;transition:transform 0.4s ease, opacity 0.3s ease;}
a.product-media:hover img.placeholder-mark{transform:scale(1.08);opacity:0.6;}
a.product-media.has-photo img{width:100%;height:100%;object-fit:cover;opacity:1;transition:transform 0.6s ease;}
/* Le copertine dedicate sono allineate in basso, così il prodotto resta
   sopra la sfumatura e non viene coperto dai testi. */
a.product-media img.cover-img{object-position:bottom;}
.product-card:hover a.product-media.has-photo img{transform:scale(1.06);}
.product-media .tag{
  position:absolute;top:16px;right:18px;font-size:10.5px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--acid-dim);z-index:3;
}
/* Testo in sovrimpressione su fascia "glass" (vetro smerigliato) con ombra */
.product-body{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:76px 22px 24px;
  pointer-events:none;
}
.product-body::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top, rgba(6,7,5,0.97) 0%, rgba(6,7,5,0.9) 45%, rgba(6,7,5,0.6) 72%, rgba(6,7,5,0.2) 90%, transparent 100%);
}
.product-body h3{font-size:23px;margin-bottom:8px;color:var(--acid);}
.product-body p{font-size:14px;color:rgba(255,255,255,0.9);margin-bottom:16px;line-height:1.5;}
.product-link{
  font-size:12.5px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:#fff;
  display:inline-flex;align-items:center;gap:8px;pointer-events:auto;
}
.product-link svg{width:14px;height:14px;transition:transform 0.25s ease;stroke:var(--acid);}
.product-card:hover .product-link svg{transform:translateX(4px);}

@media (max-width:980px){.product-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.product-grid{grid-template-columns:1fr;}}

.product-single-wrap{max-width:340px;margin:0 auto;}

/* ---------- Testimonials ---------- */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.testi-card{
  background:var(--surface);border:1px solid #bbe31a;border-radius:var(--radius-lg);
  padding:32px;display:flex;flex-direction:column;gap:18px;
}
.testi-stars{display:flex;gap:4px;color:var(--acid);}
.testi-stars svg{width:16px;height:16px;fill:var(--acid);}
.testi-card p.quote{color:var(--white);font-size:15px;line-height:1.7;margin:0;flex:1;}
.testi-person{display:flex;align-items:center;gap:12px;}
.testi-avatar{
  width:42px;height:42px;border-radius:50%;background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;font-weight:500;color:var(--acid);
  border:1px solid var(--border-acid);flex:none;
}
.testi-person span{display:block;}
.testi-person .name{font-size:14px;font-weight:500;color:var(--white);}
.testi-person .role{font-size:12px;color:var(--muted);}

@media (max-width:980px){.testi-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.testi-grid{grid-template-columns:1fr;}}

/* ---------- About page ---------- */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
/* Il logo poggia direttamente sul nero, senza cornice. Al posto del riquadro
   c'è un alone verde scuro che sfuma nel nero: dà profondità e stacca la figura
   dal fondo senza disegnare un bordo. Vale sia per la home sia per Chi siamo.

   Il logo è centrato in verticale, quindi il suo centro sta al 50%: l'alone è
   al 56%, appena sotto, così resta una luce che sale da dietro il marchio senza
   sembrare sfasata verso il basso.

   Attenzione ai raggi: l'alpha deve arrivare a zero PRIMA dei bordi, altrimenti
   lo sfondo viene tagliato di netto sul perimetro e ricompare un riquadro.
   Con lo stop trasparente all'80%, l'alone si spegne a 0.8 x 56% = 45% dal
   centro in orizzontale (cioè fra il 5% e il 95%) e a 0.8 x 52% = 42% in
   verticale (fra il 14% e il 98%). Tutto dentro il contenitore. */
.about-visual{
  border:none;border-radius:0;
  background:radial-gradient(ellipse 56% 52% at 50% 56%,
    rgba(147,181,18,0.32) 0%,
    rgba(147,181,18,0.15) 38%,
    rgba(147,181,18,0.05) 62%,
    transparent 80%);
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:visible;
}
.about-visual img{width:65%;filter:drop-shadow(0 22px 44px rgba(0,0,0,0.55));}
.value-list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:14px;}
.value-list li{display:flex;gap:12px;align-items:flex-start;color:var(--white);font-size:15px;}
.value-list li::before{
  content:"";flex:none;width:11px;height:17px;margin-top:2px;
  background-color:var(--acid);
  -webkit-mask-image:var(--arrow-mask);mask-image:var(--arrow-mask);
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
}
@media (max-width:900px){
  .about-grid{grid-template-columns:1fr;}
  .about-visual{order:-1;}
}

/* ---------- Contact page ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
.contact-card{background:var(--surface);border:1px solid #bbe31a;border-radius:var(--radius-lg);padding:40px;}
.contact-row{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--border);font-size:15.5px;}
.contact-row:last-child{border-bottom:none;}
.contact-row .ic{
  flex:none;width:38px;height:38px;border-radius:50%;background:rgba(187,227,26,0.12);
  display:flex;align-items:center;justify-content:center;
  transition:background 0.2s ease, color 0.2s ease;
}
a.contact-row-link{color:var(--white);transition:color 0.2s ease;}
a.contact-row-link:hover{color:var(--acid);}
a.contact-row-link:hover .ic{background:rgba(187,227,26,0.22);color:var(--acid);}
.address-lines{line-height:1.6;}
.contact-row-address{align-items:flex-start;}
.contact-row-address .ic{margin-top:2px;}
.contact-row .ic svg{width:17px;height:17px;stroke:var(--acid);}
.contact-row a:hover{color:var(--acid);}

.form-field{margin-bottom:18px;}
.form-field label{display:block;font-size:12.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
.form-field input,.form-field textarea{
  width:100%;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;
  padding:14px 16px;color:var(--white);font-family:'Poppins',sans-serif;font-size:14.5px;
  transition:border-color 0.2s ease;
}
.form-field input:focus,.form-field textarea:focus{outline:none;border-color:var(--acid);}
.form-field textarea{resize:vertical;min-height:120px;}
.map-frame{border-radius:var(--radius-lg);overflow:hidden;border:1px solid #bbe31a;min-height:300px;}
.map-frame-sm{min-height:190px;height:190px;}
.map-frame-sm iframe{min-height:190px;}
.contact-social-row{display:flex;gap:14px;margin:18px 0 24px;}
.contact-social-row a{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;
  border:1px solid var(--border);color:var(--white);
  transition:border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.contact-social-row a svg{width:18px;height:18px;}
.contact-social-row a:hover{border-color:var(--acid);color:var(--acid);transform:translateY(-2px);}
.contact-form-col{display:flex;}
.contact-form-card{flex:1;display:flex;flex-direction:column;}
.contact-form-card form{display:flex;flex-direction:column;flex:1;}
.contact-form-card .form-field:last-of-type{flex:1;display:flex;flex-direction:column;}
.contact-form-card .form-field:last-of-type textarea{flex:1;}
.map-frame iframe{width:100%;height:100%;min-height:300px;border:0;filter:grayscale(1) invert(0.9) contrast(0.9);}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;}}

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  text-align:center;padding:90px 0;
}
.cta-band h2{margin-bottom:12px;}
.cta-band p{max-width:520px;margin:0 auto 30px;color:var(--muted);}

/* ---------- Footer ---------- */
footer.site-footer{background:var(--bg);padding:60px 30px 30px;border-top:1px solid var(--border);}
.footer-top{
  display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap;
  padding-bottom:36px;margin-bottom:26px;border-bottom:1px solid var(--border);
}
.footer-brand{display:flex;align-items:flex-start;}
.footer-brand img{height:210px;width:auto;}
.footer-brand img.footer-logo-horizontal{display:none;}
.footer-col h5{
  margin:0 0 16px;font-size:12px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:var(--acid);
}
.footer-col-contact{flex:0 0 auto;width:260px;max-width:320px;}
.footer-contact-social-group{display:contents;}
.footer-col-social{flex:none;}
.footer-social{display:flex;flex-direction:column;gap:12px;}
.footer-social a{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  border:1px solid var(--border);color:var(--muted);
  transition:border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.footer-social a svg{width:16px;height:16px;}
.footer-social a:hover{border-color:var(--acid);color:var(--acid);transform:translateY(-2px);}
.footer-nav{display:flex;flex-direction:column;gap:11px;}
.footer-nav a{font-size:12px;letter-spacing:0.05em;color:var(--muted);}
.footer-nav a:hover{color:var(--acid);}
.footer-contact{display:flex;flex-direction:column;gap:14px;}
.footer-contact-item{
  display:flex;align-items:center;gap:12px;
  font-size:14px;color:var(--muted);line-height:1.5;
  transition:color 0.2s ease;
}
.footer-contact-item:hover{color:var(--acid);}
.footer-contact-item .ic{
  flex:none;width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);color:var(--muted);
  transition:border-color 0.2s ease, color 0.2s ease;
}
.footer-contact-item .ic svg{width:14px;height:14px;}
.footer-contact-item:hover .ic{border-color:var(--acid);color:var(--acid);}
.footer-address{line-height:1.5;}
.footer-contact-address{align-items:flex-start;}
.footer-contact-address .ic{margin-top:1px;}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--muted);}
.footer-legal-row{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;
  font-size:11px;padding:0 18px;border-left:1px solid var(--border);border-right:1px solid var(--border);
}
.footer-legal-sep{color:var(--border);}
.footer-legal-link{color:var(--muted);transition:color 0.2s ease;}
.footer-legal-link:hover{color:var(--acid);}
@media (max-width:700px){
  .footer-bottom{flex-direction:column;text-align:center;}
  .footer-legal-row{border-left:none;border-right:none;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:12px 0;width:100%;}
}
@media (max-width:600px){
  footer.site-footer{padding-left:16px;padding-right:16px;}
  footer.site-footer .wrap{padding-left:12px;padding-right:12px;}
}
@media (max-width:600px){
  /* Solo su mobile: logo orizzontale (più grande) al posto di quello
     verticale; logo, contatti e social allineati a sinistra allo stesso
     margine; Naviga resta un blocco a parte, centrato nel footer. */
  .footer-brand img.footer-logo-vertical{display:none;}
  .footer-brand img.footer-logo-horizontal{display:block;height:auto;width:min(300px,84vw);}
  .footer-top{
    flex-direction:column;align-items:center;text-align:left;
    gap:28px;
  }
  .footer-brand{justify-content:center;}
  .footer-col{width:100%;max-width:280px;display:flex;flex-direction:column;align-items:flex-start;}
  .footer-contact-social-group{
    display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;
    width:100%;max-width:min(300px,84vw);
  }
  .footer-col-contact{max-width:none;width:auto;flex:none;}
  .footer-col-social{flex:none;width:auto;max-width:none;margin-top:0;}
  .footer-social{flex-direction:column;gap:12px;margin-top:8px;}
  .footer-col-nav{align-self:center;align-items:center;}
  .footer-col-nav .footer-nav{align-items:center;text-align:center;}
}


/* ---------- Banner cookie ---------- */
.cookie-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:3000;
  background:#0a0a0a;border-top:1px solid var(--border-acid);
  box-shadow:0 -20px 50px -20px rgba(0,0,0,0.6);
  transform:translateY(110%);
  transition:transform 0.45s ease;
}
.cookie-banner.visible{transform:translateY(0);}
.cookie-banner-inner{
  max-width:1240px;margin:0 auto;padding:22px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
}
.cookie-banner-text{flex:1 1 380px;min-width:0;}
.cookie-banner-text p{margin:0;font-size:13.5px;line-height:1.65;color:var(--muted);}
.cookie-banner-text a{color:var(--acid);text-decoration:underline;text-underline-offset:2px;}
.cookie-banner-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;flex:0 0 auto;}
.cookie-banner-actions .btn{padding:11px 20px;font-size:12px;}

.cookie-prefs-panel{
  max-width:1240px;margin:0 auto;overflow:hidden;
  max-height:0;transition:max-height 0.35s ease, padding 0.35s ease;
  padding:0 24px;
}
.cookie-banner.prefs-open .cookie-prefs-panel{max-height:320px;padding:0 24px 22px;}
.cookie-prefs-inner{border-top:1px solid var(--border);padding-top:18px;display:flex;flex-direction:column;gap:14px;}
.cookie-toggle-row{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;}
.cookie-toggle-info h4{margin:0 0 4px;font-size:13.5px;font-weight:500;color:var(--white);}
.cookie-toggle-info p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.5;}
.cookie-switch{
  position:relative;flex:none;width:42px;height:24px;border-radius:100px;
  background:var(--surface-2);border:1px solid var(--border);cursor:pointer;
  transition:background 0.2s ease, border-color 0.2s ease;
}
.cookie-switch::after{
  content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:var(--muted);transition:transform 0.2s ease, background 0.2s ease;
}
.cookie-switch.on{background:rgba(187,227,26,0.18);border-color:var(--acid);}
.cookie-switch.on::after{transform:translateX(18px);background:var(--acid);}
.cookie-switch.disabled{cursor:not-allowed;opacity:0.6;}
.cookie-prefs-save{align-self:flex-end;}

@media (max-width:700px){
  .cookie-banner-inner{padding:18px 18px;gap:16px;}
  .cookie-banner-actions{width:100%;justify-content:flex-start;}
  .cookie-banner-actions .btn{flex:1 1 auto;text-align:center;justify-content:center;}
  .cookie-prefs-panel{padding:0 18px;}
  .cookie-banner.prefs-open .cookie-prefs-panel{padding:0 18px 18px;}
}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity 0.8s ease, transform 0.8s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}

/* ---------- Video intro overlay (injected by JS) ---------- */
.video-intro{
  position:fixed;inset:0;z-index:2000;
  display:flex;align-items:center;justify-content:center;
  background:#000000;
  overflow:hidden;
  transition:opacity 1.1s ease;
}
.video-intro.fade-out{opacity:0;pointer-events:none;}
.video-frame{
  height:120svh;
  max-height:120svh;
  width:auto;
  max-width:none;
}
.video-frame video{
  display:block;
  height:100%;
  width:auto;
  max-width:none;
  object-fit:cover;
  /* Il video ha uno sfondo nero pieno: con "screen" i pixel neri diventano
     otticamente trasparenti sullo sfondo nero dell'overlay sottostante,
     lasciando visibile solo il logo che si illumina, senza alcun riquadro
     o bordo visibile da arrotondare/ombreggiare. */
  mix-blend-mode:screen;
}
@media (max-width:600px){
  .video-frame{height:100svh;max-height:100svh;max-width:none;}
}
.skip-intro{
  position:absolute;bottom:26px;right:26px;z-index:2001;
  background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.2);
  color:var(--white);font-family:'Poppins',sans-serif;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;
  padding:9px 16px;border-radius:100px;cursor:pointer;transition:background 0.2s ease;
}
.skip-intro:hover{background:rgba(255,255,255,0.16);}

.unmute-intro{
  position:absolute;bottom:26px;left:26px;z-index:2001;
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(187,227,26,0.14);border:1px solid var(--acid);
  color:var(--acid);font-family:'Poppins',sans-serif;font-weight:500;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;
  padding:9px 16px;border-radius:100px;cursor:pointer;transition:background 0.2s ease;
  animation:unmutePulse 1.8s ease-in-out infinite;
}
.unmute-intro svg{width:15px;height:15px;flex:none;}
.unmute-intro:hover{background:rgba(187,227,26,0.24);}
@keyframes unmutePulse{
  0%, 100%{box-shadow:0 0 0 0 rgba(187,227,26,0.4);}
  50%{box-shadow:0 0 0 6px rgba(187,227,26,0);}
}
@media (max-width:600px){
  .skip-intro{bottom:20px;right:16px;padding:8px 14px;font-size:11px;}
  .unmute-intro{bottom:20px;left:16px;padding:8px 14px;font-size:11px;}
  .unmute-intro svg{width:13px;height:13px;}
}

@media (max-width:600px){
  section{padding:48px 0;}
  .page-header{padding:150px 0 50px;}
}

/* ---------- Product carousel (slide gallery) ---------- */
.carousel{position:relative;margin-top:46px;}
.carousel-track{
  display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-top:10px;padding-bottom:8px;scrollbar-width:none;
}
.carousel-track::-webkit-scrollbar{display:none;}
.carousel-slide{
  flex:0 0 auto;width:260px;scroll-snap-align:start;position:relative;
  background:var(--surface);border:1px solid #bbe31a;border-radius:var(--radius-md);
  overflow:hidden;transition:border-color 0.3s ease, transform 0.3s ease;
  aspect-ratio:980/1530;
  /* Mantiene il ritaglio arrotondato anche mentre l'immagine interna
     viene ingrandita in hover (evita che la foto sbordi dai bordi). */
  isolation:isolate;transform:translateZ(0);
  -webkit-mask-image:-webkit-radial-gradient(#fff, #000);
}
.carousel-slide:hover{border-color:var(--border-acid);transform:translateY(-4px) translateZ(0);}
.carousel-slide a{display:block;position:absolute;inset:0;}
.carousel-media{
  position:absolute;inset:0;
  background:radial-gradient(90% 70% at 50% 15%, rgba(187,227,26,0.14), transparent 60%), #101010;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;border-radius:inherit;
}
.carousel-media img{width:34%;opacity:0.5;transition:transform 0.6s ease;}
/* Segnaposto nel carosello (prodotti ancora senza foto): il badge va sfilato
   dal flusso flex, altrimenti diventa un secondo elemento accanto al logo e
   ne rompe la centratura. */
.carousel-media .tag{
  position:absolute;top:14px;right:16px;font-size:10.5px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--acid-dim);z-index:3;
}
.carousel-media.has-photo{display:block;}
.carousel-media.has-photo img{width:100%;height:100%;object-fit:cover;opacity:1;}
.carousel-media img.cover-img{object-position:bottom;}
.carousel-slide:hover .carousel-media.has-photo img{transform:scale(1.06);}
.carousel-caption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:90px 18px 18px;
  pointer-events:none;
}
.carousel-caption::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top, rgba(6,7,5,0.97) 0%, rgba(6,7,5,0.9) 48%, rgba(6,7,5,0.55) 74%, rgba(6,7,5,0.18) 90%, transparent 100%);
}
.carousel-caption h4{margin:0 0 4px;font-size:16px;color:var(--acid);font-weight:500;}
.carousel-caption span{font-size:12px;color:#fff;letter-spacing:0.04em;}
.carousel-controls{display:flex;gap:12px;justify-content:flex-end;margin-bottom:18px;}
.carousel-btn{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--border);background:transparent;
  color:var(--white);display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:border-color 0.2s ease, color 0.2s ease;
}
.carousel-btn:hover{border-color:var(--acid);color:var(--acid);}
.carousel-btn svg{width:18px;height:18px;}
@media (max-width:600px){
  .carousel-slide{width:210px;}
}

/* ---------- Product detail page ---------- */
.product-hero{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:flex-start;}
.product-details{margin-top:48px;padding-top:44px;border-top:1px solid var(--border);}
.product-details-title{
  font-family:'Poppins',sans-serif;font-size:13px;font-weight:500;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--acid);margin:0 0 8px;
}
.product-hero-media{
  aspect-ratio:4/5;border-radius:var(--radius-lg);border:1px solid #bbe31a;
  background:radial-gradient(90% 70% at 50% 15%, rgba(187,227,26,0.14), transparent 60%), var(--surface);
  display:flex;align-items:center;justify-content:center;position:relative;
}
.product-hero-media img{width:30%;opacity:0.5;}
.product-hero-media .tag{
  position:absolute;bottom:18px;right:20px;font-size:10.5px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--acid-dim);
}
/* Galleria prodotto (quando ci sono foto reali) */
.product-hero-media.has-images{
  aspect-ratio:auto;border:none;background:none;display:block;
}
.product-hero-media.has-images img{width:100%;opacity:1;}
.gallery-main{
  border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);
  background:var(--surface);aspect-ratio:4/3;
  position:relative;display:flex;align-items:center;justify-content:center;
}
.gallery-main img{width:100%;height:100%;object-fit:cover;display:block;}

/* ---------- Avvisi "in arrivo" (work in progress) ---------- */
/* Galleria senza foto */
.gallery-main img.gallery-placeholder-img{width:26%;height:auto;object-fit:contain;opacity:0.3;}
.gallery-wip{
  position:absolute;left:0;right:0;bottom:26px;margin:0;text-align:center;
  font-size:14px;font-weight:500;letter-spacing:0.06em;color:var(--acid);
}
.gallery-wip span{
  display:block;margin-top:4px;font-size:11px;font-weight:400;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--muted);
}
/* Pannello documento non ancora caricato */
.doc-wip{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;padding:52px 20px;text-align:center;
  border:1px dashed var(--border);border-radius:8px;margin:16px 18px 20px;
  background:rgba(187,227,26,0.03);
}
.doc-wip svg{width:30px;height:30px;color:var(--acid);opacity:0.75;}
.doc-wip-title{margin:4px 0 0;font-size:15px;font-weight:500;color:var(--acid);}
.doc-wip-sub{
  margin:0;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);
}
/* Prodotto non ancora pubblicato */
.coming-soon-notice{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;text-align:center;padding:56px 24px;
  border:1px dashed var(--border-acid);border-radius:var(--radius-lg);
  background:rgba(187,227,26,0.04);margin-bottom:28px;
}
.coming-soon-notice svg{width:38px;height:38px;color:var(--acid);opacity:0.85;}
.coming-soon-notice h2{
  margin:2px 0 0;font-size:22px;font-weight:500;letter-spacing:0.04em;color:var(--acid);
}
.coming-soon-notice p{margin:0;color:var(--muted);font-size:15px;line-height:1.6;}
.coming-soon-cta{margin-top:6px !important;font-size:14px !important;}
.coming-soon-cta a{color:var(--acid);text-decoration:underline;text-underline-offset:2px;}
.coming-soon-cta a:hover{color:var(--white);}
.gallery-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px;}
.gallery-thumb{
  padding:0;border:1px solid var(--border);border-radius:10px;overflow:hidden;
  cursor:pointer;background:none;aspect-ratio:1/1;transition:border-color 0.2s ease;
}
.gallery-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.gallery-thumb:hover{border-color:var(--border-acid);}
.gallery-thumb.active{border-color:var(--acid);}

/* ---------- Lightbox anteprima ingrandita ---------- */
.lightbox{
  position:fixed;inset:0;z-index:4000;background:rgba(6,8,10,0.94);
  display:flex;align-items:center;justify-content:center;
  animation:lightboxFade 0.2s ease;
}
.lightbox[hidden]{display:none;}
@keyframes lightboxFade{from{opacity:0;}to{opacity:1;}}
.lightbox-stage{
  max-width:90vw;max-height:86vh;display:flex;align-items:center;justify-content:center;
}
.lightbox-stage img{
  max-width:90vw;max-height:86vh;object-fit:contain;border-radius:8px;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
}
.lightbox-close{
  position:absolute;top:20px;right:20px;width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.2);
  color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background 0.2s ease, border-color 0.2s ease;
}
.lightbox-close:hover{background:rgba(187,227,26,0.2);border-color:var(--acid);}
.lightbox-close svg{width:22px;height:22px;}
.lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.2);
  color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background 0.2s ease, border-color 0.2s ease;
}
.lightbox-nav:hover{background:rgba(187,227,26,0.2);border-color:var(--acid);}
.lightbox-nav svg{width:26px;height:26px;}
.lightbox-prev{left:20px;}
.lightbox-next{right:20px;}
.lightbox-counter{
  position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,0.75);font-size:13px;letter-spacing:0.08em;
}
@media (max-width:600px){
  .lightbox-nav{width:44px;height:44px;}
  .lightbox-prev{left:10px;}
  .lightbox-next{right:10px;}
  .lightbox-stage img{max-width:94vw;}
}
.product-price{font-size:26px;color:var(--acid);font-weight:500;margin:6px 0 20px;}
.specs-table{width:100%;border-collapse:collapse;margin:16px 0 28px;}
.specs-table tr{border-bottom:1px solid var(--border);}
.specs-table tr:last-child{border-bottom:none;}
.specs-table th, .specs-table td{
  text-align:left;padding:14px 4px;font-size:14.5px;font-weight:400;
}
.specs-table th{color:var(--muted);width:30%;font-weight:400;letter-spacing:0.03em;padding-right:24px;vertical-align:top;}
.specs-table td{color:var(--white);vertical-align:top;}

/* ---------- Elenchi puntati dentro le specifiche ----------
   Stessa freccetta del brand usata in .value-list, ma in formato ridotto:
   qui i punti elenco stanno dentro la tabella, dove il testo e' piu' piccolo
   e le voci possono andare su piu' righe. Il rientro appeso (flex) tiene il
   testo allineato sotto se stesso invece che sotto la freccia. */
.specs-table td .spec-list{list-style:none;margin:0;padding:0;display:grid;gap:9px;}
.specs-table td .spec-list li{display:flex;gap:9px;align-items:flex-start;}
.specs-table td .spec-list li::before{
  content:"";flex:none;width:7px;height:11px;margin-top:5px;
  background-color:var(--acid);
  -webkit-mask-image:var(--arrow-mask);mask-image:var(--arrow-mask);
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
}
/* Testo introduttivo o conclusivo che accompagna l'elenco (es. "Consulta la
   scheda tecnica..."): resta fuori dall'elenco, senza freccetta. */
.specs-table td .spec-intro,
.specs-table td .spec-outro{margin:0;}
.specs-table td .spec-intro + .spec-list{margin-top:9px;}
.specs-table td .spec-list + .spec-outro{margin-top:11px;}

.breadcrumb{font-size:12.5px;color:var(--muted);margin-bottom:14px;letter-spacing:0.04em;}
.breadcrumb a{color:var(--muted);}
.breadcrumb a:hover{color:var(--acid);}

/* ---------- Link ai documenti nelle specifiche ---------- */
.specs-table td .doc-link{
  color:var(--acid);text-decoration:underline;text-underline-offset:2px;
  cursor:pointer;font-weight:500;
}
.specs-table td .doc-link:hover{color:var(--white);}
.specs-table td .spec-highlight{color:#bbe31a;font-weight:500;}

/* ---------- Pannelli documento a tendina ---------- */
.product-docs{margin:8px 0 28px;display:flex;flex-direction:column;gap:10px;}
.doc-panel{border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;transition:border-color 0.2s ease;}
.doc-panel.open{border-color:var(--border-acid);}
.doc-toggle{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--surface);border:none;cursor:pointer;
  padding:15px 18px;font-family:'Poppins',sans-serif;font-size:14px;font-weight:500;
  color:var(--white);text-align:left;transition:background 0.2s ease, color 0.2s ease;
}
.doc-toggle:hover{background:rgba(187,227,26,0.06);color:var(--acid);}
.doc-panel.open .doc-toggle{color:var(--acid);}
.doc-toggle-label{display:flex;align-items:center;gap:11px;}
.doc-toggle-label svg{width:17px;height:17px;flex:none;}
.doc-chevron{width:16px;height:16px;flex:none;transition:transform 0.3s ease;}
.doc-panel.open .doc-chevron{transform:rotate(180deg);}
.doc-body{max-height:0;overflow:hidden;transition:max-height 0.35s ease;}
.doc-viewer{padding:16px 18px 20px;}
/* Contenitore scheda: 16:9 di partenza. Al caricamento del documento il JS
   (vedi prodotto.html) sovrascrive aspect-ratio inline con le proporzioni reali
   del file, se questo è più basso del 16:9 (schede pouff). Se invece è più alto,
   resta 16:9 e il documento scorre dentro .doc-scroll. La larghezza non cambia mai. */
.doc-viewer-frame{
  /* box-sizing:content-box è deliberato (il resto del sito è border-box).
     Con border-box l'aspect-ratio dimensiona il bordo ESTERNO, mentre l'SVG
     deve stare nel box INTERNO, alto 2px in meno a parità di larghezza: il
     documento non ci sta per circa 1px e il fondo (bordo incluso) viene rasato.
     Con content-box l'aspect-ratio dimensiona il box interno, che combacia
     esatto con le proporzioni dell'SVG; i 2px del bordo si aggiungono fuori,
     e la larghezza resta quella del contenitore grazie al calc(). */
  box-sizing:content-box;
  width:calc(100% - 2px);aspect-ratio:1200/675;height:auto;
  border:1px solid var(--border);border-radius:8px;
  background:#000;display:block;
}
/* Involucro scorrevole: altezza fissa 16:9, il documento dentro può eccedere */
.doc-scroll{
  position:relative;
  width:100%;aspect-ratio:1200/675;
  overflow-y:auto;overflow-x:hidden;
  border:1px solid var(--border);border-radius:8px;
  background:#000;
  -webkit-overflow-scrolling:touch;
}
/* Dentro lo scroller l'oggetto NON ha proporzioni: prende l'altezza reale
   del documento (impostata via JS), così eccede e attiva lo scorrimento.
   pointer-events:none è essenziale: senza, l'<object> cattura la rotellina
   del mouse e la pagina scorre al posto del documento. */
.doc-scroll .doc-viewer-frame{
  border:none;border-radius:0;
  aspect-ratio:auto;
  width:100%;display:block;
  pointer-events:none;
}
/* Barra di scorrimento discreta, in linea con il tema scuro */
.doc-scroll::-webkit-scrollbar{width:10px;}
.doc-scroll::-webkit-scrollbar-track{background:rgba(255,255,255,0.04);}
.doc-scroll::-webkit-scrollbar-thumb{
  background:rgba(187,227,26,0.4);border-radius:8px;border:2px solid transparent;background-clip:content-box;
}
.doc-scroll::-webkit-scrollbar-thumb:hover{background:rgba(187,227,26,0.65);background-clip:content-box;}
.doc-scroll{scrollbar-width:thin;scrollbar-color:rgba(187,227,26,0.45) rgba(255,255,255,0.05);}
.doc-viewer-fallback{margin-top:10px;font-size:12.5px;color:var(--muted);}
.doc-viewer-fallback a{color:var(--acid);text-decoration:underline;}
.doc-viewer-mobile{text-align:center;}
.doc-viewer-mobile p{color:var(--muted);font-size:14px;margin:0 0 14px;}

/* Contenitore SVG con pulsante "Ingrandisci" sovrapposto */
.doc-viewer-holder{position:relative;}
.doc-zoom-open{
  position:absolute;bottom:12px;right:12px;z-index:2;
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(10,10,10,0.82);border:1px solid rgba(187,227,26,0.5);
  color:var(--acid);border-radius:100px;padding:8px 14px;cursor:pointer;
  font-family:'Poppins',sans-serif;font-size:12px;font-weight:500;letter-spacing:0.04em;
  transition:background 0.2s ease, border-color 0.2s ease;
}
.doc-zoom-open:hover{background:rgba(187,227,26,0.16);border-color:var(--acid);}
.doc-zoom-open svg{width:15px;height:15px;}
@media (max-width:700px){
  .doc-viewer-holder{cursor:zoom-in;}
  .doc-zoom-open span{display:none;}
  .doc-zoom-open{padding:9px;}
}

/* Overlay documento a schermo intero */
.doc-zoom{
  position:fixed;inset:0;z-index:4100;background:rgba(6,8,10,0.97);
  display:flex;flex-direction:column;animation:lightboxFade 0.2s ease;
}
.doc-zoom[hidden]{display:none;}
.doc-zoom-bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 18px;border-bottom:1px solid rgba(255,255,255,0.1);flex:none;
}
.doc-zoom-title{color:#fff;font-size:14px;font-weight:500;letter-spacing:0.03em;}
.doc-zoom-controls{display:flex;gap:10px;}
.doc-zoom-controls button{
  width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.2);
  color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background 0.2s ease, border-color 0.2s ease;
}
.doc-zoom-controls button:hover{background:rgba(187,227,26,0.2);border-color:var(--acid);}
.doc-zoom-controls button svg{width:20px;height:20px;}
.doc-zoom-stage{
  flex:1;overflow:auto;padding:16px;
  text-align:center;
  touch-action:none;cursor:grab;-webkit-overflow-scrolling:touch;
}
.doc-zoom-stage:active{cursor:grabbing;}
.doc-zoom-stage img{
  width:100%;height:auto;display:inline-block;border-radius:6px;
  user-select:none;-webkit-user-drag:none;
}

/* Suggerimento "tocca per ingrandire" sull'anteprima */
.doc-viewer{position:relative;}
.doc-viewer-frame{cursor:zoom-in;}
.doc-viewer-expand{
  position:absolute;top:24px;right:26px;display:flex;align-items:center;gap:7px;
  background:rgba(0,0,0,0.65);border:1px solid rgba(187,227,26,0.4);border-radius:100px;
  color:var(--acid);font-size:12px;padding:7px 13px;pointer-events:none;
}
.doc-viewer-expand svg{width:14px;height:14px;}

/* Visualizzatore documenti a schermo intero */
.doc-lightbox{
  position:fixed;inset:0;z-index:4100;background:rgba(6,8,10,0.97);
  display:flex;flex-direction:column;animation:lightboxFade 0.2s ease;
}
.doc-lightbox[hidden]{display:none;}
.doc-lightbox-bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 18px;border-bottom:1px solid rgba(255,255,255,0.12);flex:none;
}
.doc-lightbox-title{color:#fff;font-size:14px;font-weight:500;letter-spacing:0.02em;}
.doc-lightbox-tools{display:flex;gap:10px;}
.doc-lightbox-tools button{
  width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.2);
  color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background 0.2s ease, border-color 0.2s ease;
}
.doc-lightbox-tools button:hover{background:rgba(187,227,26,0.2);border-color:var(--acid);}
.doc-lightbox-tools svg{width:20px;height:20px;}
.doc-lightbox-stage{
  flex:1;overflow:auto;display:flex;align-items:flex-start;justify-content:center;
  padding:20px;-webkit-overflow-scrolling:touch;
}
.doc-lightbox-stage img{
  width:100%;max-width:1400px;height:auto;display:block;transform-origin:top center;
  transition:width 0.15s ease;border-radius:6px;
}
.doc-lightbox-hint{
  flex:none;text-align:center;color:rgba(255,255,255,0.6);font-size:12px;
  padding:10px 16px;margin:0;border-top:1px solid rgba(255,255,255,0.1);
}

@media (max-width:900px){
  .product-hero{grid-template-columns:1fr;}
}

/* ---------- Pulsante "Torna a inizio pagina" ----------
   Iniettato da main.js, quindi presente su tutte le pagine.
   z-index 1500: sopra i contenuti, ma sotto il banner cookie (3000), il menu
   mobile (2000) e le finestre di zoom dei documenti (4000+), che devono
   comunque restare in primo piano.
   --cookie-h è impostata da main.js: vale l'altezza del banner cookie quando
   è a schermo, 0 altrimenti. Così il pulsante si solleva per non finirci sotto. */
.back-to-top{
  position:fixed;right:24px;bottom:calc(var(--cookie-h, 0px) + 24px);z-index:1500;
  width:46px;height:46px;padding:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  border:1px solid var(--border-acid);
  background:rgba(10,10,10,0.85);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:var(--acid);
  cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease,
             bottom 0.45s ease, background-color 0.25s ease, border-color 0.25s ease;
}
.back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0);}
.back-to-top svg{width:20px;height:20px;display:block;}
.back-to-top:hover{background:var(--acid);border-color:var(--acid);color:#000;}
.back-to-top:focus-visible{outline:2px solid var(--acid);outline-offset:3px;}
@media (max-width:600px){
  .back-to-top{right:16px;bottom:calc(var(--cookie-h, 0px) + 16px);width:42px;height:42px;}
  .back-to-top svg{width:18px;height:18px;}
}
@media (prefers-reduced-motion: reduce){
  .back-to-top{transition:opacity 0.2s ease, visibility 0.2s ease;transform:none;}
  .back-to-top.visible{transform:none;}
}

/* ---------- Invito a lasciare una recensione ---------- */
.review-cta{text-align:center;}
/* Il filo divisorio ha senso solo se sopra ci sono davvero delle recensioni.
   Finché la griglia è vuota, l'invito è l'unico contenuto della sezione e un
   bordo sospeso in mezzo al nulla si vedrebbe. Quando le recensioni tornano,
   il separatore ricompare da solo: nessuna modifica al CSS. */
.testi-grid + .review-cta{
  margin-top:52px;padding-top:44px;
  border-top:1px solid var(--border);
}
/* Il sottotitolo della sezione recensioni deve stare su una riga sola sul
   desktop: .section-lede ha un max-width di 600px che lo manderebbe a capo.
   Il vincolo viene tolto solo sopra i 900px di finestra, così su tablet e
   telefono il testo continua ad andare a capo normalmente invece di uscire
   dallo schermo o rimpicciolirsi. */
@media (min-width:901px){
  .home-testi .section-lede{max-width:none;white-space:nowrap;}
}

.review-cta-title{
  font-size:22px;font-weight:500;color:var(--acid);margin:0 0 10px;
}
.review-cta-lede{
  color:var(--muted);font-size:14.5px;margin:0 auto 24px;max-width:520px;line-height:1.6;
}

/* ---------- Finestra "Scrivi la tua recensione" ----------
   z-index 3500: sopra il banner cookie (3000) e il pulsante torna-su (1500),
   sotto lo zoom dei documenti (4000+). */
.review-overlay{
  position:fixed;inset:0;z-index:3500;
  display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(0,0,0,0.78);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;transition:opacity 0.28s ease, visibility 0.28s ease;
}
.review-overlay.open{opacity:1;visibility:visible;}
.review-modal{
  position:relative;width:100%;max-width:560px;max-height:calc(100vh - 48px);
  overflow-y:auto;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:36px 34px 32px;
  transform:translateY(14px);transition:transform 0.28s ease;
}
.review-overlay.open .review-modal{transform:translateY(0);}
.review-modal h3{margin:0 0 8px;font-size:24px;font-weight:500;color:var(--white);}
.review-modal-lede{margin:0 0 26px;color:var(--muted);font-size:14px;line-height:1.6;}
.review-close{
  position:absolute;top:16px;right:16px;
  width:36px;height:36px;padding:0;display:flex;align-items:center;justify-content:center;
  border-radius:50%;border:1px solid var(--border);background:transparent;
  color:var(--muted);cursor:pointer;transition:color 0.2s ease, border-color 0.2s ease;
}
.review-close:hover{color:var(--acid);border-color:var(--border-acid);}
.review-close svg{width:18px;height:18px;}
.review-row{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;}
.review-modal .label-like{
  display:block;margin-bottom:8px;font-size:13px;color:var(--muted);letter-spacing:0.02em;
}
.review-modal .opt{color:rgba(255,255,255,0.4);}
.field-hint{display:block;margin-top:6px;font-size:12px;color:rgba(255,255,255,0.45);}
#rvStatus{margin:14px 0 0;font-size:13.5px;display:none;}

/* Stelle cliccabili: sotto ci sono cinque radio veri, nascosti ma raggiungibili
   da tastiera, così la valutazione resta accessibile e non è solo decorativa. */
.rating-input{display:flex;gap:6px;}
.rating-input .star{
  cursor:pointer;line-height:0;padding:2px;border-radius:6px;
}
.rating-input .star input{
  position:absolute;opacity:0;width:1px;height:1px;
}
.rating-input .star svg{
  width:26px;height:26px;fill:rgba(255,255,255,0.18);transition:fill 0.15s ease, transform 0.15s ease;
}
.rating-input .star.on svg{fill:var(--acid);}
.rating-input .star:hover svg{transform:scale(1.08);}
.rating-input .star input:focus-visible + svg{outline:2px solid var(--acid);outline-offset:2px;}

@media (max-width:600px){
  .review-modal{padding:30px 22px 26px;}
  .review-row{grid-template-columns:1fr;}
  .review-cta-title{font-size:19px;}
}

/* ---------- Trasparenza sull'origine delle immagini ----------
   Art. 50 Reg. UE 2024/1689: l'informazione dev'essere chiara, distinguibile e
   presente alla prima esposizione — non nascosta nei metadati né in un
   disclaimer a piè di pagina. Da qui il badge sull'immagine (ovunque compaia)
   e la didascalia estesa sotto la galleria della scheda prodotto. */

/* Badge sulle foto: eredita posizione e forma da .tag, cambia solo il tono.
   Sfondo semitrasparente perché sotto c'è la foto, non il nero della pagina. */
.tag-ai{
  background:rgba(0,0,0,0.55);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  padding:4px 9px;border-radius:999px;
  border:1px solid rgba(187,227,26,0.28);
  color:var(--acid-dim);
  font-size:9.5px;letter-spacing:0.1em;white-space:nowrap;
}
.carousel-media.has-photo .tag-ai,
.product-media.has-photo .tag-ai{
  position:absolute;top:14px;left:16px;right:auto;z-index:3;
}

/* Didascalia estesa: visibile solo quando la galleria ha davvero delle foto.
   Sui prodotti col segnaposto non ci sarebbe nulla da dichiarare. */
.product-hero-media .ai-notice{display:none;}
.product-hero-media.has-images .ai-notice{
  display:flex;gap:10px;align-items:flex-start;
  margin:16px 0 0;padding:12px 14px;
  border:1px solid var(--border);border-radius:10px;
  background:var(--surface);
  color:var(--muted);font-size:12.5px;line-height:1.6;
}
.ai-notice svg{flex:none;width:15px;height:15px;margin-top:2px;color:var(--acid-dim);}
.ai-notice strong{color:var(--white);font-weight:500;}
.ai-notice a{color:var(--acid);text-decoration:underline;text-underline-offset:2px;}
@media (max-width:600px){
  .tag-ai{font-size:9px;padding:3px 7px;}
  .carousel-media.has-photo .tag-ai,
  .product-media.has-photo .tag-ai{top:10px;left:12px;}
}


/* ---------- Filtro prodotti a due livelli (ambiente + categoria) ----------
   Le fasce chiare .alt-bg vengono assegnate dal JS della pagina prodotti,
   perché dipendono da quali sezioni sono visibili in quel momento. */
.category-chip.ambiente-chip{
  font-weight:500;
  border-color:var(--border-acid);
}
.category-chip.ambiente-chip.active{
  background:var(--acid);border-color:var(--acid);color:#000;
}
/* Separatore fra le due macro-categorie e le tipologie */
.category-sep{
  /* Separa le macro-categorie dalle tipologie. Non arriva a tutta altezza:
     lasciando un margine sopra e sotto resta allineato ai chip invece di
     sfiorare i bordi della barra. */
  width:2px;flex:none;
  align-self:stretch;margin:6px 10px;
  border-radius:2px;
  background:var(--acid);
}
@media (max-width:600px){
  .category-sep{display:none;}
}

/* ---------- Scheda segnaposto "Prodotto in arrivo" ----------
   Usata per i prodotti della collezione Outdoor non ancora pubblicati.
   Eredita da .product-card cornice, proporzioni e raggio, ma non è
   cliccabile e non contiene né nome né descrizione: solo il marchio e la
   dicitura, centrati. Niente effetto al passaggio del mouse, perché
   suggerirebbe che ci sia qualcosa da aprire. */
.product-card-soon{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;padding:24px;
  border-color:var(--border);
  cursor:default;
}
.product-card-soon:hover{transform:none;border-color:var(--border);}
/* Alone verde dietro al marchio, lo stesso della sezione di apertura della
   home: il logo emerge da una pozza di luce invece di stare su un nero piatto.
   Sta su un contenitore proprio, così resta centrato sul logo qualunque sia
   l'altezza della scritta sotto. La sfumatura si spegne prima dei bordi,
   altrimenti verrebbe tagliata di netto e si vedrebbe un rettangolo. */
.soon-mark{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  width:76%;aspect-ratio:4/3;
  background:radial-gradient(ellipse 56% 52% at 50% 56%,
    rgba(147,181,18,0.32) 0%,
    rgba(147,181,18,0.15) 38%,
    rgba(147,181,18,0.05) 62%,
    transparent 80%);
}
/* Il logo sta SOPRA l'alone, a piena opacità: identico al trattamento della
   home. Attenuandolo sembrerebbe immerso nella sfumatura invece che poggiato
   sopra. Lo z-index lo tiene esplicitamente in primo piano. */
.product-card-soon .placeholder-mark{
  position:relative;z-index:1;
  width:44%;max-width:120px;height:auto;opacity:1;
  filter:drop-shadow(0 14px 28px rgba(0,0,0,0.55));
}
.soon-label{
  margin:0;text-align:center;
  color:var(--acid-dim);
  font-size:clamp(15px,1.5vw,18px);font-weight:500;
  letter-spacing:0.14em;text-transform:uppercase;line-height:1.5;
}
@media (max-width:600px){
  .product-card-soon{gap:14px;}
  .soon-label{font-size:13px;letter-spacing:0.1em;}
}