/* ==========================================================================
   Artemide Shop — mondo visivo "Il Sigillo di Cera"
   Tutti i colori in OKLCH. Neutri caldi, mai croma zero. La tela non e' bianca.
   ========================================================================== */

/* --- Caratteri ----------------------------------------------------------- */
/* Vollkorn: contrasto basso e aste piene. Un didone (Bodoni) qui era la faccia
   sbagliata — i filetti sparivano e in piccolo il titolo diventava fragile.
   Un conio incide solchi di spessore costante, non capelli.
   Archivo: grottesca da lavoro, con asse di larghezza per i maiuscoletti
   spaziati che il marchio usa gia' in "APICOLTURA DAL 1922". */

@font-face {
  font-family: 'Vollkorn';
  src: url('../fonts/vollkorn-var.woff2') format('woff2-variations');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

/* --- Token --------------------------------------------------------------- */

:root {
  /* Neutri caldi — la base. Croma bassa ma mai zero. */
  --canvas:            oklch(98.5% 0.008 85);
  --surface:           oklch(96.5% 0.012 84);
  --surface-raised:    oklch(99.2% 0.006 86);
  --border-subtle:     oklch(91.0% 0.016 82);
  --border:            oklch(85.0% 0.022 80);

  /* Testo — bruno caldo, mai nero puro */
  --text:              oklch(26.0% 0.035 58);
  --text-secondary:    oklch(42.0% 0.030 62);
  --text-muted:        oklch(55.0% 0.028 70);

  /* Miele — il colore identitario */
  --honey:             oklch(72.0% 0.155 72);
  --honey-deep:        oklch(45.0% 0.120 60);
  --honey-wash:        oklch(94.0% 0.050 85);
  --gold:              oklch(84.0% 0.145 88);

  /* Cera e favo */
  --wax:               oklch(90.0% 0.060 90);
  --comb:              oklch(78.0% 0.090 85);
  --propoli:           oklch(32.0% 0.055 55);

  /* Bronzo del marchio: campionato dal logo originale (#846C48). E' piu' muto
     dell'oro dei token e va usato per il lettering istituzionale. */
  --bronze:            oklch(54.6% 0.060 77);
  --bronze-deep:       oklch(36.2% 0.041 84);

  /* Ceralacca: il materiale del sigillo. Ambra profonda, non rossa. */
  --seal:              oklch(58.0% 0.150 62);
  --seal-lit:          oklch(74.0% 0.160 74);
  --seal-shadow:       oklch(34.0% 0.100 52);

  /* Stati */
  --success:           oklch(58.0% 0.100 145);
  --warning:           oklch(75.0% 0.150 65);
  --danger:            oklch(55.0% 0.170 28);

  /* Superfici scure usate anche in tema chiaro, per le fasce immersive */
  --deep:              oklch(21.0% 0.030 58);
  --deep-text:         oklch(95.0% 0.014 85);

  /* Tipografia */
  --font-display: 'Vollkorn', 'Iowan Old Style', Georgia, serif;
  --font-ui: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Ritmo verticale unico su tutta la pagina */
  --step-0: 1rem;
  --step-1: 1.5rem;
  --step-2: 2.25rem;
  --step-3: 3.5rem;
  --step-4: 5.5rem;
  --step-5: 8rem;

  --measure: 68ch;
  /* ch e' la larghezza dello zero: in Archivo 68ch fanno circa 88 caratteri
     veri. Per il testo lungo (.prose, scheda prodotto) servono 58ch, che ne
     fanno 72. Il resto dei paragrafi — hero, fasce — resta a --measure. */
  --measure-lungo: 58ch;
  --shell: 76rem;
  --radius: 0.25rem;

  /* Ombre: sempre offset + sfocatura. Un alone senza offset e' decorazione. */
  --shadow-near: 0 1px 2px oklch(26% 0.035 58 / 0.08), 0 2px 6px oklch(26% 0.035 58 / 0.06);
  --shadow-far:  0 6px 14px oklch(26% 0.035 58 / 0.10), 0 18px 40px oklch(26% 0.035 58 / 0.10);

  --ease-press: cubic-bezier(0.16, 1, 0.3, 1);
  /* Decelerazione secca, da meccanismo: il conio si ferma, non rimbalza. */
  --ease-strike: cubic-bezier(0.22, 1.02, 0.28, 1);

  /* Durate. Il feedback e' immediato, l'arrivo e' autorevole. */
  --t-tap: 120ms;
  --t-state: 220ms;
  --t-move: 380ms;
  --t-arrive: 640ms;

  color-scheme: light;
}

/* --- La variante scura, ferma ------------------------------------------- *
 *
 * Questi valori esistono e funzionano, ma NON si accendono da soli. Prima
 * stavano dentro `@media (prefers-color-scheme: dark)`, quindi chiunque avesse
 * il telefono in modalita' scura — ormai la maggioranza — vedeva una versione
 * del sito che nessuno aveva scelto di mostrargli.
 *
 * Miele Artemide e' il miele guardato in controluce: l'identita' e' la tela
 * calda, e le ventuno fotografie sono tutte illuminate cosi'. La versione che
 * vende e' quella chiara, su qualunque schermo.
 *
 * Restano qui, agganciati a `data-tema="scuro"` sull'elemento radice, perche'
 * sono tarati e verificati: per riaccenderli basta mettere quell'attributo,
 * da un interruttore o a mano. Nessuno lo mette, oggi.
 */
:root[data-tema="scuro"] {
    --canvas:          oklch(18.0% 0.020 62);
    --surface:         oklch(23.0% 0.025 60);
    --surface-raised:  oklch(27.0% 0.028 60);
    --border-subtle:   oklch(31.0% 0.030 60);
    --border:          oklch(38.0% 0.035 62);

    --text:            oklch(94.0% 0.014 85);
    --text-secondary:  oklch(80.0% 0.020 80);
    --text-muted:      oklch(66.0% 0.024 75);

    /* Al buio l'ambra torna leggibile come testo: si scambiano i ruoli. */
    --honey:           oklch(78.0% 0.150 75);
    --honey-deep:      oklch(88.0% 0.120 82);
    --honey-wash:      oklch(28.0% 0.045 65);
    --propoli:         oklch(14.0% 0.020 58);

    --bronze:          oklch(76.0% 0.070 80);
    --bronze-deep:     oklch(86.0% 0.050 84);

    --seal:            oklch(62.0% 0.155 64);
    --seal-lit:        oklch(80.0% 0.150 78);
    --seal-shadow:     oklch(26.0% 0.080 50);

    /* La fascia immersiva deve staccarsi dalla tela (18%), non sfumarci
       dentro: a 13% le due si leggevano come un unico campo bruno. */
    --deep:            oklch(9.5% 0.018 58);
    --deep-text:       oklch(94.0% 0.014 85);

    --shadow-near: 0 1px 2px oklch(8% 0.02 58 / 0.5), 0 2px 6px oklch(8% 0.02 58 / 0.4);
    --shadow-far:  0 6px 14px oklch(8% 0.02 58 / 0.5), 0 18px 40px oklch(8% 0.02 58 / 0.45);
}

/* --- Reset misurato ------------------------------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anche le parti che il browser disegna da solo stanno nella tela: una
     barra di scorrimento grigia accanto all'ambra vira al verde. */
  scrollbar-color: var(--comb) var(--canvas);
}

input, textarea { caret-color: var(--honey-deep); }

/* Il segnaposto del browser e' #757575: un grigio puro, a 4,49:1 sulla tela. */
::placeholder { color: var(--text-muted); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  line-height: 1.6;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

/* --- Movimento: rivelazione e continuita' -------------------------------- */
/* Regola d'ingaggio: lo stato di partenza e' SEMPRE quello visibile. Nessun
   opacity:0 vive nel CSS di base, quindi un browser senza timeline di scorrimento
   e senza JS mostra comunque tutta la pagina. Il movimento e' un di piu'.

   Prima scelta: animazione guidata dallo scorrimento, che gira fuori dal thread
   principale e non costa un listener. Ripiego per Firefox: un IntersectionObserver,
   abilitato solo dopo che lo script in <head> ha dichiarato che serve. */

/* Lo spostamento passa dalla proprieta' `translate`, non da `transform`.
   Non e' pignoleria: un'animazione vince sempre su una dichiarazione normale,
   quindi un `transform` animato qui spegnerebbe per sempre il sollevamento in
   hover della scheda. Su due proprieta' diverse i due movimenti si compongono
   invece di litigare, e nessuno dei due ha bisogno di !important. */
@keyframes rivela {
  from { opacity: 0; translate: 0 1.75rem; }
  to   { opacity: 1; translate: none; }
}

/* Una scheda e' sempre parte di una schiera, e una schiera che entra in fila e'
   il caso in cui la cascata dice qualcosa: "questi vanno letti come un gruppo".
   Per questo `.scheda` e' un bersaglio di rivelazione senza doverlo marcare —
   nel ciclo di WooCommerce il `<li>` non e' nostro e non potremmo comunque. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    [data-rivela],
    .scheda {
      animation: rivela linear both;
      animation-timeline: view();
      /* Finisce presto: l'elemento e' a regime molto prima di essere al centro,
         altrimenti si legge come una pagina che fatica a caricare. */
      animation-range: entry 4% cover 18%;
    }
  }

  .senza-timeline [data-rivela],
  .senza-timeline .scheda {
    opacity: 0;
    translate: 0 1.75rem;
    transition: opacity var(--t-arrive) var(--ease-press),
                translate var(--t-arrive) var(--ease-press);
    transition-delay: var(--ritardo, 0ms);
  }

  .senza-timeline [data-rivela].e-dentro,
  .senza-timeline .scheda.e-dentro { opacity: 1; translate: none; }
}

/* La cascata dentro una griglia: il ritardo lo mette la griglia stessa, non
   ogni elemento. Tetto a 6 passi — oltre, chi guarda aspetta. */
.senza-timeline [data-cascata] > * { --ritardo: 0ms; }
.senza-timeline [data-cascata] > :nth-child(2)  { --ritardo: 55ms; }
.senza-timeline [data-cascata] > :nth-child(3)  { --ritardo: 110ms; }
.senza-timeline [data-cascata] > :nth-child(4)  { --ritardo: 165ms; }
.senza-timeline [data-cascata] > :nth-child(5)  { --ritardo: 220ms; }
.senza-timeline [data-cascata] > :nth-child(n+6) { --ritardo: 275ms; }

/* Continuita' fra pagine. Il barattolo cliccato nella griglia e' lo stesso
   barattolo che si apre nella scheda: qui non si dissolve, si sposta. Il nome
   di transizione lo assegna il JS al volo, perche' in una griglia da venti
   deve essere unico e apparteneri solo all'elemento toccato. */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-group(prodotto) {
    animation-duration: var(--t-arrive);
    animation-timing-function: var(--ease-press);
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: var(--t-move);
    animation-timing-function: var(--ease-press);
  }

  /* Testata e chiusura non partecipano: restano ferme mentre il resto cambia,
     che e' esattamente quello che fanno in una navigazione reale. */
  .masthead { view-transition-name: testata; }
  .colophon { view-transition-name: chiusura; }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.018em;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: clamp(2.75rem, 1.6rem + 5vw, 6rem); }
h2 { font-size: clamp(2rem, 1.35rem + 2.8vw, 3.75rem); }
h3 { font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.85rem); }

p { margin: 0 0 var(--step-0); max-width: var(--measure); }

a { color: var(--honey-deep); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--honey-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--honey-wash); color: var(--text); }

/* Le icone del tema: un solo reticolo, un solo spessore, colore ereditato.
   Lo spessore non scala con la dimensione — a 1rem come a 1.4rem il segno resta
   quello, che e' cio' che le tiene insieme come insieme. */
.icona {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  flex: none;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--step-0); top: -4rem; z-index: 100;
  background: var(--surface-raised); color: var(--text);
  padding: 0.7rem 1.1rem; border-radius: var(--radius);
  box-shadow: var(--shadow-far);
  transition: top 180ms var(--ease-press);
}
.skip-link:focus { top: var(--step-0); }

/* Avviso prezzi provvisori: deve essere impossibile non vederlo, e sparisce
   da solo quando i segnaposto vengono rimossi. */
.avviso-segnaposto {
  margin: 0;
  max-width: none;
  padding: 0.75rem var(--step-1);
  background: var(--warning);
  color: oklch(24% 0.05 58);
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  border-bottom: 1px solid oklch(from var(--warning) calc(l - 0.18) c h);
}

/* --- Impalcatura --------------------------------------------------------- */

.shell {
  width: min(100% - 2.5rem, var(--shell));
  margin-inline: auto;
}

@media (max-width: 40rem) {
  .shell { width: min(100% - 1.75rem, var(--shell)); }
}

/* Etichetta incisa: i maiuscoletti spaziati del marchio.
   Non e' un occhiello sopra un titolo: marca dati e registri. */
.struck {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  font-stretch: 108%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bronze);
}

/* --- Favo: la texture di fondo ------------------------------------------ */
/* Rilievo statico, disegnato una volta. La deriva lentissima e' l'unico
   movimento ambientale della pagina: una sola trasformazione compositata. */

/* La maschera e' un token perche' cambia con la forma del contenitore. Quella
   di partenza e' un'ellisse tarata su una fascia larga: su una colonna stretta
   e alta — la chiusura su telefono, che diventa alta ottocento pixel — l'ellisse
   si esaurisce a un terzo dell'altezza e sotto resta un blocco bruno piatto.
   Dove il contenitore e' piu' alto che largo serve una sfumatura verticale, che
   copre tutta la larghezza e si spegne solo in fondo. */
.comb-field {
  --maschera: radial-gradient(120% 90% at 70% 18%, black 0%, transparent 72%);
  position: absolute;
  inset: -25% -12%;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: var(--maschera);
          mask-image: var(--maschera);
}

@media (max-width: 52rem) {
  .comb-field { --maschera: linear-gradient(to bottom, black 0%, black 62%, transparent 96%); }
}

/* Esagoni veri, non una griglia di triangoli: il contorno del favo arriva da
   una maschera SVG affiancabile, cosi' il colore resta un token e cambia da
   solo fra chiaro e scuro. */
.comb-field::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--comb);
  opacity: 0.28;
  --hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34.64' height='60' viewBox='0 0 34.64 60'%3E%3Cg fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M17.32 0 L34.64 10 L34.64 30 L17.32 40 L0 30 L0 10 Z'/%3E%3Cpath d='M0 30 L17.32 40 L17.32 60 L0 70 L-17.32 60 L-17.32 40 Z'/%3E%3Cpath d='M34.64 30 L51.96 40 L51.96 60 L34.64 70 L17.32 60 L17.32 40 Z'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image: var(--hex);
          mask-image: var(--hex);
  -webkit-mask-size: 34.64px 60px;
          mask-size: 34.64px 60px;
  -webkit-mask-repeat: repeat;
          mask-repeat: repeat;
  will-change: transform;
  animation: comb-drift 120s linear infinite;
}

@keyframes comb-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-34.64px, -60px, 0); }
}

/* La luce che attraversa il favo. E' il miele guardato in controluce: una
   sorgente morbida che scorre lentamente sulle celle. Un solo strato, una sola
   trasformazione compositata, nessun ridisegno per fotogramma. */
.comb-field::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -45%;
  width: 75%;
  height: 220%;
  background: radial-gradient(
    50% 32% at 50% 50%,
    oklch(from var(--gold) l c h / 0.55) 0%,
    oklch(from var(--gold) l c h / 0.22) 42%,
    transparent 72%
  );
  transform: rotate(-18deg);
  will-change: transform;
  animation: comb-light 34s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes comb-light {
  from { transform: translate3d(0, 0, 0) rotate(-18deg); }
  to   { transform: translate3d(115%, 6%, 0) rotate(-18deg); }
}

/* Sul fondo scuro la luce e' l'unica cosa che rende la cera credibile:
   piu' intensa, perche' ha meno da illuminare. */
[data-tema="scuro"] .comb-field::after {
  background: radial-gradient(
    50% 32% at 50% 50%,
    oklch(from var(--honey) l c h / 0.30) 0%,
    oklch(from var(--honey) l c h / 0.12) 42%,
    transparent 72%
  );
}

@media (prefers-reduced-motion: reduce) {
  .comb-field::before,
  .comb-field::after { animation: none; }
}

/* --- La soglia: dove la tela diventa propoli ----------------------------- *
 *
 * Fra una sezione chiara e una fascia scura non c'e' un taglio dritto: il bordo
 * della fascia e' un favo che si sta costruendo. Celle esagonali della stessa
 * misura del favo di fondo (34,64 x 40, la tessera di .comb-field::before)
 * sporgono dalla propoli verso la tela, fitte nella prima fila e sempre piu'
 * rade sopra — una fila si regge solo dove ci sono le due celle sotto, come in
 * un favo vero. Qualcuna e' piena di miele, in controluce.
 *
 * Il momento d'autore delle pagine interne: quando la soglia entra in vista, un
 * filo d'oro si accende sul bordo, la luce entra nella fascia e le celle
 * salgono a ondata dal punto in cui e' partita, poi il miele riempie le sue.
 * Succede una volta, poi la pagina sta ferma.
 *
 * Tutto vive DENTRO la fascia, nella striscia alta (o bassa) del suo padding:
 * le fasce hanno `overflow: clip`, e qualunque cosa sporgesse fuori verrebbe
 * tagliata. La striscia e' trasparente — il fondo scuro comincia sotto — e le
 * celle la riempiono. Le celle le disegna artemide.js, perche' il loro numero
 * dipende dalla larghezza; senza JS resta un bordo dritto, piu' in basso.
 *
 * Stato dichiarato fuori dalle animazioni = stato finale, come per il sigillo.
 */

[data-soglia] {
  --cella-l: 34.64px;
  --cella-a: 40px;
  --soglia-h: 5.25rem;
  --soglia-sopra: 0px;
  --soglia-sotto: 0px;
  --sfuma-sopra: 0px;
  --sfuma-sotto: 0px;
}

[data-soglia~="sopra"] { --soglia-sopra: var(--soglia-h); --sfuma-sopra: 7rem; }
[data-soglia~="sotto"] { --soglia-sotto: var(--soglia-h); --sfuma-sotto: 7rem; }

/* `body` alza la specificita' sopra `.method { background }` e simili, che
   vivono in fogli caricati dopo questo. */
body [data-soglia] {
  background:
    linear-gradient(var(--deep), var(--deep))
    0 var(--soglia-sopra) / 100% calc(100% - var(--soglia-sopra) - var(--soglia-sotto))
    no-repeat;
}

/* Il favo di fondo e la sua luce si spengono avvicinandosi alla soglia: le
   celle sono propoli piena, e accanto a una fascia accesa dalla luce
   leggerebbero come toppe scure. Il campo sborda del 25% sopra e sotto la
   fascia, quindi il bordo della fascia sta a 1/6 e 5/6 della sua altezza. */
[data-soglia] > .comb-field {
  -webkit-mask-image:
    linear-gradient(to bottom,
      transparent calc(100% / 6 + var(--soglia-sopra)),
      black calc(100% / 6 + var(--soglia-sopra) + var(--sfuma-sopra)),
      black calc(500% / 6 - var(--soglia-sotto) - var(--sfuma-sotto)),
      transparent calc(500% / 6 - var(--soglia-sotto))),
    var(--maschera);
          mask-image:
    linear-gradient(to bottom,
      transparent calc(100% / 6 + var(--soglia-sopra)),
      black calc(100% / 6 + var(--soglia-sopra) + var(--sfuma-sopra)),
      black calc(500% / 6 - var(--soglia-sotto) - var(--sfuma-sotto)),
      transparent calc(500% / 6 - var(--soglia-sotto))),
    var(--maschera);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

.soglia {
  position: absolute;
  inset-inline: 0;
  z-index: 0;
  height: calc(var(--soglia-h) + var(--cella-a) / 2);
  pointer-events: none;
  contain: layout;
}

.soglia--sopra { top: 0; }
.soglia--sotto { bottom: 0; }

/* Una cella: esagono a punta in alto. Mezzo pixel in piu' per lato, cosi' due
   celle vicine si sovrappongono invece di lasciare fra loro un filo di tela
   dovuto all'antialiasing. La posizione sta in `translate`, l'animazione in
   `transform`: si compongono. */
.cella {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--cella-l) + 1px);
  height: calc(var(--cella-a) + 1px);
  translate: var(--x) var(--y);
  background: var(--deep);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transform-origin: 50% 100%;
}

.soglia--sotto .cella { transform-origin: 50% 0%; }

/* La cella col miele: un esagono piu' piccolo dentro quello di propoli, cosi'
   resta il bordo di cera scura. Vuota e' l'interno della cella; il miele e' il
   suo ::after, che sale dal fondo. */
.cella--miele b {
  position: absolute;
  inset: 3.5px 3px;
  clip-path: inherit;
  background: oklch(from var(--deep) calc(l + 0.07) calc(c + 0.02) h);
}

.cella--miele b::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(75% 60% at 50% 30%, oklch(from var(--gold) calc(l + 0.06) c h) 0%, transparent 70%),
    linear-gradient(to bottom, var(--honey) 0%, var(--seal) 100%);
}

/* Il filo d'oro sul bordo e la luce che entra nella fascia: esistono solo
   durante il momento, a riposo non si vedono. */
.soglia__filo,
.soglia__alone {
  position: absolute;
  inset-inline: 0;
  opacity: 0;
}

.soglia__filo {
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    oklch(from var(--gold) l c h / 0.9) calc(var(--o, 50%) - 22%),
    oklch(97% 0.06 92) var(--o, 50%),
    oklch(from var(--gold) l c h / 0.9) calc(var(--o, 50%) + 22%),
    transparent 100%);
  transform-origin: var(--o, 50%) 50%;
}

.soglia__alone {
  height: 16rem;
  background: radial-gradient(42% 100% at var(--o, 50%) 0%,
    oklch(from var(--gold) l c h / 0.42) 0%,
    oklch(from var(--honey) l c h / 0.16) 45%,
    transparent 75%);
}

.soglia--sopra .soglia__filo { top: calc(var(--soglia-h) - 1px); }
.soglia--sopra .soglia__alone { top: var(--soglia-h); transform-origin: var(--o, 50%) 0%; }

.soglia--sotto .soglia__filo { bottom: calc(var(--soglia-h) - 1px); }
.soglia--sotto .soglia__alone {
  bottom: var(--soglia-h);
  transform-origin: var(--o, 50%) 100%;
  background: radial-gradient(42% 100% at var(--o, 50%) 100%,
    oklch(from var(--gold) l c h / 0.42) 0%,
    oklch(from var(--honey) l c h / 0.16) 45%,
    transparent 75%);
}

@media (prefers-reduced-motion: no-preference) {
  .soglia[data-stato="attesa"] .cella { opacity: 0; }

  .soglia[data-stato="via"] .cella {
    animation: cella-sorge 620ms var(--ease-press) both;
    animation-delay: var(--d, 0ms);
  }

  .soglia--sotto[data-stato="via"] .cella { animation-name: cella-scende; }

  .soglia[data-stato="attesa"] .cella--miele b::after { translate: 0 100%; }

  .soglia[data-stato="via"] .cella--miele b::after {
    animation: miele-sale 760ms var(--ease-press) both;
    animation-delay: calc(var(--d, 0ms) + 360ms);
  }

  .soglia[data-stato="via"] .cella--miele {
    animation: cella-sorge 620ms var(--ease-press) both,
               miele-accende 900ms ease-out both;
    animation-delay: var(--d, 0ms), calc(var(--d, 0ms) + 900ms);
  }

  .soglia--sotto[data-stato="via"] .cella--miele { animation-name: cella-scende, miele-accende; }

  .soglia[data-stato="via"] .soglia__filo { animation: filo-accende 1100ms var(--ease-press) both; }
  .soglia[data-stato="via"] .soglia__alone { animation: alone-entra 1500ms var(--ease-press) 80ms both; }
}

/* Dal basso, schiacciata e piccola, fino a uno scatto oltre la misura: la cera
   spinta fuori dalla fascia che si assesta. Niente rimbalzo, una sola
   sovraelongazione. */
@keyframes cella-sorge {
  0%   { opacity: 0; transform: translateY(45%) scale(0.15, 0.3); }
  45%  { opacity: 1; }
  62%  { transform: translateY(-6%) scale(1.1, 1.14); }
  100% { opacity: 1; transform: none; }
}

@keyframes cella-scende {
  0%   { opacity: 0; transform: translateY(-45%) scale(0.15, 0.3); }
  45%  { opacity: 1; }
  62%  { transform: translateY(6%) scale(1.1, 1.14); }
  100% { opacity: 1; transform: none; }
}

@keyframes miele-sale {
  from { translate: 0 100%; }
  to   { translate: none; }
}

/* Appena piena, la cella prende la luce una volta. */
@keyframes miele-accende {
  0%   { filter: brightness(1); }
  30%  { filter: brightness(1.55) saturate(1.15); }
  100% { filter: brightness(1); }
}

@keyframes filo-accende {
  0%   { opacity: 0; transform: scaleX(0); }
  25%  { opacity: 1; }
  45%  { transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}

@keyframes alone-entra {
  0%   { opacity: 0; transform: scaleY(0.25); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: scaleY(1); }
}

/* --- Bottoni ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.95rem 1.6rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms var(--ease-press), box-shadow 160ms var(--ease-press),
              background-color 160ms var(--ease-press);
}

.btn--primary {
  background: var(--honey);
  color: oklch(24% 0.04 58);
  box-shadow: var(--shadow-near);
}
.btn--primary:hover { background: var(--gold); box-shadow: var(--shadow-far); transform: translateY(-1px); }
.btn--primary:active { transform: translateY(0); box-shadow: var(--shadow-near); }

.btn--quiet {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn--quiet:hover { border-color: var(--honey-deep); color: var(--honey-deep); }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none;
}

/* --- La scheda: un prodotto come oggetto --------------------------------- */
/* Componente unico per il negozio, la home, le tre linee e i correlati. Prima
   ognuno dei quattro posti aveva la sua variante e nessuna reggeva il catalogo
   vero, che non e' omogeneo: nove mieli sono fotografati sullo stesso banco di
   legno con lo stesso fondo caldo, ma tartufi, mieleciok e acacia-mandorle
   arrivano da un set su fondo nero e l'aceto da un piano di ardesia grigia con
   dell'insalata dentro. Affiancati a nudo leggono come un marketplace.

   Qui non si ritocca nessun file: si impone la stessa scatola e la stessa luce
   a tutte e ventuno. Cornice identica, formato identico, una sorgente calda in
   alto e una vignettatura di propoli ai bordi, uguali per tutte. La foto nera
   resta scura e quella chiara resta chiara — cambia che ora sono illuminate
   dalla stessa lampada. Sostituendo le fotografie con un set omogeneo il
   trattamento non va tolto: si limita a fare meno lavoro. */

.scheda {
  position: relative;
  display: flex;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: calc(var(--radius) * 2);
  overflow: clip;
  box-shadow: var(--shadow-near);
  transition: transform var(--t-move) var(--ease-press),
              box-shadow var(--t-move) var(--ease-press),
              border-color var(--t-move) var(--ease-press);
}

.scheda:hover,
.scheda:focus-within {
  transform: translateY(-5px);
  box-shadow: var(--shadow-far);
  border-color: var(--comb);
}

/* Un solo bersaglio cliccabile per scheda: tutta la scheda. */
.scheda__vai {
  display: grid;
  grid-template-rows: auto 1fr;
  width: 100%;
  text-decoration: none;
  color: inherit;
}

.scheda__vai:focus-visible { outline-offset: -3px; }

/* --- La cornice: dove si pareggia la luce -------------------------------- */

.scheda__cornice {
  position: relative;
  display: block;
  aspect-ratio: 1;
  /* Senza questo la cornice non e' quadrata. E' una cella di griglia, e una
     cella ha `min-height: auto`: il suo minimo automatico segue il contenuto e
     scavalca `aspect-ratio`. Bastava un margine sotto l'immagine — WooCommerce
     ne mette uno di 1em nel ciclo del catalogo — perche' la cornice diventasse
     18px piu' alta della foto, lasciando una striscia di cera sotto ognuna. */
  min-height: 0;
  overflow: clip;
  background: var(--wax);
  isolation: isolate;
}

.scheda__cornice img { margin: 0; }

.scheda__cornice img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 620ms var(--ease-press);
}

@media (prefers-reduced-motion: no-preference) {
  .scheda:hover .scheda__cornice img,
  .scheda:focus-within .scheda__cornice img { transform: scale(1.055); }
}

/* La lampada comune: caldo dall'alto, propoli agli angoli. Sopra l'immagine,
   sotto il testo, identica in tutte le schede. */
.scheda__cornice::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(115% 80% at 50% -12%, oklch(from var(--gold) l c h / 0.24) 0%, transparent 58%),
    radial-gradient(100% 100% at 50% 52%, transparent 44%, oklch(from var(--propoli) l c h / 0.28) 100%);
}

/* Al buio la vignettatura sparirebbe dentro la tela: resta solo la luce. */
[data-tema="scuro"] .scheda__cornice::after {
  background:
    radial-gradient(115% 80% at 50% -12%, oklch(from var(--gold) l c h / 0.16) 0%, transparent 58%),
    radial-gradient(100% 100% at 50% 52%, transparent 52%, oklch(from var(--propoli) l c h / 0.42) 100%);
}

/* Il miele si guarda in controluce: al passaggio del mouse una banda di luce
   attraversa il vetro una volta sola e se ne va. E' la stessa idea fisica della
   sorgente che scorre sul favo (.comb-field::after), qui alla scala di un
   oggetto invece che di una sezione. */
.scheda__cornice::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset-block: -55%;
  inset-inline-start: -60%;
  width: 42%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    oklch(from var(--gold) l c h / 0.50) 48%,
    transparent 100%
  );
  transform: rotate(16deg);
}

@media (prefers-reduced-motion: no-preference) {
  .scheda:hover .scheda__cornice::before,
  .scheda:focus-within .scheda__cornice::before { animation: luce-vetro 820ms var(--ease-press); }
}

@keyframes luce-vetro {
  0%   { opacity: 0;    transform: rotate(16deg) translate3d(0, 0, 0); }
  22%  { opacity: 1; }
  78%  { opacity: 1; }
  100% { opacity: 0;    transform: rotate(16deg) translate3d(340%, 0, 0); }
}

/* --- La targa: nome, linea, prezzo --------------------------------------- */

.scheda__targa {
  display: grid;
  align-content: start;
  gap: 0.28rem;
  padding: var(--step-0) var(--step-0) 0.9rem;
  border-top: 1px solid var(--border-subtle);
}

/* L'esagono e' quello del cartiglio gia' stampato sul vetro, non un pallino. */
.scheda__linea {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
}

.scheda__linea::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.57rem;
  background: var(--comb);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transition: background-color var(--t-state) var(--ease-press);
}

.scheda:hover .scheda__linea::before { background: var(--honey); }

.scheda__nome {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.scheda__prezzo {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--honey-deep);
  letter-spacing: -0.01em;
  margin-top: 0.15rem;
}

/* Le fasce dei prodotti variabili ("2,50 € – 20,00 €") non vanno spezzate. */
.scheda__prezzo .woocommerce-Price-amount { white-space: nowrap; }
.scheda__prezzo del { display: none; }
.scheda__prezzo ins { text-decoration: none; }

.scheda__nota {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.35;
}

/* Niente freccia nella targa. C'era, e in una griglia da venti diventava venti
   frecce identiche che indicavano tutte lo stesso nulla: la scheda e' gia'
   interamente cliccabile e lo dichiara sollevandosi, con la luce che le
   attraversa il vetro. Un'icona in piu' non aggiungeva un'informazione, solo
   un oggetto da guardare. */

/* --- Il prodotto citato, in fondo a un articolo -------------------------- */
/* Sta qui e non in woo.css: gli articoli del diario non caricano il foglio del
   negozio, e li' questo blocco sarebbe rimasto senza stile. */

.citati {
  margin-top: var(--step-4);
  padding-top: var(--step-2);
  border-top: 1px solid var(--border-subtle);
}

.citati h2.struck { margin: 0 0 var(--step-1); }

.citati__schiera {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  max-width: 42rem;
}

/* --- Griglia di schede ---------------------------------------------------- */

.schiera {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: var(--step-2) var(--step-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Su telefono due colonne, non una. A colonna singola il catalogo da ventuno
   prodotti diventava una pagina da 24.000 pixel: nessuno arriva in fondo. */
@media (max-width: 40rem) {
  .schiera {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--step-1) 0.75rem;
  }

  .scheda__targa { padding: 0.75rem 0.75rem 0.85rem; }
  .scheda__nome { font-size: 0.95rem; }
  .scheda__prezzo { font-size: 0.92rem; }
  .scheda__nota { display: none; }
}

/* --- Testata ------------------------------------------------------------- */

/* La testata resta appesa in alto per tutta la navigazione: in un negozio il
   carrello non puo' stare a 8000px di distanza. Da ferma e' quasi trasparente e
   lascia passare la tela; appena si scorre diventa materia — vetro piu' fitto,
   filo sotto, ombra — cosi' dichiara che sta galleggiando sopra il contenuto
   invece di far finta di esserne parte.

   L'altezza NON cambia, ed e' una scelta, non una rinuncia. Rimpicciolire la
   testata allo scorrimento significa animarne il padding, e una testata sticky
   e' in flusso: ogni fotogramma della transizione rifluisce tutto il documento
   sotto, per 380ms, mentre l'utente sta scorrendo — il momento peggiore in cui
   chiedere al browser di rifare il layout. In piu' il contenuto scivola sotto
   il dito. Qui cambia solo cio' che il compositore sa gestire da solo: fondo,
   bordo, ombra. La condensazione si legge lo stesso, e si legge come materiale
   invece che come misura. */

/* Testata raccolta: quando la pagina scorre il marchio scende al 78% e il
   respiro sopra e sotto si dimezza — ma nell'impaginazione non cambia niente.
   La scatola della testata resta sempre alta quanto da ferma; a raccogliersi
   e' solo quello che si vede, e solo con trasformazioni:
     - il fondo (vetro, filo, ombra) e' un ::before che sale di --raccolta;
     - la riga sale di meta', cosi' resta centrata nel fondo piu' basso;
     - il marchio si riduce con `scale`, ancorato a sinistra.
   Prima si animavano altezza del marchio, padding e un margine di compenso:
   a ogni fotogramma il browser rifaceva il layout dell'intero documento,
   proprio mentre l'utente scorreva.

   La parte bassa della scatola, rimasta vuota, non deve rubare i clic al
   contenuto che ci passa sotto: la testata non riceve il puntatore, lo
   ricevono la riga e il fondo, che seguono la loro posizione visibile. */

.masthead {
  --logo-h: clamp(3.6rem, 2.9rem + 2.4vw, 5rem);
  --logo-ridotto: 0.78;
  --pad-testata: var(--step-1);
  --raccolta: calc(var(--logo-h) * (1 - var(--logo-ridotto)) + var(--pad-testata));

  position: sticky;
  top: 0;
  z-index: 40;
  padding-block: var(--pad-testata);
  pointer-events: none;
}

.masthead::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: auto;
  background: oklch(from var(--canvas) l c h / 0.40);
  /* Meno fondo, piu' vetro: abbassando l'opacita' la sfocatura sale, altrimenti
     le voci del menu finiscono a leggersi sopra le fotografie del catalogo. */
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
          backdrop-filter: blur(24px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: background-color var(--t-move) var(--ease-press),
              border-color var(--t-move) var(--ease-press),
              box-shadow var(--t-move) var(--ease-press),
              translate var(--t-move) var(--ease-press);
}

/* La sfocatura qui sopra oggi non si vede: `view-transition-name: testata` fa
   della testata la radice dello sfondo, quindi il vetro sfoca solo se stesso e
   il testo che scorre sotto restava nitido, leggibile dietro logo e menu. Finche'
   il nome resta (serve a tenerla ferma fra una pagina e l'altra) il fondo deve
   coprire da solo, e pieno: anche a 0.97 un titolo grande in Vollkorn si legge
   attraverso. */
.masthead[data-scorso="true"]::before {
  background: var(--canvas);
  border-bottom-color: var(--border-subtle);
  box-shadow: var(--shadow-near);
  translate: 0 calc(var(--raccolta) * -1);
}

/* Senza vetro sfocato il testo del menu passerebbe sopra le fotografie: qui il
   fondo torna pieno. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .masthead::before { background: var(--canvas); border-bottom-color: var(--border-subtle); }
}

/* A salire sono i figli della riga, non la riga: una riga trasformata
   diventerebbe il riferimento di posizione del pannello del telefono, che si
   stringerebbe alla sua larghezza e finirebbe sotto il velo. Per la stessa
   ragione la riga non prende il puntatore — il suo rettangolo resta dov'era,
   sotto il fondo raccolto — e lo prendono i figli, che sono dove si vedono. */
.masthead__row {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, var(--step-1));
}

.masthead__brand,
.masthead__tools,
.masthead .nav {
  pointer-events: auto;
  transition: translate var(--t-move) var(--ease-press);
}

.masthead[data-scorso="true"] :is(.masthead__brand, .masthead__tools, .nav) {
  translate: 0 calc(var(--raccolta) / -2);
}

.masthead__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  margin-inline-end: auto;
}

/* L'altezza del marchio e' fissa: e' lei a dettare quella della testata, e non
   si anima mai. La riduzione allo scorrimento passa da `scale` (vedi sopra). */
.masthead__brand img {
  width: auto;
  /* +30% sul marchio: chiesto esplicitamente. L'altezza della testata la detta
     lui, quindi la fascia cresce di conseguenza. */
  height: var(--logo-h);
  transform-origin: left center;
  transition: scale var(--t-move) var(--ease-press);
  /* 15 ottobre 2026: il cliente lo vuole ancora piu' grande. Il minimo da
     3.6rem lascia al marchio 142px di larghezza a 360px, dove accanto ci sono
     solo carrello, account e menu (la ricerca li' e' nascosta). */
}

.masthead[data-scorso="true"] .masthead__brand img { scale: var(--logo-ridotto); }

@media (prefers-reduced-motion: reduce) {
  .masthead::before,
  .masthead__brand,
  .masthead__tools,
  .masthead__brand img { transition: none; }
}

/* --- Strumenti: ricerca e carrello --------------------------------------- */

.masthead__tools { position: relative; display: flex; align-items: center; gap: 0.25rem; }

.tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  position: relative;
  min-width: 2.75rem;
  height: 2.75rem;
  padding-inline: 0.55rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-state) var(--ease-press),
              border-color var(--t-state) var(--ease-press),
              color var(--t-state) var(--ease-press);
}

.tool:hover { background: var(--honey-wash); color: var(--honey-deep); border-color: var(--border-subtle); }
.tool:active { transform: translateY(1px); }

.tool svg { width: 1.35rem; height: 1.35rem; stroke: currentColor; fill: none; stroke-width: 1.5; }

/* Selettore di lingua: due sigle, quella corrente in evidenza. Compare solo
   dove la pagina esiste anche nell'altra lingua. */
.lingue { display: inline-flex; align-items: center; gap: 0.15rem; margin-inline-end: 0.25rem; }
.lingue a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.lingue a:hover { background: var(--honey-wash); color: var(--honey-deep); }
.lingue a[aria-current] { color: var(--text); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.35em; text-decoration-color: var(--honey); }

/* Il conteggio del carrello: pastiglia in ambra, agganciata all'icona. Sparisce
   quando il carrello e' vuoto, invece di mostrare uno zero che non serve. */
.tool__conto {
  position: absolute;
  inset-block-start: 0.3rem;
  inset-inline-end: 0.15rem;
  min-width: 1.15rem;
  height: 1.15rem;
  padding-inline: 0.28rem;
  display: grid;
  place-items: center;
  border-radius: 1rem;
  background: var(--honey);
  color: oklch(24% 0.04 58);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--canvas);
}

.tool__conto:empty,
.tool__conto[hidden] { display: none; }

/* Il conteggio cambia per un'azione dell'utente: deve battere, o non ci si
   accorge che il gesto ha avuto effetto. */
@media (prefers-reduced-motion: no-preference) {
  .tool__conto { animation: batte 420ms var(--ease-strike); }
}

@keyframes batte {
  0%   { transform: scale(0.4); opacity: 0; }
  55%  { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* --- Ricerca a scomparsa -------------------------------------------------- */
/* Il campo non occupa la testata quando nessuno cerca. Si scopre da destra, e
   la sua larghezza non cambia mai: e' fuori dal flusso, sempre delle stesse
   dimensioni, e viene ritagliato da un `clip-path` che si apre.
 *
 * Il primo tentativo animava `width` da 0. Funzionava, ma per tutta la durata
 * spostava le voci del menu accanto, un fotogramma per volta, e su finestre
 * medie le schiacciava. `clip-path` e `translate` li gestisce il compositore:
 * niente layout, e il menu non si muove di un pixel. */

.ricerca-rapida {
  position: absolute;
  inset-inline-end: 100%;
  inset-block-start: 50%;
  margin-inline-end: 0.35rem;
  width: clamp(9rem, 22vw, 15rem);
  display: flex;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  translate: 0.75rem -50%;
  clip-path: inset(0 0 0 100% round var(--radius));
  transition: clip-path var(--t-move) var(--ease-press),
              translate var(--t-move) var(--ease-press),
              opacity var(--t-state) linear;
}

.ricerca-rapida[data-aperta="true"] {
  opacity: 1;
  pointer-events: auto;
  translate: 0 -50%;
  clip-path: inset(0 0 0 0 round var(--radius));
  box-shadow: var(--shadow-far);
}

/* Aprendosi il campo scavalca l'ultima voce del menu. Invece di stringerlo
   finche' non tocca piu' niente — cosa che lo renderebbe inutilizzabile — il
   menu si tira indietro: mentre si cerca non e' lui che serve. Torna com'era
   alla chiusura, e resta cliccabile per tutto il tempo. */
.masthead:has(.ricerca-rapida[data-aperta="true"]) .nav {
  opacity: 0.3;
  transition: opacity var(--t-move) var(--ease-press);
}

.masthead .nav { transition: opacity var(--t-move) var(--ease-press), translate var(--t-move) var(--ease-press); }

/* Sotto le 60rem l'icona della ricerca non c'e': il campo non deve nemmeno
   restare in giro invisibile sopra il menu. */
@media (max-width: 60rem) {
  .ricerca-rapida { display: none; }
}

.ricerca-rapida input[type="search"] {
  font: inherit;
  font-size: 0.9rem;
  width: 100%;
  min-width: 0;
  padding: 0.6rem 0.75rem;
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.ricerca-rapida input:focus-visible { border-color: var(--honey-deep); }

/* Il lettering del marchio e' nero: al buio serve la variante chiara. Sono due
   file distinti e non un filtro CSS, perche' invert() virava l'ape dal bronzo
   al blu. Il bronzo resta identico in entrambe. */
.masthead__brand .logo-chiaro { display: none; }

[data-tema="scuro"] .masthead__brand .logo-scuro { display: none; }
[data-tema="scuro"] .masthead__brand .logo-chiaro { display: block; }

.nav { display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 1.8rem); }
.nav ul { display: flex; gap: clamp(0.9rem, 2vw, 1.8rem); list-style: none; margin: 0; padding: 0; }

/* Il filetto sotto la voce non compare: si traccia, da sinistra a destra, come
   un segno tirato a mano. Un border-bottom che si accende di colpo e' l'unica
   cosa che questa testata faceva prima, e si vedeva. */
.nav a {
  position: relative;
  display: block;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  padding-block: 0.4rem;
  transition: color var(--t-state) var(--ease-press);
}

.nav a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 1.5px;
  background: var(--honey);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-move) var(--ease-press);
}

.nav a:hover { color: var(--honey-deep); }
.nav a:hover::after,
.nav .current-menu-item > a::after,
.nav .current_page_parent > a::after,
.nav .current-menu-ancestor > a::after { transform: scaleX(1); }

.nav .current-menu-item > a { color: var(--honey-deep); }

/* --- Sottomenu del negozio -------------------------------------------------
   Sotto "Negozio" ci sono le categorie. La voce principale resta un link e
   porta a tutto il catalogo; accanto, artemide.js aggiunge un bottone vero
   (.nav__apri) che apre e chiude il pannello. Serve a due persone che prima
   restavano fuori: chi usa la tastiera, che con il solo focus-within apriva il
   pannello senza saperlo, e chi ha un tablet largo, dove l'hover non esiste e
   toccare "Negozio" portava via dalla pagina senza mai mostrare le categorie.

   Il mouse continua ad aprirlo passando sopra, ma solo dove un mouse c'e'
   davvero (hover: hover). Senza JS vale ancora focus-within. */

.nav .menu-item-has-children { position: relative; }

.nav .menu-item-has-children > a {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Chevron: due bordi ruotati, nel colore della voce. Senza JS sta sul link;
   con JS si sposta sul bottone, che e' la cosa che apre davvero. */
.nav .menu-item-has-children > a::before,
.nav__apri::before {
  content: "";
  order: 2;
  width: 0.4rem;
  height: 0.4rem;
  margin-top: -0.2rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--t-move) var(--ease-press);
}

.js-sottomenu .menu-item-has-children > a::before { content: none; }

.js-sottomenu .menu-item-has-children { display: flex; align-items: center; gap: 0.1rem; }

.nav__apri {
  display: inline-grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  margin: 0 -0.5rem 0 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background-color var(--t-state) var(--ease-press), color var(--t-state) var(--ease-press);
}

.nav__apri:hover { background: var(--honey-wash); color: var(--honey-deep); }

@media (pointer: coarse) {
  .nav__apri { width: 2.75rem; height: 2.75rem; margin-inline-end: -0.9rem; }
}

/* Il pannello. Si apre come una tendina che scende dalla voce — clip-path,
   quindi niente layout — mentre un filo di miele si traccia sul suo bordo
   alto. I margini negativi del clip lasciano respirare l'ombra, che un
   inset(0) taglierebbe via. Chiude piu' in fretta di come apre, e con un
   attimo di ritardo: il mouse che scivola in diagonale verso una voce non deve
   vederselo sparire sotto. */
.nav .sub-menu {
  position: absolute;
  inset-inline-start: -0.9rem;
  top: 100%;
  z-index: 50;
  min-width: 17rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin: 0.35rem 0 0;
  padding: 0.5rem;
  list-style: none;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.55), var(--shadow-far);
  opacity: 0;
  visibility: hidden;
  clip-path: inset(0 -2rem 100% -2rem round var(--radius));
  translate: 0 -0.5rem;
  transition: opacity 160ms linear 120ms,
              clip-path 200ms ease-in 120ms,
              translate 200ms ease-in 120ms,
              visibility 0s linear 320ms;
}

/* Il ponte: copre lo stacco fra la voce e il pannello, cosi' il passaggio del
   mouse non si interrompe a meta' strada. */
.nav .sub-menu::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 100%;
  height: 0.5rem;
}

.nav .sub-menu::before {
  content: "";
  position: absolute;
  inset-inline: 0.5rem;
  top: -1px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--honey), var(--gold));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 160ms ease-in;
}

/* Aperture del pannello sospeso: solo a larghezza da scrivania. Sotto, lo
   stesso sottomenu diventa una fisarmonica dentro il pannello del telefono. */
@media (min-width: 60.0625rem) {
  /* Il bottone tattile e' piu' alto delle voci: senza centratura "Negozio"
     scendeva di qualche pixel rispetto alle altre. */
  .nav > ul { align-items: center; }

  @media (hover: hover) {
    .nav .menu-item-has-children:hover > .sub-menu {
      opacity: 1;
      visibility: visible;
      clip-path: inset(-1rem -2rem -3rem -2rem round var(--radius));
      translate: none;
      transition: opacity var(--t-tap) linear,
                  clip-path var(--t-move) var(--ease-press),
                  translate var(--t-move) var(--ease-press),
                  visibility 0s;
    }

    .nav .menu-item-has-children:hover > .sub-menu::before {
      transform: none;
      transition: transform 520ms var(--ease-press) 120ms;
    }

    .nav .menu-item-has-children:hover > a::before,
    .nav .menu-item-has-children:hover > .nav__apri::before { transform: rotate(225deg); }
  }

  .nav:not(.js-sottomenu) .menu-item-has-children:focus-within > .sub-menu,
  .nav .menu-item-has-children[data-aperto="true"] > .sub-menu {
    opacity: 1;
    visibility: visible;
    clip-path: inset(-1rem -2rem -3rem -2rem round var(--radius));
    translate: none;
    transition: opacity var(--t-tap) linear,
                clip-path var(--t-move) var(--ease-press),
                translate var(--t-move) var(--ease-press),
                visibility 0s;
  }

  .nav:not(.js-sottomenu) .menu-item-has-children:focus-within > .sub-menu::before,
  .nav .menu-item-has-children[data-aperto="true"] > .sub-menu::before {
    transform: none;
    transition: transform 520ms var(--ease-press) 120ms;
  }

  .nav:not(.js-sottomenu) .menu-item-has-children:focus-within > a::before { transform: rotate(225deg); }

  /* Le voci arrivano in fila dietro la tendina, non insieme a lei. Riparte a
     ogni apertura, perche' l'animazione si aggancia allo stato aperto. */
  @media (prefers-reduced-motion: no-preference) and (hover: hover) {
    .nav .menu-item-has-children:hover > .sub-menu > li {
      animation: voce-scende 420ms var(--ease-press) both;
      animation-delay: calc(60ms + var(--n, 0) * 35ms);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .nav:not(.js-sottomenu) .menu-item-has-children:focus-within > .sub-menu > li {
      animation: voce-scende 420ms var(--ease-press) both;
      animation-delay: calc(60ms + var(--n, 0) * 35ms);
    }
  }
}

/* Movimento ridotto: le tendine non scendono, compaiono. Resta la dissolvenza,
   che dice comunque che qualcosa si e' aperto. */
@media (prefers-reduced-motion: reduce) {
  .nav .sub-menu,
  .nav .sub-menu::before,
  .nav,
  .nav[data-open="true"],
  .js-sottomenu .menu-item-has-children {
    clip-path: none !important;
    translate: none !important;
    transform: none !important;
  }
}

/* Il bottone gira la freccia a qualunque larghezza, e la fisarmonica del
   telefono usa la stessa cascata del pannello. */
.nav .menu-item-has-children[data-aperto="true"] > .nav__apri::before { transform: rotate(225deg); }

@media (prefers-reduced-motion: no-preference) {
  .nav .menu-item-has-children[data-aperto="true"] > .sub-menu > li {
    animation: voce-scende 420ms var(--ease-press) both;
    animation-delay: calc(60ms + var(--n, 0) * 35ms);
  }
}

.nav .sub-menu > li:nth-child(2) { --n: 1; }
.nav .sub-menu > li:nth-child(3) { --n: 2; }
.nav .sub-menu > li:nth-child(4) { --n: 3; }
.nav .sub-menu > li:nth-child(5) { --n: 4; }
.nav .sub-menu > li:nth-child(n+6) { --n: 5; }

@keyframes voce-scende {
  from { opacity: 0; translate: 0 -0.45rem; }
  to   { opacity: 1; translate: none; }
}

.nav .sub-menu a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.62rem 0.75rem;
  border-radius: var(--radius);
  white-space: nowrap;
  transition: background-color var(--t-state) var(--ease-press), color var(--t-state) var(--ease-press);
}

/* La cella del favo davanti a ogni categoria: la stessa della targa delle
   schede. Al passaggio ruota di 30 gradi — da punta in alto a lato in alto,
   come si gira un favo per guardarlo — e si riempie di miele. */
.nav .sub-menu a::after {
  content: "";
  position: static;
  order: -1;
  flex: none;
  width: 0.62rem;
  height: 0.7rem;
  background: var(--comb);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transform: none;
  transition: background-color var(--t-state) var(--ease-press), rotate var(--t-move) var(--ease-press);
}

.nav .sub-menu a:hover,
.nav .sub-menu a:focus-visible,
.nav .sub-menu .current-menu-item > a { background: var(--honey-wash); color: var(--honey-deep); }

.nav .sub-menu a:hover::after,
.nav .sub-menu a:focus-visible::after,
.nav .sub-menu .current-menu-item > a::after { background: var(--honey); rotate: 30deg; }

.nav__nome { flex: 1; }

.nav__conto {
  min-width: 1.6rem;
  padding: 0.1rem 0.45rem;
  border-radius: 1rem;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  line-height: 1.5;
  transition: background-color var(--t-state) var(--ease-press), border-color var(--t-state) var(--ease-press);
}

.nav .sub-menu a:hover .nav__conto,
.nav .sub-menu a:focus-visible .nav__conto { background: var(--surface-raised); border-color: var(--comb); }

.nav-toggle { display: none; }

/* --- Testata stretta ------------------------------------------------------ */

@media (max-width: 60rem) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    height: 2.75rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: 0.5rem;
    font: inherit;
    color: var(--text);
    cursor: pointer;
  }

  .nav-toggle:hover { background: var(--honey-wash); color: var(--honey-deep); }

  .nav-toggle svg { width: 1.4rem; height: 1.4rem; stroke: currentColor; stroke-width: 1.6; fill: none; }

  /* Le tre aste diventano una croce ruotando su se stesse: la stessa quantita'
     di segno, riorganizzata. Nessun glifo, nessuna entita' tipografica. */
  .nav-toggle svg line {
    transition: transform var(--t-move) var(--ease-press), opacity var(--t-tap) linear;
    transform-origin: center;
  }

  .nav-toggle[aria-expanded="true"] svg line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] svg line:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
  .nav-toggle[aria-expanded="true"] svg line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* Il pannello scende come una tendina dal bordo della testata: clip-path,
     quindi il compositore fa tutto e la pagina sotto non si muove. Dietro, un
     velo di propoli scurisce la pagina (.masthead::after): dice che il resto
     e' sospeso, e toccarlo chiude il menu. */
  .nav {
    position: absolute;
    z-index: 1;
    inset-inline: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    background: var(--surface-raised);
    border-block: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-far);
    padding: var(--step-0) clamp(0.875rem, 4vw, 1.25rem) var(--step-1);
    max-height: calc(100dvh - var(--logo-h) - 2 * var(--pad-testata));
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    visibility: hidden;
    clip-path: inset(0 0 100% 0);
  }

  /* `.masthead .nav` e non `.nav`: piu' in alto c'e' gia' una transizione con
     questo selettore (la ricerca che attenua il menu), e da sola cancellava
     la tendina in chiusura. */
  .masthead .nav {
    transition: clip-path 240ms ease-in,
                visibility 0s linear 240ms,
                translate var(--t-move) var(--ease-press);
  }

  .masthead .nav[data-open="true"] {
    visibility: visible;
    clip-path: inset(0 0 -3rem 0);
    transition: clip-path 560ms var(--ease-press),
                visibility 0s,
                translate var(--t-move) var(--ease-press);
  }

  /* Testata raccolta: qui il pannello sta sotto la scatola della testata, non
     nella riga, quindi sale di tutta la raccolta per attaccarsi al fondo. */
  .masthead[data-scorso="true"] .nav { translate: 0 calc(var(--raccolta) * -1); }

  .masthead::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 100%;
    height: 100dvh;
    background: oklch(from var(--deep) l c h / 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-move) var(--ease-press);
  }

  .masthead[data-scorso="true"]::after { translate: 0 calc(var(--raccolta) * -1); }

  .masthead[data-menu="aperto"]::after { opacity: 1; pointer-events: auto; }

  .nav ul { flex-direction: column; gap: 0; }

  .nav li { border-bottom: 1px solid var(--border-subtle); }
  .nav li:last-child { border-bottom: 0; }

  /* Le voci principali con il carattere dei titoli: a tutta larghezza su un
     telefono sono l'indice della casa, non una lista di link. */
  .nav > ul > li > a {
    padding: 0.8rem 0;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.012em;
    line-height: 1.2;
  }

  .nav a::after { inset-block-end: -1px; height: 2px; }

  /* Senza JS il sottomenu e' sempre aperto, rientrato sotto la sua voce:
     nessun hover da indovinare con il dito. Con JS diventa una fisarmonica
     (sotto), perche' sei categorie sempre aperte spingevano "Blog" e
     "Contatti" fuori dallo schermo. */
  .nav .menu-item-has-children > a::before { display: none; }

  .nav .sub-menu {
    position: static;
    min-width: 0;
    margin: 0;
    padding: 0 0 0 0.25rem;
    background: transparent;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    clip-path: none;
    translate: none;
    transition: none;
  }

  .nav .sub-menu::before,
  .nav .sub-menu::after { content: none; }

  .nav .sub-menu li { border-bottom: 0; }
  .nav .sub-menu li:last-child { padding-bottom: 0.75rem; }

  .nav .sub-menu a {
    padding: 0.55rem 0.5rem;
    font-size: 1.02rem;
    color: var(--text-secondary);
    white-space: normal;
  }

  .nav .sub-menu a:hover,
  .nav .sub-menu .current-menu-item > a { background: var(--honey-wash); }

  /* La fisarmonica: la riga del sottomenu va da 0fr a 1fr. E' l'unico modo di
     animare "fino all'altezza del contenuto" senza misurarla in JS. */
  .js-sottomenu .menu-item-has-children {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 0fr;
    align-items: center;
    transition: grid-template-rows var(--t-move) var(--ease-press);
  }

  .js-sottomenu .menu-item-has-children[data-aperto="true"] { grid-template-rows: auto 1fr; }

  .js-sottomenu .menu-item-has-children > .sub-menu {
    grid-column: 1 / -1;
    min-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: visibility 0s linear var(--t-move);
  }

  .js-sottomenu .menu-item-has-children[data-aperto="true"] > .sub-menu {
    visibility: visible;
    transition: none;
  }

  .nav__apri {
    width: 2.75rem;
    height: 2.75rem;
    margin: 0;
    background: var(--surface);
  }

  .menu-item-has-children[data-aperto="true"] > .nav__apri { background: var(--honey-wash); color: var(--honey-deep); }

  .nav__apri::before { width: 0.55rem; height: 0.55rem; }

  /* Le voci entrano in fila dopo il pannello, non insieme a lui. */
  @media (prefers-reduced-motion: no-preference) {
    .nav[data-open="true"] > ul > li { animation: rivela var(--t-move) var(--ease-press) both; }
    .nav[data-open="true"] > ul > li:nth-child(1) { animation-delay: 90ms; }
    .nav[data-open="true"] > ul > li:nth-child(2) { animation-delay: 130ms; }
    .nav[data-open="true"] > ul > li:nth-child(3) { animation-delay: 170ms; }
    .nav[data-open="true"] > ul > li:nth-child(4) { animation-delay: 210ms; }
    .nav[data-open="true"] > ul > li:nth-child(5) { animation-delay: 250ms; }
    .nav[data-open="true"] > ul > li:nth-child(n+6) { animation-delay: 290ms; }
  }

  .masthead__tools .tool--cerca { display: none; }
}


/* --- Chiusura ------------------------------------------------------------ */
/* Non un blocco scuro piatto: il favo e la luce continuano anche qui, e il
   sigillo torna in piccolo a chiudere la pagina. */

.colophon {
  position: relative;
  overflow: clip;
  background: var(--deep);
  color: var(--deep-text);
  /* La striscia della soglia sta dentro la chiusura: si aggiunge al respiro
     sopra il contenuto e si toglie dal margine, cosi' la distanza fra la
     pagina e il contenuto della chiusura resta quella di prima. */
  padding-block: calc(var(--step-4) + var(--soglia-sopra, 0px)) var(--step-2);
  margin-top: calc(var(--step-5) - var(--soglia-sopra, 0px));
}

/* La chiusura e' sempre piu' alta che larga, anche su scrivania: qui la
   sfumatura verticale vale a ogni larghezza, non solo su telefono. */
.colophon .comb-field { --maschera: linear-gradient(to bottom, black 0%, black 72%, transparent 99%); }
.colophon .comb-field::before { opacity: 0.2; }
.colophon .comb-field::after { animation-duration: 46s; }

.colophon__inner { position: relative; z-index: 1; }

.colophon a { color: var(--gold); }

/* Il marchio di chiusura: sigillo a sinistra, dichiarazione di luogo accanto,
   separati dal resto da un filo di bronzo. */
.colophon__mark {
  display: flex;
  align-items: center;
  gap: var(--step-1);
  padding-bottom: var(--step-2);
  margin-bottom: var(--step-3);
  border-bottom: 1px solid oklch(from var(--bronze) l c h / 0.45);
}

.colophon__mark img {
  width: clamp(3.5rem, 7vw, 5.5rem);
  height: auto;
  flex: none;
  filter: drop-shadow(0 4px 10px oklch(8% 0.02 58 / 0.6));
}

.colophon__mark p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.5rem);
  line-height: 1.35;
  color: var(--gold);
  max-width: 26ch;
}

.colophon__grid {
  display: grid;
  gap: var(--step-2);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  align-items: start;
}

.colophon h2 {
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  margin-bottom: var(--step-0);
}

.colophon p { color: oklch(from var(--deep-text) l c h / 0.88); }

.colophon .struck { color: var(--comb); }

.colophon__legal {
  margin-top: var(--step-3);
  padding-top: var(--step-1);
  border-top: 1px solid oklch(from var(--deep-text) l c h / 0.18);
  font-size: 0.85rem;
  color: oklch(from var(--deep-text) l c h / 0.72);
  display: flex; flex-wrap: wrap; gap: var(--step-1); justify-content: space-between;
}

.colophon address { font-style: normal; }

.colophon__menu { display: flex; flex-wrap: wrap; gap: var(--step-1); list-style: none; margin: 0; padding: 0; }

@media (max-width: 40rem) {
  .colophon__mark { flex-direction: column; align-items: start; text-align: start; }
}

/* --- Pagine interne ------------------------------------------------------ */

/* Fascia del titolo: porta il favo e la luce anche fuori dalla home, cosi' il
   mondo non si ferma al primo schermo. */
.page-band {
  position: relative;
  overflow: clip;
  padding-block: var(--step-4) var(--step-3);
  background:
    radial-gradient(80% 70% at 72% 10%, oklch(from var(--honey-wash) l c h / 0.7) 0%, transparent 60%),
    var(--canvas);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--step-3);
}

.page-band > .shell { position: relative; z-index: 1; }
.page-band__nota { margin: var(--step-0) 0 0; color: var(--text-secondary); max-width: 56ch; }
.page-band .page-title { margin-bottom: 0; }

/* Titolo e filtri sulla stessa riga: il titolo a sinistra, le categorie a destra
   e allineate al piede del titolo. Dove non c'e' posto vanno a capo sotto. */
.page-band__riga {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--step-1) var(--step-3);
}

.filtri-blog ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Le categorie sono link, non un modulo: la voce attiva usa il badge del sito
   (fondo di miele tenue, testo miele scuro), le altre restano discrete. */
.filtri-blog a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.35rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: 2rem;
  color: var(--text-secondary);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--t-state) var(--ease-press), border-color var(--t-state) var(--ease-press), color var(--t-state) var(--ease-press);
}

.filtri-blog a:hover { background: var(--surface-raised); border-color: var(--comb); color: var(--text); }

.filtri-blog a[aria-current="page"] {
  background: var(--honey-wash);
  border-color: var(--comb);
  color: var(--honey-deep);
  font-weight: 600;
}

.stack-page { padding-block: 0 var(--step-4); }

.page-title {
  font-size: clamp(2.25rem, 1.6rem + 2.8vw, 4rem);
  margin-bottom: var(--step-2);
  max-width: 20ch;
}

.stack-page > .struck { margin-bottom: var(--step-0); }

.post-hero {
  margin: 0 0 var(--step-2);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-near);
}

/* Foto quadrata o verticale: non a tutta larghezza, o spinge il testo fuori dal primo schermo. */
.post-hero--quadrata { max-width: 36rem; margin-inline: auto; }
.post-hero--verticale { max-width: 24rem; margin-inline: auto; }
.post-hero img { display: block; width: 100%; height: auto; }

/* Il corpo redazionale: 19 articoli importati dal vecchio sito, con markup
   ripulito ma non normalizzato. Le regole qui devono reggere HTML arbitrario. */
.prose { max-width: var(--measure-lungo); }

.prose > * + * { margin-top: var(--step-0); }
.prose h2 { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem); margin-top: var(--step-2); }
.prose h3 { margin-top: var(--step-1); }
.prose h2 + *, .prose h3 + * { margin-top: 0.6rem; }

.prose img {
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
  margin-block: var(--step-1);
}

.prose ul, .prose ol { padding-inline-start: 1.35rem; }
.prose li + li { margin-top: 0.35rem; }

.prose blockquote {
  margin: var(--step-1) 0;
  padding: var(--step-0) var(--step-1);
  background: var(--honey-wash);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.45;
}

.prose blockquote p:last-child { margin-bottom: 0; }

.prose table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.prose th, .prose td { text-align: start; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--border-subtle); }
.prose th { font-family: var(--font-ui); font-weight: 600; }

/* Le tabelle ereditate possono essere piu' larghe della colonna di lettura:
   scorrono dentro il proprio contenitore invece di allargare la pagina. */
.prose > table { display: block; overflow-x: auto; }

/* --- Paginazione --------------------------------------------------------- */

.pagination {
  margin-top: var(--step-3);
  padding-top: var(--step-1);
  border-top: 1px solid var(--border-subtle);
}

.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.6rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
}

.pagination .page-numbers:hover { border-color: var(--honey-deep); color: var(--honey-deep); }

.pagination .page-numbers.current {
  background: var(--honey);
  border-color: var(--honey);
  color: oklch(24% 0.04 58);
  font-weight: 600;
}

/* --- Fotografie di pagina ------------------------------------------------ */

.page-hero {
  margin: 0 auto var(--step-3);
}

/* Le fotografie del vecchio sito sono orizzontali e il soggetto sta al centro:
   un ritaglio troppo basso taglia il barattolo. */


.page-hero img {
  width: 100%;
  height: clamp(18rem, 52vh, 34rem);
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-far);
}

.page-hero figcaption,
.photo-strip figcaption {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  max-width: 60ch;
}

.photo-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--step-2);
  margin-block: var(--step-3);
}

.photo-strip figure { margin: 0; }

.photo-strip img {
  width: 100%;
  height: clamp(14rem, 32vh, 22rem);
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-near);
}

/* --- Diario: elenco articoli --------------------------------------------- */
/* Il primo articolo prende tutta la riga. Diciannove voci in griglia piatta
   sembrano tutte ugualmente vecchie; una gerarchia dice da dove cominciare. */

.diario {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: var(--step-3) var(--step-2);
}

.voce { display: grid; gap: 0.7rem; align-content: start; }

.voce__foto {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
  background: var(--surface);
}

.voce__foto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 400ms var(--ease-press);
}

.voce:hover .voce__foto img { transform: scale(1.04); }

.voce__meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  font-stretch: 108%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bronze);
}

.voce__tag { color: var(--text-muted); font-weight: 500; letter-spacing: 0.08em; }

.voce__titolo { font-size: 1.25rem; line-height: 1.2; margin: 0; }
.voce__titolo a { color: inherit; text-decoration: none; }
.voce__titolo a:hover { color: var(--honey-deep); }

/* L'apertura: due colonne, foto a sinistra, con un filo sotto che la stacca
   dalle voci normali. */
.voce--apertura {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--step-2);
  align-items: center;
  padding-bottom: var(--step-3);
  border-bottom: 1px solid var(--border-subtle);
}

.voce--apertura .voce__foto img { aspect-ratio: var(--rapporto, 1.6); }

/* L'apertura si adatta alla foto in evidenza: quadrata o verticale, la foto
   conserva la sua forma e cede spazio al testo invece di essere ritagliata. */
.voce--apertura.voce--quadrata { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.voce--apertura.voce--verticale { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }

.voce--apertura .voce__titolo {
  font-size: clamp(1.7rem, 1.25rem + 1.8vw, 2.6rem);
  margin-block: 0.2rem 0.6rem;
}

.voce--apertura .voce__sommario {
  color: var(--text-secondary);
  font-size: 1.05rem;
  margin-bottom: 0.6rem;
}

.voce--apertura .voce__vai a { font-weight: 600; }

@media (max-width: 46rem) {
  .voce--apertura,
  .voce--apertura.voce--quadrata,
  .voce--apertura.voce--verticale { grid-template-columns: 1fr; }

  /* Una foto verticale a tutta larghezza riempirebbe lo schermo: la si tiene stretta e centrata. */
  .voce--apertura.voce--verticale .voce__foto { max-width: 20rem; margin-inline: auto; }
}

/* --- Riconoscimenti ------------------------------------------------------ */
/* Serve sia alla home sia a "chi siamo": sta qui, non nel foglio della home. */

.awards { padding-block: var(--step-5); }

.awards__list {
  list-style: none;
  margin: var(--step-3) 0 0;
  padding: 0;
  border-top: 1px solid var(--border-subtle);
}

.awards__list li {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto;
  gap: var(--step-1);
  align-items: baseline;
  padding-block: var(--step-1);
  border-bottom: 1px solid var(--border-subtle);
}

.awards__year {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--honey-deep);
  letter-spacing: -0.02em;
}

.awards__what { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; }

.awards__drops {
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
}

.awards__drops i {
  width: 0.75rem;
  height: 0.95rem;
  display: block;
  background: var(--gold);
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  clip-path: polygon(50% 0%, 88% 42%, 100% 72%, 76% 100%, 24% 100%, 0% 72%, 12% 42%);
  box-shadow: var(--shadow-near);
}

@media (max-width: 44rem) {
  .awards__list li { grid-template-columns: 4rem 1fr; }
  .awards__drops { grid-column: 2; }
}


/* --- Registro battuto ---------------------------------------------------- */
/* Usato dall'apertura della home e dai recapiti: sta qui, non nel foglio
   della home, altrimenti sulle pagine interne resta una lista nuda. */
/* Il registro inciso: una riga battuta per fatto, etichetta a sinistra e
   dichiarazione a destra. Impilato in colonne diventava la barra di metriche
   che il craft floor rifiuta, con un occhiello sopra ogni numero.
   Il registro e' sempre un <dl>: `register` e' anche la classe del modulo
   di registrazione di WooCommerce, e senza `dl` le righe del modulo
   diventavano righe del registro (testo privacy in una colonna da 8rem). */
dl.register {
  border-top: 1px solid var(--border);
  margin-bottom: var(--step-1);
}

dl.register > div {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: var(--step-0);
  align-items: baseline;
  padding-block: 0.6rem;
  border-bottom: 1px solid var(--border-subtle);
}

.register dt {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  font-stretch: 108%;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--bronze);
  margin: 0;
}

.register dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

/* La glossa sta sulla stessa riga della dichiarazione, non sotto. */
.register dd span {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-secondary);
}

.register dd span::before {
  content: " — ";
  color: var(--border);
}

@media (max-width: 30rem) {
  dl.register > div { grid-template-columns: 1fr; gap: 0.15rem; }
  .register dd span { display: block; }
  .register dd span::before { content: none; }
}


/* Nei recapiti ogni voce va a capo: sono indirizzi e numeri, non glosse. */
.contatti .register dd span { display: block; font-size: 1rem; }
.contatti .register dd span::before { content: none; }
.contatti dl.register > div { grid-template-columns: 7rem 1fr; }

/* Area cliente nella testata: chi e' dentro lo vede dal colore, non da una
   scritta in piu'. */
.tool--utente.is-dentro { color: var(--honey-deep); }
.tool--utente.is-dentro:hover { background: var(--honey-wash); }

/* Bersagli di tocco ------------------------------------------------------- *
 * Sul telefono i link a riga singola del pie' di pagina e dei recapiti erano
 * alti 15-25px. L'area cresce con il padding: il carattere non cambia.
 */
@media (pointer: coarse) {
  .colophon :is(li, address, p, .colophon__legal) > a,
  .vetrina__vai a, .voce__vai a,
  main dd a { display: inline-block; padding-block: 0.7rem; }
  .colophon__menu { gap: 0 var(--step-1); }
  .pagination .page-numbers { min-width: 2.75rem; min-height: 2.75rem; }
}