/*
 * ============================================================
 *  COLORBY.COM — Homepage custom stylesheet
 *  Autore:  Trizero Digital Agency
 *  Data:    Giugno 2026
 *  Stack:   Bootstrap 5.3.3 + Bootstrap Icons 1.11.3
 *           Google Fonts: Manrope 700/800 (heading) +
 *                         Inter 400–700 (body)
 * ============================================================
 *
 *  INDICE
 *  ─────────────────────────────────────────────────────────
 *  1. Design Tokens (variabili CSS)
 *  2. Reset e base tipografica
 *  3. Utility globali
 *  4. Sistema bottoni
 *  5. Navbar  (① cb-nav)
 *  6. Hero    (② cb-hero)
 *     6a. Eyebrow bar
 *     6b. Testo hero
 *     6c. CTA assistita
 *     6d. Trust signals
 *     6e. Immagine hero
 *     6f. Griglia prodotti
 *  7. Proposition cards (③ cb-props)
 *  8. Su progetto (④ cb-custom)
 *  9. Chi siamo (⑤ cb-about)
 * 10. Social proof (⑥ cb-proof)
 * 11. Form preventivo split (⑦ cb-form)
 * 12. Footer (⑧ cb-footer)
 * 13. Responsive breakpoints
 * ─────────────────────────────────────────────────────────
 */


/* ============================================================
   1. DESIGN TOKENS
   ============================================================
   Palette semantica a 3 livelli (cfr. documento "Restyling
   Colori e Tipografia" — Trizero, aprile 2026):

   LIVELLO 1 — Brand primario
     --red        Colore azione: CTA, icone, accenti attivi
     --red-dark   Hover/pressed state dei bottoni rossi
     --red-soft   Sfondo soft per badge, eyebrow bar

   LIVELLO 2 — Neutri
     --dark       Heading e testo ad alto contrasto
     --text       Corpo testo principale
     --muted      Testo secondario, caption, label
     --gray-bg    Sfondo sezioni alternate (non bianco puro)
     --border     Bordi, divisori, outline

   LIVELLO 3 — Funzionali
     --green      Rassicurazione: trust mark, spunte form
     --blue       Informativo: FAQ, link informativi (uso ridotto)

   --radius      Raggio di curvatura standard per card e input
   ============================================================ */
:root {
  /* Brand primario */
  --red:        #dd393c;
  --red-dark:   #A0000E;
  --red-soft:   #FCEBEC;

  /* Neutri */
  --dark:       #111111;
  --text:       #2B2B2B;
  --muted:      #5C5C5C;

  /* Altezza navbar — aggiornata via JS al resize per posizionare il mega menu */
  --cb-nav-height: 65px;
  --gray-bg:    #f7f7f7;
  --border:     #D9D9D9;

  /* Funzionali */
  --green:      #2E7D32;
  --blue:       #0F4C81;

  /* Geometria */
  --radius:     10px;
}


/* ============================================================
   2. RESET E BASE TIPOGRAFICA
   ============================================================
   Sistema tipografico duale:
   - Manrope (700/800): heading h1–h6, CTA, eyebrow
   - Inter (400–700):   body, label, testo corrente

   Dimensioni con clamp() per fluidità senza breakpoint fissi.
   Il valore centrale (1.xvw) scala linearmente con il viewport;
   i limiti min/max evitano problemi su schermi estremi.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

/* Scroll fluido gestito da JS per controllare l'offset della
   navbar sticky (altrimenti il target finisce sotto la nav) */
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(16px, 1.2vw, 17px); /* fluid: 16px mobile → 17px large desktop */
  line-height: 1.65;
  color: var(--text);
  background: #fff;
  margin: 0;
  -webkit-font-smoothing: antialiased; /* migliora la resa dei font su macOS/iOS */
}

/* Tutti gli heading usano Manrope per massima coerenza col brand */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Manrope', sans-serif;
  color: var(--dark);
}

/* h1 — Hero headline principale */
h1 {
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.045em; /* tight tracking rafforza l'autorevolezza */
}

/* h2 — Titolo di sezione */
h2 {
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.035em;
}

/* h3 — Sottotitoli card o sezioni secondarie */
h3 {
  font-size: clamp(24px, 2.5vw, 32px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.025em;
}

/* h4 */
h4 {
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* h5 — Card title, prop title */
h5 {
  font-size: clamp(17px, 1.5vw, 18px);
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Lead — paragrafo introduttivo con corpo maggiore */
.lead {
  font-size: clamp(18px, 1.6vw, 20px);
  line-height: 1.55;
}

a { text-decoration: none; color: var(--red);}


/* ============================================================
   3. UTILITY GLOBALI
   ============================================================ */

/* Padding verticale standard per le sezioni principali */
.py-sec { padding-top: 5rem; padding-bottom: 5rem; }

/* Etichetta sovra-titolo in uppercase rosso (es. "Chi siamo") */
.eyebrow {
  font-family: 'Manrope', sans-serif;
  font-size: 1rem;
  line-height: 1.8;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--red);
  display: block;
  margin-bottom: 1rem;
  margin-top: 2rem;
}
#about .eyebrow {
  margin-top: 0rem;
}

/* Titolo di sezione riutilizzabile fuori dagli heading semantici */
.sec-title {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--dark);
}

/* Sottotitolo/descrizione di sezione */
.sec-sub {
  color: var(--muted);
  font-size: clamp(16px, 1.2vw, 17px);
  line-height: 1.65;
}


/* ============================================================
   4. SISTEMA BOTTONI
   ============================================================
   Tre varianti semantiche:
   .btn-red     → Azione primaria (sfondo rosso brand)
   .btn-outline → Azione secondaria (outline neutro)
   .btn-link    → Link testuale con freccia (navigazione)

   Modificatore .btn-hero aumenta l'altezza del bottone
   principale nella hero per maggiore prominenza.
   ============================================================ */

/* Bottone rosso primario */
.btn-red {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background-image: linear-gradient(to right, #198754 0%, #39ba95 51%, #198754 100%);
  background-size: 200% auto;
  color: #fff;
  font-weight: 700;
  font-family: 'Manrope', sans-serif;
  font-size: 1.1rem;
  text-align: center;
  text-transform: uppercase;
  padding: 20px 30px;
  height: auto;
  border-radius: 10px;
  border: none;
  outline: none;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(0,0,0,.15);
  transition: background-position .5s, box-shadow .3s, transform .3s;
  text-decoration: none;
}
.btn-red:hover {
  background-position: right center;
  color: #fff;
  text-decoration: none;
  transform: scale(1.04);
}

/* Versione hero: stessa base, nessun override dimensionale */
.btn-red.btn-hero { padding: 20px 36px; }

/* Bottone outline neutro — azione secondaria */
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: #fff;
  color: var(--dark);
  font-weight: 700;
  font-family: 'Manrope', sans-serif;
  font-size: .9rem;
  height: 48px;
  padding: 0 1.5rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color .18s, color .18s;
}
.btn-outline:hover { border-color: var(--red); color: var(--red); }

/* Link testuale con micro-animazione gap sulla freccia */
.btn-link {
  color: var(--red);
  font-weight: 700;
  font-family: 'Manrope', sans-serif;
  font-size: .88rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  transition: gap .15s, color .15s;
}
.btn-link:hover { gap: .6rem; color: var(--dark); }


/* ============================================================
   5. NAVBAR  (① cb-nav)
   ============================================================
   Navbar sticky in cima alla viewport.
   La classe .scrolled viene aggiunta via JS (main.js) quando
   lo scrollY supera 40px, aggiungendo una leggera ombra che
   separa visivamente la nav dal contenuto sottostante.
   ============================================================ */
.cb-nav {
  background: #fff;
  border-bottom: none;
  box-shadow:
    0px 1px 1px rgba(0,0,0,.04),
    0px 2px 4px rgba(0,0,0,.03),
    0px 4px 10px rgba(0,0,0,.02);
    padding: 0px;
  padding-top: .5rem;
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: box-shadow .2s;
}
/* Full-width come il blocco form: niente max-width, solo respiro laterale */
.cb-nav .container-fluid {
  padding-left: clamp(1.25rem, 4vw, 3.5rem);
  padding-right: clamp(1.25rem, 4vw, 3.5rem);
}
/* Tablet e mobile (< 992px): margine laterale fisso al minimo (1.25rem = 20px) */
@media (max-width: 991.98px) {
  .cb-nav .container-fluid {
    padding-left: clamp(1.25rem, 0vw, 3.5rem);
    padding-right: clamp(1.25rem, 0vw, 3.5rem);
  }
}
.cb-nav.scrolled {
  box-shadow:
    0px 1px 2px rgba(0,0,0,.05),
    0px 3px 6px rgba(0,0,0,.04),
    0px 6px 14px rgba(0,0,0,.03);
}

/* Hamburger: rimuove border e box-shadow default Bootstrap */
.cb-nav .navbar-toggler {
  border: none;
  box-shadow: none;
  padding: 0;
  line-height: 1;
  color: var(--dark);
}
.cb-nav .navbar-toggler:focus { box-shadow: none; }

/* ── Menu mobile ── */
@media (max-width: 991px) {

  /* Pannello collapse: scroll interno se supera la viewport */
  .cb-nav .navbar-collapse.show,
  .cb-nav .navbar-collapse.collapsing {
    border-top: 1px solid var(--border);
    margin-top: .5rem;
    padding-bottom: 1.25rem;
    max-height: calc(100dvh - 80px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Flex column: tutto impilato */
  .cb-nav .navbar-collapse .d-flex {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100%;
    margin-top: .25rem !important;
  }

  /* Link principali: tap target generoso, testo leggibile */
  .nav-link-item {
    display: inline-block;
    font-size: .88rem;
    font-weight: 500;
    color: #111111;
    padding: .4rem .7rem;
    transition: color .15s;
    /*margin-top: 10px;*/
    border-bottom: none;
  }
  .nav-link-item:last-of-type { border-bottom: none; }
  .nav-link-item:hover,
  .nav-link-item:active { color: var(--red); background: none; }

  /* Dropdown toggle: chevron a destra */
  .nav-link-item.dropdown-toggle {
    justify-content: space-between !important;
    display: flex;
  }
  .nav-link-item.dropdown-toggle::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' fill='%23111111' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    border: none;
    margin-left: auto;
    flex-shrink: 0;
    transition: background-image .15s;
    vertical-align: middle;
  }
  .nav-link-item.dropdown-toggle[aria-expanded="true"]::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' fill='%23dd393c' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z'/%3E%3C/svg%3E");
  }

  /* Numero telefono nel menu (ora nascosto < 992px, regola lasciata per sicurezza) */
  .cb-nav .navbar-collapse a[href^="tel"] {
    font-size: .9rem;
    font-weight: 500;
    color: #555;
    border-bottom: 1px solid #f0f0f0;
   /* padding-bottom: 1rem;
    margin-bottom: .75rem;*/
  }

  /* Bottone Preventivo gratuito: full width, prominente */
  .cb-nav .btn-red {
    display: block;
    width: 100%;
    text-align: center;
    font-size: .95rem !important;
    padding: .9rem 1rem !important;
    border-radius: 8px !important;
    margin: .75rem 0 0 0 !important;
  }

  /* Widget recensioni: riga orizzontale, centrata */
  .nav-reviews-widget {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    text-decoration: none;
    line-height: 1;
    padding: 1.2rem .4rem;
    border-radius: 6px;
    transition: background .15s;
    margin-top: 1rem;
  }
  .nav-reviews-label {
    margin-top: 0;
    font-size: .7rem;
  }
  .nav-reviews-stars { font-size: 1rem; }
}

/* Logo: COLOR in nero, BY in rosso, .com in grigio chiaro */
.cb-logo {
  font-size: 1.9rem;
  font-weight: 900;
  color: var(--dark);
  letter-spacing: .5px;
}
.cb-logo .r { color: var(--red); }
.cb-logo .d { color: #bbb; font-weight: 400; }

/* Link di navigazione nella barra */
.nav-link-item {
  font-size: .88rem;
  font-weight: 500;
  color: #555;
  padding: .4rem .7rem;
  display: inline-block;
  transition: color .15s;
  text-transform: uppercase;
}
.nav-link-item:hover { color: var(--red); }

/* Widget recensioni in navbar */
.nav-reviews-widget {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  text-decoration: none;
  line-height: 1;
  padding: .2rem .4rem;
  border-radius: 6px;
  transition: background .15s;
}
.nav-reviews-widget:hover { background: #fff8ee; }
.nav-reviews-stars {
  font-size: .95rem;
  color: #fb9a33;
  letter-spacing: 1px;
}
.nav-reviews-label {
  font-size: .65rem;
  font-weight: 400;
  color: #111111;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-top: 5px;
}

/* Variante negativa/bianca — stesso widget su sfondo scuro (footer) */
.nav-reviews-widget--footer {
  align-items: flex-start;
  padding-left: 0;
  margin-top: 1rem;
}
.nav-reviews-widget--footer .nav-reviews-label { color: #fff; }
.nav-reviews-widget--footer .nav-reviews-stars { color: #fff; }
.nav-reviews-widget--footer:hover { background: rgba(255,255,255,.08); }

/* Caret Bootstrap sul dropdown Prodotti — ridimensionato */
.nav-link-item.dropdown-toggle::after {
  vertical-align: .12em;
  margin-left: .25rem;
  border-top-width: .28em;
  border-right-width: .28em;
  border-left-width: .28em;
}

/* ── 5a-bis. ICONE RAPIDE: RICERCA, CARRELLO, ACCOUNT ─────────
   Gruppo icona-only (nessuna etichetta testuale) presente sia
   in desktop (dentro la navbar-collapse, prima della CTA) sia
   in mobile (riga superiore, accanto all'hamburger).
   Ricerca è funzionale (apre l'overlay sotto); carrello e
   account sono placeholder UI da collegare in seguito.
   ─────────────────────────────────────────────────────────── */
.nav-icon-group {
  display: flex;
  align-items: center;
  gap: 2px;
  border-left: 1px solid #bababa;
}
@media (min-width: 992px) {
  .nav-icon-group { padding-left: 10px; }
}
.nav-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #3e3c3f;
  font-size: 1.2rem;
  transition: background .15s, color .15s;
}
.nav-icon-btn:hover,
.nav-icon-btn:focus-visible {
  background: #f4f4f4;
  color: var(--red);
}
.nav-search-btn[aria-expanded="true"] {
  background: var(--red-soft);
  color: var(--red);
}
.nav-icon-badge {
  display: inline-flex; /* attivare (display:inline-flex) quando il carrello avrà un conteggio reale */
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: .62rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 2px #fff;
}

.nav-icon-badge.is-empty { background: #b5b5b5; }

@media (max-width: 991px) {
  .nav-icon-group--mobile .nav-icon-btn {
    width: 40px;
    height: 40px;
    font-size: 1.05rem;
  }
  .nav-icon-group--mobile { gap: 0; padding-left: 0; border-left: none; }
}

/* ── Telefono nell'header (tablet e mobile) ──
   Mobile  (< 768px): icona tonda come le altre, in rosso per
                      distinguerla come azione di contatto.
   Tablet  (768–991px): pill con icona + numero, leggibile
                      anche per chi vuole copiarlo/annotarlo. */
.nav-phone-btn { color: #5c5c5c; }
@media (max-width: 991px) {
  .nav-icon-group--mobile .nav-phone-btn { background: #f7f7f7; }
}
.nav-phone-num { display: none; }
@media (min-width: 768px) and (max-width: 991px) {
  .nav-icon-group--mobile .nav-phone-btn {
    width: auto;
    padding: 0 .85rem 0 .7rem;
    border-radius: 8px;
    gap: .4rem;
    margin-right: .25rem;
  }
  .nav-phone-num {
    display: inline;
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .2px;
    white-space: nowrap;
  }
}

/* Mobile stretto (< 576px): logo più basso così logo + telefono +
   ricerca + carrello + hamburger restano su una sola riga anche a 360px */
@media (max-width: 575.98px) {
  .cb-nav .navbar-brand { margin-right: .5rem; }
  .cb-nav .navbar-brand img { height: 50px !important; width: auto; }
}
/* Schermi molto stretti (< 360px, es. iPhone SE 1ª gen.) */
@media (max-width: 359.98px) {
  .cb-nav .navbar-brand img { height: 40px !important; }
  .nav-icon-group--mobile .nav-icon-btn { width: 36px; height: 36px; }
}

/* Mobile e tablet (< 992px): hamburger a sinistra, prima del logo.
   Il wrapper .nav-mobile-actions diventa display:contents, così
   hamburger e gruppo icone diventano elementi flex diretti del
   .container-fluid e si possono riordinare con "order":
   [hamburger] [logo] ........ [ricerca account carrello]
   [              barra telefono                        ] */
@media (max-width: 991.98px) {
  .cb-nav .nav-mobile-actions { display: contents !important; }
  .cb-nav .navbar-toggler {
    order: -1;
    margin-right: .75rem;
  }
  .nav-icon-group--mobile { margin-left: auto; }
}

/* Solo mobile (< 768px): telefono su seconda riga, sotto logo e icone.
   Barra a tutta larghezza (flex-basis 100% nel .container-fluid,
   che è flex-wrap), stessi colori del pulsante telefono tablet. */
.nav-phone-bar { display: none; }
@media (max-width: 767.98px) {
  .nav-phone-bar {
    display: flex;
    flex-basis: 100%;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    /*margin-top: .6rem;*/
    height: 40px;
    border-radius: 8px;
    background: #f7f7f7;
    color: #5c5c5c;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .2px;
    text-decoration: none;
  }
  .nav-phone-bar:hover,
  .nav-phone-bar:active { color: #3e3c3f; }
  .nav-phone-bar .bi { font-size: 1rem; }

  /* L'header ora è più alto: il pannello del menu scrolla entro lo schermo */
  .cb-nav .navbar-collapse.show,
  .cb-nav .navbar-collapse.collapsing { max-height: calc(100dvh - 150px); }
}

/* ── Icone header: compensazione ottica ──────────────────────
   I glifi Bootstrap Icons occupano porzioni diverse dello stesso
   riquadro: a parità di font-size la persona disegna ~75% del
   riquadro, il carrello ~94%, la lente ~100% (ma con un tratto
   diagonale sottile che la fa sembrare più piccola). Questi
   fattori, in em rispetto alla font-size del pulsante, le portano
   alla stessa grandezza percepita su desktop, tablet e mobile. */
.nav-icon-btn .bi-search { font-size: 1.04em; }
.nav-icon-btn .bi-person { font-size: 1.12em; }
.nav-icon-btn .bi-cart3  { font-size: .98em; }
/* Hamburger (fs-3 rimosso dall'HTML): larghezza allineata alle altre
   icone, leggermente più piccolo perché ha tratti più spessi */
.cb-nav .navbar-toggler .bi-list { font-size: 2.8rem; display: block; font-weight: 900; }

/* ── 5a-ter. OVERLAY RICERCA ──────────────────────────────────
   Pannello a tutta larghezza, agganciato sotto la navbar sticky
   con lo stesso posizionamento (--cb-nav-height) del mega menu.
   Toggle via classe .search-active su .cb-nav (vedi main.js).
   ─────────────────────────────────────────────────────────── */
.cb-search-overlay {
  position: fixed;
  top: calc(var(--cb-nav-height, 65px) - 1px);
  left: 0;
  width: 100vw;
  background: #fff;
  border-top: 2px solid var(--red);
  border-bottom: 1px solid var(--border);
  box-shadow:
    0px 2px 3px rgba(0,0,0,.05),
    0px 6px 12px rgba(0,0,0,.05),
    0px 14px 28px rgba(0,0,0,.04);
  padding: 1.1rem 0;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s, transform .18s, visibility 0s .18s;
}
.cb-nav.search-active .cb-search-overlay {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .18s, transform .18s, visibility 0s;
}
.cb-search-form {
  display: flex;
  align-items: center;
  gap: .7rem;
  max-width: 640px;
  margin: 0 auto;
}
.cb-search-icon {
  font-size: 1.15rem;
  color: var(--muted);
  flex-shrink: 0;
}
.cb-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  font-family: 'Manrope', sans-serif;
  font-size: 1rem;
  color: var(--dark);
  background: transparent;
}
.cb-search-input::placeholder { color: #999; }
.cb-search-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  color: #777;
  font-size: 1rem;
  border-radius: 50%;
  transition: background .15s, color .15s;
}
.cb-search-close:hover { background: #f4f4f4; color: var(--red); }

@media (max-width: 991px) {
  .cb-search-overlay { padding: .9rem 0; }
}



/* ── 5b. MEGA MENU PRODOTTI ──────────────────────────────────
   Posizionato con position:fixed sotto la navbar sticky.
   La variabile --cb-nav-height viene aggiornata da main.js
   ad ogni resize per allinearsi sempre sotto la navbar.

   Su desktop (≥ 992px): 6 colonne in griglia orizzontale.
   Su mobile (< 992px):  colonne impilate dentro il collapse.
   ─────────────────────────────────────────────────────────── */
.mega-menu {
  /*
   * Bootstrap con data-bs-display="static" aggiunge [data-bs-popper]
   * al menu, attivando la regola Bootstrap:
   *   .dropdown-menu[data-bs-popper] { top: 100%; left: 0; margin-top: ... }
   * Quella regola ha specificità (0,2,0) > nostra (0,1,0).
   * Usiamo !important sulle proprietà di posizionamento per vincere.
   *
   * calc(-1px): sovrappone il border-bottom della navbar per
   * eliminare gap da subpixel rendering.
   */
  position: fixed !important;
  top: calc(var(--cb-nav-height, 65px) - 1px) !important;
  left: 0 !important;
  margin-top: 0 !important;
  transform: none !important;   /* blocca eventuali residui di Popper */
  width: 100vw;
  min-width: 100%;
  padding: 0;
  border: none;
  border-top: 2px solid var(--red);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  box-shadow:
    0px 2px 3px rgba(0,0,0,.05),
    0px 6px 12px rgba(0,0,0,.05),
    0px 14px 28px rgba(0,0,0,.04),
    0px 24px 48px rgba(0,0,0,.03);
  background: #fff;
  z-index: 999;
}

@keyframes megaFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Wrapper interno — usa il container Bootstrap per allinearsi alla pagina */
.mega-inner { padding: 1.6rem 0; }

/* Singola colonna di categoria */
.mega-inner .row { align-items: stretch; } /* tutte le colonne alte quanto la più lunga */
.mega-col {
  display: flex;
  flex-direction: column;
  padding: 0 1.2rem;
  border-left: 1px solid var(--border);
}
.mega-col:first-child { border-left: none; }

/* Titolo categoria — eyebrow rosso uppercase */
.mega-cat-title, .cb-panel-group {
  font-family: 'Manrope', sans-serif;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: .75rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--border);
  white-space: normal;
  line-height: 1.3;
  min-height: 2.6em; /* stessa altezza per tutti i titoli, su 1 o 2 righe */
  display: flex;
  align-items: flex-end;
}

/* Lista voci della categoria */
.mega-links { list-style: none; padding: 0; margin: 0; }
.mega-links li { margin-bottom: .05rem; }
.mega-links a {
  font-size: .81rem;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .22rem .3rem;
  border-radius: 4px;
  transition: background .12s, color .12s, transform .12s;
}
.mega-links a:hover {
  background: var(--red-soft);
  color: var(--red);
  transform: translateX(4px); /* leggero indent su hover, senza alterare la larghezza (niente reflow del testo) */
}

/* Mobile: mega menu inline nel collapse, non fixed */
@media (max-width: 991px) {
  .mega-menu {
    position: static !important;
    box-shadow: none;
    border: none;
    background: #f7f7f7;
    border-radius: 8px;
    margin: .25rem 0 .5rem;
    animation: none;
  }
  .mega-inner { padding: .25rem 0 .5rem; }

  /* Ogni categoria: tap target chiaro, separazione leggera */
  .mega-col {
    border-left: none;
    border-top: 1px solid #ebebeb;
    padding: .6rem .75rem .5rem 1rem;
  }
  .mega-col:first-child { border-top: none; }

  /* Titolo categoria: etichetta uppercase compatta */
  .mega-cat-title {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #999;
    margin-bottom: .35rem;
    margin-top: 1rem;
    border-bottom: 0;
    white-space: normal;
  }

  /* Voci di sottomenu: tap target 44px, testo leggibile */
  .mega-links a {
    display: block;
    min-height: 44px;
    line-height: 44px;
    font-size: .92rem;
    font-weight: 400;
    color: #333;
    padding: 0;
    white-space: normal;
    border-radius: 0;
    background: none;
  }
  .mega-links a:hover { color: var(--red); background: none; }
  .mega-links li { margin-bottom: 0; border-bottom: none; }
}


/* ============================================================
   6. HERO  (② cb-hero)
   ============================================================
   Layout desktop: row con align-items-stretch → entrambe le
   colonne raggiungono la stessa altezza indipendentemente dal
   contenuto. La colonna destra è d-flex flex-column, con
   .hero-img-wrap { flex:1 } che assorbe tutto lo spazio
   disponibile, mentre .hero-assisted-cta rimane in fondo
   alla stessa larghezza dell'immagine.

   Struttura visiva della colonna destra:
   ┌─────────────────────────┐
   │                         │  ← hero-img-wrap (flex:1)
   │     FOTO PRODOTTO       │
   │                         │
   └─────────────────────────┘
   │  📞  Parlaci della tua  │  ← hero-assisted-cta
   │      idea — 02.89378.1  │
   └─────────────────────────┘
   ============================================================ */
.cb-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(137deg, #111 0%, #440E1D 25%, #BF2C47 50%, #BF2A2A 100%);
  padding: 3.5rem 0 0;
}
/* Full-width come header/footer/form: niente max-width, solo respiro laterale */
.cb-hero > .container-fluid {
  padding-left: clamp(1.25rem, 4vw, 3.5rem);
  padding-right: clamp(1.25rem, 4vw, 3.5rem);
}

.hero-left-col { position: relative; z-index: 1; }

/* Wrapper layer animati — inset:0 rispetto a .cb-hero (position:relative) */
.hero-anim-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.hbl {
  position: absolute;
  top: 0; bottom: 0;
  left: -50%; right: -50%;
  opacity: .22;
}
.hbl1 {
  background-image: linear-gradient(-60deg, #BF2C47 50%, #464B59 50%);
  animation: hero-slide 3s ease-in-out infinite alternate;
}
.hbl2 {
  background-image: linear-gradient(-60deg, #D9CAC5 50%, #BF2A2A 50%);
  opacity: .28;
  animation: hero-slide 4s ease-in-out infinite alternate-reverse;
}
.hbl3 {
  background-image: linear-gradient(-60deg, #F2B4AE 50%, #464B59 50%);
  opacity: .25;
  animation: hero-slide 5s ease-in-out infinite alternate;
}

@keyframes hero-slide {
  0%   { transform: translateX(-25%); }
  100% { transform: translateX(25%); }
}

/* Contenuto sopra i layer */
.cb-hero > .container { position: relative; z-index: 1; }

/* ── Testo hero su sfondo scuro ── */
.cb-hero .hero-headline { color: #fff; }
.cb-hero .hero-sub {
  color: rgba(255,255,255,.82);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  font-weight: 500;
}
.cb-hero .hero-sub em { color: #fff; }
.cb-hero .hero-detail {
  color: #fff;
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.6;
  margin-top: .75rem;
  margin-bottom: 1.25rem;
}
.cb-hero .hero-trust-item            { color: rgba(255,255,255,.78); }
.cb-hero .hero-trust-item i          { color: rgba(255,255,255,.85); }
.cb-hero .hero-trust-item svg        { fill: rgba(255,255,255,.85); }
.cb-hero .hero-trust-item:nth-child(1) i { color: rgba(255,255,255,.78); }
.cb-hero .hero-trust-item:nth-child(2) i { color: rgba(255,255,255,.78); }
.cb-hero .hero-trust-item:nth-child(3) svg { fill: rgba(255,255,255,.85); }
.cb-hero .hero-trust-item:nth-child(3) i { color: #77b97b; }
.cb-hero .hero-trust-item:nth-child(4) i { color: #e2586a; }

/* Eyebrow pill: la versione light-on-dark funziona già bene
   con var(--red-soft) come bg — contrasto ~5.2:1 ✓ */

/* btn-outline nella hero su sfondo scuro */
.cb-hero .btn-outline {
  background: transparent;
  border-color: rgba(255,255,255,.35);
  color: #fff;
}
.cb-hero .btn-outline:hover {
  border-color: var(--red);
  color: var(--red);
  background: transparent;
}


/* ── 6a. Eyebrow bar ── */
/* Pill colorata sopra l'headline — short summary delle USP */
.hero-eyebrow-bar {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  width: fit-content;
  background: none;
  color: #fff;
  font-size: 1rem;
  line-height: 1.8;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 0;
  border-radius: 20px;
  margin-bottom: .9rem;
}
/* .hero-eyebrow-bar::before rimosso */
.hero-eyebrow-bar::before {
  display: none;
}


/* ── 6b. Testo hero ── */
.hero-headline {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(36px, 4.2vw, 62px); /* 4.2vw = 57px a 1366px → 2 righe in col 558px ✓ */
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--dark);
  margin-bottom: .85rem;
}

.hero-sub {
  color: #555;
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.7;
  margin-bottom: 1.4rem;
}


/* ── 6c. CTA assistita (percorso guidato con esperto) ── */
/* Bar sotto l'immagine — stesso width della colonna grazie a
   d-flex flex-column sul parent e flex-shrink:0 qui.
   border-top: none si aggancia visivamente al bordo inferiore
   dell'immagine soprastante. */
/* ── Due CTA affiancate sotto la foto ── */
.hero-cta-group {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  padding: 1rem .5rem;
  background: rgba(255,255,255,.96);
  border-radius: 0 0 var(--radius) var(--radius);
  overflow: hidden; /* evita che lo scale al hover dei bottoni sbordi dal box bianco */
  z-index: 1;
  box-shadow:
    0px 1px 2px rgba(0,0,0,.07),
    0px 4px 8px rgba(0,0,0,.07),
    0px 10px 20px rgba(0,0,0,.06);
}
.hero-cta {
  flex: 1;
  min-height: 56px;
  padding: 0 30px;
  border-radius: 10px;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: .95rem;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-decoration: none;
  transition: transform .25s, box-shadow .25s, background-position .5s;
  white-space: nowrap;
}
.hero-cta i {
  font-size: 1.3rem;
}
.hero-cta-primary {
  background-image: linear-gradient(to right, #198754 0%, #39ba95 51%, #198754 100%);
  background-size: 200% auto;
  color: #fff;
  box-shadow: 0 0 16px rgba(0,0,0,.12);
  justify-content: center;
}
.hero-cta-primary:hover {
  background-position: right center;
  color: #fff;
  transform: scale(1.03);
}
.hero-cta-secondary {
  background-image: linear-gradient(to right, #198754 0%, #39ba95 51%, #198754 100%);
  background-size: 200% auto;
  color: #fff;
  box-shadow: 0 0 16px rgba(0,0,0,.12);
  justify-content: center;
}
.hero-cta-secondary:hover {
  background-position: right center;
  color: #fff;
  transform: scale(1.03);
}

/* Mobile: CTA prima dell'immagine */
@media (max-width: 991px) {
  .hero-img-wrap { order: 2; }
  .hero-mobile-bottom {
    padding-bottom: 1.5rem;
    z-index: 1;
  }
  .hero-mobile-bottom .hero-eyebrow-bar { margin-top: 0; text-align: center; }
  .hero-cta-group {
    order: 1;
    border-radius: 10px 10px 0 0 !important;
    margin-bottom: 0 !important;
    flex-direction: column;
    gap: 10px;
    padding: .85rem;
  }
  .hero-img { border-radius: 0 0 10px 10px !important; }
  .hero-cta {
    flex: unset;
    width: 100%;
    min-height: 54px;
    font-size: .85rem;
    letter-spacing: .04em;
  }
}

.hero-assisted-icon {
  font-size: 1.4rem;
  color: #39ba95;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: #d8efda;
}
.hero-assisted-title {
  font-family: 'Manrope', sans-serif;
  font-size: .95rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: .1rem;
}
.hero-assisted-sub {
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.4;
}
/* Freccia spinta a destra con margin-left:auto */
.hero-assisted-arrow {
  color: #49714b;
  margin-left: auto;
  flex-shrink: 0;
}


/* ── 6d. Trust signals ── */
/* Row di micro-badge sotto il CTA primario */
.hero-trust {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .65rem 1.4rem;
  padding: 1rem 0;
}
.hero-trust-item {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .78rem;
  color: var(--muted); /* #5C5C5C → 6.7:1 su bianco, AA ✓ */
}
.hero-trust-item i { color: var(--red); font-size: .95rem; }


/* ── 6e. Immagine hero ── */
/* Il wrapper assorbe lo spazio verticale residuo nella colonna
   destra grazie a flex:1. L'immagine si estende al 100% in
   larghezza e altezza tramite object-fit:cover per non
   distorcersi. Il bordo-raggio si applica solo agli angoli
   superiori perché quello inferiore è coperto dalla CTA bar. */
.hero-img-wrap {
  position: relative;
  flex: 1;          /* assorbe tutto lo spazio verticale disponibile */
  min-height: 280px; /* guardia su viewport molto piccoli */
}
.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius) var(--radius) 0 0; /* angoli inferiori: la CTA li copre */
  display: block;
}


/* ── 6f. Griglia prodotti (sotto la hero) ── */
/* Band grigia con le 6 categorie principali di prodotto */
.hero-products {
  background: var(--gray-bg);
  padding: 2.5rem 0 3rem;
  position: relative;
  z-index: 0;
}
#prodotti-griglia.hero-products { border-top: 1px solid #e4e4e4; }
#prodotti-griglia .row { margin-bottom: 1rem; }
.hero-products-label {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 900;
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--dark);
  margin-bottom: .6rem;
  margin-top: 2rem;
  text-align: center;
}
/* Sottotitolo sotto "Pronti da ordinare online" — stesso spacing che prima aveva il solo label */
.hero-products-label + .prop-section-sub {
  margin-bottom: 3rem;
  text-align: center;
}

/* Chip prodotto — card cliccabile con hover lift */
.product-chip {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  outline: 2px solid transparent;
  outline-offset: 0px;
  box-shadow:
    0px 1px 1px rgba(0,0,0,.04),
    0px 2px 3px rgba(0,0,0,.03),
    0px 4px 8px rgba(0,0,0,.03),
    0px 8px 14px rgba(0,0,0,.02);
  transition: box-shadow .3s ease, transform .3s ease, outline-color .3s ease;
  text-align: center;
}
.product-chip:hover {
  outline-color: var(--red);
  box-shadow:
    0px 1px 2px rgba(196,0,17,.06),
    0px 3px 6px rgba(196,0,17,.06),
    0px 8px 16px rgba(196,0,17,.05),
    0px 16px 28px rgba(196,0,17,.04);
  transform: translateY(-3px);
}
.product-chip:focus-visible {
  outline-color: var(--red);
  outline-width: 3px;
}
.product-chip-img {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.product-chip-img svg {
  width: 100%;
  height: 100%;
}

.product-chip-label {
  padding: .6rem .5rem .75rem;
  background: #fff;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-chip span {
  font-size: .78rem;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.3;
  display: block;
}
#prodotti-griglia .product-chip span { font-size: 1.15rem; }

/* ── Marquee prodotti: scorrimento orizzontale continuo, chip ingranditi ──
   Il markup duplica i 7 chip (secondo set aria-hidden): main.js §4
   fa avanzare scrollLeft in loop (di continuo, in requestAnimationFrame)
   e lo fa "saltare" senza scatti quando raggiunge la metà esatta della
   pista, cioè la larghezza del primo set — il secondo set identico
   prende il suo posto in modo invisibile.
   .chip-marquee è uno scroll-container nativo (overflow-x:auto), quindi
   l'utente può anche trascinarlo col mouse (drag, gestito in JS) o con
   il dito su mobile (swipe nativo del browser). L'auto-scroll si mette
   in pausa durante l'interazione e mentre il mouse è sopra.
   Disattivato se l'utente preferisce meno animazioni — resta comunque
   scorribile a mano (prefers-reduced-motion, gestito in main.js). ── */
.chip-marquee {
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  padding: .5rem 0;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* Edge legacy */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.chip-marquee::-webkit-scrollbar { display: none; } /* Chrome, Safari */
.chip-marquee.is-dragging { cursor: grabbing; }
.chip-marquee-track {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  width: max-content;
}
.chip-marquee-item {
  flex: 0 0 auto;
  width: 220px;
  /* Evita che il drag del mouse selezioni il testo dei chip */
  user-select: none;
  -webkit-user-select: none;
}
.chip-marquee-item .product-chip span { font-size: .85rem; }

@media (max-width: 991px) {
  .chip-marquee-item { width: 170px; }
  .chip-marquee-track { gap: 14px; }
}
@media (max-width: 575px) {
  .chip-marquee-item { width: 138px; }
}

.hero-products-cta {
  text-align: center;
  margin-top: 1.5rem;
  font-size: .88rem;
  color: var(--muted);
}
.hero-products-cta a {
  color: var(--dark);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: .5px;
  text-underline-offset: 3px;
  transition: color .15s;
}
.hero-products-cta a:hover { color: var(--red); }


/* ============================================================
   7. PROPOSITION CARDS  (③ cb-props)
   ============================================================
   4 card in griglia (1→2→4 colonne) con hover shadow.
   Sfondo bianco su bordo chiaro per separazione visiva leggera.
   ============================================================ */
.cb-props {
  padding: 5rem 0;
  background: #fff;
}

.prop-section-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 900;
  color: var(--dark);
  letter-spacing: -.02em;
  margin-bottom: .6rem;
}
.prop-section-sub {
  font-size: 1.05rem;
  color: var(--muted);
  margin: 0;
}

.prop-card {
  padding: 2.2rem 2rem;
  border-radius: 16px;
  background: #f7f7f7;
  border: none;
  box-shadow:
    rgba(14,63,126,.04) 0px 0px 0px 1px,
    rgba(42,51,69,.04) 0px 1px 1px -0.5px,
    rgba(42,51,70,.04) 0px 3px 3px -1.5px,
    rgba(42,51,70,.04) 0px 6px 6px -3px,
    rgba(14,63,126,.04) 0px 12px 12px -6px,
    rgba(14,63,126,.04) 0px 24px 24px -12px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: box-shadow .3s ease, transform .3s ease;
}
.prop-card:hover {
  box-shadow:
    rgba(14,63,126,.06) 0px 0px 0px 1px,
    rgba(42,51,69,.06) 0px 1px 1px -0.5px,
    rgba(42,51,70,.06) 0px 3px 3px -1.5px,
    rgba(42,51,70,.06) 0px 6px 6px -3px,
    rgba(14,63,126,.06) 0px 12px 12px -6px,
    rgba(14,63,126,.06) 0px 24px 24px -12px;
  transform: translateY(-3px);
}

.prop-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 14px;
  margin-bottom: 1.4rem;
  flex-shrink: 0;
}
.prop-icon-wrap--red    { background: rgb(249 114 137 / 18%); }
.prop-icon-wrap--green  { background: rgb(59 187 150 / 25%); }
.prop-icon-wrap--blue   { background: rgb(88 140 199 / 20%); }
.prop-icon-wrap--orange { background: rgb(230 150 60 / 20%); }

.prop-icon { font-size: 1.5rem; display: block; }

.prop-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: .6rem;
  letter-spacing: -.01em;
}
.prop-text {
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.75;
  margin: 0 0 1.4rem;
  flex: 1;
}
.prop-cta {
  font-size: .88rem;
  font-weight: 700;
  color: var(--dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(0,0,0,.25);
  transition: color .2s, text-decoration-color .2s;
  margin-top: auto;
}
.prop-cta:hover {
  color: var(--red);
  text-decoration-color: var(--red);
}


/* ============================================================
   8. SU PROGETTO  (④ cb-custom)
   ============================================================
   Sezione a sfondo grigio alternato con processo a 3 step
   inline + nota di trasparenza sui costi.
   ============================================================ */
.cb-custom {
  padding: 5rem 0;
  background: var(--gray-bg);
}

/* Contenitore degli step — layout inline su desktop */
.custom-steps {
  display: flex;
  gap: 0;
  margin: 2rem 0 1.5rem;
}

/* Singolo step — border condiviso con il vicino tramite
   border-right:none tranne l'ultimo */
.custom-step {
  flex: 1;
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--dark);
  padding: .9rem 1rem;
  background: #fff;
  border: none;
  border-right: none;
  position: relative;
  box-shadow: 0 6px 15px #24252614;
}
.custom-step:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.custom-step:last-child  { border-right: none; border-radius: 0 var(--radius) var(--radius) 0; }

/* Numero circolare rosso */
.custom-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: .75rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Freccia di connessione tra gli step — nascosta su mobile */
.custom-step-arrow {
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .8rem;
  color: var(--red);
  z-index: 1; /* sopra al bordo del prossimo step */
}

/* ============================================================
   9. CHI SIAMO  (⑤ cb-about)
   ============================================================
   Sezione biografia con immagine stabilimento + facts grid.
   Su desktop l'immagine è a sinistra (order-lg-1) e il testo
   a destra (order-lg-2) per variare il ritmo visivo della
   pagina rispetto alla sezione precedente.
   ============================================================ */
.cb-about {
  padding: 5rem 0;
  background: #fff;
}

.about-img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  border-radius: var(--radius);
}

/* Foto segnaposto — da sostituire con un'immagine reale */
.about-img-placeholder {
  width: 100%;
  height: 360px;
  border-radius: var(--radius);
  background: var(--gray-bg);
  border: 2px dashed var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  color: var(--muted);
}
.about-img-placeholder i { font-size: 2.5rem; }
.about-img-placeholder span { font-size: .85rem; font-weight: 600; }

/* Griglia 2 colonne con i 4 fact numerici/certificazioni */
.about-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem;
  margin-top: 1.2rem;
}

.about-fact {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem 3rem;
  font-size: .78rem;
  font-weight: 500;
  background: rgb(211 231 248 / 65%);
  color: #146fae;
  border-radius: 50px;
  line-height: 1;
}
.about-fact i {
  color: #146fae;
  font-size: 1rem;
  margin-top: .05rem; /* allineamento ottico con la prima riga di testo */
  flex-shrink: 0;
}


/* ============================================================
   10. SOCIAL PROOF  (⑥ cb-proof)
   ============================================================
   3 score box + 3 review card.
   Score box: griglia 3 colonne ridotta a 1 su mobile.
   Review card: altezza uniforme con height:100%.
   ============================================================ */
.cb-proof {
  padding: 5rem 0;
  background: var(--gray-bg);
}

/* Griglia score box (numerici grandi) */
.proof-scores {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 3rem;
}

.proof-score {
  position: relative;
  background: #fff;
  border: none;
  border-radius: var(--radius);
  box-shadow:
    0px 1px 1px rgba(0,0,0,.04),
    0px 2px 4px rgba(0,0,0,.03),
    0px 5px 12px rgba(0,0,0,.03);
  padding: 1.8rem 1.5rem;
  text-align: center;
}

.proof-score-num {
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--dark);
  line-height: 1;
}
.proof-score-num span { color: #ed463a; }
.proof-score-label  { font-size: .88rem; color: var(--text); margin-top: .4rem; line-height: 1.5; }
.proof-score-source { font-size: .78rem; color: #767676; margin-top: .2rem; } /* 4.6:1 su #fff ✓ */

/* Card recensione — sfondo bianco, ombra leggera */
.review-card {
  position: relative;
  background: #fff;
  border: none;
  border-radius: var(--radius);
  box-shadow:
    0px 1px 1px rgba(0,0,0,.04),
    0px 2px 4px rgba(0,0,0,.03),
    0px 5px 12px rgba(0,0,0,.03);
  padding: 1.6rem;
  height: 100%;
}

/* Badge Google in basso a destra: usato su .review-card e sul .proof-score "su Google Reviews" */
.review-google-badge {
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.14);
}
.review-google-badge svg { display: block; width: 26px; height: 26px; }

.review-product {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: .9rem;
}
.review-product-img {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  background: var(--gray-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--muted);
  flex-shrink: 0;
}

.review-google-badge svg {
    display: block;
    width: 36px;
    height: 36px;
}

.review-product-name { font-size: 1.15rem; font-weight: 700; color: var(--dark); }
.review-product-spec { font-size: .78rem; color: var(--muted); }

.review-stars {
  color: #fb9a33;
  font-size: 1rem;
  letter-spacing: 2px;
  margin-bottom: .6rem;
}
.review-text   { font-size: .92rem; color: var(--text); line-height: 1.75; font-style: italic; margin-bottom: 1rem; }
.review-author { font-size: .88rem; font-weight: 700; color: var(--dark); }
.review-since  { font-size: .78rem; color: var(--muted); }

.review-badge {
  display: inline-block;
  background: rgb(211 231 248 / 65%);
  color: #146fae;
  font-size: .65rem;
  font-weight: 500;
  padding: .18rem .6rem;
  border-radius: 20px;
  margin-top: .4rem;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.proof-disclaimer {
  font-size: .78rem;
  color: #767676; /* 4.6:1 su #fff ✓ */
  text-align: center;
  margin-top: 1.2rem;
}


/* ============================================================
   11. FORM PREVENTIVO SPLIT  (⑦ cb-form)
   ============================================================
   Layout 5/7 colonne: lato sinistro rosso pieno (argomenti
   persuasivi) + lato destro bianco (form).
   Su mobile le due colonne si impilano.
   ============================================================ */
.cb-form { /* nessuno stile specifico sul wrapper esterno */ }

/* Pannello sinistro: sfondo rosso, testo persuasivo */
.form-left {
  background: linear-gradient(137deg, #111 0%, #440E1D 25%, #BF2C47 50%, #BF2A2A 100%);
  padding: 4.5rem 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 520px; /* garantisce dimensione minima anche con poco testo */
}

.form-eyebrow {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,.9); /* ~6:1 su #C40011 ✓ AA */
  margin-bottom: .9rem;
}
.form-left h2 {
  color: #fff;
  font-size: clamp(1.9rem, 2.8vw, 2.5rem);
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 1rem;
}
.form-left p {
  color: rgba(255,255,255,.82);
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

/* Lista dei benefici con spunta verde (colore funzionale = rassicurazione) */
.form-checks { list-style: none; padding: 0; margin: 0 0 2rem; }
.form-checks li {
  color: rgba(255,255,255,.9);
  font-size: .98rem;
  padding: .38rem 0;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.form-checks li::before {
  content: '✓';
  font-weight: 800;
  color: rgba(255,255,255,.9); /* bianco su rosso: 6:1 ✓ — il verde bruciava */
  flex-shrink: 0;
}

/* Contatti diretti nel pannello sinistro del form */
.form-contacts { display: flex; flex-direction: column; gap: .55rem; margin-bottom: 1.5rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.3); }
.form-contacts a {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .9rem;
  color: rgba(255,255,255,.9);
  transition: color .15s;
}
.form-contacts a:hover { color: #fff; }
.form-contacts i { color: rgba(255,255,255,.9); font-size: .88rem; flex-shrink: 0; }

/* Link social in fondo al pannello sinistro */
.form-social { display: flex; gap: .75rem; }
.form-social a {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.9);
  font-size: 1.25rem; /* icona più grande e leggibile */
  transition: background .15s, border-color .15s;
}
.form-social a:hover { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.7); }

/* Pannello destro: form bianco */
.form-right {
  background: #fff;
  padding: 4.5rem 3.5rem;
  display: flex;
  align-items: center; /* centra verticalmente il form-wrap */
}
.form-wrap { width: 100%; }

/* Label del form */
.f-label {
  font-size: .8rem;
  font-weight: 600;
  color: #444;
  display: block;
  margin-bottom: .35rem;
}
.f-label .opt { font-weight: 400; color: #aaa; font-size: .73rem; }

/* Input, select, textarea — stile unificato */
.f-input {
  width: 100%;
  border: 1.5px solid #e0e0e0;
  border-radius: 7px;
  padding: .75rem .9rem;
  min-height: 48px; /* fat-finger mobile ✓ */
  font-size: .88rem;
  color: var(--dark);
  font-family: inherit;
  background: #fff;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
/* Focus ring rosso coerente con il brand */
.f-input:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(170,8,13,.1);
}
textarea.f-input { resize: vertical; } /* solo ridimensionamento verticale */

/* Submit button — full width, stile coerente con .btn-red */
.f-submit {
  width: 100%;
  margin-top: 1rem;
  margin-bottom: 1rem;
  background-image: linear-gradient(to right, #198754 0%, #39ba95 51%, #198754 100%);
  background-size: 200% auto;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 1rem;
  min-height: 52px;
  font-size: .95rem;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
  box-shadow: 0 0 20px rgba(0,0,0,.15);
  transition: background-position .5s, box-shadow .3s, transform .3s;
}
.f-submit:hover {
  background-position: right center;
  color: #fff;
  transform: scale(1.04);
}

/* Badge di rassicurazione sotto il tasto submit */
.form-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.3rem;
  margin-top: 1rem;
}
.form-badge {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .74rem;
  color: var(--muted);
}
.form-badge i { color: rgb(57 186 149); } /* spunta verde = rassicurazione */


/* ============================================================
   12. FOOTER  (⑧ cb-footer)
   ============================================================
   Sfondo quasi-nero (#0d0d0d) con testo grigio.
   4 colonne su desktop, 2 su tablet, 1 su mobile.
   ============================================================ */
.cb-footer {
  background: #3f3c3f;
  padding: 4rem 0 2rem;
}
/* Full-width come il blocco form: niente max-width, solo respiro laterale */
.cb-footer .container-fluid {
  padding-left: clamp(1.25rem, 4vw, 3.5rem);
  padding-right: clamp(1.25rem, 4vw, 3.5rem);
}

/* Logo footer — stessa codifica cromatica della navbar */
.footer-logo {
  font-size: 1.15rem;
  font-weight: 900;
  color: #fff;
  margin-bottom: .8rem;
}
.footer-logo .r { color: var(--red); }
.footer-logo .d { color: #b0b0b0; font-weight: 400; } /* 5.2:1 su #3f3c3f ✓ */

.footer-tagline {
  font-size: .82rem;
  color: #b0b0b0;  /* 5.2:1 su #3f3c3f ✓ */
  line-height: 1.7;
  margin-bottom: 1.2rem;
}

.footer-contacts a {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  color: #f7f7f7;
  margin-bottom: .4rem;
  transition: color .15s;
}
.footer-contacts a:hover { color: #fff; }
.footer-contacts i { color: #f7f7f7; font-size: .85rem; } /* rosso chiaro leggibile su sfondo scuro */

/* Intestazioni delle colonne link */
.footer-head {
  font-size: .7rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: .9rem;
}

.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 0; }
.footer-links a {
  font-size: .82rem;
  color: #b0b0b0;  /* 5.2:1 su #3f3c3f ✓ */
  transition: color .15s;
  display: flex;
  align-items: center;
  min-height: 44px; /* tap target WCAG ✓ */
}
.footer-links a:hover { color: #fff; }
@media (min-width: 992px) {
  .footer-links a { min-height: 32px; }
}

.footer-payments {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: 1rem;
  margin-right: 70px; /* spazio per non sovrapporsi al pulsante .back-to-top fisso */
  justify-content: flex-end;
}
.cb-footer-clone .footer-payments {
  background: #fff;
  border-radius: 2px;
}
.footer-payments-img { height: 28px; width: auto; display: block; }
.footer-pay-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .3rem .7rem;
  border-radius: 6px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  font-size: .7rem;
  font-weight: 700;
  color: #d0d0d0;
  letter-spacing: .3px;
}

.footer-hr { border-color: rgba(255,255,255,.12); margin: 2.5rem 0 1.4rem; }

/* Riga di copyright in fondo */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  font-size: .75rem;
  color: #b0b0b0; /* 5.2:1 su #3f3c3f ✓ */
}
.footer-bottom a { color: #b0b0b0; }

/* Variante footer chiaro (.cb-footer-light): testi scuri #3f3c3f al posto dei chiari pensati per sfondo scuro */
.cb-footer-light .footer-logo .d { color: #3f3c3f; }
.cb-footer-light .footer-tagline { color: #3f3c3f; }
.cb-footer-light .footer-contacts a { color: #3f3c3f; }
.cb-footer-light .footer-contacts a:hover { color: var(--red); }
.cb-footer-light .footer-contacts i { color: #3f3c3f; }
.cb-footer-light .nav-reviews-widget--footer .nav-reviews-label { color: #3f3c3f; }
.cb-footer-light .nav-reviews-widget--footer .nav-reviews-stars { color: #fb9a33; }
.cb-footer-light .nav-reviews-widget--footer:hover { background: #fff; }
.cb-footer-light .footer-head {
  font-family: 'Manrope', sans-serif;
  font-size: 0.8rem;
  line-height: 1.8;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--red);
  display: block;
  margin-bottom: 1rem;
  margin-top: 2rem;
}
.cb-footer-light .footer-links a { color: #3f3c3f; }
.cb-footer-light .footer-links a:hover { color: var(--red); }
.cb-footer-light .footer-hr { border-color: rgba(0, 0, 0, .3); }
.cb-footer-light .footer-bottom { color: #3f3c3f; }
.cb-footer-light .footer-bottom a { color: #3f3c3f; }


/* ============================================================
   13. RESPONSIVE BREAKPOINTS
   ============================================================
   Bootstrap 5 usa i seguenti breakpoint:
     xs  < 576px
     sm  ≥ 576px
     md  ≥ 768px
     lg  ≥ 992px
     xl  ≥ 1200px
     xxl ≥ 1400px

   Le seguenti regole sovrascrivono gli stili desktop per
   tablet (max 991px) e mobile (max 767px).
   ============================================================ */

/* ── Tablet e inferiori (< 992px) ── */
@media (max-width: 991px) {

  /* Form: padding ridotto per non sprecare spazio su tablet */
  .form-left,
  .form-right { padding: 3rem 2rem; }

  /* Score box: mantiene 3 colonne fino a 992px */
  .proof-scores { grid-template-columns: 1fr 1fr 1fr; }

  /* Step processo: si impilano verticalmente invece di stare inline */
  .custom-steps { flex-direction: column; gap: .5rem; }
  .custom-step {
    border-right: 1px solid var(--border) !important; /* ripristina bordo */
    border-radius: var(--radius) !important;          /* arrotonda tutti gli angoli */
  }
  /* La freccia orizzontale non ha senso nel layout verticale */
  .custom-step-arrow { display: none; }
}

/* ── Desktop stretto: lg (992px–1199px) ── */
@media (min-width: 992px) and (max-width: 1199.98px) {

  /* Logo: ridotto per liberare spazio */
  .cb-nav .navbar-brand img { height: 46px !important; }

  /* Nav links: padding e font ridotti */
  .nav-link-item {
    font-size: .8rem;
    padding: .4rem .45rem;
  }

  /* Bottone Preventivo gratuito: più compatto */
  .cb-nav .btn-red {
    font-size: .78rem !important;
    padding: .45rem .8rem !important;
  }

  /* Widget recensioni: stelle leggermente più piccole */
  .nav-reviews-stars { font-size: .82rem; }
  .nav-reviews-label { font-size: .6rem; }

  /* Hero CTA: padding ridotto per stare comode affiancate */
  .hero-cta {
    padding: 0 20px;
    font-size: .82rem;
  }
}

/* ── Desktop molto stretto (992px–1024px) ──
   Posizionato dopo il blocco 992–1199 per sovrascriverlo. */
@media (min-width: 992px) and (max-width: 1024px) {
  .cb-nav .container-fluid {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .nav-link-item {
    font-size: .7rem;
    padding: .4rem .45rem;
  }
}

/* ── Mobile (< 768px) ── */
@media (max-width: 767px) {

  /* Hero: padding top ridotto su schermi piccoli */
  .cb-hero { padding-top: 2rem; }

  /* Immagine hero: altezza minima ridotta per non dominare lo schermo */
  .hero-img-wrap { min-height: 240px; }

  /* Score di recensioni: colonna singola su mobile */
  .proof-scores { grid-template-columns: 1fr; }

  /* Fatti "chi siamo": colonna singola su mobile */
  .about-facts { grid-template-columns: 1fr; }
}


/* ============================================================
   BACK TO TOP — pulsante fisso, non invasivo
   ============================================================
   Nascosto di default (opacity/visibility), reso visibile via
   JS (classe .is-visible) dopo un certo scroll. Lo scroll fluido
   verso l'alto sfrutta html{scroll-behavior:smooth} già attivo.
   ============================================================ */
.back-to-top {
  position: fixed;
  display: none;
  bottom: 184px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #5b8fc7;
  color: #fff;
  border: none;
  box-shadow:
    0px 1px 1px rgba(0,0,0,.04),
    0px 2px 4px rgba(0,0,0,.03),
    0px 5px 12px rgba(0,0,0,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s, background .15s, color .15s, border-color .15s;
  z-index: 900;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: #3d668f; color: #fff; }

@media (max-width: 767px) {
  .back-to-top { bottom: 210px; right: 16px; width: 40px; height: 40px; font-size: 1.05rem; display:none; }
}
.rating { display: inline-flex; align-items: center; gap: .1em; letter-spacing: 0; line-height: 1; min-height: 1em; }
.rating svg { width: 1em; height: 1em; fill: #FFD062; flex-shrink: 0; }
.sec-title-stars { font-size: .4em; margin-left: .5em; vertical-align: .35em; white-space: nowrap; }

/* Note sotto i campi */
.f-hint { font-size: .74rem; color: var(--muted); margin: .4rem 0 0; }

/* Verifica email e consensi privacy: il contenuto di #verificaMail
   arriva da v3/checkMail.php (stesso markup di richiestaPreventivo.php) */
#preloader { font-size: .8rem; font-weight: 600; color: var(--muted); margin-bottom: .5rem; }
#verificaMail .controls { text-align: left; font-size: .8rem; color: #444; line-height: 1.5; }
#verificaMail textarea {
  width: 100%;
  height: 130px !important;
  font-size: .72rem;
  color: var(--muted);
  border: 1.5px solid #e0e0e0;
  border-radius: 7px;
  padding: .6rem .75rem;
  margin: .4rem 0 .9rem !important;
  background: #fafafa;
}
#verificaMail label { font-weight: 600; margin-bottom: .3rem; }
#verificaMail .controls > div,
#verificaMail div[style*="#e9ecef"] {
  background: #ffffff !important;
  border-radius: 7px;
  padding: .55rem .8rem;
}
#verificaMail input[type="radio"] { accent-color: var(--red); vertical-align: -2px; }
#verificaMail hr { margin: .9rem 0; opacity: .1; }
#verificaMail p { font-size: .74rem; color: var(--muted); margin: .6rem 0 0; }
/* "Annulla" non ha effetto (nessun modale): nascosto */
#verificaMail button[data-dismiss="modal"] { display: none; }
/* I due "Continua" con lo stile del pulsante verde del form */
#verificaMail #siContinua,
#verificaMail #noContinua {
  width: 100%;
  margin-top: 1rem;
  background-image: linear-gradient(to right, #198754 0%, #39ba95 51%, #198754 100%);
  background-size: 200% auto;
  color: #fff !important;
  border: none;
  border-radius: 10px;
  padding: 1rem;
  min-height: 52px;
  font-size: .95rem;
  font-weight: 700;
  text-transform: uppercase;
  font-family: 'Manrope', sans-serif;
  box-shadow: 0 0 20px rgba(0,0,0,.15);
  transition: background-position .5s;
}
#verificaMail #siContinua:hover,
#verificaMail #noContinua:hover { background-position: right center; }
/* "Continua" non ancora attivo (manca email o consenso): grigio */
#verificaMail #noContinua { cursor: pointer;

    background-image: linear-gradient(to right, #198754 0%, #39ba95 51%, #198754 100%); }

select.f-input {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  background-size: 12px 12px;
  cursor: pointer;
}




/* ============================================================
   PANNELLI ACCOUNT E CARRELLO (offcanvas Bootstrap 5)
   ============================================================
   Aperti dalle icone persona/carrello dell'header. Contenuto
   generato in PHP dalle variabili di sessione del sito attuale.
   ============================================================ */
.cb-panel { --bs-offcanvas-width: 380px; font-size: .9rem; color: var(--text); }
.cb-panel .offcanvas-header {
  align-items: flex-start;
  padding: 1.5rem 1.5rem 1rem;
  border-bottom: 1px solid #eee;
}
.cb-panel .offcanvas-body { padding: 1.5rem; }
.cb-panel-title {
  font-family: 'Manrope', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0;
  line-height: 1.3;
}
.cb-panel-title span { color: var(--red); }
.cb-panel-text { font-size: .82rem; color: var(--muted); margin: .35rem 0 1rem; }
.cb-panel-link { font-size: .78rem; color: var(--red); text-decoration: underline; text-underline-offset: 2px; }
.cb-panel-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  margin-bottom: 0;
}
.cb-panel-btn:hover { transform: none; }
.cb-panel-sep { margin: 2rem 0 1.5rem; opacity: .1; }

/* Menu area clienti */
.cb-panel-group {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red);
  margin: 1.4rem 0 .4rem;
}
.cb-panel-group:first-child { margin-top: 0; }
.cb-panel-menu { list-style: none; padding: 0; margin: 0; }
.cb-panel-menu a {
  display: block;
  padding: .55rem 0;
  color: var(--dark);
  text-decoration: none;
  border-bottom: 1px solid #f0f0f0;
  transition: color .15s;
}
.cb-panel-menu a:hover { color: var(--red); }
.cb-panel-logout {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: 1.8rem;
  padding: .55rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: 7px;
  color: var(--dark);
  font-weight: 600;
  text-decoration: none;
}
.cb-panel-logout:hover { border-color: var(--red); color: var(--red); }

/* Icona account con utente loggato: puntino verde */
.nav-icon-btn.is-logged { position: relative; }
.nav-icon-btn.is-logged::after {
  content: "";
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #39ba95;
  box-shadow: 0 0 0 2px #fff;
}

/* Carrello */
.cb-cart-list { list-style: none; padding: 0; margin: 0; }
.cb-cart-item {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  padding: .9rem 0;
  border-bottom: 1px solid #f0f0f0;
}
.cb-cart-item img { border-radius: 6px; object-fit: cover; background: var(--gray-bg); flex-shrink: 0; }
.cb-cart-info { flex: 1; min-width: 0; }
.cb-cart-name { font-weight: 600; color: var(--dark); line-height: 1.35; }
.cb-cart-qty { font-size: .78rem; color: var(--muted); margin-top: .15rem; }
.cb-cart-price { font-weight: 700; color: var(--red); margin-top: .15rem; }
.cb-cart-remove {
  border: none;
  background: none;
  color: #999;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cb-cart-remove:hover { background: var(--gray-bg); color: var(--red); }
.cb-cart-total { margin-top: 1.25rem; }
.cb-cart-total > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; }
.cb-cart-total span { font-size: .8rem; color: var(--muted); }
.cb-cart-total strong { font-size: 1.3rem; font-weight: 800; color: var(--dark); }
.cb-cart-total small { flex-basis: 100%; font-size: .72rem; color: var(--muted); }

/* INIZIO sistemazione btb tel da mobile*/
@media (max-width: 767.98px) {
    .cb-nav .container-fluid {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:         "burger logo icons"        "burger logo phone"        "menu menu menu";
        align-items: center;
        row-gap: .13rem;
    }
    .cb-nav .navbar-brand {
        grid-area: logo;
        justify-self: start;
        margin-right: 20px;
    }

    .nav-icon-group--mobile {
        grid-area: icons;
        justify-self: end;
        margin-left: 0;
    }
    .cb-nav .navbar-toggler {
        grid-area: burger;
        margin-right: .75rem;
        width: 45px;
    }
    .cb-nav .navbar-collapse {
        grid-area: menu;
    }

/*
    .nav-phone-bar {
        grid-area: phone;
        justify-self: stretch;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .35rem;
        height: 32px;
        padding: 0 .4rem;
        border-radius: 8px;
        background: #f7f7f7;
        color: #5c5c5c;
        font-size: .85rem;
        font-weight: 600;
        letter-spacing: .2px;
        white-space: nowrap;
        text-decoration: none;
    }
  */
}
/* FINE sistemazione btb tel da mobile*/
.nav-phone-bar i.bi-telephone-fill,
.navbar-collapse i.bi-telephone-fill,
.nav-phone-btn i.bi-telephone-fill {
    color: #39ba95 !important;
}

.cb-panel-menu a {
    display: block;
    color: var(--text);
    padding: 0.55rem 0px;
    text-decoration: none;
    border-bottom: 1px solid rgb(240, 240, 240);
    transition: color 0.15s;
}

/* Nascondi recapthca */
.grecaptcha-badge { visibility: hidden !important; }


/* Header mobile: telefono e mail affiancati sotto le icone */
@media (max-width: 767.98px) {
  .cb-nav .container-fluid {
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas:
      "burger logo icons icons"
      "burger logo phone mail"
      "menu   menu menu  menu";
    column-gap: .375rem;
  }
  .cb-nav .nav-phone-bar { flex-basis: auto; min-width: 0; }
  .cb-nav .nav-phone-bar[href^="tel:"]    { grid-area: phone; }
  .cb-nav .nav-phone-bar[href^="mailto:"] { grid-area: mail; }
  .cb-nav .navbar-collapse { grid-area: menu; }
}