/* ==========================================================================
   Legno di Festa — foglio di stile
   --------------------------------------------------------------------------
   Direzione: "banco da lavoro al tramonto". Sfondo scuro come il legno
   d'ulivo affumicato, luce calda d'ottone come una lampada da tornio,
   testo colore pergamena. Le schede oggetto sono trattate come cartellini
   da museo/catalogo d'atelier (numero di collezione, timbro di stato),
   non come tessere di un solito shop grid. Nessun framework CSS esterno,
   nessuna dipendenza da CDN: un solo file, coerente con l'obiettivo di
   leggerezza del progetto.
   ========================================================================== */

/* Tema di default: chiaro — pergamena calda, non bianco puro, ottone
   scurito per restare leggibile, ombre morbide invece che nere pesanti. */
:root {
  /* Superfici */
  --bg-0: #f3ead6;
  --bg-1: #fbf5e7;
  --bg-2: #ecdcb8;
  --line: rgba(43, 30, 12, 0.14);
  --line-strong: rgba(43, 30, 12, 0.3);

  /* Testo */
  --ink: #2a2013;
  --ink-dim: #5b4a30;
  --ink-faint: #85714f;

  /* Accenti: ottone più vivo (non spento) perché resti a fuoco anche sul
     chiaro; terracotta e salvia come accenti netti */
  --brass: #c66f10;
  --brass-bright: #984f00;
  --brass-deep: #7a4400;
  --rust: #a8461f;
  --rust-bright: #7d3212;
  --olive: #6d7a3f;
  --olive-bright: #4f5c2a;

  --shadow-1: 0 14px 28px -18px rgba(58, 40, 16, 0.28);
  --shadow-2: 0 20px 40px -20px rgba(58, 40, 16, 0.32);
  --radius: 3px;

  /* Velo semitrasparente dietro ai timbri/etichette sopra le foto */
  --scrim: rgba(251, 245, 231, 0.8);

  /* Atmosfera di sfondo (bagliore + trama delle venature): variabili così
     l'unica regola su body sotto non va duplicata per tema. */
  --glow-1: radial-gradient(1100px 620px at 8% -6%, rgba(185, 130, 43, 0.17), transparent 60%);
  --glow-2: radial-gradient(900px 700px at 100% 10%, rgba(168, 70, 31, 0.09), transparent 55%);
  --grain-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='240'%3E%3Cg fill='none' stroke='%233a2b14' stroke-width='1.1'%3E%3Cpath d='M-10 24 C 60 6,110 42,170 24 S 280 6,340 24 S 440 40 490 22' stroke-opacity='0.075'/%3E%3Cpath d='M-10 78 C 50 60,100 96,160 76 S 270 54,330 78 S 440 92 490 72' stroke-opacity='0.065'/%3E%3Cpath d='M-10 140 C 70 158,120 118,180 138 S 290 162,350 136 S 440 116 490 144' stroke-opacity='0.06'/%3E%3Cpath d='M-10 200 C 60 182,110 218,170 198 S 280 176,340 202 S 440 214 490 194' stroke-opacity='0.07'/%3E%3C/g%3E%3Cg fill='none' stroke='%233a2b14' stroke-width='1'%3E%3Ccircle cx='70' cy='195' r='13' stroke-opacity='0.09'/%3E%3Ccircle cx='70' cy='195' r='24' stroke-opacity='0.06'/%3E%3Ccircle cx='70' cy='195' r='36' stroke-opacity='0.04'/%3E%3Cpath d='M400 -10 A150 150 0 0 1 490 130' stroke-opacity='0.055'/%3E%3Cpath d='M418 -10 A118 118 0 0 1 490 100' stroke-opacity='0.05'/%3E%3C/g%3E%3C/svg%3E");

  --font-display: 'LDF Display', 'Century Gothic', Futura, 'Trebuchet MS', sans-serif;
  --font-text: 'LDF Text', Cambria, Georgia, 'Times New Roman', serif;
  --font-mono: 'LDF Mono', 'Courier New', Courier, monospace;
  --font-script: 'LDF Script', 'Brush Script MT', cursive;

  font-size: 17px;
}

/* --------------------------------------------------------------------------
   Tema scuro (opzionale, attivato dal pulsante in header): stessa identità
   (font, motivi, gerarchia), NON un semplice invert del tema chiaro.
   "Banco da lavoro al tramonto" — legno affumicato, luce d'ottone.
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
  --bg-0: #14100c;
  --bg-1: #1d1610;
  --bg-2: #2a2018;
  --line: rgba(233, 217, 185, 0.14);
  --line-strong: rgba(233, 217, 185, 0.3);

  --ink: #ece1c8;
  --ink-dim: #b6a586;
  --ink-faint: #7e7259;

  --brass: #cf9d43;
  --brass-bright: #ecc06e;
  --brass-deep: #8a6529;
  --rust: #c1562f;
  --rust-bright: #e07a4d;
  --olive: #8a9459;
  --olive-bright: #aab876;

  --shadow-1: 0 14px 32px -16px rgba(0, 0, 0, 0.6);
  --shadow-2: 0 22px 48px -20px rgba(0, 0, 0, 0.7);
  --scrim: rgba(20, 16, 12, 0.72);

  --glow-1: radial-gradient(1100px 620px at 8% -6%, rgba(207, 157, 67, 0.16), transparent 60%);
  --glow-2: radial-gradient(900px 700px at 100% 10%, rgba(193, 86, 47, 0.08), transparent 55%);
  --grain-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='240'%3E%3Cg fill='none' stroke='%23e9d9b9' stroke-width='1'%3E%3Cpath d='M-10 24 C 60 6,110 42,170 24 S 280 6,340 24 S 440 40 490 22' stroke-opacity='0.05'/%3E%3Cpath d='M-10 78 C 50 60,100 96,160 76 S 270 54,330 78 S 440 92 490 72' stroke-opacity='0.045'/%3E%3Cpath d='M-10 140 C 70 158,120 118,180 138 S 290 162,350 136 S 440 116 490 144' stroke-opacity='0.04'/%3E%3Cpath d='M-10 200 C 60 182,110 218,170 198 S 280 176,340 202 S 440 214 490 194' stroke-opacity='0.045'/%3E%3C/g%3E%3Cg fill='none' stroke='%23e9d9b9' stroke-width='0.9'%3E%3Ccircle cx='70' cy='195' r='13' stroke-opacity='0.05'/%3E%3Ccircle cx='70' cy='195' r='24' stroke-opacity='0.035'/%3E%3Ccircle cx='70' cy='195' r='36' stroke-opacity='0.025'/%3E%3Cpath d='M400 -10 A150 150 0 0 1 490 130' stroke-opacity='0.035'/%3E%3Cpath d='M418 -10 A118 118 0 0 1 490 100' stroke-opacity='0.03'/%3E%3C/g%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
html, body { overflow-x: hidden; } /* rete di sicurezza: mai scroll orizzontale */

body {
  font-family: var(--font-text);
  color: var(--ink);
  background-color: var(--bg-0);
  line-height: 1.65;

  /* Atmosfera: bagliore caldo (come luce da una finestra del laboratorio)
     + una trama che richiama le venature/nodi del legno. La posizione
     della trama deriva lentissimamente (grain-drift) per dare un minimo
     di vita allo sfondo senza distrarre — quasi impercettibile, disattivata
     per chi preferisce meno movimento (prefers-reduced-motion). */
  background-image: var(--glow-1), var(--glow-2), var(--grain-svg), linear-gradient(var(--bg-0), var(--bg-0));
  background-position: 0 0, 0 0, 0px 0px, 0 0;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat;
  background-attachment: scroll;
  animation: grain-drift 50s ease-in-out infinite alternate;
}

@keyframes grain-drift {
  from { background-position: 0 0, 0 0, 0px 0px, 0 0; }
  to   { background-position: 0 0, 0 0, 70px -46px, 0 0; }
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: 0.01em;
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: 1.6rem; text-transform: uppercase; letter-spacing: 0.04em; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
a { color: var(--brass-bright); text-decoration-color: rgba(236, 192, 110, 0.4); }
a:hover { color: var(--brass-bright); text-decoration-color: currentColor; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 26px; }

::selection { background: var(--brass); color: #201607; }

/* --------------------------- Motion primitives --------------------------- */
@keyframes reveal-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes spin-cw  { to { transform: rotate(360deg); } }
@keyframes spin-ccw { to { transform: rotate(-360deg); } }
@keyframes drift-curl {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50%      { transform: translateY(-16px) rotate(5deg); }
}
@keyframes lamp-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

.reveal-1, .reveal-2, .reveal-3, .reveal-4 {
  opacity: 0;
  animation: reveal-up 0.9s cubic-bezier(.2,.7,.15,1) forwards;
}
.reveal-1 { animation-delay: .05s; }
.reveal-2 { animation-delay: .2s; }
.reveal-3 { animation-delay: .38s; }
.reveal-4 { animation-delay: .56s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .reveal-1, .reveal-2, .reveal-3, .reveal-4, .items-grid .item-card { opacity: 1 !important; transform: none !important; }
}

/* -------------------------------- Header --------------------------------- */
.site-header {
  border-bottom: 1px solid var(--line);
}
/* Il leggero velo scuro in alto ha senso solo sul tema scuro (dà
   profondità sotto una luce calda); sul tema chiaro rovinava la
   pergamena con una striscia grigiastra, quindi qui niente. */
[data-theme="dark"] .site-header {
  background: linear-gradient(180deg, rgba(0,0,0,0.18), transparent);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 24px; flex-wrap: wrap; gap: 14px;
}
.brand { text-decoration: none; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.brand__mark {
  font-family: var(--font-display); font-weight: 700; font-size: 1.4rem;
  color: var(--ink) !important; text-transform: uppercase; letter-spacing: 0.06em;
}
.brand__amp { color: var(--brass-bright) !important; padding: 0 2px; }
.brand__tagline {
  font-family: var(--font-script); font-size: 1rem; color: var(--brass-bright) !important;
  letter-spacing: 0.02em;
}
.main-nav { display: flex; gap: 26px; flex-wrap: wrap; order: 1; }
.main-nav a {
  font-family: var(--font-mono); font-size: 0.78rem; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--ink-dim) !important; text-decoration: none;
  padding-bottom: 3px; border-bottom: 1px solid transparent;
}
.main-nav a:hover, .main-nav a.is-active { color: var(--brass-bright) !important; border-bottom-color: var(--brass-bright); }

.site-header__actions { display: flex; align-items: center; gap: 10px; order: 2; }

/* -------------------------------- Theme toggle ----------------------------- */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--bg-1); border: 1px solid var(--line-strong); color: var(--ink-dim);
  cursor: pointer; padding: 0; transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.theme-toggle:hover { color: var(--brass-bright); border-color: var(--brass); transform: rotate(-8deg); }
.theme-toggle__icon { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* -------------------------------- Hamburger menu ---------------------------- */
.nav-toggle {
  display: none; flex: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: 38px; height: 38px; background: var(--bg-1); border: 1px solid var(--line-strong);
  border-radius: 50%; cursor: pointer; padding: 0;
}
.nav-toggle__bar { display: block; width: 15px; height: 2px; background: var(--ink-dim); border-radius: 1px; transition: transform .2s ease, opacity .2s ease, background-color .2s ease; }
.nav-toggle:hover .nav-toggle__bar { background: var(--brass-bright); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.theme-toggle__icon--moon { fill: currentColor; stroke: none; display: block; }
.theme-toggle__icon--sun { display: none; }
/* Icona mostrata = azione del click: in tema chiaro (default) si vede
   la luna (clic per passare allo scuro), in tema scuro il sole (clic
   per tornare al chiaro). */
[data-theme="dark"] .theme-toggle__icon--sun { display: block; }
[data-theme="dark"] .theme-toggle__icon--moon { display: none; }

/* --------------------------------- Hero ----------------------------------- */
.hero { position: relative; padding: 96px 0 64px; overflow: hidden; }
.hero__atmosphere { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero__ring {
  position: absolute; fill: none; stroke: var(--brass); stroke-width: 0.6;
}
.hero__ring--a { top: -60px; right: -60px; width: 340px; height: 340px; opacity: 0.35; animation: spin-cw 90s linear infinite; }
.hero__ring--b { top: 40px; right: 40px; width: 200px; height: 200px; opacity: 0.5; animation: spin-ccw 70s linear infinite; }
.hero__curl {
  position: absolute; left: -10px; bottom: -10px; width: 90px; height: 120px;
  stroke: var(--rust); stroke-width: 2.5; fill: none; stroke-linecap: round; opacity: 0.55;
  animation: drift-curl 8s ease-in-out infinite;
}
.hero__inner { position: relative; z-index: 1; max-width: 760px; }
.hero__eyebrow {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.14em;
  font-size: 0.78rem; color: var(--brass-bright); margin-bottom: 18px;
}
.hero__lead { font-size: 1.18rem; color: var(--ink-dim); max-width: 560px; }
.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 28px; }

/* -------------------------------- Buttons ---------------------------------- */
.btn {
  display: inline-block; font-family: var(--font-mono); font-weight: 700;
  font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em;
  text-decoration: none; padding: 14px 26px; border-radius: var(--radius);
  border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn--primary { background: var(--brass); color: #211705 !important; }
.btn--primary:hover { background: var(--brass-bright); transform: translateY(-2px); box-shadow: var(--shadow-1); }
.btn--ghost { background: transparent; color: var(--ink) !important; border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--brass); color: var(--brass-bright) !important; }
.btn--block { display: block; width: 100%; text-align: center; }

/* -------------------------------- Sections --------------------------------- */
/* padding-top/bottom, non la shorthand "padding": questo elemento ha
   sempre anche la classe "wrap" (padding laterale) sullo stesso tag —
   la shorthand riscriverebbe anche i lati, azzerandoli. */
.section { padding-top: 52px; padding-bottom: 52px; position: relative; z-index: 1; }
.section--narrow { max-width: 700px; }
.section--cta {
  text-align: center; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 52px 32px; background: linear-gradient(160deg, var(--bg-1), var(--bg-0));
}
.section__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
/* Bug classico del flexbox: senza min-width:0 un titolo lungo si rifiuta
   di andare a capo e sporge fuori dal contenitore invece di restringersi
   — su schermi stretti tagliava il testo sul bordo. */
.section__head > * { min-width: 0; }
.section__intro { color: var(--ink-dim); max-width: 620px; }
.link-more { font-family: var(--font-mono); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }
.empty-state { color: var(--ink-faint); font-style: italic; }

/* ------------------------------- Chi siamo: foto ------------------------------ */
.about-photo {
  border-radius: var(--radius); overflow: hidden; margin: 6px 0 28px;
  border: 1px solid var(--line); aspect-ratio: 16/10; background: var(--bg-1);
}
.about-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-photo--placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  text-align: center; padding: 24px; color: var(--ink-faint);
  font-family: var(--font-mono); font-size: 0.85rem; border-style: dashed;
}
.about-photo--placeholder code {
  background: var(--bg-2); padding: 3px 8px; border-radius: 2px; font-size: 0.8rem; color: var(--ink-dim);
}

/* -------------------------------- Item cards -------------------------------- */
.items-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 30px; margin-top: 28px; }
.items-grid .item-card { opacity: 0; animation: reveal-up .7s cubic-bezier(.2,.7,.15,1) forwards; }
.items-grid .item-card:nth-child(1) { animation-delay: .03s; }
.items-grid .item-card:nth-child(2) { animation-delay: .1s; }
.items-grid .item-card:nth-child(3) { animation-delay: .17s; }
.items-grid .item-card:nth-child(4) { animation-delay: .24s; }
.items-grid .item-card:nth-child(5) { animation-delay: .31s; }
.items-grid .item-card:nth-child(6) { animation-delay: .38s; }
.items-grid .item-card:nth-child(n+7) { animation-delay: .42s; }

.item-card__link { text-decoration: none; color: inherit; display: block; }
.item-card__frame {
  position: relative; padding: 14px; background: var(--bg-1);
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.item-card:hover .item-card__frame { border-color: var(--brass-deep); transform: translateY(-4px); box-shadow: var(--shadow-2); }
.item-card__number {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.05em;
  color: var(--bg-0); background: var(--ink); padding: 2px 6px; border-radius: 2px;
  opacity: 0.88;
}
.item-card__img { position: relative; aspect-ratio: 1/1; overflow: hidden; background: var(--bg-2); }
.item-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; filter: saturate(0.94); }
.item-card:hover .item-card__img img { transform: scale(1.045); }
.item-card__img-placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); color: var(--ink-faint); font-size: 0.85rem;
}
.item-card__img-placeholder--large { aspect-ratio: 1/1; }
.item-card__body { padding: 16px 6px 6px; }
.item-card__category {
  font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--brass-bright); margin: 0 0 6px;
}
.item-card__body h3 { font-size: 1.08rem; margin-bottom: 6px; }
.item-card__excerpt { color: var(--ink-dim); font-size: 0.92rem; margin: 0; }

/* Timbro di stato: come marchiato a inchiostro su un cartellino, non una
   pillola colorata anonima. */
.stamp {
  position: absolute; bottom: 10px; right: 10px; z-index: 2;
  font-family: var(--font-mono); font-weight: 700; font-size: 0.66rem;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 5px 9px; border: 1.5px dashed currentColor; border-radius: 2px;
  transform: rotate(-5deg); background: var(--scrim);
  backdrop-filter: blur(1px);
}
.stamp--disponibile { color: var(--olive-bright); animation: lamp-pulse 3.2s ease-in-out infinite; }
.stamp--su_ordinazione { color: var(--brass-bright); }
.stamp--venduto { color: var(--rust-bright); }
.stamp--lg { font-size: 0.78rem; padding: 7px 13px; bottom: 16px; right: 16px; }
.product__info .stamp { position: static; display: inline-block; transform: rotate(-3deg); margin-bottom: 14px; background: none; backdrop-filter: none; }

/* --------------------------------- Filters ---------------------------------- */
.filters__label {
  font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--ink-faint); margin: 20px 0 0;
}
.filters { display: flex; flex-wrap: wrap; gap: 9px; margin: 10px 0 6px; }
.filter-chip {
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.03em;
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-strong);
  text-decoration: none; color: var(--ink-dim) !important; background: var(--bg-1);
}
.filter-chip.is-active { background: var(--brass); color: #211705 !important; border-color: var(--brass); }
/* Le chip di disponibilità, da attive, prendono il colore del timbro
   corrispondente invece del generico ottone: coerenza visiva col resto
   del catalogo. */
.filter-chip--disponibile.is-active { background: var(--olive-bright); border-color: var(--olive-bright); }
.filter-chip--su_ordinazione.is-active { background: var(--brass); border-color: var(--brass); }
.filter-chip--venduto.is-active { background: var(--rust-bright); border-color: var(--rust-bright); }

/* -------------------------------- Product page ------------------------------ */
.breadcrumb { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.04em; }
.product__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; margin-top: 14px; }
.product__frame {
  position: relative; padding: 18px; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius);
}
.product__main-img { aspect-ratio: 1/1; overflow: hidden; background: var(--bg-2); }
.product__main-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product__thumbs { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.product__thumb { padding: 0; border: 2px solid transparent; border-radius: 2px; overflow: hidden; background: none; cursor: pointer; width: 68px; height: 68px; opacity: 0.7; transition: opacity .15s, border-color .15s; }
.product__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product__thumb:hover { opacity: 1; }
.product__thumb.is-active { border-color: var(--brass); opacity: 1; }
.product__category { font-family: var(--font-mono); text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.09em; color: var(--brass-bright); }
.product__description { color: var(--ink-dim); }
.product__note { font-size: 0.85rem; color: var(--ink-faint); margin-top: 16px; font-style: italic; }

/* "Ledger": specifiche con linea a puntini come un vecchio catalogo */
.ledger { margin: 22px 0; }
.ledger__row { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; }
.ledger__row dt {
  font-family: var(--font-mono); font-size: 0.8rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-faint); white-space: nowrap; margin: 0;
}
.ledger__leader { flex: 1; border-bottom: 1px dotted var(--line-strong); margin-bottom: 5px; min-width: 24px; }
.ledger__row dd { margin: 0; font-family: var(--font-text); color: var(--ink); }

/* ---------------------------------- Forms ------------------------------------ */
.form-row { margin-bottom: 18px; }
.form-row label, .form-row__label-static {
  display: block; font-family: var(--font-mono); font-weight: 700; text-transform: uppercase;
  font-size: 0.76rem; letter-spacing: 0.06em; margin-bottom: 8px; color: var(--ink-dim);
}
.form-row input[type=text], .form-row input[type=email], .form-row input[type=tel],
.form-row input[type=number], .form-row input[type=password], .form-row select, .form-row textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  font-family: var(--font-text); font-size: 1rem; background: var(--bg-1); color: var(--ink);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px rgba(207, 157, 67, 0.22);
}
.form-row textarea { resize: vertical; }
.form-row--checkbox label { display: flex; align-items: center; gap: 8px; font-weight: 400; text-transform: none; font-family: var(--font-text); }
.form-hint { font-size: 0.8rem; color: var(--ink-faint); margin: 4px 0 0; }
.form-errors {
  background: rgba(193, 86, 47, 0.12); border: 1px solid var(--rust); color: var(--rust-bright);
  border-radius: var(--radius); padding: 14px 18px; margin-bottom: 20px;
}
.form-errors ul { margin: 4px 0 0; padding-left: 18px; }
.form-privacy-note { font-size: 0.82rem; color: var(--ink-faint); }
.contact-item-ref {
  background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 11px 16px; font-size: 0.92rem;
}

/* Cartellino dei recapiti diretti (email/telefono/WhatsApp), al posto
   di un modulo di contatto. */
.contact-card { margin: 22px 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg-1); }
.contact-card__row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 20px; text-decoration: none; border-bottom: 1px solid var(--line);
  transition: background-color .15s ease;
}
.contact-card__row:last-child { border-bottom: none; }
a.contact-card__row:hover { background: var(--bg-2); }
.contact-card__row--static { cursor: default; }
.contact-card__label {
  font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--ink-faint); white-space: nowrap;
}
.contact-card__value { font-family: var(--font-text); color: var(--ink); font-size: 1.02rem; text-align: right; }
a.contact-card__row .contact-card__value { color: var(--brass-bright); }

/* --------------------------------- Contact modal ------------------------------- */
dialog.contact-modal {
  border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 26px;
  background: var(--bg-1); color: var(--ink); max-width: 440px; width: calc(100% - 40px);
  box-shadow: var(--shadow-2);
}
dialog.contact-modal::backdrop { background: rgba(10, 8, 6, 0.55); }
dialog.contact-modal[open] { animation: reveal-up 0.25s ease forwards; }
.contact-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.contact-modal__head h2 { font-size: 1.2rem; margin-bottom: 0; }
.contact-modal__close {
  background: none; border: none; color: var(--ink-faint); font-size: 1.6rem; line-height: 1;
  cursor: pointer; padding: 0 2px;
}
.contact-modal__close:hover { color: var(--brass-bright); }
.contact-modal .contact-card { margin: 16px 0; }

/* --------------------------------- Footer -------------------------------------- */
.site-footer { border-top: 1px solid var(--line); margin-top: 48px; padding: 28px 0; position: relative; z-index: 1; }
.site-footer__inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-family: var(--font-mono); font-size: 0.76rem; color: var(--ink-faint); }
.site-footer__links a { color: var(--ink-faint) !important; text-decoration: none; }
.site-footer__links a:hover { color: var(--brass-bright) !important; }

.privacy-edit-note { background: rgba(207, 157, 67, 0.12); border: 1px solid var(--brass-deep); border-radius: var(--radius); padding: 12px 16px; font-size: 0.9rem; }
.privacy-updated { color: var(--ink-faint); font-size: 0.85rem; }

/* ============================ Admin / backoffice ============================ */
.admin-body { background: var(--bg-0); }
.admin-header { background: var(--bg-1); border-bottom: 1px solid var(--line); }
.admin-header__inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; flex-wrap: wrap; gap: 12px; }
.admin-nav { display: flex; align-items: center; gap: 20px; }
.admin-nav a { color: var(--ink-dim) !important; text-decoration: none; font-family: var(--font-mono); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; }
.admin-nav a:hover { color: var(--brass-bright) !important; }
.admin-nav__logout { margin: 0; }
.link-button { background: none; border: none; color: var(--ink-dim); font-family: var(--font-mono); font-size: 0.82rem; cursor: pointer; padding: 0; text-decoration: underline; text-transform: uppercase; letter-spacing: 0.05em; }
.link-button--danger { color: var(--rust-bright); }

.admin-main { padding: 36px 24px 64px; }
.admin-main--narrow { max-width: 780px; margin: 0 auto; }
.admin-main__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 10px; }

.admin-table { width: 100%; border-collapse: collapse; background: var(--bg-1); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.admin-table th, .admin-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; font-size: 0.92rem; }
.admin-table th { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); }
.admin-table__thumb img { border-radius: 2px; object-fit: cover; }
.admin-table__thumb-placeholder { width: 56px; height: 56px; background: var(--bg-2); border-radius: 2px; }
.admin-table__actions { display: flex; gap: 14px; align-items: center; }
.admin-table__actions form { margin: 0; }
.admin-table a { color: var(--ink) !important; }

.admin-form { background: var(--bg-1); padding: 28px; border-radius: var(--radius); border: 1px solid var(--line); }
.admin-form__actions { display: flex; gap: 14px; margin-top: 12px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

.admin-image-list { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; }
.admin-image-list__item { text-align: center; }
.admin-image-list__item img { border-radius: 2px; object-fit: cover; display: block; margin-bottom: 6px; border: 1px solid var(--line); }
.admin-image-list__item form { margin: 0; }

.admin-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.admin-login__card { background: var(--bg-1); padding: 40px; border-radius: var(--radius); width: 100%; max-width: 380px; border: 1px solid var(--line); box-shadow: var(--shadow-2); }
.admin-login__card h1 { text-transform: none; }
.admin-login__sub { color: var(--ink-faint); font-family: var(--font-mono); font-size: 0.82rem; margin-top: -8px; }
.admin-login__back { display: inline-block; margin-top: 18px; font-size: 0.85rem; color: var(--ink-dim); }

/* ---------------------------------- Responsive --------------------------------- */
.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 860px) {
  .product__grid { grid-template-columns: 1fr; gap: 28px; }
  .hero { padding: 72px 0 48px; }
  h1 { font-size: 2.2rem; }
  .hero__ring--a { width: 220px; height: 220px; top: -40px; right: -40px; }
  .hero__ring--b { width: 130px; height: 130px; top: 20px; right: 20px; }
}

@media (max-width: 640px) {
  :root { font-size: 16px; }

  .site-header__inner { padding: 14px 22px; gap: 10px; }
  .brand__mark { font-size: 1.15rem; }
  .brand__tagline { font-size: 0.85rem; }

  /* Menu ad hamburger: la nav diventa un pannello a tendina nascosto di
     default, aperto dal pulsante; vedi public/js/nav-toggle.js */
  .nav-toggle { display: flex; }
  .main-nav {
    display: none; flex-direction: column; gap: 2px; width: 100%;
    order: 5; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
  }
  .main-nav.is-open { display: flex; }
  .main-nav a { padding: 11px 4px; border-bottom: 1px solid var(--line); }
  .main-nav a:last-child { border-bottom: none; }

  .hero { padding: 52px 0 40px; }
  .hero__curl { display: none; } /* decorazione superflua sotto ai contenuti su schermi piccoli */
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { text-align: center; }

  .section { padding-top: 36px; padding-bottom: 36px; }
  .items-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
  .item-card__body { padding: 12px 4px 4px; }

  .product__frame { padding: 12px; }
  .product__thumb { width: 56px; height: 56px; }

  .contact-card__row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .contact-card__value { text-align: left; }

  .admin-main { padding: 24px 16px 48px; }
  .admin-main__head { flex-direction: column; align-items: stretch; }
  .admin-form { padding: 20px; }

  dialog.contact-modal { padding: 20px; width: calc(100% - 24px); }

  /* Aree di tocco un po' più generose sui link/pulsanti principali */
  .btn { padding: 13px 22px; }
  .main-nav a { padding: 6px 2px; }
}