/* THE MEN'S LABEL — la veste della bottega (30/09/2026).
   Presa dalla porta d'ingresso approvata: notte blu-antracite sopra
   (#15171c), avorio della pietra illuminata (#f6f1e8), ottone per il
   nome e i dettagli (#c8a46e sul buio, #865c27 sul chiaro), legno scuro
   in basso (#1c1813). Cormorant Garamond per il nome e i titoli, come le
   lettere dell'insegna; Jost per tutto il resto. */
:root{
  --bg:#f6f1e8;--ink:#1c1813;--mut:#675e51;--line:#e2d7c5;--sab:#ece2d0;--br:#865c27;--foto:#efe7da;
  --notte:#15171c;--legno:#1c1813;--oro:#c8a46e;--avorio:#f6f1e8;
  --ottone:linear-gradient(180deg,#f0d59f 0%,#c99a52 48%,#8f6a35 100%);
  --rosso:#a3262a;--verde:#2f6b3f;--r:2px;--w:1320px;--pad:clamp(16px,3vw,32px);
  --serif:'Cormorant Garamond',Georgia,serif;--sans:Jost,system-ui,-apple-system,Segoe UI,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.55 var(--sans);overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.15;margin:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--ink);color:#fff;border:1px solid var(--ink);
  padding:15px 28px;font:500 13px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;border-radius:var(--r);transition:opacity .15s}
.btn:hover{opacity:.86}.btn.largo{width:100%}.btn.chiaro{background:#fff;color:var(--ink)}.btn.piccolo{padding:9px 14px}
.btn[disabled]{opacity:.45;cursor:default}
.link{text-decoration:underline;text-underline-offset:3px;font-size:13px;color:var(--mut)}
.icona{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center}
.icona svg,.cerca svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.solo-tel{display:none}

/* ---------- testa ---------- */
.barra-top{background:var(--ink);color:#fff;font-size:12.5px;letter-spacing:.06em;text-align:center;height:34px;overflow:hidden}
.barra-top .giro{position:relative;height:34px}
.barra-top span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(8px);transition:.5s}
.barra-top span.on{opacity:1;transform:none}
.testa{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;padding:12px var(--pad)}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:21px;white-space:nowrap}
.logo .mono{width:36px;height:36px;color:#2C2C2C;flex:none}
.nav{display:flex;justify-content:center;gap:26px;font-size:14px;letter-spacing:.04em}
.nav>a,.nav .voce>a{padding:10px 0;display:block}
.nav .voce{position:relative}
.nav .tendina{position:absolute;top:100%;left:-18px;background:#fff;border:1px solid var(--line);padding:10px 0;min-width:220px;
  opacity:0;pointer-events:none;transform:translateY(6px);transition:.15s;box-shadow:0 12px 30px rgba(0,0,0,.06)}
.nav .voce:hover .tendina,.nav .voce:focus-within .tendina{opacity:1;pointer-events:auto;transform:none}
.nav .tendina a{display:block;padding:8px 18px}.nav .tendina a:hover{background:var(--sab)}
.azioni{display:flex;align-items:center;gap:6px}
.cerca{display:flex;align-items:center;border-bottom:1px solid var(--line);margin-right:8px}
.cerca input{border:0;outline:0;font:inherit;font-size:14px;width:190px;padding:7px 4px;background:transparent}
.lingua{font-size:12.5px;letter-spacing:.1em;padding:8px}
.borsa{position:relative}
.borsa .conta{position:absolute;top:3px;right:1px;background:var(--ink);color:#fff;border-radius:9px;min-width:17px;height:17px;
  font:600 10.5px/17px var(--sans);text-align:center;padding:0 4px}

/* ---------- home ---------- */
.fascia{position:relative;height:min(78vh,760px);background:var(--foto);overflow:hidden}
.fascia .diapo{position:absolute;inset:0;background:var(--foto);opacity:0;transform:translateX(3%);transition:opacity .8s,transform .8s;display:flex;justify-content:center}
.fascia .diapo.on{opacity:1;transform:none;z-index:1}
.fascia img{height:100%;width:auto;max-width:100%;object-fit:contain}
.fascia .punti{position:absolute;bottom:18px;left:0;right:0;display:flex;justify-content:center;gap:8px;z-index:2}
.fascia .punti button{width:26px;height:3px;background:rgba(0,0,0,.2)}.fascia .punti button.on{background:var(--ink)}
.intro{text-align:center;padding:56px var(--pad) 40px;max-width:760px;margin:0 auto}
.intro h1{font-size:clamp(30px,4.2vw,50px)}.intro p{color:var(--mut);margin:14px 0 26px;font-size:16px}
.nastro{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;white-space:nowrap;padding:16px 0}
.nastro div{display:inline-flex;gap:56px;animation:scorri 40s linear infinite;padding-left:56px}
.nastro a{font-family:var(--serif);font-size:22px;letter-spacing:.02em;color:#3b3b3b}
.nastro:hover div{animation-play-state:paused}
@keyframes scorri{to{transform:translateX(-50%)}}
.blocco{max-width:var(--w);margin:0 auto;padding:56px var(--pad) 8px}
.blocco-testa{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:22px}
.blocco-testa h2{font-size:30px}.blocco-testa a{font-size:13px;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid}
.tessere{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tessera{position:relative;aspect-ratio:4/5;background:var(--foto);overflow:hidden}
.tessera img{width:100%;height:100%;object-fit:contain;transition:transform .5s}
.tessera:hover img{transform:scale(1.04)}
.tessera span{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;background:linear-gradient(transparent,rgba(0,0,0,.04));font-family:var(--serif);font-size:20px}
.garanzie{background:var(--sab);display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:36px var(--pad);margin-top:64px}
.garanzie div{max-width:280px;margin:0 auto;text-align:center}.garanzie b{display:block;font-weight:500;margin-bottom:4px}
.garanzie span{color:var(--mut);font-size:14px}

/* ---------- schede ---------- */
.griglia{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 18px}
.card{display:block}
.card-foto{position:relative;aspect-ratio:4/5;background:var(--foto);overflow:hidden}
.card-foto img{width:100%;height:100%;object-fit:contain;transition:opacity .35s}
.card-foto.provv img{padding:12%}
.card-foto .dietro{position:absolute;inset:0;opacity:0}
/* La foto di dietro si mostra solo quando e' arrivata (classe .pronta, app.js):
   prima la scheda restava vuota per un attimo. */
.card:hover .card-foto .dietro.pronta{opacity:1}
/* Le foto si fondono col fondo (multiply): sotto l'indossato il capo steso
   va spento, se no si vedono tutte e due mescolate. */
.card:hover .card-foto img:has(+ .dietro.pronta){opacity:0}
.bollino{position:absolute;top:10px;left:10px;background:#fff;font-size:11px;letter-spacing:.06em;padding:4px 8px;color:var(--br)}
.card-marca{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--br);margin-top:12px}
.card-nome{font-size:15px;margin-top:2px}
.card-prezzo{font-weight:500;margin-top:3px}
.card-colori{display:flex;gap:5px;margin-top:7px;align-items:center;font-size:12px;color:var(--mut)}
.card-colori i{width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}

/* ---------- elenco ---------- */
.elenco{max-width:var(--w);margin:0 auto;padding:36px var(--pad) 40px}
.elenco-testa{display:flex;align-items:baseline;gap:14px;margin-bottom:18px}
.elenco-testa h1{font-size:clamp(28px,3.4vw,40px)}.quanti{color:var(--mut);font-size:14px}
.filtri{display:flex;flex-wrap:wrap;gap:10px;align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:12px 0;margin-bottom:26px;position:relative}
.tendina-f{position:relative}
.tendina-f summary{list-style:none;cursor:pointer;border:1px solid var(--line);padding:9px 14px;font-size:14px;border-radius:var(--r)}
.tendina-f summary::-webkit-details-marker{display:none}
.tendina-f[open] summary{border-color:var(--ink)}
.tendina-f>div{position:absolute;top:calc(100% + 6px);left:0;z-index:5;background:#fff;border:1px solid var(--line);padding:12px;min-width:220px;
  max-height:340px;overflow:auto;box-shadow:0 12px 30px rgba(0,0,0,.07);display:grid;gap:6px}
.tendina-f .taglie-f{grid-template-columns:repeat(4,1fr);min-width:260px}
.spunta{display:flex;align-items:flex-start;gap:9px;font-size:14px;cursor:pointer;line-height:1.35}
.spunta input{accent-color:var(--ink);width:16px;height:16px;margin:1px 0 0;flex:none}
.ordina{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:14px}
.ordina span{color:var(--mut)}
.ordina select{font:inherit;border:1px solid var(--line);padding:8px 10px;background:#fff;border-radius:var(--r)}
.azzera{font-size:13px;text-decoration:underline;color:var(--mut)}
.vuoto{color:var(--mut);padding:40px 0;text-align:center}
.marchi{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.marchi a{border:1px solid var(--line);padding:22px;display:flex;flex-direction:column;gap:4px}
.marchi a:hover{border-color:var(--ink)}.marchi b{font-family:var(--serif);font-weight:400;font-size:22px}.marchi span{color:var(--mut);font-size:13px}

/* ---------- prodotto ---------- */
.briciole{max-width:var(--w);margin:0 auto;padding:18px var(--pad) 0;font-size:13px;color:var(--mut)}
.briciole a:hover{color:var(--ink)}
.prodotto{max-width:var(--w);margin:0 auto;padding:18px var(--pad) 40px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:56px;align-items:start}
.galleria{display:grid;grid-template-columns:76px 1fr;gap:14px;position:sticky;top:90px}
.miniature{display:flex;flex-direction:column;gap:10px}
.mini{aspect-ratio:4/5;background:var(--foto);border:1px solid transparent}.mini.on{border-color:var(--ink)}
.mini img{width:100%;height:100%;object-fit:contain}
.grande{position:relative;aspect-ratio:4/5;background:var(--foto);overflow:hidden;cursor:zoom-in}
.grande img{width:100%;height:100%;object-fit:contain;transition:transform .2s}
.grande.zoom{cursor:zoom-out}.grande.zoom img{transform:scale(1.8)}
/* Le foto provvisorie (le miniature del portale ordini): al centro,
   piccole abbastanza da non sgranarsi, e niente zoom. */
.galleria.provv .grande{cursor:default;background:#fff;border:1px solid var(--line)}
.galleria.provv .grande img{padding:14%}
.galleria.provv .grande.zoom img{transform:none}
.provv-nota{position:absolute;bottom:10px;right:12px;font-size:11px;color:var(--mut);letter-spacing:.04em}
.info .marca{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--br)}
.info h1{font-size:clamp(28px,3vw,38px);margin:8px 0 10px}
.info .prezzo{font-size:21px;font-weight:500}
.riga-lab{display:flex;justify-content:space-between;align-items:center;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin:26px 0 10px}
.riga-lab b{color:var(--ink);font-weight:500;text-transform:none;letter-spacing:0;font-size:14px}
.colori{display:flex;gap:8px;flex-wrap:wrap}
.colore{width:58px;aspect-ratio:4/5;background:var(--foto);border:1px solid var(--line)}
.colore.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.colore img{width:100%;height:100%;object-fit:contain}
.taglie{display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:8px}
.taglia{border:1px solid var(--line);padding:13px 4px;text-align:center;font-size:14px;position:relative;border-radius:var(--r)}
.taglia:hover{border-color:var(--ink)}
.taglia.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.taglia.no{color:#b5b1aa;text-decoration:line-through;cursor:default}
.taglia.no:hover{border-color:var(--line)}
.taglia small{position:absolute;left:0;right:0;bottom:-2px;font-size:9.5px;color:var(--br);text-decoration:none}
.taglia.on small{color:#e9dcc6}
.avviso{color:var(--rosso);font-size:14px;margin:10px 0 0}
.info #aggiungi{margin-top:18px}
.ritiro{margin-top:18px;border:1px solid var(--line);padding:14px 16px;font-size:14px;display:grid;gap:3px}
.ritiro span{color:var(--mut)}.ritiro .si{color:var(--verde)}
.info details{border-bottom:1px solid var(--line)}
.info details:first-of-type{margin-top:26px;border-top:1px solid var(--line)}
.info summary{padding:16px 0;cursor:pointer;font-size:14px;letter-spacing:.08em;text-transform:uppercase;list-style:none;display:flex;justify-content:space-between}
.info summary::after{content:'+'}.info details[open] summary::after{content:'–'}
.info details>div{padding-bottom:14px;color:#333;font-size:14.5px}
.info details p{margin:0 0 8px}
.barra-fissa{position:fixed;left:0;right:0;bottom:0;z-index:25;background:#fff;border-top:1px solid var(--line);display:flex;align-items:center;gap:14px;
  padding:10px var(--pad);transform:translateY(110%);transition:transform .25s}
.barra-fissa.su{transform:none}
.barra-fissa img{width:44px;height:55px;object-fit:contain;background:var(--foto)}
.barra-fissa div{flex:1;display:flex;flex-direction:column;font-size:14px;min-width:0}
.barra-fissa b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.guida{width:100%;border-collapse:collapse;font-size:14px}
.guida th,.guida td{border-bottom:1px solid var(--line);padding:9px 6px;text-align:left}
.guida th{font-weight:500;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.nota{color:var(--mut);font-size:13px}

/* ---------- cassetti (borsa, menu, guida) ---------- */
.velo{position:fixed;inset:0;background:rgba(20,20,20,.35);z-index:40;opacity:0;pointer-events:none;transition:opacity .2s}
body.aperto .velo{opacity:1;pointer-events:auto}
.cassetto{position:fixed;top:0;right:0;bottom:0;width:min(440px,100vw);background:#fff;z-index:41;transform:translateX(100%);
  transition:transform .28s ease;display:flex;flex-direction:column}
.cassetto.aperto{transform:none}
.cassetto.menu-tel{left:0;right:auto;transform:translateX(-100%)}.cassetto.menu-tel.aperto{transform:none}
.cas-testa{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);font-size:15px}
.cas-corpo{flex:1;overflow:auto;padding:18px}
.menu-tel nav{display:flex;flex-direction:column;padding:8px 18px;overflow:auto}
.menu-tel nav a{padding:13px 0;border-bottom:1px solid var(--line);font-size:16px}
.riga-b{display:grid;grid-template-columns:78px 1fr auto;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);font-size:14px}
.riga-b img{width:78px;aspect-ratio:4/5;object-fit:contain;background:var(--foto)}
.riga-b .m{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--br)}
.riga-b .d{color:var(--mut);font-size:13px}
.riga-b .q{display:inline-flex;align-items:center;border:1px solid var(--line);margin-top:8px}
.riga-b .q button{width:28px;height:28px}.riga-b .q span{min-width:24px;text-align:center}
.riga-b .togli{font-size:12px;color:var(--mut);text-decoration:underline;margin-top:8px;display:block}
.riga-b .fin{color:var(--rosso);font-size:12.5px}
.tot{padding:16px 0 4px;font-size:15px;display:grid;gap:6px}
.tot div{display:flex;justify-content:space-between}.tot .g{font-weight:600;font-size:17px;border-top:1px solid var(--line);padding-top:10px}
.soglia{background:var(--sab);padding:10px 12px;font-size:13.5px;margin-bottom:6px}
.soglia i{display:block;height:3px;background:rgba(0,0,0,.08);margin-top:7px}.soglia i b{display:block;height:100%;background:var(--ink)}

/* ---------- cassa ---------- */
.cassa{max-width:1120px;margin:0 auto;padding:36px var(--pad) 60px}
.cassa h1{font-size:36px;margin-bottom:22px}
#formCassa{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:48px;align-items:start}
fieldset{border:0;padding:0;margin:0 0 30px}
legend{font-family:var(--serif);font-size:22px;margin-bottom:14px}
.campo{display:grid;gap:5px;margin-bottom:12px;font-size:13px;color:var(--mut)}
.campo input,.campo select{font:inherit;font-size:16px;color:var(--ink);border:1px solid #d6d1c9;padding:12px;border-radius:var(--r);background:#fff;width:100%}
.campo input:focus,.campo select:focus{outline:0;border-color:var(--ink)}
.campo.male input{border-color:var(--rosso)}
.due{display:grid;grid-template-columns:1fr 1fr;gap:12px}.tre{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:12px}
.scelte{display:grid;gap:10px;margin-bottom:16px}
.scelta{display:flex;gap:12px;border:1px solid var(--line);padding:14px;cursor:pointer;align-items:flex-start;margin-bottom:8px}
.scelta:has(input:checked){border-color:var(--ink)}
.scelta input{accent-color:var(--ink);margin-top:3px}
.scelta span{display:grid}.scelta small{color:var(--mut);font-size:13px}
.cassa-dx{background:var(--sab);padding:24px;position:sticky;top:90px}
.cassa-dx h2{font-size:22px;margin-bottom:10px}
.cassa-dx .spunta{margin:16px 0}
.cassa-dx .nota{margin-top:12px}
.cassa-dx .riga-b{grid-template-columns:60px 1fr auto;border-color:rgba(0,0,0,.08)}.cassa-dx .riga-b img{width:60px;background:#fff}
.finiti{background:#fff;border-left:3px solid var(--rosso);padding:10px 12px;font-size:14px;margin:0 0 12px}

.esito,.testo{max-width:760px;margin:0 auto;padding:80px var(--pad);text-align:center}
.esito h1{font-size:40px;margin-bottom:14px}.esito p{color:var(--mut);margin-bottom:26px}
.esito form{display:flex;gap:10px;justify-content:center}
.testo{text-align:left;padding-top:48px}.testo h1{font-size:40px;margin-bottom:20px}.testo h2,.testo h3{font-size:21px;margin:26px 0 6px}
.testo p,.testo li{color:#333}

/* ---------- piede ---------- */
.piede{background:#141414;color:#d9d6d0;margin-top:80px;padding:56px var(--pad) 26px;font-size:14px}
.piede .colonne{max-width:var(--w);margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
.piede .logo{color:#fff}.piede .logo .mono{color:#fff}.piede .logo .mono text{fill:#141414}
.piede p{color:#9d9a94;max-width:320px}
.piede .piede-tit{font:500 12px/1.4 var(--sans);color:#fff;margin:0 0 12px;letter-spacing:.1em;text-transform:uppercase}
.piede a,.piede span{display:block;padding:4px 0;color:#bdb9b2}.piede a:hover{color:#fff}
.legale{max-width:var(--w);margin:40px auto 0;border-top:1px solid #2c2c2c;padding-top:18px;font-size:12px;color:#8a8780}
.whatsapp{position:fixed;right:18px;bottom:18px;z-index:24;width:52px;height:52px;border-radius:50%;background:#25D366;color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.whatsapp svg{width:28px;height:28px}
body.con-barra .whatsapp{bottom:88px}

/* ---------- telefono ---------- */
@media (max-width:1080px){
  .nav{display:none}.solo-tel{display:inline-flex}
  .testa{grid-template-columns:auto 1fr auto;gap:8px}
  .logo{justify-self:center}.logo span{font-size:18px}
  .cerca input{width:110px}
  .griglia{grid-template-columns:repeat(3,1fr)}
  .tessere{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  body{font-size:15px}
  .cerca{display:none}
  .logo .mono{width:30px;height:30px}
  .griglia{grid-template-columns:repeat(2,1fr);gap:22px 12px}
  .garanzie{grid-template-columns:1fr 1fr;gap:18px}
  .fascia{height:62vh}
  .prodotto{grid-template-columns:1fr;gap:22px;padding-top:10px}
  .galleria{grid-template-columns:1fr;position:static}
  .miniature{flex-direction:row;order:2;overflow-x:auto}.mini{width:62px;flex:none}
  #formCassa{grid-template-columns:1fr;gap:10px}
  .cassa-dx{position:static}
  .due,.tre{grid-template-columns:1fr}
  .piede .colonne{grid-template-columns:1fr 1fr}
  .ordina{margin-left:0;width:100%}
  .blocco-testa h2{font-size:25px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Le foto dei fornitori hanno il fondo bianco: "multiply" lo fonde col
   grigio caldo dei riquadri, cosi' non si vede il rettangolo bianco. */
.fascia img,.card-foto img,.tessera img,.grande img,.mini img,.colore img,.riga-b img,.barra-fissa img{mix-blend-mode:multiply}
.elenco-sotto{color:var(--mut);margin:-8px 0 18px}

/* ---------- HOME IMMERSIVA (prova) ----------
   Un cielo al tramonto disegnato col CSS (niente foto da scaricare):
   blu della sera in alto, nubi color terracotta, colline dorate in
   basso. Sopra, testo bianco leggero e vetro smerigliato. */
body.immersiva .barra-top{position:relative;z-index:31}
body.immersiva .testa{position:absolute;left:0;right:0;top:34px;background:transparent;border:0;backdrop-filter:none;color:#fff}
body.immersiva .testa .logo .mono{color:#fff}body.immersiva .testa .logo .mono text{fill:#1c2238}
body.immersiva .testa .cerca{border-color:rgba(255,255,255,.35)}body.immersiva .testa .cerca input{color:#fff}
body.immersiva .testa .cerca input::placeholder{color:rgba(255,255,255,.7)}
body.immersiva .testa .borsa .conta{background:#fff;color:var(--ink)}
body.immersiva .nav .tendina{color:var(--ink)}
.cielo{position:relative;min-height:max(100svh,720px);overflow:hidden;color:#fff;
  background:linear-gradient(180deg,#141b33 0%,#243154 34%,#4a4f6e 56%,#9b7a6c 72%,#caa07a 80%,#6b4a36 100%)}
.cielo .sfondo{position:absolute;inset:0}
/* Le nuvole: lunghe e sfilacciate come a fine giornata, rosate dove le
   prende l'ultimo sole. Niente contorni: solo luce. */
.velo-n{position:absolute;border-radius:50%;filter:blur(18px);
  background:radial-gradient(closest-side,rgba(240,150,110,.85),rgba(214,112,86,.45) 55%,transparent)}
.v1{left:18%;top:15%;width:58vw;height:5.5vw;transform:rotate(-2deg);animation:deriva 70s ease-in-out infinite alternate}
.v2{left:34%;top:23%;width:46vw;height:4vw;opacity:.8;transform:rotate(-1deg);animation:deriva 85s ease-in-out infinite alternate-reverse}
.v3{left:6%;top:30%;width:40vw;height:3.2vw;opacity:.6;animation:deriva 95s ease-in-out infinite alternate}
.v4{left:52%;top:9%;width:36vw;height:3vw;opacity:.45;filter:blur(24px);animation:deriva 110s ease-in-out infinite alternate-reverse}
.v5{left:22%;top:37%;width:64vw;height:4.5vw;opacity:.5;background:radial-gradient(closest-side,rgba(255,196,150,.8),transparent)}
.bagliore{position:absolute;left:-10%;right:-10%;top:36%;height:44%;background:radial-gradient(closest-side,rgba(255,196,150,.42),transparent)}
@keyframes deriva{to{transform:translateX(3vw) translateY(-.6vw)}}
.colline{position:absolute;left:0;right:0;bottom:0;width:100%;height:46%}
.cielo-dentro{position:relative;z-index:2;max-width:1440px;margin:0 auto;min-height:max(100svh,720px);padding:150px var(--pad) 120px;
  display:flex;align-items:center}
.saluto{max-width:640px}
.saluto .monogramma .mono{width:58px;height:58px;color:rgba(255,255,255,.92);margin-bottom:26px}
.saluto .monogramma .mono text{fill:#243154}
.saluto h1{font:300 clamp(46px,6.4vw,92px)/1.02 var(--sans);letter-spacing:-.02em;margin:0}
.saluto h1 em{font-style:normal;font-weight:400}
.saluto .chi{font-size:clamp(16px,1.35vw,19px);line-height:1.6;color:rgba(255,255,255,.86);margin:26px 0 0;max-width:540px;font-weight:300}
.saluto .domanda{color:rgba(255,255,255,.62);margin:34px 0 14px;font-size:18px;font-weight:300}
.pastiglie{display:flex;flex-wrap:wrap;gap:12px}
.pastiglie a,.vetro{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
.pastiglie a{padding:12px 24px;border-radius:30px;font-size:16px;transition:background .2s}
.pastiglie a:hover{background:rgba(255,255,255,.26)}
.vetro{position:absolute;border-radius:22px;color:#fff;box-shadow:0 20px 50px rgba(10,12,30,.18);transition:transform .25s}
.vetro:hover{transform:translateY(-3px)}
.carta-su{right:var(--pad);top:132px;display:flex;align-items:center;gap:16px;padding:14px 16px 14px 14px;max-width:440px}
.carta-su img{width:64px;height:64px;border-radius:14px;object-fit:contain;background:rgba(255,255,255,.9)}
.carta-su span{display:grid;gap:3px}.carta-su small{font-size:12px;color:rgba(255,255,255,.75);letter-spacing:.04em}
.carta-su b{font-weight:400;font-size:15.5px}
.pillola{background:#fff;color:var(--ink);border-radius:20px;padding:9px 18px;font-size:13.5px;white-space:nowrap;display:inline-block;justify-self:start}
.carta-giu{right:var(--pad);bottom:110px;width:330px;overflow:hidden;display:grid}
.carta-foto{height:230px;background:#e9e5de;overflow:hidden}
.carta-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;mix-blend-mode:multiply}
.carta-testo{padding:16px 18px 18px;display:grid;gap:6px}
.carta-testo b{font:300 26px/1.1 var(--sans);letter-spacing:-.01em}.carta-testo small{color:rgba(255,255,255,.8);font-size:13px;line-height:1.45}
.carta-testo .pillola{margin-top:6px}
.scorri{position:absolute;left:50%;bottom:74px;transform:translateX(-50%);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.75);display:flex;flex-direction:column;align-items:center;gap:8px}
.scorri i{width:1px;height:28px;background:linear-gradient(rgba(255,255,255,.8),transparent);animation:giu 2s infinite}
@keyframes giu{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
/* Il resto della home sale sopra il cielo come un foglio. */
.foglio{position:relative;z-index:3;background:#fff;border-radius:44px 44px 0 0;margin-top:-52px;padding-top:26px}
.foglio .nastro{border-top:0}
.foglio .garanzie{margin-top:40px}
@media (max-width:1080px){.carta-su{display:none}.carta-giu{width:270px}.carta-foto{height:170px}}
@media (max-width:760px){
  .cielo-dentro{padding:120px 20px 150px;align-items:flex-start}
  .carta-giu{display:none}
  .saluto .monogramma .mono{width:46px;height:46px;margin-bottom:18px}
  .pastiglie a{padding:10px 18px;font-size:15px}
  body.immersiva .testa .cerca{display:none}
}

/* Il saluto al cliente, sopra il titolo della home. */
.saluto-nome{margin:0 0 10px;font:300 clamp(18px,2vw,22px)/1.3 var(--sans);color:var(--mut);letter-spacing:.02em;
  opacity:0;transform:translateY(8px);transition:opacity 1s ease,transform 1s ease}
.saluto-nome b{font-family:var(--serif);font-weight:400;font-style:italic;color:var(--br)}
.saluto-nome.su{opacity:1;transform:none}

/* ================= LA VESTE DELLA BOTTEGA =================
   Tutto quello che segue fa somigliare il sito alla porta d'ingresso:
   stesso buio sopra, stesso ottone, stesse vetrine illuminate. */
h1,h2,h3{font-weight:500;letter-spacing:.005em}
::selection{background:#e9d6b0}

/* L'insegna: il nome in lettere d'ottone, EST. 1968 sotto */
.marchio{display:inline-flex;flex-direction:column;align-items:center;line-height:1}
.marchio b{font:600 21px/1 var(--serif);letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
  background:var(--ottone);-webkit-background-clip:text;background-clip:text;color:transparent;padding-left:.2em}
.marchio small{font:400 8.5px/1 var(--sans);letter-spacing:.42em;text-transform:uppercase;color:var(--oro);margin-top:6px;opacity:.8;padding-left:.42em}

/* In alto: il cielo della sera sopra la bottega */
.barra-top{background:#0f1014;color:var(--oro);letter-spacing:.14em;text-transform:uppercase;font-size:11px;
  border-bottom:1px solid rgba(200,164,110,.18)}
.testa{background:rgba(21,23,28,.97);color:#e9e1d3;border-bottom:1px solid rgba(200,164,110,.28);padding-block:14px}
.nav{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;gap:30px}
.nav>a,.nav .voce>a{color:rgba(239,231,218,.78);transition:color .2s}
.nav>a:hover,.nav .voce>a:hover{color:var(--oro)}
.nav .tendina{background:var(--notte);border-color:rgba(200,164,110,.25);box-shadow:0 18px 40px rgba(0,0,0,.35);text-transform:none;letter-spacing:.04em}
.nav .tendina a{color:rgba(239,231,218,.82)}.nav .tendina a:hover{background:rgba(200,164,110,.12);color:var(--oro)}
.cerca{border-color:rgba(200,164,110,.35)}.cerca input{color:#efe7da}.cerca input::placeholder{color:rgba(239,231,218,.45)}
.lingua{color:rgba(239,231,218,.8)}.lingua:hover{color:var(--oro)}
.borsa .conta{background:var(--oro);color:var(--notte)}
.testa .icona:hover{color:var(--oro)}

/* I pulsanti: come "Entra" sulla porta */
.btn{border-radius:999px;background:var(--ink);border-color:var(--ink);color:var(--avorio);letter-spacing:.2em;padding:16px 34px;transition:background .2s,border-color .2s,color .2s}
.btn:hover{opacity:1;background:var(--br);border-color:var(--br)}
.btn.chiaro{background:var(--avorio);color:var(--ink);border-color:var(--avorio)}
.btn.piccolo{padding:10px 18px}

/* La fascia in alto diventa una vetrina illuminata dentro la facciata */
.fascia{background:radial-gradient(ellipse 60% 70% at 50% 0%,#3a2f22 0%,var(--notte) 70%);height:min(76vh,720px);padding:0;
  --vetrina:34px max(clamp(16px,6vw,110px),calc((100% - 1180px)/2)) 44px}
/* La cornice e la luce stanno ferme; dentro cambiano solo i capi. */
.fascia::before{content:'';position:absolute;inset:var(--vetrina);background:radial-gradient(ellipse 70% 60% at 50% 8%,#fffaf0 0%,#f3e9d7 48%,#e1d0b3 100%);
  box-shadow:0 0 0 2px #b0823f,0 0 0 8px #1a1510,0 0 0 9px rgba(200,164,110,.35),0 30px 90px rgba(255,196,120,.16),inset 0 26px 40px -30px rgba(255,236,200,.9)}
/* Niente z-index ne' transform sulle diapositive: aprirebbero un livello a
   parte e il bianco delle foto non si fonderebbe piu' con la luce. */
.fascia .diapo,.fascia .diapo.on{inset:var(--vetrina);background:none;transform:none;z-index:auto;pointer-events:none}
.fascia .diapo.on{pointer-events:auto}
.fascia .punti{z-index:2}
.fascia img{padding:3% 0}
.fascia .punti{bottom:14px}
.fascia .punti button{background:rgba(200,164,110,.3)}.fascia .punti button.on{background:var(--oro)}

.intro{padding-top:64px}
.intro h1{font-size:clamp(34px,4.6vw,58px);font-weight:500}
.intro h1::after{content:'';display:block;width:56px;height:1px;background:var(--br);margin:22px auto 0}
.intro p{font-size:15.5px}

/* I marchi scorrono come lettere d'ottone su una fascia scura */
.nastro{background:var(--notte);border:0;padding:20px 0}
.nastro a{font:600 20px/1 var(--serif);letter-spacing:.22em;text-transform:uppercase;
  background:var(--ottone);-webkit-background-clip:text;background-clip:text;color:transparent}

.blocco-testa h2{font-size:clamp(28px,3vw,38px);font-weight:500}
.blocco-testa a{color:var(--br);border-color:rgba(154,108,46,.5);letter-spacing:.16em;font-size:12px}
.elenco-testa h1,.cassa h1,.esito h1,.testo h1{font-weight:500}

/* Ogni capo nel suo riquadro, illuminato dall'alto come in vetrina */
.card-foto,.tessera,.grande,.mini,.colore{background:radial-gradient(ellipse 80% 60% at 50% 0%,#fbf6ec 0%,var(--foto) 70%)}
.card-foto{transition:box-shadow .3s}
.card:hover .card-foto{box-shadow:0 0 0 1px rgba(176,130,63,.55),0 16px 34px -18px rgba(90,60,20,.35)}
.bollino{background:var(--avorio);color:var(--br)}
.card-nome{font-size:14.5px}
.tessera span{font:500 24px/1.1 var(--serif);background:linear-gradient(transparent,rgba(28,24,19,.06))}
.marchi a{background:#fbf7f0}.marchi a:hover{border-color:var(--br)}.marchi b{font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:20px}

/* Le garanzie sul legno scuro, con i titoli in ottone */
.garanzie{background:var(--legno);color:#e9e1d3;padding-block:44px}
.garanzie b{font:600 21px/1.2 var(--serif);color:var(--oro);letter-spacing:.02em;margin-bottom:6px}
.garanzie span{color:rgba(233,225,211,.62)}

/* Moduli, filtri, cassetti: avorio, non bianco */
.cassetto,.barra-fissa,.tendina-f>div{background:var(--bg)}
.cas-testa b{font:600 20px/1 var(--serif);letter-spacing:.04em}
.campo input,.campo select,.ordina select{background:#fffdf8}
.campo input:focus,.campo select:focus{border-color:var(--br)}
.scelta:has(input:checked),.tendina-f[open] summary,.colore.on,.mini.on,.taglia:hover{border-color:var(--br)}
.colore.on{box-shadow:inset 0 0 0 1px var(--br)}
.taglia.on{background:var(--ink);border-color:var(--ink);color:var(--avorio)}
.spunta input,.scelta input{accent-color:var(--br)}
.soglia i b{background:var(--br)}
.cassa-dx{background:var(--sab)}.cassa-dx .riga-b img{background:#fbf6ec}
legend{font-weight:600}
.info .prezzo{font:600 26px/1 var(--serif)}
.info summary{font-size:12.5px;letter-spacing:.16em}

/* In fondo, di nuovo la sera */
.piede{background:var(--notte);border-top:1px solid rgba(200,164,110,.25);color:#d9d1c3}
.piede .marchio{align-items:flex-start;margin-bottom:14px}
.piede .piede-tit{color:var(--oro);letter-spacing:.2em}
.piede a:hover{color:var(--oro)}
.legale{border-color:rgba(200,164,110,.18)}
.whatsapp{background:var(--legno);color:var(--oro);box-shadow:0 0 0 1px rgba(200,164,110,.5),0 8px 22px rgba(0,0,0,.25)}

@media (max-width:1080px){.marchio b{font-size:17px;letter-spacing:.16em}.marchio small{font-size:7.5px}}
@media (max-width:760px){
  .marchio b{font-size:14.5px;letter-spacing:.13em}.marchio small{letter-spacing:.34em;margin-top:5px}
  .fascia{height:60vh;--vetrina:22px 16px 36px}
  .nastro a{font-size:16px}
}

/* ================= L'OMINO =================
   Mezzo nascosto dietro il bordo in basso a destra; sbuca per il cucu',
   quando si prova un capo e quando si apre il suo pannello. */
.omino{position:fixed;right:0;bottom:10px;z-index:35;width:0;height:0}
body.con-barra .omino{bottom:84px}
.omino-tasto{position:absolute;right:0;bottom:0;width:78px;height:118px;overflow:hidden;display:block;cursor:pointer}
.omino-corpo{position:absolute;left:8px;bottom:4px;width:60px;height:96px;display:block;
  transform:translateX(38px) rotate(-16deg);transform-origin:50% 100%;transition:transform .55s cubic-bezier(.3,1.4,.5,1)}
.omino-tasto:hover .omino-corpo,.omino-tasto:focus-visible .omino-corpo{transform:translateX(26px) rotate(-10deg)}
.omino.fuori .omino-corpo{transform:none}
.omino-corpo .mascotte-svg{filter:drop-shadow(0 6px 10px rgba(28,24,19,.25))}
.m-gamba,.m-braccio{transform-box:fill-box}.m-gamba{transform-origin:50% 0}.m-braccio{transform-origin:50% 8%}
.omino-corpo.saluta .m-avanti{animation:oSaluto .38s ease-in-out 6 alternate .45s}
@keyframes oSaluto{from{transform:rotate(-150deg)}to{transform:rotate(-195deg)}}
.omino-corpo.gira .mascotte-svg{animation:oGira .7s ease-in-out}
@keyframes oGira{0%{transform:scaleX(1)}25%{transform:scaleX(-.15) translateY(-4px)}50%{transform:scaleX(-1) translateY(-6px)}75%{transform:scaleX(.2) translateY(-3px)}100%{transform:none}}
.omino-fumetto{position:absolute;right:74px;bottom:70px;width:max-content;max-width:min(250px,calc(100vw - 110px));
  background:var(--avorio);color:var(--ink);border:1px solid rgba(176,130,63,.55);border-radius:16px 16px 4px 16px;
  padding:10px 14px;font-size:14px;line-height:1.4;box-shadow:0 12px 30px rgba(28,24,19,.18);
  opacity:0;transform:translateY(8px) scale(.96);transform-origin:100% 100%;transition:opacity .3s,transform .3s;pointer-events:none}
.omino-fumetto.su{opacity:1;transform:none}
.omino-fumetto b{font-family:var(--serif);font-size:17px;font-weight:600;color:var(--br)}
.omino-pannello{position:absolute;right:14px;bottom:128px;width:min(340px,calc(100vw - 28px));max-height:calc(100vh - 170px);overflow:auto;
  background:var(--bg);color:var(--ink);border:1px solid rgba(176,130,63,.45);border-radius:14px;
  box-shadow:0 24px 60px rgba(21,23,28,.3);animation:oApri .25s ease}
@keyframes oApri{from{opacity:0;transform:translateY(10px)}}
.op-testa{display:flex;justify-content:space-between;align-items:center;background:var(--notte);color:var(--oro);padding:14px 16px;
  font:600 22px/1 var(--serif);border-radius:13px 13px 0 0}
.op-x{color:rgba(239,231,218,.8);font-size:24px;line-height:1;padding:0 4px}
.op-sono{margin:14px 16px 10px;color:var(--mut);font-size:13.5px}
.op-cerca{margin:0 16px 12px}
.op-cerca input{width:100%;font:inherit;font-size:15px;border:1px solid var(--line);border-radius:999px;padding:10px 14px;background:#fffdf8;color:var(--ink)}
.op-cerca input:focus{outline:0;border-color:var(--br)}
.op-voci{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 14px}
.op-voci a,.op-voci button{border:1px solid var(--line);border-radius:999px;padding:8px 13px;font-size:13px;background:#fbf7f0}
.op-voci a:hover,.op-voci button:hover{border-color:var(--br);color:var(--br)}
.op-voci .op-wa{background:var(--legno);color:var(--oro);border-color:var(--legno)}
.op-look{border-top:1px solid var(--line);padding:12px 16px 16px;display:grid;gap:8px;font-size:13.5px}
.op-look b{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--br);font-weight:500}
.op-look a{display:flex;align-items:center;gap:10px}.op-look a:hover span{text-decoration:underline}
.op-look i{width:14px;height:14px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.op-look span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.op-look button{justify-self:start;font-size:12.5px;color:var(--mut);text-decoration:underline;margin-top:2px}
.op-look p{margin:0;color:var(--mut)}
@media (max-width:760px){.omino-tasto{width:66px;height:100px}.omino-corpo{width:50px;height:80px;left:8px}.omino-pannello{bottom:110px;right:10px}}
@media (prefers-reduced-motion:reduce){.omino-corpo{transition:none}}
.omino-tasto:focus{outline:0}.omino-tasto:focus-visible{outline:2px solid var(--oro);outline-offset:-2px;border-radius:12px}

/* ================= COOKIE =================
   In basso a sinistra (a destra c'e' l'omino). "Rifiuta" e "Accetta"
   uguali, come vuole il Garante; la X vale come rifiuto. */
.consenso{position:fixed;left:16px;bottom:16px;z-index:45;width:min(430px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;
  background:var(--notte);color:#e9e1d3;border:1px solid rgba(200,164,110,.4);border-radius:14px;padding:22px 22px 18px;
  box-shadow:0 24px 60px rgba(0,0,0,.35);animation:oApri .35s ease}
.consenso h2{font:600 24px/1.1 var(--serif);color:var(--oro);margin:0 28px 10px 0}
.consenso p{font-size:13.5px;line-height:1.55;color:rgba(233,225,211,.82);margin:0 0 14px}
.consenso a{color:var(--oro);text-decoration:underline;text-underline-offset:3px}
.cs-x{position:absolute;top:10px;right:12px;font-size:26px;line-height:1;color:rgba(233,225,211,.7);padding:4px 8px}
.cs-x:hover{color:var(--oro)}
.cs-tasti{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cs-tasti .btn{background:var(--avorio);color:var(--ink);border-color:var(--avorio);padding:13px 10px}
.cs-tasti .btn:hover{background:var(--oro);border-color:var(--oro)}
.cs-tasti .btn:only-of-type{grid-column:1/-1}
.cs-scegli{grid-column:1/-1;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(233,225,211,.75);padding:6px;text-decoration:underline;text-underline-offset:3px}
.cs-scelte{border-top:1px solid rgba(200,164,110,.25);margin-bottom:14px}
.cs-riga{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid rgba(200,164,110,.15);cursor:pointer}
.cs-riga b{display:block;font-weight:500;color:#f3ecdf}.cs-riga small{display:block;font-size:12.5px;color:rgba(233,225,211,.62);margin-top:2px}
.cs-riga input{appearance:none;-webkit-appearance:none;width:42px;height:24px;border-radius:12px;background:rgba(233,225,211,.2);position:relative;flex:none;cursor:pointer;transition:background .2s}
.cs-riga input::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#f3ecdf;transition:transform .2s}
.cs-riga input:checked{background:var(--br)}.cs-riga input:checked::after{transform:translateX(18px)}
.cs-riga input:disabled{opacity:.55;cursor:default}
.cs-altri{font-size:12.5px!important;margin:10px 0 0!important;color:rgba(233,225,211,.55)!important}
.piede-link{display:block;padding:4px 0;color:#bdb9b2;font-size:14px;text-align:left}.piede-link:hover{color:var(--oro)}

/* ================= ACCOUNT ================= */
.conto{max-width:1040px;margin:0 auto;padding:44px var(--pad) 40px}
.conto h1{font-size:clamp(32px,4vw,44px);margin-bottom:8px}
.conto-perche{list-style:none;padding:0;margin:6px 0 28px;display:flex;flex-wrap:wrap;gap:8px 26px;color:var(--mut);font-size:14.5px}
.conto-perche li::before{content:'';display:inline-block;width:14px;height:1px;background:var(--br);vertical-align:middle;margin-right:9px}
.conto-due{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start;margin-top:18px}
.conto-box{background:#fbf7f0;border:1px solid var(--line);padding:26px;display:grid;gap:4px}
.conto-box h2{font-size:28px;margin-bottom:12px}
.conto-box .btn{margin-top:10px}.conto-box .spunta{margin:8px 0 2px;font-size:13.5px}
.conto-box .spunta a{text-decoration:underline}
.campo small{color:var(--mut)}
.conto-errore{color:var(--rosso);font-size:14px;margin:8px 0 0}
.conto-ordini{width:100%;border-collapse:collapse;font-size:14px}
.conto-ordini td{padding:11px 4px;border-bottom:1px solid var(--line);vertical-align:top}.conto-ordini .n{text-align:right;font-variant-numeric:tabular-nums}
.conto-ordini small{color:var(--mut)}
.conto-elimina{margin-top:18px;font-size:13px}.conto-elimina summary{cursor:pointer;color:var(--mut);text-decoration:underline}
.conto-elimina form{margin-top:10px}
.conto-icona{color:inherit}
@media (max-width:760px){.conto-due{grid-template-columns:1fr}.conto-icona{display:none}}

/* La taglia che il cliente prende di solito */
.taglia .tua{position:absolute;top:-8px;right:-6px;background:var(--br);color:var(--avorio);font:500 9px/1 var(--sans);letter-spacing:.08em;
  text-transform:uppercase;padding:3px 5px;border-radius:8px;font-style:normal}

/* ================= L'OMINO: invito e iscrizione ================= */
.omino.via{opacity:0;pointer-events:none}
.omino-fumetto.con-tasti{pointer-events:auto}
.of-tasti{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.of-tasti button,.of-tasti a{font-size:12.5px;border:1px solid var(--line);border-radius:999px;padding:6px 11px;background:#fffdf8}
.of-tasti button:first-child{background:var(--ink);color:var(--avorio);border-color:var(--ink)}
.of-tasti button:last-child{border:0;background:none;color:var(--mut);text-decoration:underline;padding-inline:4px}
.omino-passa{position:fixed;left:0;bottom:8px;z-index:34;width:60px;height:120px;pointer-events:none;
  animation:oPassa 7s linear forwards}
.omino-passa .omino-corpo{position:absolute;left:0;bottom:0;width:60px;height:96px;transform:none;transition:none}
@keyframes oPassa{from{transform:translateX(-80px)}to{transform:translateX(calc(100vw - 70px))}}
.op-cartello{position:absolute;left:34px;bottom:74px;background:var(--avorio);border:1px solid var(--br);color:var(--br);
  font:600 15px/1 var(--serif);padding:5px 8px;border-radius:3px;white-space:nowrap;box-shadow:0 4px 10px rgba(0,0,0,.15);
  transform:rotate(-4deg);animation:oCartello .7s ease-in-out infinite alternate}
@keyframes oCartello{to{transform:rotate(3deg) translateY(-2px)}}
.cammina .m-sx,.cammina .m-dietro{animation:mPasso .7s ease-in-out infinite}
.cammina .m-dx,.cammina .m-avanti{animation:mPasso .7s ease-in-out infinite reverse}
@keyframes mPasso{0%,100%{transform:rotate(15deg)}50%{transform:rotate(-15deg)}}
.cammina .mascotte-svg{animation:oSaltello .35s ease-in-out infinite alternate}
@keyframes oSaltello{to{transform:translateY(-2px)}}
.op-conto{padding-top:0}
.op-conto a{background:var(--notte);color:var(--oro);border-color:var(--notte)}
.op-news{padding:14px 16px 18px;display:grid;gap:9px}
.op-news p{margin:0;color:var(--mut);font-size:13.5px}
.op-news input[type=email],.op-news input:not([type]){font:inherit;font-size:15px;border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:#fffdf8;color:var(--ink)}
.op-news input:focus{outline:0;border-color:var(--br)}
.op-news .spunta{font-size:12.5px}.op-news .spunta a{text-decoration:underline}
.op-errore{color:var(--rosso)!important}
.op-fatto{font:500 20px/1.3 var(--serif)!important;color:var(--ink)!important;padding:10px 0}
body.con-consenso .whatsapp{display:none}

/* La testata con il nome in ottone e il menu spaziato non ci sta sotto i
   1240 pixel: si stringe, e sotto i 1180 il menu va nella tendina. */
@media (max-width:1400px){.nav{gap:20px;letter-spacing:.12em;font-size:12px}.cerca input{width:140px}.testa{gap:16px}}
@media (max-width:1180px){.nav{display:none}.solo-tel{display:inline-flex}.testa{grid-template-columns:auto 1fr auto}.testa .logo{justify-self:center}}

/* Il cambio di foto nella vetrina in alto: sfuma la FOTO, non il suo
   contenitore. Un contenitore semitrasparente apre un livello a parte e,
   per quel mezzo secondo, il fondo bianco della foto si vedeva come un
   riquadro (segnalato dall'utente il 30/09). */
.fascia .diapo,.fascia .diapo.on{opacity:1;transition:none}
.fascia .diapo img{opacity:0;transform:scale(.985);transition:opacity .9s ease,transform 1.2s ease}
.fascia .diapo.on img{opacity:1;transform:none}

/* ================= SUGGERIMENTI DELLA RICERCA ================= */
.suggerimenti{position:absolute;z-index:60;background:var(--bg);color:var(--ink);border:1px solid rgba(176,130,63,.45);border-radius:12px;
  box-shadow:0 22px 50px rgba(21,23,28,.28);width:min(420px,calc(100vw - 24px));max-height:min(70vh,560px);overflow:auto;padding:8px 0;
  text-transform:none;letter-spacing:0;font-size:14px}
.sg-gruppo{padding:6px 14px 2px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--br)}
.sg-scorciatoie{display:flex;flex-wrap:wrap;gap:6px;padding:6px 14px 8px}
.sg-scorciatoie a{border:1px solid var(--line);border-radius:999px;padding:5px 11px;font-size:13px;background:#fbf7f0}
.sg-scorciatoie a:hover{border-color:var(--br);color:var(--br)}
.sg-capo{display:grid;grid-template-columns:46px 1fr auto;gap:12px;align-items:center;padding:7px 14px}
.sg-capo img{width:46px;height:56px;object-fit:contain;mix-blend-mode:multiply}
.sg-capo small{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--br)}
.sg-capo span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sg-capo b{font-weight:500;font-variant-numeric:tabular-nums}
.sg-capo:hover,.sg-capo.su{background:var(--sab)}
.sg-tutti{display:block;text-align:center;padding:10px;margin-top:4px;border-top:1px solid var(--line);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--br)}
.sg-nota{padding:6px 14px;color:var(--mut);font-size:13px}
.piede .marchio{display:inline-flex}.piede .marchio small,.piede .marchio b{display:block;padding-block:0}

/* Alcuni fornitori scattano su grigio chiarissimo (#f0f0f0 - #f3f3f3):
   con "multiply" resterebbe un riquadro appena piu' scuro. Un filo di
   luce e contrasto lo porta a bianco e sparisce; i capi non cambiano a
   occhio. */
.fascia img,.card-foto img,.tessera img,.grande img,.mini img,.colore img,.riga-b img,.barra-fissa img,.sg-capo img,.op-look img{filter:brightness(1.04) contrast(1.06)}
.conto-dimenticata{margin-top:10px;font-size:13.5px}.conto-dimenticata summary{cursor:pointer;color:var(--mut);text-decoration:underline;text-underline-offset:3px}
.conto-dimenticata>div{display:grid;gap:4px;margin-top:8px}.conto-ok{color:var(--verde);font-size:13.5px;margin:4px 0}

/* ================= IL LOOK DI OGGI ================= */
.look-sotto{color:var(--mut);font-size:13.5px}
.look-due{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.look{background:#fbf7f0;border:1px solid var(--line);padding:18px 18px 14px}
.look-n{font:600 13px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--br);margin-bottom:12px}
.look-capi{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.look-capo{display:flex;flex-direction:column;gap:2px;font-size:12.5px;line-height:1.3}
.look-foto{display:block;aspect-ratio:4/5;background:radial-gradient(ellipse 80% 60% at 50% 0%,#fffdf8 0%,var(--foto) 75%);margin-bottom:6px;overflow:hidden}
.look-foto img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;filter:brightness(1.04) contrast(1.06);transition:transform .4s}
.look-capo:hover .look-foto img{transform:scale(1.05)}
.look-capo small{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--br)}
.look-capo b{font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.look-tot{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:13.5px;color:var(--mut);display:flex;justify-content:space-between}
.look-tot b{color:var(--ink);font:600 20px/1 var(--serif)}
@media (max-width:900px){.look-due{grid-template-columns:1fr}}
@media (max-width:480px){.look-capi{grid-template-columns:repeat(2,1fr)}}
.look-capo{min-width:0}.look-capi{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:480px){.look-capi{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Avvisami quando torna */
.taglia.no{cursor:pointer}.taglia.no:hover{border-color:var(--br);color:var(--br)}
.torna{margin-top:12px;background:#fbf7f0;border:1px solid var(--line);padding:12px 14px;display:grid;gap:8px}
.torna p{margin:0;font-size:14px}.torna div{display:flex;gap:8px}
.torna input{flex:1;min-width:0;font:inherit;font-size:15px;border:1px solid var(--line);padding:10px 12px;background:#fffdf8;border-radius:var(--r)}
.torna input:focus{outline:0;border-color:var(--br)}.torna small{color:var(--mut);font-size:12px}
.veste{font-size:13px;color:var(--mut);margin:10px 0 0;line-height:1.5}.veste b{color:var(--ink);font-weight:500}
.veste a{color:var(--br);text-decoration:underline;text-underline-offset:3px}

/* ===== accessibilita' (01/10/2026) =====
   Chi usa la tastiera vede sempre dove si trova; "Vai al contenuto" salta il
   menu (compare solo premendo Tab). */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible,select:focus-visible,input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:2px solid var(--br);outline-offset:3px;border-radius:3px}
.testa a:focus-visible,.testa button:focus-visible,.piede a:focus-visible,.piede button:focus-visible{outline-color:#c8a46e}
.salta{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#f6f1e8;padding:10px 16px;border-radius:0 0 8px 8px;font-size:14px;text-decoration:none;transition:top .2s}
.salta:focus{top:0}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}