/*
Theme Name: LolloTCG Playmat
Theme URI: https://lollotcg.com
Author: LolloTCG
Author URI: https://lollotcg.com
Description: Tema WooCommerce su misura per LolloTCG — playmat in vera pelle, stampati e rifiniti in Italia. Nero carbone, foil oro, luce radente: l'interfaccia si comporta come la pelle sotto la luce.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lolloplaymat
Domain Path: /languages
Tags: e-commerce, custom-logo, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   INDICE
   01  Token di design
   02  Font (self-hosted, subset latin)
   03  Reset e base
   04  Utilità: contenitore, sr-only, skip-link, focus
   05  Punzone (bottoni, anche WooCommerce)
   06  Header
   07  Navigazione primaria
   08  Selettore lingua
   09  Footer
   10  Hero e pressa a caldo
   11  Banda valori (marchi a secco)
   12  Processo (Custom Leather Playmat)
   13  Collezione
   14  Cornice pelle e rivela
   15  Moduli (campi, etichette, select2)
   16  Pagine interne (page, single, commenti, 404, archivi)
   17  WooCommerce (archivio, scheda, carrello, checkout, account)
   18  Movimento ridotto
   ========================================================================== */

/* --------------------------------------------------------------------------
   01 Token di design
   Palette campionata dalla foto hero e dal logo. La luce del sito è una
   sola: calda, in alto a sinistra, come nella fotografia.

   Il rilievo è un sistema, non un effetto: ogni elemento della UI è
   INCASSATO nella pelle (i campi che riempi, i punzoni che premi) oppure
   POSATO sopra (card, pannelli, avvisi). Gli incassi fanno ombra verso la
   luce; ciò che è posato prende luce sul bordo alto e getta un'ombra
   corta in basso a destra. Il testo resta piatto.
   -------------------------------------------------------------------------- */
:root {
  /* Colori */
  --carbone:     #131110; /* fondo pagina: nero caldo, sottotono bruno */
  --antracite:   #201c19; /* superfici in rilievo: header, card, pannelli */
  --osso:        #ede6da; /* testo principale */
  --scamosciato: #b3a894; /* testo secondario: il retro del playmat */
  --oro-foil:    #d9b45b; /* unico accento; sempre piatto, mai in gradiente */
  --petrolio:    #1e2b27; /* tinta materica: la pelle del playmat in foto */
  --errore:      #c96a55; /* funzionale, solo per errori di modulo (4.5:1 su antracite) */

  /* Luce globale (sorgente calda in alto a sinistra) */
  --rialzo:  rgba(237, 230, 218, 0.07); /* faccia colpita dalla luce */
  --incavo:  rgba(0, 0, 0, 0.6);        /* faccia in ombra */
  --filetto: rgba(217, 180, 91, 0.35);  /* tinta ai bordi, come in pelletteria */

  /* Rilievo: due livelli, stessa luce ovunque */
  --incasso: inset 1px 1px 3px var(--incavo), inset -1px -1px 0 rgba(237, 230, 218, 0.05);
  --posato:  inset 0 1px 0 rgba(237, 230, 218, 0.08), inset 1px 0 0 rgba(237, 230, 218, 0.03), 2px 3px 8px rgba(0, 0, 0, 0.38);

  /* Grana: rumore SVG inline, dosato — solo banda valori e footer */
  --grana: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");

  /* Font */
  --font-display:   'Fraunces', Georgia, 'Times New Roman', serif;
  --font-corpo:     'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-etichetta: 'IBM Plex Mono', Consolas, 'Courier New', monospace;

  /* Scala tipografica */
  --testo-display: clamp(2.75rem, 1.5rem + 5.5vw, 5.5rem);
  --testo-xl:      clamp(1.75rem, 1.3rem + 1.9vw, 2.5rem);
  --testo-l:       clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --testo-m:       1.0625rem;
  --testo-s:       0.9375rem;
  --testo-xs:      0.75rem;
  --tracking-etichetta: 0.14em;

  /* Spazio e misure */
  --sezione:     clamp(4rem, 8vw, 7.5rem);
  --contenitore: 72rem;
  --gronda:      clamp(1.25rem, 4vw, 2.5rem); /* margine laterale */
  --raggio:      4px; /* spigoli netti: la pelletteria taglia dritto */
}

/* --------------------------------------------------------------------------
   02 Font
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('assets/fonts/fraunces-var-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('assets/fonts/archivo-var-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   03 Reset e base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--carbone);
  color: var(--osso);
  font-family: var(--font-corpo);
  font-size: var(--testo-m);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 640;
  font-optical-sizing: auto;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--osso);
  margin: 0 0 0.6em;
  /* impressione a secco statica: ombra verso la luce, rialzo opposto */
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.7), 1px 1px 1px var(--rialzo);
}

h1 { font-size: var(--testo-xl); }
h2 { font-size: var(--testo-xl); }
h3 { font-size: var(--testo-l); }
h4, h5, h6 { font-size: var(--testo-m); font-family: var(--font-corpo); font-weight: 600; text-shadow: none; }

p { margin: 0 0 1em; }

a {
  color: var(--oro-foil);
  text-decoration: underline;
  text-decoration-color: var(--filetto);
  text-underline-offset: 3px;
}
a:hover { text-decoration-color: var(--oro-foil); }

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

::selection { background: var(--oro-foil); color: var(--carbone); }

/* Etichetta mono: il registro della scheda tecnica di bottega */
.etichetta {
  font-family: var(--font-etichetta);
  font-size: var(--testo-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-etichetta);
  text-transform: uppercase;
  color: var(--scamosciato);
}

/* --------------------------------------------------------------------------
   04 Utilità
   -------------------------------------------------------------------------- */
.contenitore {
  max-width: var(--contenitore);
  margin-inline: auto;
  padding-inline: var(--gronda);
}

.sr-only {
  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(--gronda); top: -100%;
  z-index: 100;
  padding: 0.6em 1em;
  background: var(--antracite);
  color: var(--oro-foil);
  font-family: var(--font-etichetta);
  font-size: var(--testo-s);
  text-decoration: none;
  border: 1px solid var(--filetto);
  border-radius: var(--raggio);
}
.skip-link:focus { top: 0.5rem; }

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

/* --------------------------------------------------------------------------
   05 Punzone
   Il bottone è un marchio impresso: placca incassata a secco, testo foil.
   In hover un solo passaggio di luce radente — il foil è piatto finché
   la luce non lo prende. Vale anche per tutti i bottoni WooCommerce.
   (Gli <input> non hanno pseudo-elementi: niente lama, il resto regge.)
   -------------------------------------------------------------------------- */
.punzone,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce #place_order,
input[type="submit"] {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: 0.9em 1.6em;
  font-family: var(--font-etichetta);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: var(--tracking-etichetta);
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.4;
  color: var(--oro-foil);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(0, 0, 0, 0.7);
  border-radius: var(--raggio);
  box-shadow: var(--incasso), 1px 1px 0 var(--rialzo);
  cursor: pointer;
}
.punzone::after,
.woocommerce a.button::after,
.woocommerce button.button::after,
.woocommerce #place_order::after {
  /* la lama di luce: attraversa una volta, non torna */
  content: '';
  position: absolute;
  top: -30%; bottom: -30%;
  left: 0;
  width: 45%;
  background: linear-gradient(105deg, transparent, rgba(237, 230, 218, 0.22), transparent);
  transform: translateX(-160%) skewX(-18deg);
  transition: transform 0.7s ease;
  pointer-events: none;
}
.punzone:hover::after,
.punzone:focus-visible::after,
.woocommerce a.button:hover::after,
.woocommerce button.button:hover::after,
.woocommerce #place_order:hover::after {
  transform: translateX(320%) skewX(-18deg);
}
.punzone:active,
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.woocommerce #place_order:active,
input[type="submit"]:active {
  transform: translateY(1px);
  box-shadow: inset 2px 2px 5px var(--incavo);
}
.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   06 Header
   -------------------------------------------------------------------------- */
.site-header {
  position: relative;
  z-index: 50;
  background: var(--antracite);
  border-bottom: 1px solid var(--filetto);
}

/* In home l'header galleggia sulla foto: scrim solo in alto, dove
   l'immagine è già scura. */
.home .site-header {
  position: absolute;
  inset: 0 0 auto;
  background: linear-gradient(to bottom, rgba(10, 8, 7, 0.72), rgba(10, 8, 7, 0));
  border-bottom: 0;
}

.site-header__bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4.5rem;
}

.brand { display: flex; align-items: center; text-decoration: none; }
.brand img { height: 2.25rem; width: auto; }
.custom-logo-link img { height: 2.25rem; width: auto; }

/* --------------------------------------------------------------------------
   07 Navigazione primaria
   -------------------------------------------------------------------------- */
.nav-primaria { margin-left: auto; }
.nav-primaria ul {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  margin: 0; padding: 0;
  list-style: none;
}
.nav-primaria a {
  font-size: var(--testo-s);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--osso);
  text-decoration: none;
  padding-block: 0.4em;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease;
}
.nav-primaria a:hover { color: var(--oro-foil); }
.nav-primaria .current-menu-item > a,
.nav-primaria .current_page_item > a {
  color: var(--oro-foil);
  border-bottom-color: var(--filetto);
}

.nav-toggle {
  display: none;
  margin-left: auto;
  padding: 0.6rem;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--raggio);
  cursor: pointer;
}
.nav-toggle__linea {
  display: block;
  width: 1.4rem; height: 2px;
  background: var(--osso);
  margin: 4px 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

@media (max-width: 56.25em) { /* 900px */
  .nav-toggle { display: block; }
  .nav-primaria {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--antracite);
    border-bottom: 1px solid var(--filetto);
    padding: 1rem var(--gronda) 1.5rem;
  }
  .nav-aperta .nav-primaria { display: block; }
  .nav-primaria ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-primaria a {
    display: block;
    padding: 0.8em 0;
    border-bottom: 1px solid rgba(237, 230, 218, 0.08);
  }
  .nav-primaria .current-menu-item > a { border-bottom-color: var(--filetto); }
  .nav-aperta .nav-toggle__linea:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-aperta .nav-toggle__linea:nth-child(2) { opacity: 0; }
  .nav-aperta .nav-toggle__linea:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

/* --------------------------------------------------------------------------
   08 Selettore lingua
   Bandierine SVG inline. L'attiva è incorniciata dal filetto, come un
   punzone piccolo; l'altra riposa.
   -------------------------------------------------------------------------- */
.selettore-lingua ul {
  display: flex;
  gap: 0.5rem;
  margin: 0; padding: 0;
  list-style: none;
}
.selettore-lingua a {
  display: flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.35em 0.55em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--raggio);
  opacity: 0.55;
  transition: opacity 0.2s ease;
}
.selettore-lingua a:hover { opacity: 1; }
.selettore-lingua a[aria-current] {
  opacity: 1;
  border-color: var(--filetto);
  background: rgba(0, 0, 0, 0.25);
  box-shadow: var(--incasso);
}
.selettore-lingua svg {
  width: 21px; height: 14px;
  display: block;
  border-radius: 2px;
}
.selettore-lingua .lingua-codice {
  font-family: var(--font-etichetta);
  font-size: var(--testo-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--osso);
}

/* --------------------------------------------------------------------------
   09 Footer
   Una delle due sole superfici con grana: qui la pagina torna materia.
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  margin-top: var(--sezione);
  background: var(--antracite);
  border-top: 1px solid var(--filetto);
  padding-block: 3.5rem 2rem;
}
.site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--grana);
  opacity: 0.35;
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.site-footer > * { position: relative; }

.footer-griglia {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2.5rem;
}
@media (max-width: 48em) {
  .footer-griglia { grid-template-columns: 1fr; gap: 2rem; }
}

.footer-brand img { height: 1.75rem; width: auto; margin-bottom: 1rem; }
.footer-brand p { color: var(--scamosciato); font-size: var(--testo-s); max-width: 32ch; }

.footer-titolo {
  font-family: var(--font-etichetta);
  font-size: var(--testo-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-etichetta);
  text-transform: uppercase;
  color: var(--scamosciato);
  margin: 0 0 1em;
}
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li { margin-bottom: 0.6em; }
.site-footer a {
  color: var(--osso);
  font-size: var(--testo-s);
  text-decoration: none;
}
.site-footer a:hover { color: var(--oro-foil); }

.footer-legale {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(237, 230, 218, 0.08);
  color: var(--scamosciato);
  font-size: var(--testo-s);
}

/* --------------------------------------------------------------------------
   10 Hero e pressa a caldo
   L'elemento firma. Il titolo esiste già impresso a secco; una volta
   sola la pressa cala: una lama di luce radente attraversa le lettere
   e le riempie d'oro. Senza JS o con motion ridotto: già impresso, statico.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  min-height: clamp(34rem, 94svh, 52rem);
}

.hero-figura {
  position: absolute;
  inset: 0;
  margin: 0;
}
.hero-figura picture { display: block; height: 100%; }
.hero-figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 45%;
}

/* Scrim solo dove serve: bordo sinistro (titolo) e piede (etichette).
   Il centro della foto resta com'è: il layout lavora con quella luce. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(98deg, rgba(10, 8, 7, 0.78) 0%, rgba(10, 8, 7, 0.32) 32%, transparent 58%),
    linear-gradient(to top, rgba(10, 8, 7, 0.62), transparent 28%);
  pointer-events: none;
}

.hero-contenuto {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-top: clamp(7rem, 18vh, 10rem);
  padding-bottom: clamp(1.5rem, 4vh, 2.5rem);
}

.hero-titolo {
  position: relative;
  overflow: hidden;
  align-self: flex-start;
  max-width: 10ch;
  margin: 0;
  padding-bottom: 0.06em;
  font-size: var(--testo-display);
  line-height: 0.98;
  color: var(--oro-foil);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
.hero-titolo__testo { color: inherit; }

/* La pressa: parte a secco (glifi trasparenti, solo i bordi del rilievo),
   poi il foil si fissa mentre la lama passa. Fill "both" + classe .pressa
   aggiunta via JS: senza JS il titolo è già oro. */
.pressa .hero-titolo__testo {
  animation: pressa-cala 1s cubic-bezier(0.3, 0, 0.2, 1) 0.5s both;
}
@keyframes pressa-cala {
  0% {
    color: transparent;
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.85), 1px 1px 1px rgba(237, 230, 218, 0.22);
  }
  45% {
    color: transparent;
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.85), 1px 1px 1px rgba(237, 230, 218, 0.22);
  }
  100% {
    color: var(--oro-foil);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  }
}
.pressa .hero-titolo::after {
  content: '';
  position: absolute;
  top: -25%; bottom: -25%;
  left: 0;
  width: 36%;
  background: linear-gradient(105deg, transparent, rgba(237, 230, 218, 0.3), transparent);
  transform: translateX(-150%) skewX(-16deg);
  animation: lama-luce 1s cubic-bezier(0.3, 0, 0.2, 1) 0.5s both;
  pointer-events: none;
}
@keyframes lama-luce {
  to { transform: translateX(430%) skewX(-16deg); }
}

.hero-piede {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  align-items: flex-end;
  justify-content: space-between;
}
.hero-etichette {
  margin: 0;
  color: var(--osso);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Mobile: la panoramica non si schiaccia. Titolo su carbone, ritaglio
   verticale 3:4 (angolo scamosciato) sotto, piede in coda. */
@media (max-width: 47.99em) {
  .hero { flex-direction: column; min-height: 0; }
  .hero::after { display: none; }
  .hero-figura { position: static; order: 2; }
  .hero-figura picture { height: auto; }
  .hero-figura img { height: auto; aspect-ratio: 3 / 4; object-position: center; }
  .hero-contenuto { display: contents; }
  .hero-titolo {
    order: 1;
    align-self: auto;
    max-width: none;
    padding: 6.5rem var(--gronda) 1.75rem;
    text-shadow: none;
  }
  .hero-piede { order: 3; padding: 1.5rem var(--gronda) 0; }
  .hero-etichette { color: var(--scamosciato); text-shadow: none; }
}

/* --------------------------------------------------------------------------
   11 Banda valori
   I tre valori come marchi del pellettiere, impressi a secco in una
   banda con grana. Niente icone.
   -------------------------------------------------------------------------- */
.valori {
  position: relative;
  background: var(--antracite);
  border-block: 1px solid var(--filetto);
}
.valori::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--grana);
  opacity: 0.4;
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.valori__lista {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
  margin: 0;
  list-style: none;
}
.valore__marchio {
  display: block;
  margin-bottom: 0.55em;
  font-family: var(--font-display);
  font-weight: 640;
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.85rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--osso);
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.85), 1px 1px 1px rgba(237, 230, 218, 0.12);
}
.valore p {
  margin: 0;
  color: var(--scamosciato);
  font-size: var(--testo-s);
  max-width: 30ch;
}
@media (max-width: 47.99em) {
  .valori__lista { grid-template-columns: 1fr; gap: 1.75rem; }
  .valore p { max-width: none; }
}

/* --------------------------------------------------------------------------
   12 Processo (Custom Leather Playmat)
   -------------------------------------------------------------------------- */
.processo { padding-top: var(--sezione); }
.processo--pagina { padding-top: clamp(2.5rem, 5vw, 4rem); }
.processo__testa { max-width: 44rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.processo__testa .etichetta { display: block; margin-bottom: 1em; }
.processo__testa p:last-child { color: var(--scamosciato); margin-bottom: 0; }

.processo__passi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin: 0 0 2.75rem;
  padding: 0;
  list-style: none;
}
.passo {
  border-top: 1px solid rgba(237, 230, 218, 0.12);
  padding-top: 1.4rem;
}
.passo__numero {
  display: block;
  margin-bottom: 0.9em;
  font-family: var(--font-etichetta);
  font-size: var(--testo-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-etichetta);
  color: var(--oro-foil);
}
.passo h3 {
  font-family: var(--font-corpo);
  font-size: var(--testo-m);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-shadow: none;
  margin-bottom: 0.5em;
}
.passo p { color: var(--scamosciato); font-size: var(--testo-s); margin: 0; }

@media (max-width: 47.99em) {
  .processo__passi { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* --------------------------------------------------------------------------
   13 Collezione
   L'unico cambio di tinta della pagina: il petrolio della pelle in foto.
   -------------------------------------------------------------------------- */
.collezione {
  margin-top: var(--sezione);
  background: var(--petrolio);
  border-block: 1px solid var(--filetto);
  padding-block: var(--sezione);
}
.collezione__testa { max-width: 44rem; margin-bottom: clamp(2rem, 5vw, 3rem); }
.collezione__testa .etichetta { display: block; margin-bottom: 1em; }
.collezione__testa p:last-child { color: var(--scamosciato); margin-bottom: 0; }

.collezione__griglia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
  margin: 0 0 2.5rem;
  padding: 0;
  list-style: none;
}

.scheda-prodotto {
  position: relative;
  text-decoration: none;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.scheda-prodotto:hover {
  transform: translateY(-3px);
  border-color: rgba(217, 180, 91, 0.65);
}
.scheda-prodotto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.scheda-prodotto__corpo { display: block; padding: 1rem 1.15rem 1.15rem; }
.scheda-prodotto__nome {
  display: block;
  margin-bottom: 0.35em;
  color: var(--osso);
  font-weight: 600;
  font-size: var(--testo-s);
}
.scheda-prodotto__prezzo {
  display: block;
  font-family: var(--font-etichetta);
  font-size: var(--testo-s);
  color: var(--oro-foil);
}

/* --------------------------------------------------------------------------
   14 Cornice pelle e rivela
   La cornice sostituisce il drop-shadow generico: filetto tinto ai bordi
   + rilievo "posato". Il rivela è sobrio: opacità e 12px, una volta.
   -------------------------------------------------------------------------- */
.cornice-pelle {
  display: block;
  overflow: hidden;
  background: var(--antracite);
  border: 1px solid var(--filetto);
  border-radius: var(--raggio);
  box-shadow: var(--posato);
}

.rivela {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.rivelato {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   15 Moduli
   I campi sono incassati nella pelle: si scrive dentro un incavo.
   Vale per commenti, ricerca, checkout, account.
   -------------------------------------------------------------------------- */
label { font-size: var(--testo-s); font-weight: 500; }

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select {
  width: 100%;
  padding: 0.65em 0.8em;
  font: inherit;
  font-size: var(--testo-s);
  color: var(--osso);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(237, 230, 218, 0.18);
  border-radius: var(--raggio);
  box-shadow: var(--incasso);
}
textarea { min-height: 8rem; resize: vertical; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23b3a894'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8em center;
  padding-right: 2.2em;
}
input:focus, textarea:focus, select:focus { border-color: var(--filetto); }
::placeholder { color: var(--scamosciato); opacity: 0.7; }

/* select2 (tendina paese di WooCommerce) */
.select2-container--default .select2-selection--single {
  height: auto;
  padding: 0.55em 0.8em;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(237, 230, 218, 0.18);
  border-radius: var(--raggio);
  box-shadow: var(--incasso);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--osso);
  line-height: 1.5;
  padding: 0;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; }
.select2-dropdown {
  background: var(--antracite);
  border: 1px solid var(--filetto);
  color: var(--osso);
  box-shadow: var(--posato);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(237, 230, 218, 0.18);
  color: var(--osso);
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background: var(--oro-foil);
  color: var(--carbone);
}

/* --------------------------------------------------------------------------
   16 Pagine interne
   -------------------------------------------------------------------------- */
.contenuto-pagina { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

.pagina-testa { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); max-width: 44rem; }
.pagina-testa .etichetta { display: block; margin-bottom: 0.9em; }
.pagina-testa h1 { margin-bottom: 0; }

.prosa { max-width: 65ch; }
.prosa h2 { font-size: var(--testo-l); margin-top: 1.8em; }
.prosa h3 { font-size: var(--testo-m); }
.prosa ul, .prosa ol { padding-left: 1.4em; margin: 0 0 1em; }
.prosa li { margin-bottom: 0.4em; }
.prosa blockquote {
  margin: 1.5em 0;
  padding: 0.25em 0 0.25em 1.25em;
  border-left: 2px solid var(--filetto);
  color: var(--scamosciato);
}
.prosa img { border-radius: var(--raggio); }
.prosa code {
  font-family: var(--font-etichetta);
  font-size: 0.9em;
  background: rgba(0, 0, 0, 0.35);
  padding: 0.1em 0.4em;
  border-radius: 3px;
}

.contenuto-wc { max-width: none; }

.articolo-figura { margin: 0 0 2rem; max-width: 48rem; }

/* Archivi classici (index) */
.articolo + .articolo { margin-top: 3rem; }
.articolo-titolo a { color: var(--osso); text-decoration: none; }
.articolo-titolo a:hover { color: var(--oro-foil); }
.articolo-meta { margin-bottom: 2rem; }
.paginazione { margin-top: 3rem; }
.paginazione .nav-links { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Commenti: il modulo lo fornisce WordPress, qui solo la veste */
.comment-list { list-style: none; margin: 2.5rem 0 0; padding: 0; }
.comment-list .comment,
.comment-list .pingback {
  border-top: 1px solid rgba(237, 230, 218, 0.1);
  padding: 1.25rem 0;
}
.comment-list .children { list-style: none; margin: 1rem 0 0; padding-left: 1.5rem; }
.comment-author { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; }
.comment-author .avatar { border-radius: 50%; width: 36px; height: 36px; }
.comment-metadata { font-family: var(--font-etichetta); font-size: var(--testo-xs); letter-spacing: 0.06em; }
.comment-metadata a { color: var(--scamosciato); text-decoration: none; }
.comment-content { font-size: var(--testo-s); }
.reply { font-size: var(--testo-s); }
.comment-form p { margin-bottom: 1rem; }
.comment-form label { display: block; margin-bottom: 0.35em; }
.comment-reply-title, .comments-title { font-size: var(--testo-l); margin-top: 2rem; }

/* 404: il marchio a secco più grande del sito */
.pagina-404 { text-align: left; }
.pagina-404__marchio {
  margin: 0 0 0.1em;
  font-family: var(--font-display);
  font-weight: 680;
  font-size: clamp(6rem, 22vw, 13rem);
  line-height: 1;
  color: var(--carbone);
  text-shadow: -2px -2px 2px rgba(0, 0, 0, 0.9), 2px 2px 2px rgba(237, 230, 218, 0.1);
}
.pagina-404__testo { color: var(--scamosciato); max-width: 40ch; }
.pagina-404__azioni { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

/* --------------------------------------------------------------------------
   17 WooCommerce
   Stili del plugin spenti: la skin è tutta qui, con gli stessi token.
   -------------------------------------------------------------------------- */

/* Briciole e testata archivio */
.woocommerce-breadcrumb {
  font-family: var(--font-etichetta);
  font-size: var(--testo-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--scamosciato);
  margin-bottom: 2rem;
}
.woocommerce-breadcrumb a { color: var(--scamosciato); text-decoration: none; }
.woocommerce-breadcrumb a:hover { color: var(--oro-foil); }

.woocommerce-result-count {
  float: left;
  margin: 0 0 1.5rem;
  font-family: var(--font-etichetta);
  font-size: var(--testo-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--scamosciato);
}
.woocommerce-ordering { float: right; margin: 0 0 1.5rem; }
.woocommerce-ordering select { width: auto; }

/* Griglia prodotti (archivio, correlati, cross-sell) */
ul.products {
  clear: both;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
  margin: 0 0 2.5rem;
  padding: 0;
  list-style: none;
}

span.onsale {
  position: absolute;
  z-index: 2;
  top: 0.75rem; left: 0.75rem;
  padding: 0.35em 0.65em;
  font-family: var(--font-etichetta);
  font-size: var(--testo-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--carbone);
  background: var(--oro-foil);
  border-radius: 2px;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.4);
}

/* Paginazione archivio */
.woocommerce-pagination { clear: both; text-align: center; }
.woocommerce-pagination ul {
  display: inline-flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.woocommerce-pagination .page-numbers {
  display: inline-block;
  min-width: 2.4em;
  padding: 0.5em 0.7em;
  font-family: var(--font-etichetta);
  font-size: var(--testo-s);
  text-align: center;
  text-decoration: none;
  color: var(--osso);
  border: 1px solid rgba(237, 230, 218, 0.15);
  border-radius: var(--raggio);
}
.woocommerce-pagination .page-numbers.current {
  color: var(--carbone);
  background: var(--oro-foil);
  border-color: var(--oro-foil);
}

/* Scheda prodotto */
.woocommerce div.product {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.woocommerce-notices-wrapper, .woocommerce-NoticeGroup { grid-column: 1 / -1; }
.woocommerce div.product span.onsale { top: 1rem; left: 1rem; }

.woocommerce-product-gallery {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--filetto);
  border-radius: var(--raggio);
  box-shadow: var(--posato);
}
.woocommerce-product-gallery .flex-control-thumbs {
  display: flex;
  gap: 0.5rem;
  margin: 0.5rem;
  padding: 0;
  list-style: none;
}
.woocommerce-product-gallery .flex-control-thumbs img {
  width: 4.5rem;
  cursor: pointer;
  opacity: 0.55;
  border: 1px solid transparent;
  border-radius: 2px;
  transition: opacity 0.2s ease;
}
.woocommerce-product-gallery .flex-control-thumbs img:hover,
.woocommerce-product-gallery .flex-control-thumbs img.flex-active {
  opacity: 1;
  border-color: var(--filetto);
}
.woocommerce-product-gallery__trigger {
  position: absolute;
  z-index: 3;
  top: 0.75rem; right: 0.75rem;
  width: 2.4em; height: 2.4em;
  line-height: 2.4em;
  text-align: center;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
}

.woocommerce div.product .entry-summary .product_title { font-size: var(--testo-xl); }
.woocommerce div.product .entry-summary .price {
  font-family: var(--font-etichetta);
  font-size: var(--testo-l);
  color: var(--oro-foil);
  margin-bottom: 1rem;
}
.woocommerce div.product .entry-summary .price del { opacity: 0.5; margin-right: 0.5em; }
.woocommerce div.product .entry-summary .price ins { text-decoration: none; }
.woocommerce-product-details__short-description { color: var(--scamosciato); }

.woocommerce div.product form.cart {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: stretch;
  margin-block: 1.5rem;
}
.woocommerce div.product form.cart.variations_form { display: block; }
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}
.quantity { display: inline-flex; }
.quantity input.qty { width: 4.75rem; text-align: center; }
table.variations { border-collapse: collapse; width: 100%; }
table.variations th, table.variations td { padding: 0.4em 0; text-align: left; }
table.variations select { width: auto; min-width: 12rem; }
.reset_variations { font-size: var(--testo-s); }

.product_meta {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(237, 230, 218, 0.1);
  font-family: var(--font-etichetta);
  font-size: var(--testo-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--scamosciato);
}
.product_meta > span { display: block; margin-bottom: 0.4em; }

/* Tab descrizione/recensioni */
.woocommerce-tabs { grid-column: 1 / -1; margin-top: 2rem; }
.woocommerce-tabs ul.tabs {
  display: flex;
  gap: 1.75rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid rgba(237, 230, 218, 0.12);
}
.woocommerce-tabs ul.tabs a {
  display: block;
  padding: 0.6em 0;
  font-size: var(--testo-s);
  font-weight: 500;
  color: var(--scamosciato);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.woocommerce-tabs ul.tabs li.active a {
  color: var(--oro-foil);
  border-bottom-color: var(--filetto);
}
.woocommerce-Tabs-panel { max-width: 65ch; }
.woocommerce-Tabs-panel > h2:first-child { font-size: var(--testo-l); }

.related.products, .upsells.products, .cross-sells { grid-column: 1 / -1; margin-top: 2.5rem; }
.related.products > h2, .upsells.products > h2, .cross-sells > h2 { font-size: var(--testo-l); }

@media (max-width: 56.25em) {
  .woocommerce div.product { grid-template-columns: 1fr; }
}

/* Recensioni: stelle in unicode, senza l'icon-font del plugin */
.star-rating {
  position: relative;
  overflow: hidden;
  display: inline-block;
  height: 1.1em;
  width: 5.6em;
  line-height: 1.1;
  font-size: 0.95rem;
}
.star-rating::before {
  content: '★★★★★';
  position: absolute;
  top: 0; left: 0;
  letter-spacing: 0.1em;
  color: rgba(237, 230, 218, 0.25);
}
.star-rating span {
  position: absolute;
  top: 0; left: 0;
  overflow: hidden;
  padding-top: 1.5em;
  height: 0;
}
.star-rating span::before {
  content: '★★★★★';
  position: absolute;
  top: 0; left: 0;
  letter-spacing: 0.1em;
  color: var(--oro-foil);
}
p.stars { display: inline-flex; gap: 0.2em; margin: 0.25em 0 0.75em; }
p.stars a {
  position: relative;
  display: inline-block;
  width: 1.15em; height: 1.15em;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 120%;
  text-decoration: none;
}
p.stars a::before {
  content: '☆';
  position: absolute;
  top: 0; left: 0;
  text-indent: 0;
  color: var(--oro-foil);
}
p.stars:hover a::before { content: '★'; }
p.stars a:hover ~ a::before { content: '☆'; }
p.stars.selected a:not(.active)::before,
p.stars.selected a.active::before { content: '★'; }
p.stars.selected a.active ~ a::before { content: '☆'; }
.commentlist { list-style: none; margin: 0; padding: 0; }
.commentlist .comment_container { display: flex; gap: 1rem; padding: 1.25rem 0; border-top: 1px solid rgba(237, 230, 218, 0.1); }
.commentlist .comment_container img.avatar { width: 42px; height: 42px; border-radius: 50%; }
.comment-text .meta { font-family: var(--font-etichetta); font-size: var(--testo-xs); color: var(--scamosciato); }

/* Avvisi */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 1.5rem;
  padding: 0.9em 1.2em;
  list-style: none;
  font-size: var(--testo-s);
  color: var(--osso);
  background: var(--antracite);
  border: 1px solid rgba(237, 230, 218, 0.12);
  border-left: 3px solid var(--oro-foil);
  border-radius: var(--raggio);
  box-shadow: var(--posato);
}
.woocommerce-error { border-left-color: var(--errore); }
.woocommerce-error li { color: var(--errore); }
.woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button { order: 2; }

/* Tabelle (carrello, ordini, totali) */
table.shop_table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
}
table.shop_table th {
  padding: 0.8em 0.75em;
  text-align: left;
  font-family: var(--font-etichetta);
  font-size: var(--testo-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--scamosciato);
  border-bottom: 1px solid var(--filetto);
}
table.shop_table td {
  padding: 0.9em 0.75em;
  vertical-align: middle;
  border-bottom: 1px solid rgba(237, 230, 218, 0.08);
}
table.shop_table td.product-name a { color: var(--osso); text-decoration: none; font-weight: 500; }
table.shop_table td.product-name a:hover { color: var(--oro-foil); }
td.product-thumbnail img {
  width: 64px;
  border: 1px solid var(--filetto);
  border-radius: 2px;
}
table.shop_table .amount { font-family: var(--font-etichetta); color: var(--oro-foil); }
a.remove {
  display: inline-block;
  width: 1.5em; height: 1.5em;
  line-height: 1.4em;
  font-size: 1.15em;
  text-align: center;
  text-decoration: none;
  color: var(--scamosciato);
  border: 1px solid rgba(237, 230, 218, 0.15);
  border-radius: 50%;
}
a.remove:hover { color: var(--errore); border-color: var(--errore); }

td.actions { text-align: right; }
td.actions .coupon {
  float: left;
  display: flex;
  gap: 0.5rem;
}
td.actions .coupon input#coupon_code { width: 11rem; }

/* Carrello: colonna totali */
.cart-collaterals { display: flex; justify-content: flex-end; }
.cart-collaterals .cart_totals {
  width: min(100%, 26rem);
  padding: 1.5rem;
  background: var(--antracite);
  border: 1px solid var(--filetto);
  border-radius: var(--raggio);
  box-shadow: var(--posato);
}
.cart_totals h2 { font-size: var(--testo-l); }
.cart_totals table.shop_table { margin-bottom: 1.25rem; }
.wc-proceed-to-checkout .checkout-button { display: block; width: 100%; text-align: center; }

/* Tabelle su schermi stretti: righe impilate, intestazioni da data-title */
@media (max-width: 47.99em) {
  table.shop_table_responsive thead { display: none; }
  table.shop_table_responsive tr { display: block; padding: 0.6rem 0; border-bottom: 1px solid rgba(237, 230, 218, 0.1); }
  table.shop_table_responsive td {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.35em 0;
    border: 0;
    text-align: right;
  }
  table.shop_table_responsive td::before {
    content: attr(data-title);
    font-family: var(--font-etichetta);
    font-size: var(--testo-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--scamosciato);
    text-align: left;
  }
  table.shop_table_responsive td.product-thumbnail::before { content: none; }
  td.actions { text-align: left; }
  td.actions .coupon { float: none; margin-bottom: 1rem; }
  .cart-collaterals { justify-content: stretch; }
  .cart-collaterals .cart_totals { width: 100%; }
}

/* Checkout */
.woocommerce form.checkout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 3rem;
  align-items: start;
}
.woocommerce form.checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; }
.woocommerce form.checkout #order_review_heading { grid-column: 2; grid-row: 1; margin: 0 0 0.75rem; font-size: var(--testo-l); }
.woocommerce form.checkout #order_review {
  grid-column: 2;
  grid-row: 2;
  padding: 1.5rem;
  background: var(--antracite);
  border: 1px solid var(--filetto);
  border-radius: var(--raggio);
  box-shadow: var(--posato);
}
@media (max-width: 62em) {
  .woocommerce form.checkout { grid-template-columns: 1fr; }
  .woocommerce form.checkout #customer_details,
  .woocommerce form.checkout #order_review_heading,
  .woocommerce form.checkout #order_review { grid-column: 1; grid-row: auto; }
}

.form-row { margin: 0 0 1rem; }
.form-row label { display: block; margin-bottom: 0.35em; }
.form-row .required { color: var(--oro-foil); text-decoration: none; }
.form-row.form-row-first, .form-row.form-row-last { width: 100%; }
@media (min-width: 48em) {
  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields__field-wrapper,
  .woocommerce-address-fields__field-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1.25rem;
  }
  .form-row { grid-column: 1 / -1; }
  .form-row.form-row-first { grid-column: 1; }
  .form-row.form-row-last { grid-column: 2; }
}

#payment ul.wc_payment_methods { margin: 0 0 1.25rem; padding: 0; list-style: none; }
#payment ul.wc_payment_methods li { padding: 0.7rem 0; border-top: 1px solid rgba(237, 230, 218, 0.1); }
#payment ul.wc_payment_methods li:first-child { border-top: 0; }
#payment ul.wc_payment_methods label { display: inline; margin-left: 0.4em; font-weight: 500; }
#payment .payment_box {
  margin-top: 0.6rem;
  padding: 0.9rem 1rem;
  font-size: var(--testo-s);
  color: var(--scamosciato);
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--raggio);
  box-shadow: var(--incasso);
}
#payment .woocommerce-terms-and-conditions-wrapper { margin-bottom: 1.25rem; font-size: var(--testo-s); }
button#place_order { display: block; width: 100%; }

/* Account e login */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}
@media (max-width: 47.99em) {
  .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) { grid-template-columns: 1fr; gap: 1.5rem; }
}
.woocommerce-MyAccount-navigation ul { margin: 0; padding: 0; list-style: none; }
.woocommerce-MyAccount-navigation a {
  display: block;
  padding: 0.55em 0 0.55em 0.9em;
  font-size: var(--testo-s);
  color: var(--osso);
  text-decoration: none;
  border-left: 2px solid rgba(237, 230, 218, 0.12);
}
.woocommerce-MyAccount-navigation a:hover { color: var(--oro-foil); }
.woocommerce-MyAccount-navigation .is-active a {
  color: var(--oro-foil);
  border-left-color: var(--oro-foil);
}

.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.lost_reset_password {
  max-width: 26rem;
  padding: 2rem;
  background: var(--antracite);
  border: 1px solid var(--filetto);
  border-radius: var(--raggio);
  box-shadow: var(--posato);
}
.woocommerce form.login .lost_password { font-size: var(--testo-s); margin-bottom: 0; }
.woocommerce-form-login__rememberme { display: block; margin-bottom: 1rem; font-size: var(--testo-s); }

/* --------------------------------------------------------------------------
   18 Movimento ridotto
   Le animazioni si spengono; il contenuto resta completo e leggibile.
   Il titolo hero resta impresso in oro, statico.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .punzone::after,
  .woocommerce a.button::after,
  .woocommerce button.button::after,
  .woocommerce #place_order::after,
  .pressa .hero-titolo::after { display: none; }
  .rivela { opacity: 1; transform: none; }
}