/* ============================================================
   CANDARIA — Carta di lusso italiana
   Palette: avorio, oro opaco, marrone-grigio caldo
   ============================================================ */

:root{
  --avorio:#F5F1E7;
  --avorio-alta:#FBF8F2;
  --oro:#A88C5D;
  --oro-scuro:#8A7046;
  --oro-tenue:rgba(168,140,93,.30);
  --inchiostro:#524B3F;
  --inchiostro-quiete:#847B69;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Jost","Segoe UI",Helvetica,Arial,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--avorio);
  color:var(--inchiostro);
  font-family:var(--sans);
  font-weight:300;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:var(--oro-scuro)}
::selection{background:var(--oro);color:#FDFAF4}
:focus-visible{outline:2px solid var(--oro);outline-offset:3px}

.contenitore{max-width:1080px;margin:0 auto;padding:0 28px}
section[id]{scroll-margin-top:84px}

/* ---- Testata ---- */
.testata{
  position:sticky;top:0;z-index:40;
  background:rgba(245,241,231,.93);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--oro-tenue);
}
.testata-interna{display:flex;align-items:center;justify-content:space-between;gap:24px;height:66px}
.marchio{
  font-family:var(--serif);font-weight:500;font-size:1.3rem;
  letter-spacing:.3em;color:var(--oro-scuro);text-decoration:none;white-space:nowrap;
}
.menu{display:flex;gap:28px}
.menu a{
  font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--inchiostro-quiete);text-decoration:none;transition:color .25s;
}
.menu a:hover{color:var(--oro-scuro)}
.testata-destra{display:flex;align-items:center;gap:20px}
.lingue{display:flex;align-items:center;gap:7px;color:var(--inchiostro-quiete);font-size:.8rem}
.lingue span{opacity:.5}
.lingue button{
  background:none;border:none;cursor:pointer;font:inherit;color:var(--inchiostro-quiete);
  letter-spacing:.08em;padding:2px 0;border-bottom:1px solid transparent;transition:color .25s;
}
.lingue button.attiva{color:var(--oro-scuro);border-bottom-color:var(--oro)}

/* ---- Pulsanti ---- */
.pulsante{
  display:inline-block;background:var(--oro);border:1px solid var(--oro);color:#FDFAF4;
  font-family:var(--sans);font-weight:400;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;padding:15px 30px;border-radius:2px;cursor:pointer;
  transition:background .25s,border-color .25s;
}
.pulsante:hover{background:var(--oro-scuro);border-color:var(--oro-scuro)}
.pulsante--linea{background:transparent;color:var(--oro-scuro)}
.pulsante--linea:hover{background:var(--oro);border-color:var(--oro);color:#FDFAF4}
.pulsante--testata{padding:8px 16px;font-size:.7rem;letter-spacing:.16em}

/* ---- Apertura ---- */
.eroe{padding:76px 0 92px}
.eroe-griglia{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.eroe-logo{width:min(300px,72%);height:auto;margin-bottom:36px}
h1{
  font-family:var(--serif);font-weight:500;color:var(--inchiostro);
  font-size:clamp(2.4rem,4.8vw,3.5rem);line-height:1.1;letter-spacing:.01em;
}
h1 em{color:var(--oro-scuro)}
.eroe-sotto{margin-top:24px;max-width:46ch;color:var(--inchiostro-quiete)}
.eroe-azioni{margin-top:36px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.nota{font-size:.85rem;color:var(--inchiostro-quiete);letter-spacing:.05em}
.eroe-immagine{background:var(--avorio-alta);border:1px solid var(--oro-tenue);padding:14px}
.eroe-immagine img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}

/* ---- Sezioni ---- */
.sezione{padding:92px 0;border-top:1px solid var(--oro-tenue)}
.occhiello{
  font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--oro);margin-bottom:16px;
}
h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.8rem,3vw,2.35rem);line-height:1.22;color:var(--inchiostro)}
.intestazione{max-width:660px;margin-bottom:54px}
.intestazione .intro{margin-top:16px;color:var(--inchiostro-quiete)}

/* ---- Perché: tre schede ---- */
.griglia3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.scheda{background:var(--avorio-alta);border:1px solid var(--oro-tenue);padding:38px 32px}
.scheda svg{width:30px;height:30px;color:var(--oro);margin-bottom:22px}
.scheda h3{font-family:var(--serif);font-weight:500;font-size:1.35rem;margin-bottom:10px}
.scheda p{color:var(--inchiostro-quiete);font-size:.95rem}

/* ---- Prodotto ---- */
.griglia-prod{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start;margin-bottom:60px}
.vetrina{background:var(--avorio-alta);border:1px solid var(--oro-tenue);padding:14px}
.vetrina img{width:100%;height:auto;object-fit:cover}
.vetrina--rotolo img{aspect-ratio:4/5}
.vetrina--scatola img{aspect-ratio:3/2}
.vetrina figcaption{padding:16px 8px 6px;font-size:.88rem;color:var(--inchiostro-quiete);letter-spacing:.03em}
.vetrina figcaption strong{
  display:block;font-family:var(--serif);font-weight:500;font-size:1.15rem;
  color:var(--inchiostro);letter-spacing:.03em;margin-bottom:3px;
}
.scheda-blocco{max-width:780px}
.scheda-blocco h3{font-family:var(--serif);font-weight:500;font-size:1.45rem;margin-bottom:14px}
.scheda-tecnica{font-size:.95rem}
.scheda-tecnica .riga{
  display:flex;justify-content:space-between;gap:30px;
  padding:13px 2px;border-bottom:1px solid var(--oro-tenue);
}
.scheda-tecnica dt{color:var(--inchiostro-quiete);letter-spacing:.04em}
.scheda-tecnica dd{text-align:right}

/* ---- Per chi ---- */
.lista-chi{max-width:780px}
.voce{
  display:flex;justify-content:space-between;align-items:baseline;gap:30px;
  padding:20px 2px;border-bottom:1px solid var(--oro-tenue);
}
.voce h3{font-family:var(--serif);font-weight:500;font-size:1.5rem}
.voce p{color:var(--inchiostro-quiete);font-size:.95rem;text-align:right}

/* ---- Come funziona ---- */
.griglia4{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.passo .numero{font-family:var(--serif);font-size:2.7rem;line-height:1;color:var(--oro)}
.passo h3{font-family:var(--serif);font-weight:500;font-size:1.3rem;margin:14px 0 8px}
.passo p{color:var(--inchiostro-quiete);font-size:.93rem}

/* ---- Contatti ---- */
.contatti-griglia{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start}
.contatti-info p{color:var(--inchiostro-quiete);margin-top:16px}
.contatti-info p strong{color:var(--inchiostro);font-weight:400;letter-spacing:.03em}
.modulo{background:var(--avorio-alta);border:1px solid var(--oro-tenue);padding:40px 36px}
.modulo label{
  display:block;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--oro-scuro);margin:24px 0 4px;
}
.modulo .doppia{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.modulo input,.modulo textarea{
  width:100%;background:transparent;border:none;border-bottom:1px solid var(--oro-tenue);
  border-radius:0;padding:10px 2px;font:inherit;color:var(--inchiostro);
}
.modulo input:focus,.modulo textarea:focus{outline:none;border-bottom-color:var(--oro)}
.modulo textarea{min-height:112px;resize:vertical}
.modulo .azioni{margin-top:30px}
.modulo .azioni .nota{display:block;margin-top:14px}

/* ---- Piede ---- */
.piede{border-top:1px solid var(--oro-tenue);padding:60px 0 44px;text-align:center}
.piede img{width:112px;height:auto;margin:0 auto 26px}
.piede p{font-size:.86rem;color:var(--inchiostro-quiete);letter-spacing:.04em;margin-top:6px}
.piede .riga-marchio{font-family:var(--serif);font-size:1.08rem;color:var(--inchiostro);letter-spacing:.06em}
.piede a{color:var(--oro-scuro)}

/* ---- Pagina privacy ---- */
.pagina{max-width:760px;margin:0 auto;padding:76px 28px 40px}
.pagina h1{font-size:clamp(2rem,4vw,2.7rem);margin-bottom:18px}
.pagina .intro{color:var(--inchiostro-quiete);margin-bottom:44px}
.pagina h2{font-size:1.4rem;margin:40px 0 10px}
.pagina .torna{margin-top:52px}

/* ---- Comparsa discreta ---- */
@media (prefers-reduced-motion:no-preference){
  .eroe-testo,.eroe-immagine{animation:apparire .7s ease both}
  .eroe-immagine{animation-delay:.12s}
}
@keyframes apparire{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---- Adattamento ---- */
@media (max-width:920px){
  .menu{display:none}
  .eroe-griglia{grid-template-columns:1fr;gap:48px}
  .griglia3{grid-template-columns:1fr}
  .griglia-prod{grid-template-columns:1fr}
  .griglia4{grid-template-columns:repeat(2,1fr)}
  .contatti-griglia{grid-template-columns:1fr;gap:44px}
  .voce{flex-direction:column;align-items:flex-start;gap:4px}
  .voce p{text-align:left}
}
@media (max-width:600px){
  body{font-size:16px}
  .contenitore{padding:0 20px}
  .testata-interna{height:58px}
  .marchio{font-size:1.1rem;letter-spacing:.24em}
  .eroe{padding:52px 0 68px}
  .sezione{padding:66px 0}
  .griglia4{grid-template-columns:1fr}
  .scheda-tecnica .riga{flex-direction:column;gap:2px;padding:12px 0}
  .scheda-tecnica dd{text-align:left}
  .modulo{padding:30px 22px}
  .modulo .doppia{grid-template-columns:1fr}
}
/* ── Pre-ordine (aggiunto 8/11/2026) ── */
.ordine-prodotti{display:grid;gap:18px;margin-bottom:34px}
.ordine-voce{display:grid;grid-template-columns:84px 1fr auto;gap:22px;align-items:center;padding:18px;border:1px solid var(--oro-tenue);background:var(--avorio)}
.ordine-voce img{width:84px;height:84px;object-fit:cover}
.ordine-voce h3{font-family:var(--serif);font-weight:500;font-size:1.3rem;line-height:1.2}
.ordine-prezzo{margin-top:6px;font-family:var(--serif);font-size:1.25rem;color:var(--oro-scuro)}
.ordine-prezzo span{font-family:var(--sans);font-size:.8rem;color:var(--inchiostro-quiete)}
.quantita{display:flex;align-items:center;border:1px solid var(--oro-tenue)}
.quantita button{width:44px;height:44px;background:transparent;border:0;font-size:1.2rem;color:var(--oro-scuro);cursor:pointer}
.quantita button:hover{background:var(--avorio-alta)}
.modulo .quantita input{width:52px;height:44px;border:0;border-left:1px solid var(--oro-tenue);border-right:1px solid var(--oro-tenue);text-align:center;padding:0;margin:0;-moz-appearance:textfield}
.quantita input::-webkit-outer-spin-button,.quantita input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ordine-logo,.ordine-accetto{display:flex!important;gap:12px;align-items:flex-start;text-transform:none!important;letter-spacing:0!important;font-size:.95rem!important;color:var(--inchiostro)!important;cursor:pointer}
.modulo .ordine-logo input,.modulo .ordine-accetto input{width:18px;height:18px;margin-top:3px;flex:none;accent-color:var(--oro)}
.ordine-accetto{margin-top:26px}
.ordine-totale{max-width:420px;margin:0 0 40px auto;font-size:.98rem}
.ordine-totale .riga{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--oro-tenue)}
.ordine-totale .riga--forte{font-family:var(--serif);font-size:1.4rem;border-bottom:0;padding-top:14px}
.ordine-totale .nota{margin-top:8px}
.ordine-titoletto{font-family:var(--serif);font-weight:500;font-size:1.35rem;margin-bottom:6px}
.ordine-errore{margin-top:18px;color:#8a3b2e;font-size:.95rem}
@media (max-width:600px){
  .ordine-voce{grid-template-columns:64px 1fr;gap:14px}
  .ordine-voce img{width:64px;height:64px}
  .ordine-voce .quantita{grid-column:1 / -1;justify-self:start}
  .ordine-totale{max-width:none}
}
.ordine-totale .riga--acconto{border-top:1px solid var(--oro-tenue);color:var(--oro-scuro);font-weight:400}