/* NODO Bimbi · il sito (prototipo locale, 21/10). Sottomarchio editoriale: Cormorant per i titoli, Manrope per il testo,
   carta calda, un colore per porta. Le foto sono solo nostre (render CGI e foto già del progetto): niente illustrazioni. */
:root {
  --carta: #f5f0e8; --carta2: #ece4d8; --bianco: #fbf8f3; --ink: #2b2521; --tenue: #74685f; --riga: #ddd3c5;
  --arriva: #c07c5f; --cresce: #5f8264; --immagina: #7563a0; --festeggia: #a77d22; --resta: #7a4c3a; --segreto: #2f4f6a;
  --serif: "Cormorant Garamond", Cormorant, Georgia, serif; --sans: Manrope, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--carta); color: var(--ink); font: 16px/1.6 var(--sans); }
a { color: inherit; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; margin: 0; text-wrap: balance; letter-spacing: -.005em; }
p { margin: 0; }
.k { font: 600 11px var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--tenue); }
.wrap { max-width: 1240px; margin: 0 auto; padding-left: max(20px, 4vw); padding-right: max(20px, 4vw); }
.proto { position: fixed; left: 14px; bottom: 14px; z-index: 50; background: var(--ink); color: var(--bianco); font: 500 12px var(--sans); padding: 7px 12px; border-radius: 999px; }
.proto b { color: #e9c97e; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* il nome che manca: un invito a scriverlo */
.nm-vuoto { display: inline-block; border-bottom: 1.5px dashed currentColor; opacity: .7; font-style: italic; }

/* testata */
.testata { position: sticky; top: 0; z-index: 20; background: rgba(245,240,232,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--riga); }
.testata .wrap { display: flex; align-items: center; gap: 22px; height: 64px; }
.marchio { font: 700 12px var(--sans); letter-spacing: .32em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.marchio i { font: italic 400 21px var(--serif); letter-spacing: 0; text-transform: none; margin-left: 6px; }
.testata nav { display: flex; gap: 20px; margin-left: 10px; }
.testata nav a { font: 700 11.5px var(--sans); letter-spacing: .2em; text-decoration: none; color: var(--tenue); padding: 6px 0; border-bottom: 2px solid transparent; }
.testata nav a:hover, .testata nav a[aria-current="page"] { color: var(--ink); border-color: var(--c, var(--ink)); }
.testata .dx { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.testata .regala { font: 600 13px var(--sans); text-decoration: none; }
.testata form { display: flex; }
.testata input[type="search"] { width: 150px; border: 0; border-bottom: 1px solid var(--riga); background: transparent; font: 14px var(--sans); padding: 6px 2px; color: var(--ink); }
.testata .pnome { font: 500 13px var(--sans); color: var(--tenue); white-space: nowrap; }
.testata .pnome input { width: 7.5em; border: 0; border-bottom: 1px solid var(--riga); background: transparent; font: italic 500 17px var(--serif); color: var(--ink); padding: 2px; }
.menu-btn { display: none; }

/* bottoni */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; background: var(--ink); color: var(--bianco); text-decoration: none; font: 700 12px var(--sans); letter-spacing: .16em; text-transform: uppercase; border: 0; cursor: pointer; }
.btn.chiaro { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

/* foto con le zone del nome (stessa tecnica della V3) */
.foto-nome { position: relative; overflow: hidden; background: #2a2420; }
.foto-nome img { width: 100%; height: 100%; object-fit: cover; }
.zona { visibility: hidden; position: absolute; left: 0; top: 0; transform-origin: 0 0; display: grid; place-items: center; pointer-events: none; }
.zona b { white-space: nowrap; line-height: 1; font-weight: inherit; }
.zona.impresso b { font: 600 1em var(--serif); letter-spacing: .16em; text-transform: uppercase; color: #5d3f2c; mix-blend-mode: multiply; opacity: .92; text-shadow: 0 -.035em 0 rgba(30,15,5,.45), 0 .045em .02em rgba(255,244,228,.55); }
.zona.inciso b { font: 600 1em var(--sans); letter-spacing: .3em; text-transform: uppercase; color: #e9e5dc; opacity: .88; text-shadow: 0 .04em 0 rgba(0,0,0,.25); }
.zona.inchiostro b { font: 500 1em Caveat, cursive; color: #233a66; mix-blend-mode: multiply; opacity: .9; white-space: pre; text-align: center; line-height: 1.05; }
.zona.stampa b { font: 600 1em Fredoka, system-ui, sans-serif; color: #3d4a5c; mix-blend-mode: multiply; }
.zona.inciso_legno b { font: 600 1em var(--serif); letter-spacing: .06em; color: #4a2c18; mix-blend-mode: multiply; opacity: .82; text-shadow: 0 .04em .02em rgba(255,236,210,.5), 0 -.03em .01em rgba(40,20,5,.5); }
.zona b.imprime { animation: imprime 1.1s cubic-bezier(.2,.7,.2,1) both; }
@keyframes imprime { 0% { opacity: 0; filter: blur(5px); } 60% { opacity: .95; filter: blur(0); } }

/* sezioni */
.sez { padding-block: clamp(70px, 10vw, 130px); }
.sez-testa { display: grid; gap: 12px; margin-bottom: clamp(30px, 4vw, 50px); max-width: 760px; }
.sez-testa h2 { font-size: clamp(38px, 5vw, 68px); line-height: 1; }
.sez-testa h2 em { font-style: italic; }
.sez-testa p { color: var(--tenue); font-size: 17px; max-width: 62ch; }

/* le schede prodotto: SOLO con foto vera (render), il nome scritto sulla foto */
.griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 22px; }
.card { position: relative; display: grid; grid-template-rows: auto 1fr; background: transparent; border: 0; text-align: left; padding: 0; cursor: pointer; font: inherit; color: var(--ink); min-width: 0; }
.card .cop-f { aspect-ratio: 4 / 5; max-width: 100%; }
.card .cop-f img { transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
.card:hover .cop-f img { transform: scale(1.03); }
.card .corpo { padding: 16px 2px 4px; display: grid; gap: 6px; align-content: start; }
.card .mondo { font: 700 10px var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--tenue); }
.card h3 { font: italic 400 clamp(27px, 2.3vw, 32px)/1.05 var(--serif); }
.card .nmb { font-style: normal; font-weight: 600; }
.card .corpo p { font-size: 15.5px; line-height: 1.5; color: #4f463f; }
.card .piede { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 2px; font-size: 13px; }
.card .piede b { font: 700 16px var(--sans); white-space: nowrap; }
.card .piede span { text-align: right; color: var(--tenue); font-size: 13px; line-height: 1.35; }
.badges { display: flex; flex-wrap: wrap; gap: 5px; }
.badges:empty { display: none; }
.badge { font: 700 9.5px var(--sans); letter-spacing: .14em; text-transform: uppercase; padding: 4px 7px; background: var(--carta2); color: var(--tenue); }
.badge.firma { background: var(--ink); color: #e9c97e; } .badge.segreto { background: var(--segreto); color: #fff; } .badge.anno { background: #e7efe5; color: var(--cresce); }
/* le idee senza foto: un elenco da indice editoriale, onesto */
.righe { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); column-gap: 40px; border-top: 1px solid var(--riga); margin-top: 26px; }
.foto-g + .righe { margin-top: 44px; }
.riga { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: baseline; padding: 18px 4px 18px 16px; border: 0; border-bottom: 1px solid var(--riga); background: transparent; text-align: left; font: inherit; color: var(--ink); cursor: pointer; position: relative; min-width: 0; }
.riga::before { content: ""; position: absolute; left: 0; top: 24px; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.riga:hover { background: var(--bianco); }
.riga .t { display: grid; gap: 4px; min-width: 0; }
.riga b { font: italic 500 23px/1.15 var(--serif); }
.riga b .nmb { font-style: normal; font-weight: 600; }
.riga small { font-size: 15px; line-height: 1.45; color: #5b5048; }
.riga .pz { font: 700 14px var(--sans); white-space: nowrap; color: var(--ink); }
.zona.serif b { font: italic 500 1em var(--serif); color: #3b3029; mix-blend-mode: multiply; opacity: .92; }
.zona.oro b { font: 500 1em var(--serif); color: #d8b878; white-space: pre; text-align: center; line-height: 1.12; letter-spacing: .02em; text-shadow: 0 -.02em 0 rgba(255,240,200,.55), 0 .03em .02em rgba(0,0,0,.35); }

/* finestra di dettaglio */
dialog.scheda { border: 0; padding: 0; max-width: min(860px, 94vw); width: 100%; max-height: 92vh; overflow: auto; background: var(--bianco); color: var(--ink); box-shadow: 0 40px 90px -40px rgba(0,0,0,.6); }
dialog.scheda::backdrop { background: rgba(30,25,22,.5); }
.scheda .sch-f { aspect-ratio: 16 / 10; max-width: 100%; }
.scheda .sch-f img { object-position: 50% 45%; }
.scheda .top { background: var(--c); color: var(--bianco); padding: 28px 30px; display: grid; gap: 8px; }
.scheda .top h3 { font: italic 400 clamp(32px, 4vw, 46px)/1.02 var(--serif); }
.scheda .top p { opacity: .9; }
.scheda .det { padding: 24px 30px 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px 24px; font-size: 14.5px; }
.scheda .det small { display: block; font: 700 10px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--tenue); margin-bottom: 2px; }
.scheda .azioni { padding: 0 30px 28px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.scheda .chiudi { position: absolute; right: 14px; top: 12px; background: rgba(255,255,255,.2); color: #fff; border: 0; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 18px; }
.scheda .nota { font-size: 12.5px; color: var(--tenue); }

/* piede */
.piede-sito { border-top: 1px solid var(--riga); padding-block: 40px 80px; font-size: 14px; color: var(--tenue); }
.piede-sito .wrap { display: flex; flex-wrap: wrap; gap: 14px 30px; justify-content: space-between; }

.griglia.tre-col { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
@media (max-width: 640px) {
  .griglia { gap: 26px; }
  .riga { padding: 15px 2px 15px 14px; grid-template-columns: 1fr; gap: 6px; }
  .riga b { font-size: 21px; }
  .riga small { font-size: 14px; }
  .proto { font-size: 10.5px; padding: 5px 9px; left: 8px; bottom: 8px; }
  /* in home le foto scorrono di lato, come una vetrina */
  .griglia.scorre { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * max(20px, 4vw)); padding-inline: max(20px, 4vw); scroll-padding-inline: max(20px, 4vw); padding-bottom: 6px; scrollbar-width: none; gap: 14px; }
  .griglia.scorre::-webkit-scrollbar { display: none; }
  .griglia.scorre .card { scroll-snap-align: start; }
}
@media (max-width: 980px) {
  .testata nav, .testata form { display: none; }
  .menu-btn { display: inline-flex; margin-left: auto; background: transparent; border: 1px solid var(--ink); padding: 7px 12px; font: 700 11px var(--sans); letter-spacing: .16em; cursor: pointer; color: var(--ink); }
  .testata .dx { display: none; }
  .testata.aperta .wrap { flex-wrap: wrap; height: auto; padding-block: 14px; }
  .testata.aperta nav { display: grid; width: 100%; gap: 6px; margin: 8px 0 0; }
  .testata.aperta .dx { display: flex; width: 100%; flex-wrap: wrap; margin: 6px 0 4px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .card, .zona b.imprime { transition: none; animation: none; } }

/* pagine interne: testata con foto, mondi, filtri, kit */
.testa-p { position: relative; min-height: min(70svh, 640px); display: grid; align-items: end; color: #fff; background: var(--c); overflow: hidden; }
.testa-p > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.testa-p::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,16,13,.85), rgba(20,16,13,.15) 65%), linear-gradient(0deg, color-mix(in srgb, var(--c) 40%, transparent), transparent); }
.testa-p.senza-foto::after { background: radial-gradient(120% 90% at 85% 0%, rgba(255,255,255,.14), transparent 60%); }
.testa-p .wrap { position: relative; z-index: 1; width: 100%; padding-block: 120px clamp(36px, 6vw, 70px); display: grid; gap: 14px; }
.testa-p .k { color: rgba(255,255,255,.82); }
.testa-p .k a { text-decoration: none; }
.testa-p h1 { font-size: clamp(46px, 7vw, 104px); line-height: .95; max-width: 15ch; }
.testa-p h1 em { font-style: italic; }
.testa-p p { font: italic 400 clamp(21px, 2vw, 27px)/1.35 var(--serif); max-width: 46ch; opacity: .94; }
.testa-p label { display: flex; align-items: baseline; gap: 12px; margin-top: 6px; font: 700 11px var(--sans); letter-spacing: .26em; text-transform: uppercase; }
.testa-p label input { border: 0; border-bottom: 1px solid rgba(255,255,255,.6); background: transparent; color: #fff; font: italic 500 28px var(--serif); letter-spacing: 0; text-transform: none; width: 9em; max-width: 60vw; padding: 2px 0 6px; outline: none; }
.testa-p label input::placeholder { color: rgba(255,255,255,.55); }
.mondi-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.mondo-c { position: relative; min-height: 340px; display: grid; align-content: end; gap: 8px; padding: 26px; color: #fff; background: var(--c); text-decoration: none; overflow: hidden; }
.mondo-c img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.mondo-c::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,16,13,.85), rgba(20,16,13,.1) 70%); }
.mondo-c.tipo::after { background: radial-gradient(110% 80% at 90% 0%, rgba(255,255,255,.16), transparent 60%); }
.mondo-c:hover img { transform: scale(1.04); }
.mondo-c > :not(img) { position: relative; z-index: 1; }
.mondo-c h3 { font: italic 400 clamp(32px, 3vw, 42px)/1 var(--serif); }
.mondo-c p { font-size: 15px; opacity: .9; max-width: 44ch; }
.mondo-c .n { font: 700 10.5px var(--sans); letter-spacing: .22em; text-transform: uppercase; opacity: .85; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.chip { padding: 10px 15px; border: 1px solid var(--riga); background: var(--bianco); font: 600 13.5px var(--sans); color: var(--ink); cursor: pointer; text-decoration: none; }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"], .chip[aria-current="page"] { background: var(--ink); color: var(--bianco); border-color: var(--ink); }
.conta { font-size: 14px; color: var(--tenue); margin: -12px 0 22px; }
.kit-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.kit { border: 1px solid var(--riga); background: var(--bianco); padding: 24px; display: grid; gap: 10px; align-content: start; border-top: 4px solid var(--c); }
.kit h3 { font: italic 400 28px/1.05 var(--serif); }
.kit p { font-size: 14.5px; color: #4f463f; }
.kit b { font: 700 15px var(--sans); }
.vuoto { padding: 40px 0; color: var(--tenue); font: italic 400 24px var(--serif); }
.altri { display: flex; flex-wrap: wrap; gap: 10px; }
.altri a { padding: 12px 18px; color: #fff; background: var(--c); text-decoration: none; font: 700 12px var(--sans); letter-spacing: .18em; }