/*
 * E.SI' — Base
 *
 * Solo reset e fondamenta tipografiche. I componenti (header, menu a
 * scomparsa, intro, configuratori, scheda prodotto) arrivano nelle fasi
 * successive, un file per componente.
 */

/* ------------------------------------------------------------
   Reset mirato
   Storefront porta con sé parecchi stili suoi: qui si azzera solo
   quello che darebbe fastidio, senza sparare un reset globale.
   ------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: var(--esi-fondo);
  color: var(--esi-testo);
  font-family: var(--esi-font-base);
  font-size: var(--esi-fs-base);
  line-height: var(--esi-lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--esi-font-base);
  font-weight: var(--esi-peso-grassetto);
  line-height: var(--esi-lh-stretto);
  margin: 0 0 var(--esi-sp-4);
  color: inherit;
}

p {
  margin: 0 0 var(--esi-sp-4);
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--esi-transizione);
}

a:hover,
a:focus-visible {
  color: var(--esi-accento);
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Accessibilità: il focus deve restare sempre visibile.
   Il cliente vuole il pixel-perfect, ma un sito che non si naviga da
   tastiera è un problema legale prima che estetico. */
:focus-visible {
  outline: 2px solid var(--esi-accento);
  outline-offset: 2px;
}


/* ------------------------------------------------------------
   Contenitori
   ------------------------------------------------------------ */

.esi-contenitore {
  width: 100%;
  max-width: var(--esi-contenitore);
  margin-inline: auto;
  padding-inline: var(--esi-gutter);
}

.esi-contenitore--testo {
  max-width: var(--esi-contenitore-testo);
}


/* ------------------------------------------------------------
   Fasce
   Il PDF alterna fasce nere e bianche a tutta larghezza: è il
   ritmo portante di quasi tutte le pagine.
   ------------------------------------------------------------ */

.esi-fascia {
  padding-block: var(--esi-fascia-y);
}

.esi-fascia--scura {
  background-color: var(--esi-fondo-scuro);
  color: var(--esi-testo-su-scuro);
}

.esi-fascia--chiara {
  background-color: var(--esi-fondo);
  color: var(--esi-testo);
}


/* ------------------------------------------------------------
   Utility ricorrenti nel PDF
   ------------------------------------------------------------ */

/* Payoff rossi della home: "per chi pretende di più, in ogni dettaglio",
   "QUALITÀ PREMIUM - STILE ITALIANO" */
.esi-accento {
  color: var(--esi-accento);
}

/* Sottotitoli e descrizioni prodotto, che nel PDF sono in corsivo */
.esi-corsivo {
  font-family: var(--esi-font-corsivo);
  font-style: italic;
}

/* Riquadro "Dati Tecnici": barra rossa piena in testa, corpo con bordo
   rosso tratteggiato. Ricorre identico su tutte e sei le schede prodotto. */
.esi-dati-tecnici {
  border: 1px dashed var(--esi-bordo-tecnico);
  padding: var(--esi-sp-4);
}

.esi-dati-tecnici__titolo {
  background-color: var(--esi-accento);
  color: var(--esi-testo-su-scuro);
  font-size: var(--esi-fs-sm);
  text-align: center;
  padding: var(--esi-sp-1) var(--esi-sp-3);
  margin: 0 0 var(--esi-sp-3);
}

/* Pulsante ACQUISTA: rettangolo nero pieno, testo bianco, niente raggio */
.esi-bottone {
  display: inline-block;
  background-color: var(--esi-nero);
  color: var(--esi-bianco);
  font-family: var(--esi-font-base);
  font-weight: var(--esi-peso-grassetto);
  letter-spacing: 0.04em;
  padding: var(--esi-sp-3) var(--esi-sp-8);
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: background-color var(--esi-transizione);
}

.esi-bottone:hover,
.esi-bottone:focus-visible {
  background-color: var(--esi-accento);
  color: var(--esi-bianco);
}

/* Visibile ai soli screen reader */
.esi-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* ------------------------------------------------------------
   Rispetto delle preferenze di movimento
   L'intro della home è un video: chi ha attivato "riduci animazioni"
   non deve subirlo.
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}