/* =========================================================
   ALFIO VOX — design system
   Concept: "quaderno d'artista" — un taccuino da galleria,
   non un sito da agenzia. Asimmetria, carta calda, inchiostro,
   tipografia scultorea. Niente eyebrow, niente card-in-card,
   niente step finti.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,340;0,9..144,460;0,9..144,600;1,9..144,420&family=Inter:wght@400;500&display=swap');

:root{
  --ink:       #18140F;   /* nero caldo, non tinto piatto */
  --ink-soft:  #322B22;
  --paper:     #EEE3D0;   /* carta calda, non il beige-IA #F4F1EA */
  --paper-2:   #E4D5BC;
  --terracotta:#B2552F;
  --gold:      #9A7526;
  --olive:     #4F6138;
  --muted:     #6E6252;
  --line:      rgba(24,20,15,.14);
  --serif: 'Fraunces', serif;
  --sans:  'Inter', sans-serif;

  /* movimento — Emil Kowalski / skill "animate" */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* ---------- dark mode: stessi accenti, carta e inchiostro invertiti ---------- */
:root[data-theme="dark"]{
  --ink:       #EFE6D6;
  --ink-soft:  #CFC3AC;
  --paper:     #16130F;
  --paper-2:   #211B14;
  --muted:     #948871;
  --line:      rgba(239,230,214,.14);
}
:root[data-theme="dark"] body{background:var(--paper);}
:root[data-theme="dark"] .lightbox{background:rgba(0,0,0,.97);}
:root[data-theme="dark"] header.solid{background:rgba(22,19,15,.92);}
:root[data-theme="dark"] .cart-drawer, :root[data-theme="dark"] .reader{box-shadow:-30px 0 60px rgba(0,0,0,.5);}
:root[data-theme="dark"] .season-frame img, :root[data-theme="dark"] .g-item img, :root[data-theme="dark"] .prod-img img{filter:brightness(.92);}

/* Neutralizza CSS globali di WordPress/Divi (color:#333 su h1-h6 ecc.) che il
   dequeue non rimuove del tutto e che altrimenti spezzano il contrasto in
   dark mode. NIENTE !important qui: basta un filo di specificità in più
   (elemento+elemento) per battere la regola generica di Divi/WP, ma restare
   comunque sotto qualunque nostra regola locale più specifica (es.
   ".cta-band h2", che deve poter restare chiara su fondo scuro). */
html body :is(h1,h2,h3,h4,h5,h6){color:var(--ink);}
html body a.brand,
html body .cart-toggle,
html body .theme-toggle,
html body .index-toggle{color:var(--ink);}
header.panel-open a.brand,
header.panel-open .cart-toggle,
header.panel-open .theme-toggle,
header.panel-open .index-toggle{color:#EEE3D0;}
/* Sezioni con testo chiaro su fondo scuro "fisso" (non legato al tema):
   qui il colore va sempre preso dalla sezione, non dalla regola generica sopra. */
.cta-band :is(h1,h2,h3,h4,h5,h6){color:var(--paper);}

/* texture carta — grana intenzionale, non fotografica: un rumore SVG leggerissimo
   usato solo sulle superfici piatte (mai sopra le immagini) */
.grain{position:relative;}
.grain::before{
  content:'';
  position:absolute; inset:0; pointer-events:none; z-index:1;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- reveal allo scroll: un solo momento orchestrato per sezione ---------- */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);}
.reveal.in{opacity:1; transform:translateY(0);}
.reveal-group .reveal:nth-child(1){transition-delay:0ms;}
.reveal-group .reveal:nth-child(2){transition-delay:70ms;}
.reveal-group .reveal:nth-child(3){transition-delay:140ms;}
.reveal-group .reveal:nth-child(4){transition-delay:210ms;}
@media (prefers-reduced-motion: reduce){
  .reveal{transition:opacity .3s ease; transform:none;}
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
:focus-visible{outline:2px solid var(--terracotta); outline-offset:3px;}

.wrap{max-width:1240px; margin:0 auto; padding:0 40px;}
@media (max-width:720px){ .wrap{padding:0 22px;} }

h1,h2,h3,.serif{font-family:var(--serif);}

/* ---------- header: indice a scomparsa, non nav orizzontale ---------- */
header{position:fixed; inset:0 0 auto 0; z-index:80; padding:26px 0; mix-blend-mode:normal;}
.header-row{display:flex; justify-content:space-between; align-items:center;}
.header-actions{display:flex; align-items:center;}
.brand{font-family:var(--serif); font-weight:460; font-size:1.15rem; letter-spacing:.01em; color:var(--ink);}
header.solid{background:rgba(238,227,208,.94); backdrop-filter:blur(6px); box-shadow:0 1px 0 var(--line);}

.index-toggle{display:flex; align-items:center; gap:10px; background:none; border:none; cursor:pointer; color:var(--ink); font-family:var(--sans); font-size:.86rem;}
.index-toggle .bars{display:flex; flex-direction:column; gap:4px;}
.index-toggle .bars span{width:22px; height:1.5px; background:currentColor; transition:transform .3s ease, opacity .3s ease;}
.index-toggle[aria-expanded="true"] .bars span:nth-child(1){transform:translateY(5.5px) rotate(45deg);}
.index-toggle[aria-expanded="true"] .bars span:nth-child(2){opacity:0;}
.index-toggle[aria-expanded="true"] .bars span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);}

.index-panel{
  /* colori fissi, non legati al tema chiaro/scuro del sito: il menu resta sempre "nero" */
  position:fixed; inset:0; z-index:70; background:#18140F; color:#EEE3D0; overflow:hidden;
  display:flex; align-items:flex-end; padding:110px 0 70px;
  transform:translateY(-100%); transition:transform .55s cubic-bezier(.65,0,.2,1);
}
.index-panel.open{transform:translateY(0);}
.index-panel .wrap{position:relative; z-index:1; width:100%; display:flex; justify-content:space-between; gap:60px; flex-wrap:wrap;}
.index-list{display:flex; flex-direction:column; gap:6px;}
.index-list a{font-family:var(--serif); font-size:clamp(2.1rem,6vw,4rem); font-weight:460; line-height:1.08; color:#EEE3D0; opacity:.78; transition:opacity .3s var(--ease-out), transform .3s var(--ease-out), color .3s ease; display:inline-block;}
.index-list a:hover{opacity:1; color:var(--gold); transform:translateX(10px);}
.index-meta{align-self:flex-end; text-align:right; font-size:.82rem; color:#B9AF9B; max-width:220px; line-height:1.6;}
.index-meta .langs{margin-top:22px; display:flex; gap:10px; justify-content:flex-end;}
.index-meta .langs span{cursor:pointer; opacity:.6;}
.index-meta .langs span.active{opacity:1; text-decoration:underline; color:#EEE3D0;}

/* ---------- sfondo video del menu — in trasparenza, con deriva d'inchiostro come fallback ---------- */
.index-panel-bg{position:absolute; inset:0; z-index:0; overflow:hidden;}
.index-panel-bg video{position:absolute; top:50%; left:50%; min-width:100%; min-height:100%; width:auto; height:auto; transform:translate(-50%,-50%); object-fit:cover; opacity:.32; mix-blend-mode:screen;}
.index-panel-bg::after{content:''; position:absolute; inset:-10%; background:radial-gradient(circle at 26% 24%, rgba(178,85,47,.28), transparent 58%), radial-gradient(circle at 78% 78%, rgba(79,97,56,.22), transparent 55%); animation:panelDrift 16s ease-in-out infinite alternate;}
.index-panel-bg::before{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(24,20,15,.2), rgba(24,20,15,.75)); z-index:1;}
@keyframes panelDrift{ from{transform:scale(1) translate(0,0);} to{transform:scale(1.18) translate(-4%,3%);} }
@media (prefers-reduced-motion: reduce){ .index-panel-bg::after{animation:none;} }

/* ---------- footer ---------- */
footer{padding:80px 0 40px; border-top:1px solid var(--line); margin-top:0;}
.footer-top{display:flex; justify-content:space-between; gap:50px; flex-wrap:wrap; padding-bottom:44px;}
.footer-brand h3{font-size:1.5rem; font-weight:460; margin:0 0 8px;}
.footer-brand p{margin:0; color:var(--muted); font-size:.92rem;}
.footer-cols{display:flex; gap:64px; flex-wrap:wrap;}
.footer-col h4{font-size:.76rem; margin:0 0 14px; color:var(--muted); font-weight:500;}
.footer-col a{display:block; margin-bottom:9px; font-size:.92rem; color:var(--ink-soft);}
.footer-col a:hover{color:var(--terracotta);}
.footer-bottom{display:flex; justify-content:space-between; padding-top:24px; border-top:1px solid var(--line); font-size:.82rem; color:var(--muted); flex-wrap:wrap; gap:12px;}
.footer-langs{display:flex; gap:10px;}
.footer-langs span.active{color:var(--ink); text-decoration:underline;}

/* ---------- utility ---------- */
.section{padding:130px 0;}
@media (max-width:720px){ .section{padding:80px 0;} }
.link-line{display:inline-block; border-bottom:1px solid var(--muted); padding-bottom:4px; font-size:.9rem; color:var(--muted);}
.link-line:hover{color:var(--ink); border-color:var(--ink);}

.lightbox{position:fixed; inset:0; background:rgba(16,13,9,.95); z-index:200; display:none; align-items:center; justify-content:center; padding:6vh 6vw; opacity:0; transition:opacity .25s ease;}
.lightbox.open{display:flex;}
.lightbox.on{opacity:1;}
.lightbox img{max-height:88vh; max-width:100%; box-shadow:0 40px 90px rgba(0,0,0,.5); transform:scale(.97); transition:transform .3s var(--ease-out);}
.lightbox.on img{transform:scale(1);}
.lightbox-close{position:absolute; top:28px; right:38px; color:var(--paper); font-size:.9rem; cursor:pointer; opacity:.75;}
.lightbox-close:hover{opacity:1;}

/* selettore lingua funzionante */
.langs span, .footer-langs span{cursor:pointer;}

html.no-scroll, html.no-scroll body{overflow:hidden;}

/* ---------- barra di lettura: un filo che si stende in cima, come un segnalibro ---------- */
.read-progress{position:fixed; top:0; left:0; height:2px; width:0%; background:var(--terracotta); z-index:300; transition:width .08s linear;}

/* ---------- cursore penna piuma — solo desktop con mouse fine ----------
   z-index sopra qualunque modale/cassetto: altrimenti sparisce dietro i
   pop-up e sembra impossibile capire dove si sta cliccando. */
.ink-cursor{position:fixed; top:0; left:0; width:32px; height:32px; pointer-events:none; z-index:500; transform:translate(-50%,-50%) rotate(-38deg); opacity:0; transition:opacity .25s ease, transform .12s var(--ease-out);}
.ink-cursor svg{width:100%; height:100%; color:var(--ink); filter:drop-shadow(0 3px 6px rgba(24,20,15,.35));}
.ink-cursor.show{opacity:1;}
.ink-cursor.pointer{transform:translate(-50%,-50%) rotate(-38deg) scale(1.3);}
.ink-cursor.pointer svg{color:var(--terracotta);}
@media (hover:none), (pointer:coarse){ .ink-cursor{display:none;} }
/* col cursore personalizzato attivo, il cursore di sistema resta nascosto ovunque */
html.has-custom-cursor, html.has-custom-cursor *{cursor:none !important;}

/* ---------- torna su ----------
   Più piccolo di prima (copriva la scritta del copyright), e si nasconde
   del tutto quando il footer entra in vista (vedi main.js). */
.back-to-top{position:fixed; left:22px; bottom:22px; width:38px; height:38px; border-radius:50%; background:var(--ink); color:var(--paper); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:150; opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility .3s, background .2s ease;}
.back-to-top svg{width:15px; height:15px;}
.back-to-top.show{opacity:1; visibility:visible; transform:translateY(0);}
.back-to-top.near-footer{opacity:0; visibility:hidden; transform:translateY(8px);}
.back-to-top:hover{background:var(--terracotta);}
@media (max-width:600px){ .back-to-top{left:14px; bottom:14px; width:34px; height:34px;} }

/* ---------- pulsanti flottanti: WhatsApp + scrivi un messaggio ----------
   Al centro verticale della pagina — segue lo scroll ma non copre mai
   il selettore lingua in fondo al pannello indice, né l'hero in alto.
   Una linguetta "segnalibro" sopra i due pulsanti permette di nasconderli
   e richiamarli a piacere; all'arrivo sul sito sono sempre visibili di
   default. Colori fissi (non var(--ink)): restano identici in entrambi
   i temi, non si invertono col chiaro/scuro del sito. */
.fab-wrap{position:fixed; right:26px; top:50%; transform:translateY(-50%); z-index:150; display:flex; flex-direction:column; align-items:center; gap:10px;}
.fab-tab{width:30px; height:30px; background:#18140F; color:#EEE3D0; border:none; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(24,20,15,.28); flex:none;}
.fab-tab svg{width:13px; height:13px; transition:transform .3s var(--ease-out);}
.fab-wrap.collapsed .fab-tab svg{transform:rotate(180deg);}
.fab-stack{display:flex; flex-direction:column; align-items:center; gap:10px; overflow:hidden; max-height:220px; opacity:1; transition:max-height .35s var(--ease-out), opacity .3s ease, margin .35s ease;}
.fab-wrap.collapsed .fab-stack{max-height:0; opacity:0; pointer-events:none;}
.fab{display:flex; align-items:center; justify-content:center; border-radius:50%; color:#fff; box-shadow:0 14px 30px rgba(24,20,15,.32); transition:transform .3s var(--ease-out), box-shadow .3s ease; border:none; cursor:pointer; font-family:inherit; flex:none;}
.fab:hover{transform:scale(1.08);}
.fab-message{width:46px; height:46px; background:#18140F;}
.fab-whatsapp{width:56px; height:56px; background:#25D366;}
@media (max-width:600px){ .fab-wrap{right:14px;} .fab-whatsapp{width:48px; height:48px;} .fab-message{width:40px; height:40px;} }

/* ---------- selettore tema chiaro/scuro ---------- */
.theme-toggle{background:none; border:none; cursor:pointer; color:var(--ink); margin-right:22px; padding:4px; display:flex; align-items:center; justify-content:center;}
.theme-toggle svg{width:18px; height:18px;}
.theme-toggle .icon-moon{display:none;}
:root[data-theme="dark"] .theme-toggle .icon-sun{display:none;}
:root[data-theme="dark"] .theme-toggle .icon-moon{display:block;}

/* ---------- banner cookie ---------- */
.cookie-banner{position:fixed; left:0; right:0; bottom:0; z-index:400; background:#18140F; color:#EEE3D0; padding:24px 40px; display:flex; justify-content:space-between; align-items:center; gap:26px; flex-wrap:wrap; transform:translateY(100%); transition:transform .5s var(--ease-in-out);}
.cookie-banner.show{transform:translateY(0);}
.cookie-banner p{margin:0; font-size:.86rem; max-width:620px; line-height:1.55; color:#CFC4AC;}
.cookie-banner a{color:#EEE3D0; text-decoration:underline;}
.cookie-actions{display:flex; gap:12px; flex-shrink:0;}
.cookie-btn{font-size:.82rem; padding:11px 22px; cursor:pointer; font-family:var(--sans); border:1px solid rgba(238,227,208,.35); background:none; color:#EEE3D0; transition:background .2s ease, border-color .2s ease;}
.cookie-btn.accept{background:var(--terracotta); border-color:var(--terracotta);}
.cookie-btn:hover{border-color:#EEE3D0;}
.cookie-btn.accept:hover{opacity:.9;}
.cookie-close{position:absolute; top:10px; right:14px; background:none; border:none; color:#CFC4AC; font-size:1.1rem; cursor:pointer; line-height:1; padding:6px;}
.cookie-close:hover{color:#EEE3D0;}
@media (max-width:700px){ .cookie-banner{padding:34px 22px 20px;} }

/* ---------- header: quando il pannello indice è aperto, resta sempre leggibile
   (il pannello ha uno sfondo scuro fisso, quindi qui forziamo icone/testo chiari
   a prescindere dal tema chiaro/scuro del sito — altrimenti in light mode il
   testo scuro sparisce sullo sfondo scuro del pannello dietro di lui) ---------- */
header.panel-open .brand,
header.panel-open .index-toggle,
header.panel-open .cart-toggle,
header.panel-open .theme-toggle{color:#EEE3D0 !important;}

/* ---------- modali condivisi: contatti e newsletter ---------- */
.av-modal-overlay{position:fixed; inset:0; background:rgba(16,13,9,.55); z-index:390; opacity:0; visibility:hidden; transition:opacity .35s ease;}
.av-modal-overlay.open{opacity:1; visibility:visible;}
.av-modal{position:fixed; top:50%; left:50%; transform:translate(-50%,-46%); width:min(520px,92vw); max-height:88vh; overflow-y:auto; background:var(--paper); z-index:395; padding:40px 36px; box-shadow:0 40px 90px rgba(24,20,15,.35); opacity:0; visibility:hidden; transition:opacity .35s var(--ease-out), transform .35s var(--ease-out), visibility .35s;}
.av-modal.open{opacity:1; visibility:visible; transform:translate(-50%,-50%);}
.av-modal-close{position:absolute; top:16px; right:18px; background:none; border:none; font-size:1.1rem; cursor:pointer; color:var(--muted);}
.av-modal-close:hover{color:var(--ink);}
.av-modal h3{font-size:1.5rem; font-weight:460; margin:0 0 8px;}
.av-modal p.av-modal-sub{color:var(--muted); font-size:.9rem; margin:0 0 26px; line-height:1.5;}
.av-field{margin-bottom:18px;}
.av-field label{display:block; font-size:.8rem; color:var(--muted); margin-bottom:7px;}
.av-field input, .av-field select, .av-field textarea{width:100%; border:none; border-bottom:1px solid var(--line); background:none; padding:9px 2px; font-family:var(--sans); font-size:.98rem; color:var(--ink); transition:border-color .2s ease;}
.av-field input:focus, .av-field select:focus, .av-field textarea:focus{outline:none; border-color:var(--terracotta);}
.av-field textarea{resize:vertical; min-height:90px;}
.av-field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:480px){ .av-field-row{grid-template-columns:1fr;} }
.av-checkbox{display:flex; align-items:flex-start; gap:10px; margin:22px 0; font-size:.82rem; color:var(--ink-soft); line-height:1.5;}
.av-checkbox input{margin-top:3px; flex:none;}
.av-checkbox a{text-decoration:underline;}
.av-modal-submit{width:100%; background:var(--ink); color:var(--paper); border:none; padding:14px; font-size:.92rem; cursor:pointer; font-family:var(--sans); transition:background .2s ease;}
.av-modal-submit:hover{background:var(--terracotta);}
.av-modal-submit:disabled{opacity:.6; cursor:default;}
.av-modal-msg{margin-top:16px; font-size:.86rem; padding:12px 14px; display:none;}
.av-modal-msg.show{display:block;}
.av-modal-msg.ok{background:rgba(79,97,56,.12); color:var(--olive);}
.av-modal-msg.err{background:rgba(178,85,47,.1); color:var(--terracotta);}

/* ---------- newsletter come banner con bottone (home + blog) ---------- */
.news-cta{display:inline-block; margin-top:8px; background:var(--terracotta); color:var(--paper); border:none; padding:14px 30px; font-size:.9rem; cursor:pointer; font-family:var(--sans); transition:background .2s ease;}
.news-cta:hover{background:var(--ink);}
.cta-band .news-cta{background:var(--paper); color:var(--ink);}
.cta-band .news-cta:hover{background:var(--gold); color:var(--paper);}

/* ---------- pulsanti magnetici — micro-spostamento verso il cursore ---------- */
[data-magnetic]{display:inline-block; transition:transform .35s var(--ease-out);}

/* ---------- angolo piegato: motivo "taccuino", applicato a card e riquadri opere ---------- */
.dogear{position:relative;}
.dogear::after{content:''; position:absolute; top:0; right:0; width:22px; height:22px; background:linear-gradient(135deg, transparent 50%, rgba(24,20,15,.10) 50.5%, rgba(24,20,15,.16) 100%); pointer-events:none; transition:width .3s var(--ease-out), height .3s var(--ease-out);}
@media (hover:hover) and (pointer:fine){ .dogear:hover::after{width:32px; height:32px;} }

/* ---------- rilegatura a spirale — decorazione di apertura pagina, evoca il quaderno ---------- */
.spiral-edge{position:fixed; top:0; left:0; bottom:0; width:26px; display:flex; flex-direction:column; align-items:center; justify-content:space-evenly; z-index:60; pointer-events:none; opacity:.5;}
.spiral-edge span{width:9px; height:9px; border-radius:50%; border:1.5px solid var(--muted); background:var(--paper);}
@media (max-width:900px){ .spiral-edge{display:none;} }

/* ---------- toast: foglietto d'appunto ---------- */
.toast-host{position:fixed; left:50%; bottom:30px; transform:translateX(-50%); z-index:400; display:flex; flex-direction:column; gap:10px; align-items:center; pointer-events:none;}
.toast{background:var(--ink); color:var(--paper); font-size:.86rem; padding:13px 22px; box-shadow:0 18px 40px rgba(24,20,15,.3); opacity:0; transform:translateY(14px) scale(.97); transition:opacity .35s var(--ease-out), transform .35s var(--ease-out); display:flex; align-items:center; gap:10px;}
.toast.in{opacity:1; transform:translateY(0) scale(1);}
.toast-check{color:var(--gold);}

/* ---------- carrello: pulsante header ---------- */
.cart-toggle{position:relative; display:flex; align-items:center; justify-content:center; background:none; border:none; cursor:pointer; color:var(--ink); margin-right:22px; padding:4px;}
.cart-count{position:absolute; top:-6px; right:-8px; background:var(--terracotta); color:var(--paper); font-size:.64rem; font-family:var(--sans); min-width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; padding:0 2px; opacity:0; transform:scale(.5); transition:opacity .25s var(--ease-out), transform .25s var(--ease-out);}
.cart-count.show{opacity:1; transform:scale(1);}

/* ---------- carrello: cassetto laterale ---------- */
.cart-overlay{position:fixed; inset:0; background:rgba(16,13,9,.45); z-index:290; opacity:0; visibility:hidden; transition:opacity .35s ease;}
.cart-overlay.open{opacity:1; visibility:visible;}
.cart-drawer{position:fixed; top:0; right:0; bottom:0; width:min(420px,92vw); background:var(--paper); z-index:295; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .5s var(--ease-in-out); box-shadow:-30px 0 60px rgba(24,20,15,.25);}
.cart-drawer.open{transform:translateX(0);}
.cart-drawer-head{display:flex; justify-content:space-between; align-items:center; padding:26px 28px; border-bottom:1px solid var(--line);}
.cart-drawer-head h3{margin:0; font-size:1.3rem; font-weight:460;}
.cart-close{background:none; border:none; font-size:1.1rem; cursor:pointer; color:var(--muted);}
.cart-close:hover{color:var(--ink);}
.cart-drawer-body{flex:1; overflow-y:auto; padding:10px 28px;}
.cart-empty{color:var(--muted); font-size:.94rem; line-height:1.6; padding:30px 0;}
.cart-line{display:grid; grid-template-columns:64px 1fr auto; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); align-items:center;}
.cart-line img{width:64px; height:64px; object-fit:cover;}
.cart-line-info h4{margin:0 0 4px; font-size:.98rem; font-weight:500;}
.cart-line-format{font-size:.76rem; color:var(--muted);}
.cart-line-qty{display:flex; align-items:center; gap:10px; margin-top:8px; font-size:.86rem;}
.qty-btn{width:22px; height:22px; border:1px solid var(--line); background:none; cursor:pointer; color:var(--ink); font-size:.9rem; line-height:1;}
.qty-btn:hover{border-color:var(--ink);}
.cart-line-right{text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:8px;}
.cart-line-right strong{font-family:var(--serif); font-style:italic; font-size:1rem;}
.cart-line-remove{background:none; border:none; color:var(--muted); font-size:.76rem; cursor:pointer; text-decoration:underline;}
.cart-line-remove:hover{color:var(--terracotta);}
.cart-drawer-foot{padding:22px 28px 28px; border-top:1px solid var(--line);}
.cart-subtotal{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:16px; font-size:1rem;}
.cart-subtotal strong{font-family:var(--serif); font-style:italic; font-size:1.3rem;}
.cart-checkout{width:100%; background:var(--ink); color:var(--paper); border:none; padding:15px; font-size:.92rem; cursor:pointer; font-family:var(--sans); transition:background .2s ease;}
.cart-checkout:hover{background:var(--terracotta);}
.cart-note{font-size:.76rem; color:var(--muted); margin:14px 0 0; line-height:1.5;}

/* ---------- FAQ — fisarmonica coerente con lo stile "quaderno" ---------- */
.faq{padding:0 0 150px;}
.faq-list{max-width:820px;}
.faq-item{border-top:1px solid var(--line); padding:26px 0;}
.faq-list .faq-item:last-child{border-bottom:1px solid var(--line);}
.faq-item summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:baseline; gap:24px; font-size:1.15rem; font-weight:460; font-family:var(--serif);}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-plus{font-size:1.2rem; color:var(--muted); transition:transform .25s var(--ease-out); flex:none;}
.faq-item[open] .faq-plus{transform:rotate(45deg);}
.faq-item p{margin:16px 0 0; font-size:.96rem; line-height:1.75; color:var(--ink-soft); max-width:640px;}

/* ---------- galleria Dipinti — griglia ordinata, non più a piena pagina ---------- */
.paintings-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:34px 28px;}
@media (max-width:940px){ .paintings-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .paintings-grid{grid-template-columns:1fr;} }
.painting-card{display:flex; flex-direction:column;}
.painting-frame{aspect-ratio:4/5; overflow:hidden; background:var(--paper-2); position:relative;}
.painting-frame img{width:100%; height:100%; object-fit:cover; cursor:pointer; transition:transform .5s var(--ease-out);}
@media (hover:hover) and (pointer:fine){ .painting-card:hover .painting-frame img{transform:scale(1.045);} }
.painting-caption{display:flex; justify-content:space-between; align-items:baseline; padding:14px 2px 0; gap:10px;}
.painting-caption .p-title{font-family:var(--serif); font-style:italic; font-size:1rem; color:var(--ink);}
.painting-caption .p-meta{font-size:.76rem; color:var(--muted); white-space:nowrap;}
.paintings-series-label{margin:76px 0 30px; font-size:.8rem; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); border-top:1px solid var(--line); padding-top:26px;}

/* pill filtro categorie — usate in Poesie e Blog */
.filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:50px;}
.filter-pill{font-size:.82rem; padding:8px 18px; border:1px solid var(--line); background:none; color:var(--ink-soft); cursor:pointer; font-family:var(--sans); transition:background .2s ease, color .2s ease, border-color .2s ease;}
.filter-pill:hover{border-color:var(--ink);}
.filter-pill.active{background:var(--ink); color:var(--paper); border-color:var(--ink);}
[data-cat]{transition:opacity .3s ease; }
[data-cat].hide{display:none;}