/* =============================================
   UPGRADE — restyling del sito nello stile delle Guide
   Caricato DOPO style.css su tutte le pagine: cambia solo l'aspetto,
   non l'ordine delle sezioni né la logica di configuratori e moduli.
   Creato il 30/09/2026. Per tornare indietro basta non caricarlo.
   ============================================= */

/* ---------- Contrasto: il grigio chiaro #7a7a9a arrivava a 3,7:1 sugli sfondi chiari (WCAG AA chiede 4,5:1).
   #686888 fa 5,35:1 sul bianco e 4,74:1 sul grigio più scuro (#f2f1ef) ---------- */
:root { --text-light: #686888; }

/* ---------- Scroll orizzontale indesiderato (bug già presente sul live: pagina larga 1431px a 1400) ----------
   clip (non hidden) taglia i decori che sbordano senza creare un contenitore di scroll: lo sticky continua a funzionare */
html, body { overflow-x: clip; }
/* su mobile i puntini della sezione "correlati" (non ritagliati) allargavano la pagina a 421px: bug presente sul live */
#correlati { position: relative; overflow: hidden; }

/* ---------- Etichette di sezione: pillole ---------- */
.section-eyebrow, .v-label {
  display: inline-flex !important; align-items: center; gap: 8px;
  padding: 6px 14px 6px 10px; border-radius: 100px;
  font-size: .7rem !important; letter-spacing: .12em !important; font-weight: 700 !important;
  background: rgba(255, 209, 0, .16); color: var(--navy) !important;
  border: 1px solid rgba(255, 209, 0, .45);
}
.section-eyebrow::before, .v-label::before {
  content: ''; width: 8px; height: 8px; border-radius: 3px; background: var(--sand);
  transform: rotate(45deg); box-shadow: 0 0 0 3px rgba(255, 209, 0, .25);
}
/* su sfondi scuri */
.svc-section.dark .section-eyebrow, #settori .v-label, .svc-settori-band .section-eyebrow, #contatti .v-label,
#grafica .grafica-panel-left .v-label, #tecniche .v-label, .gd-tools-band .section-eyebrow,
.svc-settori-band .v-label, .settori-hd .v-label, .v-label[style*="198,176,138"], .v-label[style*="198, 176, 138"] {
  background: rgba(255, 209, 0, .12); color: var(--sand) !important; border-color: rgba(255, 209, 0, .35);
}
.v-divider { width: 56px !important; height: 4px !important; border-radius: 4px; background: linear-gradient(90deg, var(--sand), #ffb800) !important; }

/* ---------- Card generiche: angoli morbidi, ombre, movimento ---------- */
.svc-list-card, .sost-card, .svc-type-card, .step-card, .grafica-card, .feat, .tl-card {
  border-radius: 20px !important;
}
.svc-list-card {
  border: 1px solid transparent !important; box-shadow: var(--shadow-sm);
  padding: 22px 20px !important; max-width: 300px !important;
}
.svc-list-card:hover { transform: translateY(-6px) !important; box-shadow: var(--shadow-md) !important; }
.svc-ico {
  width: 40px !important; height: 40px !important; min-width: 40px; border-radius: 12px !important;
  background: linear-gradient(145deg, var(--navy), var(--navy-mid)) !important; display: grid !important; place-items: center;
}
.svc-ico i { font-size: 1rem !important; color: var(--sand) !important; }
.svc-list-card:hover .svc-ico { transform: rotate(-6deg) scale(1.08) !important; }

.sost-card { border: 0 !important; background: #fff !important; box-shadow: var(--shadow-sm); }
.sost-card:hover { transform: translateY(-6px) !important; box-shadow: var(--shadow-md) !important; }
.sost-icon { border-radius: 12px !important; }

.svc-type-card:hover { transform: translateY(-8px) !important; }
.svc-type-ico { border-radius: 14px !important; }

/* Settori (fondo blu): effetto vetro */
.settore {
  border-radius: 20px !important; border: 1px solid rgba(255, 255, 255, .1) !important;
  background: rgba(255, 255, 255, .04) !important; backdrop-filter: blur(4px);
}
.settore:hover { background: rgba(255, 255, 255, .08) !important; border-color: rgba(255, 209, 0, .6) !important; transform: translateY(-6px) !important; }
.settore i { border-radius: 14px !important; background: var(--sand) !important; color: var(--navy-dark) !important; }
.settore:hover i { transform: rotate(-8deg) scale(1.1) !important; }

/* Prodotti correlati e servizi */
.rel-card, .serv-card { border-radius: 20px !important; overflow: hidden; }
.rel-card:hover, .serv-card:hover { box-shadow: var(--shadow-lg); }

/* Toggle adesivo/stampa e tab */
.svc-toggle-group { box-shadow: inset 0 0 0 1px var(--gray-mid); }
.svc-picker-tab, .svc-swatch { border-radius: 100px !important; }

/* ---------- Configuratore: gruppi in pannelli ---------- */
.cfg-field-group {
  background: #fff; border-radius: 20px; padding: 20px 20px 22px;
  box-shadow: var(--shadow-sm); border: 1px solid rgba(27, 47, 94, .05);
  transition: box-shadow var(--transition);
}
.cfg-field-group:hover { box-shadow: var(--shadow-md); }
.cfg-group-title {
  display: inline-flex !important; align-items: center; gap: 8px;
  color: var(--navy) !important; margin-bottom: 16px !important;
}
.cfg-group-title::before {
  content: ''; width: 22px; height: 22px; border-radius: 7px; background: var(--sand);
  box-shadow: 0 4px 10px rgba(255, 209, 0, .4); transform: rotate(-6deg);
}
.cfg-pill { border-radius: 100px !important; transition: transform var(--transition), background var(--transition), border-color var(--transition), color var(--transition) !important; }
.cfg-pill:hover { transform: translateY(-1px); }
.cfg-pill.selected { box-shadow: 0 6px 16px rgba(27, 47, 94, .25); }
.cfg-summary { border-radius: 22px !important; }
.svc-swatch-detail { border-radius: 22px !important; }

/* ---------- Come funziona ---------- */
.step-number { box-shadow: 0 10px 24px rgba(27, 47, 94, .25) !important; }

/* ---------- FAQ ---------- */
.faq-item { border-radius: 16px !important; border-color: transparent !important; box-shadow: var(--shadow-sm) !important; }
.faq-item.open { box-shadow: inset 4px 0 0 var(--sand), var(--shadow-md) !important; }
.faq-q .faq-icon { background: var(--sand-light) !important; }

/* ---------- Riquadro "Approfondisci la guida" (dentro la sezione FAQ) ---------- */
.up-guide {
  display: flex; align-items: center; gap: 14px; margin-top: 22px; padding: 16px 18px;
  border-radius: 18px; text-decoration: none;
  background: linear-gradient(135deg, var(--navy-dark), var(--navy-mid)); color: #fff;
  box-shadow: var(--shadow-md); transition: transform var(--transition), box-shadow var(--transition);
}
.up-guide:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.up-guide-ico {
  flex: 0 0 46px; height: 46px; border-radius: 14px; background: var(--sand); color: var(--navy-dark);
  display: grid; place-items: center; font-size: 1.15rem; transform: rotate(-6deg);
}
.up-guide strong { display: block; font-size: .95rem; color: #fff; }
.up-guide span { font-size: .8rem; color: rgba(255, 255, 255, .78); }
.up-guide .fa-arrow-right { margin-left: auto; color: var(--sand); transition: transform var(--transition); }
.up-guide:hover .fa-arrow-right { transform: translateX(4px); }

/* ---------- Recensioni e contatti ---------- */
.rev-form-wrap { border-radius: 24px !important; overflow: hidden; }
.cont-form { border-radius: 22px; }
.orari-box { border-radius: 18px !important; }

/* ---------- Pulsanti ---------- */
.btn-primary, .btn-ghost, .btn-cont-submit, .cbtn { border-radius: 100px !important; }
.btn-primary { box-shadow: 0 10px 24px rgba(255, 209, 0, .35); }
.btn-primary:hover { transform: translateY(-2px); }

/* ---------- Home ---------- */
.feat-ico, .grafica-card-ico, .tec-card-ico { border-radius: 14px !important; }
.tec-card, .stock-item { border-radius: 18px !important; overflow: hidden; }
.cat-section { border-radius: 20px !important; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .svc-list-card, .sost-card, .settore, .up-guide, .cfg-pill { transition: none !important; }
}

/* =============================================
   MOBILE — leggibilità e tasti (linee guida WCAG 2.2, Apple HIG, Google Material)
   Solo sotto i 760px: il desktop non cambia. Misurato con emulazione iPhone 390 / Android 360.
   Testo di lettura ≥ 15–16px, etichette ≥ 12–13px, tasti ≥ 44px, interlinea ≥ 1.5.
   Valgono anche su tablet e altri schermi touch (pointer: coarse), a qualsiasi larghezza.
   ============================================= */
@media (max-width: 760px), (pointer: coarse) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

  /* Testo di lettura */
  .sost-card p, .settore p, .tec-card p, .card-desc, .svc-list-card p, .faq-a, .rel-card-body p,
  .step-card p, .svc-type-card p, .feat p, .tl-card p, .grafica-card p, .sc-desc, .svc-story p,
  .svc-process-step p, .sost-intro p, .cont-info > p, .rev-side-text, .section-sub, .svc-section-hd p, .cfg-hd p {
    font-size: 15px !important; line-height: 1.6 !important;
  }
  .faq-q { font-size: 16px !important; min-height: 56px; }

  /* Titoli piccoli dentro le card */
  .settore h3, .sc-body h3, .sost-card h4, .svc-list-card h4, .cat-section-title { font-size: 16px !important; }

  /* Etichette, chip e metadati: minimo 12–13px */
  .section-eyebrow, .v-label, .hero-eyebrow { font-size: 12px !important; }
  .stat-chip, .hero-time-note, .cfg-summary-trust span, .cfg-summary-meta span, .hero-breadcrumb, .hero-breadcrumb a, .hero-breadcrumb span { font-size: 13px !important; }
  .card-chip, .tec-tag, .tec-category, .card-visual-badge, .upload-format-chip, .cfg-summary-badge, .card-ideal-label, .card-ideal-per,
  .cat-section-count, .drawer-trust-chip, #drawer-badge { font-size: 12px !important; }
  .stock-note, .upload-label, .upload-section p, #upload-zone p, #photo-upload-zone p { font-size: 13px !important; }
  .cfg-summary-list li span, .cfg-summary-list li { font-size: 14px !important; }

  /* Footer */
  .footer-tagline, .footer-contact a, .footer-nav li a, .footer-bottom span { font-size: 15px !important; }
  .footer-nav h4 { font-size: 13px !important; }
  .footer-nav li a, .footer-contact a { display: inline-flex !important; align-items: center; min-height: 44px; }

  /* Tasti: area minima 44px */
  .header-nav a { font-size: 14px !important; min-height: 44px; display: inline-flex !important; align-items: center; padding-left: 10px !important; padding-right: 10px !important; }
  #header-search-toggle, .header-contact-link { min-width: 44px !important; min-height: 44px !important; }
  .hero-breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
  .hero-review-link { min-height: 44px; }
  .btn-primary, .btn-ghost, .promo-btn, .btn-configure, .btn-v-sand, .cbtn, .btn-cont-submit { min-height: 48px; font-size: 15px !important; }
  #promo-close, #drawer-close { min-width: 44px !important; min-height: 44px !important; }
  #btn-clear-cart, #btn-open-checkout, #stock-toggle { min-height: 44px !important; }
  .sc-arrow { min-width: 44px !important; min-height: 44px !important; }
  .tec-dot { padding: 12px !important; background-clip: content-box !important; box-sizing: content-box; }

  /* Campi dei moduli e scelte: 48px (Material) / minimo 44px (Apple); misurati a 36–42px il 30/09 */
  #contatti input, #contatti select, #recensioni input, .cfg-field input.form-control, .cfg-field select.form-control,
  .form-control-unit input { min-height: 48px !important; }
  .cfg-pill, .svc-toggle-btn, #cfgExtraToggle, .qty-btn, .rev-prod-chip { min-height: 44px !important; }
  .rev-prod-chip { font-size: 14px !important; }
  .rev-products-picker { max-height: 104px; }          /* 2 righe intere di pillole da 44px + 8px di spazio */
  .rev-prod-toggle { min-height: 44px; font-size: 14px !important; }
  .footer-contact { display: flex; flex-direction: column; gap: 4px; }
  .footer-nav li a, .footer-legal li a { min-width: 44px; }
  input[type="range"] { min-height: 44px; }

  /* Box "Approfondisci la guida" */
  .up-guide strong { font-size: 15px; }
  .up-guide span { font-size: 14px; }
}

/* Sezioni a tutto schermo: su mobile 100vh include la barra dell'indirizzo, 100svh no */
@supports (height: 100svh) {
  #hero { min-height: 100svh; }
  #hero.hero-guida { min-height: 78svh; }
}

/* =============================================
   LAYOUT FLUIDO — misure che si adattano in modo continuo
   dallo schermo più piccolo (320px) al computer grande (1440px), senza scatti.
   clamp(minimo, valore che cresce con la larghezza dello schermo, massimo)
   ============================================= */
:root {
  --fl-gutter: clamp(16px, 8px + 2vw, 32px);          /* margini laterali: 16px su telefono → 32px su computer */
  --fl-sec: clamp(56px, 32px + 4.5vw, 96px);           /* spazio sopra/sotto le sezioni: 56px → 96px */
  --fl-title: clamp(1.65rem, 1.1rem + 2.2vw, 2.7rem);  /* titoli di sezione: ~26px → ~43px */
  --fl-card: 14px;                                     /* testo nelle card su computer (sul telefono 15px, vedi sopra) */
}
.container { padding-left: var(--fl-gutter); padding-right: var(--fl-gutter); }
#settori, #perche, #recensioni, #contatti, #sostenibilita, #correlati, .svc-section, .svc-settori-band, .gd-hub, .gd-cta, .gd-tools-band,
#come-funziona, #configuratore {
  padding-top: var(--fl-sec) !important; padding-bottom: var(--fl-sec) !important;
}
.v-title, .section-title, .svc-section-hd h2, .cfg-hd h2 { font-size: var(--fl-title) !important; }
@media (min-width: 761px) and (pointer: fine) {
  .sost-card p, .settore p, .tec-card p, .card-desc, .svc-list-card p, .rel-card-body p { font-size: var(--fl-card) !important; line-height: 1.6; }
}

/* ---------- Contrasto del testo sopra foto e sfondi scuri (misurato pixel per pixel, 30/09) ---------- */
.settore p { color: rgba(255, 255, 255, .8) !important; }                  /* era .45: 3,8:1 → ora oltre 7:1 */
.hero-breadcrumb, .hero-breadcrumb span, .hero-time-note { color: rgba(255, 255, 255, .88) !important; }
.hero-eyebrow { background: rgba(14, 29, 61, .55) !important; border-color: rgba(255, 209, 0, .55) !important; backdrop-filter: blur(6px); }
/* Card "Altri prodotti": la foto (::after) veniva disegnata SOPRA la sfumatura scura → testo bianco su foto chiara (1,1:1).
   Bug presente anche sul live. Sfumatura sopra la foto, testo sopra la sfumatura. */
.rel-card-overlay { z-index: 1; background: linear-gradient(to top, rgba(8,15,38,.95) 0%, rgba(8,15,38,.82) 48%, rgba(8,15,38,.2) 100%) !important; }
.rel-card-body { z-index: 2; }
.rel-card-body p { color: rgba(255, 255, 255, .86) !important; }

/* Modulo contatti (fondo blu) e recensioni: etichette più grandi e leggibili (erano 10,4–11,5px a 3,9:1) */
#contatti .fg > label, #contatti .cont-txt > strong { font-size: 13px !important; color: rgba(255, 255, 255, .78) !important; letter-spacing: .06em; }
#contatti .cont-form > p { color: rgba(255, 255, 255, .78) !important; font-size: 15px !important; }
#star-rating-hint { opacity: 1 !important; color: var(--text-mid) !important; }
.cfg-qty-note { color: #c62828 !important; }

/* =============================================
   SCALA TIPOGRAFICA DESKTOP (30/09): prima 26 grandezze diverse (10,4–20,8px, molte a 0,2px di distanza).
   Ora solo: 12 (etichette MAIUSCOLE) · 13 (note) · 14 (testo secondario, controlli) · 15 (pulsanti, scelte)
   · 16 (testo) · 18 · 20 · titoli. Nessun testo sotto 12px.
   ============================================= */
@media (min-width: 761px) and (pointer: fine) {
  /* 12 — etichette in maiuscolo e badge */
  .section-eyebrow, .v-label, .hero-eyebrow, .pv-tag, .pg-guide-img span, .upload-format-chip, .orari-box h5,
  .rev-products-label, .cfg-summary-badge, .svc-tag, .footer-nav h4, .sost-badge { font-size: 12px !important; }
  /* 13 — note, didascalie, meta */
  .cfg-summary-trust span, .form-hint, .cfg-summary-meta span, .rev-prod-chip, .cfg-qty-note, .hero-time-note, .pv-note,
  .rev-side-note, .numero-label, .rel-card-link, .map-label span, .hero-breadcrumb, .hero-breadcrumb a, .hero-breadcrumb span,
  .cfg-summary li span, .upload-zone p, #upload-zone p, #photo-upload-zone p, .faq-q span span, .pg-guide-tools span, .pv-cap, #pvCaption,
  .hero-review-link, .footer-bottom span, .upload-label, #btn-clear-cart, .stat-chip { font-size: 13px !important; }
  /* 14 — testo secondario e controlli */
  .cfg-field > .form-label, .orario-row strong, .orario-row span, .rev-trust-item, .footer-contact a, .footer-tagline,
  .svc-swatch, .svc-toggle-btn, .footer-nav li a, .footer-legal li a, #cfgExtraToggle, .qty-btn, .cbtn, .header-nav a, .nav-dd-btn { font-size: 14px !important; }
  /* 15 — scelte del configuratore e pulsanti */
  .cfg-pill, .cfgx-step, #cfgAddCart, .btn-primary, .btn-ghost, .pv-logo-btn, #swatchDesc, .step-desc, .faq-q strong { font-size: 15px !important; }
  /* 16 — testo di lettura */
  .faq-q, .rev-side-text, .sost-intro p, .cont-info p, #star-rating-hint, .svc-list-card h4, .settore h3, .sost-card h4 { font-size: 16px !important; }
  /* 18 / 20 */
  .rel-card-body h3, .svc-story p, .step-title { font-size: 18px !important; }
  .hero-sub, #swatchTitle, .cont-form h3 { font-size: 20px !important; }
}
@media (min-width: 761px) and (pointer: fine) {
  .form-unit, .up-guide span span, .up-guide > span > span { font-size: 13px !important; }
  .up-guide strong { font-size: 16px !important; }
  .up-guide span { font-size: 14px !important; }
  .btn-cont-submit, #btn-open-checkout { font-size: 15px !important; }
  .cont-txt span, #cart-bar-label { font-size: 15px !important; }
  /* Aree cliccabili ≥ 24px (WCAG 2.5.8) senza spostare nulla: padding + margine negativo uguale */
  .hero-breadcrumb a, .footer-nav li a, .footer-legal li a, #btn-clear-cart { display: inline-block; padding-block: 4px; margin-block: -4px; }
  .footer-contact a { padding-block: 2px; margin-block: -2px; }
}

/* =============================================
   SCALA TIPOGRAFICA TELEFONO/TABLET (30/09): minimo 12px solo per etichette MAIUSCOLE, 13px note, 14px controlli.
   Misurati prima: 10,4–12,8px su orari, etichette modulo, note configuratore, badge.
   ============================================= */
@media (max-width: 760px), (pointer: coarse) {
  .orari-box h5, .rev-products-label, .pv-tag, .pg-guide-img span, .svc-tag { font-size: 12px !important; }
  .form-hint, .cfg-qty-note, .rev-side-note, .numero-label, .rel-card-link, .form-unit, .hero-review-link, .pv-note, .pv-cap { font-size: 13px !important; }
  .qty-btn { font-size: 14px !important; }
  /* Distanza minima tra tasti vicini: 8px (misurati 4–6px) */
  .cfgx-steps, .qty-picker, .gd-matrix { gap: 8px !important; }
  .footer-contact { gap: 8px !important; }
}
@media (min-width: 761px) and (pointer: fine) { input[type="range"] { min-height: 24px; } }