/*
Theme Name:   Yummy Line
Theme URI:    https://yummyline.it
Description:  Tema figlio di Yummy Line. Fondo viola profondo, tipografia crema, sezioni a
              tutta altezza. Tutta la configurazione sta in theme.json: qui dentro non
              serve quasi niente.
Author:       Zago
Version:      3.1.0
Template:     twentytwentyfive
Text Domain:  yummy-line
License:      GNU General Public License v2 or later
*/

/* Nei temi a blocchi lo stile del genitore si carica da solo.
   Qui vanno solo le poche cose che theme.json non può esprimere. */

/* Il bottone d'acquisto sempre visibile su mobile.
   Su desktop non esiste: lì i bottoni pieni sono già due e basta così. */
.yl-acquista-fisso { display: none; }

@media (max-width: 781px) {
  .yl-acquista-fisso {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    margin: 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--wp--preset--color--fondo-scuro);
    border-top: 1px solid var(--wp--preset--color--viola-chiaro);
  }
  .yl-acquista-fisso .wp-block-buttons { margin: 0; }
  .yl-acquista-fisso .wp-block-button,
  .yl-acquista-fisso .wp-block-button__link { width: 100%; text-align: center; }
  /* Lo spazio in fondo che tiene il contenuto sopra questo bottone sta nel
     blocco 133, in coda al foglio, ed e' legato a `body.home`. Qui era su
     `body` e basta, quindi se lo prendevano anche le pagine dove il bottone
     non c'e': si ritrovavano 88 px di vuoto in fondo senza niente da
     scansare. Il bottone vive solo nel contenuto della home. */
}

/* Divisori tratteggiati, mai continui — regola di ORYZO */
.wp-block-separator.is-style-yl-tratteggiato {
  border: none;
  border-top: 1px dashed var(--wp--preset--color--viola-chiaro);
  opacity: 1;
}

/* Il pianeta bloccato reagisce al passaggio del mouse */
.yl-mondo-bloccato img { transition: filter .35s ease, transform .35s ease; }
.yl-mondo-bloccato:hover img { filter: brightness(1.35); transform: scale(1.04); }

/* ── Il form "Avvisami quando esce un mondo" ────────────────────────────── */

.yl-form { margin-top: 18px; max-width: 520px; }

.yl-form__riga {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.yl-form__campo {
  flex: 1 1 240px;
  min-width: 0;
  padding: 15px 18px;
  border: 1px solid var(--wp--preset--color--viola-chiaro);
  border-radius: 0;
  background: transparent;
  color: var(--wp--preset--color--crema);
  font-family: inherit;
  font-size: 16px; /* sotto i 16px iOS ingrandisce la pagina da solo */
}
.yl-form__campo::placeholder { color: var(--wp--preset--color--viola-chiaro); opacity: 1; }
.yl-form__campo:focus {
  outline: 2px solid var(--wp--preset--color--oro);
  outline-offset: 2px;
  border-color: var(--wp--preset--color--oro);
}

.yl-form__invio {
  flex: 0 0 auto;
  border: 0;
  cursor: pointer;
  padding: 15px 34px;
  border-radius: 36px;
  background: var(--wp--preset--color--oro);
  color: var(--wp--preset--color--fondo);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.yl-form__invio:hover { background: var(--wp--preset--color--crema); }

.yl-form__consenso {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.45;
}
.yl-form__consenso input { margin-top: 3px; flex: 0 0 auto; }

.yl-esito {
  margin: 0 0 14px;
  padding: 13px 16px;
  border-left: 3px solid var(--wp--preset--color--oro);
  font-size: 16px;
}
.yl-esito--errore { border-left-color: #ff6b6b; }

/* La trappola per i bot: tolta dalla vista ma non da display:none,
   che alcuni bot riconoscono e saltano. */
.yl-trappola {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 600px) {
  .yl-form__riga { flex-direction: column; }
  .yl-form__invio { width: 100%; }
}

/* ── Intestazione ────────────────────────────────────────────────────────── */

.yl-header {
  position: sticky;
  top: 0;
  z-index: 90;
}
.yl-header .wp-block-site-logo img { display: block; height: auto; }
.yl-header .wp-block-navigation a { text-decoration: none; }
.yl-header .wp-block-navigation a:hover { color: var(--wp--preset--color--oro); }

/* ── Piè di pagina ───────────────────────────────────────────────────────── */

.yl-footer a { text-decoration: none; }
.yl-footer a:hover { color: var(--wp--preset--color--oro); text-decoration: underline; }
.yl-footer p { line-height: 1.9; }
.yl-legale { opacity: .65; line-height: 1.6; }

/* ── Il cielo stellato ───────────────────────────────────────────────────── */
/* Nessuna immagine: sono gradienti radiali ripetuti. Peso zero. */

.yl-stelle { position: relative; isolation: isolate; }
.yl-stelle::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .55;
  background-image:
    radial-gradient(1.4px 1.4px at 18% 22%, #F9E5C1 50%, transparent 51%),
    radial-gradient(1px 1px   at 68% 12%, #F9E5C1 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 42% 68%, #D68617 50%, transparent 51%),
    radial-gradient(1px 1px   at 88% 54%, #F9E5C1 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 8% 78%, #F9E5C1 50%, transparent 51%),
    radial-gradient(1px 1px   at 55% 91%, #D68617 50%, transparent 51%);
  background-size: 340px 340px, 260px 260px, 420px 420px, 300px 300px, 380px 380px, 240px 240px;
  animation: yl-brillio 9s ease-in-out infinite alternate;
}
@keyframes yl-brillio { from { opacity: .35; } to { opacity: .7; } }

/* ── I movimenti ─────────────────────────────────────────────────────────── */

/* Fluttuazione lenta: per il flacone e per Yumo */
.yl-fluttua { animation: yl-galleggia 7s ease-in-out infinite; }
@keyframes yl-galleggia {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

/* Rotazione lentissima: per il pianeta aperto */
.yl-ruota img { animation: yl-giro 90s linear infinite; }
@keyframes yl-giro { to { transform: rotate(360deg); } }

/* Alone che respira: attira l'occhio sul mondo sbloccato */
.yl-pulsa img {
  border-radius: 50%;
  animation: yl-alone 4.5s ease-in-out infinite;
}
@keyframes yl-alone {
  0%, 100% { box-shadow: 0 0 0 0 rgba(214,134,23,0); }
  50%      { box-shadow: 0 0 46px 6px rgba(214,134,23,.28); }
}

/* Comparsa allo scorrimento.
   Usa le animazioni legate allo scroll: niente JavaScript.
   Dove non sono supportate, l'elemento resta semplicemente visibile. */
@supports (animation-timeline: view()) {
  .yl-appare {
    animation: yl-entra linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 26%;
  }
}
@keyframes yl-entra {
  from { opacity: 0; transform: translateY(34px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Chi ha chiesto meno movimento, non lo riceve. */
@media (prefers-reduced-motion: reduce) {
  .yl-fluttua,
  .yl-ruota img,
  .yl-pulsa img,
  .yl-stelle::before,
  .yl-appare { animation: none !important; }
  .yl-appare { opacity: 1 !important; transform: none !important; }
}

/* ── Respiro fra i blocchi dentro le sezioni ─────────────────────────────── */
/* L'hero a tutto schermo con contenuto corto lasciava vuoti enormi:
   il contenuto si centra invece di restare appeso in alto. */

.wp-block-group.alignfull > .wp-block-columns { margin-block: 0; }

/* Le colonne allineate al centro non devono stirarsi oltre il necessario */
.wp-block-columns.are-vertically-aligned-center > .wp-block-column { align-self: center; }

/* Le immagini dentro le colonne non superano mai la loro altezza naturale utile */
.wp-block-column > .wp-block-image img { max-height: 620px; width: auto; margin-inline: auto; }
.wp-block-column > .wp-block-image { text-align: center; }

/* ═══════════════════════════════════════════════════════════════════════════
   L'HERO PERNO — il sigillo che si avvita mentre scorri
   Tutto in CSS: nessun JavaScript, nessuna libreria.
   ═══════════════════════════════════════════════════════════════════════════ */

/* La scena è alta il triplo dello schermo: è lo spazio in cui "dura" l'animazione */
.yl-scena {
  min-height: 300vh;
  position: relative;
  view-timeline-name: --scena;
  view-timeline-axis: block;
}

/* Il palco resta incollato mentre la scena scorre sotto */
.yl-perno {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* Il sigillo, al centro di tutto */
.yl-sigillo {
  grid-area: 1 / 1;
  width: min(38vw, 420px);
  margin: 0;
  z-index: 2;
}
.yl-sigillo img { display: block; width: 100%; height: auto; }

/* Le caratteristiche in orbita attorno al sigillo */
.yl-orbita { grid-area: 1 / 1; width: min(92vw, 1180px); height: min(92vw, 620px); position: relative; z-index: 3; }
.yl-orbita > * { position: absolute; margin: 0; white-space: nowrap; }

.yl-fatto {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--crema);
}
.yl-fatto::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 1px;
  margin-right: 12px;
  vertical-align: middle;
  background: var(--wp--preset--color--oro);
}

.yl-fatto--1 { top: 14%;  left: 0; }
.yl-fatto--2 { top: 34%;  right: 0; }
.yl-fatto--3 { top: 62%;  left: 0; }
.yl-fatto--4 { top: 82%;  right: 0; }

/* Il claim, sopra al sigillo */
.yl-claim { grid-area: 1 / 1; z-index: 4; text-align: center; margin: 0; pointer-events: none; }

/* ── I movimenti legati allo scorrimento ─────────────────────────────────── */

@supports (animation-timeline: view()) {

  /* il sigillo si avvita */
  .yl-sigillo img {
    animation: yl-avvita linear both;
    animation-timeline: --scena;
    animation-range: contain 0% contain 100%;
  }
  @keyframes yl-avvita {
    from { transform: rotate(0deg) scale(.86); }
    to   { transform: rotate(360deg) scale(1); }
  }

  /* le caratteristiche emergono una alla volta */
  .yl-fatto {
    animation: yl-emerge linear both;
    animation-timeline: --scena;
  }
  .yl-fatto--1 { animation-range: contain 6%  contain 24%; }
  .yl-fatto--2 { animation-range: contain 22% contain 40%; }
  .yl-fatto--3 { animation-range: contain 38% contain 56%; }
  .yl-fatto--4 { animation-range: contain 54% contain 72%; }
  @keyframes yl-emerge {
    0%   { opacity: 0; transform: translateY(18px); }
    40%  { opacity: 1; transform: translateY(0); }
    100% { opacity: 1; transform: translateY(0); }
  }

  /* il claim si ritira per lasciare il centro al sigillo */
  .yl-claim {
    animation: yl-ritira linear both;
    animation-timeline: --scena;
    animation-range: contain 0% contain 30%;
  }
  @keyframes yl-ritira {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(-40px) scale(.94); }
  }
}

/* Dove le animazioni legate allo scorrimento non esistono (Firefox, Safari vecchi):
   la scena si accorcia, il sigillo sta fermo, le caratteristiche si vedono tutte.
   Si perde lo spettacolo, non il contenuto. */
@supports not (animation-timeline: view()) {
  .yl-scena { min-height: 0; }
  .yl-perno { position: static; min-height: 78vh; }
  .yl-claim { position: static; grid-area: auto; margin-bottom: 34px; }
  .yl-perno { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .yl-scena { min-height: 260vh; }
  .yl-sigillo { width: min(58vw, 300px); }
  .yl-orbita { height: auto; position: static; display: grid; gap: 14px; place-items: center; align-content: end; padding-bottom: 8vh; }
  .yl-orbita > * { position: static; }
  .yl-fatto { font-size: 13px; letter-spacing: 0.12em; }
  .yl-fatto::before { width: 18px; margin-right: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .yl-scena { min-height: 0; }
  .yl-perno { position: static; min-height: 78vh; }
  .yl-sigillo img, .yl-fatto, .yl-claim { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ═══ CORREZIONI DOPO LA PRIMA PROVA DAL VIVO ═══════════════════════════════ */

/* 1. L'intestazione non si incollava: `sticky` funziona solo dentro il proprio
      contenitore, e la parte del modello è alta quanto l'intestazione stessa.
      Va resa appiccicata la parte, non il gruppo dentro. */
.yl-header { position: static; }
header.wp-block-template-part {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 95;
}

/* 2. La striscia viola fra intestazione ed hero: margine automatico del main */
main.wp-block-group { margin-block-start: 0; }
main.wp-block-group > *:first-child { margin-block-start: 0; }

/* 3. Il claim stava sopra al sigillo e lo copriva: va in alto, il sigillo resta al centro */
.yl-claim {
  align-self: start;
  padding-top: 11vh;
  max-width: min(92vw, 1000px);
}

/* 4. Il bottone d'acquisto sempre presente nell'intestazione */
.yl-cta-header { margin: 0; }
.yl-cta-header .wp-block-button__link { letter-spacing: 0.08em; }
@media (max-width: 600px) {
  .yl-cta-header { display: none; } /* su mobile c'è già la barra fissa in basso */
}

/* ═══ Le sezioni si toccano ═════════════════════════════════════════════════
   WordPress mette 32px di margine fra un blocco e l'altro. Fra due sezioni a
   tutta larghezza quella striscia lascia vedere il fondo della pagina, e su
   fondi di viola diverso si legge come un separatore. */

main.wp-block-group > *,
main.wp-block-group > div > .alignfull { margin-block: 0 !important; }

/* Il fondo della pagina uguale al viola notte: se una fessura scappa, non si vede */
body { background-color: var(--wp--preset--color--fondo-scuro); }

/* ═══ Yumo sul razzo che attraversa la scena ════════════════════════════════ */

.yl-razzo {
  position: absolute;
  top: 16%;
  left: -22%;
  width: min(20vw, 210px);
  margin: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
}
.yl-razzo img { display: block; width: 100%; height: auto; }

@supports (animation-timeline: view()) {
  .yl-razzo {
    animation: yl-vola linear both;
    animation-timeline: --scena;
    animation-range: contain 30% contain 78%;
  }
  @keyframes yl-vola {
    0%   { opacity: 0; transform: translate3d(0, 40px, 0) rotate(-6deg); }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { opacity: 0; transform: translate3d(150vw, -180px, 0) rotate(-14deg); }
  }
}

/* Senza animazioni legate allo scorrimento il razzo non serve: sparisce */
@supports not (animation-timeline: view()) { .yl-razzo { display: none; } }
@media (prefers-reduced-motion: reduce) { .yl-razzo { display: none; } }
@media (max-width: 700px) { .yl-razzo { width: 34vw; top: 10%; } }

/* Il flacone nella sezione prodotto: grande, isolato nel buio.
   È il "void reveal" di ORYZO — il prodotto solo, senza contesto. */
.yl-prodotto { margin-block: clamp(34px, 5vw, 64px); }
.yl-prodotto img { max-height: 620px; width: auto; }

/* ═══ Compenso le cornici 16:9 ══════════════════════════════════════════════
   I file generati da Artlist sono 2752×1536 con il soggetto al centro e molto
   trasparente attorno: il soggetto occupa circa metà della larghezza. Per farlo
   vedere della misura giusta la cornice va ingrandita del doppio. */

.yl-sigillo { width: min(76vw, 880px); }
.yl-razzo   { width: min(36vw, 430px); }

@media (max-width: 900px) {
  .yl-sigillo { width: min(104vw, 560px); }
  .yl-razzo   { width: 62vw; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REVISIONE 2026-08-20 — cielo continuo, più cartoon, icone, bottone che cola
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Un cielo solo, continuo su tutta la pagina ───────────────────────── */

/* Il fondo diventa una sfumatura verticale: niente più stacchi netti fra sezioni */
body {
  background: linear-gradient(180deg,
    #0B0418 0%, #1A0A2A 22%, #210B31 46%, #1A0A2A 70%, #0B0418 100%) fixed;
}

/* Le sezioni diventano trasparenti: il cielo si vede attraverso tutte */
main .wp-block-group.alignfull.has-background { background-color: transparent !important; }

/* Il cielo stellato: fisso dietro a tutto, non più ripetuto per sezione */
.yl-stelle::before { content: none; }   /* disattivo la versione vecchia */

main::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, #F9E5C1 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 62% 9%,  #F9E5C1 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 38% 64%, #D68617 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 84% 47%, #F9E5C1 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 6% 82%,  #F9E5C1 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 52% 92%, #D68617 50%, transparent 51%);
  background-size: 300px 300px, 230px 230px, 390px 390px, 270px 270px, 350px 350px, 210px 210px;
}
main > * { position: relative; z-index: 1; }

/* ── 2. Le stelle che si accendono a tempi diversi ───────────────────────── */
/* Sei strati sovrapposti, ognuno col suo ritmo: il cielo non pulsa in blocco */

.yl-cielo { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.yl-cielo i {
  position: absolute; inset: 0; display: block;
  background-repeat: repeat;
  animation: yl-scintilla ease-in-out infinite alternate;
}
.yl-cielo i:nth-child(1) { background-image: radial-gradient(1.6px 1.6px at 20% 24%, #F9E5C1 50%, transparent 51%); background-size: 280px 280px; animation-duration: 3.1s; animation-delay: 0s; }
.yl-cielo i:nth-child(2) { background-image: radial-gradient(1.2px 1.2px at 70% 12%, #FFF3DA 50%, transparent 51%); background-size: 340px 340px; animation-duration: 4.3s; animation-delay: .6s; }
.yl-cielo i:nth-child(3) { background-image: radial-gradient(2px 2px   at 44% 68%, #D68617 50%, transparent 51%); background-size: 420px 420px; animation-duration: 5.2s; animation-delay: 1.2s; }
.yl-cielo i:nth-child(4) { background-image: radial-gradient(1.1px 1.1px at 88% 52%, #F9E5C1 50%, transparent 51%); background-size: 250px 250px; animation-duration: 2.6s; animation-delay: .3s; }
.yl-cielo i:nth-child(5) { background-image: radial-gradient(1.5px 1.5px at 8% 78%, #FFF3DA 50%, transparent 51%); background-size: 380px 380px; animation-duration: 6.1s; animation-delay: 1.9s; }
.yl-cielo i:nth-child(6) { background-image: radial-gradient(1.3px 1.3px at 56% 90%, #D68617 50%, transparent 51%); background-size: 300px 300px; animation-duration: 3.7s; animation-delay: 2.4s; }
@keyframes yl-scintilla { from { opacity: .18; } to { opacity: .95; } }

/* ── 3. Yumo sul razzo: dietro ai testi e più in basso ───────────────────── */

.yl-razzo { z-index: 0; top: auto; bottom: 12%; }
@supports (animation-timeline: view()) {
  @keyframes yl-vola {
    0%   { opacity: 0; transform: translate3d(0, 60px, 0) rotate(-4deg); }
    12%  { opacity: 1; }
    50%  { transform: translate3d(75vw, -90px, 0) rotate(-9deg); }
    88%  { opacity: 1; }
    100% { opacity: 0; transform: translate3d(150vw, -60px, 0) rotate(-4deg); }
  }
}
.yl-sigillo { z-index: 2; }
.yl-orbita  { z-index: 3; }
.yl-claim   { z-index: 4; }
@media (max-width: 700px) { .yl-razzo { bottom: 8%; } }

/* ── 4. Più cartoon: i titoli passano a Titan One ────────────────────────── */

h1, h2,
.wp-block-heading.has-display-font-size,
.wp-block-heading.has-titolo-font-size {
  font-family: "Titan One", Archivo, sans-serif;
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.02;
  -webkit-text-stroke: 0;
}

/* L'occhiello si vedeva pochissimo: più grande, più corpo, con la lineetta */
.wp-block-group [style*="letter-spacing:0.2em"],
.wp-block-group [style*="letter-spacing:0.18em"] {
  font-size: clamp(14px, 1.35vw, 18px) !important;
  letter-spacing: 0.14em !important;
  font-family: "Titan One", Archivo, sans-serif;
  font-weight: 400 !important;
}

/* ── 5. Le caratteristiche dell'hero: icona disegnata, non solo lineetta ─── */

.yl-fatto {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: "Titan One", Archivo, sans-serif;
  font-weight: 400;
  font-size: clamp(14px, 1.3vw, 18px);
  letter-spacing: 0.06em;
}
.yl-fatto::before {
  content: "";
  width: 46px; height: 46px;
  flex: 0 0 46px;
  margin: 0;
  background: none;
  border: 1px solid var(--wp--preset--color--viola-chiaro);
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
  animation: yl-icona 5s ease-in-out infinite;
}

/* Le quattro icone, disegnate a mano dentro il CSS: nessun file da caricare */
.yl-fatto--1::before { /* flacone */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F9E5C1' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='8' width='10' height='13' rx='3.2'/%3E%3Cpath d='M10 8V5.4h4V8'/%3E%3Cpath d='M10.6 3h2.8'/%3E%3C/svg%3E");
  animation-delay: 0s;
}
.yl-fatto--2::before { /* goccia sbarrata */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F9E5C1' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.2c2.9 3.9 4.8 6.3 4.8 8.8a4.8 4.8 0 0 1-9.6 0c0-2.5 1.9-4.9 4.8-8.8z'/%3E%3Cpath d='M4.5 19.5L19.5 4.5'/%3E%3C/svg%3E");
  animation-delay: .8s;
}
.yl-fatto--3::before { /* spruzzo */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F9E5C1' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='10' width='8' height='11' rx='2.6'/%3E%3Cpath d='M9.6 10V6.6h3V10'/%3E%3Ccircle cx='18.6' cy='5.4' r='.95' fill='%23D68617' stroke='none'/%3E%3Ccircle cx='21.3' cy='8.6' r='.75' fill='%23D68617' stroke='none'/%3E%3Ccircle cx='17.9' cy='9.8' r='.65' fill='%23D68617' stroke='none'/%3E%3C/svg%3E");
  animation-delay: 1.6s;
}
.yl-fatto--4::before { /* medaglia */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F9E5C1' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9.4' r='5.6'/%3E%3Cpath d='M8.9 14.4L7.9 21.4l4.1-2.1 4.1 2.1-1-7'/%3E%3C/svg%3E");
  animation-delay: 2.4s;
}
@keyframes yl-icona {
  0%, 78%, 100% { transform: rotate(0) scale(1); border-color: var(--wp--preset--color--viola-chiaro); }
  86%           { transform: rotate(-9deg) scale(1.12); border-color: var(--wp--preset--color--oro); }
  92%           { transform: rotate(6deg) scale(1.06); }
}

@media (max-width: 900px) {
  .yl-fatto { gap: 11px; }
  .yl-fatto::before { width: 36px; height: 36px; flex-basis: 36px; background-size: 19px 19px; }
}

/* ── 6. Il bottone: grande, cartoon, col caramello che cola ──────────────── */

main .wp-block-button__link {
  position: relative;
  font-family: "Titan One", Archivo, sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 1.5vw, 20px);
  letter-spacing: 0.04em;
  padding: 22px 48px;
  border-radius: 44px;
  border: 3px solid #2E1508;
  box-shadow: 0 5px 0 0 #2E1508;
  transition: transform .16s ease, box-shadow .16s ease, background-color .2s ease;
  overflow: visible;
  animation: yl-bottone-respira 4.6s ease-in-out infinite;
}

/* Le colate: tre gocce che scendono dal bordo inferiore */
main .wp-block-button__link::before,
main .wp-block-button__link::after {
  content: "";
  position: absolute;
  top: calc(100% - 4px);
  background: var(--wp--preset--color--oro);
  border: 3px solid #2E1508;
  border-top: 0;
  border-radius: 0 0 60% 60% / 0 0 70% 70%;
  pointer-events: none;
}
main .wp-block-button__link::before {
  left: 22%;
  width: 20px; height: 16px;
  animation: yl-goccia 3.8s ease-in-out infinite;
}
main .wp-block-button__link::after {
  right: 27%;
  width: 14px; height: 11px;
  animation: yl-goccia 4.9s ease-in-out infinite .9s;
}

@keyframes yl-goccia {
  0%, 62%, 100% { transform: scaleY(1); }
  78%           { transform: scaleY(1.85); }
  90%           { transform: scaleY(1.2); }
}
@keyframes yl-bottone-respira {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

main .wp-block-button__link:hover {
  background-color: #E89A2B;
  transform: translateY(3px);
  box-shadow: 0 2px 0 0 #2E1508;
  animation-play-state: paused;
}
main .wp-block-button__link:active {
  transform: translateY(5px);
  box-shadow: 0 0 0 0 #2E1508;
}

/* Il bottone dell'intestazione resta piccolo e sobrio: è chrome, non contenuto */
.yl-cta-header .wp-block-button__link {
  font-family: Archivo, sans-serif;
  font-size: 12px !important;
  padding: 11px 22px !important;
  border-width: 2px;
  box-shadow: 0 3px 0 0 #2E1508;
  animation: none;
}
.yl-cta-header .wp-block-button__link::before,
.yl-cta-header .wp-block-button__link::after { content: none; }

/* Anche la barra fissa su mobile resta sobria */
.yl-acquista-fisso .wp-block-button__link::before,
.yl-acquista-fisso .wp-block-button__link::after { content: none; }
.yl-acquista-fisso .wp-block-button__link { animation: none; }

@media (prefers-reduced-motion: reduce) {
  main .wp-block-button__link,
  main .wp-block-button__link::before,
  main .wp-block-button__link::after,
  .yl-fatto::before,
  .yl-cielo i { animation: none !important; }
}

/* ═══ REVISIONE 2 — gerarchia, icone piene, bottone, testi animati ═════════ */

/* ── Gerarchia: i titoli delle card erano identici al testo sotto ────────── */

main h3, main .wp-block-heading.has-corpo-font-size {
  font-family: "Titan One", Archivo, sans-serif;
  font-weight: 400;
  font-size: clamp(22px, 2.1vw, 32px) !important;
  line-height: 1.06;
  margin-bottom: 10px;
  color: var(--wp--preset--color--crema);
}

/* Il testo dentro le colonne è secondario: va più piccolo del corpo principale */
main .wp-block-column p:not(.has-piccolo-font-size):not(.has-grande-font-size) {
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.5;
  color: #E8D6B8;
}

/* Le descrizioni lunghe: più respiro fra le righe, colore leggermente attenuato */
main > .wp-block-group > p.has-grande-font-size {
  line-height: 1.38;
  max-width: 22ch;
}
main .wp-block-column p.has-grande-font-size { max-width: none; }

/* ── Icone piene invece che di contorno ──────────────────────────────────── */

.yl-fatto::before {
  background-color: rgba(214,134,23,.10);
  border-color: var(--wp--preset--color--oro);
  background-size: 26px 26px;
}
.yl-fatto--1::before { /* flacone pieno */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F9E5C1' d='M10.2 2.6h3.6a.9.9 0 0 1 0 1.8h-.3v1.9h.4a4 4 0 0 1 4 4v8.9a2.6 2.6 0 0 1-2.6 2.6H8.7a2.6 2.6 0 0 1-2.6-2.6v-8.9a4 4 0 0 1 4-4h.4V4.4h-.3a.9.9 0 0 1 0-1.8z'/%3E%3Crect x='8.4' y='12.4' width='7.2' height='4.6' rx='1.1' fill='%23D68617'/%3E%3C/svg%3E");
}
.yl-fatto--2::before { /* goccia piena sbarrata */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F9E5C1' d='M12 3.4c3.2 4.2 5.3 6.9 5.3 9.6a5.3 5.3 0 0 1-10.6 0c0-2.7 2.1-5.4 5.3-9.6z'/%3E%3Cpath stroke='%23D68617' stroke-width='2.4' stroke-linecap='round' d='M4.6 19.8L19.6 4.4'/%3E%3C/svg%3E");
}
.yl-fatto--3::before { /* spruzzino pieno */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6.6' y='9.4' width='8.4' height='11.8' rx='2.7' fill='%23F9E5C1'/%3E%3Cpath fill='%23F9E5C1' d='M9.3 5.9h3.2v3.5H9.3z'/%3E%3Ccircle cx='18.7' cy='5.2' r='1.5' fill='%23D68617'/%3E%3Ccircle cx='21.4' cy='8.7' r='1.1' fill='%23D68617'/%3E%3Ccircle cx='18' cy='10' r='.9' fill='%23D68617'/%3E%3C/svg%3E");
}
.yl-fatto--4::before { /* medaglia piena */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23D68617' d='M8.6 13.6l-1 8 4.4-2.3 4.4 2.3-1-8z'/%3E%3Ccircle cx='12' cy='9.2' r='6.1' fill='%23F9E5C1'/%3E%3Ccircle cx='12' cy='9.2' r='3.4' fill='%23D68617'/%3E%3C/svg%3E");
}

/* ── I testi laterali: entrano dal loro lato e respirano ─────────────────── */

@supports (animation-timeline: view()) {
  .yl-fatto--1, .yl-fatto--3 { --da: -60px; }
  .yl-fatto--2, .yl-fatto--4 { --da:  60px; }
  @keyframes yl-emerge {
    0%   { opacity: 0; transform: translate3d(var(--da, 0), 22px, 0) scale(.9); }
    45%  { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  }
}
.yl-fatto { animation-fill-mode: both; }
.yl-fatto span, .yl-fatto { will-change: transform, opacity; }

/* ── Bottone: più pieno, e al passaggio cambia solo il testo ─────────────── */

main .wp-block-button__link {
  padding: 26px 58px;
  font-size: clamp(17px, 1.6vw, 22px);
  box-shadow: 0 6px 0 0 #2E1508;
}
main .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--oro);  /* il colore non cambia più */
  color: #3A1B06;                                    /* cambia solo il testo */
  transform: translateY(2px);
  box-shadow: 0 4px 0 0 #2E1508;
}
main .wp-block-button__link::before { width: 24px; height: 19px; }
main .wp-block-button__link::after  { width: 17px; height: 13px; }

/* ═══ La boccetta che gira su se stessa ════════════════════════════════════
   Prende il posto del tappo. Non è una rotazione piatta: è una sequenza di
   fotogrammi ricavata da un video, fatta scorrere con `steps()` legato allo
   scorrimento. Rotazione vera in 3D, senza JavaScript e senza video da
   riprodurre.
   Il foglio di sprite è una striscia orizzontale di 36 fotogrammi.
   ═══════════════════════════════════════════════════════════════════════════ */

.yl-boccetta {
  grid-area: 1 / 1;
  z-index: 2;
  width: min(34vw, 380px);
  aspect-ratio: 2 / 3;
  margin: 0;
  background-image: var(--yl-sprite);
  background-repeat: no-repeat;
  background-size: 3600% 100%;   /* 36 fotogrammi */
  background-position: 0% 0;
}

@supports (animation-timeline: view()) {
  .yl-boccetta {
    animation: yl-gira steps(36) both;
    animation-timeline: --scena;
    animation-range: contain 0% contain 88%;
  }
  @keyframes yl-gira { to { background-position: 100% 0; } }
}

/* La nebbiolina alla fine del giro: esce dall'ugello e si allarga */
.yl-nebbia {
  grid-area: 1 / 1;
  z-index: 1;
  width: min(70vw, 760px);
  margin: 0;
  opacity: 0;
  transform-origin: 24% 30%;
  pointer-events: none;
}
.yl-nebbia img { display: block; width: 100%; height: auto; }

@supports (animation-timeline: view()) {
  .yl-nebbia {
    animation: yl-spruzza ease-out both;
    animation-timeline: --scena;
    animation-range: contain 78% contain 100%;
  }
  @keyframes yl-spruzza {
    0%   { opacity: 0; transform: scale(.35) translate(-6%, 4%); }
    55%  { opacity: .95; }
    100% { opacity: .8; transform: scale(1) translate(0, 0); }
  }
}
@supports not (animation-timeline: view()) { .yl-nebbia { display: none; } }
@media (prefers-reduced-motion: reduce) { .yl-nebbia { display: none; } }

@media (max-width: 900px) {
  .yl-boccetta { width: min(56vw, 300px); }
  .yl-nebbia { width: 96vw; }
}

/* ═══ La boccetta e la nebbia arrivano col tema ════════════════════════════
   Non serve caricarle nella libreria media: stanno in assets/ dentro il tema,
   così il percorso è sempre giusto e non si possono scollegare. */

.yl-boccetta {
  background-image: url("assets/boccetta-01.webp");
  width: min(30vw, 330px);
  aspect-ratio: 300 / 450;
}

/* Il tappo non serve più: lo sostituisce la boccetta */
.yl-sigillo { display: none; }

/* La nebbia esce dall'ugello e si allarga verso destra */
.yl-nebbia {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
  width: min(78vw, 900px);
  aspect-ratio: 2297 / 1245;
  transform-origin: 2% 50%;
  margin-left: min(46vw, 520px);
  margin-bottom: min(26vw, 250px);
}

@supports (animation-timeline: view()) {
  @keyframes yl-spruzza {
    0%   { opacity: 0; transform: scale(.12); }
    40%  { opacity: .9; }
    100% { opacity: .85; transform: scale(1); }
  }
}

@media (max-width: 900px) {
  .yl-boccetta { width: min(50vw, 260px); }
  .yl-nebbia { width: 92vw; margin-left: 34vw; margin-bottom: 40vw; }
}

/* ═══ CORREZIONI ALLA SCENA DELLA BOCCETTA ═════════════════════════════════ */

/* 1. Si vedevano due boccette insieme.
      Con 36 fotogrammi e la posizione che va da 0% a 100%, i passi devono
      essere 35, non 36: 0% e 100% sono il primo e l'ultimo fotogramma, e in
      mezzo ce ne stanno 34. Con steps(36) la finestra si fermava a metà fra
      un fotogramma e l'altro. */
@supports (animation-timeline: view()) {
  .yl-boccetta {
    animation: yl-gira steps(35) both;
    animation-timeline: --scena;
    animation-range: contain 0% contain 88%;
  }
}

/* 2. La nebbia partiva staccata e in alto invece che dall'ugello.
      Adesso è ancorata alla punta dello spruzzino e cresce da lì. */

.yl-perno { --bw: min(30vw, 330px); }   /* lo sticky sta sopra, non si tocca */
.yl-boccetta { width: var(--bw); }

.yl-nebbia {
  position: absolute;
  grid-area: auto;
  left: calc(50% + var(--bw) * 0.10);
  top:  calc(50% - var(--bw) * 0.62);
  width: min(64vw, 760px);
  margin: 0;
  transform-origin: 0% 50%;
}

@media (max-width: 900px) {
  .yl-perno { --bw: min(50vw, 260px); }
  .yl-nebbia { width: 74vw; }
}

/* Il ritaglio nuovo è 300×474 e ogni fotogramma è centrato sul corpo del flacone */
.yl-boccetta { aspect-ratio: 300 / 474; }

/* ═══ Ritaglio nuovo (300×500) e nebbia ancorata all'ugello ════════════════
   Il flacone è alto 1,667 volte la sua larghezza. L'ugello sta al 7% dall'alto,
   quindi rispetto al centro è a -0,72 volte la larghezza: prima usavo -0,62 e
   la nebbia partiva da metà bottiglia. */

.yl-boccetta { aspect-ratio: 300 / 500; }

.yl-nebbia {
  left: calc(50% + var(--bw) * 0.13);
  top:  calc(50% - var(--bw) * 0.72);
}

@media (max-width: 900px) {
  .yl-nebbia { left: calc(50% + var(--bw) * 0.10); top: calc(50% - var(--bw) * 0.74); }
}

/* ── Bottone caramello: al passaggio il testo diventa bianco e cresce ─────
   Il fondo resta d'oro, come deciso. Cambia solo il testo: bianco pieno e
   un filo più grande, così il bottone "scatta" senza cambiare colore.
   La crescita è del 6%: il riquadro si allarga di pochi pixel, quel tanto
   che basta a farlo sembrare cartoon senza spostare quello che ha intorno. */

main .wp-block-button__link {
  transition: transform .16s ease, box-shadow .16s ease,
              color .18s ease, font-size .18s ease;
}
main .wp-block-button__link:hover,
main .wp-block-button__link:focus-visible {
  color: #FFFFFF;
  font-size: clamp(18px, 1.7vw, 23.5px);
  text-shadow: 0 2px 0 #2E1508;
}

/* ═══ Boccetta nuova: girata su fondo verde ════════════════════════════════
   Il video precedente era su fondo chiaro sfumato. Per toglierlo serviva una
   soglia larga, che però trafilava dentro le zone bianche dell'etichetta e se
   le mangiava. Col verde il fondo si riconosce per TINTA — più verde che rosso
   e che blu — e non c'è nessun colore dell'etichetta che ci assomigli: il
   ritaglio diventa esatto invece che stimato. Misurato: 5 pixel di alone su
   tutto il bordo, contro le migliaia di prima.

   La striscia è a risoluzione nativa: 300×880 per fotogramma, quanto la
   boccetta è davvero grande dentro il video. Prima la rendevamo a 300×500
   partendo da 178 px reali, cioè la ingrandivamo: da lì la sfocatura.

   E la misura ora si prende dall'ALTEZZA della finestra, non dalla larghezza.
   La boccetta è alta e stretta: legata alla larghezza restava sempre piccola,
   legata all'altezza riempie lo schermo come si deve. */

.yl-perno {
  --bh: min(78vh, 900px);
  --bw: calc(var(--bh) * 300 / 880);
}
.yl-boccetta {
  width: var(--bw);
  height: var(--bh);
  aspect-ratio: auto;
}

/* L'ugello è in cima al flacone, a 5,7% dall'alto del fotogramma: la nebbia
   parte da lì e si allarga verso destra. */
.yl-nebbia {
  margin: 0;
  left: calc(50% + var(--bw) * 0.05);
  top:  calc(50% - var(--bh) * 0.443);
  width: min(68vw, 800px);
}

@media (max-width: 900px) {
  .yl-perno { --bh: min(62vh, 620px); }
  .yl-nebbia { width: 78vw; }
}

/* ═══ La boccetta: una posa sola, dal foglio di rotazioni ══════════════════
   Il foglio generato dà nove pose su circa 300°, cioè 33 gradi a passo.
   Per una rotazione fluida ne servirebbero una trentina: con nove lo
   scorrimento salta invece di girare. Ma una di quelle nove — la frontale —
   è ottima, e risolve i tre difetti veri: 434 px di larghezza reale contro i
   226 del video, scontorno con la frangia sottratta invece che tagliata,
   nessun pezzo mangiato.

   Quindi: una posa sola, nitida, che sale e cresce piano mentre si scorre.
   Il movimento non è più la rotazione, è l'avvicinarsi. */

.yl-perno {
  --bh: min(80vh, 980px);
  --bw: calc(var(--bh) * 434 / 1655);
}
.yl-boccetta {
  background-image: url("assets/boccetta-01.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  width: var(--bw);
  height: var(--bh);
  aspect-ratio: auto;
}

@supports (animation-timeline: view()) {
  .yl-boccetta {
    animation: yl-avvicina linear both;
    animation-timeline: --scena;
    animation-range: contain 0% contain 100%;
  }
  @keyframes yl-avvicina {
    0%   { transform: translateY(2.5vh) scale(.93) rotate(-1.4deg); }
    55%  { transform: translateY(0)     scale(1)   rotate(0deg); }
    100% { transform: translateY(-2vh)  scale(1.05) rotate(1.4deg); }
  }
}

/* L'ugello è in cima: la nebbia parte da lì */
.yl-nebbia {
  margin: 0;
  left: calc(50% + var(--bw) * 0.06);
  top:  calc(50% - var(--bh) * 0.45);
  width: min(68vw, 800px);
}

@media (max-width: 900px) {
  .yl-perno { --bh: min(64vh, 640px); }
  .yl-nebbia { width: 78vw; }
}

/* ═══ La boccetta gira davvero, da una foto sola ═══════════════════════════
   Il flacone è un solido di rotazione: se lo giri, la SAGOMA non cambia mai.
   Cambia solo dove finisce ogni punto dell'etichetta, e quello si calcola.

   Per una riga qualsiasi, larga 2R e centrata in cx, il punto che sullo schermo
   sta in x si trova sulla superficie all'angolo  asin((x-cx)/R). Girando di t,
   quel punto prende il colore che stava in  cx + R*sin(asin((x-cx)/R) + t).
   R e cx si misurano riga per riga dalla trasparenza, così la formula vale da
   sola anche sul collo e sullo spruzzino, che sono più stretti del corpo.

   Non serve altro materiale: 12 fotogrammi da −20° a +20°, ricavati dall'unica
   posa frontale del foglio. Solo l'1,27% dei pixel — la striscia più esterna
   del bordo — non esiste nella foto e viene riempita col pixel adiacente.

   12 fotogrammi -> steps(11): 0% e 100% sono il primo e l'ultimo. */

.yl-perno {
  --bh: min(72vh, 880px);
  --bw: calc(var(--bh) * 300 / 1144);
}
.yl-boccetta {
  background-image: url("assets/boccetta-01.webp");
  background-size: 1200% 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
  width: var(--bw);
  height: var(--bh);
  aspect-ratio: auto;
}

@supports (animation-timeline: view()) {
  .yl-boccetta {
    animation: yl-gira2 steps(11) both, yl-avvicina linear both;
    animation-timeline: --scena, --scena;
    animation-range: contain 0% contain 88%, contain 0% contain 100%;
  }
  @keyframes yl-gira2 { to { background-position: 100% 0; } }
}

@media (max-width: 900px) {
  .yl-perno { --bh: min(60vh, 600px); }
  .yl-nebbia { width: 78vw; }
}

/* ═══ Ritocchi finali ══════════════════════════════════════════════════════ */

/* ── L'intestazione torna com'era, ma si toglie di mezzo ───────────────────
   Piena e leggibile in cima, poi scivola via appena scendi. Torna da sola se
   risali: senza quello, chi arriva a metà pagina resta senza menù. */

.yl-header {
  transition: transform .32s ease, opacity .32s ease;
  will-change: transform;
}
.yl-header--via {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

/* ── Lo spruzzo: esce dall'ugello e va a sinistra ──────────────────────────
   Prima partiva dalla spalla del flacone, storto, e andava a destra. Ora è
   ancorato alla punta dello spruzzino — il 3,4% dall'alto — e l'immagine è
   specchiata, così si allarga verso sinistra. Tolto lo spostamento obliquo
   che lo faceva partire di sbieco: cresce dritto dal beccuccio. */

.yl-nebbia {
  background-position: right center;
  left: auto;
  right: calc(50% - var(--bw) * 0.02);
  top:  calc(50% - var(--bh) * 0.466);
  transform-origin: 100% 50%;
  --nw: min(64vw, 760px);
  width: var(--nw);
  /* il punto da cui esce lo spruzzo sta a meta' altezza dell'immagine:
     alzo l'elemento di meta' della sua altezza, cosi' il beccuccio ci cade
     sopra invece che sul suo bordo superiore */
  margin: calc(var(--nw) / -3.69) 0 0 0;
}

@supports (animation-timeline: view()) {
  @keyframes yl-spruzza {
    0%   { opacity: 0;   transform: scale(.28); }
    55%  { opacity: .95; }
    100% { opacity: .85; transform: scale(1); }
  }
}

/* ── Le scritte in orbita: più grandi, e le icone molto di più ─────────────
   Da 18 a 26 px il testo, da 46 a 74 px il cerchio dell'icona, e il disegno
   dentro da 24 a 40. Le icone crescono più del testo perché si leggono da
   lontano: sono loro a dire cosa fa il prodotto, prima ancora delle parole. */

.yl-fatto {
  font-size: clamp(17px, 1.75vw, 26px);
  gap: 20px;
}
.yl-fatto::before {
  width: 74px;
  height: 74px;
  flex: 0 0 74px;
  background-size: 40px 40px;
  border-width: 2px;
}

@media (max-width: 900px) {
  .yl-fatto { font-size: 15px; gap: 13px; }
  .yl-fatto::before { width: 52px; height: 52px; flex-basis: 52px; background-size: 28px 28px; }
  .yl-nebbia { width: 86vw; }
}

/* ═══ Telefono: l'hero rifatto ═════════════════════════════════════════════
   Prima le quattro scritte si accodavano in colonna in fondo, tutte insieme.
   Ora stanno agli angoli come sul desktop ed escono da dietro la boccetta:
   partono piccole al centro, dietro al vetro, e scivolano fuori ai lati.
   Per stare nello stretto, l'icona va sopra e il testo sotto, su più righe. */

.yl-boccetta { grid-area: 1 / 1; z-index: 2; }
.yl-orbita   { z-index: 1; }   /* sotto la boccetta: è da lì che devono uscire */

@media (max-width: 900px) {

  /* la boccetta riempie di più, così si stringono i vuoti sopra e sotto */
  .yl-perno { --bh: min(70vh, 660px); padding-bottom: 5vh; }

  /* l'orbita torna a essere una tela sovrapposta, come sul desktop */
  .yl-orbita {
    grid-area: 1 / 1;
    position: relative;
    display: block;
    width: 100%;
    height: 74vh;
    padding: 0;
    place-items: initial;
    align-content: initial;
    gap: 0;
  }
  .yl-orbita > * { position: absolute; white-space: normal; }

  /* icona sopra, testo sotto: nello stretto è l'unico modo per leggerlo */
  .yl-fatto {
    flex-direction: column;
    gap: 8px;
    max-width: 33vw;
    text-align: center;
    line-height: 1.25;
    font-size: 14px;
    letter-spacing: 0.08em;
  }
  .yl-fatto::before { width: 56px; height: 56px; flex-basis: 56px; background-size: 30px 30px; margin: 0; }

  .yl-fatto--1 { top: 2%;  left: 0;  right: auto; }
  .yl-fatto--2 { top: 26%; right: 0; left: auto; }
  .yl-fatto--3 { top: 52%; left: 0;  right: auto; }
  .yl-fatto--4 { top: 76%; right: 0; left: auto; }

  /* da quale parte devono scivolare fuori */
  .yl-fatto--1, .yl-fatto--3 { --da:  30vw; }
  .yl-fatto--2, .yl-fatto--4 { --da: -30vw; }

  /* il vuoto fra la boccetta e il bottone SCOPRI CARAMEL */
  .yl-scena + .wp-block-group { padding-top: 16px !important; }
}

@supports (animation-timeline: view()) {
  @media (max-width: 900px) {
    .yl-fatto { animation-name: yl-esce-da-dietro; }
    @keyframes yl-esce-da-dietro {
      0%   { opacity: 0; transform: translateX(var(--da)) scale(.5); }
      55%  { opacity: 1; }
      100% { opacity: 1; transform: translateX(0) scale(1); }
    }
  }
}

/* Yumo sul razzo stava troppo in basso: sul telefono lo alzo di un quarto */
@media (max-width: 700px) {
  .yl-razzo { bottom: 30%; width: 40vw; }
}

/* ═══ Lo spruzzo: uno scoppio di gocce di caramello ════════════════════════
   Lo spruzzo direzionale andava ancorato alla punta dell'ugello, e la punta
   cade in un posto diverso a ogni misura di schermo: era una rincorsa persa.
   Adesso esce da DIETRO la boccetta, tutt'intorno, e il centro della boccetta
   e' sempre il centro del palco. Nessun ancoraggio da azzeccare.

   Nessuna immagine: sono 34 gocce fatte con elenchi di box-shadow, cioe' la
   stessa goccia ripetuta a distanze e misure diverse. Restano nitide a
   qualsiasi ingrandimento e pesano zero.

   Il contorno nero: le ombre non hanno un bordo, quindi il nero e' un TERZO
   strato con le stesse posizioni ma allargate di 4 px, dipinto sotto. Stesso
   trucco del caramello che cola dai bottoni. */

.yl-nebbia {
  --goccia: #D68617;
  --goccia-luce: #F0B75A;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  right: auto;
  aspect-ratio: auto;
  border-radius: 50%;
  background: #1B0A08;
  z-index: 1;
  pointer-events: none;
  transform-origin: 50% 50%;
  box-shadow:
    192px 7px 0 4px #1B0A08,
    273px 100px 0 4px #1B0A08,
    315px 156px 0 -4px #1B0A08,
    115px 95px 0 -2px #1B0A08,
    67px 81px 0 2px #1B0A08,
    97px 64px 0 6px #1B0A08,
    84px 263px 0 8px #1B0A08,
    135px 200px 0 3px #1B0A08,
    87px 283px 0 -4px #1B0A08,
    -36px 114px 0 -5px #1B0A08,
    -120px 237px 0 10px #1B0A08,
    -202px 226px 0 8px #1B0A08,
    -82px 149px 0 -2px #1B0A08,
    -171px 106px 0 0px #1B0A08,
    -180px 62px 0 10px #1B0A08,
    -154px 44px 0 3px #1B0A08,
    -223px 27px 0 0px #1B0A08,
    -275px -38px 0 1px #1B0A08,
    -263px -64px 0 2px #1B0A08,
    -160px -55px 0 -4px #1B0A08,
    -212px -116px 0 3px #1B0A08,
    -190px -112px 0 -4px #1B0A08,
    -80px -114px 0 -3px #1B0A08,
    -79px -215px 0 5px #1B0A08,
    -11px -141px 0 3px #1B0A08,
    -42px -228px 0 7px #1B0A08,
    -7px -128px 0 5px #1B0A08,
    5px -150px 0 8px #1B0A08,
    129px -153px 0 1px #1B0A08,
    108px -114px 0 0px #1B0A08,
    158px -80px 0 5px #1B0A08,
    256px -201px 0 7px #1B0A08,
    144px -48px 0 9px #1B0A08,
    162px -39px 0 3px #1B0A08;
}
.yl-nebbia::before,
.yl-nebbia::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.yl-nebbia::before {
  background: var(--goccia);
  box-shadow:
    192px 7px 0 0px var(--goccia),
    273px 100px 0 0px var(--goccia),
    315px 156px 0 -8px var(--goccia),
    115px 95px 0 -6px var(--goccia),
    67px 81px 0 -2px var(--goccia),
    97px 64px 0 2px var(--goccia),
    84px 263px 0 4px var(--goccia),
    135px 200px 0 -1px var(--goccia),
    87px 283px 0 -8px var(--goccia),
    -36px 114px 0 -9px var(--goccia),
    -120px 237px 0 6px var(--goccia),
    -202px 226px 0 4px var(--goccia),
    -82px 149px 0 -6px var(--goccia),
    -171px 106px 0 -4px var(--goccia),
    -180px 62px 0 6px var(--goccia),
    -154px 44px 0 -1px var(--goccia),
    -223px 27px 0 -4px var(--goccia),
    -275px -38px 0 -3px var(--goccia),
    -263px -64px 0 -2px var(--goccia),
    -160px -55px 0 -8px var(--goccia),
    -212px -116px 0 -1px var(--goccia),
    -190px -112px 0 -8px var(--goccia),
    -80px -114px 0 -7px var(--goccia),
    -79px -215px 0 1px var(--goccia),
    -11px -141px 0 -1px var(--goccia),
    -42px -228px 0 3px var(--goccia),
    -7px -128px 0 1px var(--goccia),
    5px -150px 0 4px var(--goccia),
    129px -153px 0 -3px var(--goccia),
    108px -114px 0 -4px var(--goccia),
    158px -80px 0 1px var(--goccia),
    256px -201px 0 3px var(--goccia),
    144px -48px 0 5px var(--goccia),
    162px -39px 0 -1px var(--goccia);
}
/* il riflesso: piu' piccolo e spostato in alto a sinistra, come su una goccia vera */
.yl-nebbia::after {
  background: var(--goccia-luce);
  box-shadow:
    188px 2px 0 -7px var(--goccia-luce),
    311px 151px 0 -15px var(--goccia-luce),
    63px 76px 0 -9px var(--goccia-luce),
    80px 258px 0 -3px var(--goccia-luce),
    83px 278px 0 -15px var(--goccia-luce),
    -124px 232px 0 -1px var(--goccia-luce),
    -86px 144px 0 -13px var(--goccia-luce),
    -184px 57px 0 -1px var(--goccia-luce),
    -227px 22px 0 -11px var(--goccia-luce),
    -267px -69px 0 -9px var(--goccia-luce),
    -216px -121px 0 -8px var(--goccia-luce),
    -84px -119px 0 -14px var(--goccia-luce),
    -15px -146px 0 -8px var(--goccia-luce),
    -11px -133px 0 -6px var(--goccia-luce),
    125px -158px 0 -10px var(--goccia-luce),
    154px -85px 0 -6px var(--goccia-luce),
    140px -53px 0 -2px var(--goccia-luce);
}

@supports (animation-timeline: view()) {
  .yl-nebbia {
    animation: yl-scoppio ease-out both;
    animation-timeline: --scena;
    animation-range: contain 72% contain 100%;
  }
  @keyframes yl-scoppio {
    0%   { opacity: 0; transform: scale(.05); }
    30%  { opacity: 1; }
    100% { opacity: .95; transform: scale(1.3); }
  }
}

/* sulle finestre piccole lo scoppio si stringe, sennò esce dai lati */
@media (max-width: 900px) { .yl-nebbia { scale: .60; } }
@media (max-width: 600px) { .yl-nebbia { scale: .44; } }

/* ═══ La seconda intestazione ══════════════════════════════════════════════
   Quella piena scivola via oltre i 130 px e al suo posto arriva questa barra:
   trasparente, il tappo a sinistra, carrello e menù a destra. I due tasti
   hanno un velo scuro sfocato dietro, così restano leggibili sopra qualsiasi
   sezione, anche sulle immagini chiare. */

.yl-barra {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px clamp(16px, 3vw, 34px);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-14px);
  transition: opacity .28s ease, transform .28s ease, visibility .28s;
}
.yl-barra--fuori {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.yl-barra__tappo { display: block; line-height: 0; }
.yl-barra__tappo img {
  display: block;
  width: clamp(40px, 4vw, 52px);
  height: auto;
  transition: transform .25s ease;
}
.yl-barra__tappo:hover img { transform: rotate(-14deg) scale(1.06); }

.yl-barra__destra { display: flex; align-items: center; gap: 10px; }

.yl-barra__tasto {
  position: relative;
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--wp--preset--color--viola-chiaro);
  background: #170826;
  color: var(--wp--preset--color--crema);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.yl-barra__tasto:hover,
.yl-barra__tasto:focus-visible {
  background: rgba(214, 134, 23, .24);
  border-color: var(--wp--preset--color--oro);
  color: #FFFFFF;
}
.yl-barra__conto {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--wp--preset--color--oro);
  color: var(--wp--preset--color--fondo-scuro);
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

/* col movimento ridotto niente scivolate: appare e basta */
@media (prefers-reduced-motion: reduce) {
  .yl-barra { transition: none; transform: none; }
}

/* ═══ Correzioni dopo la prova dal vivo ════════════════════════════════════ */

/* 1. I tasti della barra non si cliccavano.
      Misurato col puntatore: nel punto del tasto rispondeva
      `wp-block-template-part <HEADER>`. Nascondere il gruppo interno non
      bastava — il <header> che lo contiene restava appiccicato in cima, alto
      109 px e con lo STESSO z-index della barra. A parità di z-index vince chi
      viene dopo nel documento, e l'header viene dopo. Invisibile, ma davanti.
      Ora sparisce tutto il contenitore, e la barra sta comunque più in alto. */

.yl-testa { transition: transform .32s ease, opacity .32s ease, visibility .32s; }
.yl-testa.yl-header--via,
.yl-header.yl-header--via {
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.yl-barra { z-index: 9990; }   /* sopra l'intestazione, sotto la barra di WordPress */

/* con la barra di amministrazione in cima, la barra scende sotto di lei */
body.admin-bar .yl-barra { top: 32px; }
@media (max-width: 782px) { body.admin-bar .yl-barra { top: 46px; } }

/* 2. Sul telefono il menù va in fondo, non in cima: il pollice arriva lì.
      E i tasti crescono, perché a 46 px si sbaglia mira. */

@media (max-width: 900px) {
  .yl-barra,
  body.admin-bar .yl-barra {
    top: auto;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    padding: 0 16px;
    transform: translateY(16px);
  }
  .yl-barra--fuori,
  body.admin-bar .yl-barra--fuori { transform: translateY(0); }
  .yl-barra__tasto { width: 58px; height: 58px; }
  .yl-barra__tasto svg { width: 26px; height: 26px; }
  .yl-barra__tappo img { width: 54px; }
  .yl-barra__destra { gap: 12px; }
}

/* 3. Le icone davanti alla boccetta, non dietro. */

.yl-orbita { z-index: 3; }

/* 4. Telefono: le scritte erano troppo ai lati e la prima finiva sotto
      l'intestazione. Le porto verso il centro — adesso che stanno davanti alla
      boccetta possono anche sovrapporsi — e le faccio partire più in basso. */

@media (max-width: 900px) {
  .yl-fatto { max-width: 40vw; font-size: 15px; }
  .yl-fatto::before { width: 66px; height: 66px; flex-basis: 66px; background-size: 36px 36px; }

  .yl-fatto--1 { top: 8%;  left: 8%;  right: auto; }
  .yl-fatto--2 { top: 30%; right: 8%; left: auto; }
  .yl-fatto--3 { top: 54%; left: 8%;  right: auto; }
  .yl-fatto--4 { top: 78%; right: 8%; left: auto; }

  .yl-fatto--1, .yl-fatto--3 { --da:  22vw; }
  .yl-fatto--2, .yl-fatto--4 { --da: -22vw; }
}

/* 5. Il logo ora è il sigillo COL NOME intorno: un filo più grande, sennò
      "YUMMY LINE" curvo sul bordo non si legge. */
.yl-barra__tappo img { width: clamp(48px, 4.6vw, 62px); }

/* 6. Sul telefono il menù finiva DENTRO la barra fissa ACQUISTA.
      Quella è alta 88 px (`body { padding-bottom: 88px }`), è attaccata in
      fondo e ha lo sfondo scuro pieno: le pastiglie ci cadevano sopra, scuro
      su scuro. Non spariva, si mimetizzava. Ora sta sopra di lei, e i tasti
      hanno il contorno nero come tutto il resto, così si staccano da qualsiasi
      fondo. */

@media (max-width: 781px) {
  .yl-barra,
  body.admin-bar .yl-barra { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

.yl-barra__tasto {
  background: rgba(14, 5, 29, .82);
  border: 2px solid #1B0A08;
  box-shadow: 0 3px 0 0 rgba(27, 10, 8, .55);
}
.yl-barra__tasto:hover,
.yl-barra__tasto:focus-visible {
  background: var(--wp--preset--color--oro);
  border-color: #1B0A08;
  color: #FFFFFF;
}
.yl-barra__tappo img { filter: drop-shadow(0 3px 0 rgba(27, 10, 8, .5)); }

/* 7. Sul telefono le iconcine diventano bolle di caramello.
      A cerchio vuoto su fondo viola si vedevano poco. Stesso caramello delle
      gocce, stesso contorno nero dei bottoni: il riflesso in alto e l'ombra in
      basso sono due ombre interne, così non serve toccare i disegni dentro. */

@media (max-width: 900px) {
  .yl-fatto::before {
    background-color: #D68617;
    border: 3px solid #1B0A08;
    background-size: 34px 34px;
    box-shadow:
      inset 0 10px 13px rgba(249, 229, 193, .42),
      inset 0 -12px 15px rgba(27, 10, 8, .34),
      0 3px 0 0 rgba(27, 10, 8, .45);
  }
}

/* ═══ Correzioni: telefono e iconcine ══════════════════════════════════════ */

/* 8. Le iconcine tornano viola, ma piene.
      Il caramello copriva troppo. E ora che stanno DAVANTI alla boccetta, il
      cerchio vuoto non andava comunque: sotto ci passava l'etichetta e non si
      capiva niente. Viola scuro pieno, bordo come prima. Vale su tutte e due
      le misure, perché il problema del vetro sotto c'è anche sul desktop. */

.yl-fatto::before {
  background-color: rgba(20, 7, 32, .92);
  border: 2px solid var(--wp--preset--color--viola-chiaro);
  box-shadow: none;
  backdrop-filter: blur(3px);
}

/* 9. Sul telefono comanda SUBITO la barra trasparente, e sta in CIMA.
      Niente intestazione piena, niente attesa dello scorrimento: la barra c'è
      da quando la pagina si apre. L'intestazione resta nel documento — la
      tendina del menù vive dentro di lei — ma nascosta, e torna in gioco solo
      quando si apre il menù. */

@media (max-width: 900px) {

  .yl-testa:not(.yl-testa--aperta) {
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .yl-barra,
  .yl-barra--fuori,
  body.admin-bar .yl-barra,
  body.admin-bar .yl-barra--fuori {
    top: 0;
    bottom: auto;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    padding: 12px 16px;
  }
  body.admin-bar .yl-barra,
  body.admin-bar .yl-barra--fuori { top: 46px; }

  /* 10. Il bottone SCOPRI CARAMEL sale: era troppo staccato dalla boccetta. */
  .yl-scena + .wp-block-group {
    padding-top: 0 !important;
    margin-top: -9vh !important;
  }
}

/* ═══ Razzo nuovo, barra più grossa, titolo più in alto ════════════════════ */

/* 11. Il razzo nuovo pesava 990 KB per un elemento decorativo, ed era per
       metà aria: il soggetto occupava 1262 px su 2560, con 784 px di vuoto a
       destra. Ritagliato al soggetto e ridotto: 78 KB, il 92% in meno.

       Sta nel tema, non nella libreria: `content` sostituisce l'immagine
       lasciando il testo alternativo al suo posto, quindi la pagina non va
       reincollata e il collegamento non si può rompere.

       Il riquadro ora coincide col soggetto — prima era largo il doppio — e la
       larghezza va dimezzata di conseguenza, sennò raddoppia di colpo. */

.yl-razzo img { content: url("assets/razzo.webp"); }
.yl-razzo { width: min(18vw, 215px); }
@media (max-width: 900px) { .yl-razzo { width: 26vw; } }
@media (max-width: 700px) { .yl-razzo { width: 30vw; bottom: 32%; } }

/* 12. I tasti della barra: da subito come stavano al passaggio del mouse.
       Il caramello pieno col contorno nero. Il disegno dentro è marrone scuro
       e non bianco: su fondo oro il bianco sta a 2,6 di contrasto, il marrone
       a 7. Al passaggio si scurisce, e allora il disegno passa a crema. */

.yl-barra__tasto {
  background: var(--wp--preset--color--oro);
  border: 2px solid #1B0A08;
  color: #2E1508;
  box-shadow: 0 3px 0 0 #1B0A08;
}
.yl-barra__tasto:hover,
.yl-barra__tasto:focus-visible {
  background: #8A4E08;
  border-color: #1B0A08;
  color: var(--wp--preset--color--crema);
  transform: translateY(1px);
  box-shadow: 0 2px 0 0 #1B0A08;
}
.yl-barra__conto {
  background: var(--wp--preset--color--fondo-scuro);
  color: var(--wp--preset--color--crema);
  border: 2px solid #1B0A08;
}

@media (max-width: 900px) {
  .yl-barra__tasto { width: 66px; height: 66px; }
  .yl-barra__tasto svg { width: 30px; height: 30px; }
  .yl-barra__tappo img { width: 72px; }
  .yl-barra__destra { gap: 14px; }
}

/* 13. Sul telefono il titolo era centrato nel palco alto quanto lo schermo:
       mezzo schermo di vuoto prima di leggere qualcosa. Ora parte dall'alto. */

@media (max-width: 900px) {
  .yl-claim {
    align-self: start;
    margin-top: 11vh;
  }
}

/* ═══ Menù nostro, barra più discreta, titolo in alto davvero ══════════════ */

/* 14. Il titolo restava a metà schermo.
       `align-self: start` in una griglia con una riga sola che si distende non
       sposta niente di visibile. Qui non serve la griglia: lo appendo al palco
       con una posizione assoluta, che è deterministica. */

@media (max-width: 900px) {
  .yl-claim {
    position: absolute;
    top: 9vh;
    left: 0;
    right: 0;
    margin: 0;
    align-self: auto;
  }
}

/* 15. Barra: tasti e logo un filo più piccoli, e uno sfondo appena accennato
       quando si scorre — quel tanto che basta a staccarla dal contenuto. */

@media (max-width: 900px) {
  .yl-barra { padding: 10px 14px; }
  .yl-barra__tasto { width: 56px; height: 56px; }
  .yl-barra__tasto svg { width: 25px; height: 25px; }
  .yl-barra__tappo img { width: 58px; }
  .yl-barra__destra { gap: 12px; }
}

.yl-barra--fuori {
  background: rgba(14, 5, 29, .42);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(74, 42, 110, .45);
}
@media (max-width: 900px) {
  .yl-barra--fuori { background: rgba(14, 5, 29, .42); }
}

/* 16. La tendina del menù.
       È nostra, non quella del blocco Navigazione: le voci vengono copiate da
       lì, ma l'aspetto e il comportamento sono del sito. Nessun blocco dello
       scorrimento — era quello a far risalire la pagina di colpo. */

.yl-tendina {
  position: fixed;
  inset: 0;
  z-index: 9995;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3.5vh, 30px);
  padding: 26px;
  background: rgba(14, 5, 29, .97);
  overscroll-behavior: contain;
  opacity: 0;
  transition: opacity .24s ease;
}
.yl-tendina[hidden] { display: none; }
.yl-tendina--aperta { opacity: 1; }

.yl-tendina__voci {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2.6vh, 24px);
}
.yl-tendina__voci a {
  font-family: "Titan One", Archivo, sans-serif;
  font-size: clamp(26px, 7vw, 44px);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--wp--preset--color--crema);
  text-decoration: none;
  transition: color .18s ease, transform .18s ease;
}
.yl-tendina__voci a:hover,
.yl-tendina__voci a:focus-visible {
  color: var(--wp--preset--color--oro);
  transform: translateY(-2px);
}

.yl-tendina__acquista {
  margin-top: 8px;
  padding: 18px 42px;
  border-radius: 40px;
  border: 3px solid #1B0A08;
  box-shadow: 0 5px 0 0 #1B0A08;
  background: var(--wp--preset--color--oro);
  color: #2E1508;
  font-family: "Titan One", Archivo, sans-serif;
  font-size: clamp(15px, 4vw, 19px);
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease, transform .16s ease, box-shadow .16s ease;
}
.yl-tendina__acquista:hover,
.yl-tendina__acquista:focus-visible {
  background: #8A4E08;
  color: var(--wp--preset--color--crema);
  transform: translateY(2px);
  box-shadow: 0 3px 0 0 #1B0A08;
}

/* le stelle anche dietro alla tendina, così non è un buco nero */
.yl-tendina::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, #F9E5C1 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 62% 9%,  #F9E5C1 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 38% 64%, #D68617 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 84% 47%, #F9E5C1 50%, transparent 51%);
  background-size: 300px 300px, 230px 230px, 390px 390px, 270px 270px;
}
.yl-tendina > * { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .yl-tendina { transition: none; }
}

/* ═══ iPhone: l'altezza vera, e il burger che diventa X ════════════════════ */

/* 17. Perché su iPhone partiva tutto troppo in basso.
       Su Safari `100vh` conta anche la striscia sotto le barre del browser:
       il palco risultava più alto dello schermo visibile, e siccome tutto è
       centrato, il centro cadeva sotto il bordo. Il flacone finiva mezzo
       tagliato dalla barra ACQUISTA.

       `svh` è l'altezza VISIBILE, quella con le barre aperte. E la barra
       ACQUISTA occupa 88 px in fondo: li tolgo dal palco, sennò il centro
       resta comunque troppo in giù. */

@media (max-width: 900px) {
  .yl-perno {
    min-height: 100svh;
    padding-bottom: 96px;
    padding-top: 6svh;
  }
  .yl-scena { min-height: 240svh; }
  .yl-perno { --bh: min(58svh, 560px); }
  .yl-claim { top: 5svh; }
  .yl-orbita { height: 70svh; }
}

/* 18. Il titolo davanti al flacone non si leggeva.
       Un velo scuro sfumato dietro alle parole, che si spegne ai bordi: si
       legge senza che si veda un rettangolo. */

@media (max-width: 900px) {
  .yl-claim {
    justify-self: stretch;
    width: 100%;
    text-align: center;
  }
  .yl-claim::before {
    content: "";
    position: absolute;
    inset: -7vh -10vw;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse at center,
      rgba(14, 5, 29, .90) 0%,
      rgba(14, 5, 29, .74) 46%,
      rgba(14, 5, 29, 0) 78%);
  }
  .yl-claim > * { position: relative; text-shadow: 0 2px 12px rgba(14, 5, 29, .85); }
}

/* 19. La barra sta SOPRA la tendina: il carrello resta sempre lì e il burger
       si trasforma in X al posto suo. Niente seconda X che compare altrove. */

.yl-barra { z-index: 9996; }
.yl-tendina { z-index: 9995; padding-top: 22vh; }

.yl-burger {
  position: relative;
  display: block;
  width: 25px;
  height: 19px;
}
.yl-burger i {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .3s cubic-bezier(.2, .8, .3, 1.4), opacity .16s ease;
}
.yl-burger i:nth-child(1) { top: 0; }
.yl-burger i:nth-child(2) { top: 8px; }
.yl-burger i:nth-child(3) { top: 16px; }

.yl-barra__menu[aria-expanded="true"] .yl-burger i:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.yl-barra__menu[aria-expanded="true"] .yl-burger i:nth-child(2) { opacity: 0; transform: scaleX(.15); }
.yl-barra__menu[aria-expanded="true"] .yl-burger i:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* col menù aperto la barra è sempre leggibile, anche in cima alla pagina */
.yl-barra__menu[aria-expanded="true"] { background: #8A4E08; color: var(--wp--preset--color--crema); }

@media (prefers-reduced-motion: reduce) {
  .yl-burger i { transition: none; }
}

/* ═══ I due difetti veri, misurati a 375 px ════════════════════════════════ */

/* 20. Perché partiva tutto troppo in basso.
       L'intestazione piena sul telefono è nascosta, ma `visibility: hidden`
       NON toglie lo spazio: restava un blocco appiccicato di 123 px che
       spingeva giù l'intera scena. Misurato: `.yl-scena` cominciava a 123 px
       invece che a 0. La tolgo dal flusso — resta nel documento perché il
       menù copia le voci da lì, ma non occupa più niente. */

@media (max-width: 900px) {
  header.wp-block-template-part {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* 21. Perché le scritte sembravano storte.
       `.yl-claim` ha `max-width: min(92vw, 1000px)`: a 375 px fa 345. Con
       `left: 0` e `right: 0` il blocco non si centra, si incolla a sinistra e
       avanzano 30 px tutti a destra. Da lì i 15 px di sbilanciamento.
       Misurato: centro del testo a 173, centro dello schermo a 187,5. */

@media (max-width: 900px) {
  .yl-claim {
    max-width: 100%;
    width: 100%;
    padding: 0 18px;
    top: 3svh;
  }
  /* il titolo prendeva 439 px in altezza su 812: copriva tutto il flacone */
  .yl-claim h1 { font-size: clamp(30px, 8.4vw, 40px) !important; line-height: 1.06; }
  .yl-claim p { font-size: 12px !important; }
}

/* 22. Yumo sbucato sopra al menù.
       È la quinta espressione del foglio, quella con gli occhi a stella.
       Scontornata col bianco come si fa col blu: trasparenza ricavata dal
       bordo invece di un taglio netto, così il contorno marrone non si
       sfrangia sul viola. Entra dall'alto quando la tendina si apre. */

.yl-tendina__yumo {
  display: block;
  width: clamp(140px, 33vw, 190px);
  height: auto;
  margin-bottom: -6px;
  transform: translateY(-26px) scale(.82);
  opacity: 0;
  transition: transform .42s cubic-bezier(.2, .9, .3, 1.5) .06s, opacity .3s ease .06s;
}
.yl-tendina--aperta .yl-tendina__yumo {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.yl-tendina { padding-top: 18vh; }

@media (prefers-reduced-motion: reduce) {
  .yl-tendina__yumo { transition: none; transform: none; opacity: 1; }
}

/* ═══ Telefono: il flacone sale da sotto ═══════════════════════════════════ */

/* 23. Sul telefono il flacone parte sotto il bordo e sale mentre si scorre,
       continuando a girare. Due animazioni sullo stesso elemento con due
       intervalli diversi: la salita si esaurisce nel primo 40% dello scorrimento,
       la rotazione parte al 26% — quando il flacone si sta già vedendo — e
       arriva in fondo. Se partisse da 0 si girerebbe fuori schermo.

       Nella lista `animation` la salita sostituisce `yl-avvicina`: due
       animazioni che toccano `transform` sullo stesso elemento non convivono,
       vince l'ultima. */

@media (max-width: 900px) {
  @supports (animation-timeline: view()) {
    .yl-boccetta {
      animation: yl-gira2 steps(11) both, yl-sale-da-sotto linear both;
      animation-timeline: --scena, --scena;
      animation-range: contain 10% contain 94%, contain 0% contain 40%;
    }
  }

  /* 24. Il testo dell'hero un filo più in basso. */
  .yl-claim { top: 7svh; }

  /* 25. Il gruppo del bottone SCOPRI CARAMEL sale ancora. */
  .yl-scena + .wp-block-group {
    padding-top: 0 !important;
    margin-top: -24vh !important;
  }
}

/* I fotogrammi chiave stanno FUORI dai blocchi condizionali: annidarli dentro
   un "@media" dentro un "@supports" e' consentito ma e' la forma piu' fragile,
   e qui non serve a niente. Al livello principale sono comunque inerti finche'
   nessuno li richiama. */
@keyframes yl-sale-da-sotto {
  0%   { transform: translateY(28svh) scale(.95); }
  100% { transform: translateY(0)     scale(1); }
}

/* Il bottone della tendina in maiuscolo, come tutti gli altri del sito */
.yl-tendina__acquista { text-transform: uppercase; }

/* ═══ Blocco dello scorrimento, e le sezioni centrate ══════════════════════ */

/* 26. Col menù aperto la pagina dietro non si muove. Lo scorrere serve a
       uscire, non a spostare quello che c'è sotto. */

/* Il blocco con `overflow: hidden` sulla radice e' stato tolto: azzerava la
   posizione dello scorrimento e allo sblocco la pagina saltava in cima. Lo
   sfondo adesso sta fermo perche' il gesto viene fermato dal JavaScript, che
   non tocca la posizione e quindi non ha niente da rimettere a posto. */
.yl-tendina { overscroll-behavior: contain; touch-action: none; }

/* 27. Dalle sezioni dopo il bottone SCOPRI CARAMEL in giù, tutto centrato.
       NOTA: ORYZO vuole il corpo del testo mai centrato, ed è una regola
       scritta nel CLAUDE.md del progetto. Qui la scavalco perché l'ha chiesto
       Zago per il suo marchio — resta scritto perché si sappia che è una
       scelta e non una dimenticanza.

       Il selettore prende le sezioni di primo livello dentro `main` tranne la
       scena dell'hero, che ha già le sue regole. */

main > *:not(.yl-scena) :is(h1, h2, h3, h4, p, li, figcaption) {
  text-align: center;
}
/* il modulo resta com'è: campi e consensi centrati diventano illeggibili */
main .yl-form :is(p, li, label) { text-align: left; }
main .yl-form__consenso { justify-content: center; text-align: left; }

/* 28. Titoli più grandi e descrizioni più marcate. */

main > *:not(.yl-scena) h2 { font-size: clamp(34px, 4.6vw, 62px); line-height: 1.04; }
main > *:not(.yl-scena) h3 { font-size: clamp(25px, 2.9vw, 38px); line-height: 1.1; }
main > *:not(.yl-scena) p  { font-weight: 600; }
main > *:not(.yl-scena) .yl-legale p { font-weight: 400; }

/* ═══ Menù, barra di sistema, misure dei testi, modulo ════════════════════ */

/* 29. Yumo appeso SOPRA il menù, senza spostarlo.
       Prima era un elemento in colonna come le voci, quindi le spingeva giù e
       il menù non era più centrato. Ora è fuori dal flusso, agganciato al
       bordo alto della prima voce: il menù torna dov'era e Yumo ci sbuca sopra. */

.yl-tendina__voci { position: relative; }
.yl-tendina__yumo {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  width: clamp(140px, 33vw, 190px);
  height: auto;
  margin: 0;
  transform: translate(-50%, -22px) scale(.84);
  opacity: 0;
  transition: transform .42s cubic-bezier(.2, .9, .3, 1.5) .06s, opacity .3s ease .06s;
}
.yl-tendina--aperta .yl-tendina__yumo {
  transform: translate(-50%, 0) scale(1);
  opacity: 1;
}
/* il menù torna centrato: lo spazio per Yumo lo prende dal riempimento in alto */
.yl-tendina { padding-top: 26vh; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .yl-tendina__yumo { transition: none; transform: translate(-50%, 0); opacity: 1; }
}

/* 30. La striscia di sistema del telefono restava bianca.
       Il `theme-color` lo mette functions.php; qui mi assicuro che anche il
       fondo del documento sia viola, per quando si tira oltre il bordo. */

html { background-color: var(--wp--preset--color--fondo-scuro); }

/* 31. Titoli più grandi, descrizioni un filo più piccole. */

main > *:not(.yl-scena) h2 { font-size: clamp(40px, 5.6vw, 78px); line-height: 1.02; }
main > *:not(.yl-scena) h3 { font-size: clamp(26px, 3.1vw, 40px); line-height: 1.08; }
main > *:not(.yl-scena) p  { font-size: clamp(15px, 1.15vw, 18px); font-weight: 600; line-height: 1.6; }
main > *:not(.yl-scena) .wp-block-button__link { font-size: clamp(17px, 1.6vw, 22px); }

/* 32. Il modulo rifatto in stile cartoon, come la tendina del menù:
       contorno nero spesso, angoli tondi, ombra piena sotto invece che sfumata. */

.yl-form {
  gap: 14px;
  padding: clamp(20px, 3vw, 34px);
  border: 3px solid #1B0A08;
  border-radius: 28px;
  background: rgba(33, 11, 49, .55);
  box-shadow: 0 6px 0 0 #1B0A08;
}
.yl-form__campo {
  border: 3px solid #1B0A08;
  border-radius: 30px;
  background: var(--wp--preset--color--fondo-scuro);
  color: var(--wp--preset--color--crema);
  padding: 16px 22px;
  font-size: 16px;
  font-weight: 600;
}
.yl-form__campo::placeholder { color: rgba(249, 229, 193, .55); font-weight: 500; }
.yl-form__campo:focus {
  outline: none;
  border-color: var(--wp--preset--color--oro);
  box-shadow: 0 0 0 3px rgba(214, 134, 23, .3);
}
.yl-form__invio {
  font-family: "Titan One", Archivo, sans-serif;
  font-size: 16px;
  padding: 17px 38px;
  border: 3px solid #1B0A08;
  border-radius: 34px;
  background: var(--wp--preset--color--oro);
  color: #2E1508;
  box-shadow: 0 5px 0 0 #1B0A08;
  transition: background-color .18s ease, color .18s ease, transform .16s ease, box-shadow .16s ease;
}
.yl-form__invio:hover,
.yl-form__invio:focus-visible {
  background: #8A4E08;
  color: var(--wp--preset--color--crema);
  transform: translateY(2px);
  box-shadow: 0 3px 0 0 #1B0A08;
}
.yl-form__consenso { font-size: 13px; font-weight: 500; }
.yl-form__consenso input {
  width: 20px;
  height: 20px;
  accent-color: var(--wp--preset--color--oro);
}

/* ═══ Le tre sezioni rifatte ═══════════════════════════════════════════════ */

/* 33. Le tile "in auto, sul casco, sui capi".
       Non più tre colonne uguali allineate: tre schede col contorno nero e
       l'ombra piena, sfalsate in verticale e ruotate di poco. Su telefono si
       impilano e sbandano una a sinistra e una a destra, come foto buttate
       sul tavolo. */

.yl-usi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 34px);
  margin-top: var(--wp--preset--spacing--30);
}
.yl-tile {
  border: 3px solid #1B0A08;
  border-radius: 26px;
  background: rgba(14, 5, 29, .6);
  box-shadow: 0 6px 0 0 #1B0A08;
  padding: clamp(14px, 1.6vw, 22px);
  transition: transform .28s cubic-bezier(.2, .8, .3, 1.3), box-shadow .28s ease;
}
.yl-tile--1 { transform: rotate(-1.4deg); }
.yl-tile--2 { transform: translateY(28px) rotate(1deg); }
.yl-tile--3 { transform: rotate(-0.6deg); }
.yl-tile:hover {
  transform: translateY(-6px) rotate(0deg);
  box-shadow: 0 12px 0 0 #1B0A08;
}
.yl-tile--2:hover { transform: translateY(22px) rotate(0deg); }

.yl-tile__foto { margin: 0 0 14px; }
.yl-tile__foto img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 2px solid #1B0A08;
}
.yl-tile h3 {
  font-family: "Titan One", Archivo, sans-serif;
  margin: 0 0 8px;
  color: var(--wp--preset--color--oro);
}
.yl-tile p { margin: 0; }

@media (max-width: 860px) {
  .yl-usi { grid-template-columns: 1fr; gap: 26px; }
  .yl-tile--1 { transform: translateX(-3vw) rotate(-1.8deg); }
  .yl-tile--2 { transform: translateX(3vw)  rotate(1.6deg); }
  .yl-tile--3 { transform: translateX(-2vw) rotate(-1.2deg); }
  .yl-tile--1:hover, .yl-tile--2:hover, .yl-tile--3:hover { transform: none; }
}

/* 34. "Chi è Yumo" diventa una scena, come l'hero.
       Il palco resta incollato mentre la sezione scorre sotto: Yumo attraversa
       da sinistra a destra lasciandosi dietro una scia, e le frasi si accendono
       una alla volta. Stessa macchina del flacone — una linea del tempo legata
       alla vista, nessun JavaScript. */

.yl-storia {
  min-height: 260vh;
  position: relative;
  view-timeline-name: --storia;
  view-timeline-axis: block;
}
.yl-storia__perno {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.yl-storia__testi {
  grid-area: 1 / 1;
  z-index: 2;
  max-width: min(88vw, 700px);
  text-align: center;
}
.yl-storia__yumo {
  grid-area: 1 / 1;
  z-index: 1;
  width: min(34vw, 380px);
  margin: 0;
  align-self: end;
  justify-self: start;
  opacity: .9;
  pointer-events: none;
}
.yl-storia__yumo img { display: block; width: 100%; height: auto; }

/* la scia: una striscia di caramello sfumata che lo segue */
.yl-storia__scia {
  grid-area: 1 / 1;
  z-index: 0;
  width: 100%;
  height: 3px;
  align-self: end;
  margin-bottom: 12vh;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, rgba(214, 134, 23, .75), transparent);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

.yl-storia__occhiello { grid-area: auto; }
.yl-storia__passo { opacity: 0; }

@supports (animation-timeline: view()) {
  .yl-storia__yumo {
    animation: yl-attraversa linear both;
    animation-timeline: --storia;
    animation-range: contain 0% contain 100%;
  }
  @keyframes yl-attraversa {
    0%   { transform: translate(-30%, 6vh) rotate(-6deg); }
    50%  { transform: translate(120%, 0)   rotate(3deg); }
    100% { transform: translate(280%, 5vh) rotate(-2deg); }
  }

  .yl-storia__scia {
    animation: yl-scia linear both;
    animation-timeline: --storia;
    animation-range: contain 0% contain 92%;
  }
  @keyframes yl-scia {
    0%   { transform: scaleX(0);   opacity: 0; }
    18%  { opacity: 1; }
    100% { transform: scaleX(1);   opacity: .5; }
  }

  .yl-storia__passo {
    animation: yl-accendi linear both;
    animation-timeline: --storia;
  }
  .yl-storia__passo--1 { animation-range: contain 4%  contain 20%; }
  .yl-storia__passo--2 { animation-range: contain 18% contain 34%; }
  .yl-storia__passo--3 { animation-range: contain 32% contain 48%; }
  .yl-storia__passo--4 { animation-range: contain 46% contain 64%; }
  .yl-storia__passo--5 { animation-range: contain 62% contain 76%; }
  @keyframes yl-accendi {
    0%   { opacity: 0; transform: translateY(20px); filter: blur(4px); }
    60%  { opacity: 1; transform: translateY(0);    filter: blur(0); }
    100% { opacity: 1; transform: translateY(0);    filter: blur(0); }
  }
}

/* dove le animazioni da scorrimento non esistono: la sezione si accorcia e si
   legge tutto insieme. Si perde lo spettacolo, non il contenuto. */
@supports not (animation-timeline: view()) {
  .yl-storia { min-height: 0; }
  .yl-storia__perno { position: static; min-height: 0; padding: var(--wp--preset--spacing--40) 0; }
  .yl-storia__passo { opacity: 1; }
  .yl-storia__yumo, .yl-storia__scia { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .yl-storia { min-height: 0; }
  .yl-storia__perno { position: static; min-height: 0; padding: var(--wp--preset--spacing--40) 0; }
  .yl-storia__passo { opacity: 1 !important; animation: none !important; transform: none !important; filter: none !important; }
  .yl-storia__yumo, .yl-storia__scia { display: none; }
}

@media (max-width: 860px) {
  .yl-storia { min-height: 240svh; }
  .yl-storia__yumo { width: 52vw; opacity: .55; }
}

/* 35. I mondi come polaroid appese a un filo.
       Il filo, le mollette e la cornice bianca sono disegnati qui: nessun
       pixel, quindi restano nitidi a ogni misura e le polaroid si possono
       inclinare e dondolare senza rigenerare le immagini. Nelle foto c'è solo
       lo scatto, come chiesto nel prompt.

       Il dondolio parte da SOTTO la molletta, non dal centro: è lì che una
       foto appesa fa perno. */

.yl-filo {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(20px, 3vw, 46px);
  margin-top: calc(var(--wp--preset--spacing--30) + 34px);
  padding-top: 26px;
}
/* il filo teso da un bordo all'altro */
.yl-filo::before {
  content: "";
  position: absolute;
  top: 16px;
  left: -6vw;
  right: -6vw;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, #6B4A2A 6%, #8A6236 50%, #6B4A2A 94%, transparent);
}

.yl-polaroid {
  position: relative;
  width: clamp(170px, 20vw, 244px);
  margin: 0;
  padding: 12px 12px 0;
  background: #F4EFE4;
  border: 3px solid #1B0A08;
  border-radius: 4px;
  box-shadow: 0 6px 0 0 rgba(27, 10, 8, .75);
  transform-origin: 50% -18px;
  animation: yl-dondola 6.4s ease-in-out infinite alternate;
}
.yl-polaroid--1 { --inclina: -3deg;  animation-duration: 6.4s; }
.yl-polaroid--2 { --inclina:  2.2deg; animation-duration: 7.6s; animation-delay: -1.2s; }
.yl-polaroid--3 { --inclina: -1.6deg; animation-duration: 6.9s; animation-delay: -2.6s; }
.yl-polaroid--4 { --inclina:  3deg;   animation-duration: 8.1s; animation-delay: -0.7s; }

@keyframes yl-dondola {
  from { transform: rotate(calc(var(--inclina) - 1.1deg)); }
  to   { transform: rotate(calc(var(--inclina) + 1.1deg)); }
}

/* la molletta, appesa al filo */
.yl-polaroid__molletta {
  position: absolute;
  top: -26px;
  left: 50%;
  width: 16px;
  height: 30px;
  margin-left: -8px;
  border: 3px solid #1B0A08;
  border-radius: 4px 4px 6px 6px;
  background: linear-gradient(180deg, var(--wp--preset--color--oro) 0 55%, #A85F0C 55% 100%);
}
.yl-polaroid__molletta::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: 11px;
  height: 3px;
  background: #1B0A08;
}

.yl-polaroid__scatto {
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  border: 2px solid #1B0A08;
  border-radius: 2px;
}
.yl-polaroid--1 .yl-polaroid__scatto { background-image: url("assets/mondo-1.webp"); }
.yl-polaroid--2 .yl-polaroid__scatto { background-image: url("assets/mondo-2.webp"); }
.yl-polaroid--3 .yl-polaroid__scatto { background-image: url("assets/mondo-3.webp"); }
.yl-polaroid--4 .yl-polaroid__scatto { background-image: url("assets/mondo-4.webp"); }

/* i mondi non ancora aperti restano in penombra finché non ci passi sopra */
.yl-polaroid--2 .yl-polaroid__scatto,
.yl-polaroid--3 .yl-polaroid__scatto,
.yl-polaroid--4 .yl-polaroid__scatto {
  filter: saturate(.35) brightness(.62);
  transition: filter .45s ease;
}
.yl-polaroid--2:hover .yl-polaroid__scatto,
.yl-polaroid--3:hover .yl-polaroid__scatto,
.yl-polaroid--4:hover .yl-polaroid__scatto {
  filter: saturate(1) brightness(1);
}

.yl-polaroid figcaption {
  display: block;
  padding: 12px 6px 14px;
  text-align: center;
  color: #2E1508;
}
.yl-polaroid figcaption strong {
  display: block;
  font-family: "Titan One", Archivo, sans-serif;
  font-size: clamp(15px, 1.5vw, 19px);
  letter-spacing: 0.02em;
}
.yl-polaroid figcaption span {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 600;
  opacity: .72;
}
.yl-polaroid figcaption em {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 12px;
  border-radius: 20px;
  border: 2px solid #1B0A08;
  background: var(--wp--preset--color--oro);
  color: #2E1508;
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.yl-polaroid figcaption em.yl-chiuso {
  background: transparent;
  border-color: rgba(46, 21, 8, .45);
  color: rgba(46, 21, 8, .62);
}

@media (max-width: 860px) {
  .yl-filo { gap: 30px 18px; }
  .yl-polaroid { width: min(43vw, 200px); }
}
@media (prefers-reduced-motion: reduce) {
  .yl-polaroid { animation: none; transform: rotate(var(--inclina)); }
}

/* ═══ Intestazione desktop: solo carrello e burger ═════════════════════════ */

/* 36. Le proporzioni restano quelle: logo grande a sinistra, stessa altezza,
       stesso fondo. Cambia solo cosa c'è a destra — via le voci distese e via
       il bottone Acquista, restano i due tasti tondi.

       Non sono un secondo markup: è lo STESSO gruppo della barra compatta,
       clonato dentro l'intestazione. Così un domani se cambia il carrello
       cambia in tutti e due i posti, e i due burger si aprono e si chiudono
       insieme perché lo stato lo scrive una funzione sola. */

.yl-header .wp-block-navigation,
.yl-header .yl-cta-header,
.yl-header .wc-block-mini-cart,
.yl-header .wc-block-customer-account { display: none; }

.yl-barra__destra--testa { display: flex; align-items: center; gap: 12px; }
.yl-barra__destra--testa .yl-barra__tasto { width: 50px; height: 50px; }
.yl-barra__destra--testa .yl-barra__tasto svg { width: 23px; height: 23px; }

/* dentro l'intestazione la copia non serve su telefono: lì comanda la barra */
@media (max-width: 900px) {
  .yl-barra__destra--testa { display: none; }
}

/* ═══ Intestazione che resta, tile bianche, filo per riga ══════════════════ */

/* 37. Sul desktop l'intestazione non se ne va più: resta e si vela.
       Su telefono resta com'è — se ne va e comanda la barra. La differenza la
       decide qui il punto di rottura, non il JavaScript: lui scrive una classe
       sola sul documento e basta. */

@media (min-width: 901px) {
  .yl-testa.yl-header--via,
  .yl-header.yl-header--via {
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .yl-header {
    transition: background-color .3s ease, backdrop-filter .3s ease;
  }
  html.yl-giu .yl-header {
    background-color: rgba(14, 5, 29, .48) !important;
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(74, 42, 110, .4);
  }
  /* con l'intestazione sempre presente la barra compatta non serve più */
  .yl-barra { display: none; }
}

/* 38. L'icona dell'account sparisce dall'intestazione: la sua funzione è
       diventata una voce del menù. */

.yl-header .wp-block-woocommerce-customer-account,
.yl-header .wc-block-customer-account,
.yl-header .wc-block-customer-account__link { display: none !important; }

.yl-tendina__ordini { font-size: clamp(19px, 4.6vw, 28px) !important; opacity: .82; }

/* 39. Yumo sul razzo andava troppo veloce.
       Su un'animazione legata allo scorrimento la durata non conta: il tempo
       lo detta il dito. Per rallentarlo si allarga l'INTERVALLO — la stessa
       traversata spalmata su piu' scorrimento — e si accorcia la strada, che
       era di 150vw, quasi due schermi.
       Da 48 punti di intervallo a 78, e da 150vw a 118: a parita' di dito
       percorre meno strada in piu' tempo. */

@supports (animation-timeline: view()) {
  .yl-razzo { animation-range: contain 12% contain 90%; }
  @keyframes yl-vola {
    0%   { opacity: 0; transform: translate3d(0, 40px, 0) rotate(-5deg); }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { opacity: 0; transform: translate3d(118vw, -150px, 0) rotate(-11deg); }
  }
}

/* 40. Le tile su fondo bianco: scritte scure, sennò non si leggono. */

.yl-tile {
  background: #F6F1E6;
  border-color: #1B0A08;
  color: #2A1206;
}
.yl-tile h3 { color: #8A4E08; }
.yl-tile p { color: #3A2412; }
.yl-tile__foto img { border-color: #1B0A08; }

/* 41. Il filo: uno spezzone per polaroid, non uno solo per tutte.
       Con un filo unico disegnato sul contenitore, andando a capo la seconda
       riga restava senza. Ora ogni scatto porta il suo pezzetto di filo, largo
       quanto lui più mezzo spazio per lato: affiancati si saldano in una linea
       continua, e si spezzano da soli dove va a capo. Vale a quattro in fila,
       a due a due e in colonna, senza sapere in anticipo dove si romperà.

       Il pezzetto sta su un contenitore FERMO: se stesse sulla polaroid
       dondolerebbe con lei, e un filo teso non dondola. */

.yl-filo {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 54px clamp(20px, 3vw, 46px);
  margin-top: calc(var(--wp--preset--spacing--30) + 30px);
  padding-top: 0;
  justify-items: center;
}
.yl-filo::before { content: none; }   /* il filo unico non serve più */

.yl-appeso {
  position: relative;
  padding-top: 30px;
  width: 100%;
  max-width: 244px;
}
.yl-appeso::before {
  content: "";
  position: absolute;
  top: 15px;
  left: calc(-1 * clamp(20px, 3vw, 46px) / 2 - 1px);
  right: calc(-1 * clamp(20px, 3vw, 46px) / 2 - 1px);
  height: 3px;
  border-radius: 3px;
  background: #7A5730;
}
/* le estremità della riga sfumano, così il filo non finisce di netto */
.yl-appeso:first-child::before,
.yl-appeso:nth-child(4n + 1)::before { background: linear-gradient(90deg, transparent, #7A5730 22%); }
.yl-appeso:last-child::before,
.yl-appeso:nth-child(4n)::before { background: linear-gradient(90deg, #7A5730 78%, transparent); }

.yl-molletta {
  position: absolute;
  top: 4px;
  left: 50%;
  z-index: 2;
  width: 16px;
  height: 30px;
  margin-left: -8px;
  border: 3px solid #1B0A08;
  border-radius: 4px 4px 6px 6px;
  background: linear-gradient(180deg, var(--wp--preset--color--oro) 0 55%, #A85F0C 55% 100%);
}
.yl-molletta::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: 11px;
  height: 3px;
  background: #1B0A08;
}

.yl-polaroid {
  width: 100%;
  margin: 0;
  transform-origin: 50% -14px;
}
.yl-polaroid__molletta { display: none; }   /* ora sta sul contenitore fermo */

@media (max-width: 1099px) {
  .yl-filo { grid-template-columns: repeat(2, 1fr); }
  .yl-appeso:nth-child(4n + 1)::before,
  .yl-appeso:nth-child(2n + 1)::before { background: linear-gradient(90deg, transparent, #7A5730 22%); }
  .yl-appeso:nth-child(4n)::before,
  .yl-appeso:nth-child(2n)::before { background: linear-gradient(90deg, #7A5730 78%, transparent); }
}
@media (max-width: 639px) {
  .yl-filo { grid-template-columns: 1fr; gap: 46px 0; }
  .yl-appeso { max-width: min(74vw, 260px); }
  /* in colonna ogni scatto è solo sulla sua riga: il filo sfuma da tutte e due le parti */
  .yl-appeso::before,
  .yl-appeso:nth-child(2n)::before,
  .yl-appeso:nth-child(2n + 1)::before {
    left: -18vw;
    right: -18vw;
    background: linear-gradient(90deg, transparent, #7A5730 20%, #7A5730 80%, transparent);
  }
}

/* 42. "Chi è Yumo" sul telefono: il testo parte dall'alto, sennò mentre
       scorri il palco è alto quanto lo schermo e non si vede ancora niente. */

@media (max-width: 860px) {
  .yl-storia__perno { align-content: start; padding-top: 12svh; }
  .yl-storia__testi { align-self: start; }
  .yl-storia__yumo { align-self: end; margin-bottom: 6svh; }
}

/* 43. La riga dei dettagli sotto il prezzo: più discreta del prezzo stesso,
       che è l'informazione che deve saltare all'occhio per prima. */

.yl-dettagli {
  opacity: .62;
  letter-spacing: 0.06em;
  margin-top: 6px !important;
}

/* ═══ Yumo corre su un pianeta che gira ════════════════════════════════════ */

/* 44. La scia di caramello lascia il posto a un pianeta.
       Il pianeta è una sfera larga più dello schermo, affondata in basso: se ne
       vede solo la calotta, che fa da orizzonte curvo. Gira su se stessa piano,
       novanta secondi a giro, con una rotazione legata al TEMPO — è l'unica
       cosa qui che non dipende dallo scorrimento, perché un pianeta gira anche
       se tu stai fermo.

       Yumo invece è legato allo scorrimento: attraversa da sinistra a destra
       col dito, e nel mezzo saltella — sono i passi della corsa, otto su tutta
       la traversata. */

.yl-storia__pianeta {
  position: absolute;
  left: 50%;
  bottom: -132vw;
  width: 160vw;
  margin-left: -80vw;
  aspect-ratio: 1 / 1;
  height: auto;
  align-self: auto;
  border-radius: 50%;
  background: url("assets/pianeta.webp") center / contain no-repeat;
  transform: none;
  transform-origin: 50% 50%;
  animation: yl-gira-pianeta 90s linear infinite;
  z-index: 0;
  pointer-events: none;
}
@keyframes yl-gira-pianeta { to { transform: rotate(360deg); } }

.yl-storia__yumo {
  position: absolute;
  left: 0;
  bottom: 17vw;
  width: min(19vw, 220px);
  align-self: auto;
  justify-self: auto;
  opacity: 1;
  z-index: 1;
}
.yl-storia__yumo img { content: url("assets/yumo-corre.webp"); }

@supports (animation-timeline: view()) {
  @keyframes yl-attraversa {
    0%   { transform: translate(-26vw, 0)    rotate(-3deg); }
    12%  { transform: translate(-9vw, -14px) rotate(-1deg); }
    25%  { transform: translate(8vw, 0)      rotate(-3deg); }
    37%  { transform: translate(25vw, -14px) rotate(-1deg); }
    50%  { transform: translate(42vw, 0)     rotate(-3deg); }
    62%  { transform: translate(59vw, -14px) rotate(-1deg); }
    75%  { transform: translate(76vw, 0)     rotate(-3deg); }
    87%  { transform: translate(95vw, -14px) rotate(-1deg); }
    100% { transform: translate(114vw, 0)    rotate(-3deg); }
  }
  .yl-storia__pianeta {
    animation: yl-gira-pianeta 90s linear infinite;
    animation-timeline: auto;
    animation-range: normal;
  }
}
@supports not (animation-timeline: view()) { .yl-storia__pianeta { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .yl-storia__pianeta { display: none; }
}

@media (max-width: 860px) {
  .yl-storia__pianeta { bottom: -142vw; width: 180vw; margin-left: -90vw; }
  .yl-storia__yumo { width: 40vw; bottom: 26vw; }
  .yl-storia__perno { padding-bottom: 6svh; }
}

/* 45. Le foto delle tile: quelle nuove, su fondo chiaro.
       Stanno nel tema e sostituiscono l'immagine con `content`, che lascia al
       suo posto il testo alternativo: nessun ID da rimettere, nessun
       collegamento che si può rompere. */

.yl-tile--1 .yl-tile__foto img { content: url("assets/tile-auto.webp"); }
.yl-tile--2 .yl-tile__foto img { content: url("assets/tile-casco.webp"); }
.yl-tile--3 .yl-tile__foto img { content: url("assets/tile-capi.webp"); }

/* 46. Sul telefono le scritte si erano ravvicinate.
       Non le avevo spostate io: sono cresciute. Con l'icona passata a 66 px e
       il testo su due righe sotto, ogni scritta è alta circa 112 px, e con i
       vecchi 24 punti di distanza restavano una ventina di pixel di respiro.
       Allargo la tela e il passo: 84svh invece di 70, e 26 punti invece di 24.
       Lo spazio libero fra una e l'altra passa da 24 a 40 px. */

@media (max-width: 900px) {
  .yl-orbita { height: 84svh; }
  .yl-fatto--1 { top: 4%;  left: 8%;  right: auto; }
  .yl-fatto--2 { top: 30%; right: 8%; left: auto; }
  .yl-fatto--3 { top: 56%; left: 8%;  right: auto; }
  .yl-fatto--4 { top: 82%; right: 8%; left: auto; }
}

/* ═══ Ritorni, tile della fiducia, WhatsApp, piè di pagina ═════════════════ */

/* 47. Le scritte del telefono tornano dov'erano nella v29. */

@media (max-width: 900px) {
  .yl-orbita { height: 70svh; }
  .yl-fatto--1 { top: 8%;  left: 8%;  right: auto; }
  .yl-fatto--2 { top: 30%; right: 8%; left: auto; }
  .yl-fatto--3 { top: 54%; left: 8%;  right: auto; }
  .yl-fatto--4 { top: 78%; right: 8%; left: auto; }
}

/* 48. La scia torna, e il pianeta smette di tagliare netto.
       Il bordo del pianeta era una circonferenza secca contro il fondo della
       sezione: si vedeva il ritaglio. Ora una maschera lo fa svanire salendo,
       così l'orizzonte si perde nel buio invece di finire di colpo. */

.yl-storia__scia {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 15vw;
  height: 3px;
  z-index: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, rgba(214, 134, 23, .7), transparent);
  transform-origin: 0 50%;
  transform: scaleX(0);
  margin: 0;
  align-self: auto;
  width: auto;
}
.yl-storia__pianeta {
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 62%, transparent 84%);
  mask-image: radial-gradient(circle at 50% 50%, #000 62%, transparent 84%);
  opacity: .85;
}

@supports (animation-timeline: view()) {
  .yl-storia__scia {
    animation: yl-scia linear both;
    animation-timeline: --storia;
    animation-range: contain 0% contain 92%;
  }
}
@supports not (animation-timeline: view()) { .yl-storia__scia { display: none; } }
@media (prefers-reduced-motion: reduce) { .yl-storia__scia { display: none; } }

/* 49. "Non stai scegliendo un profumo" era troppo grande e in tono da titolo.
       È una frase di chiusura, non un titolo: scende di misura e di peso. */

.yl-storia__passo--4 {
  font-size: clamp(17px, 1.5vw, 22px) !important;
  font-weight: 500 !important;
  line-height: 1.45;
  letter-spacing: 0.01em;
  max-width: 30ch;
  margin-inline: auto;
}

/* 50. Le tre prove diventano tile piccole con l'icona sopra. */

.yl-prove {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 26px);
  margin: var(--wp--preset--spacing--20) 0;
}
.yl-prova {
  padding: clamp(16px, 2vw, 24px);
  border: 3px solid #1B0A08;
  border-radius: 22px;
  background: #170826;
  box-shadow: 0 5px 0 0 #1B0A08;
  text-align: center;
}
.yl-prova__icona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 12px;
  border-radius: 50%;
  border: 2px solid var(--wp--preset--color--viola-chiaro);
  background: rgba(20, 7, 32, .92);
  color: var(--wp--preset--color--oro);
}
.yl-prova h3 {
  font-family: "Titan One", Archivo, sans-serif;
  font-size: clamp(16px, 1.5vw, 20px) !important;
  line-height: 1.2;
  margin: 0 0 8px;
  color: var(--wp--preset--color--crema);
}
.yl-prova p {
  font-size: clamp(13px, 1vw, 15px) !important;
  line-height: 1.5;
  margin: 0;
  opacity: .82;
}
@media (max-width: 780px) {
  .yl-prove { grid-template-columns: 1fr; gap: 14px; }
  .yl-prova { display: grid; grid-template-columns: 54px 1fr; gap: 0 14px; text-align: left; align-items: center; }
  .yl-prova__icona { margin: 0; grid-row: span 2; }
  .yl-prova h3 { margin: 0 0 4px; }
}

/* 51. Il collegamento a WhatsApp: si vede che è cliccabile. */

.yl-whatsapp {
  display: inline-block;
  margin-top: 6px;
  color: var(--wp--preset--color--oro);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid rgba(214, 134, 23, .45);
  transition: color .18s ease, border-color .18s ease;
}
.yl-whatsapp:hover,
.yl-whatsapp:focus-visible {
  color: var(--wp--preset--color--crema);
  border-color: var(--wp--preset--color--crema);
}

/* 52. Sul telefono: il bottone finale al centro e il piè di pagina tutto
       centrato, colonne comprese. Impilate e allineate a sinistra sembravano
       tre elenchi buttati lì. */

@media (max-width: 780px) {
  .yl-stelle .wp-block-buttons { justify-content: center; }

  .yl-footer,
  .yl-footer .wp-block-column,
  .yl-footer p,
  .yl-footer h3 { text-align: center; }
  .yl-footer .wp-block-columns { gap: var(--wp--preset--spacing--20); }
  .yl-footer .wp-block-site-logo { display: flex; justify-content: center; }
  .yl-footer .wp-block-social-links { justify-content: center; }
  .yl-footer .wp-block-column { flex-basis: 100% !important; }
}

/* 53. Il pianeta nuovo si scurisce da solo verso il basso, quindi la maschera
       pesante non serve più: smorzava anche il disegno buono. Resta una
       sfumatura sottile sull'ultimo 16%, che serve solo a togliere il contorno
       nero del cartone, sennò a fare da orizzonte si vede l'arco di cerchio. */

.yl-storia__pianeta {
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 84%, transparent 99%);
  mask-image: radial-gradient(circle at 50% 50%, #000 84%, transparent 99%);
  opacity: 1;
}

/* ═══ Ritocchi: intestazione, storia, prove, piè di pagina ═════════════════ */

/* 54. Intestazione ancora più trasparente quando si scorre: dal 48% al 26%. */

@media (min-width: 901px) {
  html.yl-giu .yl-header {
    background-color: rgba(14, 5, 29, .26) !important;
    backdrop-filter: blur(16px);
    border-bottom-color: rgba(74, 42, 110, .28);
  }
}

/* 55. "Chi è Yumo" cambia a seconda del dispositivo.
       Su desktop il pianeta non funzionava: largo 160vw sotto un palco largo
       il doppio del telefono, la calotta diventava una striscia piatta invece
       che un orizzonte. Lì resta solo Yumo che corre sulla linea dorata.
       Sul telefono il contrario: il pianeta funziona, la linea in mezzo alla
       scena no. */

@media (min-width: 861px) {
  .yl-storia__pianeta { display: none; }
  .yl-storia__yumo { bottom: 16vh; }
  .yl-storia__scia { bottom: 15vh; }
}
@media (max-width: 860px) {
  .yl-storia__scia { display: none; }
  /* il pianeta non deve finire di netto contro la sezione dopo: la sezione
     stessa sfuma nel buio negli ultimi 18svh */
  .yl-storia__perno::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 18svh;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, var(--wp--preset--color--fondo-scuro) 88%);
  }
}

/* 56. Yumo si vedeva schiacciato.
       Con `content: url()` l'immagine cambia ma le proporzioni no: il riquadro
       resta quello del file vecchio, 1024×903, mentre il nuovo è 620×815. Va
       dichiarato il rapporto giusto, sennò lo stira. */

.yl-storia__yumo img {
  aspect-ratio: 620 / 815;
  height: auto;
  object-fit: contain;
}

/* 57. Le prove su fondo chiaro, con le emoji al posto dei disegni. */

.yl-prova {
  background: #F6F1E6;
  color: #2A1206;
}
.yl-prova h3 { color: #8A4E08; }
.yl-prova p { color: #3A2412; opacity: 1; }
.yl-prova__icona {
  border: 2px solid #1B0A08;
  background: #FFF9EC;
  font-size: 26px;
  line-height: 1;
}

/* 58. Il bottone di "Pronto per il viaggio?" era allineato a sinistra mentre
       il testo sopra è centrato. Ora è centrato anche lui, su tutte le misure. */

.yl-stelle .wp-block-buttons {
  display: flex;
  justify-content: center;
}

/* 59. La riga legale del piè di pagina: centrata ovunque, e sul telefono
       spezzata in tre righe invece di una filza. */

.yl-legale { text-align: center; }
.yl-legale span:not(:last-child)::after { content: " · "; }
@media (max-width: 780px) {
  .yl-legale span { display: block; }
  .yl-legale span:not(:last-child)::after { content: none; }
  .yl-legale { line-height: 1.9; }
}

/* ═══ Leggibilità sul telefono, e i vuoti fra le sezioni ═══════════════════ */

/* 60. Le scritte in orbita finivano sopra al flacone.
       Il flacone occupa la fascia centrale, da circa il 37% al 63% della
       larghezza. Con le scritte all'8% e larghe fino al 40vw arrivavano al 48%,
       cioè dentro. Ora partono dal 2% e si fermano al 34vw: si chiudono appena
       prima del vetro. */

@media (max-width: 900px) {
  .yl-fatto { max-width: 34vw; }
  .yl-fatto--1 { top: 8%;  left: 2%;  right: auto; }
  .yl-fatto--2 { top: 30%; right: 2%; left: auto; }
  .yl-fatto--3 { top: 54%; left: 2%;  right: auto; }
  .yl-fatto--4 { top: 78%; right: 2%; left: auto; }
}

/* 61. Il racconto di Yumo: quando lui ci passa davanti il testo spariva.
       Un alone scuro attorno alle lettere lo tiene leggibile sopra qualsiasi
       cosa, senza mettere un riquadro che si vedrebbe. */

@media (max-width: 860px) {
  .yl-storia__testi :is(h2, p) {
    text-shadow:
      0 2px 10px rgba(14, 5, 29, .95),
      0 0 22px rgba(14, 5, 29, .9),
      0 0 3px rgba(14, 5, 29, .85);
  }
}

/* 62. I cerchi delle prove gialli, non bianchi. */

.yl-prova__icona {
  background: var(--wp--preset--color--oro);
  border-color: #1B0A08;
}

/* 63. Yumo che spruzza, in chiusura: più grande, e straborda dalla colonna. */

@media (min-width: 861px) {
  .yl-stelle .yl-fluttua {
    width: 122%;
    max-width: none;
    margin-left: -11%;
  }
  .yl-stelle .yl-fluttua img { width: 100%; height: auto; }
}

/* 64. I vuoti fra una sezione e l'altra.
       Ogni sezione aveva 60-104 px di riempimento sopra E sotto: fra due
       sezioni vicine si sommavano, fino a 208 px di niente. Scendono a 40-72,
       quindi al massimo 144, e i divisori tratteggiati passano da 64 a 34 px
       di margine. Le sezioni con lo spazio giusto restano tali: quello che
       tolgo è solo il raddoppio. */

main > *:not(.yl-scena):not(.yl-storia) {
  padding-top: clamp(40px, 5vw, 72px) !important;
  padding-bottom: clamp(40px, 5vw, 72px) !important;
}
main .wp-block-separator.is-style-yl-tratteggiato {
  margin-top: 34px !important;
  margin-bottom: 34px !important;
}
main > *:not(.yl-scena) .wp-block-columns { margin-top: 26px; }

@media (max-width: 780px) {
  main > *:not(.yl-scena):not(.yl-storia) {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }
  main .wp-block-separator.is-style-yl-tratteggiato {
    margin-top: 26px !important;
    margin-bottom: 26px !important;
  }
}

/* 65. Il menù si ritira come una tendina, non sparisce di colpo.
       Prima era una dissolvenza da 0,24 s: scorrendo spariva tutto insieme.
       Ora scorre verso l'alto in 0,42 s con una curva che parte veloce e
       rallenta alla fine, come una tapparella che si riavvolge. Scende allo
       stesso modo quando la apri.

       Niente più dissolvenza: se una tendina scompare invece di risalire non
       sembra una tendina. */

.yl-tendina {
  opacity: 1;
  transform: translateY(-100%);
  transition: transform .42s cubic-bezier(.32, .72, .24, 1);
  will-change: transform;
}
.yl-tendina--aperta { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .yl-tendina { transition: opacity .2s ease; transform: none; opacity: 0; }
  .yl-tendina--aperta { opacity: 1; }
}

/* ═══ Chiusura e piè di pagina sul telefono ════════════════════════════════ */

/* 66. Sul telefono Yumo che spruzza se ne va.
       Nascondere solo la figura lascerebbe in piedi la colonna che la
       contiene, e quella continuerebbe a occupare spazio: sparisce tutta.
       Poi si stringe quello che resta fra la fine della sezione e il piè di
       pagina, che erano due riempimenti sommati. */

@media (max-width: 780px) {
  .yl-stelle .wp-block-column:last-child { display: none; }
  .yl-stelle .wp-block-columns { gap: 0; margin: 0; }

  main > .yl-stelle:last-of-type { padding-bottom: 18px !important; }
  .yl-footer { padding-top: 22px !important; }
}

/* 67. Il piè di pagina sul telefono torna a colonne.
       Tutto impilato diventava una filza lunghissima da scorrere. Le due
       liste di collegamenti stanno affiancate, mentre il logo in cima e i
       contatti in fondo prendono tutta la larghezza: sono i due blocchi che
       stretti in mezza colonna andrebbero a capo male. */

@media (max-width: 780px) {
  .yl-footer .wp-block-columns {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 26px 16px;
    align-items: start;
  }
  .yl-footer .wp-block-column {
    flex-basis: auto !important;
    margin: 0 !important;
  }
  .yl-footer .wp-block-column:first-child,
  .yl-footer .wp-block-column:last-child { grid-column: 1 / -1; }
  .yl-footer h3 { margin-bottom: 8px; }
  .yl-footer p { line-height: 2; }
}

/* 68. La combinazione A: scheda crema, cerchio nel viola del sito.
       L'oro dietro alle emoji le sporcava: bandiera e maglietta hanno già i
       loro colori e su fondo caldo diventavano una macchia sola. Sul viola
       staccano. E il titolo passa da 3,1 a 12,6 di contrasto.

       La bandiera non è più una emoji: Windows non ha il font delle bandiere e
       la rendeva come le due lettere "IT". Disegnata a mano, si vede ovunque. */

.yl-prova__icona {
  background: var(--wp--preset--color--fondo);
  border: 2px solid #1B0A08;
  color: var(--wp--preset--color--crema);
}
.yl-prova__icona--bandiera { line-height: 0; }
.yl-prova__icona--bandiera svg { display: block; }
.yl-prova h3 { color: var(--wp--preset--color--fondo); }
.yl-prova p { color: #4A3728; }

/* ═══ Ombra alle scritte, 150 ml, piè di pagina a due colonne ══════════════ */

/* 69. Le scritte in orbita stanno davanti al flacone, e l'etichetta sotto è
       piena di colori: senza un alone le lettere ci si perdono dentro. Vale su
       tutte le misure, non solo sul telefono. */

.yl-fatto {
  text-shadow:
    0 2px 9px rgba(14, 5, 29, .95),
    0 0 18px rgba(14, 5, 29, .85),
    0 0 3px rgba(14, 5, 29, .8);
}

/* 70. Il "150 ml" era troppo vicino al bordo rispetto agli altri tre. */

@media (max-width: 900px) {
  .yl-fatto--1 { left: 9%; }
}

/* 71. Il piè di pagina sul telefono, in tre fasce.
       Sopra il sigillo grande a sinistra con la frase a destra: sono già una
       coppia, tenerli incolonnati sprecava mezza larghezza.
       In mezzo i due elenchi affiancati, uno allineato a sinistra e l'altro a
       destra, così il vuoto sta in mezzo e non ai lati.
       Sotto le quattro icone, che ora sono l'unico modo di scriverci. */

@media (max-width: 780px) {
  .yl-footer__marchio,
  .yl-footer__social { grid-column: 1 / -1; }

  .yl-footer__marchio {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: center;
  }
  .yl-footer__marchio .wp-block-site-logo {
    display: block;
    justify-content: flex-start;
    margin: 0;
  }
  .yl-footer__marchio .wp-block-site-logo img { width: 92px; max-width: none; }
  .yl-footer__marchio p { margin: 0; text-align: left; }

  .yl-footer .wp-block-column:nth-child(2) :is(h3, p) { text-align: left; }
  .yl-footer .wp-block-column:nth-child(3) :is(h3, p) { text-align: right; }

  .yl-footer__social { margin-top: 4px; }
  .yl-footer__social .wp-block-social-links {
    justify-content: center;
    gap: 18px;
  }
  .yl-footer__social .wp-block-social-link { width: 30px; height: 30px; }
  .yl-footer__social .wp-block-social-link svg { width: 26px; height: 26px; }
}

/* 72. Mentre si tira, la tendina non deve avere la transizione: seguirebbe il
       dito con mezzo secondo di ritardo. Torna a scorrere da sola appena
       lasci, che sia per chiudersi o per rimettersi a posto. */

/* la classe del trascinamento non serve piu': la tendina non segue piu' il
   dito, risale e basta appena il gesto supera dodici pixel. */

/* 73. La frase di chiusura ha ESATTAMENTE lo stile di "CHI E' YUMO".
       Prima gli avevo scritto io la famiglia a mano e una misura diversa:
       somigliava ma non era la stessa cosa. Ora non dichiaro nessun font e
       lascio che erediti dal genitore, che e' lo stesso dell'occhiello: cosi'
       non possono divergere nemmeno cambiando il tema. Misura, peso,
       spaziatura e maiuscolo sono copiati uno per uno.

       Cambia solo l'interlinea, perche' l'occhiello e' una riga sola mentre
       questa ne fa due o tre, e in maiuscolo spaziato senza aria non si legge. */

.yl-storia__passo--4 {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 2;
  max-width: 42ch;
  margin-inline: auto;
}

/* ═══ Il cielo che respira ═════════════════════════════════════════════════
   Le stelle erano un disegno fermo: sei sfumature radiali ripetute su un solo
   strato. Un solo strato può solo pulsare tutto insieme, che non è un cielo,
   è un semaforo.

   Quindi tre strati di stelle ferme con ritmi e sfasature diverse — 11, 6,4 e
   8,9 secondi — così in ogni istante alcune sono accese e altre spente, e non
   si riconosce un ciclo. Piu' due strati di SCINTILLE: stelle piu' grandi con
   un alone morbido, che restano spente per quasi tutto il giro e lampeggiano
   per un attimo.

   Il trucco delle scintille sta nella misura della trama: 1100x780 px invece
   di 300, quindi su uno schermo se ne vedono una o due alla volta invece di
   una griglia intera. Lampeggiando sembra che sia brillata QUELLA stella lì,
   non tutto il cielo.

   Costa niente: si anima solo l'opacita', che la scheda grafica gestisce
   senza ridisegnare nulla. */

main::before {
  animation: yl-respira-a 11s ease-in-out infinite alternate;
}

main::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.3px 1.3px at 27% 33%, #FFF3DA 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 74% 71%, #F9E5C1 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 46% 14%, #D68617 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 91% 26%, #F9E5C1 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 15% 59%, #FFF3DA 50%, transparent 51%);
  background-size: 260px 260px, 410px 410px, 320px 320px, 480px 480px, 355px 355px;
  animation: yl-respira-b 6.4s ease-in-out infinite alternate -2.1s;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 63% 41%, #F9E5C1 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 33% 86%, #FFF3DA 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 81% 8%,  #D68617 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 4% 37%,  #F9E5C1 50%, transparent 51%);
  background-size: 440px 440px, 295px 295px, 505px 505px, 370px 370px;
  animation: yl-respira-c 8.9s ease-in-out infinite alternate -4.7s;
}

/* le scintille: rade, con l'alone, spente per quasi tutto il giro */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(3.2px 3.2px at 22% 30%, #FFF8E8 0 20%, rgba(249, 229, 193, .5) 36%, transparent 64%),
    radial-gradient(2.6px 2.6px at 78% 66%, #FFF8E8 0 22%, rgba(214, 134, 23, .45) 38%, transparent 66%);
  background-size: 1100px 780px, 1360px 940px;
  animation: yl-scintilla 13s linear infinite;
}

@keyframes yl-respira-a { from { opacity: .48; } to { opacity: .92; } }
@keyframes yl-respira-b { from { opacity: .22; } to { opacity: .85; } }
@keyframes yl-respira-c { from { opacity: .30; } to { opacity: .95; } }
@keyframes yl-scintilla {
  0%, 78%, 100% { opacity: 0; }
  84%           { opacity: 1; }
  88%           { opacity: .18; }
  91%           { opacity: .75; }
  95%           { opacity: 0; }
}

/* chi ha chiesto meno movimento vede un cielo fermo, non uno spento */
@media (prefers-reduced-motion: reduce) {
  main::before, main::after, body::before { animation: none; opacity: .7; }
  body::after { display: none; }
}

/* 74. Le quattro icone dei contatti identiche su tutte le misure.
       Sul desktop il blocco social usciva più piccolo e allineato a sinistra,
       perché prendeva le misure predefinite di WordPress. Ora sono le stesse
       del telefono: stessa dimensione, stessa spaziatura, allineate al
       titolo della colonna. */

.yl-footer__social .wp-block-social-links {
  gap: 18px;
  margin: 0;
}
.yl-footer__social .wp-block-social-link { width: 30px; height: 30px; }
.yl-footer__social .wp-block-social-link svg { width: 26px; height: 26px; }

/* ═══ Piè di pagina: tre colonne centrate, contatti sotto ══════════════════ */

/* 75. Sul desktop le tre colonne di contenuto si centrano e i contatti vanno
       a capo da soli, larghi quanto tutta la riga. Le colonne di WordPress
       sono flex e si distribuiscono ai lati: qui serve una griglia, perche'
       "centrato" con quattro elementi di larghezza diversa non esiste. */

@media (min-width: 781px) {
  .yl-footer .wp-block-columns {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 34px 30px;
    justify-items: center;
  }
  .yl-footer .wp-block-column {
    flex-basis: auto !important;
    max-width: 300px;
    text-align: center;
  }
  .yl-footer .wp-block-site-logo { display: flex; justify-content: center; }
  .yl-footer__social {
    grid-column: 1 / -1;
    max-width: none;
    display: flex;
    justify-content: center;
  }
}

/* 76. Sul telefono il marchio torna incolonnato: il sigillo col nome sopra,
       la frase sotto. Il sigillo tondo regge la centratura meglio del logo
       disteso, che a 92 px diventava una striscia. */

@media (max-width: 780px) {
  .yl-footer__marchio {
    display: block;
    text-align: center;
  }
  .yl-footer__marchio .wp-block-site-logo {
    display: flex;
    justify-content: center;
    margin: 0 0 14px;
  }
  .yl-footer__marchio .wp-block-site-logo img {
    content: url("assets/logo-tappo.webp");
    width: 108px;
    height: auto;
    max-width: none;
    aspect-ratio: 1 / 1;
  }
  .yl-footer__marchio p { text-align: center; }
}

/* 77. L'intestazione sembrava uguale anche abbassando l'opacita', e il motivo
       non era l'opacita': era la SFOCATURA.

       Il fondo dell'intestazione e' lo stesso viola della pagina, quindi
       metterlo al 26% invece che al 48% non cambia niente di visibile: viola
       scuro sopra viola scuro. Quello che la faceva sembrare piena era
       `backdrop-filter: blur(16px)`, che spappolava tutto quello che ci
       passava sotto: senza niente di riconoscibile dietro, il cervello la
       legge come una superficie solida.

       Sfocatura da 16 a 4 px e fondo al 10%: adesso il titolo che scorre sotto
       si vede davvero, e l'intestazione diventa un vetro. */

@media (min-width: 901px) {
  html.yl-giu .yl-header {
    background-color: rgba(14, 5, 29, .10) !important;
    backdrop-filter: blur(4px);
    border-bottom-color: rgba(74, 42, 110, .22);
  }
}

/* 78. Il piè di pagina sul desktop, rimesso a posto.
       Le tre colonne erano larghe uguali e sparse su tutta la pagina: quella
       del marchio, che ha due frasi, andava a capo tre volte mentre le altre
       due avevano tre parole e metri di vuoto intorno.

       Ora il blocco è largo 940 px al massimo e centrato, e la prima colonna
       vale una volta e mezza le altre. Con 420 px la frase da 47 caratteri ci
       sta in una riga sola, quindi il testo sotto al logo ne occupa due, che
       sono le due frasi vere. */

@media (min-width: 781px) {
  .yl-footer .wp-block-columns {
    max-width: 940px;
    margin-inline: auto;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px 44px;
    align-items: start;
  }
  .yl-footer .wp-block-column { max-width: none; }
  .yl-footer__marchio { max-width: 420px; }
  .yl-footer__marchio p { text-wrap: balance; }
  .yl-footer h3 { margin-bottom: 12px; }
  .yl-footer__social { margin-top: 4px; }
  .yl-legale { max-width: 940px; margin-inline: auto; }
}

/* ═══ La scheda prodotto, nello stile del sito ═════════════════════════════
   WooCommerce arriva con la sua grafica: riquadri squadrati, bottoni piatti,
   schede grigie. Qui la si riporta dentro al mondo del sito senza toccare i
   suoi modelli, solo con lo stile: cosi' un aggiornamento del plugin non
   cancella niente.

   La foto del prodotto diventa una polaroid appesa, come quelle dei mondi:
   cornice crema, contorno nero, molletta sopra e un dondolio lentissimo. */

.woocommerce div.product,
.woocommerce-page div.product {
  color: var(--wp--preset--color--crema);
}

/* ── La foto come polaroid appesa ───────────────────────────────────────── */

.woocommerce div.product .woocommerce-product-gallery {
  position: relative;
  padding: 34px 14px 14px;
  margin-top: 30px;
  background: #F4EFE4;
  border: 3px solid #1B0A08;
  border-radius: 4px;
  box-shadow: 0 6px 0 0 rgba(27, 10, 8, .75);
  transform-origin: 50% -16px;
  animation: yl-dondola 7.4s ease-in-out infinite alternate;
  --inclina: -1.6deg;
}
/* la molletta, e il filo che ci passa dietro */
.woocommerce div.product .woocommerce-product-gallery::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  z-index: 2;
  width: 18px;
  height: 34px;
  margin-left: -9px;
  border: 3px solid #1B0A08;
  border-radius: 4px 4px 7px 7px;
  background: linear-gradient(180deg, var(--wp--preset--color--oro) 0 55%, #A85F0C 55% 100%);
}
.woocommerce div.product .woocommerce-product-gallery::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -8vw;
  right: -8vw;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, #7A5730 14%, #7A5730 86%, transparent);
}
.woocommerce div.product .woocommerce-product-gallery__image img {
  border: 2px solid #1B0A08;
  border-radius: 2px;
}
.woocommerce div.product .woocommerce-product-gallery__trigger { display: none; }

/* ── Testi e prezzo ─────────────────────────────────────────────────────── */

.woocommerce div.product .product_title {
  font-family: "Titan One", Archivo, sans-serif;
  font-size: clamp(34px, 5vw, 66px);
  line-height: 1.04;
  text-transform: uppercase;
  color: var(--wp--preset--color--crema);
  margin-bottom: 10px;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: "Titan One", Archivo, sans-serif;
  font-size: clamp(24px, 2.6vw, 34px);
  color: var(--wp--preset--color--oro);
}
.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: clamp(15px, 1.15vw, 18px);
  font-weight: 600;
  line-height: 1.6;
  opacity: .9;
}

/* ── Il bottone: lo stesso caramello che cola ───────────────────────────── */

.woocommerce div.product form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
}
.woocommerce div.product form.cart .quantity input.qty {
  width: 76px;
  height: 58px;
  padding: 0 8px;
  text-align: center;
  font-weight: 700;
  font-size: 17px;
  color: var(--wp--preset--color--crema);
  background: var(--wp--preset--color--fondo-scuro);
  border: 3px solid #1B0A08;
  border-radius: 30px;
}
.woocommerce div.product form.cart button.single_add_to_cart_button,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce a.button.alt, .woocommerce button.button.alt {
  font-family: "Titan One", Archivo, sans-serif;
  font-size: clamp(15px, 1.4vw, 19px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 19px 40px;
  border-radius: 40px;
  border: 3px solid #1B0A08;
  background: var(--wp--preset--color--oro);
  color: #2E1508;
  box-shadow: 0 5px 0 0 #1B0A08;
  transition: background-color .18s ease, color .18s ease, transform .16s ease, box-shadow .16s ease, font-size .18s ease;
}
.woocommerce div.product form.cart button.single_add_to_cart_button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background: #8A4E08;
  color: #FFFFFF;
  transform: translateY(2px);
  box-shadow: 0 3px 0 0 #1B0A08;
}

/* ── Schede, meta, correlati ────────────────────────────────────────────── */

.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin-bottom: 22px; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-bottom-color: var(--wp--preset--color--viola-chiaro); }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: 2px solid var(--wp--preset--color--viola-chiaro);
  border-radius: 24px 24px 0 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: "Titan One", Archivo, sans-serif;
  font-weight: 400;
  color: var(--wp--preset--color--crema);
  text-transform: uppercase;
  font-size: 14px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background: var(--wp--preset--color--fondo);
  border-color: #1B0A08;
}
.woocommerce div.product .woocommerce-tabs .panel {
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.7;
}
.woocommerce div.product .product_meta {
  font-size: 13px;
  opacity: .7;
  border-top: 1px dashed var(--wp--preset--color--viola-chiaro);
  padding-top: 16px;
  margin-top: 22px;
}
.woocommerce .related.products > h2,
.woocommerce div.product .woocommerce-tabs h2 {
  font-family: "Titan One", Archivo, sans-serif;
  text-transform: uppercase;
}
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info {
  background: #170826;
  border: 3px solid #1B0A08;
  border-radius: 20px;
  border-top-color: #1B0A08;
  color: var(--wp--preset--color--crema);
}
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before { color: var(--wp--preset--color--oro); }

@media (max-width: 780px) {
  .woocommerce div.product .woocommerce-product-gallery { margin-top: 24px; }
  .woocommerce div.product form.cart { gap: 10px; }
  .woocommerce div.product form.cart button.single_add_to_cart_button { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .woocommerce div.product .woocommerce-product-gallery { animation: none; transform: rotate(-1.6deg); }
}

/* 79. La polaroid del prodotto usciva dallo schermo sul telefono.
       Due cause sommate. La prima: il filo e' un elemento assoluto largo
       -8vw da una parte e -8vw dall'altra, cioe' sedici punti di viewport in
       PIU' della pagina. Su desktop non si notava perche' avanzava margine, su
       telefono no, e faceva comparire lo scorrimento orizzontale.
       La seconda: nessun tetto alla larghezza, quindi la cornice prendeva
       tutta la colonna e il contorno da 3 px ci si aggiungeva sopra.

       Ora il filo si allarga in percentuale della cornice, non dello schermo,
       e la scheda taglia quello che esce comunque. */

.woocommerce div.product { overflow-x: clip; }
.woocommerce div.product .woocommerce-product-gallery::after {
  left: -7%;
  right: -7%;
}
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product div.images {
  box-sizing: border-box;
  max-width: 100%;
}

@media (max-width: 780px) {
  .woocommerce div.product .woocommerce-product-gallery {
    max-width: min(78vw, 330px);
    margin-inline: auto;
    padding: 28px 11px 11px;
  }
  .woocommerce div.product .woocommerce-product-gallery::before {
    top: -12px;
    width: 15px;
    height: 29px;
    margin-left: -7.5px;
  }
  .woocommerce div.product .product_title { font-size: clamp(30px, 8vw, 44px); }
}

/* 80. Via la pastiglia "In offerta": il prezzo e' uno solo e non c'e' niente
       da confrontare, quindi quella scritta prometterebbe uno sconto che non
       esiste. */

.woocommerce span.onsale { display: none !important; }

/* 81. Via la traccia di navigazione sopra al prodotto.
       "Home / Negozio / Caramel" ha senso in un catalogo dove ci si perde. Con
       un prodotto solo, e col negozio che rimanda qui, indicherebbe una strada
       che gira su se stessa. */

.woocommerce .woocommerce-breadcrumb,
.woocommerce-page .woocommerce-breadcrumb { display: none !important; }

/* 82. Tolta la traccia di navigazione, sopra al prodotto restava il suo posto
       vuoto: la prima sezione della pagina teneva il riempimento previsto per
       le pagine normali. Sulla scheda prodotto la prima sezione parte da zero.

       E la polaroid scende: era tarata sulla colonna piena, ma con la cornice
       e il contorno prendeva troppo. */

body.single-product main > *:first-child { padding-top: 0 !important; }
body.single-product .woocommerce-notices-wrapper:empty { display: none; }
body.single-product div.product { margin-top: 0; }

.woocommerce div.product .woocommerce-product-gallery {
  max-width: 380px;
  margin-top: 22px;
}

@media (max-width: 780px) {
  .woocommerce div.product .woocommerce-product-gallery {
    max-width: min(64vw, 260px);
    margin-top: 16px;
    padding: 24px 9px 9px;
  }
  .woocommerce div.product .woocommerce-product-gallery::before {
    top: -11px;
    width: 14px;
    height: 26px;
    margin-left: -7px;
  }
}

/* ═══ Scheda prodotto: galleria, quantità, pagamenti ═══════════════════════ */

/* 83. La polaroid a sinistra sul desktop, senza rimpicciolirla. */

@media (min-width: 781px) {
  .woocommerce div.product .woocommerce-product-gallery {
    margin-left: 0;
    margin-right: auto;
  }
}

/* 84. Le frecce ai lati della polaroid.
       Stanno FUORI dalla cornice, appoggiate sui bordi: dentro coprirebbero la
       foto, che e' l'unica cosa che si deve guardare. Le miniature sotto non
       ci sono piu' — spente in PHP, quindi non vengono proprio generate. */

.woocommerce div.product .flex-control-thumbs,
.woocommerce div.product .flex-control-nav { display: none !important; }

.woocommerce div.product .flex-direction-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}
.woocommerce div.product .flex-direction-nav a {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 46px;
  height: 46px;
  margin-top: -23px;
  border-radius: 50%;
  border: 3px solid #1B0A08;
  background: var(--wp--preset--color--oro);
  box-shadow: 0 4px 0 0 #1B0A08;
  text-indent: -9999px;
  overflow: hidden;
  opacity: 1;
  transition: background-color .18s ease, transform .16s ease, box-shadow .16s ease;
}
.woocommerce div.product .flex-direction-nav a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 13px;
  margin: -7px 0 0 -4px;
  border-left: 3px solid #2E1508;
  border-bottom: 3px solid #2E1508;
  border-radius: 2px;
  transform: rotate(45deg);
}
.woocommerce div.product .flex-direction-nav a.flex-next::before {
  margin-left: -9px;
  transform: rotate(-135deg);
}
.woocommerce div.product .flex-direction-nav a.flex-prev { left: -23px; }
.woocommerce div.product .flex-direction-nav a.flex-next { right: -23px; }
.woocommerce div.product .flex-direction-nav a:hover {
  background: #8A4E08;
  transform: translateY(2px);
  box-shadow: 0 2px 0 0 #1B0A08;
}
.woocommerce div.product .flex-direction-nav a:hover::before {
  border-color: var(--wp--preset--color--crema);
}
/* la cornice non deve tagliare le frecce che sporgono */
.woocommerce div.product .woocommerce-product-gallery { overflow: visible; }

/* 85. Il selettore di quantità era scuro su scuro: non si vedeva.
       Fondo chiaro e numero scuro, come i campi di un modulo vero. */

.woocommerce div.product form.cart .quantity input.qty {
  background: #F6F1E6;
  color: #2A1206;
}
.woocommerce div.product form.cart .quantity input.qty:focus {
  outline: none;
  border-color: var(--wp--preset--color--oro);
  box-shadow: 0 0 0 3px rgba(214, 134, 23, .3);
}

/* 86. Apple Pay e Google Pay.
       I due bottoni NON si possono vestire come gli altri: Apple impone la sua
       grafica per contratto, e tutti e due arrivano dentro una cornice esterna
       che dall'esterno non si puo' toccare. Quello che si puo' fare e' dargli
       aria e una cornice attorno, e separarli dal bottone del carrello con una
       riga che dice cosa sono. */

.woocommerce div.product .wc-stripe-product-checkout-container,
.woocommerce div.product .wcpay-payment-request-wrapper,
.woocommerce div.product .payment_method_paypal .paypal-buttons,
.woocommerce div.product .wc-apple-pay-button,
.woocommerce div.product #wc-stripe-payment-request-wrapper {
  margin-top: 26px !important;
  padding: 18px;
  border: 3px dashed var(--wp--preset--color--viola-chiaro);
  border-radius: 24px;
  background: rgba(14, 5, 29, .4);
}
.woocommerce div.product .wc-stripe-product-checkout-container::before,
.woocommerce div.product #wc-stripe-payment-request-wrapper::before {
  content: "Oppure paga in un tocco";
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--oro);
  text-align: center;
}
.woocommerce div.product .wc-stripe-payment-request-button-separator { display: none !important; }

/* ═══ Scheda prodotto: quello che ho scoperto misurandola ══════════════════
   Il sito usa i BLOCCHI di WooCommerce, non i vecchi modelli PHP. Per questo
   i `remove_action` di prima non toglievano niente: quegli agganci esistono
   solo nella strada vecchia. Restano come rete di sicurezza se un domani si
   torna a un modello classico, ma qui comanda quello che segue. */

/* 87. I 300 px di vuoto fra intestazione e prodotto erano DUE BLOCCHI VUOTI.
       Misurato sulla pagina vera: la traccia di navigazione a blocchi (alta 72,
       senza contenuto) e il contenitore degli avvisi (alto 144, senza
       contenuto). Vuoti sì, ma prendevano il riempimento che do a tutte le
       sezioni: 72 px sopra e 72 sotto a testa.

       La traccia sparisce. Gli avvisi restano, perché quando aggiungi al
       carrello ci compare il messaggio, ma senza riempimento: da vuoti non
       occupano più niente. */

body.single-product .wc-block-breadcrumbs { display: none !important; }
body.single-product .wc-block-store-notices { padding: 0 !important; }

/* e sulla scheda prodotto le sezioni non hanno riempimento proprio: si
   distanziano fra loro, che è quello che serve davvero */
body.single-product main > * {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
body.single-product main > * + * { margin-top: 46px; }
body.single-product main > .wp-block-columns { margin-top: 26px; }

/* 88. Categoria, tag e marchi: è il blocco `product-meta`, non il vecchio
       `product_meta`. Ecco perché non spariva. */

.wp-block-woocommerce-product-meta { display: none !important; }

/* 89. Sul telefono il titolo va sopra alla foto.
       Titolo, prezzo e descrizione stanno tutti dentro la seconda colonna,
       quindi non basta invertire le colonne. Con `display: contents` la
       colonna smette di essere una scatola e i suoi figli entrano nella
       stessa fila della foto: da lì si ordinano uno per uno. */

@media (max-width: 780px) {
  body.single-product .wp-block-columns.alignwide {
    display: flex !important;
    flex-direction: column;
    gap: 0;
  }
  body.single-product .wp-block-columns.alignwide > .wp-block-column:last-child {
    display: contents;
  }
  /* Ogni riga qui sotto e' agganciata a `.wp-block-columns.alignwide`, che e'
     il blocco a due colonne della scheda prodotto. Senza quell'aggancio i
     selettori pescano in tutta la pagina, e la pagina non finisce col
     prodotto: sotto c'e' il pie' di pagina, che di colonne ne ha quattro.
     E' andata cosi' con `.wp-block-column:first-child`, che prendeva anche il
     blocco del marchio e lo mandava in fondo, sotto i social, solo qui. */

  body.single-product .wp-block-columns.alignwide .wp-block-post-title { order: 1; margin-bottom: 4px; }
  body.single-product .wp-block-columns.alignwide > .wp-block-column:first-child { order: 2; }
  body.single-product .wp-block-columns.alignwide .wc-block-components-product-rating { order: 3; }
  body.single-product .wp-block-columns.alignwide .wp-block-woocommerce-product-price { order: 4; }
  body.single-product .wp-block-columns.alignwide .wp-block-post-excerpt { order: 5; }
  body.single-product .wp-block-columns.alignwide .wp-block-add-to-cart-form { order: 6; }

  body.single-product .wp-block-columns.alignwide .wp-block-post-title,
  body.single-product .wp-block-columns.alignwide .wc-block-components-product-rating,
  body.single-product .wp-block-columns.alignwide .wp-block-post-excerpt { text-align: center; }

  .woocommerce div.product .woocommerce-product-gallery {
    max-width: min(58vw, 230px);
    margin: 18px auto 22px;
  }
  .woocommerce div.product .flex-direction-nav a {
    width: 40px;
    height: 40px;
    margin-top: -20px;
  }
  .woocommerce div.product .flex-direction-nav a.flex-prev { left: -20px; }
  .woocommerce div.product .flex-direction-nav a.flex-next { right: -20px; }
}

/* 90. E se la lente arriva lo stesso da un altro plugin, la fermiamo qui:
       la cornice della polaroid non deve mai vedere l'immagine crescere. */

.woocommerce div.product .woocommerce-product-gallery__image .zoomImg,
.woocommerce div.product .woocommerce-product-gallery__trigger { display: none !important; }
.woocommerce div.product .woocommerce-product-gallery__image { cursor: default; }

/* 91. Sul telefono la barra galleggia sopra al contenuto: e' fuori dal flusso,
       quindi non spinge giu' niente. Sulla home non si notava perche' l'hero
       comincia con mezzo schermo di cielo, ma su una pagina qualsiasi il primo
       titolo ci finisce sotto.

       La barra e' alta 76 px (10 di riempimento sopra e sotto piu' il tasto da
       56). Do 104 px di aria a tutte le pagine che non sono la home: i 76 della
       barra piu' un margine che la stacca invece di farla sfiorare. */

@media (max-width: 900px) {
  body:not(.home) main { padding-top: 104px !important; }
  body.single-product .wp-block-post-title { margin-top: 0; }
}

/* 92. Sul telefono quantità e carrello sulla stessa riga.
       Prima il bottone aveva `flex: 1 1 100%`, che vuol dire "prenditi tutta la
       riga": andava a capo per forza. Ora il selettore tiene la sua larghezza e
       il bottone si prende quello che resta.

       Conto su uno schermo da 375: tolti i margini restano 343 px, meno 68 del
       selettore e 10 di stacco fanno 265 per il bottone. "AGGIUNGI AL CARRELLO"
       a 14 px ne occupa circa 204 più il riempimento: ci sta, ma la misura è
       elastica così regge anche gli schermi più stretti. */

@media (max-width: 780px) {
  .woocommerce div.product form.cart,
  .woocommerce div.product .wc-block-add-to-cart-form form.cart {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
  }
  .woocommerce div.product form.cart .quantity {
    flex: 0 0 auto;
    margin: 0;
  }
  .woocommerce div.product form.cart .quantity input.qty {
    width: 68px;
    height: 56px;
  }
  .woocommerce div.product form.cart button.single_add_to_cart_button {
    flex: 1 1 auto;
    min-width: 0;
    padding: 18px 14px;
    font-size: clamp(12px, 3.7vw, 16px);
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
}

/* 93. Via il blocco in fondo alla scheda: schede Descrizione e Recensioni,
       modulo per scriverne una compreso.

       La descrizione lunga con i riquadri colorati arriva da un vecchio HTML
       incollato dentro WooCommerce, con gradienti e ombre che il sito non usa
       da nessun'altra parte. Quello che serve al cliente e' gia' scritto in
       alto, e le tre tile "in auto, sul casco, sui capi" lo raccontano meglio
       sulla home. */

.wp-block-woocommerce-product-details,
.woocommerce div.product .woocommerce-tabs { display: none !important; }

/* 94. La polaroid più a sinistra e più staccata dal testo.
       La tiro fuori dalla colonna di un 3% e allargo lo stacco fra le due
       colonne: prima la foto e le parole si sfioravano. */

@media (min-width: 781px) {
  body.single-product .wp-block-columns.alignwide { gap: clamp(34px, 5vw, 72px); }
  .woocommerce div.product .woocommerce-product-gallery { margin-left: -3%; }
}

/* 95. Il prezzo saltava sopra al titolo sul telefono.
       Lo ordinavo per posizione, `il terzo figlio`, ma le stelline compaiono
       solo se c'e' almeno una recensione: senza, tutta la numerazione slitta di
       uno e il prezzo restava senza ordine, cioe' primo. Ora lo aggancio alla
       sua classe: dove sta nella lista non conta piu'.

       E prende il carattere del bottone, che e' il segno piu' forte della
       pagina: se il prezzo e' la cosa da guardare, deve essere scritto come la
       cosa da fare. */

.wp-block-woocommerce-product-price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: "Titan One", Archivo, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.03em;
  color: var(--wp--preset--color--oro) !important;
  line-height: 1.1;
}
.wp-block-woocommerce-product-price { font-size: clamp(30px, 3.4vw, 46px) !important; }
.wp-block-woocommerce-product-price del,
.woocommerce div.product del {
  font-size: .56em;
  opacity: .5;
  color: var(--wp--preset--color--crema) !important;
  margin-right: .3em;
}
.wp-block-woocommerce-product-price ins,
.woocommerce div.product ins { text-decoration: none; background: none; }
/* WooCommerce ci mette una riga per i lettori di schermo: sullo schermo no */
.wp-block-woocommerce-product-price .screen-reader-text { display: none; }

@media (max-width: 780px) {
  .wp-block-woocommerce-product-price {
    order: 4;
    text-align: center;
    margin: 4px 0 14px;
    font-size: clamp(26px, 8vw, 38px) !important;
  }
}

/* 96. Il prezzo col contorno nero, e centrato anche sul desktop.
       Il contorno non e' `-webkit-text-stroke`: quello scava DENTRO la lettera
       e assottiglia il Titan One, che vive di spessore. Sono otto ombre secche
       disposte a raggiera attorno al glifo, piu' una piena sotto: il contorno
       cresce in fuori e le lettere restano piene. Stesso trucco del caramello
       che cola dai bottoni, e funziona su ogni browser. */

.wp-block-woocommerce-product-price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  text-align: center;
  text-shadow:
     2px  2px 0 #1B0A08,
    -2px  2px 0 #1B0A08,
     2px -2px 0 #1B0A08,
    -2px -2px 0 #1B0A08,
     2px  0   0 #1B0A08,
    -2px  0   0 #1B0A08,
     0    2px 0 #1B0A08,
     0   -2px 0 #1B0A08,
     0    5px 0 rgba(27, 10, 8, .55);
}
.wp-block-woocommerce-product-price del,
.woocommerce div.product del {
  text-shadow:
     1px  1px 0 #1B0A08,
    -1px  1px 0 #1B0A08,
     1px -1px 0 #1B0A08,
    -1px -1px 0 #1B0A08;
}

/* ═══ Il mio account, vestito come il resto ════════════════════════════════
   WooCommerce mette il menu' e il contenuto uno sopra l'altro, senza forma:
   sembrava un elenco di collegamenti caduto in mezzo alla pagina. Qui diventa
   due colonne — le voci come tile a sinistra, il contenuto in una scheda a
   destra — con lo stesso contorno nero e la stessa ombra piena di tutto il
   sito.

   Non serve toccare nessun modello di WooCommerce: la struttura che genera va
   benissimo, mancava solo il vestito. */

.woocommerce-account .woocommerce {
  display: grid;
  grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  gap: clamp(18px, 2.4vw, 34px);
  align-items: start;
}

/* ── Le voci come tile ──────────────────────────────────────────────────── */

.woocommerce-account .woocommerce-MyAccount-navigation { float: none; width: auto; }
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li {
  margin: 0;
  border: 3px solid #1B0A08;
  border-radius: 20px;
  background: #170826;
  box-shadow: 0 4px 0 0 #1B0A08;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  font-family: "Titan One", Archivo, sans-serif;
  font-size: 14px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--wp--preset--color--crema);
  text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a::before {
  content: "";
  font-family: system-ui, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  font-size: 18px;
  line-height: 1;
  width: 22px;
  text-align: center;
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--dashboard a::before { content: "\1F3E0"; }
.woocommerce-account .woocommerce-MyAccount-navigation-link--orders a::before { content: "\1F4E6"; }
.woocommerce-account .woocommerce-MyAccount-navigation-link--downloads a::before { content: "\2B07\FE0F"; }
.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-address a::before { content: "\1F4CD"; }
.woocommerce-account .woocommerce-MyAccount-navigation-link--payment-methods a::before { content: "\1F4B3"; }
.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-account a::before { content: "\2699\FE0F"; }
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a::before { content: "\1F6AA"; }

.woocommerce-account .woocommerce-MyAccount-navigation li:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 0 #1B0A08;
  background: rgba(74, 42, 110, .45);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active {
  background: var(--wp--preset--color--oro);
  box-shadow: 0 4px 0 0 #1B0A08;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { color: #2E1508; }

/* ── Il contenuto, in una scheda ────────────────────────────────────────── */

.woocommerce-account .woocommerce-MyAccount-content {
  float: none;
  width: auto;
  padding: clamp(20px, 2.6vw, 34px);
  border: 3px solid #1B0A08;
  border-radius: 26px;
  background: #170826;
  box-shadow: 0 6px 0 0 #1B0A08;
}
.woocommerce-account .woocommerce-MyAccount-content p { text-align: left; }
.woocommerce-account .woocommerce-MyAccount-content a { color: var(--wp--preset--color--oro); }
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
  font-family: "Titan One", Archivo, sans-serif;
  text-transform: uppercase;
  font-size: clamp(19px, 2vw, 26px) !important;
  margin-bottom: 14px;
}

/* ── Tabelle: ordini e download ─────────────────────────────────────────── */

.woocommerce-account .shop_table {
  border: 2px solid var(--wp--preset--color--viola-chiaro);
  border-radius: 18px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
.woocommerce-account .shop_table th {
  background: rgba(74, 42, 110, .35);
  font-family: "Titan One", Archivo, sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--oro);
  padding: 12px 14px;
}
.woocommerce-account .shop_table td {
  padding: 14px;
  border-top: 1px dashed rgba(74, 42, 110, .5);
  font-size: 14px;
}

/* ── Moduli: stessi campi del modulo di iscrizione ──────────────────────── */

.woocommerce-account .woocommerce-Input,
.woocommerce-account input.input-text,
.woocommerce-account select,
.woocommerce-account textarea,
.woocommerce-account .select2-selection {
  width: 100%;
  padding: 14px 18px !important;
  border: 3px solid #1B0A08 !important;
  border-radius: 26px !important;
  background: var(--wp--preset--color--fondo-scuro) !important;
  color: var(--wp--preset--color--crema) !important;
  font-size: 15px;
  font-weight: 600;
  height: auto !important;
}
.woocommerce-account .woocommerce-Input:focus,
.woocommerce-account input.input-text:focus,
.woocommerce-account select:focus,
.woocommerce-account textarea:focus {
  outline: none;
  border-color: var(--wp--preset--color--oro) !important;
  box-shadow: 0 0 0 3px rgba(214, 134, 23, .3);
}
.woocommerce-account label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--oro);
}
.woocommerce-account .form-row { margin-bottom: 16px; }
.woocommerce-account .woocommerce-Address {
  padding: 18px;
  border: 2px dashed var(--wp--preset--color--viola-chiaro);
  border-radius: 20px;
}
.woocommerce-account .woocommerce-Address-title h3 { margin: 0 0 8px; }

/* ── Telefono: le voci diventano una fila di tile, due per riga ─────────── */

@media (max-width: 860px) {
  .woocommerce-account .woocommerce { grid-template-columns: 1fr; }
  .woocommerce-account .woocommerce-MyAccount-navigation ul {
    grid-template-columns: 1fr 1fr;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation li a {
    flex-direction: column;
    gap: 6px;
    padding: 14px 8px;
    font-size: 11px;
    text-align: center;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout { grid-column: 1 / -1; }
  .woocommerce-account .shop_table,
  .woocommerce-account .shop_table thead,
  .woocommerce-account .shop_table tbody,
  .woocommerce-account .shop_table tr,
  .woocommerce-account .shop_table td { display: block; width: auto; }
  .woocommerce-account .shop_table thead { display: none; }
  .woocommerce-account .shop_table tr {
    margin-bottom: 12px;
    border: 2px solid var(--wp--preset--color--viola-chiaro);
    border-radius: 16px;
    padding: 6px 10px;
  }
  .woocommerce-account .shop_table td { border: 0; padding: 8px 0; text-align: right; }
  .woocommerce-account .shop_table td::before {
    content: attr(data-title);
    float: left;
    font-weight: 700;
    color: var(--wp--preset--color--oro);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.06em;
  }
}

/* 97. Il contorno che compare cliccando un collegamento.
       Non si toglie e basta: quel contorno e' l'unico modo che ha chi naviga
       col tabulatore di sapere dove si trova. Toglierlo del tutto rende il
       sito inservibile da tastiera, e in Italia per un negozio online e' anche
       un rischio.

       `:focus-visible` distingue i due casi: il browser lo accende quando
       arrivi col tabulatore e lo lascia spento quando arrivi col mouse. Quindi
       tolgo il contorno solo quando NON e' visibile, cioe' esattamente il caso
       che ti da' fastidio. Da tastiera resta, ed e' anche piu' evidente. */

:where(a, button, [role="button"], input, select, textarea):focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}
:where(a, button, [role="button"]):focus-visible {
  outline: 3px solid var(--wp--preset--color--oro);
  outline-offset: 3px;
  border-radius: 6px;
}

/* 98. Menu' e contenuto erano scambiati.
       Misurato: la griglia c'era davvero, `250px 716px`, ma il menu' occupava
       i 716 e il contenuto i 250. Il motivo e' che in questa pagina il
       CONTENUTO viene prima del menu' nel documento, e una griglia riempie le
       colonne nell'ordine in cui trova i figli.

       Assegnare la colonna per nome invece che per posizione risolve e non si
       puo' piu' rompere: qualunque ordine abbia il markup, il menu' sta a
       sinistra e il contenuto a destra. */

.woocommerce-account .woocommerce-MyAccount-navigation { grid-column: 1; grid-row: 1; }
.woocommerce-account .woocommerce-MyAccount-content   { grid-column: 2; grid-row: 1; }

@media (max-width: 860px) {
  .woocommerce-account .woocommerce-MyAccount-navigation { grid-column: 1; grid-row: 1; }
  .woocommerce-account .woocommerce-MyAccount-content   { grid-column: 1; grid-row: 2; }
}

/* 99. Tile e campi chiari con la scritta scura.
       Sul viola le voci non lette si confondevano col fondo: adesso sono
       schede crema, come quelle delle prove sulla home. L'oro resta alla voce
       aperta, che cosi' si riconosce a colpo d'occhio. */

.woocommerce-account .woocommerce-MyAccount-navigation li {
  background: #F6F1E6;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a { color: #2A1206; }
.woocommerce-account .woocommerce-MyAccount-navigation li:hover {
  background: #FFF9EC;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active {
  background: var(--wp--preset--color--oro);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { color: #2E1508; }

.woocommerce-account .woocommerce-Input,
.woocommerce-account input.input-text,
.woocommerce-account select,
.woocommerce-account textarea {
  background: #F6F1E6 !important;
  color: #2A1206 !important;
}
.woocommerce-account .woocommerce-Input::placeholder,
.woocommerce-account input.input-text::placeholder { color: rgba(42, 18, 6, .5); }

/* 100. Gli avvisi di WooCommerce dentro all'account arrivavano bianchi e
        squadrati, con l'icona blu di sistema. Vestiti come il resto. */

.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-error,
.woocommerce-account .wc-block-components-notice-banner {
  padding: 16px 18px;
  border: 3px solid #1B0A08;
  border-radius: 20px;
  background: #F6F1E6;
  color: #2A1206;
  box-shadow: 0 4px 0 0 #1B0A08;
  font-weight: 600;
  font-size: 15px;
}
.woocommerce-account .wc-block-components-notice-banner > svg { fill: #8A4E08; }
.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-message::before { color: #8A4E08; }
.woocommerce-account .woocommerce-info a,
.woocommerce-account .woocommerce-message a { color: #8A4E08; }

/* 101. "Lavora con noi" nel menù sta sotto e staccata: non è una sezione del
        sito come le altre, è una porta di servizio. Più piccola delle voci
        principali e con una riga tratteggiata sopra che la separa. */

.yl-tendina__lavora {
  margin-top: 4px;
  width: min(70vw, 340px);
  text-align: center;
  font-family: Archivo, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--crema);
  opacity: .72;
  text-decoration: none;
  transition: color .18s ease, opacity .18s ease;
}
.yl-tendina__lavora:hover,
.yl-tendina__lavora:focus-visible {
  color: var(--wp--preset--color--oro);
  opacity: 1;
}

/* ═══ Carrello e cassa ═════════════════════════════════════════════════════
   Sono le pagine classiche di WooCommerce, quelle a shortcode: tabelle nude e
   riquadri grigi. Vestite come il resto senza toccare i modelli. */

.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce { color: var(--wp--preset--color--crema); }

.woocommerce table.shop_table {
  border: 3px solid #1B0A08;
  border-radius: 22px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: #170826;
  box-shadow: 0 5px 0 0 #1B0A08;
}
.woocommerce table.shop_table th {
  background: rgba(74, 42, 110, .38);
  font-family: "Titan One", Archivo, sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--oro);
  padding: 14px 16px;
  border: 0;
}
.woocommerce table.shop_table td {
  padding: 16px;
  border: 0;
  border-top: 1px dashed rgba(74, 42, 110, .55);
  font-size: 15px;
  vertical-align: middle;
}
.woocommerce table.shop_table td.product-thumbnail img {
  width: 74px;
  border: 2px solid #1B0A08;
  border-radius: 12px;
}
.woocommerce table.shop_table .product-name a { color: var(--wp--preset--color--crema); font-weight: 700; }
.woocommerce table.shop_table .product-remove a.remove {
  color: var(--wp--preset--color--oro) !important;
  font-size: 22px;
  line-height: 1;
}
.woocommerce table.shop_table .product-remove a.remove:hover {
  background: transparent;
  color: #FFFFFF !important;
}

.woocommerce .quantity input.qty,
.woocommerce-cart .quantity input.qty {
  width: 74px;
  padding: 12px 6px;
  text-align: center;
  border: 3px solid #1B0A08;
  border-radius: 26px;
  background: #F6F1E6;
  color: #2A1206;
  font-weight: 700;
}

.woocommerce .cart .coupon { display: flex; gap: 10px; align-items: center; }
.woocommerce #coupon_code,
.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
  padding: 13px 18px !important;
  border: 3px solid #1B0A08 !important;
  border-radius: 26px !important;
  background: #F6F1E6 !important;
  color: #2A1206 !important;
  font-weight: 600;
  height: auto !important;
  width: 100%;
}
.woocommerce #coupon_code { width: auto; min-width: 180px; }

.woocommerce .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order,
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
  padding: clamp(18px, 2.4vw, 30px);
  border: 3px solid #1B0A08;
  border-radius: 26px;
  background: #170826;
  box-shadow: 0 5px 0 0 #1B0A08;
}
.woocommerce .cart_totals h2,
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
  font-family: "Titan One", Archivo, sans-serif;
  text-transform: uppercase;
  font-size: clamp(18px, 1.9vw, 24px) !important;
  color: var(--wp--preset--color--crema);
  margin-bottom: 14px;
}
.woocommerce .cart_totals .order-total .woocommerce-Price-amount {
  font-family: "Titan One", Archivo, sans-serif;
  font-size: clamp(20px, 2.2vw, 28px);
  color: var(--wp--preset--color--oro);
}
.woocommerce-checkout label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--oro);
}
.woocommerce-checkout .form-row { margin-bottom: 14px; }
.woocommerce-checkout #payment {
  background: transparent;
  border-radius: 0;
}
.woocommerce-checkout #payment ul.payment_methods {
  border: 0;
  padding: 0;
  margin: 0 0 16px;
}
.woocommerce-checkout #payment ul.payment_methods li {
  padding: 12px 14px;
  margin-bottom: 10px;
  border: 2px solid var(--wp--preset--color--viola-chiaro);
  border-radius: 18px;
  background: rgba(14, 5, 29, .4);
  list-style: none;
}
.woocommerce-checkout #payment div.payment_box {
  background: rgba(74, 42, 110, .3);
  border-radius: 14px;
  color: var(--wp--preset--color--crema);
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }

/* le tabelle diventano schede sul telefono, come nell'account */
@media (max-width: 780px) {
  .woocommerce table.shop_table.cart,
  .woocommerce table.shop_table.cart tbody,
  .woocommerce table.shop_table.cart tr,
  .woocommerce table.shop_table.cart td { display: block; width: auto; }
  .woocommerce table.shop_table.cart thead { display: none; }
  .woocommerce table.shop_table.cart tr.cart_item {
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 2px solid var(--wp--preset--color--viola-chiaro);
    border-radius: 18px;
  }
  .woocommerce table.shop_table.cart td {
    border: 0;
    padding: 8px 0;
    text-align: right;
  }
  .woocommerce table.shop_table.cart td::before {
    content: attr(data-title);
    float: left;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wp--preset--color--oro);
  }
  .woocommerce table.shop_table.cart td.product-thumbnail { text-align: center; }
  .woocommerce table.shop_table.cart td.product-thumbnail::before { content: none; }
  .woocommerce .cart .coupon { flex-wrap: wrap; }
  .woocommerce-checkout #customer_details .col-1,
  .woocommerce-checkout #customer_details .col-2 { margin-bottom: 16px; }
}

/* 102. Le icone delle voci non comparivano.
        Misurato: il `content` calcolato era la stringa vuota. Il motivo e' la
        specificita': la regola generica
        `.woocommerce-account .navigation li a::before` conta tre classi, quelle
        per singola voce solo due. Piu' specifica vince a prescindere
        dall'ordine, quindi passava sempre il `content: ""` di partenza.

        Riscritte con `li.` davanti alla classe della voce: quattro classi
        contro tre, e ora vincono loro. */

.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard a::before { content: "\1F3E0"; }
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--orders a::before { content: "\1F4E6"; }
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--downloads a::before { content: "\2B07"; }
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-address a::before { content: "\1F4CD"; }
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--payment-methods a::before { content: "\1F4B3"; }
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-account a::before { content: "\2699"; }
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a::before { content: "\1F6AA"; }

/* le tile erano alte 81 px per una riga di testo: si stringono */
.woocommerce-account .woocommerce-MyAccount-navigation li a { padding: 12px 15px; }

/* 103. I bottoni dentro all'account restavano trasparenti col testo grigio.
        Misurato: `background: rgba(0,0,0,0)` e `color: rgb(47,47,47)`. Le
        classi sono `button wc-forward` e `woocommerce-Button`, e la mia regola
        di prima chiedeva un antenato `.woocommerce` che qui non basta a
        vincere. Le prendo per nome, dentro al contenuto dell'account. */

.woocommerce-account .woocommerce-MyAccount-content a.button,
.woocommerce-account .woocommerce-MyAccount-content button.button,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button,
.woocommerce-account .woocommerce-MyAccount-content input.button,
.woocommerce-account .wc-block-components-notice-banner a.button,
.woocommerce-account .wc-block-components-notice-banner .woocommerce-Button {
  display: inline-block;
  padding: 13px 26px !important;
  border: 3px solid #1B0A08 !important;
  border-radius: 32px !important;
  background: var(--wp--preset--color--oro) !important;
  color: #2E1508 !important;
  box-shadow: 0 4px 0 0 #1B0A08;
  font-family: "Titan One", Archivo, sans-serif;
  font-size: 13px !important;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none !important;
  text-shadow: none !important;
  transition: background-color .18s ease, color .18s ease, transform .16s ease, box-shadow .16s ease;
}
.woocommerce-account .woocommerce-MyAccount-content a.button:hover,
.woocommerce-account .woocommerce-MyAccount-content button.button:hover,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button:hover,
.woocommerce-account .wc-block-components-notice-banner a.button:hover {
  background: #8A4E08 !important;
  color: #FFFFFF !important;
  transform: translateY(2px);
  box-shadow: 0 2px 0 0 #1B0A08;
}

/* 104. L'icona blu di sistema dentro agli avvisi passa al caramello. */

.woocommerce-account .wc-block-components-notice-banner > svg,
.woocommerce .wc-block-components-notice-banner > svg {
  fill: #8A4E08 !important;
  background: transparent !important;
}
.wc-block-components-notice-banner.is-info { border-color: #1B0A08 !important; }

/* 105. Ordine nuovo del menù.
        "Lavora con noi" sale sotto Shop, dentro al gruppo delle voci ma in
        piccolo: e' una destinazione del sito come le altre, solo per meno
        gente. "I miei ordini" scende accanto al bottone Acquista, perche' e'
        una cosa che fai col tuo account, non una pagina che visiti. */

.yl-tendina__ordini {
  order: 0;
  margin-top: clamp(14px, 2.6vh, 24px);
  padding-top: clamp(14px, 2.6vh, 24px);
  border-top: 1px dashed rgba(74, 42, 110, .7);
  width: min(70vw, 340px);
  text-align: center;
  font-family: Archivo, system-ui, sans-serif;
  font-size: clamp(14px, 3.4vw, 18px) !important;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--crema);
  opacity: .8;
  text-decoration: none;
  transition: color .18s ease, opacity .18s ease;
}
.yl-tendina__ordini:hover,
.yl-tendina__ordini:focus-visible {
  color: var(--wp--preset--color--oro);
  opacity: 1;
}

/* 106. La traccia di navigazione non e' solo sul prodotto: compare anche sulle
        pagine, e si porta dietro il riempimento di una sezione intera. Via da
        tutto il sito, insieme allo spazio che lasciava. */

.wc-block-breadcrumbs,
.woocommerce-breadcrumb { display: none !important; }
.wc-block-store-notices { padding: 0 !important; }

/* 107. Apple Pay e Google Pay salgono, attaccati al bottone del carrello.
        Prima stavano staccati di 26 px dentro una cornice larga, e su schermi
        piccoli finivano sotto la piega: chi paga in un tocco non li vedeva.
        Ora sono la riga subito dopo, con la scritta che li introduce ridotta a
        un'etichetta. */

.woocommerce div.product .wc-stripe-product-checkout-container,
.woocommerce div.product .wcpay-payment-request-wrapper,
.woocommerce div.product .payment_method_paypal .paypal-buttons,
.woocommerce div.product .wc-apple-pay-button,
.woocommerce div.product #wc-stripe-payment-request-wrapper {
  margin-top: 12px !important;
  padding: 12px 12px 10px;
  border-width: 2px;
  border-radius: 20px;
}
.woocommerce div.product .wc-stripe-product-checkout-container::before,
.woocommerce div.product #wc-stripe-payment-request-wrapper::before {
  margin-bottom: 8px;
  font-size: 11px;
  letter-spacing: 0.14em;
}
/* qualunque cosa il plugin metta fra il carrello e i tasti, non deve
   allontanarli: e' quello che li spingeva sotto la piega */
.woocommerce div.product .wc-stripe-payment-request-button-separator,
.woocommerce div.product .wcpay-payment-request-button-separator,
.woocommerce div.product .wc-apple-pay-button-separator { display: none !important; }
.woocommerce div.product form.cart { margin-bottom: 0; }

/* 108. "I miei ordini" torna uguale alle altre voci, "Lavora con noi" resta
        piccolo. Erano invertiti rispetto a come li vuoi. */

.yl-tendina__ordini {
  font-family: "Titan One", Archivo, sans-serif !important;
  font-size: clamp(26px, 7vw, 44px) !important;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  opacity: 1;
  padding-top: clamp(14px, 2.6vh, 24px);
  border-top: 1px dashed rgba(74, 42, 110, .7);
}

/* 109. I collegamenti dentro alle tile chiare erano illeggibili.
        Misurato: oro #D68617 su crema #F6F1E6 fa 2,44 di contrasto, sotto la
        metà del minimo richiesto per un testo. Il caramello scuro #8A4E08
        arriva a 6,42 e resta nella famiglia dei colori del marchio. Più la
        sottolineatura, che è quello che dice "questo si clicca" a chi i colori
        non li distingue. */

.yl-prova a,
.yl-tile a {
  color: #8A4E08;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color .18s ease;
}
.yl-prova a:hover,
.yl-prova a:focus-visible,
.yl-tile a:hover,
.yl-tile a:focus-visible { color: #2A1206; }

/* 110. Le polaroid della storia, su "Chi siamo".
        Stessa meccanica dei mondi: il filo si spezza da solo a ogni riga
        perche' ogni scatto porta il suo pezzetto. Qui pero' le foto non sono
        mondi da scoprire, sono passaggi in ordine: niente penombra sulle
        successive, si vedono tutte da subito. */

.yl-polaroid--s1 .yl-polaroid__scatto { background-image: url("assets/storia-1.webp"); }
.yl-polaroid--s2 .yl-polaroid__scatto { background-image: url("assets/storia-2.webp"); }
.yl-polaroid--s3 .yl-polaroid__scatto { background-image: url("assets/storia-3.webp"); }
.yl-polaroid--s4 .yl-polaroid__scatto { background-image: url("assets/storia-4.webp"); }

.yl-polaroid--s1 { --inclina: -2.4deg; animation-duration: 7.1s; }
.yl-polaroid--s2 { --inclina:  1.8deg; animation-duration: 8.3s; animation-delay: -1.6s; }
.yl-polaroid--s3 { --inclina: -1.2deg; animation-duration: 6.7s; animation-delay: -3.1s; }
.yl-polaroid--s4 { --inclina:  2.6deg; animation-duration: 7.8s; animation-delay: -0.9s; }

/* il numero del passaggio, nella pastiglia della didascalia */
.yl-polaroid figcaption em.yl-passo {
  background: var(--wp--preset--color--fondo);
  color: var(--wp--preset--color--crema);
  border-color: #1B0A08;
}

/* 111. "Lavora con noi" tornava grande come le altre voci.
        Stesso inciampo delle icone dell'account: `.yl-tendina__voci a` conta
        una classe piu' un elemento, `.yl-tendina__lavora` una classe sola.
        Piu' specifica vince, e la misura grande passava sopra alla piccola.
        Basta scriverla dentro al contesto giusto per ribaltare il conto. */

.yl-tendina__voci a.yl-tendina__lavora {
  font-family: Archivo, system-ui, sans-serif !important;
  font-size: clamp(19px, 4.6vw, 22px) !important;
  font-weight: 700;
  letter-spacing: 0.12em;
  opacity: .78;
  margin-top: 4px;
}
.yl-tendina__voci a.yl-tendina__lavora:hover,
.yl-tendina__voci a.yl-tendina__lavora:focus-visible {
  color: var(--wp--preset--color--oro);
  opacity: 1;
  transform: none;
}

/* 112. La tendina deve coprire davvero quello che c'e' sotto: un fondo pieno,
        non traslucido. Il 3% che restava bastava a far leggere il testo della
        pagina attraverso le voci del menu'. */

.yl-tendina { background-color: #0E051D; }

/* 113. Sul telefono le polaroid stanno due per riga.
        In colonna singola erano quattro scatti alti circa 300 px l'uno con 46
        di stacco: quasi 1.350 px di scorrimento per una sezione che racconta
        quattro passaggi. A due a due sono 646, meno della metà, e i passaggi
        si vedono a coppie invece che uno alla volta.

        Sotto i 400 px di schermo tornano in colonna: a quel punto due per riga
        vorrebbe dire didascalie da tre parole a capo. */

@media (max-width: 639px) {
  .yl-filo {
    grid-template-columns: 1fr 1fr;
    gap: 34px 14px;
  }
  .yl-appeso { max-width: none; }
  .yl-appeso::before,
  .yl-appeso:nth-child(2n)::before,
  .yl-appeso:nth-child(2n + 1)::before {
    left: -7px;
    right: -7px;
    background: #7A5730;
  }
  .yl-appeso:nth-child(2n + 1)::before { background: linear-gradient(90deg, transparent, #7A5730 22%); }
  .yl-appeso:nth-child(2n)::before { background: linear-gradient(90deg, #7A5730 78%, transparent); }

  .yl-polaroid { padding: 9px 9px 0; }
  .yl-polaroid figcaption { padding: 9px 3px 11px; }
  .yl-polaroid figcaption strong { font-size: 13px; }
  .yl-polaroid figcaption span { font-size: 11px; line-height: 1.3; }
  .yl-polaroid figcaption em { margin-top: 6px; padding: 3px 9px; font-size: 9px; }
  .yl-molletta { width: 13px; height: 25px; margin-left: -6.5px; top: 5px; }
  .yl-appeso { padding-top: 26px; }
}

@media (max-width: 399px) {
  .yl-filo { grid-template-columns: 1fr; gap: 32px 0; }
  .yl-appeso { max-width: min(74vw, 240px); }
  .yl-appeso::before,
  .yl-appeso:nth-child(2n)::before,
  .yl-appeso:nth-child(2n + 1)::before {
    left: -18vw;
    right: -18vw;
    background: linear-gradient(90deg, transparent, #7A5730 20%, #7A5730 80%, transparent);
  }
}

/* 114. La pagina «Chi siamo» respira meglio sul telefono: le sezioni si
        stringono e i paragrafi centrati non restano appiccicati fra loro. */

@media (max-width: 780px) {
  .yl-filo { margin-top: calc(var(--wp--preset--spacing--20) + 26px); }
  main > *:not(.yl-scena):not(.yl-storia) p + p { margin-top: 14px; }
  main > *:not(.yl-scena):not(.yl-storia) h2 { margin-bottom: 10px; }
  main > *:not(.yl-scena):not(.yl-storia) .wp-block-buttons { margin-top: 22px !important; }
}

/* ═══ Pagina 404 ═══════════════════════════════════════════════════════════
   Yumo perplesso che si gratta la testa, e un testo che dice cosa fare invece
   di limitarsi a dire che non c'e' niente. Le due vie d'uscita sono la home e
   il prodotto: su un sito con una pagina prodotto sola, mandare qualcuno a
   "cercare" sarebbe una presa in giro. */

.yl-perso__yumo {
  width: min(46vw, 280px);
  aspect-ratio: 1400 / 1235;
  margin: 0 auto clamp(10px, 2vh, 22px);
  background: url("assets/yumo-perso.webp") center / contain no-repeat;
  animation: yl-perso-oscilla 5.2s ease-in-out infinite alternate;
}
@keyframes yl-perso-oscilla {
  from { transform: translateY(0) rotate(-2deg); }
  to   { transform: translateY(-10px) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .yl-perso__yumo { animation: none; }
}

/* ═══ Avvisi e riquadri vuoti, ovunque ═════════════════════════════════════ */

/* 115. Il contenitore degli avvisi restava alto 144 px anche da vuoto.
        Ci avevo gia' messo `padding: 0 !important`, ma perdeva lo stesso: la
        regola che da' il riempimento alle sezioni e' `main > *:not(...)`, che
        conta un elemento e due pseudo-classi, mentre la mia contava una classe
        sola. Fra due `!important` vince la piu' specifica, sempre. Ora ha
        `main >` davanti e il conto si ribalta. */

main > .wc-block-store-notices,
main > .woocommerce-notices-wrapper {
  padding: 0 !important;
  margin: 0 !important;
}
main > .wc-block-store-notices:empty,
main > .woocommerce-notices-wrapper:empty { display: none !important; }

/* 116. Gli avvisi vestiti dappertutto, non solo dentro all'account: il
        carrello vuoto ne mostra uno, e arrivava bianco e squadrato. */

.wc-block-components-notice-banner,
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.cart-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px !important;
  padding: 16px 18px !important;
  border: 3px solid #1B0A08 !important;
  border-radius: 20px !important;
  background: #F6F1E6 !important;
  color: #2A1206 !important;
  box-shadow: 0 4px 0 0 #1B0A08;
  font-weight: 600;
  font-size: 15px;
}
.wc-block-components-notice-banner > svg { fill: #8A4E08 !important; flex: 0 0 auto; }
.woocommerce-info::before,
.woocommerce-message::before,
.cart-empty::before { color: #8A4E08 !important; }
.wc-block-components-notice-banner a,
.woocommerce-info a,
.woocommerce-message a { color: #8A4E08; }

/* il bottone sotto all'avviso non deve piu' salirgli addosso */
.woocommerce .return-to-shop,
.woocommerce .wc-block-cart__empty-cart__actions { margin-top: 18px; }

/* 117. Sul telefono, fra due sezioni vicine il vuoto raddoppiava.
        Ogni sezione ha 44 px di riempimento sopra E sotto: fra una e l'altra
        se ne sommano 88, che su uno schermo alto 700 e' un ottavo di pagina di
        niente. Fra "Un profumo che non profuma e basta" e "Come nasce" si
        vedeva tutto.

        Una sezione che ne segue un'altra non ha bisogno del riempimento sopra:
        ci pensa gia' quella prima col suo sotto. Restano 52 px, che e' uno
        stacco, non un buco. */

@media (max-width: 780px) {
  main > * + *:not(.yl-scena):not(.yl-storia) { padding-top: 8px !important; }
}

/* 118. Le polaroid di «Lavora con noi»: gli stessi meccanismi della storia,
        altre foto. I ritmi del dondolio sono diversi da quelli di «Chi siamo»
        cosi' due pagine aperte di fila non sembrano la stessa. */

.yl-polaroid--l1 .yl-polaroid__scatto { background-image: url("assets/lavoro-1.webp"); }
.yl-polaroid--l2 .yl-polaroid__scatto { background-image: url("assets/lavoro-2.webp"); }
.yl-polaroid--l3 .yl-polaroid__scatto { background-image: url("assets/lavoro-3.webp"); }
.yl-polaroid--l4 .yl-polaroid__scatto { background-image: url("assets/lavoro-4.webp"); }

.yl-polaroid--l1 { --inclina:  2.2deg; animation-duration: 6.6s; }
.yl-polaroid--l2 { --inclina: -1.9deg; animation-duration: 7.9s; animation-delay: -2.3s; }
.yl-polaroid--l3 { --inclina:  1.4deg; animation-duration: 7.2s; animation-delay: -0.8s; }
.yl-polaroid--l4 { --inclina: -2.7deg; animation-duration: 8.6s; animation-delay: -3.6s; }

/* 119. Il bottone di WhatsApp: verde suo, contorno nostro.
        Il verde e' quello che la gente riconosce a colpo d'occhio, e su un
        invito a scrivere quel riconoscimento vale piu' della coerenza cromatica.
        Il contorno nero e l'ombra piena lo tengono comunque dentro al sito. */

.yl-whatsapp-tasto {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 34px;
  border: 3px solid #1B0A08;
  border-radius: 40px;
  background: #25D366;
  color: #0B2E17;
  box-shadow: 0 5px 0 0 #1B0A08;
  font-family: "Titan One", Archivo, sans-serif;
  font-size: clamp(15px, 1.5vw, 19px);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease, transform .16s ease, box-shadow .16s ease;
}
.yl-whatsapp-tasto svg { width: 22px; height: 22px; flex: 0 0 auto; }
.yl-whatsapp-tasto:hover,
.yl-whatsapp-tasto:focus-visible {
  background: #12833F;
  color: #FFFFFF;
  transform: translateY(2px);
  box-shadow: 0 3px 0 0 #1B0A08;
}
.yl-azioni {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: var(--wp--preset--spacing--20);
}

/* ═══ Carrello: impaginazione e pezzi ══════════════════════════════════════ */

/* 120. Tabella e totali affiancati, non uno sotto l'altro.
        Con un prodotto solo la tabella e' alta due righe e i totali finivano
        mezzo schermo piu' giu': per vedere quanto spendi dovevi scorrere via
        quello che stai comprando. Le colonne sono assegnate PER NOME, non per
        ordine: e' lo stesso inciampo che aveva ribaltato menu' e contenuto
        nella pagina account. */

@media (min-width: 861px) {
  .woocommerce-cart .woocommerce {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: clamp(20px, 2.6vw, 36px);
    align-items: start;
  }
  .woocommerce-cart .woocommerce-cart-form { grid-column: 1; grid-row: 1; }
  .woocommerce-cart .cart-collaterals { grid-column: 2; grid-row: 1; width: auto; float: none; }
  .woocommerce-cart .woocommerce-notices-wrapper { grid-column: 1 / -1; }
}
.woocommerce-cart .cart-collaterals .cart_totals { width: auto; float: none; }
.woocommerce-cart .cart-collaterals::after { content: none; }

/* 121. Codice promozionale e aggiorna sulla stessa riga, non su due.
        E il bottone "Aggiorna carrello" spento non deve sembrare rotto: da
        disattivato era caramello scurito, che leggeva come un errore. Ora e'
        trasparente col bordo tratteggiato, che dice "non serve adesso". */

.woocommerce-cart td.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px !important;
}
.woocommerce-cart td.actions .coupon {
  display: flex;
  gap: 10px;
  align-items: center;
  flex: 1 1 auto;
}
.woocommerce-cart td.actions .button[name="update_cart"],
.woocommerce-cart td.actions button[disabled],
.woocommerce-cart td.actions .button:disabled {
  margin-left: auto;
}
.woocommerce-cart td.actions .button:disabled,
.woocommerce-cart td.actions button[disabled] {
  background: transparent !important;
  color: rgba(249, 229, 193, .55) !important;
  border: 3px dashed var(--wp--preset--color--viola-chiaro) !important;
  box-shadow: none !important;
  cursor: default;
}

/* 122. La tabella dei totali: righe leggibili, etichette in oro, nessun
        riquadro dentro al riquadro. */

.woocommerce-cart .cart_totals table.shop_table {
  border: 0;
  box-shadow: none;
  background: transparent;
  border-radius: 0;
}
.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
  background: transparent;
  border: 0;
  border-top: 1px dashed rgba(74, 42, 110, .55);
  padding: 14px 4px;
  vertical-align: top;
}
.woocommerce-cart .cart_totals table.shop_table tr:first-child th,
.woocommerce-cart .cart_totals table.shop_table tr:first-child td { border-top: 0; }
.woocommerce-cart .cart_totals th {
  width: 40%;
  font-size: 11px;
  letter-spacing: 0.1em;
}
.woocommerce-cart .cart_totals .woocommerce-shipping-methods {
  margin: 0;
  padding: 0;
  list-style: none;
}
.woocommerce-cart .cart_totals .woocommerce-shipping-methods li {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
}
.woocommerce-cart .cart_totals input[type="radio"] {
  width: 19px;
  height: 19px;
  accent-color: var(--wp--preset--color--oro);
  flex: 0 0 auto;
}
.woocommerce-cart .cart_totals label { margin: 0; font-size: 14px; }
.woocommerce-cart .woocommerce-shipping-destination { font-size: 13px; opacity: .8; margin: 8px 0 4px; }
.woocommerce-cart .shipping-calculator-button { font-size: 13px; }
.woocommerce-cart .wc-proceed-to-checkout { padding: 18px 0 0; }
.woocommerce-cart .wc-proceed-to-checkout .checkout-button { display: block; text-align: center; }

@media (max-width: 860px) {
  .woocommerce-cart td.actions { flex-direction: column; align-items: stretch; }
  .woocommerce-cart td.actions .coupon { flex-wrap: wrap; }
  .woocommerce-cart td.actions .coupon .button { flex: 1 1 100%; }
  .woocommerce-cart td.actions .button[name="update_cart"] { margin-left: 0; }
  .woocommerce-cart .cart-collaterals { margin-top: 20px; }
}

/* ═══ Niente scorrimento laterale, mai ═════════════════════════════════════ */

/* 123. Su «Lavora con noi» la pagina si trascinava di lato.
        La causa: il filo delle polaroid sporge oltre la cornice per sembrare
        teso da un bordo all'altro, e in colonna singola lo facevo sporgere di
        18vw per parte. Trentasei punti di viewport in piu' della pagina: il
        browser ci mette lo scorrimento orizzontale, giustamente.

        Ora sporge in percentuale della cornice, che e' un valore che non puo'
        superare la pagina per costruzione. */

@media (max-width: 399px) {
  .yl-appeso::before,
  .yl-appeso:nth-child(2n)::before,
  .yl-appeso:nth-child(2n + 1)::before {
    left: -9%;
    right: -9%;
  }
}
.yl-filo::before { left: -4%; right: -4%; }

/* 124. E una rete sotto a tutto: il documento non scorre di lato, punto.
        Uso `clip` e non `hidden` perche' `hidden` crea un contenitore di
        scorrimento, e questo rompe il `position: sticky` del palco dell'hero e
        dell'intestazione. `clip` taglia e basta, senza creare niente.

        E' una rete, non una scusa: quello che sporge va sistemato lo stesso,
        perche' tagliato o no resta fuori posto. Ma cosi' nessun elemento nuovo
        potra' piu' far trascinare la pagina di lato per sbaglio. */

html { overflow-x: clip; }
body { overflow-x: clip; max-width: 100%; }

/* 125. I totali coprivano la tabella.
        La griglia era giusta, ma un elemento dentro una griglia non scende
        sotto la larghezza del suo contenuto: la tabella del carrello ha cinque
        colonne e una foto, e si rifiutava di stringersi. Risultato: sbordava
        dalla sua colonna e finiva sotto al riquadro dei totali.

        Due cose insieme. `min-width: 0` toglie a tutti e due i riquadri il
        diritto di non stringersi. `table-layout: fixed` dice alla tabella di
        stare nella larghezza che le do invece di prendersi quella che le
        serve, con le misure fissate dove contano: la crocetta, la foto e la
        quantita'. E le colonne si affiancano solo sopra i 1100 px, che e' la
        larghezza sotto la quale cinque colonne non ci stanno comunque. */

@media (min-width: 861px) and (max-width: 1099px) {
  .woocommerce-cart .woocommerce { display: block; }
  .woocommerce-cart .cart-collaterals { margin-top: 22px; max-width: 460px; margin-left: auto; }
}

@media (min-width: 1100px) {
  .woocommerce-cart .woocommerce { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
  .woocommerce-cart .woocommerce-cart-form,
  .woocommerce-cart .cart-collaterals { min-width: 0; }
}

.woocommerce-cart table.shop_table.cart {
  table-layout: fixed;
  width: 100%;
}
.woocommerce-cart table.shop_table.cart .product-remove { width: 42px; }
.woocommerce-cart table.shop_table.cart .product-thumbnail { width: 92px; }
.woocommerce-cart table.shop_table.cart .product-quantity { width: 110px; }
.woocommerce-cart table.shop_table.cart .product-price,
.woocommerce-cart table.shop_table.cart .product-subtotal { width: 110px; }
.woocommerce-cart table.shop_table.cart .product-name { word-break: break-word; }
.woocommerce-cart table.shop_table.cart td.actions { width: auto; }

/* la riga del codice promozionale non deve incolonnarsi appena si stringe */
.woocommerce-cart td.actions .coupon #coupon_code { min-width: 0; flex: 1 1 130px; }
.woocommerce-cart td.actions .coupon .button { flex: 0 0 auto; white-space: nowrap; }

/* 126. Le larghezze fisse strozzavano la colonna del nome.
        Con `table-layout: fixed` le colonne senza misura si prendono quello che
        AVANZA, e se non avanza niente vanno a zero: il nome del prodotto usciva
        incolonnato una lettera per riga. Colpa mia: avevo fissato cinque
        colonne su sei senza garantire spazio alla sesta.

        Torno alla larghezza naturale e affianco solo dove c'e' spazio davvero.
        Il conto: cinque colonne fisse fanno 464 px, piu' 180 perche' il nome
        stia su due righe fanno 644 di tabella. Affiancata a 1,75fr contro 1,
        serve una pagina larga almeno 1.040 px di contenuto. Sotto quella
        soglia si impila, coi totali a destra: e' meglio di una tabella
        strozzata. */

.woocommerce-cart table.shop_table.cart { table-layout: auto; }
.woocommerce-cart table.shop_table.cart .product-remove,
.woocommerce-cart table.shop_table.cart .product-thumbnail,
.woocommerce-cart table.shop_table.cart .product-quantity,
.woocommerce-cart table.shop_table.cart .product-price,
.woocommerce-cart table.shop_table.cart .product-subtotal { width: auto; }
.woocommerce-cart table.shop_table.cart .product-thumbnail img { width: 74px; }
.woocommerce-cart table.shop_table.cart .product-name { min-width: 170px; }

@media (max-width: 1299px) {
  .woocommerce-cart .woocommerce { display: block; }
  .woocommerce-cart .cart-collaterals {
    margin: 22px 0 0 auto;
    max-width: 460px;
  }
}
@media (min-width: 1300px) {
  .woocommerce-cart .woocommerce {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
    gap: clamp(20px, 2.4vw, 34px);
    align-items: start;
  }
  .woocommerce-cart .woocommerce-cart-form { grid-column: 1; grid-row: 1; min-width: 0; }
  .woocommerce-cart .cart-collaterals { grid-column: 2; grid-row: 1; min-width: 0; margin: 0; max-width: none; }
  .woocommerce-cart .woocommerce-notices-wrapper { grid-column: 1 / -1; }
}

/* 127. Il totale va SOTTO, e basta.
        WooCommerce fa galleggiare quel riquadro a destra con un `float`, e un
        elemento che galleggia esce dal flusso: la mia griglia gli assegnava una
        colonna che lui ignorava, e finiva addosso alla tabella. Ho provato ad
        annullare il galleggiamento, ma restavano due sistemi di impaginazione
        che litigavano sullo stesso elemento, e ogni volta ne usciva un caso
        nuovo.

        Un sistema solo: niente griglia, niente galleggiamento. Tabella a tutta
        larghezza, totale sotto, allineato a destra e largo al massimo 520 px.
        Meno furbo e sempre giusto. */

.woocommerce-cart .woocommerce {
  display: block !important;
  grid-template-columns: none !important;
}
.woocommerce-cart .woocommerce-cart-form {
  float: none !important;
  width: 100% !important;
  margin: 0 0 24px !important;
}
.woocommerce-cart .cart-collaterals {
  float: none !important;
  clear: both;
  width: 100% !important;
  max-width: 520px;
  /* prima era `0 0 0 auto`, appoggiato a destra: Zago lo vuole centrato */
  margin: 0 auto !important;
}
.woocommerce-cart .cart-collaterals .cart_totals {
  float: none !important;
  width: 100% !important;
}
.woocommerce-cart .cart-collaterals::before,
.woocommerce-cart .cart-collaterals::after { content: ""; display: table; clear: both; }

/* con la tabella a tutta larghezza, codice e aggiorna tornano in riga */
@media (min-width: 781px) {
  .woocommerce-cart td.actions { flex-direction: row; align-items: center; }
  .woocommerce-cart td.actions .coupon { flex-direction: row; flex-wrap: nowrap; }
  .woocommerce-cart td.actions .coupon .button { flex: 0 0 auto; }
}

@media (max-width: 780px) {
  .woocommerce-cart .cart-collaterals { max-width: none; }
}

/* 128. Il titolo della pagina account era appiccicato alle tile del menù.
        Sulla scheda prodotto avevo azzerato i riempimenti di tutte le sezioni,
        e quella regola prende anche le altre pagine di WooCommerce: il titolo
        e il contenuto finivano a contatto. Qui il respiro serve, e lo do dove
        serve invece di rimettere il riempimento ovunque. */

.woocommerce-account .woocommerce { margin-top: clamp(24px, 3.4vw, 46px); }
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce { margin-top: clamp(20px, 3vw, 40px); }

/* 129. La 404: la descrizione era in "grande", 24-36 px, e andava a capo
        cinque volte. Sotto un titolo di quella stazza il testo non deve
        competere: scende di misura e si allarga a 46 caratteri per riga, che
        e' la larghezza in cui l'occhio ritrova l'inizio della riga dopo senza
        cercarlo. Due righe invece di cinque. */

.yl-perso p:not(.has-piccolo-font-size) {
  font-size: clamp(16px, 1.45vw, 20px) !important;
  line-height: 1.55;
  max-width: 46ch;
  margin-inline: auto;
}
.yl-perso .has-piccolo-font-size { opacity: .75; }

/* ═══ Pagine legali: tabelle leggibili ═════════════════════════════════════
   Termini e privacy sono testi che nessuno legge tutti: si cerca una cosa
   sola. Una tabella con l'argomento a sinistra e la risposta a destra si
   scorre con l'occhio in dieci secondi, un muro di paragrafi no.

   Stessa scheda del resto del sito: contorno nero, ombra piena, righe
   tratteggiate fra un argomento e l'altro. */

.yl-legge {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: var(--wp--preset--spacing--20) 0;
  border: 3px solid #1B0A08;
  border-radius: 24px;
  background: #170826;
  box-shadow: 0 6px 0 0 #1B0A08;
  overflow: hidden;
  text-align: left;
}
.yl-legge caption {
  caption-side: top;
  padding: 18px 20px 4px;
  font-family: "Titan One", Archivo, sans-serif;
  font-size: clamp(17px, 1.8vw, 23px);
  text-transform: uppercase;
  color: var(--wp--preset--color--crema);
  text-align: left;
}
.yl-legge th,
.yl-legge td {
  padding: 16px 20px;
  border: 0;
  border-top: 1px dashed rgba(74, 42, 110, .55);
  vertical-align: top;
  text-align: left;
}
.yl-legge tr:first-child th,
.yl-legge tr:first-child td { border-top: 0; }
.yl-legge th {
  width: 30%;
  font-family: Archivo, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--oro);
  line-height: 1.5;
}
.yl-legge td {
  font-size: clamp(14px, 1.05vw, 16px);
  font-weight: 500;
  line-height: 1.65;
  opacity: .92;
}
.yl-legge td a { color: var(--wp--preset--color--oro); text-decoration: underline; text-underline-offset: 3px; }
.yl-legge td strong { color: var(--wp--preset--color--crema); }
.yl-legge td ul { margin: 8px 0 0; padding-left: 18px; }
.yl-legge td li { margin-bottom: 5px; }

@media (max-width: 780px) {
  .yl-legge th,
  .yl-legge td { display: block; width: auto; padding: 0 16px; }
  .yl-legge th { padding-top: 16px; border-top: 1px dashed rgba(74, 42, 110, .55); }
  .yl-legge td { padding-bottom: 16px; border-top: 0; }
  .yl-legge tr:first-child th { border-top: 0; }
  .yl-legge caption { padding: 16px 16px 2px; }
}

/* la data di aggiornamento, in coda a ogni pagina legale */
.yl-legge-data {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: .55;
}

/* ═══ Cassa ════════════════════════════════════════════════════════════════
   Era tutto incolonnato in una striscia stretta a sinistra, coi campi piccoli
   e il riepilogo dell'ordine sotto. Su una pagina di pagamento questo costa
   ordini: chi non vede quanto sta per spendere mentre compila si ferma.

   Due colonne sopra i 900 px, dati a sinistra e ordine a destra, col
   riepilogo che resta in vista mentre scorri. Sotto, uno sotto l'altro. */

.woocommerce-checkout form.checkout { display: block; }

@media (min-width: 901px) {
  .woocommerce-checkout form.checkout.woocommerce-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: clamp(20px, 2.6vw, 36px);
    align-items: start;
  }
  .woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1; min-width: 0; }
  .woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 1; margin: 0 0 14px; align-self: start; }
  .woocommerce-checkout #order_review { grid-column: 2; grid-row: 1; min-width: 0; margin-top: 46px; position: sticky; top: 24px; }
}

/* i due riquadri dei dati, uno sotto l'altro e a tutta larghezza: due colonne
   di campi in mezza pagina fanno campi da trenta caratteri */
.woocommerce-checkout #customer_details .col2-set,
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
  width: 100%;
  float: none;
  max-width: none;
}
.woocommerce-checkout #customer_details .col-2 { margin-top: 18px; }

.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3 {
  font-family: "Titan One", Archivo, sans-serif;
  text-transform: uppercase;
  font-size: clamp(16px, 1.6vw, 21px) !important;
  margin: 0 0 14px;
}
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last { width: 48.5%; }

/* il riepilogo dell'ordine */
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table {
  border: 0;
  box-shadow: none;
  background: transparent;
  border-radius: 0;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table td {
  background: transparent;
  border: 0;
  border-top: 1px dashed rgba(74, 42, 110, .55);
  padding: 13px 4px;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table thead th { border-top: 0; }
.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td,
.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total th {
  border-top: 2px solid rgba(74, 42, 110, .8);
  padding-top: 16px;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total .woocommerce-Price-amount {
  font-family: "Titan One", Archivo, sans-serif;
  font-size: clamp(20px, 2vw, 26px);
  color: var(--wp--preset--color--oro);
}
.woocommerce-checkout #place_order {
  width: 100%;
  margin-top: 16px;
  font-size: clamp(15px, 1.5vw, 19px) !important;
}
.woocommerce-checkout .woocommerce-privacy-policy-text {
  font-size: 12px;
  line-height: 1.6;
  opacity: .72;
  margin-top: 14px;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { margin-top: 12px; }
.woocommerce-checkout .woocommerce-form__label-for-checkbox { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; }
.woocommerce-checkout input[type="checkbox"] { width: 19px; height: 19px; accent-color: var(--wp--preset--color--oro); flex: 0 0 auto; }

@media (max-width: 900px) {
  .woocommerce-checkout .form-row-first,
  .woocommerce-checkout .form-row-last { width: 100%; }
  .woocommerce-checkout #order_review_heading { margin-top: 26px; }
}

/* ═══ L'avviso sui cookie ══════════════════════════════════════════════════
   Sale dal basso come una scheda del sito, col contorno nero e l'ombra piena.
   Non copre il bottone fisso ACQUISTA sul telefono: gli si mette sopra.

   La scelta si fa con due tasti veri e diversi fra loro. Il rifiuto NON e'
   un collegamentino grigio in un angolo: e' un bottone della stessa misura,
   perche' una scelta finta e' peggio di nessuna scelta. */

.yl-cookie {
  position: fixed;
  left: 50%;
  bottom: 16px;
  z-index: 9994;
  width: min(94vw, 760px);
  margin-left: min(-47vw, -380px);
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.8vw, 20px);
  padding: clamp(14px, 1.8vw, 20px);
  border: 3px solid #1B0A08;
  border-radius: 26px;
  background: #F6F1E6;
  color: #2A1206;
  box-shadow: 0 6px 0 0 #1B0A08;
  transform: translateY(140%);
  transition: transform .42s cubic-bezier(.32, .72, .24, 1);
}
.yl-cookie--su { transform: translateY(0); }
.yl-cookie[hidden] { display: none; }

.yl-cookie__bollo {
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
}
.yl-cookie__testo {
  margin: 0;
  flex: 1 1 auto;
  font-size: clamp(13px, 1.05vw, 15px);
  font-weight: 600;
  line-height: 1.55;
  text-align: left !important;
}
.yl-cookie__testo strong { color: #2A1206; }
.yl-cookie__testo a {
  color: #8A4E08;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.yl-cookie__tasti {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 0 auto;
}
.yl-cookie__ok,
.yl-cookie__no {
  padding: 12px 22px;
  border: 3px solid #1B0A08;
  border-radius: 30px;
  font-family: "Titan One", Archivo, sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease, transform .16s ease, box-shadow .16s ease;
}
.yl-cookie__ok {
  background: var(--wp--preset--color--oro);
  color: #2E1508;
  box-shadow: 0 4px 0 0 #1B0A08;
}
.yl-cookie__ok:hover {
  background: #8A4E08;
  color: #FFFFFF;
  transform: translateY(2px);
  box-shadow: 0 2px 0 0 #1B0A08;
}
.yl-cookie__no {
  background: transparent;
  color: #2A1206;
  box-shadow: 0 4px 0 0 rgba(27, 10, 8, .35);
}
.yl-cookie__no:hover {
  background: rgba(27, 10, 8, .08);
  transform: translateY(2px);
  box-shadow: 0 2px 0 0 rgba(27, 10, 8, .35);
}

@media (max-width: 780px) {
  .yl-cookie {
    left: 12px;
    right: 12px;
    width: auto;
    margin-left: 0;
    /* sopra al bottone fisso ACQUISTA, che occupa 88 px in fondo */
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    flex-wrap: wrap;
    gap: 12px;
  }
  .yl-cookie__bollo { width: 42px; height: 42px; }
  .yl-cookie__testo { flex: 1 1 180px; font-size: 12.5px; }
  .yl-cookie__tasti { flex: 1 1 100%; flex-direction: row; }
  .yl-cookie__ok,
  .yl-cookie__no { flex: 1 1 0; padding: 12px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .yl-cookie { transition: none; transform: none; }
}

/* 130. L'avviso dei cookie scende.
        Stava a 96 px dal fondo per non coprire il bottone fisso ACQUISTA, ma
        quel bottone c'e' solo sulla home: su tutte le altre pagine restava
        sospeso a meta' aria per niente. Ora sta basso ovunque, e si alza solo
        dove serve davvero.

        I 96 px erano comunque sbagliati. Venivano da un commento piu' vecchio
        che dava il bottone ACQUISTA alto 88 px, e nessuno l'aveva piu'
        misurato: e' alto 129. Con 96 l'avviso non stava sopra al bottone, ci
        stava DENTRO per 33 px. Misurato a 390x844. Adesso 143, cioe' i 129 del
        bottone piu' 14 di aria, e l'`env()` perche' sugli iPhone il bottone
        cresce della striscia di casa e senza si rimangerebbe quell'aria. */

@media (max-width: 780px) {
  .yl-cookie { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  body.home .yl-cookie { bottom: calc(143px + env(safe-area-inset-bottom, 0px)); }
}

/* 131. Col menù aperto, sul desktop restava lo schermo nudo.
        Sul telefono questo problema non c'e': la barra compatta sta a
        z-index 9996, sopra la tendina che sta a 9995, quindi il carrello
        non sparisce mai e il burger diventa la X per chiudere, al posto suo.

        Sul desktop la barra compatta e' `display: none` e comanda
        l'intestazione, che pero' sta a z-index 95. La tendina le passava
        sopra e la copriva: a menu aperto non restava niente da cliccare per
        uscire, ne' il carrello. Solo Esc, un link, o lo scorrimento.

        Alzare le due icone da sole non serviva a niente: l'intestazione e'
        `sticky` con uno z-index suo, quindi fa contesto di impilamento, e un
        figlio non puo' uscire dal contesto del padre per quanto alto lo si
        metta. Va alzata l'intestazione intera. Dentro c'e' gia' solo quello
        che serve: il logo, il carrello e il burger, perche' le voci distese e
        il bottone Acquista li' sono spenti dal blocco 37.

        Il fondo velato invece va tolto. Serve a staccare l'intestazione dalla
        pagina che le scorre sotto, ma sopra la tendina, che e' opaca al 97%,
        non stacca da niente: lascerebbe solo una riga di bordo che taglia in
        due il velo. Le icone sono crema su fondo quasi nero e si leggono da
        sole.

        Questo blocco sta in fondo al foglio apposta. Il fondo velato viene
        riscritto tre volte (blocchi 37, 54, 73) con la stessa specificita' e
        con `!important`: fra due dichiarazioni pari vince l'ultima scritta,
        quindi per vincere davvero questa deve venire dopo tutte. */

@media (min-width: 901px) {
  html.yl-menu-aperto .yl-testa { z-index: 9996; }

  html.yl-menu-aperto .yl-header {
    background-color: transparent !important;
    backdrop-filter: none;
    border-bottom-color: transparent;
  }
}

/* 132. Le gocce sparivano di colpo, a meta' schermata.
        Misurato sul telefono a 390x844: la scena e' alta 2026 px, la finestra
        844, quindi l'intervallo `contain` finisce a scroll 1190. Il perno
        appiccicato e' alto quanto la finestra dentro un contenitore di 2026,
        quindi si sgancia a 8 + (2026 - 844), che fa 1190. Lo stesso punto.

        Nello stesso istante succedono due cose: l'animazione arriva in fondo
        al suo intervallo e il palco si stacca e comincia ad andarsene. E la
        regola base di .yl-nebbia dice `opacity: 0`, perche' le gocce le
        accende solo l'animazione. Basta che per un fotogramma quel valore
        smetta di applicarsi e le gocce non sfumano: si spengono.

        Il primo tentativo le faceva USCIRE apposta con una dissolvenza, cosi'
        che al momento critico non ci fosse piu' niente da far sparire. Tolto:
        Zago le vuole li'. Sparivano prima e sparivano dopo, cambiava solo il
        garbo.

        La correzione buona sposta la FINE dell'intervallo. Non serve piu'
        indovinare perche' il valore smetta di applicarsi in quel punto: si
        fa in modo che quel punto non sia piu' la fine di niente. Da `contain
        100%`, che cade esattamente dove il palco si sgancia, a `cover 100%`,
        cioe' quando la scena e' uscita del tutto dallo schermo. Sul telefono
        l'intervallo passa da 1182 px di scorrimento a 1340, e i 844 px in cui
        la scena se ne va cadono ora DENTRO l'animazione, non dopo.

        Cosi' le gocce restano accese per tutto il tempo in cui si vedono, se
        ne vanno insieme al palco, e risalendo si riavvolgono. Lo scoppio sta
        nel primo 9% dell'intervallo, che fa un centinaio di pixel sul telefono
        e un centocinquanta su desktop: parte secco e poi continua ad aprirsi
        piano mentre la scena scorre. */

@supports (animation-timeline: view()) {
  .yl-nebbia { animation-range: contain 58% cover 100%; }

  @keyframes yl-scoppio {
    0%   { opacity: 0;   transform: scale(.05); }
    9%   { opacity: 1;   transform: scale(1.05); }
    100% { opacity: .95; transform: scale(1.32); }
  }
}

/* 133. Sulla home, da telefono, il pie di pagina finiva sotto il bottone.
        Misurato a 390x844: il bottone fisso e' alto 129 px, ma lo spazio
        riservato in fondo alla pagina era 88. La riga del copyright finiva
        9 px SOTTO il bordo del bottone, cioe' ci stava dietro.

        Il conto, per chi dovra' rimetterci mano. Con P lo spazio in fondo,
        l'aria fra l'ultima riga e il bottone vale P meno 97: 129 del bottone
        piu' i 32 di respiro che il pie di pagina ha gia' suoi, meno l'altezza
        della finestra. Con P a 88 fa -9, ed e' il difetto.

        Prima l'avevo messo a 137, che fa 40 px di aria. Troppi: si arrivava in
        fondo e si continuava a scorrere nel vuoto. Ora 111, che fa 14, gli
        stessi 14 che tiene l'avviso dei cookie sopra allo stesso bottone. La
        pagina finisce dove finisce il testo. Se un domani serve piu' o meno
        respiro, si cambia solo questo numero: aria voluta piu' 97.

        Va aggiunto come SPAZIO IN FONDO, non come margine sul pie di pagina:
        cosi' cresce solo la coda del documento e tutto il resto della pagina
        resta dov'era.

        Solo `body.home`: il bottone fisso vive nel contenuto della home e su
        nessun'altra pagina, verificato su tutte e otto. E solo entro 781 px,
        lo stesso punto di rottura in cui il bottone compare, cosi' i due non
        possono scollegarsi.

        L'`env()` serve agli iPhone: la barra cresce della striscia di casa, e
        senza questo l'aria calcolata qui se la mangerebbe quella. */

@media (max-width: 781px) {
  body.home { padding-bottom: calc(111px + env(safe-area-inset-bottom, 0px)); }
}

/* 134. Il testo dei bottoni diventava grigio al tocco.
        Sul telefono non esiste il passaggio del mouse. Quando si tocca, il
        browser accende `:active` e `:focus`, non `:focus-visible`, che e'
        riservato a chi naviga da tastiera. Il bianco stava solo su `:hover` e
        `:focus-visible`: nel momento del tocco non lo prendeva nessuno dei due
        in modo affidabile, e il testo restava del colore di base.

        Sopra ci si mette il riquadro di evidenziazione che Android e iOS
        dipingono da soli su tutto quello che si tocca: un velo grigio
        traslucido che copre bottone e testo insieme. Quello e' il grigio.

        Due mosse: il velo si spegne, e il bianco lo prendono tutti gli stati
        del tocco, non solo quelli del mouse. */

main .wp-block-button__link,
.yl-acquista-fisso .wp-block-button__link,
.yl-barra__tasto,
.woocommerce .button,
.woocommerce button.button {
  -webkit-tap-highlight-color: transparent;
}

main .wp-block-button__link:hover,
main .wp-block-button__link:focus,
main .wp-block-button__link:focus-visible,
main .wp-block-button__link:active {
  color: #FFFFFF;
  text-shadow: 0 2px 0 #2E1508;
}

/* 135. Il carrello sul telefono, due rotture misurate a 390 px.

        La scheda TOTALE CARRELLO sbordava di 42 px oltre il suo contenitore.
        Colpa di `box-sizing: content-box`: la larghezza le viene data al 100%
        del padre, cioe' 342, e poi il browser ci somma i 18 px di imbottitura
        per lato e i 3 di bordo. 342 + 42 = 384 dentro un vano da 342. Con
        `border-box` l'imbottitura sta dentro la misura, che e' come ragiona
        tutto il resto del foglio.

        Il bottone APPLICA CODICE: 146 px di larghezza per un contenuto che ne
        chiede 309, con 40 px di imbottitura per lato e il testo che non puo'
        andare a capo. Le lettere uscivano dal bottone. Su schermo stretto il
        campo e il bottone si mettono uno sotto l'altro, larghi entrambi, e
        l'imbottitura scende a 16 e il testo puo' andare a capo: il bottone
        passa da 146 px a 304 e le 27 lettere di "Applica codice promozionale"
        ci stanno su due righe.

        I due `!important` sono voluti e non sono pigrizia: quei 146 px non li
        scrive nessuna regola, li decide il calcolo del flex, e una larghezza
        dichiarata senza forzatura continuava a perdere. Verificato riga per
        riga sul sito, cercando fra tutti i fogli di stile chi imponesse quella
        misura: nessuno. Sono ristretti a `.coupon` diretto e sotto i 780 px,
        quindi non possono sfuggire altrove.

        I riquadri di Apple Pay e Google Pay escono di 4 px per lato, e vanno
        LASCIATI STARE: sono iframe di Stripe con un `margin: -4px` scritto
        inline da loro, che serve a compensare un'imbottitura interna. Non
        fanno scorrere la pagina di un pixel, e mettere le mani negli iframe
        dei pagamenti per guadagnare 4 px non vale il rischio. */

.woocommerce-cart .cart_totals,
.woocommerce-cart .cart-collaterals,
.woocommerce-cart .woocommerce-cart-form { box-sizing: border-box; }

@media (max-width: 780px) {
  .woocommerce-cart .coupon {
    flex-direction: column;
    align-items: stretch;
  }
  .woocommerce-cart .coupon > input,
  .woocommerce-cart .coupon > button {
    width: 100% !important;
    padding-left: 16px;
    padding-right: 16px;
  }
  .woocommerce-cart .coupon > button { white-space: normal !important; }
}

/* 136. Le gocce, terzo tentativo, e stavolta senza indovinelli.
        I primi due (blocchi 132) spostavano l'intervallo dell'animazione:
        prima accorciandolo con una dissolvenza, poi allungandolo fino a
        `cover 100%`. Nessuno dei due ha risolto: su telefono le gocce
        continuavano a spegnersi di colpo a meta' schermata.

        Il difetto vero non e' DOVE finisce l'intervallo, e' che la
        visibilita' dipende da un'animazione. La regola base di .yl-nebbia
        dice `opacity: 0` e sono le sole 34 ombre a essere accese dai
        fotogrammi: nel momento in cui il browser smette di applicare quel
        valore, e su telefono lo fa, non c'e' rete sotto.

        Quindi su telefono l'animazione si spegne e comanda una classe messa
        dal JavaScript, con una transizione normale. Non e' piu' una questione
        di come il browser tratta le linee del tempo dello scorrimento: o la
        classe c'e' o non c'e'. Salendo si spengono da sole, che era la cosa
        chiesta.

        Su desktop non si tocca niente: li' l'animazione ha sempre funzionato,
        ed e' piu' bella perche' segue il dito invece di partire e basta. */

@media (max-width: 900px) {
  .yl-nebbia {
    animation: none !important;
    opacity: 0;
    transform: scale(.25);
    transition: opacity .45s ease, transform .6s cubic-bezier(.2, .8, .3, 1.25);
  }
  html.yl-gocce .yl-nebbia {
    opacity: .95;
    transform: scale(1.3);
  }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .yl-nebbia { transition: none; }
}

/* 137. Carrello e cassa: tutto quello che ha imbottitura sfondava il vano.
        WooCommerce scrive il suo markup classico in `content-box`, mentre
        tutto il resto del foglio ragiona in `border-box`. Ogni elemento con
        imbottitura si ritrovava largo quanto il contenitore PIU' la sua
        imbottitura, e usciva.

        Misurato a 1280: `.col-1` e `.col-2` larghi 603 in un vano da 537, 66
        px di troppo per ognuno. Sul telefono, la stessa cosa a 42. Allineando
        il modello di scatola, gli elementi che sfondavano passano da tre a
        uno, e quell'uno e' `wc-stripe-hidden-style-input`: un campo invisibile
        che Stripe inietta per leggere gli stili del tema e vestire uguale i
        campi della carta. Non si vede e non va toccato. */

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

/* 138. L'avviso "aggiunto al carrello" e il suo bottone.
        WooCommerce spoglia i bottoni dentro i suoi avvisi a blocchi: colore,
        sfondo e imbottitura glieli toglie con `!important` perche' vuole che
        quel link sembri un link. Il tema pero' gli lascia addosso il carattere
        Titan One, il raggio da pastiglia e l'ombra dura, che arrivano da
        `.wp-element-button` e non vengono spenti. Il risultato e' quel mezzo
        bottone: scritta grigia senza fondo, con l'ombra sotto.

        Il primo tentativo aveva il selettore troppo corto e perdeva. Questa e'
        la regola vera, letta dentro `store-notices.css` del plugin:

          .wc-block-components-notice-banner
          > .wc-block-components-notice-banner__content
          .wc-forward { background: transparent !important;
                        color: #2f2f2f !important;
                        padding: 0 !important; float: right; opacity: .7; }

        Tre classi, quindi specificita' (0,3,0). Il mio primo selettore ne
        aveva due e mezzo, (0,2,1): stessa importanza ma specificita' piu'
        bassa, e fra due dichiarazioni entrambe `!important` vince la piu'
        specifica. L'`!important` da solo non conta niente se il selettore e'
        piu' debole. Qui ricalco la stessa catena e aggiungo `a`, cosi' si
        arriva a (0,3,1) e passa.

        Da notare `opacity: .7`, che e' il motivo per cui la scritta sembrava
        sbiadita oltre che grigia, e `float: right`, che lo staccava dal flusso
        e lo mandava a sbattere contro il bordo.

        Il contenuto dell'avviso diventa una riga flessibile, cosi' il bottone
        smette di galleggiare e sotto i 600 px va a capo da solo, largo quanto
        l'avviso, invece di finire schiacciato nell'angolo. */

.wc-block-components-notice-banner__content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}

.wc-block-components-notice-banner > .wc-block-components-notice-banner__content a.wc-forward,
.woocommerce-message a.button,
.woocommerce-info a.button {
  float: none !important;
  opacity: 1 !important;
  margin: 0 !important;
  flex: 0 0 auto;
  background: var(--wp--preset--color--oro) !important;
  color: var(--wp--preset--color--fondo) !important;
  padding: 11px 20px !important;
  border: 3px solid #1B0A08 !important;
  border-radius: 40px !important;
  box-shadow: 0 4px 0 0 #1B0A08 !important;
  text-decoration: none !important;
  font-size: 15px !important;
  line-height: 1.15 !important;
}

@media (max-width: 600px) {
  .wc-block-components-notice-banner > .wc-block-components-notice-banner__content a.wc-forward,
  .woocommerce-message a.button,
  .woocommerce-info a.button {
    flex: 1 1 100%;
    text-align: center;
  }
}

/* 139. Sul checkout mancava la nostra intestazione.
        Non era un difetto di stile: WooCommerce ha una sua parte di modello
        che si chiama `checkout-header`, fatta apposta per non distrarre, e
        dentro ci sono solo il titolo del sito come TESTO e un'icona del
        carrello. Niente logo, niente burger, niente tendina.

        I due tasti tondi dell'intestazione non sono nel markup: li clona il
        JavaScript dentro `.yl-header`, che su quella pagina non esisteva, e
        quindi non avevano dove andare.

        La correzione sta in `parts/checkout-header.html`: una parte con lo
        stesso nome dentro il tema vince su quella del plugin, e li' dentro
        richiamiamo la nostra intestazione normale. Il file e' di quattro
        righe apposta, cosi' non c'e' una seconda copia dell'intestazione da
        tenere allineata a mano. */

/* 140. Le polaroid del "Chi siamo" pendevano a destra, su telefono.
        Le schede sono centrate nel loro spazio: e' la rotazione a sbilanciarle.
        Ogni polaroid e' ruotata di un paio di gradi intorno a un punto che sta
        SOPRA la scheda, come se pendesse da una molletta, e questo allarga il
        suo ingombro verso un lato solo. Le quattro rotazioni non si annullano
        fra loro, e la somma pende a destra.

        Misurato a 430 px, che e' la larghezza a cui le colonne diventano due:
        24 px di aria a sinistra e ZERO a destra, con le schede della colonna
        destra che finivano esattamente sul bordo dello schermo.

        Due correzioni insieme, perche' una sola non bastava:

        - 16 px di respiro ai lati del filo. Restringe le colonne e quindi le
          schede, che da 225 px passano a 208: e' quello che stacca le schede
          dai bordi.
        - 12 px di spostamento a sinistra, che e' la meta' esatta dello
          sbilanciamento misurato, e serve a compensare la pendenza.

        Risultato: a 430 px, 28 px di aria per lato e sbilanciamento ZERO. A
        390, dove la colonna e' una sola, lo sbilanciamento scende da 36 a 12,
        che a occhio non si vede piu'.

        Lo spostamento e' un `transform` e non un margine apposta: non tocca il
        flusso, quindi non puo' spostare nient'altro nella pagina. Verificato
        che dentro al filo non ci sia niente di `fixed`, che con un transform
        sopra cambierebbe riferimento. */

@media (max-width: 780px) {
  .yl-filo {
    padding-inline: 16px;
    transform: translateX(-12px);
  }
}

/* 141. I bottoni Apple Pay e Google Pay si sovrapponevano al testo.
        Il contenitore che li ospita, `#wc-stripe-express-checkout-element`,
        ha altezza ZERO: misurata, insieme a quella dei due riquadri Stripe che
        stanno dentro. Un contenitore alto zero non occupa spazio nel flusso,
        ma i riquadri dentro si disegnano lo stesso: finiscono sopra quello che
        viene prima o dopo, ed e' esattamente quello che si vede.

        Qui non si tocca l'altezza dei riquadri di Stripe, che se la scrive lui
        quando ha finito di caricarsi e non va contraddetta: si impedisce al
        CONTENITORE di collassare, cosi' lo spazio resta prenotato comunque.
        Il `:not(:empty)` serve a non lasciare un buco sui siti dove nessun
        pagamento express e' disponibile e il contenitore resta vuoto davvero.

        Il `clear: both` e' per la stessa ragione: quel blocco vive in fondo
        alla colonna dei dati di fatturazione, e senza si infila accanto a
        quello che ha sopra invece di andarci sotto.

        NOTA: il difetto si vede quando la cassa torna indietro con un errore
        di compilazione, e quello stato non ho potuto riprodurlo, perche' per
        arrivarci bisogna premere EFFETTUA ORDINE e col carrello pieno rischia
        di partire un ordine vero. Quindi qui e' corretto il meccanismo che ho
        misurato, non la scena esatta. Va guardato. */

#wc-stripe-express-checkout-element {
  clear: both;
}

#wc-stripe-express-checkout-element:not(:empty) {
  min-height: 48px;
}

/* 142. Il buco fra l'intestazione e il contenuto, su carrello e cassa.
        Misurato a 1280 sulla cassa: 251 px di niente. Sono tre pezzi.

        128 li prende un blocco VUOTO. WooCommerce mette sempre in cima il
        contenitore degli avvisi, e quando non c'e' niente da dire resta li'
        con i suoi 64 px di imbottitura sopra e 64 sotto. Nel foglio c'era gia'
        una regola per spegnerlo, ma cercava `:empty`, e `:empty` vuole che
        dentro non ci sia PROPRIO NIENTE: quel blocco un figlio ce l'ha sempre,
        un involucro vuoto a sua volta. Quindi non ha mai funzionato.

        Adesso si guarda il contenuto vero con `:has()`: se dentro non c'e'
        nessun avviso, il blocco sparisce. Quando invece un avviso c'e', resta
        e si tiene la sua imbottitura, che li' serve. Sui browser troppo vecchi
        per `:has()` la regola viene ignorata e si torna a com'era: niente si
        rompe, resta solo il buco.

        Gli altri 64 sono l'imbottitura della sezione del contenuto e 39 un
        margine che WooCommerce si mette da solo. Su queste due pagine non
        servono a niente: la cassa e il carrello sono moduli, non sezioni da
        sfogliare.

        Risultato: cassa da 251 px a 44, carrello da 128 a 24 sopra al titolo e
        da 102 a 24 fra il titolo e la tabella. La pagina del carrello si
        accorcia di 247 px. */

main > .wc-block-store-notices:not(:has(.wc-block-components-notice-banner, .woocommerce-message, .woocommerce-error, .woocommerce-info)) {
  display: none !important;
}

body.woocommerce-cart main > .wp-block-post-title,
body.woocommerce-cart main > .entry-content,
body.woocommerce-checkout main > .entry-content {
  padding-top: 24px !important;
}

body.woocommerce-cart .entry-content > .woocommerce,
body.woocommerce-checkout .entry-content > .woocommerce {
  margin-top: 0 !important;
}

/* 143. La polaroid del prodotto usciva dallo schermo, su telefono.
        Stessa storia delle polaroid del "Chi siamo": la cornice e' ruotata di
        2,7 gradi, e la rotazione allarga il suo ingombro verso destra. A 390
        px misurava 366 di larghezza, con 25 px di aria a sinistra e MENO UNO
        a destra: usciva di un pixel dal bordo.

        C'e' pero' una differenza che ha reso inutile la prima idea. Il vano
        della galleria non e' centrato: e' allineato a sinistra e si allunga
        fino al margine destro. Quindi restringerlo e basta non centra niente,
        toglie spazio solo dal lato destro. Provato a 430 px: la cornice
        finiva con 25 px di aria a sinistra e 63 a destra, peggio di prima.

        Servono tutte e tre le cose insieme:

        - larghezza all'88%, che rimpicciolisce la cornice di circa un decimo
        - margini automatici, che finalmente la centrano nel vano
        - 11 px di spostamento a sinistra, che compensano la pendenza

        Misure finali, cornice piu' piccola e aria quasi pari sui due lati:

          a 390 px:  da 366 a 325 di larghezza,  35 a sinistra e 31 a destra
          a 430 px:  da 404 a 358 di larghezza,  37 a sinistra e 35 a destra

        Le due frecce restano appoggiate ai bordi della cornice come prima:
        sporgono un po' apposta, non e' un difetto. */

@media (max-width: 780px) {
  .wp-block-woocommerce-product-image-gallery {
    max-width: 88% !important;
    margin-inline: auto !important;
    transform: translateX(-11px);
  }
}

/* 144. Al tocco il testo dei bottoni restava di un colore sporco.
        Il blocco 134 aveva gia' dato il bianco a tutti gli stati del tocco, e
        quello funziona: il difetto era altrove, nella TRANSIZIONE.

        Il colore ha una dissolvenza di 180 millisecondi. Un tocco col dito ne
        dura sui 100: si stacca prima che il bianco sia arrivato, e il colore
        torna indietro da meta' strada. L'ombra del testo invece non e' in
        transizione e scatta subito. Il risultato e' il testo scuro con
        l'ombra addosso, che e' esattamente il colore strano che si vede.

        Col mouse non succede perche' il puntatore resta fermo sopra al
        bottone finche' vuole, e la dissolvenza fa in tempo a finire.

        Quindi sui dispositivi senza puntatore la dissolvenza si toglie e il
        bianco arriva nello stesso istante dell'ombra. Restano in transizione
        solo lo spostamento e l'ombra del bottone, che sono rapidi e servono a
        far sentire il clic.

        Il salto della dimensione del testo, da 17 a 18 px, diventa istantaneo
        anche lui: un pixel, non si vede. */

@media (hover: none) {
  main .wp-block-button__link {
    transition: transform .16s ease, box-shadow .16s ease;
  }
}

/* 145. Le immagini non si trascinano fuori dalla finestra.
        Bastava tenere premuto su Yumo e portarlo sul desktop: partiva la copia
        del file. Sul telefono, tenendo il dito premuto, usciva il menu con
        "Salva immagine".

        `-webkit-user-drag` spegne il trascinamento su Chrome, Edge e Safari.
        Firefox non lo conosce e va spento dal JavaScript, in `functions.php`.
        `-webkit-touch-callout` toglie il menu del dito premuto su iPhone.

        `user-select` sulle immagini non serve a selezionare meno testo, che
        dentro un'immagine non c'e': serve a non far comparire l'alone azzurro
        quando si trascina il dito sopra durante lo scorrimento.

        ATTENZIONE a cosa NON fa: questo non protegge le immagini. Il browser
        per mostrarle deve scaricarle, quindi sono gia' sul computer di chi
        guarda. Chi vuole prendersele ci riesce comunque, dagli strumenti per
        sviluppatori o aprendo l'indirizzo del file. Qui si alza l'attrito, non
        si mette un lucchetto. */

img {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
}

/* 146. Il pie' di pagina entra sfumando, invece di cominciare di colpo.
        Non c'era un difetto da riparare: la giuntura era gia' morbida, un
        contrasto di 1,06 a 1 fra il viola della pagina e quello del piede,
        senza riga ne' bordo. E' una rifinitura, non una correzione.

        La scelta e' una sfumatura e non un separatore sagomato, di quelli a
        onde. Tre motivi, il terzo e' tecnico e da solo basterebbe:

        1. Il resto della pagina e' gia' pieno di movimento, e il pie' di
           pagina e' l'unico punto dove l'occhio si ferma. Le onde toglierebbero
           la pausa invece di aggiungere carattere.
        2. Le onde sono la firma dei costruttori di pagine, e questo tema e'
           scritto a mano apposta per non avere quell'aria.
        3. Lo sfondo della pagina e' una sfumatura ancorata allo SCHERMO, non
           al documento: il colore sopra il piede cambia mentre si scorre.
           Una forma piena dovrebbe indovinare un colore che si muove, e si
           vedrebbe lo scalino. Una sfumatura sulla trasparenza no, perche' non
           sceglie un colore: lascia passare quello che c'e' sotto.

        Il colore pieno va spento con `!important` perche' arriva dalla classe
        `has-fondo-scuro-background-color`, che WordPress genera da theme.json
        gia' con la forzatura: senza, resta sotto e la sfumatura non si vede,
        visto che sfuma verso lo stesso colore.

        Il valore rgba deve restare uguale a `fondo-scuro` di theme.json
        (`#0E051D`). Non si puo' usare la variabile perche' serve la stessa
        tinta anche a trasparenza zero, e sfumare verso `transparent` in sRGB
        passa dal nero e lascia una banda grigiastra.

        Il logo comincia a 22 px dal bordo, quindi sul telefono la sfumatura lo
        attraversa: misurato, il fondo sotto di lui cambia di 10 punti su 255,
        cioe' niente. Il testo crema resta a 15,1 di contrasto e l'oro a 6,5
        anche nel punto piu' chiaro, contro i 4,5 richiesti.

        DUE MISURE, e non e' un capriccio. Il pie' di pagina e' alto 610 px sul
        telefono e 382 sul desktop, perche' li' le colonne stanno in fila invece
        che una sotto l'altra. Con un valore solo la stessa sfumatura copriva il
        18% del piede sul telefono e il 29% sul desktop: identica in pixel,
        sproporzionata all'occhio.

        Adesso sono 85 e 55, che fanno il **14% in tutti e due i casi**. E i 55
        del desktop hanno un secondo pregio: finiscono a filo, prima dei 64 px
        di respiro in cima, quindi li' il contenuto sta tutto sul colore pieno e
        la sfumatura resta una cosa fra la pagina e il piede, senza toccare
        niente di quello che ci sta dentro. */

footer .yl-footer.has-background {
  background-color: transparent !important;
  background-image: linear-gradient(to bottom, rgba(14, 5, 29, 0) 0, rgb(14, 5, 29) 85px);
}

@media (min-width: 901px) {
  footer .yl-footer.has-background {
    background-image: linear-gradient(to bottom, rgba(14, 5, 29, 0) 0, rgb(14, 5, 29) 55px);
  }
}

/* 147. Il carrello da desktop, rimesso in squadra.
        Misurato a 1280 con un prodotto dentro, ed era peggio di come sembrava:

        - il titolo era allineato a sinistra
        - la colonna del bottone X era larga 674 px: la tabella e' `fixed`,
          le altre colonne hanno una misura e la prima, che non ce l'ha, si
          prende tutto l'avanzo
        - la miniatura del prodotto era schiacciata a 4 PX. La regola le da'
          74 px, ma la sua cella ne aveva 36 meno 32 di imbottitura, e il
          `max-width: 100%` di WordPress la strozzava li'. Ecco perche' da
          desktop l'immagine non si e' mai vista: non era nascosta, era
          larga quanto un filo
        - la tabella sbordava di 190 px dal suo contenitore

        La cura: misure esplicite alle due colonne mute (la X e la miniatura),
        cosi' l'avanzo va al nome del prodotto, dove serve; tabella larga
        quanto il suo vano e basta; tutto il blocco centrato. Il titolo si
        centra qui e vale anche per la cassa e l'account: e' la stessa regola
        del corpo centrato che governa il resto del sito. */

@media (min-width: 782px) {
  .woocommerce-cart .wp-block-post-title,
  .woocommerce-checkout .wp-block-post-title,
  .woocommerce-account .wp-block-post-title { text-align: center; }

  /* la radice di meta' dei disallineamenti: il contenitore .woocommerce ha
     `max-width: 1000px` (da woocommerce-blocktheme) e stava appoggiato a
     sinistra in un vano da 1.217. Centrato lui, tutto quello che contiene
     torna sull'asse della pagina, che e' a 633 px su schermo da 1280. */
  .woocommerce-cart .entry-content > .woocommerce,
  .woocommerce-checkout .entry-content > .woocommerce { margin-inline: auto !important; }

  .woocommerce-cart .woocommerce-cart-form {
    max-width: 980px;
    margin-inline: auto !important;
  }
  .woocommerce-cart table.shop_table.cart {
    width: 100% !important;
    table-layout: fixed;
    margin-inline: 0;
  }
  .woocommerce-cart .shop_table.cart th.product-remove,
  .woocommerce-cart .shop_table.cart td.product-remove { width: 48px; }
  .woocommerce-cart .shop_table.cart th.product-thumbnail,
  .woocommerce-cart .shop_table.cart td.product-thumbnail { width: 106px; }
  .woocommerce-cart .shop_table.cart th.product-price,
  .woocommerce-cart .shop_table.cart td.product-price { width: 110px; }
  .woocommerce-cart .shop_table.cart th.product-quantity,
  .woocommerce-cart .shop_table.cart td.product-quantity { width: 150px; }
  .woocommerce-cart .shop_table.cart th.product-subtotal,
  .woocommerce-cart .shop_table.cart td.product-subtotal { width: 120px; }

  /* la testata della colonna X e della miniatura e' solo per chi non vede */
  .woocommerce-cart .shop_table.cart th.product-remove span,
  .woocommerce-cart .shop_table.cart th.product-thumbnail span { display: none; }
}

/* 148. Gli avvisi non si spalmano piu' su tutta la pagina.
        "Aggiunto al carrello", "il tuo carrello e' vuoto", "sei gia' un
        cliente?": tutti larghi 1217 px con la scritta persa a sinistra.
        Un avviso e' una frase, non una sezione: 860 px e centrato. Sul
        telefono non cambia niente, li' sono gia' piu' stretti di cosi'.
        Centrato anche il bottone RITORNA AL NEGOZIO del carrello vuoto. */

.wc-block-store-notices .wc-block-components-notice-banner,
.woocommerce-notices-wrapper .wc-block-components-notice-banner {
  max-width: 860px;
  margin-inline: auto;
}
.woocommerce-cart .return-to-shop { text-align: center; }

/* 149. La riga quantita' + AGGIUNGI AL CARRELLO, centrata nella sua colonna.
        Stava appoggiata a sinistra mentre titolo, prezzo e descrizione sopra
        sono centrati: era l'unica riga fuori asse. Solo desktop: sul telefono
        la riga ha gia' un suo assetto (blocco 89 e seguenti). */

@media (min-width: 782px) {
  body.single-product form.cart { justify-content: center; }
}

/* 150. Il contatore della quantita' coi bottoni, non le freccette fantasma.
        L'input numerico del browser mostra le freccette solo al passaggio del
        mouse, minuscole e grigie: Zago le vuole visibili sempre e in stile.
        I bottoni veri li aggiunge il JavaScript (yl_contatore_quantita in
        functions.php): qui stanno il vestito e lo spegnimento delle freccette
        native, che altrimenti raddoppierebbero. */

/* il selettore lungo non e' pignoleria: con quello corto vinceva una regola
   di WooCommerce e l'allineamento restava `stretch`, coi bottoni appesi in
   alto. E il margine e' suo: 7,5 px a destra del campo, che sbilanciava i
   due lati. Misurato. */
.woocommerce div.product form.cart .quantity {
  display: flex;
  align-items: center;
  gap: 8px;
}
.woocommerce div.product form.cart .quantity input.qty { margin: 0; }
form.cart .quantity input.qty::-webkit-outer-spin-button,
form.cart .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
form.cart .quantity input.qty { -moz-appearance: textfield; appearance: textfield; text-align: center; }

.yl-qta {
  flex: 0 0 auto;
  /* il segno sta al centro per costruzione: senza il flex dipendeva dalla
     metrica del carattere, e il meno sembrava fuori asse */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  background: var(--wp--preset--color--oro);
  border: 3px solid #1B0A08;
  box-shadow: 0 3px 0 0 #1B0A08;
  color: #2E1508;
  font: 700 18px/1 Archivo, sans-serif;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.yl-qta:hover { background: #E89A2B; }
.yl-qta:active { transform: translateY(2px); box-shadow: 0 1px 0 0 #1B0A08; }

/* Il vano del form ha `width: max-content` da WooCommerce: coi bottoni nuovi
   il suo contenuto minimo superava lo schermo del telefono e sbordava di 126
   px. A tutta larghezza del suo spazio, sempre: su desktop non cambia niente
   perche' gia' lo occupava tutto. */
.woocommerce div.product .wp-block-add-to-cart-form {
  width: 100% !important;
  min-width: 0;
}

/* Sul telefono la riga e' stretta e i bottoni si fanno piccoli: 30 px loro,
   44 il campo. Cosi' la quantita' occupa 112 px e ad AGGIUNGI AL CARRELLO ne
   restano 220, quando il testo ne chiede 186: misurato a 390. */
/* Sul telefono il contatore diventa UNA pillola, su disegno di Zago del
   2026-08-23: il numero a sinistra e i due segni impilati a destra, divisi
   da righe dello stesso nero del bordo. Stesso markup di prima, cambia solo
   il vestito: la griglia mette il campo su due righe a sinistra e i bottoni
   nelle due celle di destra, il piu' sopra e il meno sotto come nel disegno.
   I bottoni si riconoscono dall'etichetta vocale, che gia' li distingue. */
@media (max-width: 781px) {
  .woocommerce div.product form.cart .quantity {
    display: grid;
    /* la colonna dei segni e' larga 46: prima era 32 e i bottoni si
       toccavano male. La pillola si allarga, il numero scivola a sinistra
       nella sua zona e il bottone AGGIUNGI, che e' elastico, cede lo spazio
       da solo: a 375 px gli restano 193 px quando il testo ne chiede 179. */
    grid-template-columns: 1fr 46px;
    /* due righe uguali, non fisse: la pillola si stira con align-self fino
       all'altezza del bottone AGGIUNGI accanto (57 px oggi), e resta della
       sua stessa altezza anche se quello un domani cambia misura */
    grid-template-rows: 1fr 1fr;
    align-self: stretch;
    gap: 0;
    width: 120px;
    flex: 0 0 auto;
    background: #F6F1E6;
    border: 3px solid #1B0A08;
    border-radius: 26px;
    box-shadow: 0 3px 0 0 #1B0A08;
    overflow: hidden;
  }
  .woocommerce div.product form.cart .quantity input.qty {
    grid-area: 1 / 1 / 3 / 2;
    width: 100% !important;
    height: 100% !important;
    padding: 0 0 0 4px;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    color: #2A1206 !important;
    box-shadow: none;
    font-size: 16px;
  }
  .woocommerce div.product form.cart .yl-qta {
    width: 100%;
    height: 100%;
    border: 0;
    border-left: 2px solid #1B0A08;
    border-radius: 0;
    background: var(--wp--preset--color--oro);
    box-shadow: none;
    font-size: 14px;
    transition: background-color .12s ease;
  }
  .woocommerce div.product form.cart .yl-qta:hover { background: var(--wp--preset--color--oro); }
  .woocommerce div.product form.cart .yl-qta:active {
    transform: none;
    box-shadow: none;
    background: #E89A2B;
  }
  /* il piu' sopra e il meno sotto, come nel disegno */
  .woocommerce div.product form.cart .yl-qta[aria-label^="Aumenta"] {
    grid-area: 1 / 2 / 2 / 3;
    border-bottom: 2px solid #1B0A08;
  }
  .woocommerce div.product form.cart .yl-qta[aria-label^="Riduci"] {
    grid-area: 2 / 2 / 3 / 3;
  }

  /* il testo sbordava dal bottone su iPhone: a 375 px di schermo il bottone
     aveva 183 px e la scritta ne chiedeva 186. Con la pillola da 86 il
     bottone ha oltre 220 px e la scritta, senza spaziatura extra, ne
     chiede 191. */
  .woocommerce div.product form.cart button.single_add_to_cart_button {
    padding: 16px 8px;
    font-size: clamp(11px, 3.6vw, 15px);
    letter-spacing: 0;
  }
}

/* 151. La cassa da desktop: i bottoni Pay al loro posto e tutto in asse.

        Il form della cassa e' una griglia a due colonne, e WooCommerce
        assegna una posizione esplicita (riga 1) alle due colonne. I bottoni
        di Apple Pay e Google Pay e il separatore OPPURE arrivano da Stripe
        SENZA posizione, e la griglia mette gli elementi senza posizione DOPO
        quelli espliciti: finivano in fondo alla pagina, sotto tutto, con
        l'OPPURE che non divideva piu' niente. Nel codice sorgente stanno in
        cima, ed e' per questo che sul telefono, dove la griglia non c'e',
        si vedono al posto giusto.

        Qui si da' una posizione esplicita a tutti: Pay in riga 1 su tutte e
        due le colonne, OPPURE in riga 2, e le colonne sotto. Le regole di
        griglia sui telefoni vengono ignorate da sole, perche' li' il form
        non e' una griglia.

        Il form poi era largo 1.000 px appoggiato a sinistra in un vano da
        1.217: centrato coi margini. E il segnaposto dei campi era grigio
        chiaro su crema, 4 a 1 di contrasto: scurito quel tanto che basta
        per passare 5,2 a 1. */

@media (min-width: 700px) {
  form.woocommerce-checkout { margin-inline: auto; }

  form.woocommerce-checkout #wc-stripe-express-checkout-element {
    grid-row: 1;
    grid-column: 1 / -1;
    justify-self: center;
    width: min(100%, 620px);
  }
  form.woocommerce-checkout #wc-stripe-express-checkout-button-separator {
    grid-row: 2;
    grid-column: 1 / -1;
  }
  /* contenitore di input nascosti di Stripe: e' alto zero ma da solo si
     prenderebbe una riga di griglia, e la riga porta con se' 33 px di
     distanza. Spento: gli input dentro si inviano lo stesso. */
  form.woocommerce-checkout #wc-stripe-express-checkout__order-attribution-inputs { display: none; }
  form.woocommerce-checkout #customer_details {
    grid-row: 3 / span 2;
    grid-column: 1;
  }
  form.woocommerce-checkout #order_review_heading {
    grid-row: 3;
    grid-column: 2;
  }
  form.woocommerce-checkout #order_review {
    grid-row: 4;
    grid-column: 2;
    align-self: start;
  }
}

.woocommerce-checkout form.checkout ::placeholder { color: #6B6257; }

/* 152. La cassa: etichette a sinistra, pannelli scuri ma PIENI.

        Due passaggi con Zago il 2026-08-23. Prima i pannelli dei dati erano
        diventati schede crema come le tile dell'account: bocciate, su una
        pagina scura un riquadro chiaro si legge come un avviso o un errore,
        non come un modulo. Si torna ai colori di prima con UNA differenza:
        via la trasparenza. Il fondo era rgba al 55% e ci passavano attraverso
        le stelle e la sfumatura della pagina: ora e' lo stesso viola, pieno.
        #170826 e' rgba(14,5,29,.55) calcolata sopra il viola medio della
        pagina: stessa tinta di prima, ma opaca.

        Le ETICHETTE A SINISTRA invece restano, e sono la regola del brief:
        il corpo del sito e' centrato ovunque TRANNE i moduli, perche' campi
        ed etichette centrati si compilano male.

        Il rosso degli errori sotto i campi si schiarisce: quello di
        WooCommerce sul viola scuro sta a 4,1 di contrasto, questo a 6. */

.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
  background: #170826;
}

.woocommerce-checkout #customer_details .form-row {
  text-align: left;
}
.woocommerce-checkout #customer_details .form-row > label {
  display: block;
  text-align: left;
}

.woocommerce-checkout #customer_details .woocommerce-error,
.woocommerce-checkout #customer_details .checkout-inline-error-message {
  color: #FF7A6B !important;
  text-align: left;
}

/* 153. Il carrello da telefono: titolo al centro e il campo del codice
        rimesso a misura d'uomo. Il titolo era centrato solo da desktop
        (blocco 147): la regola vale per tutte le misure. Il campo del codice
        promozionale aveva un'ALTEZZA ESPLICITA di 130 px, misurata: un campo
        di testo alto come tre righe, che sembrava una textarea. Altezza sua,
        dettata dall'imbottitura come tutti gli altri campi. */

.woocommerce-cart .wp-block-post-title,
.woocommerce-checkout .wp-block-post-title,
.woocommerce-account .wp-block-post-title { text-align: center; }

/* Il vero colpevole non era un'altezza: il campo ha `flex: 1 1 130px` da una
   regola pensata per quando stava in RIGA, dove 130 era la larghezza di
   partenza. Sul telefono la riga diventa colonna (blocco 135) e quella base
   e' diventata l'altezza. Deve dimensionarsi dal contenuto e basta. */
.woocommerce-cart .coupon > input {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
}

/* 154. Tutti i pannelli scuri diventano PIENI, decisione di Zago del
        2026-08-23. Erano rgba(14,5,29,.55): un velo, e ci passavano
        attraverso stelle e sfumatura. Ora sono #170826 dappertutto, che e'
        quel velo calcolato sopra il viola medio della pagina: stessa tinta,
        nessuna trasparenza. La sostituzione e' fatta su tutte le occorrenze
        di quel valore, quindi non c'e' un elenco qui: cercando #170826 si
        trovano tutte. */

/* 155. La riga della spedizione nel totale carrello, su telefono.
        L'etichetta "Spedizione:" e' un ::before FLOTTANTE: la prima scelta
        (Ritiro in sede) si affiancava all'etichetta, la seconda andava a capo
        a tutta larghezza, e le due righe risultavano sfalsate di 84 px.
        Misurato. L'etichetta prende la sua riga e le scelte si incolonnano
        allineate. Da desktop non cambia niente: li' l'etichetta e' una vera
        cella di tabella e il flottante non esiste. */

@media (max-width: 780px) {
  .cart_totals .woocommerce-shipping-totals td::before {
    display: block;
    float: none;
    margin-bottom: 8px;
  }
  #shipping_method li {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    margin: 0;
    float: none;
    text-align: left;
  }
}

/* 156. Il modulo del codice promozionale alla cassa.
        Aprendolo, il campo e il bottone stanno in due colonne FLOTTANTI da
        134 px l'una: il campo ne occupa 195 e il bottone 216, che sbordava
        dal pannello di 64 px e dallo schermo di 40. Misurato a 375.
        Via i flottanti: sul telefono campo e bottone uno sotto l'altro a
        tutta larghezza, da desktop sulla stessa riga col campo che si
        allarga e il bottone a misura sua. */

form.checkout_coupon .form-row {
  float: none !important;
  width: 100% !important;
  margin: 0 0 12px !important;
}
form.checkout_coupon input[name="coupon_code"],
form.checkout_coupon button {
  width: 100% !important;
}

@media (min-width: 782px) {
  form.checkout_coupon { display: flex; align-items: center; gap: 12px; }
  form.checkout_coupon .form-row { margin: 0 !important; }
  form.checkout_coupon .form-row-first { flex: 1 1 auto; }
  form.checkout_coupon .form-row-last { flex: 0 0 auto; width: auto !important; }
  form.checkout_coupon button { width: auto !important; white-space: nowrap; }
}

/* 157. Il riquadro di selezione sui bottoni del contatore.
        Al tocco restava un contorno QUADRATO che sbordava dal cerchio: e' il
        contorno di fuoco del browser, che non segue il raggio, piu'
        l'evidenziazione del tocco di iOS. Il tocco non lascia piu' segni;
        chi naviga da tastiera vede un anello crema TONDO, perche' il
        contorno moderno segue il raggio del bordo. */

.yl-qta { -webkit-tap-highlight-color: transparent; }
.yl-qta:focus { outline: none; }
.yl-qta:focus-visible {
  outline: 2px solid var(--wp--preset--color--crema);
  outline-offset: 2px;
}

/* 158. Il modulo d'accesso dell'account, vestito come tutto il resto.
        Era l'unico riquadro del sito rimasto col vestito DI SERIE di
        WooCommerce: bordino grigio da 1 px, angoli da 5, fondo trasparente.
        Misurato, non tocca nessuna nostra regola: semplicemente non l'avevamo
        mai preso. Ora e' un pannello pieno come gli altri.

        Le etichette vanno a sinistra per la regola dei moduli, e la riga
        finale si scioglie: RICORDAMI e ACCEDI stavano nello stesso paragrafo
        centrato, col bottone che finiva dove capitava. Ora la spunta sta
        sopra, per conto suo, e il bottone sotto a tutta larghezza. */

.woocommerce-account form.login,
.woocommerce-account form.register {
  background: #170826;
  border: 3px solid #1B0A08;
  border-radius: 26px;
  box-shadow: 0 5px 0 0 #1B0A08;
  padding: clamp(20px, 3vw, 30px);
}

.woocommerce-account form.login .form-row,
.woocommerce-account form.register .form-row,
.woocommerce-account .lost_password {
  text-align: left;
}
.woocommerce-account form.login .form-row > label,
.woocommerce-account form.register .form-row > label {
  display: block;
  text-align: left;
}

.woocommerce-account form.login .form-row:has(button[name="login"]),
.woocommerce-account form.register .form-row:has(button[name="register"]) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.woocommerce-account form.login label.woocommerce-form-login__rememberme {
  display: flex;
  align-items: center;
  gap: 8px;
}
.woocommerce-account form.login button[name="login"],
.woocommerce-account form.register button[name="register"] {
  width: 100%;
}

/* 159. Anche il "modifica indirizzo" del carrello e' un modulo: etichette a
        sinistra, non centrate. Stessa regola della cassa e dell'accesso. */

.woocommerce-shipping-calculator,
.woocommerce-shipping-calculator .form-row {
  text-align: left;
}
.woocommerce-shipping-calculator .form-row > label {
  display: block;
  text-align: left;
}

/* 160. Il logo del pie' di pagina gira sotto il dito, come quello in alto.
        Stessa mossa del tappo nell'intestazione (riga ~1390): inclinazione di
        14 gradi e un filo di crescita. In alto scatta col passaggio del mouse;
        qui risponde anche ad `:active`, che e' il tocco: sul telefono il
        passaggio del mouse non esiste, e il logo del pie' di pagina si tocca
        piu' di quanto si sorvoli. La transizione e' la stessa del tappo. */

footer .wp-block-site-logo a { display: inline-block; line-height: 0; }
footer .wp-block-site-logo img {
  transition: transform .25s ease;
}
footer .wp-block-site-logo a:hover img,
footer .wp-block-site-logo a:active img {
  transform: rotate(-14deg) scale(1.06);
}

/* 161. Yumo saltella se lo tocchi, nella tendina del menu.
        Un click e spicca un balzo verso sinistra, il prossimo verso destra,
        e cosi' via: il verso lo porta la variabile --dir, che il JavaScript
        alterna a ogni click (yl_yumo_saltella in functions.php). Il salto e'
        da cartone: si accuccia, spicca inclinandosi dal lato del balzo,
        atterra schiacciandosi un filo e si ricompone. Riparte da dove stava,
        cosi' non scappa mai dal suo posto. */

.yl-tendina__yumo {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.yl-tendina__yumo.yl-saltella {
  animation: yl-balzo .42s cubic-bezier(.3, .6, .4, 1) both;
}
/* Il balzo anima `translate` e `scale` SEPARATE, non `transform`: Yumo sta
   centrato con transform: translate(-50%), e la prima versione, che animava
   transform, glielo cancellava al primo fotogramma. Risultato: uno scatto a
   destra di mezza larghezza e il ritorno a fine salto. Le proprieta' separate
   si SOMMANO al transform invece di sostituirlo, e il centraggio resta li'
   per tutto il balzo.

   Il salto e' solo verticale, deciso da Zago il 2026-08-23: si accuccia,
   spicca dritto, atterra schiacciandosi e si ricompone. Niente sinistra e
   destra: la variabile --dir che il JavaScript continua ad alternare qui non
   viene piu' letta, e non serve toccare il JavaScript per questo. */
@keyframes yl-balzo {
  0%   { translate: 0 0; scale: 1 1; }
  18%  { translate: 0 4px; scale: 1.06 .9; }
  55%  { translate: 0 -40px; scale: .97 1.05; }
  85%  { translate: 0 2px; scale: 1.08 .9; }
  100% { translate: 0 0; scale: 1 1; }
}
@media (prefers-reduced-motion: reduce) {
  .yl-tendina__yumo.yl-saltella { animation: none; }
}

/* 162. L'apertura: titolo su due righe che abbracciano il profumo.

        Seconda passata col fotomontaggio di Zago sotto gli occhi, 2026-08-24.
        Il colpo d'occhio del riferimento e' che le due righe del titolo
        stanno su PIANI DIVERSI: la prima passa DIETRO al profumo, la seconda
        gli passa DAVANTI. E' quello che da' profondita' alla scena.

        Perche' serve smontare il claim per ottenerlo: dentro un contesto di
        impilamento ogni figlio resta prigioniero del livello del genitore, e
        una riga non puo' scavalcare la boccetta mentre l'altra ci resta
        sotto. Il claim era un contesto per due motivi, tolti qui: lo z-index
        e l'animazione del ritiro, che animando transform e opacita' ne crea
        uno da sola. Il ritiro non si perde: si sposta sulle singole righe,
        che cosi' si ritirano uguale ma ognuna sul suo piano.

        Le due righe le divide il PHP (yl_righe_titolo), a meta' delle parole:
        cosi' se un domani il claim cambia, la divisione si aggiusta da sola.

        Le altre correzioni di questa passata:

        - IL CENTRAGGIO SU TELEFONO. Il claim e' posizionato in assoluto con
          `left: 0; right: 0` ma `margin: 0` e una larghezza massima minore del
          palco: il browser lo appoggiava a sinistra e il suo centro cadeva a
          183 invece che a 195 su uno schermo da 390. Dodici pixer di scarto,
          misurati. `margin-inline: auto` lo rimette in mezzo.
        - IL PROFUMO NON ENTRA PIU' GRANDE. Provato e bocciato: tornano
          l'avvicinamento sul desktop e la salita da sotto sul telefono, com'era
          prima. Restano invece i tempi nuovi, che erano una richiesta a parte:
          giro rapido e razzo piu' lento.
        - I DUE YUMO AI LATI compaiono e scompaiono. Entrano con una dissolvenza
          al caricamento della pagina (tempo, non scorrimento) e escono di lato
          scorrendo. Le due animazioni non litigano perche' toccano proprieta'
          diverse: opacita' e scala per l'entrata, `translate` per l'uscita. */

.yl-claim {
  z-index: auto;
  animation: none;
  margin-inline: auto;
  max-width: min(94vw, 1240px);
}
.yl-claim h1 {
  font-size: clamp(42px, 7.4vw, 116px) !important;
  line-height: .92;
  text-shadow: 0 4px 24px rgba(14, 5, 29, .55);
}

/* le due righe: la prima dietro al profumo, la seconda davanti */
.yl-riga { display: block; }
.yl-riga--2 { position: relative; z-index: 3; }

@media (max-width: 900px) {
  .yl-claim h1 {
    font-size: clamp(34px, 11.5vw, 58px) !important;
    line-height: .96;
  }
}

@supports (animation-timeline: view()) {
  /* il ritiro passa dal claim alle sue righe, se no il claim fa contesto */
  .yl-claim > p,
  .yl-riga {
    animation: yl-ritira linear both;
    animation-timeline: --scena;
    animation-range: contain 0% contain 30%;
  }

  /* giro piu' rapido, ingresso com'era prima */
  .yl-perno .yl-boccetta {
    animation: yl-gira2 steps(11) both, yl-avvicina linear both;
    animation-timeline: --scena, --scena;
    animation-range: contain 0% contain 42%, contain 0% contain 100%;
  }
  @media (max-width: 900px) {
    .yl-perno .yl-boccetta {
      animation: yl-gira2 steps(11) both, yl-sale-da-sotto linear both;
      animation-timeline: --scena, --scena;
      animation-range: contain 4% contain 46%, contain 0% contain 40%;
    }
  }

  /* il razzo si prende piu' tempo, se no col giro veloce non lo vedi */
  .yl-perno .yl-razzo {
    animation-range: contain 22% contain 96%;
  }

  /* i due Yumo: compaiono col tempo, escono con lo scorrimento */
  .yl-perno::before {
    animation: yl-yumo-appare .55s cubic-bezier(.2, .8, .3, 1.25) .35s both,
               yl-yumo-esce-sx linear both;
    animation-timeline: auto, --scena;
    animation-range: normal, contain 0% contain 34%;
  }
  .yl-perno::after {
    animation: yl-yumo-appare .55s cubic-bezier(.2, .8, .3, 1.25) .45s both,
               yl-yumo-esce-dx linear both;
    animation-timeline: auto, --scena;
    animation-range: normal, contain 0% contain 34%;
  }
}

@keyframes yl-yumo-appare {
  from { opacity: 0; scale: .82; }
  to   { opacity: 1; scale: 1; }
}
@keyframes yl-yumo-esce-sx {
  0%, 38% { translate: 0 0; }
  100%    { translate: -135% 0; }
}
@keyframes yl-yumo-esce-dx {
  0%, 38% { translate: 0 0; }
  100%    { translate: 135% 0; }
}

/* I due Yumo ai lati del palco. Stanno bassi e sporgono oltre il bordo: il
   palco ha `overflow: hidden`, quindi li taglia come se spuntassero da fuori
   schermo, che e' il colpo d'occhio del riferimento. */
/* Il riquadro sta a filo del bordo dello schermo, non spostato fuori: e' il
   DISEGNO che e' gia' tagliato dal lato dell'immagine, cosi' il taglio cade
   esattamente sul bordo del monitor e Yumo sembra sporgersi da fuori. Se lo
   spostassimo fuori noi si vedrebbe una figura intera con un pezzo nascosto,
   che e' la cosa che non funzionava.

   PERCHE' SI ANCORA DALL'ALTO E NON DAL BASSO.
   Sembrerebbe naturale appoggiarli in basso con `bottom: 0`, ed e' come erano
   fatti prima. Non funziona, ed e' un difetto che si vede solo a pagina appena
   aperta. Il palco e' alto 100vh ma non comincia da zero: sopra ci sono
   l'intestazione e un po' di stacco, in tutto 181 px. Quindi il suo fondo
   finisce 181 px SOTTO la piega, e un Yumo appoggiato li' resta visibile per
   139 px su 320, il 43 per cento: solo la testa che spunta dal bordo inferiore.
   Misurato a 1440x900.
   Poi si scorre, il palco si aggancia in alto e il suo fondo torna a coincidere
   con quello dello schermo. Vuol dire che nessun valore fisso di `bottom` puo'
   essere giusto in tutte e due le situazioni.

   La soluzione e' agganciarlo sotto al fondo del palco, non dentro: con
   `bottom: -7svh` il disegno finisce sempre 7 centesimi di schermo piu' in
   basso della piega, agganciato o no, quale che sia l'altezza del monitor.
   Sette e non dodici perche' ogni centesimo di sconfinamento e' un centesimo
   di Yumo in meno che si vede a pagina aperta, ed era proprio quella la
   lamentela: con 12 se ne vedeva il 53 per cento, con 7 il 63.

   La larghezza tiene conto anche dell'altezza dello schermo (`30svh`), se no
   su un monitor alto il disegno resta della stessa misura mentre lo schermo
   cresce, e la testa finisce sempre piu' in basso. Cosi' invece la quota
   visibile resta intorno al 62 per cento su qualunque forma di monitor.

   PERCHE' LO Z-INDEX E' NEGATIVO.
   Questi due sono comparse di sfondo: non devono poter coprire niente, a
   nessuna misura di schermo. Alzandoli la testa si avvicina alla prima riga
   del titolo, e quella riga sta al livello zero, perche' e' la stessa che
   deve passare dietro al profumo. Per stare sotto anche a lei serve un
   livello piu' basso ancora, e -1 e' l'unico modo di averlo senza rimettere
   mano all'ordine di tutto il resto.
   Si puo' fare perche' il palco e la scena hanno lo sfondo trasparente, quindi
   sotto non c'e' niente che lo nasconda, e perche' il palco e' `sticky` e fa
   contesto di impilamento: il -1 resta dentro il palco e non sprofonda dietro
   alla pagina. Se un domani si desse un colore di sfondo al palco, questi due
   sparirebbero e la causa sarebbe questa.
   La strada alternativa, alzare la riga 1 sopra a Yumo, non si puo' fare: nel
   documento il titolo viene DOPO la boccetta, quindi alzarlo di livello lo
   porterebbe anche davanti al profumo, che e' proprio quello che non deve
   succedere.
   Cosi' il taglio in vita non si vede mai, che e' l'unica cosa che conta: un
   orso tagliato a meta' che galleggia a mezz'aria e' peggio di non metterlo.

   Una percentuale dall'alto (era il primo tentativo, `top: 40%`) sembrava
   equivalente e non lo e': l'altezza del disegno dipende dalla LARGHEZZA, che
   e' bloccata a 340 px, mentre lo schermo puo' essere alto quanto vuole. Su un
   monitor da 1200 px in su il conto si rovescia e il taglio ricompare. Con
   `bottom` negativo in unita' di schermo il caso non esiste proprio. */
.yl-perno::before,
.yl-perno::after {
  content: "";
  position: absolute;
  bottom: -7svh;
  width: min(26vw, max(340px, 30svh));
  background-repeat: no-repeat;
  background-size: contain;
  z-index: -1;
  pointer-events: none;
}
.yl-perno::before {
  left: 0;
  aspect-ratio: 640 / 1232;
  background-position: top left;
  transform-origin: left center;
  background-image: url("assets/yumo-lato-sx.webp");
}
.yl-perno::after {
  right: 0;
  aspect-ratio: 640 / 1147;
  background-position: top right;
  transform-origin: right center;
  background-image: url("assets/yumo-lato-dx.webp");
}

@media (max-width: 900px) {
  .yl-perno::before,
  .yl-perno::after { display: none; }
}

/* 163. L'occhiello troppo piccolo, e le scritte troppo in basso.
        Riscontro di Zago del 2026-08-24 sull'apertura: alzare un filo tutto il
        testo e ingrandire "PROFUMO NEBULIZZANTE", che a 14 px spariva sotto un
        titolo da 116.

        UNA COSA DA SAPERE PRIMA DI TOCCARE QUESTE RIGHE.
        Quel paragrafo ha la misura scritta a mano nell'attributo `style`
        direttamente nella pagina (`font-size:14px`). Contro una cosa del genere
        un selettore corto non basta: `.yl-claim p` e `.yl-claim > p` perdono
        anche con `!important`, provati tutti e due dal vivo. Serve arrivare a
        due classi, e da li' in poi passa.
        Ecco perche' la regola vecchia al blocco 21, `.yl-claim p { font-size:
        12px !important }`, non ha mai funzionato: su telefono l'occhiello e'
        sempre rimasto 14 px. Non era voluto, era quella regola che non passava.
        Qui si riscrive con la forza giusta, quindi da adesso la misura la
        comanda il tema e non piu' la pagina.

        Le misure sono fluide e non a caso: l'occhiello e' una riga sola e deve
        restarlo. Con la spaziatura fra le lettere che ha, "PROFUMO
        NEBULIZZANTE" su uno schermo da 390 occupa gia' 331 px dei 359
        disponibili. Per farlo crescere lo stesso, su telefono la spaziatura
        scende da .2em a .1em: si recupera larghezza e il testo sale lo stesso
        di misura. Se un domani quella scritta si allunga, va ricontrollata:
        allungarla costa misura, ed era proprio la misura il punto. */

/* L'alzata su schermo grande si fa col padding. Va chiusa dentro il suo
   `min-width`: su telefono il claim e' appeso in alto con `position: absolute`
   e non ha padding sopra, quindi un padding ereditato da qui lo spingerebbe
   in giu' invece che su. Provato: 46 px nella direzione sbagliata. */
@media (min-width: 901px) {
  .wp-block-group.yl-claim { padding-top: 7.5vh; }
}

.wp-block-group.yl-claim > p {
  font-size: clamp(17px, 1.5vw, 24px) !important;
  letter-spacing: .16em !important;
  line-height: 1.35 !important;
}

@media (max-width: 900px) {
  .wp-block-group.yl-claim { top: 5svh; }

  .wp-block-group.yl-claim > p {
    font-size: clamp(14px, 4.4vw, 19px) !important;
    letter-spacing: .1em !important;
    line-height: 1.3 !important;
  }
}

/* 164. Su telefono l'apertura non somigliava per niente a quella su schermo.
        Riscontro di Zago del 2026-08-24: "da mobile non e' per nulla come per
        il desktop". Aveva ragione, ed erano due cose distinte.

        PRIMA: IL TITOLO ANDAVA SU QUATTRO RIGHE.
        Le due righe del titolo esistono per stare su due piani diversi, una
        dietro e una davanti al profumo. Se ognuna va a capo, di righe se ne
        vedono quattro e il disegno non si legge piu': sembrano solo quattro
        righe di testo. Misurato a 390: "OGNI VIAGGIO HA" chiedeva 393 px e ne
        aveva 331. La misura scende da 44,85 a 35,9 px, che e' il prezzo da
        pagare perche' l'idea funzioni. Controllato a 320, 390 e 430: una riga
        per pezzo dappertutto, con almeno 15 px di margine.
        I fianchi passano da 18 a 12 px per recuperare un po' di larghezza.

        SECONDA: IL TITOLO NON INCROCIAVA MAI IL PROFUMO.
        (Il valore qui sotto e' poi passato da 19svh a 11svh nel blocco 166,
        quando anche il profumo ha smesso di partire cosi' da lontano.)
        Stava appeso in alto a 5svh, e finiva a 168 px mentre la boccetta
        comincia a 163: si sfioravano per cinque pixel. Due righe su piani
        diversi con cinque pixel di sovrapposizione non si vedono, quindi tutto
        il lavoro dei piani era sprecato. Ora il titolo scende a 19svh e le due
        righe cadono in pieno sul collo della boccetta, come su schermo grande.

        NOTA PER CHI CI RIMETTE MANO.
        Il primo tentativo era stato far entrare la boccetta meno da sotto (8
        centesimi di schermo invece di 28) cosi' l'incrocio si vedeva gia' a
        pagina aperta. Zago l'ha bocciato il 2026-08-24: la salita da sotto la
        vuole ampia com'era. Quindi l'incrocio si scopre mentre la boccetta
        sale, non subito. Non "sistemarlo" abbassando di nuovo quel valore. */

@media (max-width: 900px) {
  .wp-block-group.yl-claim {
    top: 11svh;
    padding-left: 12px;
    padding-right: 12px;
  }

  .wp-block-group.yl-claim h1 {
    font-size: clamp(28px, 9.2vw, 44px) !important;
    line-height: .96;
  }
}

/* 165. I due Yumo anche su telefono.
        Erano spenti sotto i 900 px perche' le immagini di prova erano figure
        intere e sullo schermo stretto non ci stavano. Con i disegni veri, che
        sono tagliati dal bordo e occupano una striscia sottile, ci stanno.

        La larghezza qui e' in trentaquattresimi di schermo e non nella misura
        del desktop: 26vw su un telefono farebbero 101 px, una figurina. Con
        34vw si arriva a 133 su uno schermo da 390, che e' la misura giusta per
        leggere la faccia.
        Non danno fastidio al resto: la boccetta su 390 occupa da 131 a 259, i
        due riquadri arrivano a 133 e ripartono da 257, quindi si sfiorano
        appena. E comunque stanno a `z-index: -1`, dietro sia alla boccetta sia
        alle due righe del titolo. */

@media (max-width: 900px) {
  .yl-perno::before,
  .yl-perno::after {
    display: block;
    width: 34vw;
  }
}

/* 166. Yumo piu' piccolo e piu' in alto, e il profumo che sale meno su telefono.
        Richieste di Zago del 2026-08-24.

        IL NODO: PIU' PICCOLO E PIU' IN ALTO NON POTEVANO STARE INSIEME.
        Finche' il taglio in vita doveva restare nascosto sotto il bordo dello
        schermo, la testa poteva salire solo allungando il disegno. Il conto e'
        questo: da agganciato il fondo del disegno deve arrivare almeno al
        fondo dello schermo, quindi testa = fondo schermo meno altezza. Disegno
        piu' corto vuol dire per forza testa piu' in basso. Le due richieste si
        annullavano a vicenda.

        LA VIA D'USCITA: IL TAGLIO NON SI NASCONDE PIU', SI SFUMA.
        Con una maschera che spegne l'ultimo 15 per cento del disegno, il bordo
        netto non esiste piu' e non c'e' piu' niente da nascondere. Da li' in
        poi si puo' mettere Yumo dove serve. Sul fondo viola scuro non si legge
        come una sfumatura: sembra che si perda nell'ombra.

        Serve anche la versione col prefisso -webkit-: Safari la vuole ancora.

        Perche' non bastava aspettare che escano di lato: il palco si aggancia
        a 190 px di scorrimento, ma Yumo comincia a spostarsi solo a 414.
        In mezzo ci sono 224 px in cui sta fermo e agganciato, e li' il taglio
        si sarebbe visto. Misurato.

        Le misure: da 340 a 300 px su schermo grande, da 34vw a 28vw su
        telefono, e la testa sale di 76 px su schermo e di quasi 200 su
        telefono, dove prima finiva nella fascia che la barra degli indirizzi
        copre.

        E IL PROFUMO SU TELEFONO PARTE MOLTO PIU' IN ALTO.
        Da 28 centesimi di schermo a 4. Era gia' stato provato a 8 e ritirato
        il giorno prima perche' non era stato chiesto; poi Zago l'ha chiesto
        lui, perche' cosi' in basso non si intrecciava col testo.

        E QUI VIENE LA PARTE CHE LEGA LE DUE COSE.
        Il titolo puo' stare in alto solo quanto glielo permette il profumo:
        le due righe devono cadere addosso alla boccetta, se no i due piani
        non si vedono e tanto vale non averli. Finche' la boccetta partiva da
        28 centesimi, il titolo doveva scendere fino a 19svh per raggiungerla.
        Ora che ne parte da 4, il titolo puo' risalire a 11svh e le due righe
        la incrociano lo stesso, al 99 per cento tutte e due.
        Sono due numeri accoppiati: se si tocca la salita della boccetta va
        rifatto il conto anche sul titolo, o l'incrocio si perde. */

.yl-perno::before,
.yl-perno::after {
  bottom: 10svh;
  width: min(24vw, 300px);
  -webkit-mask-image: linear-gradient(to bottom, #000 85%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 85%, transparent 100%);
}

@media (max-width: 900px) {
  .yl-perno::before,
  .yl-perno::after {
    bottom: 20svh;
    width: 28vw;
  }
}

@keyframes yl-sale-da-sotto {
  0%   { transform: translateY(4svh) scale(.95); }
  100% { transform: translateY(0)    scale(1); }
}

/* 167. Ultimi ritocchi su telefono, riscontro di Zago del 2026-08-24.

        IL TITOLO SALE ANCORA UN PO', PER LIBERARE "VIAGGIO".
        Il collo della boccetta passava esattamente in mezzo alla prima riga e
        si mangiava la A. Alzandola, la cima delle lettere esce sopra al
        profumo: l'incrocio della prima riga scende dal 99 al 78 per cento,
        quindi la parola si legge ma resta chiaro che ci passa dietro. La
        seconda riga incrocia sempre al 99, quindi il gioco dei due piani non
        si perde.

        PERCHE' `max(8svh, 76px)` E NON UN NUMERO SOLO.
        In centesimi di schermo si potrebbe scendere fino a 8, e su un telefono
        grande e' giusto. Ma su uno corto 8 centesimi sono pochi pixel e
        l'occhiello finisce SOTTO l'intestazione: misurato su 320x700, arrivava
        a meno 3 px, cioe' coperto. Il minimo in pixel e' la rete di sicurezza:
        su schermo alto vince il 8svh, su schermo corto vincono i 76 px e il
        testo resta sotto all'intestazione con 17 px di aria.

        Se un domani l'intestazione cambia altezza, quei 76 px vanno rifatti:
        oggi l'intestazione e' alta 109. */

@media (max-width: 900px) {
  .wp-block-group.yl-claim { top: max(8svh, 76px); }

  /* Yumo di sinistra ancora un filo piu' piccolo */
  .yl-perno::before,
  .yl-perno::after { width: 25vw; }
}

/* 168. Testo piu' in alto, Yumo che esce prima, e la posa nuova a destra.
        Riscontri di Zago del 2026-08-24.

        SU SCHERMO il blocco sale di 18 px, e basta cosi': ogni pixel guadagnato
        e' un pixel di incrocio col profumo perso. La prima riga passa dal 83 al
        66 per cento sopra alla boccetta, che regge ancora bene.

        SU TELEFONO il muro e' l'intestazione, alta 109 px. L'occhiello puo'
        scendere solo fino a 129, se no ci finisce sotto. Quindi il grosso del
        guadagno viene da un'altra parte: lo spazio fra occhiello e titolo si
        stringe da 32 a 16 px. Risultato, l'occhiello sale di 6 px ma il titolo
        di 22, che e' quello che si guarda.
        Per non perdere l'incrocio la boccetta parte da 2 centesimi di schermo
        invece che da 4. Sono sempre quei due numeri accoppiati: il titolo puo'
        salire solo se sale anche lei.

        I DUE YUMO ESCONO PRIMA.
        L'uscita finiva al 34 per cento della scena e cominciava a muoversi al
        13. Ora finisce al 22 e parte al 3: appena si scorre se ne vanno.

        LA POSA NUOVA A DESTRA indica in alto verso il profumo. Ha proporzioni
        diverse dalla vecchia (640x1024 invece di 640x1147), e soprattutto la
        sagoma si chiude da sola in basso: non ha il taglio netto che aveva
        quella che teneva la boccetta. Quindi la maschera sfumata le va tolta,
        se no le sfuma la pancia per niente. Resta solo a sinistra, dove il
        taglio c'e' davvero. */

@media (min-width: 901px) {
  .wp-block-group.yl-claim { padding-top: 5.5vh; }
}

@media (max-width: 900px) {
  .wp-block-group.yl-claim { top: max(6.5svh, 70px); }
  .wp-block-group.yl-claim h1 { margin-top: 16px; }
}

.yl-perno::after {
  aspect-ratio: 640 / 1024;
  -webkit-mask-image: none;
          mask-image: none;
}

@supports (animation-timeline: view()) {
  .yl-perno::before { animation-range: normal, contain 0% contain 22%; }
  .yl-perno::after  { animation-range: normal, contain 0% contain 22%; }
}

@keyframes yl-yumo-esce-sx { 0%, 15% { translate: 0 0; } 100% { translate: -135% 0; } }
@keyframes yl-yumo-esce-dx { 0%, 15% { translate: 0 0; } 100% { translate:  135% 0; } }

@keyframes yl-sale-da-sotto {
  0%   { transform: translateY(2svh) scale(.95); }
  100% { transform: translateY(0)    scale(1); }
}

/* 169. I due Yumo smettono di essere gemelli, e il profumo torna dov'era.
        Riscontri di Zago del 2026-08-24.

        LA BOCCETTA SU TELEFONO TORNA A 4svh.
        Nel blocco 168 era scesa a 2 per non perdere l'incrocio con la prima
        riga del titolo. Ma cosi' si alzava anche lei, e Zago voleva alzato solo
        il testo. Rimessa a 4. La conseguenza, che va bene: la prima riga adesso
        tocca la boccetta solo per il 15 per cento invece che per il 64, quindi
        "VIAGGIO" si legge tutto. La seconda riga la incrocia sempre al 99, e i
        due piani si vedono lo stesso: e' lei a portare l'effetto.

        QUELLO DI SINISTRA E' PIU' PICCOLO E PIU' IN ALTO.
        Fin qui i due avevano le stesse misure e la stessa quota, e messi cosi'
        sembravano due segnaposti. Ora il sinistro e' piu' piccolo (da 300 a 250
        px su schermo, da 25 a 21vw su telefono) e sta piu' in alto: 91 px di
        dislivello su schermo, 52 su telefono.
        Il `bottom` del sinistro sale da 10 a 20svh, e non e' solo per alzarlo:
        rimpicciolire un disegno agganciato in basso ne fa SCENDERE la testa,
        perche' l'altezza dipende dalla larghezza. Senza quel compenso sarebbe
        finito 96 px piu' in basso invece che alla stessa quota di prima.

        RESTA UNA COSA DA FARE, quando arriva il disegno nuovo di sinistra:
        quello di adesso ha il corpo che scappa dal fondo del file, ed e' per
        questo che gli si vede la pancia e che gli serve la maschera sfumata.
        Quello nuovo si chiudera' da solo come il destro, e allora la maschera
        va tolta anche qui. */

.yl-perno::before {
  bottom: 20svh;
  width: min(20vw, 250px);
}

@media (max-width: 900px) {
  .yl-perno::before { bottom: 26svh; width: 21vw; }
  .yl-perno::after  { bottom: 20svh; width: 25vw; }
}

@keyframes yl-sale-da-sotto {
  0%   { transform: translateY(4svh) scale(.95); }
  100% { transform: translateY(0)    scale(1); }
}

/* 170. IL CRASH SU SAFARI DA TELEFONO, e il conto della memoria.

        Zago il 2026-08-24: sulla home, facendo pinch-zoom, Safari va a schermo
        nero e dice "si e' verificato ripetutamente un errore". Quel messaggio
        li' vuol dire una cosa sola: il processo che disegna la pagina e' stato
        ucciso dal sistema perche' ha chiesto troppa memoria. Su iOS il tetto
        per scheda e' basso e non si tratta.

        PERCHE' PROPRIO LO ZOOM CON LE DITA.
        Non rifa' il layout: ingrandisce quello che c'e' gia'. Quindi ogni
        superficie va ridisegnata alla nuova scala, e la memoria cresce col
        QUADRATO dello zoom. A 3x sono 9 volte i pixel di prima. Chi era grande
        diventa enorme.

        IL COLPEVOLE PRINCIPALE: LA BOCCETTA CHE GIRA.
        Era una striscia sola da 3600x1144 con i 12 fotogrammi in fila, e il CSS
        la ingrandiva al 1200 per cento per mostrarne uno alla volta spostando
        `background-position`. Vuol dire che la superficie da disegnare era 12
        VOLTE la boccetta, e veniva ridisegnata a ogni fotogramma
        dell'animazione. Su un telefono da 390 px con schermo a 3x, a zoom 3
        quella superficie arrivava a circa 10.500 x 4.400 px: da sola sfiora i
        190 MB. Il tetto di iOS e' quello.

        Ora i 12 fotogrammi sono 12 file separati e l'animazione cambia
        `background-image` invece di spostarne uno gigante. Si disegna sempre e
        solo la boccetta a grandezza sua: **dodici volte meno superficie**.
        Costa 83 KB in piu' sul totale del tema, e non e' un prezzo.
        I passi sono a dodicesimi esatti (i/11) perche' l'animazione usa
        `steps(11)`: cosi' ogni scatto cade preciso su un fotogramma.

        Serve anche fuori dall'animazione: se un browser non conosce le
        animazioni legate allo scorrimento, l'animazione non parte e resta lo
        sfondo di base. Prima era la striscia intera, che schiacciata
        nell'elemento si vedeva tutta storta. Ora e' il fotogramma 1.

        IL SECONDO: SEI CIELI STELLATI SOVRAPPOSTI.
        Il cielo erano sei elementi a tutto schermo, ognuno con la sua
        animazione infinita: sei superfici grandi quanto lo schermo, tenute
        vive tutte insieme. Ora sono due, con tre trame ciascuno. Stesso
        risultato a vedersi, un terzo della memoria.

        IL TERZO: IL CARRELLO A SCOMPARSA CHE NON SCOMPARE.
        WooCommerce lascia il pannello del carrello sempre disegnato, largo
        quanto lo schermo, parcheggiato appena fuori a destra. Da chiuso e'
        un'altra superficie a tutto schermo tenuta in vita per niente, ed e'
        probabilmente anche quello che dava l'impressione di poter scorrere di
        lato. Da chiuso ora e' `visibility: hidden`: non si disegna, e quando si
        apre torna visibile e la sua animazione parte lo stesso.

        Le maschere sfumate sono sparite: il disegno nuovo di sinistra si chiude
        da solo come quello di destra, quindi non c'e' piu' niente da nascondere.
        Anche quelle erano una superficie in piu' a testa, e su Safari le
        maschere costano.

        RESTA VERO che non ho potuto riprodurre il crash: qui non ho un iPhone.
        Questi tre interventi tolgono di mezzo le tre superfici piu' grandi
        della pagina, che e' la cosa giusta da fare quando il messaggio dice
        "troppa memoria". Se dopo questo crasha ancora, il prossimo sospetto
        sono le 16 animazioni legate allo scorrimento, e li' si accorpano. */

/* Le citazioni piu' su nel file puntavano tutte alla striscia unica: sostituite
   col fotogramma 1, che e' il file che esiste. Sono regole che perdono comunque
   contro quella qui sotto, ma un indirizzo che non esiste non va lasciato in
   giro: basta che un domani qualcuno sposti una regola e diventa un 404.

   i 12 fotogrammi, uno per file */
.yl-boccetta {
  background-image: url("assets/boccetta-01.webp");
  background-size: 100% 100%;
  background-position: 0 0;
}

@keyframes yl-gira2 {
  0%        { background-image: url("assets/boccetta-01.webp"); animation-timing-function: step-end; }
  9.0909%   { background-image: url("assets/boccetta-02.webp"); animation-timing-function: step-end; }
  18.1818%  { background-image: url("assets/boccetta-03.webp"); animation-timing-function: step-end; }
  27.2727%  { background-image: url("assets/boccetta-04.webp"); animation-timing-function: step-end; }
  36.3636%  { background-image: url("assets/boccetta-05.webp"); animation-timing-function: step-end; }
  45.4545%  { background-image: url("assets/boccetta-06.webp"); animation-timing-function: step-end; }
  54.5455%  { background-image: url("assets/boccetta-07.webp"); animation-timing-function: step-end; }
  63.6364%  { background-image: url("assets/boccetta-08.webp"); animation-timing-function: step-end; }
  72.7273%  { background-image: url("assets/boccetta-09.webp"); animation-timing-function: step-end; }
  81.8182%  { background-image: url("assets/boccetta-10.webp"); animation-timing-function: step-end; }
  90.9091%  { background-image: url("assets/boccetta-11.webp"); animation-timing-function: step-end; }
  100%      { background-image: url("assets/boccetta-12.webp"); animation-timing-function: step-end; }
}

/* il cielo: da sei superfici a due */
.yl-cielo i:nth-child(n+3) { display: none; }

.yl-cielo i:nth-child(1) {
  background-image:
    radial-gradient(1.6px 1.6px at 20% 24%, #F9E5C1 50%, transparent 51%),
    radial-gradient(2px   2px   at 44% 68%, #D68617 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 8%  78%, #FFF3DA 50%, transparent 51%);
  background-size: 280px 280px, 420px 420px, 380px 380px;
  animation-duration: 4.1s;
}

.yl-cielo i:nth-child(2) {
  background-image:
    radial-gradient(1.2px 1.2px at 70% 12%, #FFF3DA 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 88% 52%, #F9E5C1 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 56% 90%, #D68617 50%, transparent 51%);
  background-size: 340px 340px, 250px 250px, 300px 300px;
  animation-duration: 5.6s;
}

/* il pannello del carrello, da chiuso, non si disegna */
.wc-block-components-drawer__screen-overlay--is-hidden { visibility: hidden; }

/* il disegno nuovo di sinistra si chiude da solo: via la maschera */
.yl-perno::before {
  aspect-ratio: 640 / 1241;
  -webkit-mask-image: none;
          mask-image: none;
}

/* 171. Il crash c'e' ancora, e stavolta ho contato tutto.

        LA SFUMATURA FRA UN FOTOGRAMMA E L'ALTRO era colpa mia, e la spiegazione
        merita di restare scritta perche' e' controintuitiva.
        `animation-timing-function` NON si applica a tutta l'animazione: si
        applica a OGNI INTERVALLO fra due passi. Con due soli passi, come era
        prima, `steps(11)` spezzava tutto il giro in 11 scatti ed era giusto.
        Con dodici passi, invece, `steps(11)` finiva dentro ognuno degli undici
        intervalli, e in ciascuno faceva undici micro-passi di dissolvenza fra
        un'immagine e l'altra: perche' fra due immagini il browser sfuma, non
        scatta. Da qui l'effetto sporco.
        Rimesso a posto con `step-end` dentro ogni passo: ogni fotogramma tiene
        il suo valore fino al successivo, e lo scatto torna netto.

        IL CENSIMENTO DELLA MEMORIA, su 390x844 con schermo 3x e pinch 3x.
        38 elementi chiedono una superficie tutta loro. I piu' grossi:

        - il pianeta della sezione storia: 702x702, gira all'infinito e ha una
          maschera sopra. Da solo 160 MB
        - il cielo stellato: il contenitore fisso piu' due trame animate, tre
          superfici grandi quanto lo schermo, circa 100 MB l'una
        - i tasti della barra avevano `backdrop-filter: blur(8px)` DIETRO A UNO
          SFONDO OPACO. Non si vedeva niente, ma il browser deve comunque
          fotografare quello che sta sotto e sfocarlo. Su iOS e' l'effetto piu'
          caro che ci sia, ed era sprecato al cento per cento

        Su telefono si spengono le due cose puramente decorative: le stelle non
        brillano piu' e il pianeta non gira. Restano visibili tutte e due, ma
        senza animazione non hanno piu' bisogno di una superficie propria, ed e'
        quello che conta. Il `backdrop-filter` sparisce ovunque, perche' li' non
        si perde nemmeno l'effetto: non c'era.

        Se anche cosi' crasha, il prossimo passo e' spegnere su telefono anche
        le animazioni legate allo scorrimento della sezione storia. */

/* Yumo di sinistra: tolto su richiesta di Zago */
.yl-perno::before { display: none; }

/* sfocatura dietro a un fondo opaco: non si vede e costa carissima */
.yl-barra__tasto,
.yl-barra__tasto.yl-barra__menu {
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}

@media (max-width: 900px) {
  /* le stelle restano, non brillano piu' */
  .yl-cielo i { animation: none; opacity: .55; }

  /* il pianeta resta, non gira piu' e non ha piu' la sfumatura sul bordo */
  .yl-storia__pianeta {
    animation: none;
    -webkit-mask-image: none;
            mask-image: none;
  }
}

/* 172. Il crash, risolto tagliando su tre fronti invece che su uno.

        LA PROVA DEL 2026-08-24 HA DATO UNA RISPOSTA CHE NON MI ASPETTAVO.
        Spegnendo da sole le animazioni legate allo scorrimento, oppure da solo
        il cielo, oppure da sole le animazioni infinite, il crash smetteva in
        tutti e tre i casi. Vuol dire che **nessuno dei tre e' il colpevole**:
        la pagina stava appena sopra il tetto di memoria di iOS, e bastava
        togliere un pezzo qualsiasi per riportarla sotto.

        Da qui la scelta: non tagliare il minimo indispensabile, che lascerebbe
        zero margine e farebbe tornare il crash alla prima cosa che si aggiunge,
        ma tagliare un po' su tutti e tre i fronti scegliendo, di ognuno, la
        parte che costa meno a vedersi.

        1. IL CIELO NON E' UN ELEMENTO, E' LO SFONDO DEL BODY.
        Era un elemento fisso grande quanto lo schermo, e un elemento fisso e'
        la cosa piu' cara che ci sia sotto pinch-zoom: va ricomposto a ogni
        cambio di scala e non lo molla piu'. Le stesse sei trame di stelle,
        messe come sfondo del body, si vedono uguali ma vengono dipinte dentro
        allo sfondo della pagina: **zero superfici in piu'**. E' l'unico dei tre
        tagli che non si vede proprio: le stelle ci sono ancora tutte.

        2. LE ANIMAZIONI LEGATE ALLO SCORRIMENTO PASSANO DA 16 A 5.
        Restano quelle dell'apertura, che sono la firma del sito: la boccetta
        che gira, il razzo, il titolo che si ritira. Si spengono quelle delle
        sezioni sotto, che sono comparse d'ingresso e su telefono si notano a
        malapena, ma che tengono in vita una superficie ciascuna per tutta la
        durata della pagina.

        3. LE ANIMAZIONI INFINITE erano gia' state spente su telefono col
        blocco 171, e li' restano.

        Il conto, misurato su 390x844 con schermo 3x e pinch 3x:

        | | strati | memoria stimata |
        |---|---|---|
        | prima di tutto | 38 | 1584 MB |
        | dopo il blocco 171 | 33 | 862 MB |
        | adesso | 25 | 514 MB |

        Il numero in MB e' una stima al caso peggiore, non un dato di fatto: il
        browser non ridisegna davvero tutto insieme. Quello che conta e' il
        rapporto, ed e' un terzo di prima. Il margine adesso c'e'. */

@media (max-width: 900px) {
  .yl-cielo { display: none; }

  body {
    background-image:
      radial-gradient(1.6px 1.6px at 20% 24%, #F9E5C1 50%, transparent 51%),
      radial-gradient(2px   2px   at 44% 68%, #D68617 50%, transparent 51%),
      radial-gradient(1.5px 1.5px at 8%  78%, #FFF3DA 50%, transparent 51%),
      radial-gradient(1.2px 1.2px at 70% 12%, #FFF3DA 50%, transparent 51%),
      radial-gradient(1.1px 1.1px at 88% 52%, #F9E5C1 50%, transparent 51%),
      radial-gradient(1.3px 1.3px at 56% 90%, #D68617 50%, transparent 51%);
    background-size:
      280px 280px, 420px 420px, 380px 380px,
      340px 340px, 250px 250px, 300px 300px;
    background-repeat: repeat;
    background-attachment: scroll;
  }

  /* le comparse delle sezioni sotto: il contenuto resta, entra senza animazione */
  /* Si spegne solo l'animazione. Opacita' e trasformazione NON si inchiodano:
     le scrive il JavaScript seguendo lo scorrimento (blocco 176), e due regole
     `!important` che si contendono la stessa proprieta' con lo script sono un
     guaio che si paga dopo. */
  .yl-storia__yumo,
  .yl-storia__scia,
  .yl-storia__passo {
    animation: none !important;
    animation-timeline: auto !important;
  }

  /* Dei pallini si spegne SOLO l'animazione, non si forza opacita' e posizione.
     Ci pensa il blocco 173 a farli comparire con una transizione, e due regole
     `!important` che si contendono la stessa proprieta' sono un guaio che si
     paga dopo: qui non serve, e non si crea. */
  .yl-fatto {
    animation: none !important;
    animation-timeline: auto !important;
  }
}

/* 173. I quattro pallini su telefono: la stessa animazione del desktop, ma
        guidata dal JavaScript invece che dal motore delle animazioni.

        COS'E' L'ANIMAZIONE VERA, quella che su schermo grande va bene:

          0%   opacita 0, translateX(var(--da)) scale(.5)
          55%  opacita 1
          100% opacita 1, translateX(0) scale(1)

        I pallini **escono da dietro la boccetta** e scivolano verso il proprio
        lato crescendo da meta' misura. Il nome dice tutto: `yl-esce-da-dietro`.
        Su telefono avevo messo una dissolvenza verticale: un altro movimento,
        e infatti Zago se n'e' accorto subito.

        E NON BASTA ACCENDERE E SPEGNERE.
        Il secondo tentativo metteva e toglieva una classe a una quota fissa.
        Ma l'animazione vera non e' acceso/spento: **scorre lungo un intervallo**
        insieme allo scorrimento. Con l'interruttore, tornando indietro il
        pallino resta fermo e pieno finche' non si scende sotto la soglia, e poi
        sparisce di colpo: "rimangono fissi e vanno via troppo tardi", parole
        sue, ed e' esattamente quello che fa un interruttore.

        Ora il JavaScript calcola, per ogni pallino, a che punto e' del PROPRIO
        intervallo (gli stessi del desktop: 6-24, 22-40, 38-56, 54-72 per cento)
        e scrive opacita' e trasformazione a mano. Il movimento e' identico in
        tutti e due i versi, perche' e' una funzione dello scorrimento e basta.

        PERCHE' NON COSTA COME QUELLA VERA: un'animazione legata allo
        scorrimento fa promuovere l'elemento a superficie propria e ce lo tiene
        per tutta la pagina, anche da fermo, ed e' parte di cio' che mandava in
        crash Safari sotto pinch. Una trasformazione scritta a mano no: fuori
        dallo scorrimento e' un valore statico come un altro, e sotto pinch non
        pesa.

        Qui resta solo lo stato di partenza, per non far lampeggiare i pallini
        prima che il JavaScript scriva il primo valore. La marca sul documento
        la mette il JavaScript nell'intestazione: se non parte, non arriva, e i
        pallini restano visibili. */

@media (max-width: 900px) {
  html.yl-anima-js .yl-fatto { opacity: 0; }

  /* `will-change` era un ordine a tenerli su una superficie propria per
     sempre, anche da fermi. Serviva all'animazione vera, che qui non c'e' piu':
     otto superfici in vita per niente, sullo stesso telefono che andava in
     crash per troppa memoria. */
  .yl-fatto,
  .yl-fatto span { will-change: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html.yl-anima-js .yl-fatto { opacity: 1; transform: none; }
}

/* 175. Il cielo fermo SENZA lo strato fisso, che era quello che crashava.

        LA PROVA DEL 2026-08-24 E' STATA NETTA. Rimettendo `.yl-cielo` come
        elemento fisso a schermo pieno (una superficie sola, ferma, senza
        animazioni) il crash sotto pinch e' tornato subito. Costava 1 strato e
        101 MB su 473, e tanto e' bastato. Quindi ora si sa con precisione:
        **su iOS un elemento fisso grande quanto lo schermo non e' sostenibile
        su questa pagina**, nemmeno uno, nemmeno fermo. E' il caso peggiore per
        il pinch, perche' va ricomposto a ogni cambio di scala e non lo molla
        mai.

        LA SOLUZIONE STA IN COSA VUOL DIRE "FERMO".
        Le stelle devono stare ferme solo quando sta fermo tutto il resto, cioe'
        mentre la scena e' appiccicata e la boccetta gira. Nel resto della
        pagina scorre il contenuto, e stelle che scorrono col contenuto non si
        notano: e' quello che fa qualunque sfondo.
        Quindi le stelle vanno **sui due palchi appiccicati**: finche' sono
        agganciati non si muovono, e le stelle con loro. Non serve nessun
        elemento nuovo e nessuno strato in piu': e' lo sfondo di un elemento che
        c'era gia' ed era gia' promosso perche' appiccicato.

        Il palco prende anche il colore di fondo della pagina, che e' quello che
        gia' si vedeva attraverso: cosi' copre le stelle del documento e non se
        ne vedono due file sovrapposte che scorrono a velocita' diverse.
        Non cambia niente a vedersi: dietro al palco non c'era altro che quel
        colore, verificato.

        L'opacita' e' cotta dentro ai colori invece che messa sull'elemento: un
        `opacity` sul palco sbiadirebbe anche la boccetta. */

@media (max-width: 900px) {
  /* niente elemento fisso: e' lui che non regge il pinch */
  .yl-cielo { display: none; }

  .yl-perno,
  .yl-storia__perno {
    background-color: #0E051D;
    background-image:
      radial-gradient(1.6px 1.6px at 20% 24%, rgba(249, 229, 193, .55) 50%, transparent 51%),
      radial-gradient(2px   2px   at 44% 68%, rgba(214, 134,  23, .55) 50%, transparent 51%),
      radial-gradient(1.5px 1.5px at 8%  78%, rgba(255, 243, 218, .55) 50%, transparent 51%),
      radial-gradient(1.2px 1.2px at 70% 12%, rgba(255, 243, 218, .55) 50%, transparent 51%),
      radial-gradient(1.1px 1.1px at 88% 52%, rgba(249, 229, 193, .55) 50%, transparent 51%),
      radial-gradient(1.3px 1.3px at 56% 90%, rgba(214, 134,  23, .55) 50%, transparent 51%);
    background-size:
      280px 280px, 420px 420px, 380px 380px,
      340px 340px, 250px 250px, 300px 300px;
    background-repeat: repeat;
  }

  /* nel resto della pagina le stelle stanno sul documento e scorrono col
     contenuto, che e' come si comporta qualunque sfondo e non si nota */
  body {
    background-image:
      radial-gradient(1.6px 1.6px at 20% 24%, rgba(249, 229, 193, .55) 50%, transparent 51%),
      radial-gradient(2px   2px   at 44% 68%, rgba(214, 134,  23, .55) 50%, transparent 51%),
      radial-gradient(1.5px 1.5px at 8%  78%, rgba(255, 243, 218, .55) 50%, transparent 51%),
      radial-gradient(1.2px 1.2px at 70% 12%, rgba(255, 243, 218, .55) 50%, transparent 51%),
      radial-gradient(1.1px 1.1px at 88% 52%, rgba(249, 229, 193, .55) 50%, transparent 51%),
      radial-gradient(1.3px 1.3px at 56% 90%, rgba(214, 134,  23, .55) 50%, transparent 51%);
    background-size:
      280px 280px, 420px 420px, 380px 380px,
      340px 340px, 250px 250px, 300px 300px;
    background-repeat: repeat;
  }
}

/* 176. Anche Yumo che attraversa e i quattro passi tornano a muoversi.

        Erano stati spenti col taglio della memoria (blocco 172) insieme a tutto
        il resto delle animazioni legate allo scorrimento. Zago se n'e' accorto:
        "Yumo in Chi e' Yumo non si muove". Vero, e i quattro passi erano gia'
        tutti accesi insieme, che e' la stessa regressione dei pallini vista da
        un'altra parte.

        Si rifanno con lo stesso metodo: il JavaScript legge l'avanzamento nella
        sezione e scrive i valori a mano. Fuori dallo scorrimento restano valori
        statici, che sotto pinch non pesano, mentre un'animazione legata allo
        scorrimento fa promuovere l'elemento a superficie propria e ce lo tiene
        per tutta la pagina.

        UNA COSA TOLTA APPOSTA: i passi, nell'animazione vera, entrano con una
        sfocatura che si dissolve (`filter: blur(4px)` che va a zero). Su
        telefono la sfocatura NON si rimette: un filtro e' fra le cose piu' care
        che ci siano sotto pinch, ed e' il tipo di costo che ci ha fatto girare
        in tondo per mezza giornata. Restano opacita' e salita, che sono il 90
        per cento dell'effetto e non costano niente.

        Qui sotto ci sono solo gli stati di partenza, per non far lampeggiare
        niente prima che il JavaScript scriva il primo valore. */

@media (max-width: 900px) {
  html.yl-anima-js .yl-storia__passo { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html.yl-anima-js .yl-storia__passo,
  html.yl-anima-js .yl-storia__yumo {
    opacity: 1;
    transform: none;
  }
}

/* 177. I pallini si accendono subito, e il primo scende quel tanto che basta.

        Erano stati fatti partire dal 32 per cento della scena (blocco 176)
        perche' il primo, "150 ML", sta in alto a sinistra dove passa il titolo,
        e il titolo si ritira fino al 30. Aspettare che se ne andasse era il modo
        piu' semplice, ma li rendeva tardivi: Zago li vuole accesi appena la
        scena e' li'.

        Il conto e' stato: solo UNO dei quattro da' fastidio. Misurato a riposo,
        il testo occupa da 129 a 236 e il primo pallino sta a 175..277; gli
        altri tre sono tutti sotto e non lo sfiorano. Quindi invece di ritardare
        tutti e quattro si sposta quello, e i tempi tornano quelli del desktop:
        6, 22, 38 e 54 per cento.

        `max(22%, 140px)` e non una percentuale sola: su uno schermo corto la
        percentuale rende meno pixel mentre il testo resta alto uguale, e a
        320x700 con il solo 22 per cento il pallino tornava a sfiorarlo di un
        pixel. Col minimo in pixel il margine e' 31 px a 320 e 32 a 390: stesso
        risultato su tutte e due, che e' il punto. */

@media (max-width: 900px) {
  .yl-fatto--1 { top: max(22%, 140px); }
}

/* 178. I pallini escono da dietro la boccetta, sopra al razzo.

        QUI DUE RICHIESTE NON POTEVANO STARE INSIEME, e la scelta e' di Zago.
        Voleva i pallini dietro alla boccetta E davanti alle gocce. Ma le gocce
        stanno davanti alla boccetta, e fra un piano e quello sopra non c'e'
        spazio: o si alza la boccetta sopra alle gocce, o non si puo' fare.

        Nella 2.9.3 avevo alzato la boccetta. Le gocce finivano dietro al
        prodotto, e Zago ha detto di rimetterle davanti com'erano. Quindi si
        torna all'ordine di sempre e cade la parte "davanti alle gocce":

          0  Yumo sul razzo
          1  i quattro pallini
          2  la boccetta
          3  le gocce di caramello

        Cosi' i pallini escono davvero da dietro la boccetta, che era la
        richiesta principale, e stanno sopra al razzo. Passano invece sotto alle
        gocce: quando una goccia gli attraversa davanti la copre per un istante.
        E' il prezzo di avere le gocce in primo piano, ed e' stato scelto.

        Se un domani si volesse il contrario, si cambia un numero: portare
        `.yl-fatto` a 4 li mette sopra a tutto tranne che alla boccetta, ma a
        quel punto non escono piu' da dietro, ci passano sopra. */

.yl-fatto { z-index: 1; }

/* 179. La descrizione della scheda prodotto: paragrafi che si vedono.

        Fino alla 2.9.5 usciva tutta in un blocco solo, e non era colpa
        dell'HTML incollato. Il modello del prodotto usa il blocco "Estratto"
        di WordPress, e l'estratto, quando il campo "Descrizione breve" e'
        vuoto, WordPress se lo costruisce dal testo lungo passandolo per
        `wp_strip_all_tags`: butta via tutti i tag. Il resto lo fa
        `yl_scheda_descrizione_formattata` in functions.php.

        Qui serve solo dare aria fra un paragrafo e l'altro: il blocco Estratto
        ne aveva sempre uno solo, quindi nessuno aveva mai avuto bisogno di
        spaziarli. L'ultima riga, quella coi 150 ml in corsivo, sta un po' piu'
        staccata e piu' piccola: e' la scheda tecnica, non il racconto. */

.yl-sommario p { margin: 0 0 0.9em; }
.yl-sommario p:last-child { margin-bottom: 0; }

.yl-sommario em {
  display: inline-block;
  margin-top: 0.4em;
  font-size: 0.92em;
  font-style: normal;
  opacity: .78;
}

/* 180. Il riquadro delle avvertenze della scheda prodotto.

        Lo disegna `yl_avvertenze_dopo_il_carrello` in functions.php, subito
        dopo il modulo di acquisto: quindi sotto al bottone e sotto ai pulsanti
        di pagamento rapido, che Stripe mette dentro allo stesso modulo.

        PERCHE' LO STILE STA QUI E NON DENTRO ALLA DESCRIZIONE.
        Il primo tentativo era un `<style>` incollato nel campo "Descrizione
        breve". Non regge, ed e' un difetto che si vede solo a cose fatte:
        WordPress passa quel campo per `wptexturize`, che scambia i doppi
        trattini per un trattino lungo. Cosi' `var(--wp--preset--color--oro)`
        diventa `var(&#8211;wp&#8211;preset&#8211;color&#8211;oro)` e ogni
        variabile del tema smette di esistere. In piu' `wpautop` avvolge il
        blocco `<style>` dentro a un `<p>` e ci infila dei `<br />`.
        Verificato leggendo il sorgente della pagina online.
        Nel foglio di stile del tema non passa da nessun filtro di testo.

        Il riquadro e' volutamente sobrio: e' la parte "70 per cento pulito"
        della pagina, non deve competere col prodotto. Testo piccolo, bordo
        sottile, i due pittogrammi che fanno da segnale. Le frasi H stanno in
        grassetto perche' sono quelle che il CLP chiede di far vedere, il resto
        e' piu' piccolo e piu' spento. */

.yl-sic {
  border: 1px solid var(--wp--preset--color--viola-chiaro);
  border-radius: 14px;
  padding: 16px 18px;
  margin-top: 22px;
  font-size: 13px;
  line-height: 1.55;
  text-align: left;
}

.yl-sic__testa {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.yl-sic__segni {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.yl-sic__segni svg {
  display: block;
  width: 42px;
  height: 42px;
}

.yl-sic__titolo {
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--wp--preset--color--oro);
}

/* La misura dei paragrafi va imposta, e la ragione merita due righe.
   Il riquadro prende 13 px, ma i suoi `<p>` ne prendevano 20: qualcosa nella
   scheda prodotto da' una misura ai paragrafi e vince sulle mie classi. Cercato
   nel foglio del tema e negli stili che WordPress stampa nella pagina, e li'
   dentro non c'e': arriva da piu' lontano, probabilmente da WooCommerce.
   Il risultato si vedeva: le note in fondo, che devono essere le piu' piccole,
   uscivano piu' grandi delle frasi di pericolo, e il riquadro era alto 703 px
   invece di 398. Con `!important` la questione e' chiusa senza dover sapere chi
   fosse: qui la gerarchia delle misure e' voluta, non ereditata. */
.yl-sic p {
  margin: 0 0 9px;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

.yl-sic p:last-child { margin-bottom: 0; }
.yl-sic__h { font-weight: 700; }

.yl-sic .yl-sic__min {
  font-size: 12px !important;
  opacity: .75;
}

.yl-sic a { color: inherit; }

@media (max-width: 600px) {
  .yl-sic { padding: 14px; }
  .yl-sic__segni svg { width: 36px; height: 36px; }
}

/* 182. Il riquadro delle avvertenze: centrato, largo, intestazione in mezzo.

        Prima stava dentro alla colonna di destra, quindi era stretto e spinto
        da una parte. Ora `yl_avvertenze_dopo_il_carrello` lo attacca DOPO il
        blocco a due colonne, quindi prende tutta la larghezza del contenuto.
        Qui gli si da' il resto: un tetto alla larghezza perche' non diventi una
        striscia, e il centro.

        LE RIGHE DI TESTO HANNO UN TETTO LORO, piu' stretto del riquadro. Non e'
        un vezzo: su schermo grande il contenuto arriva a 1200 px, e una nota
        legale da 12 px stesa su 1200 px fa righe da duecento caratteri, che non
        si leggono. Il riquadro resta largo, il testo dentro sta comodo.

        L'intestazione va al centro come il resto: era l'unica cosa allineata a
        sinistra in un riquadro tutto centrato, e si vedeva.

        UN BLOCCO 181 E' ESISTITO ED E' STATO TOLTO, e vale la pena sapere
        perche'. Finche' il riquadro stava dentro alla colonna di destra, su
        telefono quella colonna e' in flex con l'ordine scritto a mano, e il
        riquadro, non avendone uno, valeva zero: saliva sopra al titolo del
        prodotto. Serviva un `order: 7`. Spostandolo fuori dalle colonne il
        problema si e' sciolto da solo e quella regola non agganciava piu'
        niente, quindi e' stata tolta invece di lasciarla li' a confondere.

        LE MISURE: riquadro fino a 920 px, righe di testo fino a 105 caratteri.
        Provate quattro combinazioni. Con 1000 px e righe corte il testo
        riempiva il 54 per cento e il riquadro sembrava vuoto; lasciando le
        righe libere si arrivava a 135 caratteri, che non si leggono. Cosi'
        riempie il 79 per cento con righe da 108 caratteri. */

.yl-sic {
  max-width: 920px;
  margin-inline: auto;
  margin-top: 34px;
  text-align: center;
}

.yl-sic__testa { justify-content: center; }

.yl-sic p {
  max-width: 105ch;
  margin-inline: auto;
}

@media (max-width: 780px) {
  .yl-sic { margin-top: 22px; }
}