/* ============================================================
   OclaRacing - foglio di stile condiviso
   Tema scuro "carbonio" + rosso racing. Stessa struttura del sito
   Smyline (stesse pagine e componenti), grafica diversa.
   ============================================================ */

: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);
}

/* Tema scuro fisso (carbonio + rosso racing). Il rosso è il colore del
   marchio e dei pulsanti; il verde (--ok) è riservato alle conferme,
   l'ambra (--accent2) al livello Grossista. */
:root {
  --bg: #0b0b0d;
  --surface: #141418;
  --surface-alt: #1c1c22;
  --ink: #f4f4f6;
  --ink-soft: #a9a9b4;
  --ink-faint: #74747f;
  --line: #2a2a32;
  --accent: #e10600;
  --accent-ink: #ffffff;
  --accent-soft: #3a0f0d;
  --accent2: #ffb020;
  --accent2-soft: #3a2a0c;
  --ok: #2fd27a;
  --ok-soft: #0f2e1d;
  --locked: #34343c;
  --danger: #ff6b6b;
  --danger-soft: #3a1414;
  --shadow: 0 1px 2px rgba(0,0,0,0.35), 0 12px 28px -10px rgba(0,0,0,0.6);
  --rosso-rgb: 225, 6, 0;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .display {
  font-family: 'Saira', 'Barlow', sans-serif;
  text-wrap: balance;
  letter-spacing: -0.005em;
}
h1 { font-style: italic; font-weight: 800; text-transform: none; }
.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: 'Barlow', 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(--ok-soft); color: var(--ok); border: 1px solid var(--ok); 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(--ok-soft); color: var(--ok); }
.status-spedito { background: #1a2f4a; color: #7fb2ff; }
.status-consegnato { background: var(--ok-soft); color: var(--ok); }
.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: 'Saira', sans-serif; font-style: italic; }

/* ---- 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(20, 20, 24, 0.82);
  -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(var(--rosso-rgb), .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(var(--rosso-rgb), .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(var(--rosso-rgb), .35); box-shadow: 0 18px 40px -22px rgba(0,0,0,.8), 0 0 0 1px rgba(var(--rosso-rgb), .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(var(--rosso-rgb), .7); } 100% { box-shadow: 0 0 0 3px rgba(var(--rosso-rgb), 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 50% 70% at 88% 25%, rgba(var(--rosso-rgb), .16), transparent 70%),
    radial-gradient(ellipse 40% 60% at 5% 95%, rgba(255, 255, 255, .04), transparent 70%);
}
.hero-sfondo::after { /* strisce "velocità" come nel logo */
  content: ""; position: absolute; top: -10%; bottom: -10%; right: 4%; width: min(46%, 560px);
  background: repeating-linear-gradient(105deg,
    rgba(var(--rosso-rgb), .55) 0 10px, transparent 10px 26px,
    rgba(var(--rosso-rgb), .32) 26px 34px, transparent 34px 52px,
    rgba(255, 255, 255, .06) 52px 56px, transparent 56px 74px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%);
          mask-image: linear-gradient(90deg, transparent, #000 55%);
  opacity: .55; transform: skewX(-14deg);
}
@media (max-width: 760px) { .hero-sfondo::after { width: 60%; right: -12%; opacity: .3; } }
.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, 54px); line-height: 1.04; margin: 0 0 18px; font-weight: 800; }
.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-ocr { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.passi-ocr li { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px 22px 20px; position: relative; overflow: hidden; }
.passi-ocr 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: italic 800 17px/1 'Saira', sans-serif; margin-bottom: 14px; }
.passi-ocr h3 { font-size: 16px; margin: 0 0 6px; font-weight: 600; }
.passi-ocr p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.55; }
.passi-ocr b { color: var(--ink); }
@media (max-width: 760px) { .passi-ocr { 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(#ocrAppBar) .wa-float { bottom: 96px; }

/* --- avviso "Aggiunto al carrello" --- */
.ocr-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: #1a1a20; color: var(--ink); border: 1px solid rgba(var(--rosso-rgb), .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; }
.ocr-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); } }
.ocr-toast-ico { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; }
.ocr-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; } }
.ocr-toast-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.ocr-toast-txt strong { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ocr-toast-txt small { color: var(--ink-soft); font-size: 12.5px; }
.ocr-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; }
.ocr-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) { .ocr-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; }
  .ocr-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); }

/* ============================================================
   OCLARACING - aggiunte
   ============================================================ */
.logo img.logo-mark { height: 34px; }
@media (max-width: 720px) { .logo img.logo-mark { height: 28px; } }
.eyebrow { font-style: italic; }
.titolo-sez { font-style: italic; }
.page-head h1, .catalog-head h1 { font-weight: 800; }
.cta, .add-cart-btn { letter-spacing: .01em; }
.cta.accent, .add-cart-btn { text-transform: uppercase; font-weight: 700; letter-spacing: .04em; }
.rolebar { border-bottom-color: rgba(var(--rosso-rgb), .35); }
header.main { position: relative; }
header.main::after { /* filetto rosso sotto l'intestazione */
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent) 20%, var(--accent) 80%, transparent);
  opacity: .55;
}

/* --- Cerca per auto (catalogo) --- */
.cerca-auto { display: flex; align-items: center; gap: 14px 22px; flex-wrap: wrap;
  background: linear-gradient(100deg, rgba(var(--rosso-rgb), .14), transparent 55%), var(--surface);
  border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 14px;
  padding: 16px 18px; margin: 6px 0 4px; }
.cerca-auto.attiva { border-color: rgba(var(--rosso-rgb), .55); border-left-color: var(--accent); }
.cerca-auto-titolo { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.cerca-auto-titolo strong { display: block; font-family: 'Saira', sans-serif; font-style: italic; font-size: 17px; }
.cerca-auto-titolo small { display: block; color: var(--ink-soft); font-size: 12.5px; }
.cerca-auto-ico { width: 40px; height: 40px; border-radius: 11px; background: var(--accent); display: grid; place-items: center; flex: 0 0 auto; }
.cerca-auto-ico svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cerca-auto-campi { display: flex; gap: 8px; flex-wrap: wrap; flex: 1 1 420px; align-items: center; }
.cerca-auto-campi select { flex: 1 1 130px; min-width: 0; background: var(--surface-alt); border: 1px solid var(--line); color: var(--ink);
  border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 14px; }
.cerca-auto-campi select:disabled { opacity: .5; }
.cerca-auto-campi .cta { padding: 11px 18px; }
.cerca-auto-via { color: var(--ink-soft); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.cerca-auto-via:hover { color: var(--ink); }
@media (max-width: 640px) {
  .cerca-auto-campi select { flex: 1 1 100%; font-size: 16px; }
  .cerca-auto-campi .cta { flex: 1 1 auto; justify-content: center; }
}

/* --- Auto compatibili nella scheda prodotto --- */
.compat { font-size: 12px; }
.compat-ok { color: var(--ok); background: var(--ok-soft); border-radius: 7px; padding: 6px 9px; font-weight: 700; margin-bottom: 6px; }
.compat details { border: 1px solid var(--line); border-radius: 8px; background: var(--surface-alt); }
.compat summary { cursor: pointer; padding: 7px 10px; font-weight: 600; color: var(--ink-soft); list-style: none; }
.compat summary::-webkit-details-marker { display: none; }
.compat summary::before { content: "🚗 "; }
.compat summary::after { content: " ▾"; color: var(--ink-faint); }
.compat details[open] summary::after { content: " ▴"; }
.compat ul { margin: 0; padding: 0 10px 8px 26px; color: var(--ink-soft); line-height: 1.6; max-height: 160px; overflow: auto; }

/* rosso più chiaro quando è usato come colore del TESTO su fondo scuro
   (leggibilità); il rosso pieno resta per pulsanti e sfondi */
:root { --accent-text: #ff5a4f; }
.eyebrow, .tag-negozio, .rolebar-tag.negozio, .price-locked a, .note a, .cerca-auto-via:hover { color: var(--accent-text) !important; }
.eyebrow { background: rgba(var(--rosso-rgb), .16); }
.tag-negozio, .rolebar-tag.negozio { background: rgba(var(--rosso-rgb), .18); }
.hero-punti span { background: rgba(var(--rosso-rgb), .18); color: var(--accent-text); }
.hero h1 em, h1 em { color: var(--accent-text); }

/* logo su una riga (più lungo): sul telefono un po' più basso, così
   logo, carrello, Accedi e menu restano sulla stessa riga */
@media (max-width: 720px) {
  header.main > .wrap:first-child { flex-wrap: nowrap; }
  .logo img.logo-mark { height: 21px; }
  .logo { min-width: 0; flex: 0 1 auto; }
}
@media (max-width: 360px) { .logo img.logo-mark { height: 17px; } }