/* =====================================================================
   M'Arricriu — «Atelier» con l'anima siciliana (Alberto, 11/11/2026:
   «le maioliche e i carretti di prima mi piacevano di più» → secondo giro:
   maioliche e carretti più presenti; terzo giro, sera dell'11/11: «le maioliche
   secondo me sono un po' troppe» → una via di mezzo).
   Si carica DOPO atelier.css: la struttura resta Atelier (titoli Cormorant, testi Bodoni, DM Mono,
   pannelli tinti delle scatole, un solo pulsante oro per comprare).
   Siciliano:
   - sfondo intero a maiolica (le piastrelle di maiolica.css, velate d'avorio)
     SOLO in «Il tuo caffè» (la scelta della macchina), con i testi su un foglio
     avorio con cornice oro (contrasto AA invariato); «Box e calcolatore» e
     «Tazzine e regali» restano avorio;
   - pagine Miscele e Il nostro mondo: una fascia di maiolica in alto e una in
     fondo, niente maiolica a tutta pagina;
   - fasce a colori in testata, sotto l'apertura e nel piè di pagina; tra le
     sezioni della home al massimo DUE fasce (prima di «Il tuo caffè» e prima
     del racconto), alte 20 px sul telefono e 24 sul computer, con il medaglione
     del carretto;
   - il carretto vero (img/logo/web/carretto-*.webp, dal disegno a colori
     del logo) grande nel racconto e nel piè di pagina, piccolo accanto al
     logo sul computer (niente più firme accanto agli occhielli).
   Solo CSS e immagini già nel sito (+ carretto-360.webp per i computer):
   nessun JavaScript, nessuno spostamento della pagina (spazi fissi).
   ===================================================================== */
:root {
  --paper: #FAF3E4;        /* avorio più caldo */
  --paper-2: #F4E9D4;
  --cream: #F0E2C8;        /* sabbia calda: piè di pagina */
  --terracotta: #9A3A1B;   /* occhielli: 7,0:1 sull'avorio */
  --maj-blu: #1F4E8C;
  --maj-oro: #B8975A;
  --carretto-s: url("../img/logo/web/carretto-120.webp");
  --carretto-m: url("../img/logo/web/carretto-240.webp");
  --carretto-l: url("../img/logo/web/carretto-240.webp");
  --maj-velo: rgba(250, 243, 228, .58);   /* velo d'avorio sulle piastrelle: trama ben visibile ma calma */
  --maj-fondo: linear-gradient(var(--maj-velo), var(--maj-velo)), var(--maj-strip);
  --maj-passo: 112px 56px;                /* piastrelle da 56 px sul fondo */
  --maj-h: 24px;                          /* altezza delle fasce di testata, apertura e piè di pagina */
  --maj-sep: 20px;                        /* altezza delle fasce tra le sezioni (telefono) */
}
@media (min-width: 900px) { :root { --carretto-l: url("../img/logo/web/carretto-360.webp"); --maj-h: 30px; --maj-sep: 24px; --maj-passo: 128px 64px; } }
:root[data-theme="dark"] { --terracotta: #EDA27F; --maj-velo: rgba(23, 18, 15, .80); }
.kicker { color: var(--terracotta); }

/* ---------- fasce di maiolica a colori: testata, menu, piè di pagina ---------- */
.maj-strip {
  height: var(--maj-h); opacity: 1;
  background: var(--maj-strip) 0 0 / calc(var(--maj-h) * 2) var(--maj-h) repeat-x;
  box-shadow: inset 0 2px 0 var(--maj-blu), inset 0 3px 0 var(--maj-oro), inset 0 -2px 0 var(--maj-blu), inset 0 -3px 0 var(--maj-oro);
}

/* ---------- testata: il carretto accanto al logo, a destra (a sinistra ci sono le voci del menu) ---------- */
@media (min-width: 720px) {
  .header .logo { position: relative; }
  .header .logo::after { content: ""; position: absolute; left: calc(100% + 14px); top: 50%; width: 58px; height: 40px; transform: translateY(-50%); background: var(--carretto-m) center / contain no-repeat; pointer-events: none; }
}

/* ---------- separatore: fascia di maiolica a tutta larghezza con il carretto in un medaglione avorio ----------
   Al massimo due in home: prima di «Il tuo caffè» (#macchina) e prima del racconto (#storia). */
#macchina::before, #storia::before {
  content: ""; display: block; position: relative; z-index: 1; height: 80px; margin: -96px 0 32px;
  background:
    var(--carretto-m) center / 92px 64px no-repeat,
    radial-gradient(64px 40px at 50% 50%, var(--paper) 0 calc(100% - 3px), var(--maj-oro) calc(100% - 3px) 100%, transparent 100%) center / 100% 100% no-repeat,
    linear-gradient(var(--maj-oro), var(--maj-oro)) center calc(50% - var(--maj-sep) / 2 - 1px) / 100% 2px no-repeat,
    linear-gradient(var(--maj-oro), var(--maj-oro)) center calc(50% + var(--maj-sep) / 2 + 1px) / 100% 2px no-repeat,
    var(--maj-strip) center / calc(var(--maj-sep) * 2) var(--maj-sep) repeat-x;
}
@media (min-width: 900px) { #macchina::before, #storia::before { margin: -150px 0 48px; height: 96px; background-size: 108px 75px, 100% 100%, 100% 2px, 100% 2px, calc(var(--maj-sep) * 2) var(--maj-sep); } }
/* prima di «Il tuo caffè» la fascia apre la sezione (non sale sopra l'Etna, che ha il suo titolo in fondo) */
#macchina { padding-top: 0; }
#macchina::before { margin: 0 0 32px; }
@media (min-width: 900px) { #macchina::before { margin: 0 0 48px; } }

/* ---------- sfondo intero a maiolica SOLO in «Il tuo caffè», con il foglio avorio sotto i testi ---------- */
#macchina { background: var(--maj-fondo); background-size: auto, var(--maj-passo); background-color: var(--paper); }
#macchina > .wrap {
  position: relative; background: var(--paper); margin: 0 6px; padding: 24px 9px;   /* telefono: 6 + 1 + 9 px = lo stesso spazio laterale di prima (16 px) */
  border: 1px solid var(--maj-oro); border-radius: 2px;
  box-shadow: 0 0 0 5px var(--paper), 0 0 0 6px var(--maj-oro), 0 30px 60px -40px rgba(34, 28, 23, .55);
}
@media (min-width: 420px) { #macchina > .wrap { margin: 0 10px; padding: 28px 12px; } }
@media (min-width: 760px) { #macchina > .wrap { margin: 0 32px; padding: 48px 40px; } }
@media (min-width: 1320px) { #macchina > .wrap { margin: 0 auto; padding: 64px 56px; } }

/* ---------- pagine Miscele e Il nostro mondo: una fascia in alto e una in fondo, il resto avorio ---------- */
body[data-page="miscele"] main::before, body[data-page="miscele"] main::after, body[data-page="storia"] main::before, body[data-page="storia"] main::after {
  content: ""; display: block; height: var(--maj-sep);
  background: var(--maj-strip) 0 0 / calc(var(--maj-sep) * 2) var(--maj-sep) repeat-x;
  box-shadow: inset 0 2px 0 var(--maj-blu), inset 0 3px 0 var(--maj-oro), inset 0 -2px 0 var(--maj-blu), inset 0 -3px 0 var(--maj-oro);
}
body[data-page="miscele"] main::after, body[data-page="storia"] main::after { margin-top: 48px; }

/* ---------- racconto: il carretto grande sopra «Il piacere di sentirsi in Sicilia» ---------- */
#storia { background-color: var(--paper-2); background-image: var(--maj-soft); background-size: 120px 120px; }
#storia .st-prev::before { content: ""; display: block; width: 100%; height: 120px; margin: 0 auto 8px; background: var(--carretto-l) center / contain no-repeat; }
@media (min-width: 900px) { #storia .st-prev::before { height: 150px; } }

/* cornice di maiolica attorno alla foto del racconto e alla foto di «Il nostro mondo» */
.st-foto { padding: 14px; background: var(--maj-strip) 0 0 / 56px 28px; border-radius: 4px; box-shadow: 0 0 0 1px var(--maj-oro), 0 24px 50px -30px rgba(34, 28, 23, .45); }
.st-foto img { border-radius: 2px; }
.st-foto figcaption { left: 24px; bottom: 24px; }

/* angoli di maiolica (come le confezioni): pannelli delle miscele, schede del catalogo, galleria */
.mix-img, .pc .art, .gal .main { position: relative; }
.mix-img::after, .pc .art::after, .gal .main::after {
  content: ""; display: block; position: absolute; top: 0; right: 0; width: 64px; height: 64px; z-index: 2;
  background: var(--maj-stella) 0 0 / 64px 64px; border-bottom-left-radius: 100%; opacity: .95; pointer-events: none;
}
.pc .art::after { width: 44px; height: 44px; background-size: 44px 44px; }
.gal .main::after { width: 72px; height: 72px; background-size: 72px 72px; }

/* apertura «Alba»: fascia di maiolica a chiudere, sotto il video */
.alba { padding-bottom: var(--maj-h); }
.alba::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--maj-h); background: var(--maj-strip) 0 0 / calc(var(--maj-h) * 2) var(--maj-h) repeat-x; box-shadow: inset 0 2px 0 var(--maj-blu), inset 0 3px 0 var(--maj-oro); pointer-events: none; }

/* proverbi delle scatole: piastrella come segno */
.prov-grid > * { position: relative; }

/* ---------- fiducia e piè di pagina ---------- */
.trust { background-image: var(--maj-soft); background-size: 120px 120px; }
.foot-site { position: relative; background-image: var(--maj-soft); background-size: 120px 120px; padding-bottom: var(--maj-h); }
.foot-site::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--maj-h); background: var(--maj-strip) 0 0 / calc(var(--maj-h) * 2) var(--maj-h) repeat-x; box-shadow: inset 0 2px 0 var(--maj-blu), inset 0 3px 0 var(--maj-oro); }
/* il carretto grande, firma del negozio, in un medaglione avorio sopra la fascia */
.foot-site > .wrap::before {
  content: ""; display: block; height: 150px; max-width: 420px; margin: 18px auto 30px;
  background:
    var(--carretto-l) center / auto 112px no-repeat,
    radial-gradient(closest-side, var(--paper) 0 93%, var(--maj-oro) 93% 96%, transparent 96%) center / 290px 150px no-repeat;
}
@media (min-width: 900px) { .foot-site > .wrap::before { height: 210px; background-size: auto 136px, 400px 210px; } }
:root[data-theme="dark"] .trust, :root[data-theme="dark"] .foot-site, :root[data-theme="dark"] #storia { background-image: none; }

/* il carretto nelle schede «carretto-box» del racconto torna sulla maiolica, dentro un ovale avorio */
.carretto-box { border-color: var(--maj-oro); }
.carretto-box::before { display: block; content: ""; position: absolute; inset: 0; background: var(--maj-fondo); background-size: auto, 112px 56px; }
.carretto-box img { border-radius: 50%; background: radial-gradient(closest-side, var(--paper) 0 96%, transparent 100%); padding: 8%; }

@media (prefers-reduced-motion: reduce) { .st-foto img { transition: none; } }