/* =====================================================================
 * Sphere — Site Template Basic 2.0
 * "Svecchiato" — derivato dal mockup v6
 * Compatibile con il theming dictionary Sphere (placeholder [TOKEN])
 * Da abbinare a: sp-site-layout-2.0.css + sp-animations-2.0.css + basic2.php
 * Prefix: sp-tpl-* (template-specifici, non collidono col core sp-*)
 * 2026-05-13
 * ===================================================================== */

:root {
  --sp-tpl-r-sm: 4px;
  --sp-tpl-r-md: 6px;
  --sp-tpl-r-lg: 10px;
  --sp-tpl-ease: cubic-bezier(.2, .7, .2, 1);
  --sp-tpl-container: 1240px;
  --sp-tpl-topbar-h: 38px;
  --sp-tpl-header-h: 72px;
  /* Hardcoded brand-template (identità visiva del template 2.0) */
  --sp-tpl-navy-0: #0e1d2b;
  --sp-tpl-navy-1: #14283a;
  --sp-tpl-navy-deep: #06121d;
  --sp-tpl-ink-0: #1a2332;
  --sp-tpl-ink-1: #4a5868;
  --sp-tpl-ink-2: #7a8694;
  --sp-tpl-line: rgba(14,29,43,0.08);
  --sp-tpl-line-dark: rgba(255,255,255,0.08);
  --sp-tpl-bg-soft: #f6f9fa;
  --sp-tpl-shadow-1: 0 1px 2px rgba(14,29,43,0.06);
  --sp-tpl-shadow-2: 0 8px 24px rgba(14,29,43,0.08);
  /* Semantic colors (no placeholder, semantica template) */
  --sp-tpl-success: #1f7a55;
  --sp-tpl-success-soft: rgba(80,180,140,0.18);
  --sp-tpl-warning: #9a7320;
  --sp-tpl-warning-soft: rgba(240,198,116,0.24);
  --sp-tpl-danger: #a83a3a;
  --sp-tpl-danger-soft: rgba(220,80,80,0.16);
  /* Glow accent (deriva da PRIMARY-COLOR cliente) */
  --sp-tpl-accent-glow: rgba(80,172,188,0.22);
  --sp-tpl-accent-soft: rgba(80,172,188,0.08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Montserrat, system-ui, sans-serif;
  color: var(--sp-tpl-ink-0);
  background: #ffffff;
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
#sp-main-content {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
#sp-main-content > section { flex: 0 0 auto; }
#sp-main-content > .sp-tpl-reserved { flex: 1 0 auto; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

.sp-tpl-container {
  width: 100%;
  max-width: var(--sp-tpl-container);
  margin: 0 auto;
  padding: 0 var(--sp-unit-l);
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.005em; line-height: 1.2; }
h1 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); letter-spacing: -0.015em; line-height: 1.1; }
h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
h3 { font-size: 1.15rem; }
p  { margin: 0; }

/* ===== SLIDESHOW LEGACY (drop-in con basic.php parent: .slides/.slide/.slide-nav*) =====
   I 2.0 emettono ancora markup legacy via basic::slideshow($slides). Stylizziamo
   con CSS vars e snappy transitions. In Sfera 6 si sostituisce con Ken Burns 2.0. */
.slides {
  position: relative;
  width: 100%;
  height: 600px;
  overflow: hidden;
}
.slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 600px;
  opacity: 0;
  z-index: 0;
  transition: opacity .5s var(--sp-tpl-ease);
}
.slide.active {
  opacity: 1;
  z-index: 5;
}
.slide > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sp-slide-title {
  position: absolute;
  left: 5rem;
  top: 25%;
  transform: translateY(-50%);
  font-weight: bold;
  font-size: 3.5rem;
  text-transform: uppercase;
  color: #ffffff;
  padding: 4px 8px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.5);
}
.sp-slide-intro {
  position: absolute;
  left: 5rem;
  top: 35%;
  transform: translateY(-50%);
  font-size: 2rem;
  color: #ffffff;
  padding: 4px 8px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.5);
}
.slide-nav-panel {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  font-size: 1.2rem;
  color: #ffffff;
  z-index: 100;
  display: flex;
  gap: 8px;
}
.slide-nav-panel * {
  opacity: 0.6;
  cursor: pointer;
  transition: opacity .25s var(--sp-tpl-ease), color .25s var(--sp-tpl-ease);
}
.slide-nav-panel *.active { color: #50acbc; opacity: 1; }
.slides:hover .slide-nav-panel * { opacity: 0.8; }
.slide-nav-panel *:hover { opacity: 1; }
.slide-nav {
  position: absolute;
  top: 0;
  height: 100%;
  width: 5rem;
  font-size: 3rem;
  color: #ffffff;
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
}
.slide-nav[data-nav="odd"]  { left: 0; }
.slide-nav[data-nav="even"] { right: 0; }
.slide-nav * {
  cursor: pointer;
  opacity: 0;
  transition: opacity .25s var(--sp-tpl-ease);
}
.slide-nav:hover * { opacity: 1; }

.sp-tpl-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #50acbc;
  margin-bottom: 18px;
}

/* ===== TOP UTILITY BAR ===== */
.sp-tpl-topbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--sp-tpl-topbar-h);
  display: flex; align-items: center;
  background: linear-gradient(90deg, #50acbc 0%, #34d1ea 100%);
  color: #ffffff;
  font-size: 0.85rem;
  z-index: 60;
}
.sp-tpl-topbar .sp-tpl-container { display: flex; justify-content: space-between; gap: 24px; align-items: center; }
.sp-tpl-topbar-left  { display: flex; gap: 22px; align-items: center; }
.sp-tpl-topbar-right { display: flex; gap: 18px; align-items: center; }
.sp-tpl-topbar a {
  color: #ffffff;
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 500;
  transition: opacity .2s var(--sp-tpl-ease);
}
.sp-tpl-topbar a:hover { opacity: 0.78; }
.sp-tpl-topbar svg { opacity: 0.85; }

/* ===== HEADER (white, sticky) ===== */
.sp-tpl-header {
  position: fixed;
  top: var(--sp-tpl-topbar-h); left: 0; right: 0;
  height: var(--sp-tpl-header-h);
  display: flex; align-items: center;
  background: #ffffff;
  border-bottom: 1px solid var(--sp-tpl-line);
  z-index: 55;
  transition: box-shadow .25s var(--sp-tpl-ease);
}
.sp-tpl-header.is-scrolled { box-shadow: var(--sp-tpl-shadow-2); }
.sp-tpl-header .sp-tpl-container { display: flex; justify-content: space-between; align-items: center; gap: 24px; }

.sp-tpl-logo {
  display: inline-flex; align-items: center; gap: 12px;
  font-weight: 700; font-size: 1.15rem;
  color: var(--sp-tpl-navy-0);
  letter-spacing: -0.01em;
}
.sp-tpl-logo img, .sp-tpl-logo svg { max-height: 36px; width: auto; }
.sp-tpl-logo-svg .sp-tpl-logo-hex { stroke: #50acbc; stroke-width: 1.4; }
.sp-tpl-logo-svg .sp-tpl-logo-mesh { stroke: #50acbc; stroke-width: 0.8; opacity: 0.55; }
.sp-tpl-logo-svg .sp-tpl-logo-node { fill: #50acbc; opacity: 0.9; }
/* variante contrast (footer scuro): mark chiaro */
.sp-tpl-logo-svg--contrast .sp-tpl-logo-hex,
.sp-tpl-logo-svg--contrast .sp-tpl-logo-mesh { stroke: #ffffff; }
.sp-tpl-logo-svg--contrast .sp-tpl-logo-node { fill: #ffffff; }
.sp-tpl-footer-logo-svg { width: 40px; height: 40px; flex-shrink: 0; }
/* footer brand: mark + nome/legale inline (come mockup v6) */
.sp-tpl-footer-brand { display: flex; align-items: center; gap: 14px; }
.sp-tpl-footer-brand .sp-tpl-footer-logo { max-height: 40px; width: auto; flex-shrink: 0; }
.sp-tpl-footer-brand-name { font-weight: 700; font-size: 1.05rem; color: #ffffff; letter-spacing: -0.01em; }
.sp-tpl-footer-brand-legal { font-size: 0.82rem; color: rgba(255,255,255,0.55); margin-top: 2px; }
.sp-tpl-logo-brand {
  font-weight: 700; font-size: 1.05rem;
  color: var(--sp-tpl-navy-0);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
@media (max-width: 640px) {
  /* mobile a 3 zone: logo (svg) a sinistra, scritta centrata, hamburger a destra */
  .sp-tpl-header .sp-tpl-container { position: relative; }
  .sp-tpl-logo-brand { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; }
  /* footer centratura: vedi blocco in fondo (dopo le media query responsive, per vincere
     sull'override di ≤1024 footer-top align-items:flex-start). */
}

/* Lang toggle (topbar): bottone code + dropdown panel data-driven da siteData.locales */
.sp-tpl-lang { position: relative; display: inline-flex; }
.sp-tpl-lang-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--sp-tpl-bg-soft, #fafafa);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--sp-tpl-r-sm, 4px);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.sp-tpl-lang-toggle:hover,
.sp-tpl-lang[data-sp-lang-open] .sp-tpl-lang-toggle {
  border-color: rgba(255, 255, 255, 0.42);
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}
.sp-tpl-lang-toggle svg { transition: transform .2s ease; }
.sp-tpl-lang[data-sp-lang-open] .sp-tpl-lang-toggle svg { transform: rotate(180deg); }
.sp-tpl-lang-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 140px;
  background: var(--sp-tpl-navy-0, #0e1d2b);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--sp-tpl-r-sm, 4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  padding: 4px;
  display: none;
  z-index: 90;
}
.sp-tpl-lang[data-sp-lang-open] .sp-tpl-lang-panel { display: block; }
.sp-tpl-lang-option {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  color: rgba(245, 245, 245, 0.78);
  font-size: 0.86rem;
  text-align: left;
  cursor: pointer;
  border-radius: var(--sp-tpl-r-sm, 4px);
  transition: background .15s ease, color .15s ease;
}
.sp-tpl-lang-option:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.sp-tpl-lang-option.is-current { color: #50acbc; }
.sp-tpl-lang-option__code {
  font-weight: 700; letter-spacing: 0.04em;
  font-size: 0.75rem;
  min-width: 22px;
}
.sp-tpl-lang-option__label { flex: 1; }

.sp-tpl-nav { display: flex; gap: 4px; position: relative; }
.sp-tpl-nav-indicator {
  position: absolute;
  bottom: 4px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, #50acbc 30%, transparent) 12%,
    #50acbc 50%,
    color-mix(in srgb, #50acbc 30%, transparent) 88%,
    transparent 100%);
  border-radius: 1px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(0);
  transition: transform .35s var(--sp-tpl-ease), width .35s var(--sp-tpl-ease), opacity .25s ease;
}
.sp-tpl-nav-indicator.is-visible { opacity: 1; }
.sp-tpl-nav a {
  padding: 10px 16px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--sp-tpl-ink-1);
  border-radius: var(--sp-tpl-r-sm);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: color .2s var(--sp-tpl-ease);
  position: relative;
}
.sp-tpl-nav a:hover,
.sp-tpl-nav a.is-active,
.sp-tpl-nav a[aria-current="page"] { color: #50acbc; }
/* Vecchio underline per-link disattivato: ora è gestito da .sp-tpl-nav-indicator
 * (singleton animato in slide tra le voci). Lascio commentato per documentare la migrazione. */
.sp-tpl-nav a.is-active::after,
.sp-tpl-nav a[aria-current="page"]::after {
  content: none;
  left: 10px; right: 10px; bottom: 4px;
  height: 2px;
}
.sp-tpl-hamburger {
  display: none;
  background: transparent;
  border: 0;
  color: var(--sp-tpl-ink-0);
  width: 40px; height: 40px;
  border-radius: var(--sp-tpl-r-sm);
  padding: 0;
  cursor: pointer;
}
.sp-tpl-hamburger:hover { background: var(--sp-tpl-bg-soft); }

/* ===== DRAWER mobile ===== */
.sp-tpl-drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(6, 18, 29, 0.55);
  backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity 220ms ease;
  z-index: 70;
}
.sp-tpl-drawer-overlay.is-open { opacity: 1; pointer-events: auto; }
.sp-tpl-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(320px, 86vw);
  /* Riprende il pattern bg area riservata: radial secondary forte bottom-right che sfuma
   * verso il menù; primary soft top-left per profondità. Su bg-soft di base. */
  background:
    radial-gradient(circle at 100% 100%, color-mix(in srgb, #34d1ea 38%, transparent) 0%, transparent 55%),
    radial-gradient(circle at 0% 0%, color-mix(in srgb, #50acbc 14%, transparent) 0%, transparent 40%),
    var(--sp-tpl-bg-soft, #fafafa);
  box-shadow: var(--sp-tpl-shadow-2);
  transform: translateX(100%);
  transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 80;
  padding: calc(var(--sp-tpl-topbar-h) + 20px) 24px 24px;
  overflow-y: auto;
  isolation: isolate;
}
/* Pattern quadratini sottili come l'area riservata */
.sp-tpl-drawer::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(0deg, transparent 95%, rgba(0,0,0,0.04) 100%),
    linear-gradient(90deg, transparent 95%, rgba(0,0,0,0.04) 100%);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
}
.sp-tpl-drawer > * { position: relative; z-index: 1; }
.sp-tpl-drawer-brand {
  position: absolute;
  left: 0; right: 0; bottom: 24px;
  text-align: center;
  z-index: 1;
  font-family: var(--font-display, inherit);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, #50acbc 75%, var(--sp-tpl-ink-0));
  opacity: 0.85;
  pointer-events: none;
  user-select: none;
}
.sp-tpl-drawer.is-open { transform: translateX(0); }
.sp-tpl-drawer-nav { display: flex; flex-direction: column; gap: 4px; }
.sp-tpl-drawer-link {
  padding: 12px 14px;
  font-size: 1rem; font-weight: 600;
  color: var(--sp-tpl-ink-0);
  border-radius: var(--sp-tpl-r-sm);
  transition: background 160ms ease, color 160ms ease;
}
.sp-tpl-drawer-link { position: relative; }
.sp-tpl-drawer-link:hover { color: #50acbc; }
.sp-tpl-drawer-link.is-active,
.sp-tpl-drawer-link[aria-current="page"] { color: #50acbc; }
.sp-tpl-drawer-link.is-active::after,
.sp-tpl-drawer-link[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 14px;
  bottom: 4px;
  width: 56px;
  height: 1.5px;
  background: linear-gradient(90deg, #50acbc 0%, color-mix(in srgb, #50acbc 40%, transparent) 60%, transparent 100%);
  border-radius: 1px;
}

/* ===== BUTTONS ===== */
.sp-tpl-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 26px;
  border-radius: var(--sp-tpl-r-sm);
  font-weight: 600; font-size: 0.95rem;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .2s var(--sp-tpl-ease), background .2s var(--sp-tpl-ease),
              color .2s var(--sp-tpl-ease), border-color .2s var(--sp-tpl-ease);
  font-family: inherit;
}
.sp-tpl-btn:focus-visible { outline: 2px solid #50acbc; outline-offset: 3px; }
.sp-tpl-btn--primary { background: #50acbc; color: var(--sp-tpl-navy-0); }
.sp-tpl-btn--primary:hover { background: #34d1ea; color: var(--sp-tpl-navy-0); transform: translateY(-1px); }
.sp-tpl-btn--ghost  { border-color: rgba(255,255,255,0.25); color: #ffffff; }
.sp-tpl-btn--ghost:hover { border-color: #50acbc; color: #50acbc; }
.sp-tpl-btn--dark   { background: var(--sp-tpl-navy-0); color: #ffffff; }
.sp-tpl-btn--dark:hover { background: var(--sp-tpl-navy-1); color: #ffffff; transform: translateY(-1px); }
.sp-tpl-btn--outline {
  border-color: var(--sp-tpl-line);
  background: transparent;
  color: var(--sp-tpl-ink-1);
}
.sp-tpl-btn--outline:hover { border-color: #50acbc; color: #50acbc; }

/* ===== HERO ===== */
.sp-tpl-hero {
  position: relative;
  min-height: 78vh;
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--sp-tpl-topbar-h) + var(--sp-tpl-header-h) + 80px) 24px 100px;
  text-align: center;
  background: var(--sp-tpl-navy-0);
  color: #ffffff;
  overflow: hidden;
  isolation: isolate;
}
.sp-tpl-hero--short {
  min-height: 55vh;
  padding: calc(var(--sp-tpl-topbar-h) + var(--sp-tpl-header-h) + 70px) 24px 70px;
}
.sp-tpl-hero-bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 60% 50% at 50% 30%, var(--sp-tpl-accent-soft), transparent 65%),
    linear-gradient(180deg, #0a1828 0%, var(--sp-tpl-navy-0) 60%, var(--sp-tpl-navy-deep) 100%);
}
.sp-tpl-hero-bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.55; }
.sp-tpl-hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, transparent 30%, rgba(6,18,29,0.55) 100%);
  pointer-events: none;
}
.sp-tpl-hero-inner { max-width: 760px; position: relative; }
.sp-tpl-hero h1 { color: #ffffff; margin-bottom: 22px; }
.sp-tpl-hero h1 .sp-tpl-accent { color: #50acbc; }
.sp-tpl-hero p {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.78);
  max-width: 58ch;
  margin: 0 auto 36px;
}
.sp-tpl-hero--short h1 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin-bottom: 16px; }
.sp-tpl-hero--short p  { font-size: 1.02rem; margin-bottom: 0; color: rgba(255,255,255,0.72); }
.sp-tpl-hero-actions { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ===== SECTIONS ===== */
.sp-tpl-section { padding: 100px 0; background: #ffffff; }
.sp-tpl-section--soft { background: var(--sp-tpl-bg-soft); }
.sp-tpl-section--dark { background: var(--sp-tpl-navy-0); color: #ffffff; }

.sp-tpl-section-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.sp-tpl-section-head h2 { color: var(--sp-tpl-navy-0); margin-bottom: 14px; }
.sp-tpl-section-head p  { color: var(--sp-tpl-ink-1); font-size: 1.02rem; }
.sp-tpl-section-head .sp-tpl-eyebrow { margin-bottom: 14px; }

.sp-tpl-section-head--inline {
  text-align: left;
  display: flex; justify-content: space-between; align-items: end;
  gap: 24px; flex-wrap: wrap; max-width: none;
}

/* ===== INTRO CARDS (home) ===== */
.sp-tpl-intro-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.sp-tpl-intro-card {
  padding: 28px 26px;
  background: var(--sp-tpl-bg-soft);
  border: 1px solid var(--sp-tpl-line);
  border-radius: var(--sp-tpl-r-md);
  transition: border-color .25s var(--sp-tpl-ease), background .25s var(--sp-tpl-ease),
              transform .25s var(--sp-tpl-ease);
}
.sp-tpl-intro-card:hover {
  border-color: #50acbc;
  background: var(--sp-tpl-accent-soft);
  transform: translateY(-3px);
}
.sp-tpl-intro-card .sp-tpl-ico {
  width: 44px; height: 44px;
  border-radius: var(--sp-tpl-r-sm);
  background: linear-gradient(135deg, var(--sp-tpl-accent-soft), rgba(80,172,188,0.05));
  color: #50acbc;
  display: grid; place-items: center;
  margin-bottom: 18px;
}
.sp-tpl-intro-card h3 { color: var(--sp-tpl-navy-0); margin-bottom: 8px; font-size: 1.1rem; }
.sp-tpl-intro-card p  { color: var(--sp-tpl-ink-1); font-size: 0.93rem; }

/* ===== VALUE CARDS (chi siamo) ===== */
.sp-tpl-values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.sp-tpl-value-card {
  padding: 28px 24px;
  background: #ffffff;
  border: 1px solid var(--sp-tpl-line);
  border-radius: var(--sp-tpl-r-md);
  transition: border-color .25s var(--sp-tpl-ease), transform .25s var(--sp-tpl-ease);
}
.sp-tpl-value-card:hover { border-color: #50acbc; transform: translateY(-3px); }
.sp-tpl-value-card .sp-tpl-num {
  font-size: 1.6rem; font-weight: 700;
  color: #50acbc;
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}
.sp-tpl-value-card h3 { color: var(--sp-tpl-navy-0); margin-bottom: 8px; font-size: 1.05rem; }
.sp-tpl-value-card p  { color: var(--sp-tpl-ink-1); font-size: 0.92rem; }

/* ===== TOOLBAR (search + filters + count) ===== */
.sp-tpl-toolbar { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 32px; }
.sp-tpl-search-box { position: relative; flex: 1; min-width: 260px; max-width: 360px; }
.sp-tpl-search-box input {
  width: 100%; padding: 13px 44px;
  background: #ffffff;
  border: 1px solid var(--sp-tpl-line);
  border-radius: var(--sp-tpl-r-sm);
  color: var(--sp-tpl-ink-0);
  font: inherit; font-family: inherit; font-size: 0.95rem;
  outline: 0;
  transition: border-color .2s var(--sp-tpl-ease), box-shadow .2s var(--sp-tpl-ease);
}
.sp-tpl-search-box input:focus {
  border-color: #50acbc;
  box-shadow: 0 0 0 4px var(--sp-tpl-accent-soft);
}
.sp-tpl-search-box .sp-tpl-ico {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--sp-tpl-ink-2); pointer-events: none;
}
.sp-tpl-search-box .sp-tpl-clear {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px;
  border: 0; border-radius: 50%;
  background: rgba(14,29,43,0.08);
  color: var(--sp-tpl-ink-1);
  font-size: 1rem; line-height: 1;
  display: none; align-items: center; justify-content: center;
  cursor: pointer;
}
.sp-tpl-search-box.has-value .sp-tpl-clear { display: flex; }
.sp-tpl-search-box .sp-tpl-clear:hover { background: #50acbc; color: var(--sp-tpl-navy-0); }
.sp-tpl-filters { display: flex; gap: 10px; flex-wrap: wrap; }
.sp-tpl-filters button {
  padding: 8px 16px; font-size: 0.88rem;
  border: 1px solid var(--sp-tpl-line);
  border-radius: var(--sp-tpl-r-sm);
  background: transparent;
  color: var(--sp-tpl-ink-1);
  font-family: inherit;
  cursor: pointer;
  transition: all .2s var(--sp-tpl-ease);
}
.sp-tpl-filters button:hover,
.sp-tpl-filters button.is-active {
  background: #50acbc; color: var(--sp-tpl-navy-0); border-color: #50acbc;
}
.sp-tpl-count { color: var(--sp-tpl-ink-2); font-size: 0.85rem; margin-left: auto; white-space: nowrap; }
.sp-tpl-empty {
  display: none; text-align: center; padding: 80px 20px;
  color: var(--sp-tpl-ink-2); font-size: 0.95rem;
  border: 1px dashed var(--sp-tpl-line);
  border-radius: var(--sp-tpl-r-md);
}
.sp-tpl-empty.is-visible { display: block; }

/* ===== NEWS GRID ===== */
.sp-tpl-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.sp-tpl-news-card {
  background: #ffffff;
  border: 1px solid var(--sp-tpl-line);
  border-radius: var(--sp-tpl-r-md);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .25s var(--sp-tpl-ease), box-shadow .25s var(--sp-tpl-ease),
              border-color .25s var(--sp-tpl-ease);
}
.sp-tpl-news-card:hover {
  transform: translateY(-4px); box-shadow: var(--sp-tpl-shadow-2); border-color: #50acbc;
}
.sp-tpl-news-thumb { aspect-ratio: 16/10; position: relative; background: linear-gradient(135deg, var(--sp-tpl-navy-0), #50acbc); }
.sp-tpl-news-thumb::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 25% 30%, rgba(255,255,255,0.18), transparent 35%),
    radial-gradient(circle at 75% 70%, rgba(255,255,255,0.12), transparent 30%);
}
.sp-tpl-news-body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.sp-tpl-news-meta { display: flex; gap: 12px; font-size: 0.78rem; color: var(--sp-tpl-ink-2); text-transform: uppercase; letter-spacing: 0.1em; }
.sp-tpl-news-meta .sp-tpl-tag { color: #50acbc; font-weight: 600; }
.sp-tpl-news-body h3 { color: var(--sp-tpl-navy-0); font-size: 1.1rem; line-height: 1.35; }
.sp-tpl-news-body p  { color: var(--sp-tpl-ink-1); font-size: 0.92rem; }
.sp-tpl-news-card .sp-tpl-more {
  margin-top: auto; color: var(--sp-tpl-navy-0);
  font-weight: 600; font-size: 0.88rem;
  display: inline-flex; align-items: center; gap: 6px;
}
.sp-tpl-news-card .sp-tpl-more::after { content: "→"; transition: transform .2s var(--sp-tpl-ease); }
.sp-tpl-news-card:hover .sp-tpl-more::after { transform: translateX(4px); }

/* ===== STORE GRID ===== */
.sp-tpl-store-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.sp-tpl-product-card {
  background: #ffffff;
  border: 1px solid var(--sp-tpl-line);
  border-radius: var(--sp-tpl-r-md);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .25s var(--sp-tpl-ease), box-shadow .25s var(--sp-tpl-ease),
              border-color .25s var(--sp-tpl-ease);
}
.sp-tpl-product-card:hover { transform: translateY(-3px); box-shadow: var(--sp-tpl-shadow-2); border-color: #50acbc; }
.sp-tpl-product-thumb { aspect-ratio: 1; background: linear-gradient(135deg, #e6eef0, #d0dde0); position: relative; }
.sp-tpl-product-thumb::after {
  content: ""; position: absolute; inset: 30%;
  background: radial-gradient(circle, #50acbc 0%, transparent 70%);
  opacity: 0.35; filter: blur(18px);
}
.sp-tpl-product-body { padding: 16px 18px 20px; }
.sp-tpl-product-cat { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--sp-tpl-ink-2); }
.sp-tpl-product-body h3 { font-size: 1rem; margin: 4px 0 10px; color: var(--sp-tpl-navy-0); font-weight: 600; }
.sp-tpl-product-price { display: flex; align-items: baseline; gap: 8px; }
.sp-tpl-product-price .sp-tpl-price { color: #50acbc; font-weight: 700; font-size: 1.08rem; }
.sp-tpl-product-price .sp-tpl-old   { color: var(--sp-tpl-ink-2); text-decoration: line-through; font-size: 0.88rem; }

/* ===== PAGINATION ===== */
.sp-tpl-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 48px; }
.sp-tpl-pagination button {
  width: 40px; height: 40px;
  border-radius: var(--sp-tpl-r-sm);
  border: 1px solid var(--sp-tpl-line);
  background: transparent;
  color: var(--sp-tpl-ink-1);
  font: inherit; font-family: inherit; font-weight: 600;
  cursor: pointer;
}
.sp-tpl-pagination button.is-active { background: var(--sp-tpl-navy-0); color: #ffffff; border-color: var(--sp-tpl-navy-0); }
.sp-tpl-pagination button:hover { border-color: #50acbc; color: #50acbc; }

/* ===== CONTACTS ===== */
.sp-tpl-contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 36px; align-items: stretch; }
.sp-tpl-contact-info { display: flex; flex-direction: column; gap: 14px; }
.sp-tpl-info-card {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 20px;
  background: var(--sp-tpl-bg-soft);
  border: 1px solid var(--sp-tpl-line);
  border-radius: var(--sp-tpl-r-md);
  transition: border-color .25s var(--sp-tpl-ease), background .25s var(--sp-tpl-ease);
}
.sp-tpl-info-card:hover { border-color: #50acbc; background: var(--sp-tpl-accent-soft); }
.sp-tpl-info-card .sp-tpl-ico {
  flex-shrink: 0; width: 40px; height: 40px;
  border-radius: var(--sp-tpl-r-sm);
  background: linear-gradient(135deg, var(--sp-tpl-accent-soft), rgba(80,172,188,0.05));
  color: #50acbc;
  display: grid; place-items: center;
}
.sp-tpl-info-card .sp-tpl-body { flex: 1; min-width: 0; }
.sp-tpl-info-card h4 {
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--sp-tpl-ink-2); margin: 0 0 4px; font-weight: 600;
}
.sp-tpl-info-card p { color: var(--sp-tpl-ink-0); font-size: 0.96rem; line-height: 1.45; }
.sp-tpl-info-card a { color: #50acbc; }

.sp-tpl-map {
  position: relative; min-height: 460px;
  border-radius: var(--sp-tpl-r-md); overflow: hidden;
  border: 1px solid var(--sp-tpl-line);
  background: var(--sp-tpl-bg-soft);
}
.sp-tpl-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sp-tpl-map-pin {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -100%);
  z-index: 2; pointer-events: none;
}
.sp-tpl-map-pin-dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #50acbc;
  border: 3px solid #ffffff;
  box-shadow: 0 0 0 4px var(--sp-tpl-accent-soft), 0 4px 12px rgba(14,29,43,0.18);
  position: relative;
}
.sp-tpl-map-pin-dot::after {
  content: ""; position: absolute; inset: -4px;
  border-radius: 50%; background: #50acbc;
  animation: sp-pulse-ring 2.2s ease-out infinite;
  z-index: -1;
}

/* ===== LOGIN CARD ===== */
.sp-tpl-login-card {
  max-width: 420px;
  margin: 0 auto;
  padding: 36px 32px;
  background: #ffffff;
  border: 1px solid var(--sp-tpl-line);
  border-radius: var(--sp-tpl-r-md);
  box-shadow: var(--sp-tpl-shadow-2);
}
.sp-tpl-login-card h2  { color: var(--sp-tpl-navy-0); margin-bottom: 10px; font-size: 1.4rem; }
.sp-tpl-login-card .sp-tpl-sub { color: var(--sp-tpl-ink-1); font-size: 0.95rem; margin-bottom: 24px; }
.sp-tpl-login-form { display: flex; flex-direction: column; gap: var(--sp-unit); }
.sp-tpl-login-form label { display: flex; flex-direction: column; gap: var(--sp-unit-s); font-size: 0.82rem; color: var(--sp-tpl-ink-2); }
.sp-tpl-login-form input {
  padding: calc(var(--sp-unit-s) * 2) var(--sp-unit);
  background: var(--sp-tpl-bg-soft);
  border: 1px solid var(--sp-tpl-line);
  border-radius: var(--sp-tpl-r-sm);
  color: var(--sp-tpl-ink-0); font: inherit; font-family: inherit; font-size: 0.95rem;
  outline: 0;
  transition: border-color .2s var(--sp-tpl-ease), background .2s var(--sp-tpl-ease);
}
.sp-tpl-login-form input:focus { background: #ffffff; }

/* Toggle "mostra password" — override scoped al template 2.0.
   des.php emette il button inline con top:6px hardcoded (calibrato per padding input legacy).
   Sul padding input 2.0 (10×15) il valore corretto per centrare l'icona verticalmente
   nell'input è ~10px = calc(var(--sp-unit-s) * 2). !important per battere l'inline style.
   margin/line-height a 0 per evitare che il button "respiri" e sembri alto/disallineato.
   Sfera 6: andrà sostituito da un refactor strutturale di des.php (wrap input+button). */
.sp-tpl-reserved-card .fen button[type="button"] {
  top: calc(var(--sp-unit-s) * 2) !important;
  transform: none !important;
  margin: 0 !important;
  line-height: 1 !important;
}
.sp-tpl-login-card .sp-tpl-extras {
  margin-top: 18px; display: flex; justify-content: space-between;
  font-size: 0.85rem;
}
.sp-tpl-login-card .sp-tpl-extras a { color: #50acbc; }

/* ===== ACCOUNT LAYOUT (area riservata 2.0, mockup v6) ===== */
.sp-tpl-account-layout {
  display: flex;
  gap: var(--sp-unit-l);
  align-items: flex-start;
}
.sp-tpl-account-sidebar {
  flex-shrink: 0;
  /* 260px = 60*4 + 5*4 — sidebar standard mockup */
  width: calc(var(--sp-unit-xl) * 4 + var(--sp-unit-s) * 4);
  background: #ffffff;
  border: 1px solid var(--sp-tpl-line);
  border-radius: var(--sp-tpl-r-md);
  padding: var(--sp-unit-l) var(--sp-unit);
  box-shadow: var(--sp-tpl-shadow-1);
  position: sticky;
  /* top:0 e non var(--sp-unit-l): con un main alto (tab/flip) lo sticky si "incollava" già a
     riposo aggiungendo l'offset → la sidebar scendeva di 30px. Con 0 resta allineata al main
     e segue comunque lo scroll. */
  top: 0;
}
.sp-tpl-account-main {
  flex: 1 1 auto;
  min-width: 0;
}
/* MOBILE: impila sidebar (sopra, full width) + main (sotto, full width). Senza, la riga flex con
   sidebar a larghezza fissa fa strabordare il main fuori schermo. Niente sticky su mobile. */
@media (max-width: 760px) {
  /* meno gap sopra l'area menu su mobile. Doppia classe per battere la base .sp-tpl-reserved--app
     (definita più avanti nel file → a parità di specificità vincerebbe). */
  .sp-tpl-content.sp-tpl-reserved--app { padding-top: var(--sp-unit); }
  /* meno padding laterale su mobile: 30px (unit-l) mangiavano troppa larghezza → 15px (unit). */
  .sp-tpl-reserved--app > .sp-tpl-container { padding-left: var(--sp-unit); padding-right: var(--sp-unit); }
  .sp-tpl-dash-card { padding: var(--sp-unit); }
  .sp-tpl-account-layout { flex-direction: column; }
  .sp-tpl-account-sidebar {
    width: 100%;
    position: static;
    top: auto;
  }
  /* MENU COLLASSABILE: l'header (avatar+nome) è il toggle; le voci sono nascoste finché
     non .is-open (jSite initDropdown via data-sp-dropdown). Si vede icona+nome, tap → espande. */
  .sp-tpl-account-sidebar .sp-tpl-account-user { cursor: pointer; margin-bottom: 0; }
  .sp-tpl-account-user-caret {
    display: block;
    margin-left: auto;
    width: 0; height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--sp-tpl-ink-2, #6b7280);
    transition: transform .25s var(--sp-tpl-ease);
  }
  .sp-tpl-account-sidebar.is-open .sp-tpl-account-user-caret { transform: rotate(180deg); }
  .sp-tpl-sidebar-nav {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s var(--sp-tpl-ease);
  }
  .sp-tpl-account-sidebar.is-open .sp-tpl-account-user { margin-bottom: var(--sp-unit); }
  .sp-tpl-account-sidebar.is-open .sp-tpl-sidebar-nav { max-height: 360px; }
}
/* caret visibile solo su mobile (toggle del menu collassabile) */
.sp-tpl-account-user-caret { display: none; }

/* user header in sidebar */
.sp-tpl-account-user {
  display: flex;
  align-items: center;
  gap: calc(var(--sp-unit-s) * 2);
  padding: 0 var(--sp-unit-s);
  margin-bottom: var(--sp-unit-l);
}
.sp-tpl-account-avatar {
  width: calc(var(--sp-unit-l) * 1.5);
  height: calc(var(--sp-unit-l) * 1.5);
  border-radius: 50%;
  background: #50acbc;
  color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.sp-tpl-account-user-info {
  display: flex; flex-direction: column;
  min-width: 0;
}
.sp-tpl-account-user-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--sp-tpl-navy-0);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sp-tpl-account-user-role {
  font-size: 0.8rem;
  color: var(--sp-tpl-ink-2);
}

/* sidebar nav */
.sp-tpl-sidebar-nav {
  display: flex; flex-direction: column;
  gap: var(--sp-unit-s);
}
.sp-tpl-sidebar-link {
  display: flex; align-items: center;
  gap: calc(var(--sp-unit-s) * 2);
  padding: calc(var(--sp-unit-s) * 2) var(--sp-unit);
  border-radius: var(--sp-tpl-r-sm);
  color: var(--sp-tpl-ink-1);
  text-decoration: none;
  font-size: 0.9rem;
  transition: background 0.18s var(--sp-tpl-ease), color 0.18s var(--sp-tpl-ease);
  position: relative;
  cursor: pointer;
}
.sp-tpl-sidebar-link:hover {
  background: var(--sp-tpl-bg-soft);
  color: var(--sp-tpl-navy-0);
}
.sp-tpl-sidebar-link[aria-current="page"] {
  background: var(--sp-tpl-accent-soft);
  color: var(--sp-tpl-navy-0);
  font-weight: 600;
}
.sp-tpl-sidebar-link[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0; top: var(--sp-unit-s); bottom: var(--sp-unit-s);
  width: 3px;
  background: #50acbc;
  border-radius: 0 var(--sp-tpl-r-sm) var(--sp-tpl-r-sm) 0;
}
.sp-tpl-sidebar-link-icon {
  flex-shrink: 0;
  width: calc(var(--sp-unit) * 1.2);
  height: calc(var(--sp-unit) * 1.2);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--sp-tpl-ink-2);
}
.sp-tpl-sidebar-link:hover .sp-tpl-sidebar-link-icon,
.sp-tpl-sidebar-link[aria-current="page"] .sp-tpl-sidebar-link-icon {
  color: #50acbc;
}
.sp-tpl-sidebar-link-label {
  flex: 1 1 auto;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ===== TABBED SECTION (capability generale: launcherType tabBar) =====
   Tab "attaccate" al box sottostante (estetica browser-tab): la tab attiva si
   fonde col pannello bianco #sp-tpl-tabpane (= il box). Tutto allineato. Riusabile. */
/* perspective sul container → il tab ruota in 3D (rotateX) durante il flip della card.
   Effetto comparsa: quando il Profilo viene caricato (es. click da Dashboard) la sezione entra
   con fade + leggero slide-up. */
.sp-tpl-tabbed {
  perspective: 900px;
  animation: sp-tpl-tabbed-appear .45s var(--sp-tpl-ease) both;
}
@keyframes sp-tpl-tabbed-appear {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.sp-tpl-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-unit-s);
  margin: 0;
  /* il tab flippa sull'asse ORIZZONTALE (rotateX), origine al centro:
     avanti = top indietro / bottom avanti; ritorno = al contrario. */
  transform-origin: center center;
  padding: 0;            /* primo tab a filo col bordo sx del box (angolo alto-sx squadrato si salda) */
  position: relative;
  z-index: 1;
}
@keyframes sp-tpl-tab-flap {       /* AVANTI (→ edit): top indietro, bottom avanti */
  0%   { transform: rotateX(0deg); }
  50%  { transform: rotateX(90deg); }
  100% { transform: rotateX(0deg); }
}
@keyframes sp-tpl-tab-flap-back {  /* SAVE/ANNULLA (→ fronte): al contrario */
  0%   { transform: rotateX(0deg); }
  50%  { transform: rotateX(-90deg); }
  100% { transform: rotateX(0deg); }
}
/* Ad OGNI flip il JS marca .sp-tpl-tabbed con .is-flipping per la durata del flip. La direzione la
   distingue lo stato is-flipped della card (già aggiornato quando parte il flap):
   andata = card flipped → flap; ritorno = card non flipped → flap-back (specchiato). */
.sp-tpl-tabbed.is-flipping:has(.sp-tpl-flip.is-flipped) .sp-tpl-tabs {
  animation: sp-tpl-tab-flap .6s cubic-bezier(.4, .2, .2, 1);
}
.sp-tpl-tabbed.is-flipping:not(:has(.sp-tpl-flip.is-flipped)) .sp-tpl-tabs {
  animation: sp-tpl-tab-flap-back .6s cubic-bezier(.4, .2, .2, 1);
}
.sp-tpl-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-unit-s);
  padding: var(--sp-unit-s) var(--sp-unit);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  color: var(--sp-tpl-ink-1);
  background: var(--sp-tpl-bg-soft);
  border: 1px solid var(--sp-tpl-line);
  border-bottom: 0;
  border-radius: var(--sp-tpl-r-md) var(--sp-tpl-r-md) 0 0;
  margin-bottom: -1px;            /* sovrappone il bordo del box → "attaccata" */
  cursor: pointer;
  transition: color .2s var(--sp-tpl-ease), background .2s var(--sp-tpl-ease);
}
.sp-tpl-tab:hover { color: var(--sp-tpl-navy-0); }
.sp-tpl-tab.active {
  background: #ffffff;            /* uguale al box → si fonde */
  color: var(--sp-tpl-navy-0);
}
.sp-tpl-tab-icon { display: inline-flex; flex-shrink: 0; }
.sp-tpl-tabpane {
  /* Default: il pane È la card "agganciata" ai tab → contenuto generico (es. Sicurezza)
     dentro un box bianco che si salda alla tab attiva (angolo alto-sx squadrato),
     così i tab non sembrano "attaccati in aria". */
  min-height: calc(var(--sp-unit-xl) * 2);
  perspective: 1600px;
  background: #ffffff;
  border: 1px solid var(--sp-tpl-line);
  border-radius: 0 var(--sp-tpl-r-md) var(--sp-tpl-r-md) var(--sp-tpl-r-md);
  box-shadow: var(--sp-tpl-shadow-1);
  padding: var(--sp-unit-l);
}
/* Eccezione: se il tab contiene la flip card, è LEI il box (gira intera) → il pane torna
   trasparente per non fare card-in-card. Anagrafica resta identica. */
.sp-tpl-tabpane:has(> .sp-tpl-flip) {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

/* ===== FLIP CARD (view ⇄ edit) =====
   Fronte = visualizzazione dati, retro = des form. "Modifica" gira la scheda,
   "Annulla"/save la rigira. Grid-stack: le due facce occupano la stessa cella →
   il contenitore prende l'altezza della faccia più alta (no clipping su des lunghi).
   Degrada gentile: se 3D non supportato, le facce restano leggibili (no backface). */
.sp-tpl-flip { perspective: 1600px; }
.sp-tpl-flip-inner {
  display: grid;   /* grid-stack: le due facce nella STESSA cella → il flip 3D + backface-visibility
                      le nasconde a vicenda. (NB: NON usare position absolute/relative qui: rompe la
                      backface e si vedono entrambe le facce. Altezza adattiva → semmai via JS.) */
  transition: transform .6s cubic-bezier(.4, .2, .2, 1), height .5s cubic-bezier(.4, .2, .2, 1);
  transform-style: preserve-3d;
}
.sp-tpl-flip.is-flipped .sp-tpl-flip-inner { transform: rotateY(180deg); }
.sp-tpl-flip-face {
  grid-area: 1 / 1;
  align-self: start;   /* niente stretch alla cella → ogni faccia = sua altezza naturale; il JS
                          (site.flipSetHeight) imposta l'altezza dell'inner = faccia ATTIVA (adattiva). */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  min-width: 0;
  /* La faccia È la scheda bianca: gira tutta col flip. Top-left piatto = aggancio tab. */
  background: #ffffff;
  border: 1px solid var(--sp-tpl-line);
  border-radius: 0 var(--sp-tpl-r-md) var(--sp-tpl-r-md) var(--sp-tpl-r-md);
  box-shadow: var(--sp-tpl-shadow-1);
  padding: var(--sp-unit-l);
}
.sp-tpl-flip-back { transform: rotateY(180deg); }
/* Fallback: niente preserve-3d (browser vecchi) → mostra solo il fronte finché non si flippa */
@supports not (transform-style: preserve-3d) {
  .sp-tpl-flip-back { display: none; }
  .sp-tpl-flip.is-flipped .sp-tpl-flip-front { display: none; }
  .sp-tpl-flip.is-flipped .sp-tpl-flip-back { display: block; transform: none; }
}
.sp-tpl-flip-actions {
  display: flex;
  justify-content: flex-end;            /* "Modifica" (fronte) in basso a destra come le altre barre */
  gap: var(--sp-unit-s);
  margin-top: var(--sp-unit-l);
  padding-top: var(--sp-unit);
  border-top: 1px solid var(--sp-tpl-line);
}
/* Pulsantiera del des nel retro (Save + Annulla): stile coerente coi .sp-tpl-btn.
   wrapper desBar = .disable-selection (getDesBarStructure); Save = [data-sphere], Annulla = [data-sp-flip-to]. */
.sp-tpl-flip-back .disable-selection {
  justify-content: flex-end;            /* barra a destra, niente space-between */
  gap: var(--sp-unit-s);
  margin-top: var(--sp-unit-l);
  padding-top: var(--sp-unit);
  border-top: 1px solid var(--sp-tpl-line);
}
.sp-tpl-flip-back .sp-button {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 0;                        /* annulla sp-margin-t del desBar */
  padding: 13px 26px;
  border-radius: var(--sp-tpl-r-sm);
  font-weight: 600; font-size: 0.95rem; letter-spacing: 0.01em;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .2s var(--sp-tpl-ease), background .2s var(--sp-tpl-ease),
              color .2s var(--sp-tpl-ease), border-color .2s var(--sp-tpl-ease);
}
.sp-tpl-flip-back .sp-button[data-sphere] {      /* Save → primary (come "Modifica") */
  background: #50acbc; color: var(--sp-tpl-navy-0);
}
.sp-tpl-flip-back .sp-button[data-sphere]:hover { background: #34d1ea; transform: translateY(-1px); }
.sp-tpl-flip-back .sp-button[data-sp-flip-to] {  /* Annulla → outline */
  background: transparent; border-color: var(--sp-tpl-line); color: var(--sp-tpl-ink-1);
}
.sp-tpl-flip-back .sp-button[data-sp-flip-to]:hover { border-color: #50acbc; color: #50acbc; }
/* Il "box" ora è il pannello #sp-tpl-tabpane (vedi sopra): le facce sono trasparenti
   e il flip avviene DENTRO il box, che resta fermo. */

/* Testata scheda profilo: avatar + nome + sottotitolo */
.sp-tpl-profile-head {
  display: flex;
  align-items: center;
  gap: var(--sp-unit);
  padding-bottom: var(--sp-unit);
  margin-bottom: var(--sp-unit);
  border-bottom: 1px solid var(--sp-tpl-line);
}
.sp-tpl-profile-headinfo { min-width: 0; }
.sp-tpl-profile-name { font-weight: 700; font-size: 1.05rem; color: var(--sp-tpl-navy-0); line-height: 1.2; }
.sp-tpl-profile-sub { color: var(--sp-tpl-ink-2); font-size: 0.85rem; }

/* Vista dati profilo (fronte): righe label → valore */
/* ===== GRUPPI dei descrittori (.des-group) — capability "gruppi" =====
   Sezione nominabile dentro un des (view/mod/add). Titolo header + separatore tra gruppi. */
.des-group { width: 100%; margin-bottom: var(--sp-unit-l); }   /* gruppi impilati (sezioni), non affiancati */
.des-group:last-child { margin-bottom: 0; }
.des-group + .des-group { padding-top: var(--sp-unit-l); border-top: 1px solid var(--sp-tpl-line); }
.des-group-title {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #50acbc;
  margin-bottom: var(--sp-unit);
}
.des-group-desc {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--sp-tpl-ink-2);
  margin: calc(-1 * var(--sp-unit-s)) 0 var(--sp-unit);
}
/* Logica layout per-gruppo via desGroups.type → classe des-group--<type>. Default (no type) = stack.
   Titolo/descrizione restano sempre a tutta larghezza anche in flex/grid. */
.des-group--flex { display: flex; flex-wrap: wrap; gap: var(--sp-unit) var(--sp-unit-l); align-items: flex-start; }
.des-group--flex > * { flex: 1 1 240px; min-width: 0; }
.des-group--flex > .des-group-title, .des-group--flex > .des-group-desc { flex-basis: 100%; flex-grow: 0; }
.des-group--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-unit) var(--sp-unit-l); }
.des-group--grid > .des-group-title, .des-group--grid > .des-group-desc { grid-column: 1 / -1; }
/* valori lunghi (email, CF…) vanno a capo, mai overflow che accavalla la colonna accanto */
.sp-fen-view { overflow-wrap: anywhere; word-break: break-word; }
/* mobile: i campi affiancati (grid 2-col / flex / fen-view) impilano a piena larghezza */
@media ( max-width: 640px ) {
	.des-group--grid { grid-template-columns: 1fr; }
	.des-group--flex > * { flex-basis: 100%; }
	.sp-fen-view > * { flex: 1 1 100%; min-width: 0; }
}
.sp-tpl-profile-view { display: flex; flex-direction: column; gap: var(--sp-unit-s); }
.sp-tpl-profile-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-unit);
  padding: var(--sp-unit-s) 0;
  border-bottom: 1px solid var(--sp-tpl-line);
}
.sp-tpl-profile-row:last-child { border-bottom: 0; }
.sp-tpl-profile-label { color: var(--sp-tpl-ink-2); font-size: 0.85rem; }
.sp-tpl-profile-value { color: var(--sp-tpl-navy-0); font-weight: 600; }
.sp-tpl-muted { color: var(--sp-tpl-ink-2); }

/* ===== FOOTER ===== */
.sp-tpl-footer {
  align-self: stretch; /* reset di sp-site-layout-2.0 footer { align-self: flex-end } */
  width: 100%;
  background: #0a1521;
  color: rgba(255,255,255,0.78);
  padding: 56px 0 0;
  box-shadow: none;
}
.sp-tpl-footer-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 40px; flex-wrap: wrap;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--sp-tpl-line-dark);
}
.sp-tpl-footer-col { display: flex; flex-direction: column; gap: 14px; min-width: 160px; }
.sp-tpl-footer-col--brand { gap: 12px; min-width: 200px; }
.sp-tpl-footer-logo { max-height: 44px; width: auto; }
.sp-tpl-footer-title {
  font-weight: 700; font-size: 0.92rem;
  color: #ffffff;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.sp-tpl-footer-items { display: flex; flex-direction: column; gap: 8px; }
.sp-tpl-footer-item {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.65);
  transition: color .18s var(--sp-tpl-ease);
}
.sp-tpl-footer-item:hover { color: #50acbc; }
.sp-tpl-footer-item--image { display: inline-flex; align-items: center; gap: 8px; }
.sp-tpl-footer-item--image img { height: 22px; width: auto; opacity: 0.75; transition: opacity .18s var(--sp-tpl-ease); }
.sp-tpl-footer-item--image:hover img { opacity: 1; }

.sp-tpl-footer-bottom {
  padding: 22px 0;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.55);
}
.sp-tpl-footer-copyright { color: rgba(255,255,255,0.55); }
.sp-tpl-footer-legal { display: flex; gap: 22px; flex-wrap: wrap; }
.sp-tpl-footer-legal-link {
  color: rgba(255,255,255,0.65);
  transition: color .18s var(--sp-tpl-ease);
}
.sp-tpl-footer-legal-link:hover { color: #50acbc; }

/* ===== INTRO (siteIntro composer step) ===== */
.sp-tpl-intro {
  padding: clamp(64px, 8vw, 96px) 0;
  background: var(--sp-tpl-bg-soft, #fafafa);
  text-align: center;
}
.sp-tpl-intro + .sp-tpl-intro { padding-top: 0; }
.sp-tpl-intro-title {
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight: 700;
  color: var(--sp-tpl-navy-0);
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}
.sp-tpl-intro-body {
  font-size: 1.02rem; line-height: 1.7;
  color: var(--sp-tpl-ink-1);
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.sp-tpl-intro-body p + p { margin-top: 14px; }
/* La grid di card resta allineata a sinistra anche se la testa è centrata. */
.sp-tpl-intro-grid { text-align: left; margin-top: clamp(40px, 5vw, 56px); }
/* Teaser (news/store in home): grid riusata dentro sezione intro centrata. */
.sp-tpl-intro .sp-tpl-news-grid,
.sp-tpl-intro .sp-tpl-store-grid { text-align: left; margin-top: clamp(40px, 5vw, 56px); }
.sp-tpl-teaser-more { margin-top: clamp(32px, 4vw, 44px); }

/* ===== CTA BAND (banda finale home) ===== */
/* top padding ridotto: il gap sopra è già dato dal padding-bottom della sezione precedente. */
.sp-tpl-cta { padding: clamp(8px, 1.5vw, 20px) 0 clamp(64px, 8vw, 96px); background: var(--sp-tpl-bg-soft, #fafafa); }
.sp-tpl-cta-card {
  position: relative;
  padding: clamp(48px, 6vw, 88px) clamp(24px, 4vw, 64px);
  border-radius: var(--sp-tpl-r-lg);
  background:
    radial-gradient(ellipse at top right, var(--sp-tpl-accent-soft), transparent 55%),
    linear-gradient(180deg, var(--sp-tpl-navy-0), var(--sp-tpl-navy-1));
  border: 1px solid var(--sp-tpl-accent-soft);
  text-align: center;
  color: #ffffff;
  overflow: hidden;
}
.sp-tpl-cta-mesh { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.sp-tpl-cta-inner { position: relative; z-index: 1; }
.sp-tpl-cta-card h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); color: #ffffff; margin-bottom: 16px; letter-spacing: -0.01em; }
.sp-tpl-cta-card p { color: rgba(255,255,255,0.82); max-width: 620px; margin: 0 auto 32px; font-size: 1.05rem; line-height: 1.7; }
.sp-tpl-cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ===== REVIEWS (recensioni/testimonial) ===== */
.sp-tpl-reviews { padding: clamp(64px, 8vw, 96px) 0; background: var(--sp-tpl-bg-soft, #fafafa); text-align: center; }
.sp-tpl-reviews-rating { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; color: var(--sp-tpl-ink-1); }
.sp-tpl-reviews-rating strong { color: var(--sp-tpl-navy-0); font-size: 1.2rem; }
.sp-tpl-stars { color: #f5a623; letter-spacing: 2px; }
.sp-tpl-reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: left; margin-top: clamp(40px, 5vw, 56px); }
.sp-tpl-review-card { padding: 28px 26px; background: #ffffff; border: 1px solid var(--sp-tpl-line); border-radius: var(--sp-tpl-r-md); display: flex; flex-direction: column; gap: 14px; }
.sp-tpl-review-card .sp-tpl-stars { font-size: 0.9rem; }
.sp-tpl-review-text { color: var(--sp-tpl-ink-1); font-size: 0.95rem; line-height: 1.65; flex: 1; }
.sp-tpl-review-author { display: flex; flex-direction: column; }
.sp-tpl-review-author strong { color: var(--sp-tpl-navy-0); }
.sp-tpl-review-author span { color: var(--sp-tpl-ink-2); font-size: 0.85rem; }
@media (max-width: 900px) { .sp-tpl-reviews-grid { grid-template-columns: 1fr; } }

/* ===== METRICS STRIP ===== */
.sp-tpl-metrics { padding: clamp(56px, 7vw, 84px) 0; background: var(--sp-tpl-navy-0); color: #ffffff; text-align: center; }
.sp-tpl-metrics .sp-tpl-intro-title { color: #ffffff; }
.sp-tpl-metrics .sp-tpl-intro-body { color: rgba(255,255,255,0.78); }
.sp-tpl-metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: clamp(32px, 4vw, 44px); }
.sp-tpl-metric { display: flex; flex-direction: column; gap: 6px; }
.sp-tpl-metric-value { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; color: #50acbc; line-height: 1; }
.sp-tpl-metric-label { color: rgba(255,255,255,0.72); font-size: 0.9rem; }
@media (max-width: 900px) { .sp-tpl-metrics-grid { grid-template-columns: repeat(2, 1fr); } }

/* ===== LOGOS STRIP ===== */
.sp-tpl-logos { padding: clamp(40px, 5vw, 60px) 0; background: var(--sp-tpl-bg-soft, #fafafa); text-align: center; }
.sp-tpl-logos-title { color: var(--sp-tpl-ink-2); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.78rem; margin-bottom: 24px; }
.sp-tpl-logos-row { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 52px); align-items: center; justify-content: center; }
.sp-tpl-logo-item { color: var(--sp-tpl-ink-2); font-weight: 600; font-size: 1.05rem; opacity: 0.7; transition: opacity .2s var(--sp-tpl-ease); }
.sp-tpl-logo-item:hover { opacity: 1; color: var(--sp-tpl-navy-0); }
.sp-tpl-logo-item img { height: 34px; width: auto; filter: grayscale(1); opacity: 0.7; }
.sp-tpl-logo-item:hover img { filter: none; opacity: 1; }

/* ===== FAQ ===== */
.sp-tpl-faq { padding: clamp(64px, 8vw, 96px) 0; background: #ffffff; text-align: center; }
.sp-tpl-faq-list { max-width: 760px; margin: clamp(32px, 4vw, 44px) auto 0; text-align: left; display: flex; flex-direction: column; gap: 12px; }
.sp-tpl-faq-item { border: 1px solid var(--sp-tpl-line); border-radius: var(--sp-tpl-r-md); background: var(--sp-tpl-bg-soft, #fafafa); padding: 0 22px; }
.sp-tpl-faq-item summary { cursor: pointer; padding: 18px 0; font-weight: 600; color: var(--sp-tpl-navy-0); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.sp-tpl-faq-item summary::-webkit-details-marker { display: none; }
.sp-tpl-faq-item summary::after { content: '+'; color: #50acbc; font-size: 1.4rem; line-height: 1; }
.sp-tpl-faq-item[open] summary::after { content: '\2212'; }
.sp-tpl-faq-answer { padding: 0 0 18px; color: var(--sp-tpl-ink-1); line-height: 1.7; }

/* ===== BENTO ===== */
.sp-tpl-bento { padding: clamp(64px, 8vw, 96px) 0; background: var(--sp-tpl-bg-soft, #fafafa); text-align: center; }
.sp-tpl-bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; text-align: left; margin-top: clamp(40px, 5vw, 56px); }
.sp-tpl-bento-card { padding: 30px 28px; background: #ffffff; border: 1px solid var(--sp-tpl-line); border-radius: var(--sp-tpl-r-md); transition: border-color .25s var(--sp-tpl-ease), transform .25s var(--sp-tpl-ease); }
.sp-tpl-bento-card:hover { border-color: #50acbc; transform: translateY(-3px); }
.sp-tpl-bento-card.is-wide { grid-column: span 2; }
.sp-tpl-bento-card h3 { color: var(--sp-tpl-navy-0); margin-bottom: 8px; }
.sp-tpl-bento-card p { color: var(--sp-tpl-ink-1); font-size: 0.93rem; }
@media (max-width: 900px) { .sp-tpl-bento-grid { grid-template-columns: 1fr; } .sp-tpl-bento-card.is-wide { grid-column: auto; } }

/* ===== CASE STUDY ===== */
.sp-tpl-case { padding: clamp(40px, 5vw, 64px) 0 clamp(64px, 8vw, 96px); background: var(--sp-tpl-bg-soft, #fafafa); }
.sp-tpl-case-card { padding: clamp(40px, 5vw, 72px); border-radius: var(--sp-tpl-r-lg); background: #ffffff; border: 1px solid var(--sp-tpl-line); max-width: 880px; margin: 0 auto; }
.sp-tpl-case-card h2 { color: var(--sp-tpl-navy-0); margin-bottom: 14px; }
.sp-tpl-case-lead { color: var(--sp-tpl-ink-1); line-height: 1.7; margin-bottom: 24px; }
.sp-tpl-case-points { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.sp-tpl-case-points li { padding-left: 26px; position: relative; color: var(--sp-tpl-ink-1); }
.sp-tpl-case-points li::before { content: '\2713'; position: absolute; left: 0; color: #50acbc; font-weight: 700; }
.sp-tpl-case-points strong { color: var(--sp-tpl-navy-0); }

/* ===== FOOTER SOCIALS (icon-button, mockup v6) ===== */
.sp-tpl-footer-socials { display: flex; gap: 10px; flex-wrap: wrap; }
.sp-tpl-footer-social { width: 38px; height: 38px; border-radius: var(--sp-tpl-r-sm); background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.8); display: grid; place-items: center; font-size: 0.95rem; transition: background .2s var(--sp-tpl-ease), color .2s var(--sp-tpl-ease), transform .2s var(--sp-tpl-ease); }
.sp-tpl-footer-social:hover { background: #50acbc; color: var(--sp-tpl-navy-0); transform: translateY(-2px); }

/* ===== BACK TO TOP ===== */
.sp-tpl-totop {
  position: fixed; right: 24px; bottom: 24px;
  width: 44px; height: 44px; border-radius: 50%;
  background: #50acbc; color: var(--sp-tpl-navy-0);
  border: none; cursor: pointer; display: grid; place-items: center;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .25s var(--sp-tpl-ease), transform .25s var(--sp-tpl-ease), visibility .25s, background .2s var(--sp-tpl-ease);
  z-index: 90; box-shadow: 0 6px 20px rgba(0,0,0,0.18);
}
.sp-tpl-totop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.sp-tpl-totop:hover { background: #34d1ea; }
@media (prefers-reduced-motion: reduce) { .sp-tpl-totop { transition: none; } }

/* ===== PAGE HERO (pagine interne — mockup v6 style: centered + teal spotlight) ===== */
.sp-tpl-page-hero {
  position: relative;
  background: var(--sp-tpl-navy-0);
  color: #ffffff;
  padding: calc(var(--sp-tpl-topbar-h) + var(--sp-tpl-header-h) + 70px) 24px 70px;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
/* Background "tono di luce" — sempre presente, anche con image */
.sp-tpl-page-hero-bg {
  position: absolute; inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 50% at 50% 30%, rgba(78, 195, 200, 0.16), transparent 65%),
    linear-gradient(180deg, #0a1828 0%, var(--sp-tpl-navy-0) 60%, var(--sp-tpl-navy-deep) 100%);
}
/* Image opzionale: si fonde con il gradient via luminosity + opacity */
.sp-tpl-page-hero-bg img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.4;
  mix-blend-mode: luminosity;
}
/* Overlay aggiuntivo (solo quando c'è image) — preserva il tono di luce sopra */
.sp-tpl-page-hero-bg img + .sp-tpl-page-hero-overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 30%, rgba(78, 195, 200, 0.18), transparent 65%),
    linear-gradient(180deg, rgba(6, 18, 29, 0.30) 0%, rgba(6, 18, 29, 0.55) 70%, rgba(6, 18, 29, 0.75) 100%);
}
.sp-tpl-page-hero-inner { position: relative; z-index: 2; }
.sp-tpl-page-hero .sp-tpl-eyebrow { color: #50acbc; margin-bottom: 14px; }
.sp-tpl-page-hero-title {
  color: #ffffff;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 16px;
}
.sp-tpl-page-hero-teaser {
  color: rgba(255, 255, 255, 0.72);
  max-width: 56ch;
  margin: 0 auto;
  font-size: 1.02rem;
  line-height: 1.55;
}

/* ===== CONTENT (section + section-head pattern del mockup) ===== */
.sp-tpl-content {
  padding: 90px 0;
  background: #ffffff;
}
.sp-tpl-content-head {
  max-width: 720px;
  margin: 0 auto 56px;
  text-align: center;
}
.sp-tpl-content-head .sp-tpl-eyebrow { color: #50acbc; margin-bottom: 14px; }
.sp-tpl-content-subtitle {
  color: var(--sp-tpl-navy-0);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}
.sp-tpl-content-body {
  color: var(--sp-tpl-ink-1);
  font-size: 1.02rem;
  line-height: 1.65;
}
.sp-tpl-content-body p + p,
.sp-tpl-content-body h2,
.sp-tpl-content-body h3,
.sp-tpl-content-body ul,
.sp-tpl-content-body ol { margin-top: 18px; }
.sp-tpl-content-body h2 { font-size: 1.3rem; color: var(--sp-tpl-navy-0); }
.sp-tpl-content-body h3 { font-size: 1.1rem; color: var(--sp-tpl-navy-0); }
.sp-tpl-content-body a { color: #50acbc; }
.sp-tpl-content-body a:hover { text-decoration: underline; }
.sp-tpl-content-body ul,
.sp-tpl-content-body ol { padding-left: 22px; text-align: left; display: inline-block; }
.sp-tpl-content-body li + li { margin-top: 6px; }

/* ===== CONTENT GRID (boxetti — 4 col numerati 01/02/03/04 ===== */
.sp-tpl-content-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.sp-tpl-content-card {
  display: flex; flex-direction: column;
  padding: 28px 24px;
  background: #ffffff;
  border: 1px solid var(--sp-tpl-line);
  border-radius: var(--sp-tpl-r-md);
  transition: border-color .25s var(--sp-tpl-ease), transform .25s var(--sp-tpl-ease);
  text-align: left;
}
.sp-tpl-content-card:hover,
a.sp-tpl-content-card:hover {
  border-color: #50acbc;
  transform: translateY(-3px);
}
.sp-tpl-content-card-num {
  font-size: 1.6rem; font-weight: 700;
  color: #50acbc;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 14px;
}
.sp-tpl-content-card-icon {
  font-size: 1.8rem;
  color: #50acbc;
  margin-bottom: 14px;
  line-height: 1;
}
.sp-tpl-content-card-img { margin-bottom: 14px; }
.sp-tpl-content-card-img img {
  max-width: 100%; height: auto;
  border-radius: var(--sp-tpl-r-sm);
}
.sp-tpl-content-card-title {
  font-size: 1.05rem; font-weight: 700;
  color: var(--sp-tpl-navy-0);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.sp-tpl-content-card-body {
  font-size: 0.92rem;
  color: var(--sp-tpl-ink-1);
  line-height: 1.55;
}

/* ===== NEWS / ARTICLES (mockup v6) ===== */
.sp-tpl-news-toolbar {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  margin-bottom: 32px;
}
.sp-tpl-news-search {
  position: relative; flex: 1;
  min-width: 260px; max-width: 360px;
}
.sp-tpl-news-search input {
  width: 100%; padding: 13px 44px;
  background: #ffffff;
  border: 1px solid var(--sp-tpl-line);
  border-radius: var(--sp-tpl-r-sm);
  color: var(--sp-tpl-ink-0);
  font: inherit; font-size: 0.95rem;
  outline: 0;
  transition: border-color .2s var(--sp-tpl-ease), box-shadow .2s var(--sp-tpl-ease);
}
.sp-tpl-news-search input:focus { border-color: #50acbc; box-shadow: 0 0 0 4px rgba(78,195,200,0.14); }
.sp-tpl-news-search .sp-tpl-news-search-ico {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--sp-tpl-ink-2); pointer-events: none;
}
.sp-tpl-news-search .sp-tpl-news-search-clear {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border: 0; border-radius: 50%;
  background: rgba(14, 29, 43, 0.08); color: var(--sp-tpl-ink-1);
  cursor: pointer; font-size: 1rem; line-height: 1;
  display: none; align-items: center; justify-content: center;
}
.sp-tpl-news-search.has-value .sp-tpl-news-search-clear { display: flex; }
.sp-tpl-news-search .sp-tpl-news-search-clear:hover { background: #50acbc; color: var(--sp-tpl-navy-0); }

.sp-tpl-news-filters { display: flex; gap: 10px; flex-wrap: wrap; }
.sp-tpl-news-filters a,
.sp-tpl-news-filters button {
  padding: 8px 16px; font-size: 0.88rem;
  border-radius: var(--sp-tpl-r-sm);
  border: 1px solid var(--sp-tpl-line);
  background: transparent;
  color: var(--sp-tpl-ink-1);
  cursor: pointer;
  transition: all .2s var(--sp-tpl-ease);
}
.sp-tpl-news-filters a:hover,
.sp-tpl-news-filters button:hover,
.sp-tpl-news-filters a.is-active,
.sp-tpl-news-filters button.is-active {
  background: #50acbc;
  color: var(--sp-tpl-navy-0);
  border-color: #50acbc;
}

.sp-tpl-news-count {
  color: var(--sp-tpl-ink-2);
  font-size: 0.85rem;
  margin-left: auto;
  white-space: nowrap;
}

.sp-tpl-news-empty {
  text-align: center; padding: 80px 20px;
  color: var(--sp-tpl-ink-2); font-size: 0.95rem;
  border: 1px dashed var(--sp-tpl-line);
  border-radius: var(--sp-tpl-r-md);
}

.sp-tpl-news-approx {
  margin: 0 0 var(--sp-unit-l) 0;
  padding: var(--sp-unit) var(--sp-unit-l);
  background: linear-gradient(135deg, rgba(255, 196, 0, 0.10), rgba(255, 145, 0, 0.06));
  border: 1px solid rgba(255, 196, 0, 0.35);
  border-left: 3px solid var(--sp-tpl-accent, #ff9100);
  border-radius: var(--sp-tpl-r-md);
  color: var(--sp-tpl-ink-1);
  font-size: 0.92rem;
  line-height: 1.45;
}
.sp-tpl-news-approx::before {
  content: "⚐";
  display: inline-block;
  margin-right: 8px;
  color: var(--sp-tpl-accent, #ff9100);
  font-size: 0.95rem;
}

.sp-tpl-news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.sp-tpl-news-card {
  background: #ffffff;
  border: 1px solid var(--sp-tpl-line);
  border-radius: var(--sp-tpl-r-md);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .25s var(--sp-tpl-ease), box-shadow .25s var(--sp-tpl-ease), border-color .25s var(--sp-tpl-ease);
}
.sp-tpl-news-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sp-tpl-shadow-2);
  border-color: #50acbc;
}
.sp-tpl-news-thumb {
  aspect-ratio: 16/10;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--sp-tpl-navy-0), #50acbc);
}
.sp-tpl-news-thumb img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.sp-tpl-news-thumb.alt-1 { background: linear-gradient(135deg, #2c4a55, #4ec3c8); }
.sp-tpl-news-thumb.alt-2 { background: linear-gradient(135deg, #1a2330, #f0c674); }
.sp-tpl-news-thumb.alt-3 { background: linear-gradient(135deg, #0e1d2b, #6b9aa6); }
.sp-tpl-news-thumb.alt-4 { background: linear-gradient(135deg, #3a4f5c, #a08af0); }
.sp-tpl-news-thumb.alt-5 { background: linear-gradient(135deg, #14283a, #4ec3c8); }
.sp-tpl-news-thumb.alt-6 { background: linear-gradient(135deg, #2a1f2c, #f08aa0); }
.sp-tpl-news-thumb:not(:has(img))::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 25% 30%, rgba(255,255,255,0.18), transparent 35%),
    radial-gradient(circle at 75% 70%, rgba(255,255,255,0.12), transparent 30%);
}
.sp-tpl-news-body {
  padding: 22px;
  display: flex; flex-direction: column; gap: 10px;
  flex: 1;
}
.sp-tpl-news-meta {
  display: flex; gap: 12px;
  font-size: 0.78rem;
  color: var(--sp-tpl-ink-2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.sp-tpl-news-meta .sp-tpl-news-tag {
  color: #50acbc;
  font-weight: 600;
}
.sp-tpl-news-body h3 {
  color: var(--sp-tpl-navy-0);
  font-size: 1.1rem;
  line-height: 1.35;
  margin: 0;
}
.sp-tpl-news-body p {
  color: var(--sp-tpl-ink-1);
  font-size: 0.92rem;
  margin: 0;
}
.sp-tpl-news-card .sp-tpl-news-more {
  margin-top: auto;
  color: var(--sp-tpl-navy-0);
  font-weight: 600;
  font-size: 0.88rem;
  display: inline-flex; align-items: center; gap: 6px;
}
.sp-tpl-news-card .sp-tpl-news-more::after {
  content: "→";
  transition: transform .2s var(--sp-tpl-ease);
}
.sp-tpl-news-card:hover .sp-tpl-news-more::after { transform: translateX(4px); }

.sp-tpl-news-pager {
  display: flex; justify-content: center; gap: 12px;
  margin-top: 48px;
}
.sp-tpl-news-pager a,
.sp-tpl-news-pager button {
  padding: 10px 22px;
  border-radius: var(--sp-tpl-r-sm);
  border: 1px solid var(--sp-tpl-line);
  background: transparent;
  color: var(--sp-tpl-ink-1);
  font-weight: 600; font-size: 0.92rem;
  cursor: pointer;
  transition: border-color .2s var(--sp-tpl-ease), color .2s var(--sp-tpl-ease);
}
.sp-tpl-news-pager a:hover,
.sp-tpl-news-pager button:hover {
  border-color: #50acbc;
  color: #50acbc;
}

/* ===== AREA RISERVATA (login card centered) ===== */
.sp-tpl-reserved {
  position: relative;
  padding: 80px 0;
  background:
    radial-gradient(circle at 15% 20%, color-mix(in srgb, #50acbc 22%, transparent) 0%, transparent 45%),
    radial-gradient(circle at 85% 80%, color-mix(in srgb, #34d1ea 18%, transparent) 0%, transparent 50%),
    var(--sp-tpl-bg-soft, #fafafa);
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.sp-tpl-reserved::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(0deg, transparent 95%, rgba(0,0,0,0.04) 100%),
    linear-gradient(90deg, transparent 95%, rgba(0,0,0,0.04) 100%);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
}
.sp-tpl-reserved > * { position: relative; z-index: 1; }
.sp-tpl-reserved .sp-tpl-container { width: 100%; }

/* App variant (dashboard area riservata): full-width con padding come sito.
   La login card resta centered; solo la home loggata si allarga a tutta larghezza. */
.sp-tpl-reserved--app {
  display: block;
  padding: var(--sp-unit-xl) 0;
}
.sp-tpl-reserved--app > .sp-tpl-container { max-width: none; }

/* Hero variant: background image full-bleed + overlay + card sopra */
.sp-tpl-reserved--hero {
  position: relative;
  padding: 100px 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: var(--sp-tpl-navy-0);
  isolation: isolate;
  display: flex;
  align-items: center;
}
.sp-tpl-reserved--hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,21,32,0.45) 0%, rgba(11,21,32,0.65) 100%);
  z-index: 0;
}
.sp-tpl-reserved--hero .sp-tpl-container { position: relative; z-index: 1; }

/* Mesh variant login: sfondo navy + canvas mesh dietro la card (no background-image). 2026-06-04.
   Override z-index del `.sp-tpl-reserved > *` (che metterebbe il canvas davanti). */
.sp-tpl-reserved--mesh { background: var(--sp-tpl-navy-0); overflow: hidden; }
.sp-tpl-reserved--mesh::after { display: none; }
.sp-tpl-reserved--mesh > .sp-tpl-hero-bg { position: absolute; inset: 0; z-index: 0; }
.sp-tpl-reserved--mesh > .sp-tpl-hero-bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.55; }

.sp-tpl-reserved-card {
  max-width: calc(var(--sp-unit-xl) * 9);
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid var(--sp-tpl-line);
  border-radius: var(--sp-tpl-r-md);
  padding: calc(var(--sp-unit-l) * 1.5) var(--sp-unit-l);
  min-height: calc(var(--sp-unit-xl) * 5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 4px 24px rgba(11,21,32,0.08), 0 1px 4px rgba(11,21,32,0.04);
  transition: transform 0.25s var(--sp-tpl-ease), box-shadow 0.25s var(--sp-tpl-ease);
}
.sp-tpl-reserved-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(11,21,32,0.12), 0 2px 6px rgba(11,21,32,0.06);
}
.sp-tpl-reserved--hero .sp-tpl-reserved-card {
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.sp-tpl-reserved-card .sp-login-buttons {
  display: flex;
  justify-content: center;
}
.sp-tpl-reserved-card .sp-button {
  padding: 13px 26px;
  border-radius: var(--sp-tpl-r-sm);
  background: #50acbc;
  color: var(--sp-tpl-navy-0);
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: background 0.2s var(--sp-tpl-ease), transform 0.2s var(--sp-tpl-ease);
  cursor: pointer;
}
.sp-tpl-reserved-card .sp-button:hover { transform: translateY(-1px); }

/* Login/passwordless card (basic2::loginBox, passBox, mfaBox) */
.sp-tpl-reserved-card .sp-tpl-login-title {
  display: block;
  margin: 0 auto var(--sp-unit-l);
  font-size: calc(var(--sp-unit) * 1.75);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: var(--sp-tpl-navy-0);
  letter-spacing: -0.01em;
}
.sp-tpl-reserved-card .sp-tpl-login-form { margin-bottom: var(--sp-unit-l); }
.sp-tpl-reserved-card .sp-tpl-login-form .fen { margin-bottom: var(--sp-unit); }
.sp-tpl-reserved-card .sp-tpl-login-desc {
  margin: 0 0 var(--sp-unit-l);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--sp-tpl-muted, #6b7280);
  text-align: center;
}
.sp-tpl-reserved-card .sp-tpl-login-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-unit);
}
.sp-tpl-reserved-card .sp-tpl-login-actions .sp-tpl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--sp-unit-s) * 2);
  padding: var(--sp-unit) calc(var(--sp-unit) * 2);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
  text-wrap: balance;
  border-radius: calc(var(--sp-unit-s) * 2);
  width: 100%;
  box-shadow: 0 4px 14px rgba(80,172,188,0.32);
  transition: transform 0.2s var(--sp-tpl-ease), box-shadow 0.2s var(--sp-tpl-ease), background 0.2s var(--sp-tpl-ease);
}
/* icona allineata, non si schiaccia col testo che va a capo */
.sp-tpl-reserved-card .sp-tpl-login-actions .sp-tpl-btn i {
  flex-shrink: 0;
  font-size: 1.1em;
}
.sp-tpl-reserved-card .sp-tpl-login-actions .sp-tpl-btn:hover {
  transform: translateY(calc(var(--sp-unit-s) * -0.4));
  box-shadow: 0 8px 22px rgba(80,172,188,0.45);
}
/* mobile: testo più compatto così "Accedi con passkey" sta su una riga */
@media (max-width: 640px) {
  .sp-tpl-reserved-card .sp-tpl-login-actions .sp-tpl-btn {
    font-size: 0.88rem;
    letter-spacing: 0.01em;
    padding: calc(var(--sp-unit-s) * 2) var(--sp-unit);
  }
}
.sp-tpl-reserved-card .sp-tpl-login-link {
  color: #50acbc;
  text-decoration: none;
  font-size: 0.9rem;
  text-align: center;
  padding: var(--sp-unit-s) 0;
}
.sp-tpl-reserved-card .sp-tpl-login-link:hover { text-decoration: underline; }

/* ===== STORE / PRODUCTS (mockup v6) ===== */
.sp-tpl-store-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.sp-tpl-product-card {
  background: #ffffff;
  border: 1px solid var(--sp-tpl-line);
  border-radius: var(--sp-tpl-r-md);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .25s var(--sp-tpl-ease), box-shadow .25s var(--sp-tpl-ease), border-color .25s var(--sp-tpl-ease);
}
.sp-tpl-product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sp-tpl-shadow-2);
  border-color: #50acbc;
}
.sp-tpl-product-thumb {
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--sp-tpl-navy-0), #50acbc);
}
.sp-tpl-product-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-tpl-product-thumb.alt-1 { background: linear-gradient(135deg, #2c4a55, #4ec3c8); }
.sp-tpl-product-thumb.alt-2 { background: linear-gradient(135deg, #1a2330, #f0c674); }
.sp-tpl-product-thumb.alt-3 { background: linear-gradient(135deg, #0e1d2b, #6b9aa6); }
.sp-tpl-product-thumb.alt-4 { background: linear-gradient(135deg, #3a4f5c, #a08af0); }
.sp-tpl-product-thumb.alt-5 { background: linear-gradient(135deg, #14283a, #4ec3c8); }
.sp-tpl-product-thumb.alt-6 { background: linear-gradient(135deg, #2a1f2c, #f08aa0); }
.sp-tpl-product-thumb.alt-7 { background: linear-gradient(135deg, #1a2820, #88ccaa); }
.sp-tpl-product-thumb:not(:has(img))::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.18), transparent 38%),
    radial-gradient(circle at 70% 75%, rgba(255,255,255,0.12), transparent 32%);
}
.sp-tpl-product-body {
  padding: 18px 20px 22px;
  display: flex; flex-direction: column; gap: 8px;
  flex: 1;
}
.sp-tpl-product-cat {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #50acbc;
  font-weight: 600;
}
.sp-tpl-product-body h3 {
  color: var(--sp-tpl-navy-0);
  font-size: 1.02rem;
  line-height: 1.3;
  margin: 0;
  font-weight: 700;
}
.sp-tpl-product-price {
  display: flex; align-items: baseline; gap: 10px;
  margin-top: auto;
  padding-top: 4px;
}
.sp-tpl-product-price-current {
  color: var(--sp-tpl-navy-0);
  font-weight: 700;
  font-size: 1.05rem;
}
.sp-tpl-product-price-old {
  color: var(--sp-tpl-ink-2);
  font-size: 0.88rem;
  text-decoration: line-through;
}
.sp-tpl-product-price--hero {
  margin-top: 18px;
  align-items: center;
  justify-content: center;
}
.sp-tpl-product-price--hero .sp-tpl-product-price-current {
  color: #ffffff;
  font-size: 1.6rem;
  font-weight: 700;
}
.sp-tpl-product-price--hero .sp-tpl-product-price-old {
  color: rgba(255, 255, 255, 0.55);
  font-size: 1.05rem;
}

@media (max-width: 1024px) {
  .sp-tpl-store-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .sp-tpl-store-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
  .sp-tpl-store-grid { grid-template-columns: 1fr; }
}

/* ===== CONTATTI ===== */
.sp-tpl-contact-block {}
.sp-tpl-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 36px;
  align-items: stretch;
}
.sp-tpl-contact-info {
  display: flex; flex-direction: column;
  gap: 14px;
}
.sp-tpl-info-card {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 22px 24px;
  background: #ffffff;
  border: 1px solid var(--sp-tpl-line);
  border-radius: var(--sp-tpl-r-md);
  transition: border-color .25s var(--sp-tpl-ease), background .25s var(--sp-tpl-ease);
}
.sp-tpl-info-card:hover {
  border-color: #50acbc;
  background: rgba(78, 195, 200, 0.04);
}
.sp-tpl-info-card-icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--sp-tpl-r-sm);
  background: rgba(78, 195, 200, 0.10);
  color: #50acbc;
  font-size: 1.05rem;
}
.sp-tpl-info-card-body { flex: 1; min-width: 0; }
.sp-tpl-info-card-body h4 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--sp-tpl-ink-2);
  margin: 0 0 6px;
  font-weight: 600;
}
.sp-tpl-info-card-body p {
  color: var(--sp-tpl-ink-0);
  font-size: 0.96rem;
  line-height: 1.45;
  margin: 0;
}
.sp-tpl-info-card-body a { color: #50acbc; }
.sp-tpl-info-card-body a:hover { text-decoration: underline; }

.sp-tpl-contact-map {
  border-radius: var(--sp-tpl-r-md);
  overflow: hidden;
  border: 1px solid var(--sp-tpl-line);
  background: var(--sp-tpl-bg-soft, #f5f5f5);
  min-height: 360px;
  display: flex;
}
.sp-tpl-contact-map iframe,
.sp-tpl-contact-map > * {
  display: block;
  width: 100%;
  flex: 1;
  border: 0;
  min-height: 360px;
}

@media (max-width: 720px) {
  .sp-tpl-contact-grid { grid-template-columns: 1fr; gap: 24px; }
  .sp-tpl-contact-map iframe,
  .sp-tpl-contact-map > * { min-height: 280px; }
}

/* ===== ARTICLE single (esploso /news/<cat>/<slug>) ===== */
.sp-tpl-article-image {
  margin: 0 auto 32px;
  max-width: 820px;
  border-radius: var(--sp-tpl-r-md);
  overflow: hidden;
}
.sp-tpl-article-image img {
  display: block; width: 100%; height: auto;
  object-fit: cover;
}
.sp-tpl-article-body {
  margin: 0 auto;
  max-width: 720px;
}
.sp-tpl-back-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 22px;
  border-radius: var(--sp-tpl-r-sm);
  border: 1px solid var(--sp-tpl-line);
  background: transparent;
  color: var(--sp-tpl-ink-1);
  font-weight: 600; font-size: 0.92rem;
  transition: border-color .2s var(--sp-tpl-ease), color .2s var(--sp-tpl-ease);
}
.sp-tpl-back-link:hover { border-color: #50acbc; color: #50acbc; }

@media (max-width: 900px) {
  .sp-tpl-content-grid { grid-template-columns: repeat(2, 1fr); }
  .sp-tpl-news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .sp-tpl-content-grid { grid-template-columns: 1fr; }
  .sp-tpl-news-grid { grid-template-columns: 1fr; }
  .sp-tpl-news-count { margin-left: 0; width: 100%; }
  .sp-tpl-content { padding: 60px 0; }
}

/* ===== HERO SLIDESHOW (cinematic) ===== */
.sp-tpl-slideshow {
  position: relative;
  width: 100%;
  height: 70vh;
  min-height: 480px;
  overflow: hidden;
  background: var(--sp-tpl-navy-deep);
  margin-top: calc(var(--sp-tpl-topbar-h) + var(--sp-tpl-header-h));
}
.sp-tpl-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease-in-out;
  pointer-events: none;
}
.sp-tpl-slide.is-active { opacity: 1; pointer-events: auto; z-index: 1; }
.sp-tpl-slide-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  will-change: transform;
}
.sp-tpl-slide.is-kb .sp-tpl-slide-bg { animation: sp-ken-burns 18s ease-out forwards; }
.sp-tpl-slide-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(6,18,29,0.25) 0%,
    rgba(6,18,29,0.45) 50%,
    rgba(6,18,29,0.78) 100%);
}
.sp-tpl-slide-content {
  position: relative;
  z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end;
  height: 100%;
  padding-bottom: 110px;
  color: #ffffff;
}
.sp-tpl-slide-title {
  font-size: clamp(2rem, 4.2vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 16px;
  max-width: 820px;
  text-shadow: 0 2px 18px rgba(0,0,0,0.35);
}
.sp-tpl-slide-intro {
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.55;
  max-width: 680px;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 12px rgba(0,0,0,0.35);
}

.sp-tpl-slide-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.10);
  color: #ffffff;
  border: 0; border-radius: 999px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.25s ease, background 0.25s ease, transform 0.25s ease;
  backdrop-filter: blur(6px);
}
.sp-tpl-slideshow:hover .sp-tpl-slide-nav { opacity: 1; }
.sp-tpl-slide-nav:hover { background: #50acbc; color: var(--sp-tpl-navy-0); }
.sp-tpl-slide-prev { left: 24px; }
.sp-tpl-slide-next { right: 24px; }

.sp-tpl-slide-dots {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
  z-index: 3;
  display: flex; gap: 10px;
}
.sp-tpl-slide-dot {
  width: 8px; height: 8px;
  border: 0; border-radius: 999px;
  background: rgba(255,255,255,0.35);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, width 0.25s ease;
}
.sp-tpl-slide-dot.is-active { background: #ffffff; width: 28px; border-radius: 4px; }

@media (max-width: 720px) {
  .sp-tpl-slideshow { height: 60vh; min-height: 380px; }
  .sp-tpl-slide-content { padding-bottom: 80px; padding-left: 20px; padding-right: 20px; }
  .sp-tpl-slide-nav { width: 40px; height: 40px; opacity: 1; background: rgba(255,255,255,0.18); }
  .sp-tpl-slide-prev { left: 12px; }
  .sp-tpl-slide-next { right: 12px; }
}

/* ===== REVEAL ===== */
.sp-tpl-reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--sp-tpl-ease), transform .7s var(--sp-tpl-ease); }
.sp-tpl-reveal.is-in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .sp-tpl-reveal { opacity: 1; transform: none; transition: none; }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .sp-tpl-nav { display: none; }
  .sp-tpl-hamburger { display: grid; place-items: center end; }
  .sp-tpl-intro-grid { grid-template-columns: 1fr; }
  .sp-tpl-news-grid { grid-template-columns: repeat(2, 1fr); }
  .sp-tpl-store-grid { grid-template-columns: repeat(2, 1fr); }
  .sp-tpl-values-grid { grid-template-columns: repeat(2, 1fr); }
  .sp-tpl-contact-grid { grid-template-columns: 1fr; }
  .sp-tpl-map { min-height: 320px; }
  .sp-tpl-footer-top { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 720px) {
  .sp-tpl-topbar { font-size: 0.78rem; }
  .sp-tpl-topbar-left .tel { display: none; }
  .sp-tpl-footer-bottom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  .sp-tpl-section { padding: 70px 0; }
  .sp-tpl-news-grid, .sp-tpl-store-grid, .sp-tpl-values-grid { grid-template-columns: 1fr; }
}
/* Footer centrato + compatto su mobile — DOPO i blocchi sopra per vincere su ≤1024.
   KB unit scale 5/15/30/60: tutti i valori canonical via var(--sp-unit-s/unit/unit-l/unit-xl). */
@media (max-width: 640px) {
  .sp-tpl-footer { padding-top: calc(var(--sp-unit-l) + var(--sp-unit)); padding-bottom: var(--sp-unit-l); }
  .sp-tpl-footer-top { align-items: center; text-align: center; gap: var(--sp-unit-l); padding-bottom: var(--sp-unit-l); }
  .sp-tpl-footer-col, .sp-tpl-footer-col--brand { align-items: center; }
  .sp-tpl-footer-brand { justify-content: center; }
  .sp-tpl-footer-socials { justify-content: center; }
  .sp-tpl-footer-bottom { flex-direction: column; align-items: center; text-align: center; justify-content: center; gap: var(--sp-unit); padding: calc(var(--sp-unit) + var(--sp-unit-s)) 0 0; }
  .sp-tpl-footer-legal { justify-content: center; gap: var(--sp-unit-s) calc(var(--sp-unit-s) * 2); font-size: 0.78rem; }
  .sp-tpl-footer-legal-link { white-space: nowrap; }
}

/* ===== Mobile login/reserved card + topbar ===== */
/* Card login/area-riservata: su mobile full-width + padding generoso (sensazione "grande box").
   No min-height/hover transform. Input font 16px (no iOS zoom).
   Topbar: icone-only su mobile (label nascosti via .sp-tpl-topbar-label) → tutto su una riga. */
@media (max-width: 640px) {
  .sp-tpl-reserved {
    padding: calc(var(--sp-tpl-topbar-h) + var(--sp-tpl-header-h) + var(--sp-unit-l)) 0 var(--sp-unit-l);
  }
  .sp-tpl-reserved-card {
    max-width: 100%;
    width: 100%;
    padding: calc(var(--sp-unit-l) + var(--sp-unit)) var(--sp-unit-l);
    min-height: auto;
  }
  .sp-tpl-reserved-card:hover {
    transform: none;
    box-shadow: 0 4px 24px rgba(11,21,32,0.08), 0 1px 4px rgba(11,21,32,0.04);
  }
  .sp-tpl-reserved-card .sp-tpl-login-title {
    font-size: calc(var(--sp-unit) * 2);
    margin-bottom: var(--sp-unit-l);
  }
  .sp-tpl-reserved-card .sp-button {
    padding: var(--sp-unit) var(--sp-unit-l);
    font-size: 1rem;
  }
  .sp-tpl-login-card {
    max-width: 100%;
    padding: calc(var(--sp-unit-l) * 1.5) var(--sp-unit-l);
  }
  .sp-tpl-login-card h2 {
    font-size: 1.6rem;
  }
  .sp-tpl-login-card .sp-tpl-sub {
    font-size: 1rem;
    margin-bottom: var(--sp-unit-l);
  }
  .sp-tpl-login-form {
    gap: var(--sp-unit-l);
  }
  .sp-tpl-login-form input {
    font-size: 1rem;
    padding: calc(var(--sp-unit-s) * 3) var(--sp-unit);
  }
  .sp-tpl-login-card .sp-tpl-extras {
    flex-direction: column;
    gap: var(--sp-unit-s);
    align-items: flex-start;
    margin-top: var(--sp-unit-l);
  }
  /* Topbar: nascondi label, mantieni solo icone → tutto su una riga.
     Touch target min 40×40 (WCAG ~44) via padding + min-w/h sull'item, scale-aware.
     Topbar altezza mobile: --sp-unit-l + --sp-unit-s (35) — sotto soglia 40 anche perché
     l'item ha min-height 40 → flex stretcha a 40. Topbar a height auto + min-height. */
  .sp-tpl-topbar-label {
    display: none;
  }
  .sp-tpl-topbar {
    height: auto;
    min-height: calc(var(--sp-unit-l) + var(--sp-unit-s) * 2);
  }
  .sp-tpl-topbar-left,
  .sp-tpl-topbar-right {
    gap: var(--sp-unit-s);
  }
  .sp-tpl-topbar-item {
    padding: var(--sp-unit-s) calc(var(--sp-unit-s) * 2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: calc(var(--sp-unit-l) + var(--sp-unit-s) * 2);
    min-height: calc(var(--sp-unit-l) + var(--sp-unit-s) * 2);
  }
  /* Primo item left / ultimo item right: icona flush con il padding container
     (allinea visivamente con logo header a sinistra, hamburger a destra) */
  .sp-tpl-topbar-left > .sp-tpl-topbar-item:first-child {
    padding-left: 0;
    justify-content: flex-start;
  }
  .sp-tpl-topbar-right > .sp-tpl-topbar-item:last-child {
    padding-right: 0;
    justify-content: flex-end;
  }
}

/* ============================================================================
   WIDGET DASHBOARD (2026-06-09) — card generali nel <main> area riservata.
   Layout: header (greeting) + griglia 12-col di card-widget (col-N).
   Mix: greeting · Il mio account · completamento · sicurezza(in arrivo) · scorciatoie.
   Scala unit canonica (5/15/30/60), accent = #50acbc.
   ============================================================================ */
/* Griglia 12-col: i widget sono celle (col-N). Vive come <div> dentro <main> →
   su navigazione (Profilo che fa innerHTML su .sp-tpl-account-main) sparisce. */
.sp-tpl-dash-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-unit-l);
  align-items: start;
}
.sp-tpl-dash-col-4  { grid-column: span 4; }
.sp-tpl-dash-col-8  { grid-column: span 8; }
.sp-tpl-dash-col-12 { grid-column: span 12; }
@media (max-width: 900px) {
  /* Collasso a 1 colonna: con 12 tracce + gap 30px i soli gap (11×30=330) sforavano
     la larghezza utile del telefono → contenuto debordante a destra. */
  .sp-tpl-dash-grid { grid-template-columns: 1fr; }
  .sp-tpl-dash-col-4, .sp-tpl-dash-col-8, .sp-tpl-dash-col-12 { grid-column: auto; }
}

.sp-tpl-dash-card {
  background: #ffffff;
  border: 1px solid var(--sp-tpl-line);
  border-radius: var(--sp-tpl-r-md);
  box-shadow: var(--sp-tpl-shadow-1);
  padding: var(--sp-unit-l);
}
.sp-tpl-dash-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-unit);
  margin-bottom: var(--sp-unit);
}
.sp-tpl-dash-card-title {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #50acbc;
}
.sp-tpl-dash-badge {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px var(--sp-unit-s);
  border-radius: var(--sp-tpl-r-sm);
  background: var(--sp-tpl-accent-soft);
  color: #50acbc;
}

/* --- Header dashboard (page-title, niente avatar → no duplicazione con sidebar) --- */
.sp-tpl-dash-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-unit);
  flex-wrap: wrap;
  margin-bottom: var(--sp-unit-l);
}
/* Orologio live (popolato da jSite::initClock, tick 1s). Capitalizza il giorno. */
.sp-tpl-dash-clock {
  font-size: 0.9rem;
  color: var(--sp-tpl-ink-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sp-tpl-dash-clock::first-letter { text-transform: uppercase; }
.sp-tpl-dash-h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--sp-tpl-ink-0);
  margin: 0 0 var(--sp-unit-s);
  line-height: 1.2;
}
.sp-tpl-dash-lead { color: var(--sp-tpl-ink-1); font-size: 0.95rem; margin: 0; }

/* --- Il mio account --- */
.sp-tpl-dash-account-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-unit) var(--sp-unit-xl);
}
.sp-tpl-dash-account-item { display: flex; flex-direction: column; gap: 2px; }
.sp-tpl-dash-account-label { font-size: 0.75rem; color: var(--sp-tpl-ink-2); }
.sp-tpl-dash-account-value { font-weight: 600; color: var(--sp-tpl-ink-0); }
@media (max-width: 520px) { .sp-tpl-dash-account-grid { grid-template-columns: 1fr; } }

/* --- Sicurezza --- */
.sp-tpl-dash-security-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-unit);
}
@media (max-width: 760px) { .sp-tpl-dash-security-grid { grid-template-columns: 1fr; } }
.sp-tpl-dash-security-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-unit);
  padding: var(--sp-unit);
  border: 1px solid var(--sp-tpl-line);
  border-radius: var(--sp-tpl-r-sm);
  background: var(--sp-tpl-bg-soft);
}
.sp-tpl-dash-security-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-tpl-dash-security-name { font-weight: 600; color: var(--sp-tpl-ink-0); font-size: 0.95rem; }
.sp-tpl-dash-security-desc { font-size: 0.8rem; color: var(--sp-tpl-ink-2); }
.sp-tpl-dash-status { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 600; white-space: nowrap; }
.sp-tpl-dash-status::before { content: "\25CF"; }
.sp-tpl-dash-status.is-on  { color: #3aa676; }
.sp-tpl-dash-status.is-off { color: var(--sp-tpl-ink-2); }
.sp-tpl-dash-status.is-off::before { content: "\25CB"; }

/* --- Completamento profilo --- */
.sp-tpl-dash-completion-pct { font-weight: 700; color: #50acbc; }
.sp-tpl-dash-progress {
  height: var(--sp-unit-s);
  border-radius: var(--sp-unit-s);
  background: var(--sp-tpl-bg-soft);
  overflow: hidden;
}
.sp-tpl-dash-progress-bar {
  height: 100%;
  border-radius: var(--sp-unit-s);
  background: #50acbc;
  transition: width .6s ease;
}
.sp-tpl-dash-completion.is-complete .sp-tpl-dash-progress-bar { background: #3aa676; }
.sp-tpl-dash-completion.is-complete .sp-tpl-dash-completion-pct { color: #3aa676; }
.sp-tpl-dash-completion-foot { margin-top: var(--sp-unit); }
.sp-tpl-dash-completion-msg { font-size: 0.88rem; color: var(--sp-tpl-ink-2); }

/* --- Scorciatoie --- */
.sp-tpl-dash-shortcut-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--sp-unit-xl) * 2 + var(--sp-unit)), 1fr));
  gap: var(--sp-unit);
}
.sp-tpl-dash-shortcut {
  display: flex;
  flex-direction: column;
  gap: var(--sp-unit-s);
  padding: var(--sp-unit);
  border: 1px solid var(--sp-tpl-line);
  border-radius: var(--sp-tpl-r-sm);
  background: var(--sp-tpl-bg-soft);
  text-decoration: none;
  color: var(--sp-tpl-ink-0);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
a.sp-tpl-dash-shortcut:hover {
  border-color: #50acbc;
  transform: translateY(-2px);
  box-shadow: var(--sp-tpl-shadow-1);
}
.sp-tpl-dash-shortcut-icon { font-size: 1.2rem; color: #50acbc; }
.sp-tpl-dash-shortcut-label { font-weight: 600; font-size: 0.95rem; }
.sp-tpl-dash-shortcut-desc { font-size: 0.8rem; color: var(--sp-tpl-ink-2); line-height: 1.4; }

/* ============================================================================
   TAB SICUREZZA profilo (FASE 1: Ultimi accessi). Render in #sp-tpl-tabpane.
   ============================================================================ */
.sp-tpl-sec-block { margin-bottom: var(--sp-unit-l); }
.sp-tpl-sec-head { margin-bottom: var(--sp-unit); }
/* Tab Sicurezza: desktop = 2 colonne (Ultimi accessi a sx, 2FA/passkey a dx), mobile = stack. */
.sp-tpl-sec { display: flex; flex-wrap: wrap; gap: var(--sp-unit-xl); align-items: flex-start; }
.sp-tpl-sec-col { display: flex; flex-direction: column; min-width: 0; }
.sp-tpl-sec-col--side { flex: 0 0 38%; max-width: 38%; }
.sp-tpl-sec-col--main { flex: 1 1 auto; }
.sp-tpl-sec-col--full { flex: 1 1 100%; }
.sp-tpl-sec-col .sp-tpl-sec-block:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .sp-tpl-sec { display: block; }
  .sp-tpl-sec-col--side, .sp-tpl-sec-col--main { max-width: none; }
  /* in block-stack il gap del flex non vale più → spazio tra le colonne (es. passkey → 2FA) */
  .sp-tpl-sec-col { margin-bottom: var(--sp-unit-xl); }
  .sp-tpl-sec-col:last-child { margin-bottom: 0; }
}
.sp-tpl-sec-title { font-size: 1.05rem; font-weight: 600; color: var(--sp-tpl-ink-0); margin: 0 0 var(--sp-unit-s); }
.sp-tpl-sec-sub { font-size: 0.88rem; color: var(--sp-tpl-ink-2); line-height: 1.5; }
.sp-tpl-sec-sessions { display: flex; flex-direction: column; gap: var(--sp-unit-s); }
.sp-tpl-sec-session {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-unit);
  padding: var(--sp-unit);
  border: 1px solid var(--sp-tpl-line);
  border-radius: var(--sp-tpl-r-sm);
  background: var(--sp-tpl-bg-soft);
}
.sp-tpl-sec-session.is-current { border-left: 3px solid #50acbc; }
.sp-tpl-sec-session-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-tpl-sec-session-device { font-weight: 600; color: var(--sp-tpl-ink-0); font-size: 0.95rem; }
.sp-tpl-sec-session-meta { font-size: 0.8rem; color: var(--sp-tpl-ink-2); }
.sp-tpl-sec-badge {
  flex-shrink: 0;
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 2px var(--sp-unit-s); border-radius: var(--sp-tpl-r-sm);
  background: var(--sp-tpl-accent-soft); color: #50acbc;
}
.sp-tpl-sec-empty { font-size: 0.9rem; color: var(--sp-tpl-ink-2); }

/* WebAuthn / passkey (tab Sicurezza) — lista credenziali + azione "Aggiungi". */
.sp-tpl-sec-passkey-list { display: flex; flex-direction: column; gap: var(--sp-unit-s); }
.sp-tpl-sec-passkey {
  display: flex; align-items: center; gap: var(--sp-unit-s);
  padding: var(--sp-unit-s) var(--sp-unit);
  border: 1px solid var(--sp-tpl-line); border-radius: var(--sp-tpl-r-sm);
  background: var(--sp-tpl-bg-soft);
}
.sp-tpl-sec-passkey-icon {
  flex-shrink: 0; width: var(--sp-unit-l); height: var(--sp-unit-l);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--sp-tpl-accent-soft); color: #50acbc;
}
.sp-tpl-sec-passkey-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-tpl-sec-passkey-name { font-weight: 600; color: var(--sp-tpl-ink-0); font-size: 0.95rem; }
.sp-tpl-sec-passkey-meta { font-size: 0.8rem; color: var(--sp-tpl-ink-2); }
.sp-tpl-sec-passkey-actions {
  display: flex; align-items: center; gap: var(--sp-unit); flex-wrap: wrap;
  margin-top: var(--sp-unit);
}
.sp-tpl-sec-passkey-msg { font-size: 0.85rem; color: var(--sp-tpl-ink-2); margin: 0; }
.sp-tpl-sec-passkey-msg.is-error { color: var(--sp-tpl-danger, #c0392b); }
.sp-tpl-sec-passkey-msg.is-ok { color: var(--sp-tpl-success, #2e7d32); }
/* Trusted devices (revoca) — coerente con le card passkey */
.sp-tpl-sec-trusted { margin-top: var(--sp-unit); }
.sp-tpl-sec-trusted-title { font-size: 0.9rem; font-weight: 600; color: var(--sp-tpl-ink-1); margin: 0 0 var(--sp-unit-s); }
.sp-tpl-sec-trusted-list { display: flex; flex-direction: column; gap: var(--sp-unit-s); list-style: none; margin: 0; padding: 0; }
.sp-tpl-sec-trusted-item {
	display: flex; align-items: center; justify-content: space-between; gap: var(--sp-unit); flex-wrap: wrap;
	padding: var(--sp-unit-s) var(--sp-unit); border: 1px solid var(--sp-tpl-line, rgba(0,0,0,0.1));
	border-radius: var(--sp-unit-s); background: var(--sp-tpl-surface-1, transparent);
}
.sp-tpl-sec-trusted-item.is-current { border-color: var(--sp-tpl-accent, #4ec3c8); }
.sp-tpl-sec-trusted-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 12rem; }
.sp-tpl-sec-trusted-dev { font-weight: 600; color: var(--sp-tpl-ink-0); font-size: 0.95rem; }
.sp-tpl-sec-trusted-meta { font-size: 0.8rem; color: var(--sp-tpl-ink-2); }
.sp-tpl-sec-trusted-action { flex-shrink: 0; }
.sp-tpl-btn--sm { padding: var(--sp-unit-s) var(--sp-unit); font-size: 0.85rem; }
.sp-tpl-sec-trusted-hint { font-size: 0.8rem; color: var(--sp-tpl-ink-2); margin: var(--sp-unit-s) 0 0; }
/* finestra conferma revoca (dialog): padding attorno a messaggio + pulsantiera */
.sp-tpl-confirm-dialog { padding: var(--sp-unit-l); }
.sp-tpl-confirm-actions { display: flex; gap: var(--sp-unit-s); flex-wrap: wrap; margin-top: var(--sp-unit); }
.sp-tpl-confirm-actions .sp-flex, .sp-tpl-confirm-actions .disable-selection { display: contents; }
.sp-tpl-sec-confirm { color: var(--sp-tpl-ink-1); line-height: 1.5; margin: 0 0 var(--sp-unit); }
.sp-tpl-sec-confirm .fa-triangle-exclamation { color: var(--sp-tpl-accent, #4ec3c8); margin-right: var(--sp-unit-s); }
@media ( max-width: 640px ) {
	.sp-tpl-sec-trusted-item { flex-direction: column; align-items: stretch; justify-content: flex-start; }
	.sp-tpl-sec-trusted-info { flex: 0 0 auto; }
	.sp-tpl-sec-trusted-action, .sp-tpl-sec-trusted-action .sp-tpl-btn { width: 100%; }
}

/* TOTP / 2FA (tab Sicurezza) */
.sp-tpl-sec-totp { display: flex; flex-direction: column; gap: var(--sp-unit-s); }
.sp-tpl-sec-totp-status { display: flex; align-items: center; gap: var(--sp-unit); flex-wrap: wrap; }
.sp-tpl-sec-totp-recovery { font-size: 0.85rem; color: var(--sp-tpl-ink-2); }
.sp-tpl-sec-totp-trusted { display: flex; align-items: center; gap: var(--sp-unit-s); font-size: 0.85rem; color: var(--sp-tpl-ink-2); }
.sp-tpl-sec-totp-trusted i { color: #50acbc; }
.sp-tpl-sec-badge.is-on { background: var(--sp-tpl-accent-soft); color: #50acbc; }
.sp-tpl-sec-totp-enroll { display: flex; flex-direction: column; gap: var(--sp-unit-s); align-items: flex-start; padding: var(--sp-unit); border: 1px solid var(--sp-tpl-line); border-radius: var(--sp-tpl-r-sm); background: var(--sp-tpl-bg-soft); }
.sp-tpl-sec-totp-qr img { width: 180px; height: 180px; image-rendering: pixelated; background: #fff; padding: var(--sp-unit-s); border-radius: var(--sp-tpl-r-sm); }
.sp-tpl-sec-totp-secret { font-family: monospace; font-size: 0.95rem; letter-spacing: 0.08em; background: #fff; padding: var(--sp-unit-s) var(--sp-unit); border-radius: var(--sp-tpl-r-sm); border: 1px solid var(--sp-tpl-line); user-select: all; }
.sp-tpl-sec-totp-hint { font-size: 0.85rem; color: var(--sp-tpl-ink-2); margin: 0; }
.sp-tpl-sec-totp-confirm { display: flex; gap: var(--sp-unit-s); align-items: center; }
.sp-tpl-sec-totp-code { font-family: monospace; font-size: 1.1rem; letter-spacing: 0.3em; width: calc(var(--sp-unit-xl) * 2); text-align: center; padding: var(--sp-unit-s); border: 1px solid var(--sp-tpl-line); border-radius: var(--sp-tpl-r-sm); }
.sp-tpl-sec-totp-recovery-box { padding: var(--sp-unit); border: 1px dashed #50acbc; border-radius: var(--sp-tpl-r-sm); }
.sp-tpl-sec-totp-recovery-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-unit-s); font-family: monospace; font-size: 0.95rem; margin-top: var(--sp-unit-s); }
.sp-tpl-sec-totp-recovery-box .sp-tpl-sec-totp-confirm { margin-top: var(--sp-unit-l); }
/* Enrollment è un VERO des (campo `code` + desbar Conferma/Annulla via bind:des). Lo STILE dei
   bottoni arriva dalle classi REALI sp-tpl-btn/--primary/--outline messe sugli item del launcher
   (launchers_otm_SDLi.classes) → identici ad "Attiva 2FA", hover incluso. Qui SOLO layout + kill
   del ripple ::before/::after e del margin-left che .sp-button aggiunge (assenti su .sp-tpl-btn puro). */
.sp-tpl-sec-totp-enroll { width: 100%; }
.sp-tpl-sec-totp-enroll .des { padding: 0; width: 100%; }
.sp-tpl-sec-totp-enroll .sp-public-desbar { display: flex; flex-wrap: wrap; gap: var(--sp-unit-s); margin-top: var(--sp-unit); }
.sp-tpl-sec-totp-enroll .sp-public-desbar > .sp-button { margin-left: 0; }
.sp-tpl-sec-totp-enroll .sp-public-desbar > .sp-button::before,
.sp-tpl-sec-totp-enroll .sp-public-desbar > .sp-button::after,
.sp-tpl-sec-totp-enroll .sp-public-desbar > .sp-button:hover::before,
.sp-tpl-sec-totp-enroll .sp-public-desbar > .sp-button:hover::after,
.sp-tpl-sec-totp-enroll .sp-public-desbar > .sp-button:active::before,
.sp-tpl-sec-totp-enroll .sp-public-desbar > .sp-button:active::after { display: none !important; }

/* ============================================================================
   NOTIFICHE (bacheca comunicazioni area riservata). Card full-width nel <main>.
   Riusa contents+articlesCategory 'notifiche' (reserved). Lista newest-first.
   ============================================================================ */
.sp-tpl-notify-list { display: flex; flex-direction: column; gap: var(--sp-unit-s); }
.sp-tpl-notify-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-unit);
  padding: var(--sp-unit);
  border: 1px solid var(--sp-tpl-line);
  border-left: 3px solid #50acbc;
  border-radius: var(--sp-tpl-r-sm);
  background: var(--sp-tpl-bg-soft);
}
.sp-tpl-notify-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-tpl-notify-title { font-weight: 600; color: var(--sp-tpl-ink-0); font-size: 0.95rem; }
.sp-tpl-notify-text { font-size: 0.85rem; color: var(--sp-tpl-ink-2); line-height: 1.5; margin: 0; }
.sp-tpl-notify-date { flex-shrink: 0; font-size: 0.78rem; color: var(--sp-tpl-ink-2); white-space: nowrap; }
.sp-tpl-notify-empty {
  padding: var(--sp-unit-l);
  text-align: center;
}
.sp-tpl-notify-empty-text { font-size: 0.9rem; color: var(--sp-tpl-ink-2); margin: 0; }

/* ============================================================================
   BANNER TOAST (sphere.banner, jspheresite) — override del default core (lightblue,
   stretto, mal posizionato su mobile). Es. "Nome utente non valido" sul login.
   Desktop: in alto a destra sotto header fisso. Mobile: full-width, margini simmetrici.
   Specificità raddoppiata (.sp-banner.sp-banner--…) per battere il core a parità.
   ============================================================================ */
.sp-banner.sp-banner--primary,
.sp-banner.sp-banner--alert,
.sp-banner.sp-banner--success,
.sp-banner {
  position: fixed;
  top: calc(var(--sp-tpl-topbar-h) + var(--sp-tpl-header-h) + var(--sp-unit));
  right: var(--sp-unit-l);
  left: auto;
  z-index: 1200;
  transform: none;   /* annulla il translateX(-50%) del core (causava x negativo / fuori posto) */
  width: auto;
  max-width: min(360px, calc(100vw - var(--sp-unit-l) * 2));
  margin: 0;
  padding: var(--sp-unit) var(--sp-unit-l);
  background: #ffffff;
  border: 1px solid var(--sp-tpl-line);
  border-left: 3px solid #50acbc;
  border-radius: var(--sp-tpl-r-md);
  box-shadow: var(--sp-tpl-shadow-2);
  color: var(--sp-tpl-ink-0);
  font-size: 0.9rem;
  line-height: 1.4;
  transition: opacity .3s ease;
}
.sp-banner.sp-banner--alert { border-left-color: #c0392b; }
.sp-banner.sp-banner--success { border-left-color: #3aa676; }
@media (max-width: 760px) {
  .sp-banner.sp-banner--primary,
  .sp-banner.sp-banner--alert,
  .sp-banner.sp-banner--success,
  .sp-banner {
    left: var(--sp-unit);
    right: var(--sp-unit);
    max-width: none;
    text-align: center;
  }
}