/* ============================================================
   Smyline - foglio di stile condiviso (tema scuro + accento teal)
   Estratto e adattato dalle pagine demo (Claude Artifact) già
   approvate dal cliente. Usato da tutte le pagine PHP del sito.
   ============================================================ */

:root {
  --bg: #f3f6f8;
  --surface: #ffffff;
  --surface-alt: #eaeff2;
  --ink: #0e1826;
  --ink-soft: #566173;
  --ink-faint: #8b95a5;
  --line: #dbe2e8;
  --accent: #00a893;
  --accent-ink: #ffffff;
  --accent-soft: #dff5f1;
  --accent2: #ff5a36;
  --accent2-soft: #ffe4db;
  --locked: #b9c0ca;
  --danger: #e5484d;
  --danger-soft: #ffe2e2;
  --ok: #00a893;
  --shadow: 0 1px 2px rgba(14,24,38,0.04), 0 8px 24px -8px rgba(14,24,38,0.10);
}

/* Il sito Smyline è a tema scuro fisso per scelta del cliente
   (vedi memoria progetto): non seguiamo prefers-color-scheme qui,
   applichiamo sempre la palette scura. */
:root {
  --bg: #0c1420;
  --surface: #131d2c;
  --surface-alt: #1a2536;
  --ink: #eef2f6;
  --ink-soft: #a3aec0;
  --ink-faint: #6f7a8c;
  --line: #263244;
  --accent: #2fe0c7;
  --accent-ink: #062420;
  --accent-soft: #123330;
  --accent2: #ff8562;
  --accent2-soft: #3a2018;
  --locked: #3a4557;
  --danger: #ff6b6b;
  --danger-soft: #3a1414;
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 12px 28px -10px rgba(0,0,0,0.55);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .display {
  font-family: 'Unbounded', 'Plus Jakarta Sans', sans-serif;
  text-wrap: balance;
  letter-spacing: -0.01em;
}
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
a { color: inherit; }
button { font-family: inherit; }
img { max-width: 100%; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
@media (max-width: 560px) { .wrap { padding: 0 18px; } }

/* ---- rolebar (mostra chi sei come utente + link account) ---- */
.rolebar { background: var(--surface-alt); border-bottom: 1px solid var(--line); font-size: 13px; }
.rolebar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; }
.rolebar-label { color: var(--ink-soft); display: flex; align-items: center; gap: 8px; }
.rolebar-tag { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
.rolebar-tag.negozio { background: var(--accent-soft); color: var(--accent); }
.rolebar-tag.grossista { background: var(--accent2-soft); color: var(--accent2); }
.rolebar-tag.admin { background: var(--danger-soft); color: var(--danger); }
.rolebar-tag.agente { background: var(--surface-alt); color: var(--ink); border: 1px solid var(--line); }
.rolebar a.logout { color: var(--ink-soft); font-weight: 600; text-decoration: none; }
.rolebar a.logout:hover { color: var(--ink); }

/* ---- header ---- */
header.main { padding: 20px 0; border-bottom: 1px solid var(--line); }
header.main .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { display: flex; align-items: center; }
.logo img.logo-mark { height: 30px; width: auto; display: block; }
nav.primary { display: flex; gap: 28px; }
nav.primary a { text-decoration: none; font-size: 14px; font-weight: 600; color: var(--ink-soft); }
nav.primary a:hover, nav.primary a.active-link { color: var(--ink); }
.head-actions { display: flex; align-items: center; gap: 18px; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; color: var(--ink); text-decoration: none; position: relative; }
.icon-btn .badge { position: absolute; top: -6px; right: -6px; background: var(--accent2); color: #fff; font-size: 10px; font-weight: 700; border-radius: 999px; min-width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.cta { display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: var(--bg); border: none; padding: 10px 18px; border-radius: 10px; font-weight: 700; font-size: 13.5px; cursor: pointer; white-space: nowrap; text-decoration: none; }
.cta.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.cta.accent { background: var(--accent); color: var(--accent-ink); }
.cta.danger { background: var(--danger); color: #fff; }
.cta:disabled { opacity: .5; cursor: not-allowed; }

/* ---- mobile nav ---- */
.menu-toggle { display: none; font-size: 18px; background: none; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); padding: 8px 10px; cursor: pointer; }
.mobile-nav { display: none; flex-direction: column; width: 100%; }
.mobile-nav.open { display: flex; }
.mobile-nav a { text-decoration: none; color: var(--ink-soft); font-weight: 600; font-size: 14.5px; padding: 13px 4px; border-top: 1px solid var(--line); }
.mobile-nav a:hover { color: var(--ink); }
@media (max-width: 720px) {
  header.main .wrap { flex-wrap: wrap; }
  nav.primary { display: none; }
  .menu-toggle { display: inline-flex; }
}

/* ---- generic page shell ---- */
.page { padding: 48px 0 72px; }
.page-head { margin-bottom: 32px; }
.page-head h1 { font-size: clamp(24px, 5vw, 32px); margin: 0 0 8px; font-weight: 700; }
.page-head p { color: var(--ink-soft); font-size: 14px; margin: 0; }

/* ---- cards / panels ---- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.panel-pad { padding: 24px; }
@media (max-width: 560px) { .panel-pad { padding: 18px; } }

/* ---- catalog grid ---- */
.catalog { padding: 8px 0 72px; }
.catalog-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 28px; flex-wrap: wrap; gap: 10px; }
.catalog-head h2, .catalog-head h1 { font-size: 26px; margin: 0; font-weight: 700; }
.catalog-head p { color: var(--ink-soft); font-size: 13.5px; margin: 0; }
.catalog-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.catalog-filters select, .catalog-filters input[type=search] {
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  border-radius: 8px; padding: 9px 12px; font-size: 13px; font-family: inherit;
}
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 980px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid { grid-template-columns: 1fr; } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card-photo { aspect-ratio: 1/1; background: var(--surface-alt); overflow: hidden; display:flex; align-items:center; justify-content:center; }
.card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-mancante { color: var(--ink-faint); font-size: 12px; text-align: center; padding: 0 12px; }
.foto-miniature { display: flex; gap: 6px; padding: 8px 12px 0; flex-wrap: wrap; }
.foto-miniature .miniatura { width: 36px; height: 36px; object-fit: cover; border-radius: 6px; cursor: pointer; border: 2px solid transparent; opacity: .7; transition: opacity .15s ease, border-color .15s ease; }
.foto-miniature .miniatura:hover { opacity: 1; }
.foto-miniature .miniatura.attiva { opacity: 1; border-color: var(--accent); }
.card-body { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-body h3 { font-size: 14.5px; font-weight: 600; margin: 0; font-family: 'Plus Jakarta Sans', sans-serif; }
.card-body .spec { font-size: 11.5px; color: var(--ink-soft); line-height: 1.45; min-height: 32px; }
.card-code { align-self: flex-start; font-size: 10px; font-weight: 600; color: var(--ink-faint); background: var(--surface-alt); padding: 2px 7px; border-radius: 5px; letter-spacing: 0.03em; }
.card .price-slot { margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line); }

.price-locked { display: flex; align-items: center; gap: 10px; }
.price-locked .lock { width: 28px; height: 28px; border-radius: 8px; background: var(--surface-alt); color: var(--ink-faint); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.price-locked .txt { font-size: 11px; color: var(--ink-soft); line-height: 1.4; }
.price-locked a { color: var(--accent); font-weight: 700; text-decoration: none; }

.price-open { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.price-open .tag { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 8px; border-radius: 5px; margin-bottom: 6px; }
.tag-negozio { background: var(--accent-soft); color: var(--accent); }
.tag-grossista { background: var(--accent2-soft); color: var(--accent2); }
.price-open .amount { font-size: 19px; font-weight: 600; }
.price-open .amount.grossista { color: var(--accent2); }
.price-open .strike { font-size: 12px; color: var(--ink-faint); text-decoration: line-through; }
.price-open .unit { font-size: 11px; color: var(--ink-faint); }
.moq-note { font-size: 10.5px; color: var(--ink-faint); margin-top: 2px; }
.moq-badge { font-size: 11.5px; font-weight: 700; color: var(--accent2); background: var(--accent2-soft); border-radius: 7px; padding: 7px 9px; margin: 8px 0; line-height: 1.4; }

.add-cart-btn { margin-top: 10px; width: 100%; background: var(--accent); color: var(--accent-ink); border: none; border-radius: 8px; padding: 9px; font-weight: 700; font-size: 12.5px; cursor: pointer; }
.add-cart-btn:disabled { background: var(--locked); color: var(--ink-faint); cursor: not-allowed; }

/* ---- forms ---- */
.form-grid { display: grid; gap: 16px; }
.field label { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 6px; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  width: 100%; background: var(--surface-alt); border: 1px solid var(--line); color: var(--ink);
  border-radius: 8px; padding: 11px 13px; font-size: 14px; font-family: inherit;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.hint { font-size: 11.5px; color: var(--ink-faint); margin-top: 4px; }
.error-box { background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger); border-radius: 10px; padding: 12px 16px; font-size: 13px; margin-bottom: 18px; }
.ok-box { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent); border-radius: 10px; padding: 12px 16px; font-size: 13px; margin-bottom: 18px; }
.tabs { display: flex; gap: 4px; background: var(--surface-alt); border-radius: 10px; padding: 4px; margin-bottom: 24px; }
.tabs a { flex: 1; text-align: center; padding: 10px; border-radius: 8px; font-weight: 700; font-size: 13px; text-decoration: none; color: var(--ink-soft); }
.tabs a.active { background: var(--ink); color: var(--bg); }

/* ---- tables ---- */
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th, table.data td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); }
table.data th { color: var(--ink-soft); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }
table.data tr:hover td { background: var(--surface-alt); }
.status-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.status-in_attesa, .status-pending { background: var(--accent2-soft); color: var(--accent2); }
.status-pagato, .status-approvato { background: var(--accent-soft); color: var(--accent); }
.status-spedito { background: #1a2f4a; color: #7fb2ff; }
.status-consegnato { background: var(--accent-soft); color: var(--accent); }
.status-annullato, .status-rifiutato { background: var(--danger-soft); color: var(--danger); }

/* ---- stat tiles (admin) ---- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; }
@media (max-width: 860px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
.stat-tile { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; }
.stat-tile .label { font-size: 11.5px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.stat-tile .value { font-size: 24px; font-weight: 700; font-family: 'Unbounded', sans-serif; }

/* ---- note ---- */
.note { background: var(--surface-alt); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.6; margin-top: 24px; }
.note b { color: var(--ink); }

/* ---- footer ---- */
footer { border-top: 1px solid var(--line); padding: 40px 0; background: var(--surface-alt); }
footer .wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 12.5px; color: var(--ink-soft); }
footer .wrap strong { color: var(--ink); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---- titolo hero: "senza sorprese sul prezzo" ----
   In index.php questa frase è dentro <em>...</em> (per dargli risalto),
   che il browser renderizza in corsivo di default. Il cliente non lo
   vuole inclinato: qui togliamo il corsivo e usiamo il colore accento
   (lo stesso verde del pulsante "Vai al catalogo") al suo posto.
   Regola già presente prima, va sempre tenuta insieme al resto del
   file: se si ricarica una copia più vecchia di style.css, questa
   riga si perde e il titolo torna corsivo. */
.hero h1 em, h1 em {
  font-style: normal;
  color: var(--accent);
}

/* ---- promo slider: versione telefono (aggiornata 23 set 2026) ----
   Su schermi stretti il riquadro non ha più un'altezza fissa: la foto
   sta sopra, intera e a tutta larghezza (senza fasce vuote sopra e
   sotto), e titolo + badge omaggio stanno sotto la foto su fondo
   scuro. Il riquadro si adatta da solo all'altezza del contenuto.
   Da PC non cambia nulla. Gli !important servono perché index.php
   imposta stili inline (e un'altezza via JS) che altrimenti vincerebbero;
   per lo stesso motivo le regole iniziano con #promoSlider (più forti).
   NOTA: questa sezione e quella del titolo qui sopra vanno sempre
   tenute. Prima di modificare style.css scaricarlo FRESCO dall'FTP. */
@media (max-width: 640px) {
  #promoSlider.promo-slider { height: auto !important; aspect-ratio: auto !important; background: var(--surface) !important; border: 1px solid var(--line); }
  #promoSlider .promo-slider-track { height: auto !important; align-items: stretch; }
  #promoSlider .promo-slide { height: auto !important; display: flex; flex-direction: column; }
  #promoSlider .promo-slide-img { position: static !important; inset: auto !important; width: 100% !important; height: auto !important; object-fit: contain !important; }
  #promoSlider .promo-slide-overlay { display: none !important; }
  #promoSlider .promo-slide-content { height: auto !important; max-width: 100% !important; padding: 16px 18px 34px !important; gap: 10px !important; justify-content: flex-start !important; flex: 1; }
  #promoSlider .promo-slide.senza-foto .promo-slide-content { padding-top: 22px !important; }
  #promoSlider .promo-slide-content h2 { font-size: 20px !important; }
  #promoSlider .promo-slide-badge { white-space: normal; font-size: 12.5px; }
  #promoSlider .promo-slider-dots { bottom: 12px !important; }
  #promoSlider .promo-slider-arrow { display: none !important; }
}

/* ---- barra categorie "Pillola Sospesa" (catalogo + outlet) ----
   Reintegrata il 28 set 2026: queste regole si erano perse in un
   caricamento di style.css del 23 set. NON cancellare questa sezione. */
.pill-nav-wrap {
  position: sticky; top: 10px; z-index: 20;
  margin: 18px 0 26px;
}
.pill-nav {
  display: flex; align-items: center; gap: 12px;
  padding: 8px;
  background: rgba(19, 29, 44, 0.78);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow);
}
.pill-nav-chips {
  display: flex; gap: 6px; flex: 1 1 auto; min-width: 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.pill-nav-chips::-webkit-scrollbar { display: none; }
.pill {
  flex: 0 0 auto;
  display: inline-flex; align-items: center;
  padding: 8px 15px;
  border-radius: 999px;
  font-size: 13px; font-weight: 600; line-height: 1;
  color: var(--ink-soft);
  text-decoration: none; white-space: nowrap;
  border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.pill:hover { color: var(--ink); background: var(--surface-alt); }
.pill.active { background: var(--accent); color: var(--accent-ink); }
.pill-nav-search {
  flex: 0 0 auto;
  display: flex; align-items: center;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 3px 3px 14px;
}
.pill-nav-search input[type="search"] {
  width: 190px; min-width: 0;
  background: transparent; border: 0; outline: none;
  color: var(--ink); font: inherit; font-size: 13px;
  padding: 6px 4px;
}
.pill-nav-search input[type="search"]::placeholder { color: var(--ink-faint); }
.pill-search-btn {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 14px; cursor: pointer;
}
/* Telefono: chip su una riga scorrevole, ricerca sotto a tutta larghezza.
   Niente "gap" sul contenitore (non supportato da alcuni Android vecchi):
   si usa margin-top esplicito. */
@media (max-width: 640px) {
  .pill-nav { display: block; border-radius: 22px; padding: 8px; }
  .pill-nav-search { display: flex; margin-top: 8px; width: 100%; }
  .pill-nav-search input[type="search"] { width: 100%; flex: 1 1 auto; }
}

/* ============================================================
   STRATO "EMPATICO" (8 ott 2026)
   Accoglienza, aiuto sempre a portata, conferme chiare e movimento
   morbido. Il flusso d'ordine NON cambia: solo come appare.
   NOTA: come le sezioni sopra, va sempre tenuta. Per modificare
   style.css partire sempre dal file live (Plesk), mai da copie locali.
   ============================================================ */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --wa: #25d366;
}
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: transparent; }
a, button, .pill, .cta { touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: rgba(47, 224, 199, .3); }

/* --- pulsanti: rispondono al tocco --- */
.cta, .add-cart-btn, .pill, .icon-btn, .pill-search-btn {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .16s var(--ease-out);
}
.cta:active, .add-cart-btn:active, .pill:active, .icon-btn:active, .pill-search-btn:active, .menu-toggle:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .cta.accent:hover, .add-cart-btn:hover:not(:disabled) { box-shadow: 0 8px 22px -8px rgba(47, 224, 199, .55); }
  .cta.ghost:hover { border-color: var(--accent); color: var(--accent); }
  .icon-btn:hover { border-color: var(--accent); }
}
.add-cart-btn.invio { opacity: .75; pointer-events: none; }
/* i campi del telefono a 16px: così iPhone non fa lo zoom quando si tocca la quantità */
@media (max-width: 720px) {
  .field input, .field select, .field textarea, .card input[type=number], .card select, .pill-nav-search input[type=search] { font-size: 16px !important; }
}

/* --- schede prodotto --- */
.card { transition: transform .3s var(--ease-out), box-shadow .3s ease, border-color .25s ease; scroll-margin-top: 110px; }
.card:hover { transform: none; }
@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: translateY(-3px); border-color: rgba(47, 224, 199, .35); box-shadow: 0 18px 40px -22px rgba(0,0,0,.8), 0 0 0 1px rgba(47, 224, 199, .12); }
  .card:hover .card-photo img { transform: scale(1.04); }
}
.card-photo img { transition: transform .5s var(--ease-out); }
.card:target { animation: evidenzia 1.6s var(--ease-out); }
@keyframes evidenzia { 0% { box-shadow: 0 0 0 3px rgba(47, 224, 199, .7); } 100% { box-shadow: 0 0 0 3px rgba(47, 224, 199, 0); } }

/* --- HOME: accoglienza --- */
.hero { position: relative; overflow: hidden; padding: 56px 0 44px; }
.hero-sfondo {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 70% at 85% 30%, rgba(47, 224, 199, .13), transparent 70%),
    radial-gradient(ellipse 40% 60% at 10% 90%, rgba(255, 133, 98, .07), transparent 70%);
}
.hero-sfondo::after { /* griglia leggera stile "espositore" */
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 60% 80% at 80% 40%, #000, transparent 75%);
          mask-image: radial-gradient(ellipse 60% 80% at 80% 40%, #000, transparent 75%);
}
.hero .wrap { position: relative; }
.hero-in { max-width: 760px; }
.hero-ciao { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); padding: 7px 14px; border-radius: 999px; margin-bottom: 18px; }
.hero-ciao strong { color: var(--ink); }
.eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 6px 12px; border-radius: 999px; margin-bottom: 18px; }
.hero h1 { font-size: clamp(30px, 5.4vw, 52px); line-height: 1.08; margin: 0 0 18px; font-weight: 700; }
.hero .lead { font-size: clamp(15px, 2vw, 18px); color: var(--ink-soft); line-height: 1.55; margin: 0 0 26px; max-width: 600px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-actions .cta { padding: 14px 22px; font-size: 15px; border-radius: 12px; }
.hero-punti { list-style: none; padding: 0; margin: 28px 0 0; display: flex; gap: 10px 22px; flex-wrap: wrap; font-size: 13.5px; color: var(--ink-soft); }
.hero-punti li { display: inline-flex; align-items: center; gap: 8px; }
.hero-punti span { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 800; }
.hero-ciao, .eyebrow, .hero h1, .hero .lead, .hero-actions, .hero-punti { animation: entra .7s var(--ease-out) both; }
.hero .eyebrow { animation-delay: 40ms; } .hero h1 { animation-delay: 90ms; } .hero .lead { animation-delay: 150ms; }
.hero-actions { animation-delay: 210ms; } .hero-punti { animation-delay: 270ms; }
@keyframes entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.titolo-sez { font-size: clamp(20px, 3vw, 26px); margin: 8px 0 20px; font-weight: 700; }
.passi-smy { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.passi-smy li { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px 22px 20px; position: relative; overflow: hidden; }
.passi-smy li::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(var(--accent), transparent); }
.passo-n { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--accent); color: var(--accent-ink); font: 700 16px/1 'Unbounded', sans-serif; margin-bottom: 14px; }
.passi-smy h3 { font-size: 16px; margin: 0 0 6px; font-weight: 600; }
.passi-smy p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.55; }
.passi-smy b { color: var(--ink); }
@media (max-width: 760px) { .passi-smy { grid-template-columns: 1fr; } .hero { padding: 36px 0 28px; } }

/* --- "Serve una mano?" (in fondo a ogni pagina dei clienti) --- */
.aiuto { padding: 8px 0 48px; }
.aiuto-box { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  background: radial-gradient(ellipse at 0% 0%, rgba(37, 211, 102, .1), transparent 60%), var(--surface);
  border: 1px solid var(--line); border-radius: 18px; padding: 26px 28px; }
.aiuto-txt { flex: 1 1 380px; }
.aiuto-txt h2 { font-size: 20px; margin: 0 0 6px; }
.aiuto-txt p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.55; max-width: 560px; }
.aiuto-azioni { display: flex; gap: 10px; flex-wrap: wrap; }
.aiuto-azioni .cta { padding: 12px 18px; font-size: 14px; border-radius: 12px; }
.cta.wa { background: var(--wa); color: #fff; }
.wa-ico { width: 18px; height: 18px; fill: currentColor; }
@media (max-width: 560px) { .aiuto-box { padding: 20px; } .aiuto-azioni .cta { flex: 1 1 100%; justify-content: center; } }

.wa-float { position: fixed; z-index: 900; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px 11px 12px; border-radius: 999px;
  background: var(--wa); color: #fff; text-decoration: none; font-weight: 700; font-size: 14px;
  box-shadow: 0 12px 28px -8px rgba(0,0,0,.6); transition: transform .2s var(--ease-out);
  animation: waIn .5s 1s var(--ease-out) both; }
.wa-float svg { width: 24px; height: 24px; fill: currentColor; }
.wa-float:active { transform: scale(.95); }
@media (hover: hover) and (pointer: fine) { .wa-float:hover { transform: translateY(-2px); } }
@media (max-width: 560px) { .wa-float span { display: none; } .wa-float { padding: 13px; } }
@keyframes waIn { from { opacity: 0; transform: translateY(14px) scale(.95); } to { opacity: 1; transform: none; } }
/* se c'è la barra "Installa l'app" in basso, il pulsante si sposta sopra */
body:has(#smyAppBar) .wa-float { bottom: 96px; }

/* --- avviso "Aggiunto al carrello" --- */
.smy-toast { position: fixed; z-index: 1000; left: 50%; top: 16px; transform: translateX(-50%);
  width: min(520px, calc(100% - 24px)); display: flex; align-items: center; gap: 12px;
  background: #16223a; color: var(--ink); border: 1px solid rgba(47, 224, 199, .45); border-radius: 16px; padding: 12px 12px 12px 14px;
  box-shadow: 0 18px 40px -12px rgba(0,0,0,.7); animation: toastIn .45s var(--ease-out) both; }
.smy-toast.via { opacity: 0; transform: translate(-50%, -8px); transition: opacity .2s ease, transform .2s ease; }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, -14px) scale(.97); } to { opacity: 1; transform: translate(-50%, 0); } }
.smy-toast-ico { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; }
.smy-toast-ico svg, .spunta svg { width: 60%; height: 60%; fill: none; stroke: var(--accent-ink); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 24; stroke-dashoffset: 24; animation: tratto .35s .2s var(--ease-out) forwards; }
@keyframes tratto { to { stroke-dashoffset: 0; } }
.smy-toast-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.smy-toast-txt strong { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.smy-toast-txt small { color: var(--ink-soft); font-size: 12.5px; }
.smy-toast-link { flex: 0 0 auto; background: var(--accent); color: var(--accent-ink); text-decoration: none; font-weight: 700; font-size: 13px; padding: 9px 13px; border-radius: 10px; white-space: nowrap; }
.smy-toast-x { flex: 0 0 auto; background: none; border: 0; color: var(--ink-faint); font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 6px; }
@media (max-width: 420px) { .smy-toast-link { padding: 8px 10px; font-size: 12.5px; } }

/* --- conferma ordine --- */
.grazie-testa { text-align: center; padding: 6px 0 18px; margin-bottom: 18px; border-bottom: 1px dashed var(--line); }
.grazie-testa h1 { margin: 12px 0 6px; font-size: clamp(22px, 4vw, 28px); }
.grazie-testa p { margin: 0; color: var(--ink-soft); font-size: 14px; }
.spunta { width: 64px; height: 64px; border-radius: 50%; background: var(--accent); display: inline-grid; place-items: center;
  box-shadow: 0 0 0 10px var(--accent-soft); animation: spuntaIn .5s var(--ease-out) both; }
@keyframes spuntaIn { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

/* --- menu del telefono (tre lineette che diventano una X) --- */
.menu-toggle { width: 42px; height: 38px; padding: 0; flex-direction: column; justify-content: center; align-items: center; gap: 4px; }
.menu-toggle span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .25s var(--ease-out), opacity .15s ease; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mobile-nav.open a { animation: voceIn .28s var(--ease-out) both; }
.mobile-nav.open a:nth-child(2) { animation-delay: 30ms; } .mobile-nav.open a:nth-child(3) { animation-delay: 60ms; }
.mobile-nav.open a:nth-child(n+4) { animation-delay: 90ms; }
@keyframes voceIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* --- comparsa allo scorrimento (solo se il browser la supporta) --- */
.js-anim .rivela { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--ease-out), transform .55s var(--ease-out), box-shadow .3s ease, border-color .25s ease; transition-delay: calc(var(--i, 0) * 60ms); }
.js-anim .rivela.visto { opacity: 1; transform: none; }
.js-anim .rivela.visto:hover { transition-delay: 0ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-anim .rivela { opacity: 1; transform: none; }
  .smy-toast-ico svg, .spunta svg { stroke-dashoffset: 0; }
}

/* telefono: logo e pulsanti sulla stessa riga (prima andavano a capo e rubavano spazio) */
@media (max-width: 720px) {
  header.main { padding: 12px 0; }
  header.main .wrap { gap: 10px; }
  .head-actions { gap: 8px; }
  .head-actions .cta { padding: 9px 14px; }
  .logo img.logo-mark { height: 26px; }
  .mobile-nav.open { margin-top: 10px; }
}
.hero-sfondo { -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }