/* Shoppazzo: stile comune delle pagine nuove (home, Eko-Tower e i prodotti che verranno).
   NON lo usa la pagina di Trico Rosmarinus, che resta su style.css e non si tocca (Frank, 22/10/2026).
   Colori e caratteri sono quelli del sito; in più il logo «adesivo» e i toni freddo/caldo delle landing.
   Layout: le pagine stanno dentro .pagina, che è un contenitore: sotto 760px una colonna (telefono),
   sopra due colonne (computer), con @container nelle singole pagine. */
:root {
  --maiolica: #1E4F91;
  --piastrella: #DCE7F3;
  --marmo: #F6F8F7;
  --bianco: #FFFFFF;
  --inchiostro: #14213D;
  --tenue: #5B6577;
  --arancio: #F5A623;
  --arancio-ombra: #C7820F;
  --ambra: #FFC75A;
  --gelo: #E3ECF6;
  --brina: #A9BDCC;
  --tepore: #FFF4E0;
  --display: "Lilita One", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --testo: "Atkinson Hyperlegible", "Segoe UI", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--testo); color: var(--inchiostro); background: var(--marmo); }
img { max-width: 100%; display: block; }
a { color: var(--maiolica); }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--arancio); outline-offset: 2px; }

.pagina { container-type: inline-size; font-size: 17px; line-height: 1.5; }
.pagina h1, .pagina h2, .pagina h3 { font-family: var(--display); font-weight: 400; margin: 0; text-wrap: balance; color: var(--maiolica); }
.dentro { padding: 0 20px; }

/* Testata: barra blu con il logo adesivo */
.testata { background: var(--maiolica); padding-block: 12px; }
.testata .dentro { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.testata .sinistra { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.adesivo { display: inline-block; background: var(--arancio); color: var(--maiolica); font: 400 24px/1 var(--display); padding: 7px 13px 8px; border-radius: 10px; transform: rotate(-3deg); box-shadow: 0 3px 0 var(--arancio-ombra); text-decoration: none; }
.adesivo:hover { color: var(--maiolica); }
.adesivo .zz { display: inline-block; transform: rotate(8deg) translateY(-1px); }
.testata .motto { color: var(--bianco); font: 400 16px/1.1 var(--display); letter-spacing: .01em; }
.menu { display: flex; gap: 16px; font-weight: 700; font-size: 15px; }
.menu a { color: var(--bianco); text-decoration: none; padding-block: 4px; border-bottom: 2px solid transparent; }
.menu a[aria-current="page"], .menu a:hover { border-bottom-color: var(--arancio); }

/* Pulsante arancione «a pillola», come quelli del sito */
.cta { display: block; width: 100%; text-decoration: none; margin-top: 18px; border: 0; border-radius: 999px; padding: 15px 18px; background: var(--arancio); color: var(--inchiostro); font: 700 20px/1.2 var(--testo); text-align: center; cursor: pointer; box-shadow: 0 4px 0 var(--arancio-ombra); }
.cta:hover { color: var(--inchiostro); filter: brightness(1.04); }
.cta:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--arancio-ombra); }
.cta[disabled] { opacity: .7; cursor: wait; }
.cta small { display: block; font-weight: 400; font-size: 14px; }

/* Modulo d'ordine (ordine.js) */
.errore { display: none; background: #FDECEA; color: #8C1D18; border-radius: 8px; padding: 10px 12px; font-size: 15px; line-height: 21px; }
.errore.visibile { display: block; }
.trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
[aria-invalid="true"] { border-color: #C0392B !important; }

/* Piede */
.piede { background: var(--inchiostro); color: #C9D4DC; font-size: 13px; line-height: 1.45; padding-block: 24px; }
.piede .dentro { display: grid; gap: 10px; }
.piede .nome { font: 400 22px var(--display); color: var(--bianco); }
.piede nav { display: flex; gap: 18px; }
.piede nav a { color: var(--bianco); }

/* Barra «Ordina ora» fissa sul telefono (ordine.js la mostra dopo il primo pulsante e la nasconde sul modulo) */
.barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; gap: 12px; align-items: center; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 244, 224, .96); border-top: 1px solid #F0D3B5; transform: translateY(110%); transition: transform .25s ease; }
.barra.visibile { transform: none; }
.barra .prezzo-barra { font: 400 22px var(--display); color: var(--maiolica); white-space: nowrap; }
.barra .cta { margin: 0; padding: 12px 10px; font-size: 17px; }
@media (prefers-reduced-motion: reduce) { .barra { transition: none; } }
@media (min-width: 760px) { .barra { display: none; } }

/* Banner dei cookie (consenso.js): uguale a quello del resto del sito */
.consenso { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 20; max-width: 520px; margin: 0 auto; background: var(--inchiostro); color: var(--bianco); border-radius: 14px; box-shadow: 0 8px 28px rgba(20, 33, 61, .35); padding: 12px 14px; display: flex; align-items: center; gap: 12px; }
.consenso[hidden] { display: none; }
.consenso p { margin: 0; font-size: 12.5px; line-height: 1.4; flex: 1 1 auto; }
.consenso a { color: var(--bianco); }
.consenso-azioni { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 auto; }
.consenso-si { background: var(--arancio); color: var(--inchiostro); border: 0; border-radius: 999px; padding: 9px 20px; font: 700 15px/1 var(--testo); cursor: pointer; box-shadow: 0 3px 0 var(--arancio-ombra); }
.consenso-si:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--arancio-ombra); }
.consenso-no { background: none; border: 0; color: rgba(255, 255, 255, .75); font: 400 12.5px/1.2 var(--testo); text-decoration: underline; padding: 4px; cursor: pointer; }

@container (min-width: 760px) {
  .pagina { font-size: 18px; }
  .dentro { max-width: 1120px; margin-inline: auto; padding: 0 48px; }
  .testata { padding-block: 16px; }
  .adesivo { font-size: 28px; }
  .testata .motto { font-size: 19px; }
  .menu { gap: 28px; font-size: 17px; }
  .piede .dentro { grid-template-columns: 300px 1fr; column-gap: 60px; }
}

/* Pagine di testo: grazie, privacy, cookie */
.servizio { padding-block: 34px 60px; background: var(--tepore); min-height: 60vh; }
.servizio h1 { font-size: 36px; line-height: 1.08; }
.servizio p { margin: 14px 0 0; max-width: 60ch; line-height: 1.55; }
.servizio h2 { font-size: 26px; margin-top: 30px; }
.servizio ol, .servizio ul { margin: 12px 0 0; padding-left: 22px; display: grid; gap: 8px; max-width: 60ch; line-height: 1.5; }
.servizio code { font-size: .92em; background: var(--bianco); padding: 1px 5px; border-radius: 5px; }
.servizio .indietro { margin-top: 30px; }
@container (min-width: 760px) { .servizio { padding-block: 60px 90px; } .servizio h1 { font-size: 52px; } }