:root{



  --zoom:1;



  /* una sola lingua per il movimento: tre durate e una curva, ovunque */



  --t-svelta:170ms; --t-media:260ms; --t-lenta:520ms;



  --curva:cubic-bezier(.22,.72,.24,1);



  --bianco:#FFFFFF; --crema:#F8F7F4; --scatola:#FBFBFA; --filo:#E7E5E0;



  --nebbia:#FCFCFB;   /* le cornici: bianco appena spento, non grigio */



  --ink:#1E1913; --ink2:#4A4A46; --ink3:#8C8880; --carbone:#343030; --oro:#A8781A;



  --vino:#8E1B1B;



  --h-testa:80px;



  --sans:"Helvetica Neue",Helvetica,Arial,"Segoe UI",system-ui,sans-serif;



  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;



}



*{box-sizing:border-box;margin:0;padding:0}



body{background:#fff;color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;



  -webkit-font-smoothing:antialiased}



img{display:block;max-width:100%}



button{font:inherit;cursor:pointer;border:0;background:none;color:inherit;text-align:inherit}



h1,h2,h3{font-weight:400}



.wrap{max-width:1440px;margin:0 auto;padding:0 30px}







/* ---------- tipografia ---------- */



.tit-hero{font-family:var(--serif);font-weight:400;font-size:clamp(38px,4.4vw,62px);



  line-height:1.04;letter-spacing:-.005em;text-wrap:balance}



.tit-serif{font-family:var(--serif);font-weight:400;font-size:clamp(25px,2.5vw,33px);



  line-height:1.16;letter-spacing:.005em;text-wrap:balance}



.tit-serif.piccolo{font-size:clamp(20px,1.7vw,23px)}



.tit-serif.chiaro{color:#F7F2E6}



.occhiello{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.85)}



.occhiello.scuro{color:var(--oro)}







.button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;



  padding:5px 32px;border:1px solid var(--ink);font-size:11.5px;font-weight:500;



  letter-spacing:.15em;text-transform:uppercase;background:none;color:var(--ink);



  transition:background .25s,color .25s,border-color .25s}



.button:hover{background:var(--ink);color:#fff}



.button.pieno{background:var(--ink);color:#fff}



.button.pieno:hover{background:var(--oro);border-color:var(--oro)}



.button.light{background:#fff;border-color:#fff;color:var(--ink)}



.button.light:hover{background:transparent;color:#fff;border-color:#fff}



.button.chiaro-pieno{background:#FAF8F3;border-color:#F7F2E6;color:var(--carbone)}



.button.chiaro-pieno:hover{background:#fff;border-color:#fff}



.cta{font-size:11.5px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;



  border-bottom:1px solid currentColor;padding-bottom:3px;white-space:nowrap;align-self:center}



.cta.chiara{color:#fff}







/* ---------- barra annuncio + testata ---------- */



.annuncio{background:var(--crema);color:#2E2E2A;text-align:center;font-size:11.5px;



  letter-spacing:.06em;padding:10px 16px}



header{position:sticky;top:0;z-index:70;background:#fff;border-bottom:1px solid var(--filo);



  transition:background .35s,border-color .35s,color .35s}



.hrow{display:flex;align-items:center;gap:30px;height:var(--h-testa)}



.marchio{flex:none;display:flex;align-items:center}



.marchio img{height:29px;width:auto;transition:filter .35s}



nav{display:flex;gap:26px;font-size:15.5px;letter-spacing:.01em}



nav button{padding:8px 0;border-bottom:1px solid transparent;color:var(--ink2);transition:color .2s}



nav button:hover,nav button.on{color:inherit;border-color:currentColor}



.hicone{margin-left:auto;display:flex;align-items:center;gap:14px;color:var(--ink2)}



.apri-menu{display:none;width:34px;height:34px;place-items:center;color:inherit;margin-left:-6px}



@media(max-width:1100px){



  .apri-menu{display:grid}



  .hrow{gap:12px}



  .marchio img{height:22px}



  nav#menu{position:absolute;left:0;right:0;top:var(--h-testa);flex-direction:column;gap:0;



    background:#fff;border-bottom:1px solid var(--filo);padding:6px 22px 18px;



    box-shadow:0 22px 40px -26px rgba(20,16,8,.5);display:none}



  nav#menu.aperto{display:flex}



  nav#menu button{padding:13px 0;border-bottom:1px solid var(--filo);border-radius:0;



    font-size:14.5px;text-align:left;width:100%}



  .cerca{width:34px;padding:8px;justify-content:center}



  .cerca input{display:none}



  /* su un telefono restano cerca e borsa: preferiti e account stanno nel menu



     di chi ha un account, e qui ruberebbero solo spazio al marchio */



  .hicone{gap:6px}



  .hicone .icona[title="Preferiti"],.hicone .icona[title="Il mio account"]{display:none}



  .wrap{padding:0 18px}



  .mega{display:none !important}



}



.cerca{display:flex;align-items:center;gap:9px;background:#F7F6F3;border:1px solid transparent;



  border-radius:99px;padding:8px 15px;width:200px;transition:background .35s,border-color .35s}



.cerca input{border:0;outline:none;background:none;font:inherit;font-size:12.5px;width:100%;color:inherit}



.cerca input::placeholder{color:var(--ink3)}



/* bersagli da 44: le linee guida lo chiedono e un dito lo pretende */



.icona{display:grid;place-items:center;width:44px;height:44px;position:relative;color:inherit}



.icona b{position:absolute;right:1px;top:2px;background:var(--ink);color:#fff;font-size:9px;



  font-weight:400;line-height:1;min-width:14px;height:14px;border-radius:99px;display:grid;place-items:center;padding:0 3px}







/* testata trasparente sopra l'immagine di apertura */



body.trasparente header{background:transparent;border-bottom-color:transparent;color:#fff}



body.trasparente header .marchio img{filter:brightness(0) invert(1)}



body.trasparente header nav button{color:rgba(255,255,255,.92)}



body.trasparente header .hicone{color:#fff}



body.trasparente header .cerca{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3)}



body.trasparente header .cerca input::placeholder{color:rgba(255,255,255,.78)}



body.trasparente header .icona b{background:#fff;color:var(--ink)}







/* ============ TENDINA DEL MENU ============



   Quattro fasce: due colonne di parole, tre pezzi veri, una fotografia. Le



   parole dicono dove andare, i pezzi dicono perche' andarci. */



.mega{position:absolute;left:0;right:0;top:100%;background:#fff;



  border-top:1px solid var(--filo);box-shadow:0 30px 60px -46px rgba(30,25,16,.5);



  display:none;padding:34px 0 38px;z-index:69}



.mega.aperto{display:block;animation:tendinaGiu .42s var(--curva)}



@keyframes tendinaGiu{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}



.mega-in{display:grid;grid-template-columns:minmax(150px,1fr) minmax(150px,1fr) 2.5fr minmax(230px,1fr);



  gap:34px;align-items:start}



.mega .colonna b{display:block;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;



  color:var(--ink3);margin-bottom:16px;font-weight:500}



.mega .colonna button{display:block;width:100%;text-align:left;padding:7px 0;font-size:14.5px;



  color:var(--ink2);position:relative;transition:color var(--t-svelta) var(--curva),



  padding-left var(--t-media) var(--curva)}



.mega .colonna button::before{content:"";position:absolute;left:0;top:50%;width:0;height:1px;



  background:var(--oro);transition:width var(--t-media) var(--curva)}



.mega .colonna button:hover{color:var(--ink);padding-left:17px}



.mega .colonna button:hover::before{width:11px}



/* le colonne entrano una dopo l'altra */



.mega-in>*{animation:salePoco .5s var(--curva) backwards}



.mega-in>*:nth-child(1){animation-delay:.04s}



.mega-in>*:nth-child(2){animation-delay:.09s}



.mega-in>*:nth-child(3){animation-delay:.14s}



.mega-in>*:nth-child(4){animation-delay:.19s}



@keyframes salePoco{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}







/* i tre pezzi dentro la tendina */



.mega-pezzi{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}



.mega-pezzo{text-align:left}



.mega-pezzo .ph{aspect-ratio:1;background:var(--nebbia);border:1px solid var(--filo);



  display:grid;place-items:center;padding:9%}



.mega-pezzo img{max-width:100%;max-height:100%;object-fit:contain}



.mega-pezzo .n{display:block;margin-top:10px;font-size:13px;line-height:1.35;color:var(--ink);



  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}



.mega-pezzo .p{display:block;margin-top:3px;font-size:12.5px;color:var(--ink3);



  font-variant-numeric:tabular-nums}



.mega-pezzo:hover .n{color:var(--oro)}







.mega .promo{position:relative;display:block;overflow:hidden;aspect-ratio:3/4}



.mega .promo img{width:100%;height:100%;object-fit:cover}



.mega .promo .sopra{position:absolute;left:0;right:0;bottom:0;padding:20px;color:#fff;



  background:linear-gradient(to top,rgba(24,20,14,.62),transparent);text-align:left}



.mega .promo i{display:block;font-family:var(--serif);font-style:italic;font-size:20px}



.mega .promo span{display:inline-block;margin-top:7px;font-size:10.5px;letter-spacing:.16em;



  text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.6);padding-bottom:3px}







/* la tendina delle marche: molte voci, quindi tre colonne strette e nient'altro */



.mega-marche{display:grid;grid-template-columns:repeat(3,1fr);gap:0 30px}



.mega-marche button{padding:8px 0;font-size:14.5px}











.icona{display:grid;place-items:center;width:44px;height:44px;position:relative;color:inherit}



.icona b{position:absolute;right:1px;top:2px;background:var(--ink);color:#fff;font-size:9px;



  font-weight:400;line-height:1;min-width:14px;height:14px;border-radius:99px;display:grid;place-items:center;padding:0 3px}







/* testata trasparente sopra l'immagine di apertura */



body.trasparente header{background:transparent;border-bottom-color:transparent;color:#fff}



body.trasparente header .marchio img{filter:brightness(0) invert(1)}



body.trasparente header nav button{color:rgba(255,255,255,.92)}



body.trasparente header .hicone{color:#fff}



body.trasparente header .cerca{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3)}



body.trasparente header .cerca input::placeholder{color:rgba(255,255,255,.78)}



body.trasparente header .icona b{background:#fff;color:var(--ink)}







/* ---------- mega menu ---------- */



.mega{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--filo);



  box-shadow:0 20px 40px -28px rgba(0,0,0,.28);display:none;padding:34px 0 40px}



.mega.aperto{display:block}



.mega-in{display:grid;grid-template-columns:minmax(180px,1fr) minmax(180px,1fr) 2fr minmax(300px,440px);gap:26px}



.mega .colonna b{display:block;font-size:12px;letter-spacing:.06em;margin-bottom:14px}



.mega .colonna button{display:block;padding:5px 0;font-size:13px;color:var(--ink2);letter-spacing:.02em}



.mega .colonna button:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}



.mega .promo{position:relative;aspect-ratio:1.62;overflow:hidden;background:var(--scatola)}



.mega .promo img{width:100%;height:100%;object-fit:cover;transition:transform 1s}



.mega .promo:hover img{transform:scale(1.04)}



.mega .promo .sopra{position:absolute;left:24px;bottom:22px;color:#fff;text-shadow:0 1px 16px rgba(0,0,0,.4)}



.mega .promo .sopra i{display:block;font-family:var(--serif);font-style:italic;font-size:23px;margin-bottom:9px}



.mega .promo .sopra span{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;



  border-bottom:1px solid #fff;padding-bottom:3px}







.vista{display:none}



.vista.attiva{display:block}



.sezione{padding:66px 0}



.sezione.stretta{padding:52px 0}



.intestazione{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:26px}



.intestazione.centro{justify-content:center;text-align:center}







/* ---------- apertura ---------- */



.hero{position:relative;margin-top:calc(-1 * var(--h-testa));background:var(--crema);



  display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);align-items:stretch;



  min-height:min(94vh,900px)}



/* la meta' del testo: comincia sotto la testata, non sotto il bordo dello schermo */



.hero-lato{display:flex;align-items:center;padding:calc(var(--h-testa) + 42px) clamp(26px,4.4vw,72px) 48px;



  position:relative}



.hero-lato::after{content:"";position:absolute;top:14%;bottom:14%;right:0;width:1px;



  background:linear-gradient(to bottom,transparent,var(--filo) 22%,var(--filo) 78%,transparent)}



.hero-testo{max-width:33rem}



.hero-testo .occhiello{margin-bottom:18px;color:var(--oro)}



.tit-hero{color:var(--ink)}



.hero-sot{margin:20px 0 32px;max-width:34ch;font-size:16px;line-height:1.62;color:var(--ink2)}



.hero-azioni{display:flex;align-items:center;gap:26px;flex-wrap:wrap}



/* le tre promesse: un filetto sopra, poi una riga sola di maiuscoletto */







.hero-scena{position:relative;overflow:hidden;background:#F2F0EB}



.hero-grande{position:absolute;inset:0}



/* Il soggetto sono le due collane sulla clavicola. La finestra parte sotto



   il mento e arriva alla mano: piu' in alto entrerebbe la fronte tagliata,



   piu' in basso resterebbero fuori le collane. */



.hero-grande img{width:100%;height:100%;object-fit:cover;object-position:54% 68%;



  filter:saturate(1.06) contrast(1.02)}



/* il secondo scatto scavalca il primo in basso a sinistra: due formati diversi



   danno profondita', e nessuna delle due foto va tagliata per forza */



.hero-piccola{position:absolute;left:0;bottom:clamp(28px,6vh,64px);width:clamp(122px,17%,208px);



  margin:0;transform:translateX(-38%);background:var(--crema);padding:9px;



  box-shadow:0 26px 50px -30px rgba(30,25,16,.55)}



.hero-piccola img{display:block;width:100%;aspect-ratio:1;object-fit:cover}







/* ---- l'ingresso: le righe salgono una dopo l'altra, la foto si posa ---- */



@keyframes sali{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}



@keyframes posa{from{transform:scale(1.07)}to{transform:scale(1)}}



@keyframes entraDaSotto{from{opacity:0;transform:translateX(-38%) translateY(26px)}



  to{opacity:1;transform:translateX(-38%)}}



.hero-testo>*{animation:sali .9s var(--curva) backwards}



.hero-testo>*:nth-child(1){animation-delay:.06s}



.hero-testo>*:nth-child(2){animation-delay:.14s}



.hero-testo>*:nth-child(3){animation-delay:.22s}



.hero-testo>*:nth-child(4){animation-delay:.30s}



.hero-testo>*:nth-child(5){animation-delay:.38s}



.hero-grande img{animation:posa 1.6s var(--curva) backwards}



.hero-piccola{animation:entraDaSotto 1s var(--curva) .5s backwards}



@media(prefers-reduced-motion:reduce){



  .hero-testo>*,.hero-grande img,.hero-piccola{animation:none}



}







/* sotto il tablet le due meta' diventano due righe: prima si vede, poi si legge */



@media(max-width:900px){



  .hero{grid-template-columns:1fr;min-height:0}



  .hero-scena{order:-1;aspect-ratio:4/5;max-height:64vh}



  .hero-lato{padding:calc(var(--h-testa) + 30px) 0 40px;justify-content:center}



  .hero-lato::after{display:none}



  .hero-testo{max-width:none;padding:0 22px}



  .hero-piccola{left:auto;right:16px;bottom:16px;transform:none;width:118px;padding:7px}



  @keyframes entraDaSotto{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}



}







/* ---------- categorie ---------- */



.tessere{display:grid;gap:14px;grid-template-columns:repeat(6,1fr)}



@media(max-width:1100px){.tessere{grid-template-columns:repeat(3,1fr)}}



@media(max-width:620px){.tessere{grid-template-columns:repeat(2,1fr)}}



.tessera{position:relative;aspect-ratio:.82;overflow:hidden;background:var(--scatola)}



.tessera .ph{width:100%;height:100%}



.tessera img{width:100%;height:100%;object-fit:cover;transition:transform .8s}



.tessera:hover img{transform:scale(1.05)}



.tessera span{position:absolute;left:0;right:0;bottom:0;padding:15px 10px;color:#fff;



  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;text-align:center;



  background:linear-gradient(transparent,rgba(0,0,0,.45))}







/* ---------- fascia atelier ---------- */



.fascia-atelier{background:#FAF8F5;border-top:1px solid #EBE4D8;border-bottom:1px solid #EBE4D8}



.fascia-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:center;



  padding:clamp(40px,5vw,66px) 30px}



@media(max-width:1100px){.fascia-in{grid-template-columns:1fr}}



.fascia-testo{display:flex;flex-direction:column;align-items:flex-start;gap:14px}



.fascia-testo p{color:var(--ink2);max-width:46ch}



.fascia-azioni{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:8px}



.fascia-foto{aspect-ratio:1.5;overflow:hidden}



.fascia-foto img{width:100%;height:100%;object-fit:cover}







/* ---------- griglia prodotti ---------- */



.scorri,.griglia{display:grid;gap:36px 16px;grid-template-columns:repeat(4,1fr)}



@media(max-width:1100px){.scorri,.griglia{grid-template-columns:repeat(3,1fr)}}



@media(max-width:700px){.scorri,.griglia{grid-template-columns:repeat(2,1fr)}}



.prod{position:relative;text-align:left}



.prod .cornice{position:relative;aspect-ratio:1;background:#FCFCFB;overflow:hidden}



.prod .cornice img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:5%;transition:opacity .5s}



.prod .cornice img.vita{object-fit:cover;padding:0;opacity:0}



/* una foto che ha gia' il suo fondo non vuole margini attorno: si appoggia



   ai bordi e il riquadro si dipinge del suo stesso colore */



.prod .cornice img.piena{padding:0}



.lastra.suo-fondo{padding:0;aspect-ratio:auto;height:100%}



/* ---------- visore a tutto schermo ----------



   La foto cresce dal punto in cui sta: si parte dalle sue coordinate vere,



   cosi' l'occhio segue il pezzo invece di perderlo in una dissolvenza. */



.lastra.apribile{position:relative}



/* la posa si avvicina piano seguendo il punto che guardi: un invito, non un



   effetto. L'ingrandimento vero lo da' il clic, a tutto schermo. */



.lastra.apribile img{transition:transform 1.1s var(--curva)}



.lastra.apribile:hover img{transform:scale(1.32)}



/* il pezzo: gira verso di te e prende luce, ma solo quando ci passi sopra */



.lastra.gioiello{position:relative;perspective:900px}



.lastra.gioiello img{transition:transform var(--t-lenta) var(--curva)}



.lastra.gioiello .luce{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;



  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);



  transform:translateX(-60%)}



.lastra.gioiello.accesa .luce{animation:passaLuce 1.15s cubic-bezier(.3,.6,.3,1)}



@keyframes passaLuce{



  0%{opacity:0;transform:translateX(-60%)}



  18%{opacity:1}



  100%{opacity:0;transform:translateX(60%)}



}



@media(hover:none){.lastra.gioiello .luce{display:none}}



.lastra .segno{position:absolute;right:14px;bottom:14px;z-index:4;display:flex;



  align-items:center;gap:6px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;



  color:#fff;background:rgba(30,25,19,.55);backdrop-filter:blur(4px);padding:7px 11px;



  opacity:0;transform:translateY(6px);transition:opacity var(--t-media) var(--curva),transform var(--t-media) var(--curva);pointer-events:none}



.lastra.apribile:hover .segno{opacity:1;transform:none}







.visore{position:fixed;inset:0;z-index:300;display:none;background:rgba(18,15,12,.96);



  backdrop-filter:blur(6px)}



.visore.aperto{display:block}



.visore .palco{position:absolute;inset:0 0 108px;display:grid;place-items:center;



  overflow:hidden;touch-action:none}



.visore .palco img,.visore .palco video{position:absolute;max-width:92%;max-height:100%;



  object-fit:contain;will-change:transform,opacity;transform-origin:center;



  user-select:none;-webkit-user-drag:none;



  transition:opacity var(--t-media) var(--curva)}



.visore .palco .entra{opacity:0}



.visore .palco .esce{opacity:0}



.visore .palco.dentro{cursor:grab}



.visore .palco.dentro:active{cursor:grabbing}



.visore .chiudi{position:absolute;right:22px;top:20px;z-index:3;width:44px;height:44px;



  display:grid;place-items:center;color:#EDE7DD;border:1px solid rgba(237,231,221,.28);



  border-radius:50%;transition:background .25s,border-color .25s}



.visore .chiudi:hover{background:rgba(237,231,221,.12);border-color:rgba(237,231,221,.6)}



.visore .conta{position:absolute;left:26px;top:30px;z-index:3;color:#C9C2B6;font-size:12px;



  letter-spacing:.18em;text-shadow:0 1px 10px rgba(0,0,0,.6)}



.visore .aiuto{position:absolute;right:24px;bottom:124px;z-index:3;color:#A79F93;



  font-size:11.5px;letter-spacing:.1em;text-shadow:0 1px 10px rgba(0,0,0,.7)}



.visore .striscia{position:absolute;left:0;right:0;bottom:0;height:108px;display:flex;



  align-items:center;justify-content:center;gap:10px;padding:0 20px}



.visore .striscia button{width:62px;height:78px;overflow:hidden;position:relative;



  opacity:.5;transition:opacity .3s,outline-color .3s;outline:1px solid transparent;



  outline-offset:2px;background:#1C1815;flex:none}



.visore .striscia button img,.visore .striscia button video{width:100%;height:100%;object-fit:cover}



.visore .striscia button.on{opacity:1;outline-color:rgba(168,120,26,.85)}



@media(max-width:820px){



  .visore .palco{inset:0 0 92px}



  .visore .palco img,.visore .palco video{max-width:100%}



  .visore .striscia{height:92px;gap:7px}



  .visore .striscia button{width:52px;height:66px}



  .visore .aiuto{display:none}



  .lastra .segno{opacity:1;transform:none;font-size:10px;padding:6px 9px}



}



.lastra.suo-fondo img{max-height:100%;max-width:100%;object-fit:contain}



.prod:hover .cornice img.vita{opacity:1}



.prod .badge{position:absolute;top:0;right:0;z-index:2;background:#F4F3F0;color:var(--ink2);



  font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:6px 11px}



.prod .aggiungi{position:absolute;left:50%;transform:translateX(-50%);bottom:16px;z-index:2;



  background:#fff;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;padding:10px 20px;opacity:0;transition:opacity .25s}



.prod:hover .aggiungi{opacity:1}



.prod .riga1{display:flex;justify-content:space-between;gap:10px;align-items:start;margin-top:14px}



.prod .nome{font-size:15px;letter-spacing:.01em;line-height:1.35}



.prod .cuoricino{color:var(--ink3);flex:none}



.prod .prezzo{margin-top:7px;font-size:15.5px;display:flex;gap:9px;align-items:baseline}



.prod .prezzo s{color:var(--ink3);font-size:13.5px}



.prod .mat{margin-top:6px;font-size:13.5px;color:var(--ink2)}



.prod .pallini{display:flex;gap:5px;margin-top:7px}



.prod .pallini i{width:11px;height:11px;border-radius:50%;border:1px solid #D6D2C8;display:block}



.promo-riq{position:relative;background:var(--carbone);color:#F7F2E6;display:flex;flex-direction:column;



  justify-content:flex-end;padding:26px;aspect-ratio:1;overflow:hidden}



.promo-riq img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45}



.promo-riq .t{position:relative}



.promo-riq b{display:block;font-family:var(--serif);font-style:italic;font-size:21px;font-weight:400;margin-bottom:9px}



.promo-riq small{display:block;font-size:12.5px;line-height:1.7;opacity:.9}







/* ---------- usp ---------- */



.usp{border-top:1px solid var(--filo);border-bottom:1px solid var(--filo)}



.usp-in{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:28px 30px;text-align:center}



@media(max-width:820px){.usp-in{grid-template-columns:repeat(2,1fr)}}



.usp b{display:block;font-size:11px;letter-spacing:.15em;text-transform:uppercase;margin-bottom:6px}



.usp small{color:var(--ink2);font-size:12.5px}







/* ---------- editoriali ---------- */



.crema{background:var(--crema);padding:66px 0}



.due-colonne{display:grid;gap:36px;grid-template-columns:1fr 1fr}



@media(max-width:1100px){.due-colonne{grid-template-columns:1fr}}



.crema .col{display:flex;flex-direction:column;align-items:flex-start;gap:12px}



.crema .ph{width:100%;aspect-ratio:4/3;overflow:hidden;background:#fff;margin-bottom:6px}



.crema .ph img{width:100%;height:100%;object-fit:cover;transition:transform .9s}



.crema .col:hover .ph img{transform:scale(1.04)}



.crema p{color:var(--ink2);max-width:46ch}



.editoriale{display:grid;grid-template-columns:1.15fr 1fr;align-items:stretch}



@media(max-width:1100px){.editoriale{grid-template-columns:1fr}}



.ed-foto{overflow:hidden;min-height:380px}



.ed-foto img{width:100%;height:100%;object-fit:cover}



.ed-testo{background:#FAF8F5;display:flex;flex-direction:column;align-items:flex-start;gap:15px;



  justify-content:center;padding:clamp(34px,5vw,78px)}



.ed-testo p{color:var(--ink2);max-width:42ch}







/* ---------- boutique + newsletter ---------- */



.boutique{display:grid;grid-template-columns:1fr 1fr}



@media(max-width:1100px){.boutique{grid-template-columns:1fr}}



.bt-foto{overflow:hidden;min-height:360px}



.bt-foto img{width:100%;height:100%;object-fit:cover}



.boutique .testo{padding:clamp(34px,5vw,78px);display:flex;flex-direction:column;



  justify-content:center;gap:14px;background:var(--crema)}



.boutique p{color:var(--ink2);max-width:44ch}



.orari{font-size:13.5px;color:var(--ink2)}



.orari div{display:flex;justify-content:space-between;max-width:360px;padding:8px 0;border-bottom:1px solid rgba(0,0,0,.09)}



.boutique .azioni{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}



.newsletter{background:var(--carbone);color:#F7F2E6;text-align:center;padding:66px 0}



.newsletter p{margin-top:12px;opacity:.85}



.newsletter small{display:block;margin-top:14px;font-size:11.5px;opacity:.6}



.campo{margin:26px auto 0;display:flex;gap:10px;max-width:470px}



.campo input{flex:1;border:0;border-bottom:1px solid #6A6560;background:none;color:#F7F2E6;



  padding:13px 4px;font:inherit;outline:none}



.campo input::placeholder{color:#9A948C}







/* ---------- collezione ---------- */



.barra-collezione{display:flex;align-items:center;gap:24px;padding:15px 0;border-bottom:1px solid var(--filo);



  font-size:11.5px;letter-spacing:.1em;text-transform:uppercase}



.barra-collezione .sx{display:flex;gap:22px}



.barra-collezione .dx{margin-left:auto;display:flex;gap:20px;align-items:center;color:var(--ink2)}



.barra-collezione button{border-bottom:1px solid var(--ink);padding-bottom:2px}



.filtri{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:20px 0 28px}



.filtro{border:1px solid var(--filo);padding:9px 17px;font-size:11px;letter-spacing:.11em;



  text-transform:uppercase;color:var(--ink2)}



.filtro:hover{border-color:var(--ink);color:var(--ink)}



/* quanti pezzi mostra il filtro: piu' piccolo del nome, cosi' si legge dopo */



.filtro .quanti{margin-left:7px;font-size:10px;color:var(--ink3);



  font-variant-numeric:tabular-nums;transition:color var(--t-svelta) var(--curva)}



.filtro.on .quanti{color:rgba(255,255,255,.72)}



.filtro:disabled{opacity:.42;cursor:default}



.filtro:disabled:hover{border-color:var(--filo);color:var(--ink2)}



.azzera{border-bottom:1px solid var(--filo);padding-bottom:2px;font-size:12px;color:var(--ink3)}



.azzera:hover{color:var(--ink);border-bottom-color:currentColor}



.et-ordina{font-size:12px;color:var(--ink3)}



.ordina{border:1px solid var(--filo);border-radius:var(--r-netto);background:#fff;



  padding:8px 12px;font:inherit;font-size:12px;color:var(--ink);cursor:pointer;



  transition:border-color var(--t-svelta) var(--curva)}



.ordina:hover{border-color:var(--ink3)}



.filtro.on{background:var(--ink);border-color:var(--ink);color:#fff}



.titolo-collezione{padding:14px 0 8px}



#v-collezione .ritorno{margin-top:26px}



.titolo-collezione p{color:var(--ink2);max-width:62ch;margin-top:10px}







/* ---------- scheda prodotto ----------



   La colonna delle foto scorre: girando la rotellina si cambia immagine, mentre



   i dati restano fermi accanto. I puntini indicano solo a che punto sei. */



.pdp{display:grid;grid-template-columns:1.92fr 1fr;align-items:start}



@media(max-width:980px){.pdp{grid-template-columns:1fr}}



.pdp-foto{position:relative;background:var(--scatola);display:grid;



  grid-template-columns:1fr 1fr;gap:0}



.lastra{aspect-ratio:1/1.16;display:grid;place-items:center;padding:30px;overflow:hidden}



.lastra img{max-height:84%;max-width:86%;object-fit:contain}



.lastra.pieno{padding:0}



/* il filmato orizzontale si prende la riga: in una cella verticale verrebbe



   tagliato a meta' o ingrandito, e in tutti e due i casi si rovina */



.lastra.larga{grid-column:1 / -1;aspect-ratio:16/9}



/* il pezzo su fondo chiaro quando le caselle sono dispari: prende la riga



   intera invece di lasciare un buco a fianco */



.lastra.fascia{grid-column:1 / -1;aspect-ratio:3/2;height:auto}



.lastra.fascia img{object-position:50% 34%}



.lastra.pieno img,.lastra.pieno video{max-height:none;max-width:none;width:100%;height:100%;object-fit:cover}



/* un filmato orizzontale dentro una colonna alta si mostra intero:



   allargarlo a forza vorrebbe dire ingrandirlo di due volte e mezzo */



.lastra.film{padding:0;background:#F5F4F1;overflow:hidden}



.lastra.film video{width:100%;height:100%;object-fit:cover}



/* il pezzo che ha un video lo dice, senza gridarlo */



.prod .cornice .film{position:absolute;left:12px;bottom:12px;z-index:2;display:flex;align-items:center;gap:5px;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(30,25,19,.62);padding:4px 8px;backdrop-filter:blur(3px)}



.punti{display:none}



.punti-vecchi{position:sticky;top:calc(50vh / var(--zoom) - 26px);height:0;z-index:3;display:flex;flex-direction:column;



  gap:13px;align-items:flex-end;padding-right:24px}



.punti button{flex:none;width:7px;height:7px;border-radius:50%;background:#B9B5AC;



  box-shadow:0 0 0 1px rgba(255,255,255,.8),0 1px 3px rgba(0,0,0,.28);



  transition:background .25s,transform .25s}



.punti button.on{background:var(--ink);transform:scale(1.4)}



.briciole{font-size:11.5px;color:var(--ink3);margin-bottom:14px}



/* il ritorno: dice dove riporta, non solo che si torna */



.ritorno{display:inline-flex;align-items:center;gap:8px;min-height:40px;



  margin-bottom:6px;font-size:13px;letter-spacing:.02em;color:var(--ink2);



  transition:color var(--t-svelta) var(--curva)}



.ritorno svg{transition:transform var(--t-svelta) var(--curva)}



.ritorno:hover{color:var(--ink)}



.ritorno:hover svg{transform:translateX(-3px)}



.pdp-dati{position:sticky;top:var(--h-testa);min-height:calc(100vh / var(--zoom) - var(--h-testa));



  display:flex;align-items:center;padding:44px 42px;overflow-y:auto}



@media(max-width:980px){



  .pdp-dati{position:static;min-height:0;padding:30px 20px}



  .pdp-foto{grid-template-columns:1fr}



  .lastra{aspect-ratio:1;min-height:0}



  .lastra.larga{aspect-ratio:16/9}



}



.pdp-in{width:100%;max-width:470px}



/* il nome del gioiello e' il titolo della pagina, non un'etichetta:



   grande, in tondo, con aria attorno. Le maiuscole restano al marchio. */



.pdp h1{font-family:var(--serif);font-size:27px;letter-spacing:.005em;line-height:1.2;



  margin:10px 0 4px}



.pdp .marca{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--oro);margin-bottom:10px}



.pdp .sommario{margin-top:7px;font-size:15px;color:var(--ink2);letter-spacing:.01em}



.pdp .prezzo{margin-top:18px;font-size:22px;display:flex;gap:12px;align-items:baseline}



.pdp .prezzo s{font-size:16px;color:var(--ink3)}



.pdp .prezzo em{font-style:normal;font-size:11px;color:#fff;background:var(--vino);padding:3px 8px}



/* ---------- colonna dei dati: una discesa sola ----------



   Cosa e', quanto costa, come lo vuoi, lo prendo. Niente blocchi che sembrano



   una riga di gestionale. */



.scelte{margin-top:30px;padding-top:26px;border-top:1px solid var(--filo);



  display:flex;flex-direction:column;gap:22px}



.scelta .et{display:flex;align-items:baseline;justify-content:space-between;



  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);



  margin-bottom:11px}



.scelta .et b{font-weight:400;text-transform:none;letter-spacing:.01em;



  font-size:14.5px;color:var(--ink)}



.scelta .et .link{text-transform:none;letter-spacing:.01em;font-size:13.5px;



  color:var(--ink2);border-bottom:1px solid var(--filo);padding-bottom:1px}



.scelta .et .link:hover{color:var(--oro);border-color:var(--oro)}



.opzioni{display:flex;flex-wrap:wrap;gap:9px}



.pillola{min-height:46px;min-width:52px;padding:0 17px;display:inline-flex;



  align-items:center;justify-content:center;font-size:14.5px;color:var(--ink2);



  background:#fff;border:1px solid var(--filo);



  transition:border-color .2s,color .2s,box-shadow .2s}



.pillola:hover{border-color:var(--ink3);color:var(--ink)}



.pillola.on{border-color:var(--ink);color:var(--ink);



  box-shadow:inset 0 0 0 1px var(--ink)}



/* barrata significa "questa misura non c'e'": si usa solo per quello. Quando



   l'opzione e' una sola non e' esaurita, e' semplicemente l'unica. */



.pillola:disabled{color:#C6C0B6;background:#FCFCFB;cursor:default;



  text-decoration:line-through}



.pillola.sola{cursor:default}



.pillola.sola:hover{border-color:var(--ink);color:var(--ink)}



.riga-dato{display:flex;align-items:baseline;justify-content:space-between;gap:16px;



  font-size:14.5px;color:var(--ink2)}



.riga-dato span{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;



  color:var(--ink3)}



.riga-dato b{font-weight:400;color:var(--ink)}



.fine-sezione{display:flex;justify-content:center;margin-top:30px}



.bottone-linea{background:none;border:1px solid var(--filo);border-radius:999px;



  padding:13px 30px;font-size:13px;letter-spacing:.13em;text-transform:uppercase;



  color:var(--ink);cursor:pointer;transition:background .3s var(--curva),border-color .3s var(--curva)}



.bottone-linea:hover{background:var(--crema);border-color:var(--oro)}



.fisarmonica .prosa{margin:0 0 14px;font-size:14.5px;line-height:1.65;color:var(--ink2)}







.riga-var{display:flex;gap:16px;margin-top:28px;padding-top:22px;border-top:1px solid var(--filo)}



.riga-var .mini-foto{width:54px;height:54px;background:var(--scatola);flex:none;display:grid;place-items:center}



.riga-var .mini-foto img{max-width:78%;max-height:78%;object-fit:contain}



.riga-var .corpo{flex:1;min-width:0}



.riga-var .tit{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase}



.riga-var .mat{font-size:13px;color:var(--ink2);margin-top:3px}



.et-misura{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;font-size:12.5px;color:var(--ink2)}



.et-misura button{font-size:11px;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid var(--ink2)}



.misure{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}



/* un selettore di misura si tocca: 44 di altezza, non 32 */



.misura{font-size:14.5px;padding:0 14px;min-height:44px;min-width:46px;display:inline-flex;



  align-items:center;justify-content:center;border:1px solid var(--filo);



  background:#fff;color:var(--ink2);transition:border-color .2s,color .2s}



.misura:hover{color:var(--ink)}



.misura.on{color:var(--ink);border-color:var(--ink)}



.riga-azioni{display:flex;gap:10px;margin-top:32px}



/* l'azione principale della pagina: si legge da lontano, non e' un'etichetta */



.carrello{flex:1;background:var(--ink);color:#fff;min-height:56px;padding:16px 22px;



  font-size:15px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;



  text-align:center;transition:background .25s}



.carrello:hover{background:var(--oro)}



.cuore{width:58px;border:1px solid var(--filo);display:grid;place-items:center}



.cuore:hover{border-color:var(--ink)}



.secondario{width:100%;border:1px solid var(--ink);padding:15px;font-size:11.5px;letter-spacing:.15em;



  text-transform:uppercase;margin-top:10px;text-align:center}



.secondario:hover{background:var(--ink);color:#fff}



.rassicura{margin-top:26px;display:flex;flex-direction:column;gap:11px;



  font-size:13.5px;color:var(--ink2);list-style:none}



.rassicura li{display:flex;align-items:flex-start;gap:11px;line-height:1.5}



/* il segno di spunta disegnato, non un trattino da elenco */



.rassicura li::before{content:"";flex:none;width:16px;height:16px;margin-top:2px;



  border-radius:50%;background:var(--crema);



  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23A8781A' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6'/%3E%3C/svg%3E");



  background-size:contain}



/* la scheda tecnica: righe separate e due colonne allineate, non un muro */



table.tec{width:100%;border-collapse:collapse;font-size:14px}



table.tec td{padding:11px 0;vertical-align:top;border-bottom:1px solid #EFECE6;



  line-height:1.5}



table.tec tr:last-child td{border-bottom:0}



table.tec td:first-child{width:38%;color:var(--ink3);padding-right:18px}



table.tec td:last-child{color:var(--ink)}







.fisarmonica{margin-top:28px;border-top:1px solid var(--filo)}



.fisarmonica details{border-bottom:1px solid var(--filo)}



.fisarmonica summary{list-style:none;cursor:pointer;padding:17px 0;font-size:11.5px;letter-spacing:.15em;



  text-transform:uppercase;display:flex;justify-content:space-between}



.fisarmonica summary::-webkit-details-marker{display:none}



.fisarmonica summary::after{content:"+";color:var(--ink3)}



.fisarmonica details[open] summary::after{content:"–"}



.fisarmonica .dentro{padding:0 0 18px;font-size:14px;color:var(--ink2)}



table.tec{width:100%;border-collapse:collapse;font-size:13.5px}



table.tec td{padding:9px 0;border-bottom:1px solid var(--filo);vertical-align:top}



table.tec td:first-child{color:var(--ink3);width:42%}



table.tec tr:last-child td{border-bottom:0}







/* ---------- pannello guida misure ---------- */



.pannello{position:fixed;inset:0;z-index:90;display:none}



.pannello.aperto{display:block}



.pannello .ombra{position:absolute;inset:0;background:rgba(0,0,0,.35)}



.pannello .foglio{position:absolute;right:0;top:0;bottom:0;width:min(420px,92vw);background:#fff;



  overflow:auto;padding:28px 30px 46px}



.pannello h3{font-size:12.5px;letter-spacing:.17em;text-transform:uppercase}



.pannello .chiudi{position:absolute;right:18px;top:16px;font-size:22px;color:var(--ink3)}



.pannello .ist{margin-top:20px;font-size:13.5px;color:var(--ink2);line-height:1.65}



.pannello .ist b{display:block;color:var(--ink);font-size:11.5px;letter-spacing:.14em;



  text-transform:uppercase;margin-bottom:8px}



.pannello table{width:100%;border-collapse:collapse;margin-top:18px;font-size:13px}



.pannello th{text-align:left;font-weight:400;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;



  color:var(--ink3);padding:8px 0;border-bottom:1px solid var(--filo)}



.pannello td{padding:9px 0;border-bottom:1px solid var(--filo);font-variant-numeric:tabular-nums}







footer{background:#111110;color:#B7B2A8;padding:58px 0 26px;font-size:13px}



footer .cols{display:grid;gap:30px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}



footer b{display:block;color:#fff;font-size:11.5px;font-weight:500;letter-spacing:.16em;



  text-transform:uppercase;margin-bottom:14px}



footer a,footer span{display:block;padding:3px 0;color:#A9A399;text-decoration:none}



footer a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}



footer .fine{margin-top:38px;padding-top:18px;border-top:1px solid #2A2A28;color:#7C766C;



  font-size:11.5px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}





/* ============ ATELIER ============ */

.atl{position:fixed;inset:0;z-index:200;background:#fff;display:none;

  grid-template-rows:var(--h-testa) 1fr 58px}

.atl.aperto{display:grid}

.atl-top{display:flex;align-items:center;gap:16px;padding:0 30px;background:#fff;

  border-bottom:1px solid var(--filo);position:relative}

/* lo stesso ritorno del resto del sito: stessa forma, stessa freccia */

.atl-top .indietro{display:inline-flex;align-items:center;gap:8px;min-height:40px;

  font-size:13px;letter-spacing:.02em;text-transform:none;color:var(--ink2);

  transition:color var(--t-svelta) var(--curva)}

.atl-top .indietro svg{transition:transform var(--t-svelta) var(--curva)}

.atl-top .indietro:hover{color:var(--ink)}

.atl-top .indietro:hover svg{transform:translateX(-3px)}

.atl-top .marchio{position:absolute;left:50%;transform:translateX(-50%)}

.atl-top .fine{margin-left:auto;font-size:12.5px;color:var(--ink3)}



/* --- schermata di apertura --- */

.atl-intro{position:absolute;inset:var(--h-testa) 0 0;background:var(--crema);display:grid;

  grid-template-columns:1fr 1fr;z-index:4}

.atl-intro.via{display:none}

.atl-intro .ph{overflow:hidden}

.atl-intro .ph img{width:100%;height:100%;object-fit:cover}

.atl-intro .testo{display:flex;flex-direction:column;align-items:center;justify-content:center;

  text-align:center;padding:40px 7vw;gap:16px}

.atl-intro p.corpo{max-width:50ch;color:var(--ink2)}

/* I passi sono sei e in fila andavano a capo cinque piu' uno, con l'ultimo

   spaiato in mezzo al vuoto. Su tre colonne fanno due righe piene: si legge

   che sono sei momenti, non cinque piu' un avanzo. */

.atl-intro .passi-mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));

  justify-items:center;gap:22px 30px;margin-top:10px;font-size:11px;

  letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}

.atl-intro .passi-mini b{display:block;font-family:var(--serif);font-size:21px;

  font-weight:400;letter-spacing:0;text-transform:none;color:var(--oro);margin-bottom:5px}



/* --- scelta del tipo, a tutta pagina --- */

.atl-tipi{position:absolute;inset:var(--h-testa) 0 0;display:grid;grid-template-columns:repeat(3,1fr);z-index:3}

.atl-tipi.via{display:none}

.atl-tipi button{position:relative;overflow:hidden;background:var(--scatola)}

.atl-tipi img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s}

.atl-tipi button:hover img{transform:scale(1.05)}

.atl-tipi .et{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;

  justify-content:center;gap:10px;color:#fff;text-shadow:0 1px 22px rgba(0,0,0,.42)}

.atl-tipi .et b{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.4vw,33px)}

.atl-tipi .et span{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;

  border-bottom:1px solid #fff;padding-bottom:3px}



/* --- corpo a tre colonne --- */

.atl-corpo{display:grid;grid-template-columns:1fr 292px 424px;min-height:0}

@media(max-width:1180px){.atl-corpo{grid-template-columns:1fr 250px 372px}}

.atl-tela{position:relative;background:var(--scatola);min-width:0;overflow:hidden}

.atl-tela svg{width:100%;height:100%;display:block}

.atl-zoom{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);display:flex;

  align-items:center;gap:12px;background:rgba(255,255,255,.9);padding:9px 15px;border:1px solid var(--filo)}

.atl-zoom input{width:120px;accent-color:var(--oro)}

.atl-zoom button{color:var(--ink2);display:grid;place-items:center}

.atl-suggerimento{position:absolute;left:26px;top:22px;font-size:12.5px;color:var(--ink3);

  max-width:26ch;line-height:1.6}



/* --- colonna passi --- */

.atl-passi{border-left:1px solid var(--filo);border-right:1px solid var(--filo);background:#fff;overflow:auto}

.atl-passo{width:100%;text-align:left;padding:26px 22px;border-bottom:1px solid #F1EFEA;

  display:flex;align-items:flex-start;gap:12px;transition:background .2s}

.atl-passo:hover{background:#FAF8F4}

.atl-passo.attivo{background:var(--crema)}

.atl-passo .corpo{flex:1;min-width:0}

.atl-passo b{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:500}

.atl-passo small{display:block;margin-top:7px;font-size:12.5px;color:var(--ink3);

  letter-spacing:.05em;text-transform:uppercase;line-height:1.5}

.atl-passo .spunta{width:19px;height:19px;border-radius:50%;background:var(--oro);color:#fff;

  display:grid;place-items:center;flex:none;margin-top:1px}

.atl-passo .frec{color:var(--ink3);flex:none;margin-top:2px}



/* --- pannello opzioni --- */

.atl-opz{overflow:auto;background:#fff;padding-bottom:24px}

.atl-titolo{padding:18px 20px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px}

.atl-titolo b{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:500}

.atl-titolo .conto{font-size:11.5px;color:var(--ink3)}

.pill{background:var(--crema);color:var(--ink);font-size:10px;letter-spacing:.11em;

  text-transform:uppercase;padding:5px 9px}

.materiali{display:flex;align-items:center;gap:9px;padding:2px 20px 14px;font-size:12.5px;color:var(--ink2)}

.materiali button{width:19px;height:19px;border-radius:50%;border:1px solid #D9D3C8}

.materiali button.on{outline:1px solid var(--ink);outline-offset:2px}



.griglia-opz{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--filo);

  border-top:1px solid var(--filo);border-bottom:1px solid var(--filo)}

.opz{background:#fff;text-align:left;position:relative;display:flex;flex-direction:column}

.opz .ph{aspect-ratio:1.24;background:var(--scatola);display:grid;place-items:center;overflow:hidden}

.opz .ph img{width:100%;height:100%;object-fit:cover}

.opz .ph svg{width:100%;height:100%}

.opz .et{padding:11px 12px 13px;font-size:11px;letter-spacing:.07em;text-transform:uppercase;line-height:1.5}

.opz .pr{display:block;margin-top:5px;color:var(--ink3);letter-spacing:0;text-transform:none;font-size:12.5px}

.opz .sel{position:absolute;left:9px;top:9px;width:19px;height:19px;border-radius:50%;

  background:var(--ink);color:#fff;display:none;place-items:center}

.opz.on .sel{display:grid}

.opz.on{outline:1px solid var(--ink);outline-offset:-1px;z-index:2}

.opz .info{position:absolute;right:9px;top:9px;width:17px;height:17px;border-radius:50%;

  border:1px solid #D5CFC4;color:var(--ink3);font-size:10px;display:grid;place-items:center}



.qta{display:flex;align-items:center;justify-content:space-between;background:#F2EFE9;

  color:var(--ink2);padding:0 4px;height:33px;margin-top:auto}

.qta.attiva{background:var(--ink);color:#fff}

.qta button{width:31px;height:31px;display:grid;place-items:center;font-size:15px;line-height:1}

.qta span{font-size:12.5px;font-variant-numeric:tabular-nums}



.righe{padding:6px 20px 0}

.riga-scelta{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;

  border:1px solid var(--filo);padding:15px 16px;margin-bottom:9px;font-size:13.5px;background:#fff}

.riga-scelta:hover{border-color:var(--ink3)}

.riga-scelta.on{border-color:var(--ink)}

.riga-scelta i{width:15px;height:15px;border-radius:50%;border:1px solid #CFC9BE;flex:none;

  display:grid;place-items:center}

.riga-scelta.on i{border-color:var(--ink)}

.riga-scelta.on i::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink)}

.nota{padding:15px 20px;font-size:12.5px;color:var(--ink2);line-height:1.65}

table.mis{width:calc(100% - 40px);margin:14px 20px 0;border-collapse:collapse;font-size:12.5px}

table.mis th{text-align:left;font-weight:400;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;

  color:var(--ink3);padding:8px 0;border-bottom:1px solid var(--filo)}

table.mis td{padding:9px 0;border-bottom:1px solid #F2EFE9;font-variant-numeric:tabular-nums}



.categorie{display:flex;gap:3px;padding:14px 12px 10px;border-bottom:1px solid var(--filo)}

.cat{flex:1;min-width:0;text-align:center;color:var(--ink2)}

.cat .tondo{width:44px;height:44px;margin:0 auto 7px;border-radius:50%;border:1px solid var(--filo);

  background:#fff;display:grid;place-items:center;position:relative}

.cat.on .tondo{border-color:var(--ink)}

.cat .tondo svg{width:32px;height:32px}

.cat b{font-size:9px;letter-spacing:.1em;text-transform:uppercase;font-weight:400;display:block;line-height:1.3}

.cat .bollo{position:absolute;right:-3px;top:-3px;width:16px;height:16px;border-radius:50%;

  background:var(--ink);color:#fff;font-size:9.5px;display:grid;place-items:center}

.distanza{display:flex;align-items:center;gap:10px;padding:13px 20px;border-bottom:1px solid var(--filo);

  font-size:12.5px;color:var(--ink2)}

.distanza .gruppo{margin-left:auto;display:flex;gap:11px}

.distanza button{padding-bottom:2px;border-bottom:1px solid transparent}

.distanza button.on{color:var(--ink);border-color:var(--ink)}



/* la fila dei ciondoli con la loro posizione, al passo 5 */

.riga-posto{display:flex;align-items:center;gap:12px;padding:11px 20px;

  border-bottom:1px solid #F1EFEA}

.riga-posto .segno{width:26px;height:26px;flex:none;display:grid;place-items:center}

.riga-posto .segno svg{width:100%;height:100%}

.riga-posto .nome{flex:1;min-width:0;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;

  white-space:nowrap}

.riga-posto .dove{font-size:12px;color:var(--ink3);font-variant-numeric:tabular-nums;flex:none}

.riga-posto .via{width:26px;height:26px;flex:none;border-radius:50%;color:var(--ink3);

  font-size:17px;line-height:1;display:grid;place-items:center;

  transition:background var(--t-svelta) var(--curva),color var(--t-svelta) var(--curva)}

.riga-posto .via:hover{background:var(--crema);color:var(--ink)}

/* "Scegli" sulle schede del tipo: si vede sempre, non solo col mouse sopra */

.atl-tipi .et .scegli{margin-top:14px;font-size:10.5px;letter-spacing:.18em;

  text-transform:uppercase;border:1px solid rgba(255,255,255,.55);border-radius:999px;

  padding:9px 22px;transition:background var(--t-svelta) var(--curva),

  border-color var(--t-svelta) var(--curva)}

.atl-tipi button:hover .scegli{background:#fff;border-color:#fff;color:var(--ink)}

.atl-fondo{background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;

  gap:24px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase}

.atl-fondo .prezzo{font-variant-numeric:tabular-nums;color:#fff}

.atl-fondo button{border-left:1px solid rgba(255,255,255,.22);padding:0 28px;height:100%;letter-spacing:.16em}

.atl-fondo button:hover{color:var(--oro)}

.atl-fondo.spento{background:#8C877E}



.atl-fine{position:absolute;inset:var(--h-testa) 0 0;background:rgba(255,255,255,.96);z-index:6;

  display:none;place-items:center;padding:30px}

.atl-fine.aperto{display:grid}

.atl-fine .scheda{background:#fff;border:1px solid var(--filo);max-width:800px;width:100%;

  display:grid;grid-template-columns:1fr 1fr}

@media(max-width:820px){.atl-fine .scheda{grid-template-columns:1fr}}

.atl-fine .anteprima{background:var(--scatola);display:grid;place-items:center;padding:14px}

.atl-fine .anteprima svg{width:100%}

.atl-fine .dett{padding:32px 34px;display:flex;flex-direction:column;gap:12px}

.atl-fine dl{display:grid;grid-template-columns:auto 1fr;gap:9px 16px;font-size:13px;margin:4px 0}

.atl-fine dt{color:var(--ink3)}

.atl-fine dd{text-align:right}

.atl-fine .tot{display:flex;justify-content:space-between;border-top:1px solid var(--filo);

  padding-top:13px;font-size:16px}



/* ============ ATELIER SUL TELEFONO ============

   Tre colonne su 412 pixel non esistono: si impila. La tela resta in alto,

   sempre visibile mentre scegli; i passi diventano una fascia che scorre di

   lato; le opzioni prendono tutta la larghezza. */

@media(max-width:820px){

  .atl-top{padding:0 16px;gap:10px}

  .atl-top .marchio{display:none}

  .atl-top .fine{font-size:11.5px}



  .atl-intro{grid-template-columns:1fr;grid-template-rows:calc(30vh / var(--zoom)) 1fr;overflow-y:auto}

  .atl-intro .testo{padding:26px 20px 40px;gap:13px}

  /* sul telefono due colonne per tre righe: tre stringerebbero troppo */

  .atl-intro .passi-mini{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;font-size:11.5px}

  .atl-intro .passi-mini b{font-size:18px}



  .atl-tipi{grid-template-columns:1fr;grid-auto-rows:1fr}



  .atl-corpo{grid-template-columns:1fr;grid-template-rows:auto auto 1fr;overflow-y:auto}

  .atl-tela{height:calc(40vh / var(--zoom));position:sticky;top:0;z-index:2;border-bottom:1px solid var(--filo)}

  .atl-suggerimento{display:none}

  .atl-zoom{bottom:10px;padding:6px 11px;gap:8px}

  .atl-zoom input{width:84px}



  /* i quattro passi diventano una fascia che scorre */

  .atl-passi{display:flex;overflow-x:auto;border-left:0;border-right:0;

    border-bottom:1px solid var(--filo);scrollbar-width:none}

  .atl-passi::-webkit-scrollbar{display:none}

  .atl-passo{width:auto;min-width:158px;flex:none;padding:13px 15px;

    border-bottom:0;border-right:1px solid #F1EFEA}

  .atl-passo small{margin-top:4px;font-size:11.5px}

  .atl-passo .frec{display:none}



  .griglia-opz{grid-template-columns:1fr 1fr}

  .atl-fondo{font-size:12px}

  .atl-fondo button{padding:0 16px;letter-spacing:.1em}

}







/* ============ COMANDI ============



   Tre soli comandi, definiti qui e usati ovunque. Stati compresi: il fuoco da



   tastiera si vede, lo spento sembra spento. */



:root{



  --r-netto:3px;          /* appena smussato: uno spigolo vivo su un pulsante



                             nero pieno sembra un rettangolo disegnato, non un comando */



  --r-tondo:999px;        /* solo per cerchi e pastiglie */



  --ombra-appena:0 1px 2px rgba(30,25,8,.05);



  --ombra-alzata:0 18px 40px -24px rgba(30,25,8,.35);



}







.button,.carrello,.secondario,.pillola,.filtro,.cta,.ritorno,.atl-fondo button{



  font-family:inherit;



  transition:background var(--t-svelta) var(--curva),



             color var(--t-svelta) var(--curva),



             border-color var(--t-svelta) var(--curva),



             box-shadow var(--t-svelta) var(--curva),



             transform var(--t-svelta) var(--curva);



}







/* il fuoco da tastiera: un filetto oro, mai il contorno grigio di sistema */



a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,



summary:focus-visible,[tabindex]:focus-visible{



  outline:2px solid var(--oro);



  outline-offset:3px;



  border-radius:1px;



}



:focus:not(:focus-visible){outline:none}







/* --- primario: uno per schermata --- */



.carrello,.button.pieno{



  border-radius:var(--r-netto);



  box-shadow:var(--ombra-appena);



}



.carrello:hover,.button.pieno:hover{box-shadow:var(--ombra-alzata)}



.carrello:active,.button.pieno:active{transform:translateY(1px)}



.carrello:disabled,.button.pieno:disabled{



  background:#CFC9BF;color:#F6F4F0;box-shadow:none;cursor:default;transform:none;



}







/* --- secondario: stesso peso, solo il filo --- */



.secondario{



  font-size:15px;letter-spacing:.1em;min-height:52px;



  border-radius:var(--r-netto);



  background:#fff;



}



.secondario:hover{border-color:var(--ink);color:var(--ink)}



.secondario:disabled{color:#B9B3A9;border-color:var(--filo);cursor:default}







/* --- ghost: un rimando, non una scatola --- */



.cta{



  display:inline-flex;align-items:center;gap:8px;min-height:40px;



  border-bottom:1px solid var(--filo);padding-bottom:2px;



}



.cta:hover{border-color:currentColor}







/* --- pastiglie: filtri e misure, l'unica forma tonda dei comandi --- */



.filtro{border-radius:var(--r-netto)}



.filtro:hover{border-color:var(--ink3)}







/* --- il cuore accanto all'azione principale --- */



.cuore{border-radius:var(--r-netto);transition:border-color var(--t-svelta) var(--curva),



  color var(--t-svelta) var(--curva)}



.cuore:hover{border-color:var(--ink);color:var(--vino)}







/* ============ FILETTI ============



   Un filo solo in tutto il sito: separa, contiene, e diventa oro quando una



   cosa e' scelta. Le fotografie prodotto arrivano da fornitori diversi e



   hanno fondi diversi: la cornice le rimette in riga. */



.prod .cornice{border:1px solid var(--filo);



  transition:border-color var(--t-media) var(--curva)}



.prod:hover .cornice{border-color:#D8D2C6}



.scorri .prod .cornice,.griglia .prod .cornice{background:#FCFCFB}



/* l'intestazione di sezione poggia su un filetto: dice dove comincia il blocco



   senza bisogno di uno sfondo diverso */



.sezione .intestazione{border-top:1px solid var(--filo);padding-top:26px}



.sezione.stretta .intestazione{border-top:1px solid var(--filo)}







/* ============ COMPARSE ============ */



body.animata .appare{opacity:0;transform:translateY(14px)}



body.animata .appare.visto{opacity:1;transform:none;



  transition:opacity .72s var(--curva),transform .72s var(--curva)}



@media(prefers-reduced-motion:reduce){



  body.animata .appare{opacity:1;transform:none;transition:none}



}







/* ============ LE COLLEZIONI ============



   Sei schede grandi invece di sei mattonelle piccole. Il nome sta sotto la



   fotografia, su bianco: sopra l'immagine si sarebbe letto male su meta' delle



   foto, e nessuna scritta bianca regge su un fondo che non si controlla. */



.collezioni{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 26px}



@media(max-width:980px){.collezioni{grid-template-columns:repeat(2,1fr);gap:24px 18px}}



@media(max-width:560px){.collezioni{grid-template-columns:1fr 1fr;gap:20px 12px}}



.collezione{display:block;text-align:left;background:none}



.collezione .ph{aspect-ratio:3/4;background:var(--nebbia);border:1px solid var(--filo);



  transition:border-color var(--t-media) var(--curva)}



.collezione:hover .ph{border-color:#D9D4C9}



.collezione .ph img{width:100%;height:100%;object-fit:cover}



.collezione .nome{display:block;margin-top:15px;font-family:var(--serif);font-size:21px;



  letter-spacing:.01em;transition:color var(--t-media) var(--curva);position:relative;



  padding-bottom:9px}



.collezione .nome::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;



  background:var(--oro);transition:width var(--t-lenta) var(--curva)}



.collezione:hover .nome{color:var(--oro)}



.collezione:hover .nome::after{width:34px}



.collezione .dida{display:block;margin-top:4px;font-size:13px;color:var(--ink3)}



.collezione .quanti{display:block;margin-top:2px;font-size:11px;letter-spacing:.14em;



  text-transform:uppercase;color:var(--ink3);font-variant-numeric:tabular-nums}







/* ============ LA FASCIA COL FILMATO ============ */



.fascia-film{background:#fff;border-top:1px solid var(--filo);border-bottom:1px solid var(--filo)}



.ff-in{display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);align-items:center;



  gap:clamp(28px,5vw,80px);padding:clamp(40px,6vh,80px) 0}



@media(max-width:900px){.ff-in{grid-template-columns:1fr;gap:30px}}



.ff-testo .occhiello{color:var(--oro);margin-bottom:16px}



.ff-testo p.corpo{margin:18px 0 28px;max-width:40ch;color:var(--ink2);font-size:15.5px;



  line-height:1.66}



/* i filmati sono composti 4:5, come le celle della scheda: dargli una



   fascia larga vorrebbe dire tagliarli sopra e sotto proprio dove sta il



   gioiello. La colonna si adatta al filmato, non il contrario. */



.ff-film{position:relative;overflow:hidden;background:var(--nebbia);aspect-ratio:4/5}



.ff-film video{width:100%;height:100%;object-fit:cover;display:block}



/* un velo appena accennato in basso: il filmato e' chiaro e il bordo bianco



   della pagina lo farebbe sfumare nel niente */



.ff-film::after{content:"";position:absolute;inset:auto 0 0 0;height:34%;pointer-events:none;



  background:linear-gradient(to top,rgba(30,25,16,.10),transparent)}







/* ============ LA SCHEDA DEL PEZZO ============ */



.scheda-pezzo{border-top:1px solid var(--filo);background:#fff}



/* solo sopra e sotto: `padding: X 0` azzera anche il margine laterale che

   il contenitore aveva gia', e la tabella finiva contro il bordo */

.sp-in{padding-top:clamp(44px,6vh,86px);padding-bottom:clamp(44px,6vh,86px)}



.sp-testa{display:flex;align-items:baseline;gap:18px;margin-bottom:38px}



.sp-testa h2{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.4vw,32px)}



.sp-testa .rif{margin-left:auto;font-size:12px;letter-spacing:.14em;text-transform:uppercase;



  color:var(--ink3)}



/* i tre numeri che contano, grandi e in fila */



.sp-numeri{display:grid;grid-template-columns:repeat(3,1fr);gap:0;



  border-top:1px solid var(--filo);border-bottom:1px solid var(--filo)}



@media(max-width:760px){.sp-numeri{grid-template-columns:1fr;



  }.sp-numeri>div+div{border-top:1px solid #F1EFEA}}



.sp-numeri>div{padding:26px 30px 26px 0}



.sp-numeri>div+div{padding-left:30px;border-left:1px solid #F1EFEA}



@media(max-width:760px){.sp-numeri>div+div{border-left:0;padding-left:0}}



.sp-numeri .et{display:block;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;



  color:var(--ink3);margin-bottom:11px}



.sp-numeri .val{display:block;font-family:var(--serif);font-size:clamp(19px,1.7vw,23px);



  line-height:1.3;color:var(--ink)}



.sp-numeri .sotto{display:block;margin-top:6px;font-size:13px;color:var(--ink3)}



/* il resto: due colonne, elenco arioso a sinistra, racconto a destra */



.sp-corpo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,74px);



  padding-top:38px}



@media(max-width:860px){.sp-corpo{grid-template-columns:1fr;gap:32px}}



.sp-righe{display:grid;grid-template-columns:auto 1fr;gap:0}



.sp-righe dt,.sp-righe dd{padding:13px 0;border-bottom:1px solid #F3F1EC;font-size:14px}



.sp-righe dt{color:var(--ink3);padding-right:24px}



.sp-righe dd{text-align:right;color:var(--ink)}



.sp-racconto p{font-size:15.5px;line-height:1.7;color:var(--ink2)}



.sp-racconto p+p{margin-top:14px}



.sp-nota{margin-top:22px;padding-top:18px;border-top:1px solid var(--filo);font-size:13px;



  color:var(--ink3);line-height:1.6}







/* ============ IL PANNELLO DEI FILTRI, ANIMATO ============ */



.pannello-filtri.aperto .pf-gruppo{animation:filtroEntra .46s var(--curva) backwards}



.pannello-filtri.aperto .pf-gruppo:nth-child(1){animation-delay:.05s}



.pannello-filtri.aperto .pf-gruppo:nth-child(2){animation-delay:.10s}



.pannello-filtri.aperto .pf-gruppo:nth-child(3){animation-delay:.15s}



.pannello-filtri.aperto .pf-gruppo:nth-child(4){animation-delay:.20s}



.pannello-filtri.aperto .pf-gruppo:nth-child(5){animation-delay:.25s}



.pannello-filtri.aperto .pf-gruppo:nth-child(6){animation-delay:.30s}



@keyframes filtroEntra{from{opacity:0;transform:translateY(-9px)}to{opacity:1;transform:none}}



/* la casella si riempie con un piccolo scatto */



.pf-voce.on .pf-casella{animation:spunta .32s var(--curva)}



@keyframes spunta{0%{transform:scale(.7)}55%{transform:scale(1.16)}100%{transform:scale(1)}}



/* il numero in fondo batte quando cambia */



.pf-fondo .mostra.cambiato{animation:battito .42s var(--curva)}



@keyframes battito{0%{transform:scale(1)}40%{transform:scale(1.045)}100%{transform:scale(1)}}



.pf-voce .n{transition:color var(--t-svelta) var(--curva)}



.pf-voce:hover:not(:disabled) .n{color:var(--oro)}



@media(prefers-reduced-motion:reduce){



  .pannello-filtri.aperto .pf-gruppo,.pf-voce.on .pf-casella,.pf-fondo .mostra.cambiato{



    animation:none}



}







/* ============ IMMAGINI VIVE ============



   Una regola sola per tutte le fotografie del sito: al passaggio del mouse



   crescono di poco e ci passa sopra un riflesso obliquo, come la luce su una



   pietra che si gira in mano. Poco movimento, ma ovunque lo stesso: e' quello



   che fa sembrare un sito montato invece che assemblato.







   Il riflesso e' un gradiente che attraversa l'immagine una volta sola. Non



   parte da solo e non si ripete: e' una risposta al gesto, non un'insegna. */



/* display:block perche' meta' dei contenitori sono <span>: un elemento in



   linea ignora il rapporto d'aspetto, e l'immagine dentro esce dal riquadro */



.viva{display:block;position:relative;overflow:hidden;isolation:isolate}



.viva img,.viva video{transition:transform 1.25s var(--curva),filter .7s var(--curva)}



.viva:hover img,.viva:hover video{transform:scale(1.055);filter:saturate(1.05) brightness(1.02)}



/* Il riflesso sopra le fotografie non c'e' piu'.







   L'avevo messo perche' "tutto deve brillare", e per due giri ho provato a



   sistemarlo rallentandolo e schiarendolo. Ma un lampo che attraversa una



   fotografia a ogni movimento del mouse da' fastidio anche quando e' lento:



   il gioiello e' gia' la cosa che brilla, e una luce finta sopra una luce



   vera si vede che e' finta. Resta l'avvicinamento lento, che accompagna il



   gesto invece di rispondergli. */



/* sul telefono il riflesso non ha senso: non c'e' un mouse che passa */



@media(hover:none){.viva::after{display:none}.viva:hover img{transform:none}}



@media(prefers-reduced-motion:reduce){



  .viva:hover img,.viva:hover video{transform:none}



  .viva:hover::after{animation:none}



}







/* il filetto sotto i titoli si tira da solo quando la sezione entra */



.intestazione{position:relative}



.sezione .intestazione::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;



  width:0;background:var(--oro);transition:width 1.1s var(--curva) .15s}



.sezione .intestazione.visto::after{width:66px}







/* ============ PANNELLO DEI FILTRI ============ */



.apri-filtri{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--filo);



  border-radius:var(--r-netto);padding:9px 17px;font-size:11px;letter-spacing:.11em;



  text-transform:uppercase;color:var(--ink2);background:#fff;



  transition:border-color var(--t-svelta) var(--curva),color var(--t-svelta) var(--curva)}



.apri-filtri:hover{border-color:var(--ink);color:var(--ink)}



.apri-filtri .quanti-attivi{display:grid;place-items:center;min-width:18px;height:18px;



  padding:0 5px;border-radius:9px;background:var(--oro);color:#fff;font-size:10px;



  letter-spacing:0}







.velo-filtri{position:fixed;inset:0;z-index:78;background:rgba(24,20,14,.34);



  opacity:0;pointer-events:none;transition:opacity var(--t-lenta) var(--curva)}



.velo-filtri.aperto{opacity:1;pointer-events:auto}







.pannello-filtri{position:fixed;top:0;left:0;bottom:0;z-index:80;width:min(392px,92vw);



  background:#fff;border-right:1px solid var(--filo);display:flex;flex-direction:column;



  transform:translateX(-100%);transition:transform var(--t-lenta) var(--curva);



  box-shadow:22px 0 60px -40px rgba(30,25,16,.6)}



.pannello-filtri.aperto{transform:none}



.pf-testa{display:flex;align-items:baseline;gap:14px;padding:26px 26px 18px;



  border-bottom:1px solid var(--filo)}



.pf-testa b{font-family:var(--serif);font-weight:400;font-size:24px;letter-spacing:.01em}



.pf-testa .conta{font-size:12.5px;color:var(--ink3);font-variant-numeric:tabular-nums}



.pf-testa .chiudi{margin-left:auto;width:34px;height:34px;display:grid;place-items:center;



  color:var(--ink3);border-radius:50%;transition:background var(--t-svelta) var(--curva),



  color var(--t-svelta) var(--curva)}



.pf-testa .chiudi:hover{background:var(--crema);color:var(--ink)}



.pf-corpo{flex:1;overflow-y:auto;overscroll-behavior:contain}







.pf-gruppo{border-bottom:1px solid #F1EFEA}



.pf-titolo{width:100%;display:flex;align-items:center;gap:12px;padding:18px 26px;



  text-align:left;transition:background var(--t-svelta) var(--curva)}



.pf-titolo:hover{background:#FCFCFB}



.pf-titolo b{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:500}



.pf-titolo .scelti{font-size:11px;color:var(--oro);letter-spacing:.04em}



.pf-titolo .segno{margin-left:auto;color:var(--ink3);transition:transform var(--t-media) var(--curva)}



.pf-gruppo.aperto .pf-titolo .segno{transform:rotate(180deg)}



.pf-voci{display:none;padding:0 26px 18px}



.pf-gruppo.aperto .pf-voci{display:block}







.pf-voce{width:100%;display:flex;align-items:center;gap:12px;padding:9px 0;text-align:left;



  font-size:14px;color:var(--ink);transition:color var(--t-svelta) var(--curva)}



.pf-voce:hover:not(:disabled){color:var(--oro)}



.pf-voce:disabled{color:#C9C5BC;cursor:default}



/* la casella: un quadrato che si riempie d'oro, non la casella di sistema */



.pf-casella{width:16px;height:16px;flex:none;border:1px solid #CFC9BE;border-radius:2px;



  display:grid;place-items:center;color:#fff;



  transition:background var(--t-svelta) var(--curva),border-color var(--t-svelta) var(--curva)}



.pf-voce.on .pf-casella{background:var(--oro);border-color:var(--oro)}



.pf-casella svg{opacity:0;transition:opacity var(--t-svelta) var(--curva)}



.pf-voce.on .pf-casella svg{opacity:1}



.pf-voce .nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}



.pf-voce .n{font-size:12px;color:var(--ink3);font-variant-numeric:tabular-nums}



/* il colore dell'oro si sceglie guardandolo, non leggendolo */



.pf-pallino{width:15px;height:15px;border-radius:50%;flex:none;border:1px solid rgba(0,0,0,.12)}







.pf-fondo{border-top:1px solid var(--filo);padding:16px 26px;display:flex;gap:14px;



  align-items:center;background:#fff}



.pf-fondo .azzera-tutto{font-size:12.5px;color:var(--ink3);border-bottom:1px solid var(--filo);



  padding-bottom:2px;transition:color var(--t-svelta) var(--curva)}



.pf-fondo .azzera-tutto:hover{color:var(--ink);border-bottom-color:currentColor}



.pf-fondo .mostra{margin-left:auto;background:var(--ink);color:#fff;border-radius:var(--r-netto);



  padding:13px 26px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;



  transition:background var(--t-media) var(--curva)}



.pf-fondo .mostra:hover{background:var(--oro)}



.pf-fondo .mostra:disabled{background:#B6B1A8;cursor:default}







/* le scelte fatte, sopra la griglia, ognuna con la sua crocetta */



.scelte-attive{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin:0 0 22px}



.scelte-attive:empty{display:none}



.gettone{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--filo);



  border-radius:999px;padding:7px 8px 7px 15px;font-size:12.5px;color:var(--ink2);



  transition:border-color var(--t-svelta) var(--curva),color var(--t-svelta) var(--curva)}



.gettone:hover{border-color:var(--ink);color:var(--ink)}



.gettone i{font-style:normal;font-size:15px;line-height:1;opacity:.6}



.gettone:hover i{opacity:1}







@media(max-width:560px){



  .pannello-filtri{width:100%}



  .pf-testa,.pf-titolo,.pf-voci,.pf-fondo{padding-left:20px;padding-right:20px}



}







/* ============ TELEFONO ============



   In coda a tutto, cosi' vince: a parita' di peso decide l'ultima regola



   scritta. Le taglie sotto gli 11 pixel salgono - il maiuscoletto spaziato a



   9 punti si legge su un monitor a mezzo metro, non in mano - e ogni cosa che



   si tocca arriva ad almeno 34 pixel, sotto i quali il pollice sbaglia. */



@media(max-width:820px){



  .occhiello{font-size:11.5px;letter-spacing:.16em}



  .prod .badge,.badge{font-size:11px;padding:5px 9px}



  .prod .aggiungi{font-size:11.5px}



  .prod .cornice .film{font-size:10.5px}



  .pannello th{font-size:11.5px}



  .pannello .ist b{font-size:12px}



  .fascia-atelier .passi b,.usp b,.bt .occhiello{font-size:11.5px}







  footer{font-size:14px}



  footer b{font-size:12.5px}



  footer a,footer span{padding:9px 0}



  footer .fine{font-size:12.5px;gap:10px}



  footer .cols{gap:24px}







  .cta{padding:10px 0;display:inline-flex;align-items:center}



  .barra-collezione button{min-height:36px;padding:6px 14px}



  .marchio img{height:26px}



}







/* ============ IL PREZZO ============



   E' l'informazione per cui si e' aperta la pagina: si scrive in tondo, grande,



   con le cifre allineate. Il prezzo pieno barrato e lo sconto stanno accanto,



   piu' piccoli, senza rubargli la scena. */



.pdp .prezzo{margin-top:22px;display:flex;gap:14px;align-items:baseline;flex-wrap:wrap}



.pdp .prezzo>span{font-family:var(--serif);font-size:clamp(26px,2.3vw,31px);



  letter-spacing:.005em;color:var(--ink);font-variant-numeric:tabular-nums}



.pdp .prezzo s{font-size:16px;color:var(--ink3);text-decoration-thickness:1px;



  font-variant-numeric:tabular-nums}



/* il fondo va spento a mano: la regola vecchia lo riempiva di vino e scriveva



   in bianco, e cambiando solo il colore del testo restava vino su vino */



.pdp .prezzo em{font-style:normal;font-size:11px;letter-spacing:.09em;color:var(--vino);



  background:none;border:1px solid currentColor;border-radius:var(--r-netto);padding:3px 7px}



.prod .prezzo{font-variant-numeric:tabular-nums}



.prod .prezzo span{font-size:15px;color:var(--ink)}







/* ============ I COMANDI ============ */



.riga-azioni{display:flex;gap:12px;align-items:stretch;margin-top:30px}



.carrello{flex:1;background:var(--ink);color:#fff;min-height:58px;padding:0 26px;



  display:flex;align-items:center;justify-content:center;gap:12px;



  font-size:12px;letter-spacing:.16em;text-transform:uppercase;



  position:relative;overflow:hidden}



/* il riflesso attraversa il pulsante quando ci passi sopra */











.carrello:hover{background:var(--oro)}



.cuore{width:58px;flex:none;border:1px solid var(--filo);border-radius:var(--r-netto);



  display:grid;place-items:center;color:var(--ink3)}



.cuore:hover{border-color:var(--ink);color:var(--vino)}



/* il secondario: filo sottile, e passandoci sopra si scurisce senza sparire */



.secondario{width:100%;margin-top:12px;border:1px solid var(--filo);



  min-height:52px;display:flex;align-items:center;justify-content:center;



  font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink);



  border-radius:var(--r-netto);background:#fff}



.secondario:hover{background:var(--crema);border-color:var(--ink);color:var(--ink)}







/* ============ LE RASSICURAZIONI ============



   Un filetto e tre righe grigie: non spunte colorate, che sembrano messe li'



   da un modulo e non disegnate insieme al resto. */



.rassicura{margin-top:30px;padding-top:22px;border-top:1px solid var(--filo);



  display:flex;flex-direction:column;gap:12px;list-style:none;font-size:13.5px;



  color:var(--ink2)}



.rassicura li{display:flex;align-items:flex-start;gap:12px;line-height:1.5}



.rassicura li::before{content:"";flex:none;width:14px;height:1px;margin-top:10px;



  background:var(--oro);opacity:.75}







/* ============ L'APERTURA ============ */



.hero-lato{padding-left:clamp(26px,6vw,96px);padding-right:clamp(26px,4vw,64px)}



.hero-scena video{width:100%;height:100%;object-fit:cover;display:block}



/* il filmato dell'apertura respira piano, cosi' la pagina non e' mai ferma */



.hero-scena video,.hero-grande img{animation:respiroLento 26s ease-in-out infinite alternate}



@keyframes respiroLento{from{transform:scale(1)}to{transform:scale(1.035)}}



@media(prefers-reduced-motion:reduce){



  .hero-scena video,.hero-grande img{animation:none}



}







/* ============ LA FASCIA COL FILMATO ============



   Senza cornice e senza fondo: il filmato e' gia' un rettangolo, incorniciarlo



   vuol dire disegnare due bordi dove ne serve zero. */



.ff-film{background:none}



.ff-film::after{display:none}







/* ============ TESTATA ============ */



.annuncio{background:#fff;color:var(--ink3);border-bottom:1px solid var(--filo);



  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;padding:11px 16px}



header{backdrop-filter:saturate(1.1) blur(9px);background:rgba(255,255,255,.94)}



.hrow{gap:clamp(18px,2.4vw,38px)}



.marchio img{height:32px}



nav{gap:clamp(14px,1.7vw,26px);font-size:12px;letter-spacing:.13em;text-transform:uppercase}



nav button{position:relative;padding:9px 0;border-bottom:0;color:var(--ink2);



  transition:color var(--t-media) var(--curva)}



nav button::after{content:"";position:absolute;left:50%;right:50%;bottom:2px;height:1px;



  background:var(--oro);transition:left var(--t-media) var(--curva),right var(--t-media) var(--curva)}



nav button:hover,nav button.on{color:var(--ink)}



nav button:hover::after,nav button.on::after{left:0;right:0}







/* ============ LA RICERCA CON LE ANTEPRIME ============ */



.cerca{position:relative;border-radius:var(--r-tondo)}



.risultati{position:absolute;top:calc(100% + 12px);right:0;width:min(430px,86vw);



  background:#fff;border:1px solid var(--filo);box-shadow:0 26px 54px -34px rgba(30,25,16,.5);



  z-index:75;display:none;overflow:hidden;border-radius:var(--r-netto)}



.risultati.aperto{display:block;animation:tendinaGiu .3s var(--curva)}



.risultati .voce{display:flex;align-items:center;gap:14px;width:100%;padding:11px 15px;



  text-align:left;border-bottom:1px solid #F4F2ED;



  transition:background var(--t-svelta) var(--curva)}



.risultati .voce:last-child{border-bottom:0}



.risultati .voce:hover{background:var(--crema)}



.risultati .ph{width:52px;height:64px;flex:none;background:var(--nebbia);



  border:1px solid var(--filo);display:grid;place-items:center;padding:5px}



.risultati .ph img{max-width:100%;max-height:100%;object-fit:contain}



.risultati .dati{flex:1;min-width:0}



.risultati .marca{display:block;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;



  color:var(--oro);margin-bottom:3px}



.risultati .nome{display:block;font-size:14px;line-height:1.3;overflow:hidden;



  text-overflow:ellipsis;white-space:nowrap}



.risultati .pr{flex:none;font-size:13px;color:var(--ink2);font-variant-numeric:tabular-nums}



.risultati .fondo{display:block;width:100%;padding:12px 15px;text-align:center;font-size:11px;



  letter-spacing:.15em;text-transform:uppercase;color:var(--ink2);background:var(--crema)}



.risultati .fondo:hover{color:var(--ink)}



.risultati .niente{padding:20px 16px;font-size:13.5px;color:var(--ink3);text-align:center}







/* ============ FILTRI, RIFINITURA ============ */



.pf-testa{padding:30px 28px 20px}



.pf-testa b{font-size:27px}



.pf-titolo{padding:19px 28px}



.pf-titolo b{letter-spacing:.18em}



/* il gruppo che ha delle scelte lo dice con un pallino, non con un numero nudo */



.pf-titolo .scelti{width:6px;height:6px;border-radius:50%;background:var(--oro);



  font-size:0;flex:none}



.pf-voci{padding:2px 28px 18px}



.pf-voce{padding:10px 8px 10px 0;margin-left:-8px;padding-left:8px;border-radius:var(--r-netto);



  transition:background var(--t-svelta) var(--curva),color var(--t-svelta) var(--curva)}



.pf-voce:hover:not(:disabled){background:var(--crema);color:var(--ink)}



.pf-fondo{flex-direction:column;align-items:stretch;gap:12px;padding:18px 28px 22px}



.pf-fondo .mostra{margin-left:0;width:100%;min-height:52px;position:relative;overflow:hidden}











.pf-fondo .azzera-tutto{align-self:center;border-bottom:0;color:var(--ink3)}



.pf-fondo .azzera-tutto:hover{color:var(--oro)}







/* ============ APERTURA: il testo al centro della sua meta' ============ */



.hero-lato{justify-content:center;padding-left:clamp(26px,7vw,120px);



  padding-right:clamp(26px,5vw,84px)}



.hero-testo{max-width:31rem}







/* ============ IL CAMBIO DI IMMAGINE SULLE SCHEDE ============



   Il passaggio da pezzo a posa avveniva in mezzo secondo netto, e sembrava uno



   scatto. Ora ci sono due tempi: appena il mouse arriva il gioiello si avvicina



   piano, e solo dopo mezzo secondo la posa entra in dissolvenza. Uscendo la



   posa se ne va subito, perche' tornare al pezzo deve essere immediato. */



.prod .cornice img:not(.vita){transition:transform 1.5s var(--curva)}



.prod:hover .cornice img:not(.vita){transform:scale(1.08)}



.prod .cornice img.vita{opacity:0;transition:opacity .5s var(--curva)}



.prod:hover .cornice img.vita{opacity:1;transition:opacity .95s var(--curva) .45s}



/* la cornice ha gia' il suo ingrandimento: qui si spegne per non sommarsi */



.prod .cornice.viva:hover img{transform:none}



.prod .cornice.viva:hover img:not(.vita){transform:scale(1.08)}







/* ============ LA COLONNA DELLA SCHEDA, ALLINEATA ============



   Le scelte avevano due strutture diverse nello stesso blocco: una riga con il



   valore a destra e una con un collegamento a destra. Due cose diverse nello



   stesso posto disallineano l'occhio piu' di uno spazio sbagliato. Adesso ogni



   scelta ha la stessa forma: etichetta sopra, pastiglie sotto - anche quando



   la scelta e' una sola, e allora la pastiglia sta li' spenta. */



.pdp-in>*+*{margin-top:0}



.pdp .briciole{margin-top:14px}



.pdp .marca{margin-top:18px}



.pdp-in h1{margin-top:8px}



.pdp .sommario{margin-top:9px}



.pdp .prezzo{margin-top:20px;padding-bottom:26px;border-bottom:1px solid var(--filo)}



.scelte{margin-top:26px;display:flex;flex-direction:column;gap:22px}



.scelta .et{display:flex;align-items:baseline;justify-content:space-between;gap:14px;



  margin-bottom:11px}



.scelta .et span{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;



  color:var(--ink3)}



.scelta .et .link{font-size:12px;color:var(--ink3);border-bottom:1px solid var(--filo);



  padding-bottom:1px;transition:color var(--t-svelta) var(--curva),



  border-color var(--t-svelta) var(--curva)}



.scelta .et .link:hover{color:var(--ink);border-color:currentColor}



.opzioni{display:flex;flex-wrap:wrap;gap:9px}



.pillola{border:1px solid var(--filo);border-radius:var(--r-netto);padding:10px 16px;



  font-size:13px;color:var(--ink2);background:#fff;min-height:40px;



  transition:border-color var(--t-svelta) var(--curva),color var(--t-svelta) var(--curva),



  background var(--t-svelta) var(--curva)}



.pillola:hover:not(:disabled){border-color:var(--ink3);color:var(--ink)}



.pillola.on{border-color:var(--ink);color:var(--ink);background:var(--crema)}



.pillola:disabled{cursor:default;color:var(--ink2)}



.riga-azioni{margin-top:30px}



.fisarmonica{margin-top:34px;border-top:1px solid var(--filo)}



.fisarmonica .prosa{margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid #F4F2ED}



.fisarmonica table.tec td{padding:11px 0;vertical-align:top;font-size:13.5px}



.fisarmonica table.tec td:first-child{color:var(--ink3);width:38%;padding-right:16px}







/* ============ APERTURA ============



   Due colonne: il testo a sinistra sul crema, la fotografia a destra.







   La fotografia e' 16:9, e il riquadro che la contiene ha la stessa forma:



   cosi' si vede intera, senza un taglio. Avevo provato a metterla a tutta



   larghezza con il testo sopra - la composizione lo permetteva - ma sopra



   l'interno della boutique il testo non si legge, e un titolo che non si legge



   e' un titolo che non c'e'. Sul crema si legge sempre.







   L'altezza viene dalla fotografia: a schermo intero sono poco piu' di



   quattrocento pixel, quindi sotto si vede gia' la collezione. */



.hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);



  align-items:center;height:auto;min-height:0;



  margin-top:calc(-1 * var(--h-testa));padding-top:var(--h-testa);background:var(--crema)}



.hero-lato{display:flex;align-items:center;justify-content:center;min-width:0;



  padding:clamp(30px,4vh,56px) clamp(26px,4vw,64px)}



.hero-testo{max-width:min(30rem,100%)}



.hero-testo .occhiello{color:var(--oro);margin-bottom:16px}



.tit-hero{color:var(--ink);font-size:clamp(34px,3.9vw,58px);line-height:1.06}



.hero-sot{margin:18px 0 26px;max-width:33ch;font-size:15.5px;line-height:1.62;color:var(--ink2)}



.hero-azioni{display:flex;align-items:center;gap:24px;flex-wrap:wrap}



.hero-scena{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;align-self:stretch;



  display:flex;align-items:center}



/* Niente respiro sulla fotografia dell'apertura.







   L'ingrandimento lento serviva a non lasciare la pagina ferma, ma ingrandire



   una fotografia anche solo del tre per cento la fa ricampionare, e su un



   ritratto si vede subito: il viso perde il filo. La nitidezza di



   quell'immagine vale piu' di un movimento che quasi nessuno nota. Il



   movimento nella pagina c'e' lo stesso, piu' sotto. */



.hero-scena img{width:100%;height:100%;object-fit:cover}



@media(max-width:900px){



  .hero{grid-template-columns:1fr}



  .hero-scena{order:-1;aspect-ratio:16/9}



  .hero-lato{padding:30px 0 36px}



  .hero-testo{padding:0 22px}



}







/* ============ INGRANDIRE UNA POSA ============



   La lente che seguiva il mouse non c'e' piu': funzionava, ma stancava. Resta



   il modo semplice - si preme la fotografia e si apre intera, con la rotellina



   per avvicinarsi - e sulla fotografia c'e' scritto che si puo' fare. */



.lastra.apribile{cursor:zoom-in}







/* ============ IL TAGLIO DELLE FOTOGRAFIE DELLA HOME ============



   Le fotografie nuove sono quattro terzi, i riquadri della pagina sono piu'



   alti che larghi: si ritagliano ai lati. Il centro non e' sempre a meta' -



   su un ritratto il soggetto sta piu' in alto, su una natura morta al centro -



   e qui e' scritto per ognuna. */



.hero-grande img{object-position:50% 46%}



.ff-film img{object-position:50% 50%}



.fascia-foto img{object-position:50% 50%}



.due-colonne .col:first-child .ph img{object-position:50% 46%}



.due-colonne .col:last-child .ph img{object-position:50% 44%}



.bt-foto img{object-position:50% 52%}







/* ============ IL MENU PIU' GRANDE ============



   Dieci voci in maiuscoletto da dodici pixel stavano strette e si leggevano



   male da lontano. Salgono di taglia e prendono aria: la testata cresce di



   otto pixel e le voci si distanziano. */



:root{--h-testa:88px}



nav{gap:clamp(16px,2vw,32px);font-size:13px;letter-spacing:.14em}



nav button{padding:12px 0}



.marchio img{height:36px}



@media(max-width:1400px){nav{gap:clamp(14px,1.6vw,24px);font-size:12.5px}}



@media(max-width:1200px){nav{gap:14px;font-size:12px}}







/* ============ IL MENU CHE SI SPEGNE ============



   Entrando nel menu con il mouse, le voci che non stai puntando si abbassano



   di tono e quella sotto il dito resta piena e prende il suo filetto. E' un



   modo di dire "adesso stai leggendo questa" senza aggiungere niente: si



   toglie peso alle altre invece di darne a una.







   Vale per la fila in alto, per le colonne della tendina e per le colonne del



   piede: sono tutti elenchi di collegamenti, e si comportano allo stesso modo. */



nav#menu:hover>button{color:var(--ink3);opacity:.5}



nav#menu:hover>button:hover,nav#menu>button.on{color:var(--ink);opacity:1}



nav#menu>button{transition:color var(--t-media) var(--curva),opacity var(--t-media) var(--curva)}







.mega .colonna:hover button{opacity:.5}



.mega .colonna button{transition:color var(--t-svelta) var(--curva),



  padding-left var(--t-media) var(--curva),opacity var(--t-media) var(--curva)}



.mega .colonna:hover button:hover{opacity:1}



.mega-marche:hover button{opacity:.5}



.mega-marche button:hover{opacity:1}







footer .cols>div:hover a,footer .cols>div:hover span{opacity:.5}



footer .cols a,footer .cols span{transition:opacity var(--t-media) var(--curva),



  color var(--t-media) var(--curva)}



footer .cols>div:hover a:hover,footer .cols>div:hover span:hover{opacity:1;color:var(--oro)}







/* ============ LE DUE FASCE, SPECULARI ============



   "Scelti a Fabriano" aveva il filmato stretto e alto a destra, "Componi il



   tuo gioiello" una fotografia larga e bassa: due sezioni della stessa



   famiglia con due impaginazioni diverse. Adesso hanno la stessa griglia e la



   stessa forma del riquadro, e si alternano - la prima con il media a



   sinistra, la seconda a destra. E' l'alternanza che tiene insieme una pagina



   lunga senza bisogno di righe di separazione. */



/* il filmato comincia dal bordo della pagina, non dal margine del testo: e'



   un'immagine, e le immagini di questa pagina toccano il bordo */



.ff-in{grid-template-columns:minmax(0,44fr) minmax(0,56fr);align-items:center;



  gap:clamp(30px,4vw,58px);padding:clamp(40px,5vw,66px) 30px clamp(40px,5vw,66px) 0}



.ff-testo{padding-right:clamp(0px,2vw,30px)}



.ff-film{order:-1;aspect-ratio:4/5;max-height:none;width:100%;margin:0}



.ff-testo{display:flex;flex-direction:column;align-items:flex-start}



@media(max-width:900px){.ff-in{grid-template-columns:1fr}.ff-film{order:0}}







.fascia-in{grid-template-columns:minmax(0,53fr) minmax(0,47fr)}



.fascia-foto{aspect-ratio:4/5}



@media(max-width:1100px){.fascia-in{grid-template-columns:1fr}.fascia-foto{aspect-ratio:3/2}}







/* ============ SCALA: DAL PORTATILE AL 4K ============



   Il logo e il menu crescono con lo schermo invece di restare fissi. La



   crescita e' contenuta - un quinto scarso fra un portatile e un 2K - ma



   basta a togliere la sensazione di elementi piccoli persi in una barra larga. */



:root{--h-testa:clamp(78px,5.4vw,96px)}



.marchio img{height:clamp(34px,2.9vw,44px)}



nav{gap:clamp(16px,1.9vw,34px);font-size:clamp(12.5px,0.92vw,14.5px);letter-spacing:.14em}



.hicone{gap:clamp(12px,1.1vw,20px)}



.icona{width:clamp(40px,3vw,48px);height:clamp(40px,3vw,48px)}



.icona svg{width:clamp(18px,1.35vw,21px);height:clamp(18px,1.35vw,21px)}



.cerca{width:clamp(158px,15vw,240px)}



.annuncio{font-size:clamp(10px,0.72vw,11.5px)}







/* ============ ANGOLI ============



   Netti sulle fotografie, appena smussati sui comandi: la modernita' qui



   arriva dalla fotografia e dal movimento, non dagli angoli tondi. */



:root{--r-netto:2px}



.lastra,.lastra img,.cornice,.ph,.hero-scena,.ff-film,.fascia-foto,.bt-foto,



.ed-foto,.mappa,.cat-foto{border-radius:0}







/* ============ IL SISTEMA DELLE FORME ============ */



/* le collezioni: tutte identiche fra loro, e la scheda ha la stessa altezza */



.collezione{display:flex;flex-direction:column}



.collezione .ph{aspect-ratio:3/4}



.collezione .dida{min-height:2.6em}







/* "Scelti a Fabriano": natura morta importante. L'immagine cresce di un



   quarto e il testo si stringe - la sezione racconta chi siamo, e a raccontare



   e' la fotografia. */



.ff-in{grid-template-columns:minmax(0,56fr) minmax(0,44fr);gap:clamp(30px,4.2vw,64px)}



/* La natura morta e' larga - il brief chiedeva un quarto in piu' - ma con un



   tetto in altezza: quattro quinti di una colonna larga ottocento pixel fanno



   una fascia piu' alta di uno schermo, e una sezione che non entra nello



   schermo non si legge come importante, si legge come ingombrante. */



/* Prima era un quadrato con un tetto in altezza, e il tetto vinceva: la forma



   cambiava con l'altezza della finestra - larga e bassa su un portatile,



   quadrata su un monitor alto. Una famiglia di fotografie che cambia forma a



   seconda dello schermo non e' piu' una famiglia: qui la proporzione e' fissa. */



.ff-film{aspect-ratio:5/4;max-height:none}



.ff-testo p.corpo{max-width:34ch}







/* "Componi il tuo gioiello": verticale, il gesto. Diversa apposta dalla



   natura morta di sopra: selezione e costruzione sono due cose diverse. */



.fascia-in{grid-template-columns:minmax(0,48fr) minmax(0,52fr)}



/* verticale, ma con lo stesso tetto: la differenza fra le due fasce si deve



   sentire nella forma, non nel fatto che una e' alta il doppio */



.fascia-foto{aspect-ratio:3/4;max-height:min(68vh,620px);margin-left:auto}







/* i due servizi: coppia coerente, stessa altezza e stessa linea del titolo */



.due-colonne .ph{aspect-ratio:4/3}



.due-colonne h3{min-height:1.2em}



.due-colonne p{min-height:3.4em}







/* la boutique: ampia e architettonica, non un ritratto */



.boutique{align-items:stretch}



/* Su due colonne l'immagine riempie la sua meta' in altezza. In una colonna



   sola no: "alta quanto la riga" piu' "sedici noni" davano una larghezza di



   seicentoquaranta pixel su uno schermo da trecentosessanta, e la pagina



   scorreva di lato. */



.bt-foto{aspect-ratio:16/9;height:100%;max-width:100%}



.bt-foto img{width:100%;height:100%;object-fit:cover}



@media(max-width:1100px){.bt-foto{height:auto;width:100%}}







/* ============ NEWSLETTER: SI DEVE LEGGERE ============



   Il lusso non e' il testo chiaro su fondo chiaro. Titolo scuro, secondario



   leggibile, oro solo dove serve un accento. */



.newsletter h2,.newsletter .tit-serif{color:var(--ink)}



.newsletter p{color:var(--ink2)}



.newsletter small,.newsletter .nota{color:var(--ink3)}



.newsletter .occhiello{color:var(--oro)}







/* ============ PIEDE DI PAGINA ============



   Resta scuro, che come chiusura funziona: solo un filo piu' grande e con le



   righe piu' distanti, che su un monitor grande si legge meglio. */



footer{font-size:clamp(14px,1vw,15.5px);line-height:1.75}



footer .cols b{font-size:clamp(11.5px,0.82vw,12.5px);letter-spacing:.14em}



footer a,footer span{padding:5px 0}



footer .fine{font-size:clamp(12px,0.85vw,13px)}







/* ============ MOVIMENTO ============



   Una regola sola: se si nota prima l'effetto del gioiello, e' troppo. */







/* --- l'entrata di base: tutto sale e sfuma, nessuna direzione --- */



body.animata .appare{opacity:0;transform:translateY(26px)}



body.animata .appare.visto{opacity:1;transform:none;



  transition:opacity .8s cubic-bezier(.22,.72,.24,1),



             transform .8s cubic-bezier(.22,.72,.24,1)}







/* --- le due fasce editoriali: l'immagine arriva dal suo lato --- */



body.animata .fascia-film .ff-film.appare{transform:translate(-32px,18px)}



body.animata .fascia-atelier .fascia-foto.appare{transform:translate(32px,18px)}



body.animata .fascia-film .ff-film.appare.visto,



body.animata .fascia-atelier .fascia-foto.appare.visto{transform:none}



/* il testo sale un attimo dopo l'immagine */



body.animata .ff-testo.appare.visto,



body.animata .fascia-testo.appare.visto{transition-delay:.18s}







/* --- il velo che scopre: tre punti in tutta la pagina --- */



/* Il ritaglio sta sull'immagine, non sul contenitore.







   Sul contenitore sembrava piu' pulito, ma un elemento ritagliato a zero ha



   area visibile zero, e l'osservatore che decide quando far comparire le cose



   non lo vede mai: le due fasce restavano invisibili per sempre. L'immagine



   invece puo' essere ritagliata quanto si vuole - chi guarda e' il suo



   contenitore, che resta intero. */



.svela img{clip-path:inset(0 0 100% 0);transform:scale(1.03);



  transition:clip-path .85s cubic-bezier(.3,.05,.2,1),



             transform 1.1s cubic-bezier(.22,.72,.24,1)}



.svela.scoperta img{clip-path:inset(0 0 0 0);transform:none}







/* --- gli hover: piu' raffinati delle entrate --- */



.viva:hover img,.viva:hover video{transform:scale(1.02);filter:none}



.collezione:hover .ph img{transform:scale(1.025)}



.collezione .ph img{transition:transform .75s cubic-bezier(.22,.72,.24,1)}



/* la freccia dei richiami si sposta di tre pixel, non di dieci */



.cta{position:relative;transition:color var(--t-media) var(--curva)}



.cta:hover{color:var(--oro)}







@media(prefers-reduced-motion:reduce){



  body.animata .appare,



  body.animata .fascia-film .ff-film.appare,



  body.animata .fascia-atelier .fascia-foto.appare{opacity:1;transform:none;transition:none}



  .svela img{clip-path:none;transform:none;transition:none}



}



/* sul telefono meno ampiezza: gli stessi trenta pixel su uno schermo stretto



   si notano il doppio */



@media(max-width:760px){



  body.animata .appare{transform:translateY(16px)}



  body.animata .fascia-film .ff-film.appare,



  body.animata .fascia-atelier .fascia-foto.appare{transform:translateY(16px)}



}







/* ============ IL CAROSELLO DEI REGALI ============ */



.carosello{position:relative}



.carosello .pista{display:grid;grid-auto-flow:column;



  grid-auto-columns:calc((100% - 3 * 16px) / 4.32);



  gap:36px 16px;overflow-x:auto;overscroll-behavior-x:contain;



  scroll-snap-type:x proximity;scroll-behavior:smooth;



  padding-bottom:6px;cursor:grab;



  scrollbar-width:none;-ms-overflow-style:none}



.carosello .pista::-webkit-scrollbar{display:none}



.carosello .pista>*{scroll-snap-align:start}



.carosello .pista.trascino{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none}



.carosello .pista.trascino *{pointer-events:none}



@media(max-width:1100px){.carosello .pista{grid-auto-columns:calc((100% - 2 * 14px) / 3.3)}}



@media(max-width:760px){.carosello .pista{grid-auto-columns:calc((100% - 12px) / 2.2);gap:24px 12px}}







/* le frecce: sottili, ferme sopra le fotografie, e spente quando non servono */



.carosello .freccia{position:absolute;top:calc(50% - 46px);z-index:3;



  width:46px;height:46px;display:grid;place-items:center;



  background:rgba(255,255,255,.94);border:1px solid var(--filo);



  color:var(--ink);border-radius:50%;



  box-shadow:0 10px 26px -16px rgba(30,25,16,.4);



  transition:opacity var(--t-media) var(--curva),background var(--t-media) var(--curva),



             border-color var(--t-media) var(--curva)}



.carosello .freccia:hover{border-color:var(--ink)}



.carosello .freccia.prima{left:-14px}



.carosello .freccia.dopo{right:-14px}



.carosello .freccia[disabled]{opacity:0;pointer-events:none}



@media(hover:none){.carosello .freccia{display:none}}







/* ============ ENTRARE NEL MONDO FISICO ============



   Prima della boutique serve un cambio di passo: da qui in giu' non si parla



   piu' di gioielli ma del posto dove stanno. Non una riga forte - centoventi



   pixel di respiro e un fondo appena piu' caldo bastano a farlo sentire. */



.boutique{position:relative;margin-top:clamp(60px,9vh,120px);



  background:linear-gradient(180deg,#FBFAF7,var(--crema) 45%)}



.boutique::before{content:"";position:absolute;left:50%;top:calc(-1 * clamp(30px,4.5vh,60px));



  transform:translateX(-50%);width:clamp(60px,8vw,120px);height:1px;



  background:linear-gradient(90deg,transparent,var(--filo) 30%,var(--filo) 70%,transparent)}







/* ============ I COLLEGAMENTI ============



   Tre link erano rimasti del blu di sistema - telefono, email e "chiama la



   boutique" - perche' erano gli unici <a> veri della pagina, e tutto il resto



   sono pulsanti. Su una pagina che non ha nemmeno un altro blu si notavano



   come una macchia. */



a{color:inherit;text-decoration:none}



a.cta{color:var(--ink)}



a.cta:hover{color:var(--oro)}



.dove-righe dd a{color:var(--ink)}







/* ============ NEWSLETTER: SI DEVE LEGGERE, DAVVERO ============



   Alla prima passata avevo scurito il titolo come chiede il brief - ma la



   sezione era su fondo scuro, e scuro su scuro sparisce del tutto: l'avevo



   peggiorata. La sezione passa su crema, che e' quello che il brief presuppone



   quando chiede "titolo piu' scuro", e il piede nero resta l'unica chiusura



   scura della pagina. */



.newsletter{background:var(--crema);color:var(--ink)}



.newsletter .tit-serif,.newsletter h2{color:var(--ink)}



.newsletter p,.newsletter .corpo{color:var(--ink2)}



.newsletter small,.newsletter .nota{color:var(--ink3)}



.newsletter .occhiello{color:var(--oro)}



.newsletter input{color:var(--ink);background:#fff;border:1px solid var(--filo);



  border-radius:var(--r-netto);padding:0 16px;min-height:48px}



.newsletter input::placeholder{color:var(--ink3)}



.newsletter button{background:var(--ink);color:#fff;border-radius:var(--r-netto);



  min-height:48px;padding:0 26px}



.newsletter button:hover{background:var(--oro)}



/* Il pulsante nasce "chiaro pieno" perche' la sezione era scura: spostata su



   crema restava crema su crema, un rettangolo che non si vede - e l'unico



   invito della sezione sembrava una scritta. Qui vale piu' della classe. */



.newsletter .button.chiaro-pieno{background:var(--ink);border-color:var(--ink);color:#fff}



.newsletter .button.chiaro-pieno:hover{background:var(--oro);border-color:var(--oro);color:#fff}



/* Sul telefono stretto la casella e il pulsante affiancati non ci stanno: il



   pulsante non si stringe sotto il suo testo e spingeva la pagina fuori di



   quindici pixel. Sotto i 420 si mettono uno sopra l'altro. */



@media(max-width:420px){



  .campo{flex-direction:column;gap:12px}



  .campo input,.newsletter button{width:100%}



}







/* i due richiami dei servizi si allineano al testo, non al centro della colonna:



   la regola di base sui richiami li centrava, e qui va scavalcata */



.due-colonne .cta{align-self:flex-start;margin-top:auto}







/* ============ GLI ULTIMI DUE ANGOLI TONDI ============



   Il brief chiede al massimo un paio di pixel sui comandi. Erano rimaste due



   pasticche: la casella di ricerca e il richiamo in fondo alla scheda. I



   cerchi veri - le frecce del carosello, le crocette - restano cerchi: quelli



   sono tondi perche' sono tondi, non perche' hanno gli angoli smussati. */



.cerca{border-radius:var(--r-netto)}



.bottone-linea{border-radius:var(--r-netto)}







/* Nel carosello i nomi lunghi vanno a capo e i nomi corti no: i prezzi



   finivano su tre altezze diverse nella stessa riga. Due righe di spazio



   riservate al nome e i prezzi tornano tutti sulla stessa linea. */



.prod .riga1{min-height:2.7em}



/* La scheda e' un pulsante, e un pulsante piu' alto del suo contenuto lo



   centra da solo: le schede con i pallini del colore erano piene fino in



   fondo, le altre venivano spinte giu' di nove pixel e i prezzi finivano su



   due righe diverse. Qui la scheda diventa una colonna che parte dall'alto. */



.prod{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start}







/* ============ IL CATALOGO SU MISURA ============ */



.catalogo{background:var(--crema);border-top:1px solid var(--filo)}



/* solo sopra e sotto: scrivendo `padding: X 0` si azzerava anche il margine



   laterale che il contenitore aveva gia', e il testo finiva fuori dallo schermo */



.cat-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);



  gap:clamp(30px,5vw,80px);align-items:center;



  padding-top:clamp(44px,6vh,84px);padding-bottom:clamp(44px,6vh,84px)}



@media(max-width:900px){.cat-in{grid-template-columns:1fr;gap:30px}}



.cat-testo h2{font-size:clamp(28px,3vw,42px);line-height:1.14;margin:16px 0 0}



.cat-testo p{margin:18px 0 0;max-width:40ch;font-size:15.5px;line-height:1.7;color:var(--ink2)}



/* i tre passi: numerati perche' qui l'ordine conta davvero - prima si dice



   cosa si cerca, poi arriva la selezione, poi si viene a vederla */



.cat-passi{list-style:none;margin:26px 0 0;display:flex;flex-direction:column;gap:0}



.cat-passi li{display:flex;gap:16px;padding:15px 0;border-top:1px solid var(--filo);



  font-size:14.5px;color:var(--ink2);align-items:baseline}



.cat-passi li:last-child{border-bottom:1px solid var(--filo)}



.cat-passi b{font-family:var(--serif);font-size:17px;color:var(--oro);flex:none;width:26px}



.cat-azioni{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}



.cat-foto{overflow:hidden;aspect-ratio:5/4}



.cat-foto img{width:100%;height:100%;object-fit:cover}







/* ============ DOVE SIAMO ============ */



.dove{background:#fff;border-top:1px solid var(--filo)}



.dove-in{display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);



  gap:clamp(30px,5vw,72px);align-items:center;



  padding-top:clamp(44px,6vh,84px);padding-bottom:clamp(44px,6vh,84px)}



@media(max-width:900px){.dove-in{grid-template-columns:1fr;gap:28px}}



.dove h2{font-size:clamp(28px,3vw,42px);line-height:1.14;margin:16px 0 0}



.dove-righe{margin:26px 0 0;display:grid;grid-template-columns:auto 1fr;gap:0}



.dove-righe dt{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;



  color:var(--ink3);padding:14px 22px 14px 0;border-top:1px solid var(--filo)}



.dove-righe dd{padding:14px 0;border-top:1px solid var(--filo);font-size:15px}



.dove-righe dd a{color:inherit;border-bottom:1px solid var(--filo);



  transition:border-color var(--t-svelta) var(--curva)}



.dove-righe dd a:hover{border-color:var(--oro)}



.dove-azioni{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}



/* la mappa e' disegnata, non incorporata: una pagina di gioielli non deve



   caricare mezzo servizio di terzi per mostrare dove sta un negozio */



.mappa{position:relative;background:var(--nebbia);border:1px solid var(--filo);



  aspect-ratio:4/3;overflow:hidden}



.mappa svg{width:100%;height:100%;display:block}



.mappa .segno{position:absolute;left:50%;top:48%;transform:translate(-50%,-100%);



  display:flex;flex-direction:column;align-items:center;gap:7px}



.mappa .goccia{width:15px;height:15px;border-radius:50% 50% 50% 0;background:var(--oro);



  transform:rotate(-45deg);box-shadow:0 0 0 5px rgba(168,120,26,.16)}



.mappa .etichetta{background:#fff;border:1px solid var(--filo);padding:6px 11px;



  font-size:11px;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap}







/* ============ VIENI A TROVARCI: GLI ORARI ============



   Erano tre righe di quattordici pixel buttate sotto il testo. Qui diventano



   una tabella vera: la colonna dei giorni a sinistra, quella delle ore a



   destra con le cifre della stessa larghezza - cosi' i numeri si incolonnano



   invece di ballare - e il giorno di oggi segnato in oro. Sopra, se la



   boutique e' aperta adesso, si legge che e' aperta: e' l'informazione che



   uno cerca davvero quando guarda gli orari.



   Il testo si sposta verso la fotografia: il margine a sinistra e' meno di



   meta' di quello a destra. */



.boutique .testo{padding:clamp(40px,5.2vh,72px) clamp(38px,5vw,86px)



                         clamp(40px,5.2vh,72px) clamp(26px,3.2vw,46px)}



.orari-blocco{margin-top:4px;max-width:440px;width:100%}



.orari-testa{display:flex;align-items:baseline;justify-content:space-between;



  gap:14px;padding-bottom:11px;border-bottom:1px solid var(--ink)}



.orari-eti{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}



.stato{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--ink2);white-space:nowrap}



.stato::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink3);flex:none}



.stato.aperta{color:var(--ink)}



.stato.aperta::before{background:var(--oro)}



.orari{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.45}



.orari th{text-align:left;font-weight:400;color:var(--ink);padding:14px 0;white-space:nowrap}



.orari td{text-align:right;color:var(--ink2);padding:14px 0;



  font-variant-numeric:tabular-nums;white-space:nowrap}



.orari tr + tr th,.orari tr + tr td{border-top:1px solid var(--filo)}



/* il puntino separatore si scrive con il carattere vero: una sequenza di

   fuga esadecimale dentro una stringa di Python diventa un byte zero, la

   virgoletta resta aperta e il browser si mangia in silenzio tutto il

   foglio di stile che viene dopo */

.orari .fascia + .fascia::before{content:"·";margin:0 9px;color:var(--ink3)}



.orari .chiuso{color:var(--ink3)}



/* oggi: un filo d'oro a sinistra e un fondo appena accennato */



.orari tr.oggi th,.orari tr.oggi td{background:rgba(183,152,99,.075)}



.orari tr.oggi th{box-shadow:inset 3px 0 0 var(--oro);padding-left:13px}



.orari tr.oggi td{padding-right:13px}



@media(max-width:520px){



  .orari{font-size:14.5px}



  .orari th,.orari td{padding:12px 0}



  .orari .fascia{display:block}



  .orari .fascia + .fascia::before{content:none}



}







/* ============ LA SCALA DEI TESTI ============



   Tutto il sito era tarato piu' piccolo di quanto serve a leggere comodi:



   quindici pixel di corpo, tredici sulle didascalie, undici e mezzo sui



   pulsanti. Qui la scala sale di circa un decimo sui testi che si leggono



   davvero e di un pixel abbondante sulle etichette maiuscole, che sono le



   piu' faticose. Non cambia nessuna proporzione: sale la scala intera. */



body{font-size:16.5px;line-height:1.58}



p.corpo,.sezione p.corpo,.ff-testo p.corpo,.fascia-testo p.corpo{font-size:17px;line-height:1.68}



.boutique p,.dove p,.cat-testo p{font-size:16.5px;line-height:1.62}



nav{font-size:clamp(13.5px,1vw,15.5px)}



.annuncio{font-size:clamp(11px,0.78vw,12.5px)}



.occhiello{font-size:11.5px;letter-spacing:.2em}



.button,.cta,.bottone-linea{font-size:12.5px;letter-spacing:.15em}



.prod .nome{font-size:16px;line-height:1.36}



.prod .prezzo{font-size:17px}



.prod .mat{font-size:14px}



.collezione .dida{font-size:14.5px}



.collezione .tit-serif,.collezione h3{font-size:20px}



.barra-collezione{font-size:12.5px}



.filtri .pillola{font-size:13px}



footer{font-size:clamp(15px,1.05vw,16.5px)}



footer .cols b{font-size:12px;letter-spacing:.15em}



footer .fine{font-size:13px}



.newsletter small,.newsletter .nota{font-size:12.5px}



.usp b{font-size:12px;letter-spacing:.15em}



.usp small{font-size:14px}



.scheda-tec,.dettagli dt,.dettagli dd{font-size:15px}







/* ============ LE FASCE DELLA HOME: UNA REGOLA SOLA ============

   Le tre fasce a due colonne - "Scelti a Fabriano", "Componi il tuo gioiello",

   "Vieni a trovarci" - erano cresciute ognuna per conto suo: una fotografia

   larga e bassa, una verticale piccola appiccicata a destra, e i testi spinti

   contro il bordo dello schermo con un vuoto in mezzo alla pagina.



   Qui valgono le stesse tre regole per tutte:



     1. la fotografia prende meta' schermo esatta ed e' quadrata e grande;

     2. il testo sta al centro della sua meta', con la stessa aria dal bordo

        dello schermo e dalla fotografia - mai schiacciato contro nessuno dei

        due;

     3. il corpo dei testi cresce con lo spazio che ha, invece di restare

        fisso mentre la colonna si allarga.



   La fascia si ferma a 1680: oltre, meta' schermo su un monitor grande farebbe

   una fotografia quadrata alta piu' di mille pixel, che non e' generosa, e'

   ingombrante. */

.ff-in,.fascia-in,.boutique{max-width:1680px;margin-left:auto;margin-right:auto;

  padding-left:0;padding-right:0;

  display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch}

.ff-film,.fascia-foto{aspect-ratio:1;width:100%;height:auto;max-height:none;margin:0}

.ff-film img,.ff-film video,.fascia-foto img{width:100%;height:100%;object-fit:cover;display:block}

.ff-film{order:-1}                      /* "Scelti": fotografia a sinistra */



/* Il testo: aria uguale sui due lati. Non basta mettere lo stesso margine a

   destra e a sinistra: il blocco resta appoggiato a sinistra e tutto il vuoto

   si raccoglie verso la fotografia. La colonna si stringe su quanto e' largo

   il testo e poi si centra, cosi' l'aria e' davvero divisa a meta'. Le righe

   restano allineate a sinistra: e' il blocco a stare al centro, non il testo. */

/* La colonna e' larga uguale in tutte e tre le fasce - non quanto il testo

   che c'e' dentro - se no una sezione con due righe in meno avrebbe l'aria

   diversa dalle altre, e da fuori sembrerebbe un errore di impaginazione. */

.ff-testo,.fascia-testo,.boutique .testo{

  display:grid;grid-template-columns:minmax(0,27rem);

  align-content:center;justify-content:center;justify-items:start;

  gap:16px;padding:clamp(38px,5vh,76px) clamp(26px,4.4vw,72px)}

.orari-blocco{width:100%}

/* la larghezza della riga la decide la colonna, non il singolo paragrafo:

   se no il testo finisce prima del bordo e l'aria non e' piu' uguale */

.ff-testo p.corpo,.fascia-testo p,.boutique p{max-width:none}

.ff-testo .occhiello,.fascia-testo .occhiello,.boutique .occhiello{margin-bottom:2px}



/* il corpo cresce con la colonna */

.ff-testo .tit-serif,.fascia-testo .tit-serif,.boutique .tit-serif{

  font-size:clamp(30px,2.85vw,46px);line-height:1.14}

.ff-testo p.corpo,.fascia-testo p,.boutique p{font-size:clamp(16px,1.2vw,18.5px);line-height:1.66}



/* la boutique tiene la sua fotografia larga: e' un interno, non un ritratto */

.bt-foto{aspect-ratio:auto;height:100%;min-height:420px}

.orari-blocco{max-width:100%}



/* L'immagine entra scivolando di lato, e adesso che riempie tutta la sua

   colonna quello scivolamento usciva dallo schermo: la fascia se lo tiene

   dentro. Si usa `clip` e non `hidden` perche' `hidden` creerebbe un

   contenitore che scorre, e le sezioni appiccicate in alto smetterebbero di

   funzionare. */

.fascia-film,.fascia-atelier{overflow-x:clip}



@media(max-width:900px){

  .ff-in,.fascia-in,.boutique{grid-template-columns:1fr}

  .ff-film,.fascia-foto{order:-1;aspect-ratio:4/3}

  .bt-foto{min-height:0;aspect-ratio:4/3}

  .ff-testo,.fascia-testo,.boutique .testo{padding:clamp(30px,6vw,52px) clamp(20px,5vw,40px)}

}



/* ============ L'APERTURA: TESTI PIU' GRANDI E MEGLIO DISTRIBUITI ============

   Il titolo era grande e il paragrafo largo un terzo della colonna: tre righe

   corte sotto due righe enormi, con un buco a destra. Adesso il paragrafo

   riempie la colonna come il titolo, i corpi crescono con la larghezza dello

   schermo invece di restare fissi, e lo spazio fra un blocco e l'altro cresce

   insieme a loro. */

.hero-testo{max-width:min(34rem,100%);width:100%}

.hero-testo .occhiello{font-size:clamp(11px,0.85vw,13.5px);letter-spacing:.22em;

  margin-bottom:clamp(14px,1.4vw,22px)}

.tit-hero{font-size:clamp(38px,4.4vw,68px);line-height:1.04;letter-spacing:-.01em;

  text-wrap:balance}

.hero-sot{max-width:none;font-size:clamp(16px,1.25vw,20px);line-height:1.6;

  margin:clamp(16px,1.5vw,26px) 0 clamp(24px,2.4vw,40px)}

.hero-azioni{gap:clamp(18px,1.8vw,32px);row-gap:clamp(12px,1.2vw,18px)}

.hero-azioni .button{font-size:clamp(12px,0.9vw,14px);

  padding:0 clamp(22px,1.9vw,34px);min-height:clamp(46px,3.4vw,56px)}

.hero-azioni .cta{font-size:clamp(12px,0.9vw,14px)}



/* ============ LA SCHEDA PRODOTTO: LA COLONNA STA AL CENTRO ============

   Su un monitor largo la colonna dei dati restava incollata al bordo della

   fotografia con trecento pixel di vuoto a destra. Come nelle fasce della

   home: il blocco si tiene una larghezza sua e si mette al centro della

   colonna, con la stessa aria dai due lati. Non si usa la griglia per non

   perdere i margini fra un blocco e l'altro: ogni pezzo prende la stessa

   larghezza e si centra, e le righe restano allineate a sinistra. */

.pdp-dati{padding-left:clamp(24px,2.2vw,52px);padding-right:clamp(24px,2.2vw,52px)}

.pdp-dati > *{max-width:32rem;margin-left:auto;margin-right:auto}



/* ============ LA LINETTA DEL MENU VA SOPRA ============

   Nell'esempio che mi hai dato la riga compare sopra la voce, non sotto: e' un

   dettaglio piccolo ma e' proprio quello che distingue il menu di un negozio

   di gioielli da un menu qualunque. La riga parte dal centro e si apre verso

   i due lati, e le altre voci si spengono leggermente. */

nav button::after{top:0;bottom:auto}

nav button{padding-top:11px;padding-bottom:9px}

nav:hover button:not(:hover){opacity:.5}

nav button{transition:color var(--t-media) var(--curva),opacity var(--t-media) var(--curva)}





/* ============ I PULSANTI IN COPPIA ============

   Due domande giuste, e tutte e due erano errori, non scelte.



   La prima: il pulsante pieno e il richiamo accanto. Quando ci stanno su una

   riga sola nessuno nota niente. Quando vanno a capo, la scritta del pulsante

   parte trentatre pixel piu' a destra di quella del richiamo, perche' una sta

   dentro una scatola con il suo margine e l'altra no: le due scritte non sono

   piu' incolonnate e si vede. Alla fascia dell'Atelier mancavano quattro

   pixel per starci: il margine fra i due si stringe e tornano in riga.



   La seconda: due pulsanti uno sotto l'altro di larghezza diversa. Nella

   boutique non ci stanno in una riga (295 + 251 in una colonna da 432), e

   restano incolonnati. Due pulsanti incolonnati di larghezza diversa sembrano

   un errore; della stessa larghezza sembrano una scelta. Prendono la stessa. */

.fascia-azioni,.hero-azioni{display:flex;align-items:center;flex-wrap:wrap;

  gap:clamp(12px,1.2vw,20px)}

.fascia-azioni .cta,.hero-azioni .cta{white-space:nowrap}



.boutique .azioni{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;width:100%}

.boutique .azioni .button{width:100%}



/* Sullo schermo stretto si impila tutto, e allora tutti alla stessa

   larghezza: e' l'unico modo perche' una colonna di pulsanti non sembri

   sbilenca. Il richiamo di testo resta a sinistra, che riempirlo per tutta la

   riga lo farebbe sembrare un pulsante anche lui. */

@media(max-width:520px){

  .fascia-azioni,.hero-azioni{flex-direction:column;align-items:stretch}

  .fascia-azioni .button,.hero-azioni .button{width:100%;justify-content:center}

  .fascia-azioni .cta,.hero-azioni .cta{align-self:flex-start}

}



/* ============ LA SCHEDA DEL PEZZO: UN COMPUTO ============

   Prima erano tre riquadri larghi in cima, un elenco a sinistra con le voci

   lontanissime dai valori e il testo libero a destra: tre impaginazioni

   diverse nella stessa sezione, e nessuna che si leggesse come una scheda.



   Adesso e' una cosa sola: una tabella, bianca e nera, con i filetti sottili

   come su un preventivo. La riga in alto e quella in basso sono piu' marcate

   e chiudono il documento; in mezzo i filetti sono appena accennati. Le voci

   a sinistra in maiuscoletto, i valori a destra nella stessa colonna, e le

   cifre della stessa larghezza cosi' i codici e i carati si incolonnano.

   Il racconto sta accanto, piu' chiaro: e' una nota, non un dato. */

.scheda-pezzo{border-top:1px solid var(--filo);background:#fff}

.sp-testa{display:flex;align-items:baseline;gap:18px;margin-bottom:clamp(24px,3vh,40px)}

.sp-griglia{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);

  gap:clamp(34px,4.4vw,76px);align-items:start}



.sp-tab{width:100%;border-collapse:collapse;

  border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}

.sp-tab th,.sp-tab td{padding:15px 0;vertical-align:top;text-align:left;

  border-bottom:1px solid #EAE8E3}

.sp-tab tr:last-child th,.sp-tab tr:last-child td{border-bottom:0}

.sp-tab th{width:38%;padding-right:20px;font-weight:400;

  font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink3);

  line-height:1.5;white-space:nowrap}

.sp-tab td{font-size:15.5px;line-height:1.5;color:var(--ink);

  font-variant-numeric:tabular-nums}

.sp-tab td small{display:block;margin-top:5px;font-size:13px;color:var(--ink3);

  font-variant-numeric:normal}

@media(max-width:820px){

  .sp-griglia{grid-template-columns:1fr;gap:30px}

  .sp-tab th{width:42%;white-space:normal}

}



/* la nota accanto: stesso filo in cima, cosi' le due colonne partono insieme */

.sp-lato{padding-top:15px;border-top:1px solid var(--filo)}

.sp-lato p{font-size:15.5px;line-height:1.72;color:var(--ink2)}

.sp-lato p+p{margin-top:14px}

.sp-lato .sp-desc{color:var(--ink);font-family:var(--serif);font-size:18px;line-height:1.5}

.sp-lato .sp-nota{font-size:13.5px;color:var(--ink3);line-height:1.65;

  padding-top:14px;border-top:1px solid #EAE8E3;margin-top:20px}



/* ============ LA COLONNA DELLA SCHEDA PRODOTTO ============

   Era confusa per tre motivi precisi, non per gusto:



     1. due navigazioni una sopra l'altra che dicevano la stessa cosa;

     2. gli stessi dati scritti tre volte - nel sottotitolo, nella

        fisarmonica e poi ancora nella scheda in fondo alla pagina;

     3. tutto con lo stesso peso e la stessa distanza, quindi l'occhio non

        trovava un punto da cui partire.



   Qui i blocchi sono quattro e si distinguono a colpo d'occhio: chi e' il

   pezzo, quanto costa, cosa puoi fare, cosa devi sapere. Fra un blocco e

   l'altro lo spazio e' il doppio di quello che c'e' dentro un blocco: e'

   quello che fa leggere una colonna come una colonna e non come un elenco.

   La colonna e' anche piu' larga - trentotto quadratini invece di

   trentadue - perche' con il bianco ai lati troppo largo sembrava stretta. */

.pdp-dati > *{max-width:38rem}

.pdp-in{display:flex;flex-direction:column;gap:clamp(26px,2.6vw,38px)}

.pdp-in > *{margin:0}



.pdp-briciole{display:flex;align-items:center;gap:8px;

  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}

.pdp-briciole .briciola{color:var(--ink3);transition:color var(--t-media) var(--curva)}

.pdp-briciole .briciola:hover{color:var(--ink)}



.pdp-testa{display:flex;flex-direction:column;gap:10px}

.pdp-testa .marca{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--oro)}

.pdp-testa h1{font-family:var(--serif);font-weight:400;line-height:1.12;

  font-size:clamp(26px,2.3vw,38px);letter-spacing:-.005em}

.pdp-testa .sommario{font-size:15px;line-height:1.55;color:var(--ink2)}



.pdp-prezzo{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;

  padding-bottom:clamp(22px,2.2vw,32px);border-bottom:1px solid var(--filo)}

.pdp-prezzo .cifra{font-family:var(--serif);font-size:clamp(26px,2.2vw,34px);color:var(--ink);

  font-variant-numeric:tabular-nums;letter-spacing:.005em}

/* il prezzo pieno barrato e il bollino dello sconto: cambiando il nome del

   blocco da .prezzo a .pdp-prezzo avevano perso il loro aspetto e il bollino

   era tornato una scrittina in corsivo */

.pdp-prezzo s{font-size:16px;color:var(--ink3);text-decoration-thickness:1px;

  font-variant-numeric:tabular-nums}

.pdp-prezzo em{font-style:normal;font-size:11px;letter-spacing:.09em;color:var(--vino);

  background:none;border:1px solid currentColor;border-radius:var(--r-netto);padding:3px 7px}



.pdp-azioni{display:flex;flex-direction:column;gap:10px}



/* la riga di servizio: una sola, quieta, e il pallino d'oro la lega agli

   orari della boutique in home - stesso segno, stesso significato */

.pdp-nota-servizio{display:flex;align-items:center;gap:10px;

  font-size:14.5px;color:var(--ink);margin-top:-4px}

.pdp-nota-servizio .pallino{width:7px;height:7px;border-radius:50%;

  background:var(--oro);flex:none}

.pdp-servizi{font-size:13.5px;line-height:1.6;color:var(--ink3);margin-top:-16px}

.pdp-prosa{font-size:15.5px;line-height:1.7;color:var(--ink2)}



.fisarmonica{border-top:1px solid var(--filo)}



/* ============ LA MAPPA DELLA BOUTIQUE ============

   Era un disegno: bello ma inutile, perche' non diceva in che via si trova il

   negozio e non si poteva ne' spostare ne' ingrandire. Adesso e' una mappa

   vera. Il filtro le toglie un po' di colore e la avvicina alla pagina, che

   una mappa a colori pieni accanto a fotografie di gioielli grida troppo;

   passandoci sopra torna a colori pieni, perche' quando la stai usando i

   colori servono. */

.mappa{position:relative;overflow:hidden;background:var(--nebbia);

  border:1px solid var(--filo)}

.mappa iframe{display:block;width:100%;height:100%;min-height:360px;border:0;

  filter:saturate(.62) contrast(.96);transition:filter var(--t-media) var(--curva)}

.mappa:hover iframe,.mappa:focus-within iframe{filter:none}

.mappa-vai{position:absolute;right:12px;bottom:12px;z-index:2;

  background:rgba(255,255,255,.94);border:1px solid var(--filo);

  color:var(--ink);padding:8px 13px;border-radius:var(--r-netto);

  font-size:11px;letter-spacing:.13em;text-transform:uppercase;

  box-shadow:0 8px 22px -14px rgba(30,25,16,.45)}

.mappa-vai:hover{border-color:var(--ink)}



/* ============ LA TESTATA: IL MARCHIO AL BORDO ============

   Su un monitor grande la barra era un'isola al centro dello schermo: il

   marchio galleggiava a meta' strada e la testata sembrava piu' stretta della

   pagina. Adesso la barra e' larga quanto lo schermo, il marchio sta appoggiato

   al bordo sinistro e gli strumenti a quello destro, con lo stesso margine dei

   due lati. E' quello che fa sembrare una testata una testata. */

header .wrap.hrow{max-width:none;

  padding-left:clamp(20px,2.4vw,44px);padding-right:clamp(20px,2.4vw,44px)}

header .marchio{margin-right:clamp(20px,2.6vw,48px)}

header .hicone{margin-left:auto}

@media(max-width:900px){header .wrap.hrow{padding-left:16px;padding-right:16px}}



/* ============ IL SEGNO DELLA CATEGORIA ============

   Il sito vecchio metteva un disegnino accanto a ogni categoria: era la cosa

   migliore che aveva, perche' si capisce dove sei senza leggere. Ripreso, ma

   disegnato a filo sottile come le altre icone, e senza colore: prende l'oro

   solo sulla categoria aperta. */

.mega-testa{grid-column:1/-1;display:flex;align-items:center;gap:12px;

  padding-bottom:16px;margin-bottom:6px;border-bottom:1px solid var(--filo)}

.mega-testa .segno-cat{width:22px;height:22px;color:var(--oro);flex:none}

.mega-nome{font-family:var(--serif);font-size:20px;color:var(--ink)}

.mega-tutti{margin-left:auto;font-size:11px;letter-spacing:.15em;text-transform:uppercase;

  color:var(--ink3);border-bottom:1px solid var(--filo);padding-bottom:3px;

  transition:color var(--t-media) var(--curva),border-color var(--t-media) var(--curva)}

.mega-tutti:hover{color:var(--ink);border-color:var(--ink)}



/* ============ CURA E SPEDIZIONE: PANNELLI, NON MURI DI TESTO ============

   Erano due paragrafi dentro una fisarmonica: si aprivano e comparivano

   quattro righe di prosa che nessuno legge. Adesso sono tre voci per pannello,

   ognuna con il suo segno e il suo titolo, su fondo crema con un filo d'oro a

   sinistra. La stessa informazione, ma si prende in tre secondi. */

.fisarmonica .pannello-info{list-style:none;margin:0;padding:clamp(16px,1.6vw,22px) clamp(16px,1.6vw,24px);

  background:var(--crema);border-left:2px solid var(--oro);

  display:flex;flex-direction:column;gap:14px}

.fisarmonica .pannello-info li{display:flex;gap:14px;align-items:flex-start}

.fisarmonica .pannello-info li+li{padding-top:14px;border-top:1px solid rgba(30,25,19,.07)}

.fisarmonica .pannello-info .ic{flex:none;width:26px;height:26px;color:var(--oro);

  display:grid;place-items:center}

.fisarmonica .pannello-info .ic svg{width:22px;height:22px}

.fisarmonica .pannello-info .voce{display:block;font-size:14.5px;line-height:1.55;color:var(--ink2)}

.fisarmonica .pannello-info .voce b{display:block;font-weight:400;color:var(--ink);

  font-size:12px;letter-spacing:.13em;text-transform:uppercase;margin-bottom:4px}



/* ============ TESTATA STRETTA ============



   Con la voce "Brand" il menu ha dieci voci, e sotto i 1400 pixel il campo di



   ricerca non ci sta piu' insieme a tutto il resto: la fila delle icone usciva



   di nove pixel dallo schermo. Il campo si stringe per gradi e sotto i 1200



   torna a essere solo la lente - la ricerca si apre premendola. */



@media(max-width:1400px){



  .cerca{width:158px}



  nav#menu{gap:20px}



}



@media(max-width:1200px){



  .cerca{width:40px;padding:8px;justify-content:center}



  .cerca input{display:none}



  nav#menu{gap:16px;font-size:14px}



}







/* ============ TELEFONO STRETTO ============



   Sotto i 560 pixel non c'e' spazio per tutto in una riga sola. Due cose



   sbordavano: la ricerca, che resta larga 200 anche quando il campo dentro e'



   nascosto, e la barra della collezione con il menu dell'ordinamento.



   Qui la ricerca torna a essere un'icona e la barra va a capo. */



@media(max-width:560px){



  .cerca{width:40px;padding:8px;justify-content:center;flex:none}



  .hicone{gap:4px;min-width:0}



  .barra-collezione{flex-wrap:wrap;gap:10px 16px}



  .barra-collezione .sx,.barra-collezione .dx{margin-left:0;min-width:0}



  .barra-collezione .dx{width:100%;justify-content:space-between}



  .ordina{max-width:100%;flex:1;min-width:0}



}





/* ============ IL CARRELLO E LA CASSA ============
   Solo grafica: i bottoni ci sono e si accendono, la banca la collega Andrei.
   Tutto e' costruito con i pezzi del sito - stesso oro, stesso Garamond,
   stessi fili - perche' la cassa e' il punto in cui la gente ha piu' paura, e
   una cassa che sembra di un altro sito e' il modo piu' veloce per farla
   scappare. */

/* --- il cassetto laterale --- */
.cr-velo{position:fixed;inset:0;background:rgba(18,15,11,.42);opacity:0;
  visibility:hidden;transition:opacity .4s var(--curva),visibility .4s;z-index:90;
  backdrop-filter:blur(2px)}
.cr-velo.aperto{opacity:1;visibility:visible}
.cr{position:fixed;top:0;right:0;bottom:0;width:min(30rem,100vw);
  background:var(--bianco);z-index:95;display:flex;flex-direction:column;
  transform:translateX(101%);transition:transform .48s var(--curva);
  box-shadow:-1px 0 0 var(--filo)}
.cr.aperto{transform:none}
.cr__capo{display:flex;align-items:center;justify-content:space-between;
  padding:clamp(20px,3vh,28px) clamp(20px,3vw,30px);
  border-bottom:1px solid var(--filo)}
.cr__capo h2{font-family:var(--serif);font-size:24px}
.cr__capo small{display:block;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink3);margin-top:5px}
.cr__chiudi{width:40px;height:40px;display:grid;place-items:center;
  border:1px solid var(--filo);transition:background .3s,border-color .3s}
.cr__chiudi:hover{background:var(--crema);border-color:var(--ink3)}
.cr__chiudi svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.6;fill:none}

.cr__pista{flex:1;overflow-y:auto;padding:0 clamp(20px,3vw,30px)}
.cr-riga{display:grid;grid-template-columns:84px minmax(0,1fr);gap:16px;
  padding:22px 0;border-bottom:1px solid var(--filo)}
.cr-riga__ph{aspect-ratio:1;background:var(--crema);overflow:hidden}
.cr-riga__ph img{width:100%;height:100%;object-fit:cover;display:block}
.cr-riga b{font-weight:400;font-size:15px;line-height:1.3;display:block}
.cr-riga .cat{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink3);margin-bottom:6px}
.cr-riga .prezzo{font-variant-numeric:lining-nums tabular-nums;margin-top:8px;
  font-size:15px}
.cr-riga__giu{display:flex;align-items:center;justify-content:space-between;
  margin-top:12px;gap:12px}

/* il contatore: due bottoni e un numero, senza scatole tonde */
.cr-conta{display:inline-flex;align-items:center;border:1px solid var(--filo)}
.cr-conta button{width:34px;height:34px;display:grid;place-items:center;
  font-size:16px;color:var(--ink2);transition:background .25s,color .25s}
.cr-conta button:hover{background:var(--crema);color:var(--ink)}
.cr-conta span{min-width:34px;text-align:center;font-size:14px;
  font-variant-numeric:lining-nums tabular-nums}
.cr-togli{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink3);text-decoration:underline;text-underline-offset:3px;
  transition:color .25s}
.cr-togli:hover{color:var(--vino)}

/* le due domande che fanno tornare indietro i pacchi */
.cr-chiede{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.cr-chiede button{font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--filo);padding:7px 12px;color:var(--ink2);
  transition:border-color .25s,color .25s,background .25s}
.cr-chiede button:hover{border-color:var(--oro);color:var(--ink)}
.cr-chiede button.messo{border-color:var(--oro);background:var(--crema);
  color:var(--ink)}
.cr-chiede button.messo::before{content:"✓  ";color:var(--oro)}

.cr__piede{border-top:1px solid var(--filo);padding:clamp(18px,2.6vh,26px)
  clamp(20px,3vw,30px) clamp(22px,3vh,30px);background:var(--crema)}
.cr-conto{display:flex;justify-content:space-between;font-size:14px;
  color:var(--ink2);margin-bottom:9px;font-variant-numeric:lining-nums tabular-nums}
.cr-conto.totale{font-size:19px;color:var(--ink);margin:14px 0 4px;
  padding-top:14px;border-top:1px solid var(--filo)}
.cr-conto.totale b{font-family:var(--serif);font-weight:400;font-size:24px}
.cr__nota{font-size:11.5px;color:var(--ink3);margin-top:10px;line-height:1.5}
.cr__piede .button{width:100%;margin-top:16px}
.cr-vuoto{padding:60px 0;text-align:center;color:var(--ink3)}
.cr-vuoto p{margin:14px 0 22px}

/* la pallina sul carrello della testata */
.cr-pallina{position:absolute;top:-6px;right:-8px;min-width:18px;height:18px;
  padding:0 5px;border-radius:9px;background:var(--oro);color:#fff;
  font-size:10.5px;display:grid;place-items:center;
  font-variant-numeric:lining-nums}

/* --- la cassa --- */
.cassa{padding:clamp(34px,6vh,60px) 0 clamp(56px,9vh,100px)}
.cassa .wrap{display:grid;grid-template-columns:minmax(0,1fr)
  clamp(300px,27vw,382px);gap:clamp(32px,5vw,72px);align-items:start}

/* i tre passi */
.passi{display:flex;gap:0;margin-bottom:clamp(30px,5vh,50px);
  border-bottom:1px solid var(--filo)}
.passo{flex:1;padding:0 0 16px;position:relative;text-align:left}
.passo small{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink3);display:block;margin-bottom:6px;
  font-variant-numeric:lining-nums}
.passo b{font-family:var(--serif);font-weight:400;font-size:19px;color:var(--ink3)}
.passo::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--oro);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--curva)}
.passo.qui b,.passo.fatto b{color:var(--ink)}
.passo.qui small,.passo.fatto small{color:var(--oro)}
.passo.qui::after,.passo.fatto::after{transform:scaleX(1)}
.passo.fatto small::after{content:"  ✓"}

/* le scelte: righe grandi da toccare, non pallini */
.scelte{display:grid;gap:1px;background:var(--filo);border:1px solid var(--filo);
  margin-bottom:clamp(26px,4vh,40px)}
.scelta{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:15px;
  align-items:start;padding:19px 20px;background:var(--bianco);text-align:left;
  transition:background .28s var(--curva)}
.scelta:hover{background:var(--crema)}
.scelta.presa{background:var(--crema)}
.scelta__segno{width:18px;height:18px;border:1px solid var(--ink3);
  border-radius:50%;margin-top:2px;position:relative;transition:border-color .28s}
.scelta.presa .scelta__segno{border-color:var(--oro)}
.scelta.presa .scelta__segno::after{content:"";position:absolute;inset:3px;
  border-radius:50%;background:var(--oro)}
.scelta b{font-weight:400;font-size:15.5px;display:block}
.scelta small{display:block;font-size:13px;color:var(--ink3);margin-top:5px;
  line-height:1.5}
.scelta .costo{font-size:14px;color:var(--ink2);white-space:nowrap;
  font-variant-numeric:lining-nums tabular-nums}
.scelta .costo.gratis{color:var(--oro)}

/* le caselle da riempire */
.campi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,2vw,20px);margin-bottom:clamp(26px,4vh,40px)}
.campo{display:flex;flex-direction:column;gap:7px}
.campo.lungo{grid-column:1/-1}
.campo label{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink3)}
.campo input,.campo select,.campo textarea{border:1px solid var(--filo);
  padding:13px 15px;font:inherit;font-size:15px;background:var(--bianco);
  color:var(--ink);transition:border-color .28s}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;
  border-color:var(--oro)}
.campo input::placeholder{color:var(--ink3)}

/* il riepilogo appiccicato */
.somma{position:sticky;top:calc(var(--h-testa) + 20px);border:1px solid var(--filo);
  background:var(--crema)}
.somma__capo{padding:20px 22px 16px;border-bottom:1px solid var(--filo)}
.somma__capo h3{font-family:var(--serif);font-size:21px}
.somma__pezzi{padding:6px 22px;max-height:min(38vh,330px);overflow-y:auto}
.somma-riga{display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:13px;
  align-items:center;padding:13px 0;border-bottom:1px solid var(--filo);
  font-size:13.5px}
.somma-riga:last-child{border-bottom:0}
.somma-riga img{width:54px;height:54px;object-fit:cover;background:var(--bianco)}
.somma-riga .q{color:var(--ink3);font-size:12px}
.somma-riga .p{font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.somma__conti{padding:16px 22px 22px}

/* le carte accettate: disegnate, non fotografate */
.carte{display:flex;gap:7px;align-items:center;margin-top:14px}
.carta{width:38px;height:25px;border:1px solid var(--filo);border-radius:3px;
  background:var(--bianco);display:grid;place-items:center;font-size:8px;
  letter-spacing:.06em;color:var(--ink3);font-weight:600}
.lucchetto{display:flex;align-items:center;gap:8px;margin-top:14px;
  font-size:11.5px;color:var(--ink3)}
.lucchetto svg{width:13px;height:13px;stroke:var(--oro);fill:none;stroke-width:1.6}

/* la conferma */
.fatto{text-align:center;padding:clamp(60px,12vh,130px) 0}
.fatto__cerchio{width:74px;height:74px;border:1px solid var(--oro);
  border-radius:50%;display:grid;place-items:center;margin:0 auto 30px}
.fatto__cerchio svg{width:30px;height:30px;stroke:var(--oro);fill:none;
  stroke-width:1.3}
.fatto h1{font-family:var(--serif);
  font-size:calc(clamp(30px,3.6vw,50px) * var(--scala-titoli,1));line-height:1.1}
.fatto p{max-width:38rem;margin:20px auto 0;color:var(--ink2);line-height:1.7}
.fatto__num{display:inline-block;margin-top:26px;padding:11px 22px;
  border:1px solid var(--filo);background:var(--crema);font-size:14px;
  letter-spacing:.12em;font-variant-numeric:lining-nums tabular-nums}

@media(max-width:900px){
  .cassa .wrap{grid-template-columns:minmax(0,1fr)}
  .somma{position:static;order:-1}
  .campi{grid-template-columns:minmax(0,1fr)}
  .passo b{font-size:15px}
  .cr{width:100vw}
}


/* ============ LA CASSA VELOCE ============
   Una schermata sola. Ogni pezzo si apre quando quello prima e' a posto, cosi'
   chi guarda vede sempre quanto manca senza doverlo indovinare. */
.cv{padding:clamp(26px,4.5vh,48px) 0 clamp(56px,9vh,100px)}
.cv .wrap{display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,26vw,372px);
  gap:clamp(30px,4.6vw,68px);align-items:start}

/* la barra di quanto manca */
.cv-quanto{display:flex;align-items:center;gap:14px;margin-bottom:clamp(24px,4vh,38px)}
.cv-quanto__filo{flex:1;height:2px;background:var(--filo);position:relative}
.cv-quanto__filo i{position:absolute;inset:0 auto 0 0;background:var(--oro);
  width:var(--fatto,0%);transition:width .5s var(--curva)}
.cv-quanto b{font-weight:400;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink3);white-space:nowrap}

/* i blocchi: quello aperto e' vivo, quelli chiusi aspettano */
.blocco{border-top:1px solid var(--filo);padding:clamp(24px,3.6vh,34px) 0}
.blocco:first-of-type{border-top:0;padding-top:0}
.blocco.dorme{opacity:.34;pointer-events:none}
/* Il numero del passo era un `<small>` allineato alla base del titolo: usciva
   minuscolo e piu' in basso, e sembrava un refuso invece che un numero.
   Adesso e' un cerchietto d'oro della stessa altezza della riga. */
.blocco__capo{display:flex;align-items:center;gap:15px;
  margin-bottom:clamp(16px,2.4vh,24px)}
.blocco__capo b{font-family:var(--serif);font-weight:400;
  font-size:calc(clamp(20px,2vw,27px) * var(--scala-titoli,1));line-height:1.1}
.blocco__capo small{flex:0 0 auto;width:27px;height:27px;border-radius:50%;
  border:1px solid var(--oro);color:var(--oro);display:grid;place-items:center;
  font-size:12.5px;font-variant-numeric:lining-nums;letter-spacing:0}
.blocco:not(.dorme) .blocco__capo small{background:var(--oro);color:#fff}
.blocco__capo .ok{margin-left:auto;font-size:12px;color:var(--ink3)}
.blocco__capo .ok b{font-family:var(--sans);font-size:13px;color:var(--ink2)}

/* i pagamenti veloci, in cima: chi li usa non riempie niente */
.veloci{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px;margin-bottom:20px}
.veloce{min-height:52px;display:flex;align-items:center;justify-content:center;
  gap:9px;border:1px solid var(--ink);background:var(--ink);color:#fff;
  font-size:13.5px;transition:opacity .25s}
.veloce:hover{opacity:.86}
.veloce.chiaro{background:#FFC439;border-color:#FFC439;color:#0F2B4C;
  font-weight:600}
.veloce svg{width:17px;height:17px;fill:currentColor}
.oppure{display:flex;align-items:center;gap:14px;margin:20px 0;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink3)}
.oppure::before,.oppure::after{content:"";flex:1;height:1px;background:var(--filo)}

/* le caselle */
.righe{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(12px,1.6vw,18px)}
.casella{display:flex;flex-direction:column;gap:6px;grid-column:span 6}
.casella.mezza{grid-column:span 3}
.casella.terzo{grid-column:span 2}
.casella label{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink3)}
.casella input,.casella select,.casella textarea{border:1px solid var(--filo);
  padding:14px 15px;font:inherit;font-size:15.5px;background:var(--bianco);
  color:var(--ink);transition:border-color .25s,background .25s}
.casella input:focus{outline:none;border-color:var(--oro)}
.casella input::placeholder{color:var(--ink3)}
.casella input:disabled{background:var(--crema);color:var(--ink2)}
.casella .aiuto{font-size:11.5px;color:var(--ink3)}
.casella.male input{border-color:var(--vino)}
.casella.male .aiuto{color:var(--vino)}

/* le due strade: boutique o casa */
.strade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--filo);border:1px solid var(--filo);margin-bottom:22px}
.strada{padding:20px;background:var(--bianco);text-align:left;position:relative;
  transition:background .28s var(--curva)}
.strada:hover{background:var(--crema)}
.strada.presa{background:var(--crema)}
.strada.presa::after{content:"";position:absolute;left:0;right:0;top:-1px;
  height:2px;background:var(--oro)}
.strada b{display:block;font-weight:400;font-size:16px;margin-bottom:6px}
.strada small{display:block;font-size:13px;color:var(--ink3);line-height:1.5}
.strada .quando{display:block;margin-top:10px;font-size:12.5px;color:var(--oro)}

/* i modi di pagare, in riga */
.modi{display:grid;gap:1px;background:var(--filo);border:1px solid var(--filo)}
.modo{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:14px;
  align-items:center;padding:17px 19px;background:var(--bianco);text-align:left;
  transition:background .28s}
.modo:hover{background:var(--crema)}
.modo.preso{background:var(--crema)}
.modo__pallino{width:17px;height:17px;border:1px solid var(--ink3);
  border-radius:50%;position:relative}
.modo.preso .modo__pallino{border-color:var(--oro)}
.modo.preso .modo__pallino::after{content:"";position:absolute;inset:3px;
  border-radius:50%;background:var(--oro)}
.modo b{font-weight:400;font-size:15px}
.modo small{display:block;font-size:12.5px;color:var(--ink3);margin-top:3px}
.modo .segni{display:flex;gap:5px}
.segno{width:34px;height:22px;border:1px solid var(--filo);border-radius:3px;
  display:grid;place-items:center;font-size:7.5px;font-weight:600;
  color:var(--ink3);background:var(--bianco)}

/* il bottone che dice la cifra */
.paga{width:100%;min-height:60px;font-size:14px;letter-spacing:.14em;
  margin-top:clamp(20px,3vh,30px)}
.paga:disabled{opacity:.34;cursor:not-allowed}
.sotto-paga{display:flex;align-items:center;justify-content:center;gap:9px;
  margin-top:14px;font-size:11.5px;color:var(--ink3);text-align:center}
.sotto-paga svg{width:13px;height:13px;stroke:var(--oro);fill:none;
  stroke-width:1.6;flex:0 0 auto}

/* il riepilogo, sempre visibile */
.conto{position:sticky;top:calc(var(--h-testa) + 18px);border:1px solid var(--filo);
  background:var(--crema)}
.conto__capo{padding:19px 21px 15px;border-bottom:1px solid var(--filo);
  display:flex;justify-content:space-between;align-items:baseline}
.conto__capo h3{font-family:var(--serif);font-size:20px}
.conto__capo a{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink3);text-decoration:underline;text-underline-offset:3px}
.conto__pezzi{padding:4px 21px;max-height:min(34vh,300px);overflow-y:auto}
.conto-riga{display:grid;grid-template-columns:50px minmax(0,1fr) auto;gap:12px;
  align-items:center;padding:12px 0;border-bottom:1px solid var(--filo);
  font-size:13.5px}
.conto-riga:last-child{border-bottom:0}
.conto-riga img{width:50px;height:50px;object-fit:cover;background:var(--bianco)}
.conto-riga .q{color:var(--ink3);font-size:12px}
.conto-riga .p{font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.conto__conti{padding:15px 21px 21px}
.conto-voce{display:flex;justify-content:space-between;font-size:14px;
  color:var(--ink2);margin-bottom:8px;
  font-variant-numeric:lining-nums tabular-nums}
.conto-voce.tot{font-size:18px;color:var(--ink);margin:13px 0 0;padding-top:13px;
  border-top:1px solid var(--filo)}
.conto-voce.tot b{font-family:var(--serif);font-weight:400;font-size:24px}
.conto__nota{font-size:11.5px;color:var(--ink3);margin-top:12px;line-height:1.55}

@media(max-width:900px){
  .cv .wrap{grid-template-columns:minmax(0,1fr)}
  .conto{position:static;order:-1;margin-bottom:26px}
  .strade{grid-template-columns:minmax(0,1fr)}
  .casella.mezza,.casella.terzo{grid-column:span 6}
  /* il bottone che paga resta sempre sotto il pollice */
  .paga-fisso{position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--bianco);border-top:1px solid var(--filo);
    padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
  .paga-fisso .paga{margin-top:0;min-height:54px}
  .cv{padding-bottom:112px}
}

/* ====================================================================
   IL SITO VERO — quello che si aggiunge alla pelle del prototipo
   Stesse variabili, stessi caratteri, stesse curve. Qui stanno le cose che
   il prototipo non aveva: le schede bianche senza alone, la barra in basso
   sul telefono, l'avviso breve, la cassa dentro l'applicazione, le pagine
   di testo, i dettagli di accessibilita'.
   ==================================================================== */

/* ---------- fondamenta ---------- */
/* Il grigio dei testi secondari stava a 3,53:1 sul bianco - sotto la soglia
   di 4,5 che un occhio di sessant'anni chiede. Un tono piu' scuro: 5,6:1. */
:root{--ink3:#6B675F}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{overflow-x:clip}
input,select,textarea{font-size:max(16px,1em)}   /* sotto i 16 iOS ingrandisce la pagina da solo */
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--oro);outline-offset:2px;border-color:var(--oro)}
.blocco[inert]{opacity:.45}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body.bloccata{overflow:hidden}
body{padding-bottom:env(safe-area-inset-bottom)}
.salta{position:absolute;left:-999px;top:8px;z-index:999;background:var(--ink);color:#fff;padding:10px 16px;font:600 13px/1 var(--sans);border-radius:6px}
.salta:focus{left:8px;outline:2px solid var(--oro)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--oro);outline-offset:3px;border-radius:3px}
button:focus:not(:focus-visible){outline:none}

/* ---------- le schede: fondo bianco pieno, niente alone ----------
   Le fotografie arrivano gia' ritagliate e su bianco 255: la cornice e'
   bianca anche lei, e il gioiello e' l'unica cosa che si vede. */
.prod{display:block;color:inherit;text-decoration:none;cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent}
.prod .cornice,.cornice{background:#fff;border:1px solid var(--filo);border-radius:2px;transition:border-color var(--t-media) var(--curva),transform var(--t-media) var(--curva)}
.prod:hover .cornice{border-color:#D9D4C9}
.cornice img.piena,.cornice img{padding:6%;object-fit:contain;background:#fff;
  /* un filo di contrasto in piu' sullo schermo: a 500 punti l'argento tende al grigio */
  filter:contrast(1.04)}
.prod .marca-scheda{display:block;margin-top:12px;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--oro)}
.prod .riga1{display:flex;gap:8px;margin-top:4px}
.prod .nome{font-family:var(--serif);font-size:15.5px;line-height:1.25;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prod .prezzo{display:block;margin-top:5px;font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums}
.prod .mat{display:block;margin-top:3px;font-size:11px;color:var(--ink2);letter-spacing:.02em}
.prod .pallini{display:flex;gap:5px;margin-top:8px}
.prod .pallini i{width:10px;height:10px;border-radius:50%;border:1px solid rgba(0,0,0,.12)}
.prod .badge{position:absolute;top:10px;left:10px;right:auto;width:auto;z-index:2;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;padding:4px 8px;background:var(--ink);color:#fff}
.prod .badge.esaurito{background:#fff;color:var(--ink2);border:1px solid var(--filo)}
.prod .aggiungi{position:absolute;left:10px;right:10px;bottom:10px;z-index:2;text-align:center;font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:10px;background:rgba(255,255,255,.92);color:var(--ink);opacity:0;transform:translateY(6px);transition:opacity var(--t-media) var(--curva),transform var(--t-media) var(--curva)}
.prod:hover .aggiungi,.prod:focus-visible .aggiungi{opacity:1;transform:none}
@media (hover:none){.prod .aggiungi{display:none}}
.griglia{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,28px) clamp(12px,1.6vw,22px)}
@media (max-width:1100px){.griglia{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.griglia{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 10px}.prod .nome{font-size:14px}.prod .prezzo{font-size:13.5px}}
.scorri{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
@media (max-width:900px){.scorri{grid-template-columns:repeat(2,minmax(0,1fr))}}
.altri{display:flex;justify-content:center;padding:34px 0 10px}
.altri .button .resto{color:var(--ink3);margin-left:6px}
.fine-griglia{color:var(--ink3);font-size:13px;letter-spacing:.04em}
.vuoto-griglia{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--ink2)}
.vuoto-griglia b{display:block;font-family:var(--serif);font-size:22px;color:var(--ink);margin-bottom:8px}
.vuoto-griglia .button{margin-top:18px}

/* ---------- la testata ----------
   Undici voci nel menu: si stringono loro, non le icone. Misurato a 1440:
   con il passo di prima il menu arrivava a 1559 e le icone finivano fuori
   dallo schermo. */
.hrow{display:flex;align-items:center;gap:clamp(10px,1.6vw,28px)}
nav#menu{display:flex;flex:1 1 auto;min-width:0;justify-content:center;gap:0}
nav#menu a{display:inline-block;padding:10px clamp(6px,.6vw,11px);font-size:clamp(13px,.95vw,14px);color:var(--ink);text-decoration:none;white-space:nowrap;border-bottom:1px solid transparent;transition:border-color var(--t-svelta);text-transform:none;letter-spacing:.01em;font-weight:400}
nav#menu a:hover,nav#menu a.on{border-bottom-color:var(--oro)}
/* il vecchio foglio ammorbidiva le voci non puntate: con i link si fa uguale */
nav#menu:hover>a{color:var(--ink3)}
nav#menu:hover>a:hover,nav#menu>a.on{color:var(--ink)}
.marchio{display:inline-flex;align-items:center}
.marchio img{height:40px;width:auto}
.hicone .icona{position:relative;width:44px;height:44px;display:inline-grid;place-items:center;border-radius:50%;transition:background var(--t-svelta)}
.hicone .icona:hover{background:var(--crema)}
.hicone .icona b{position:absolute;top:5px;right:4px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--oro);color:#fff;font:700 10px/17px var(--sans);text-align:center;transition:transform var(--t-media) var(--curva)}
.hicone .icona b[hidden]{display:none}
#borsa-n:not([hidden]){display:block}
#borsa-n.pieno{animation:balzo .5s var(--curva)}
@keyframes balzo{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
#apri-cerca{display:none}
@media (max-width:1280px){
  .hicone .cerca{display:none}
  #apri-cerca{display:inline-grid}
  body.cerca-aperta .hicone .cerca{display:block;width:auto;position:absolute;left:0;right:0;top:100%;padding:10px 18px 12px;background:var(--bianco);border-bottom:1px solid var(--filo);z-index:5}
  body.cerca-aperta .hicone .cerca input{display:block;width:100%;font-size:16px;padding:12px 12px 12px 38px}
}
.cerca input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}
.mega a{display:block;color:var(--ink2);text-decoration:none;padding:4px 0;font-size:13.5px}
.mega a:hover{color:var(--ink)}
.mega .mega-tutti{display:inline-block;margin-left:auto;padding:6px 0;border-bottom:1px solid var(--oro);color:var(--ink)}
.mega .mega-marche{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.mega .mega-pezzo{text-decoration:none;color:inherit}
/* la testata si ritira scorrendo giu' sul telefono */
@media (max-width:900px){
  #testa{position:sticky;top:0;z-index:60;transition:transform var(--t-media) var(--curva)}
  body.testa-nascosta:not(.menu-aperto):not(.cerca-aperta) #testa{transform:translateY(-100%)}
  .annuncio{font-size:10px;letter-spacing:.14em;padding:8px 14px}
  #apri-cerca{display:inline-grid}
  .hicone .cerca{position:absolute;left:0;right:0;top:100%;padding:10px 14px 12px;background:var(--bianco);border-bottom:1px solid var(--filo);display:none}
  body.cerca-aperta .hicone .cerca{display:block;width:auto;left:0;right:0}
  body.cerca-aperta .hicone .cerca input{display:block;width:100%;font-size:16px;padding:12px 12px 12px 38px}
  #apri-preferiti{display:none}
  /* il menu del telefono: un foglio intero, voci grandi */
  nav#menu{position:fixed;inset:0;top:var(--h-testa,64px);bottom:0;background:var(--bianco);z-index:70;display:flex;flex-direction:column;justify-content:flex-start;gap:0;padding:10px 18px 90px;overflow:auto;transform:translateX(-100%);transition:transform var(--t-media) var(--curva);box-shadow:none;border:0}
  nav#menu.aperto{transform:none;display:flex}
  nav#menu a{display:block;width:100%;padding:15px 4px;font-family:var(--serif);font-size:22px;border-bottom:1px solid var(--filo);text-align:left}
  nav#menu:hover>a{color:var(--ink)}
}

/* ---------- la barra in basso: sul telefono il sito e' un'app ---------- */
.barra-app{display:none}
@media (max-width:900px){
  .barra-app{position:fixed;left:0;right:0;bottom:0;z-index:65;display:grid;grid-template-columns:repeat(5,1fr);background:rgba(255,255,255,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--filo);padding:6px 0 calc(6px + env(safe-area-inset-bottom))}
  .barra-app a,.barra-app button{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px 4px;color:var(--ink3);text-decoration:none;font:500 10px/1 var(--sans);letter-spacing:.04em;background:none;border:0;min-height:48px;-webkit-tap-highlight-color:transparent}
  .barra-app svg{width:23px;height:23px}
  .barra-app .on{color:var(--ink)}
  .barra-app .on svg{stroke:var(--oro)}
  .barra-app b{position:absolute;top:2px;right:calc(50% - 20px);min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--oro);color:#fff;font:700 9.5px/16px var(--sans);text-align:center}
  .barra-app b[hidden]{display:none}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  footer{padding-bottom:20px}
  .cr,.pannello-filtri{bottom:0}
  body.in-atelier .barra-app{display:none}
}

/* ---------- l'avviso breve ---------- */
.avviso{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translate(-50%,20px);z-index:120;background:var(--ink);color:#fff;font-size:13.5px;padding:12px 18px;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.18);opacity:0;pointer-events:none;transition:opacity var(--t-media) var(--curva),transform var(--t-media) var(--curva);max-width:calc(100vw - 32px)}
.avviso.aperto{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.avviso button{margin-left:14px;color:#E3C88A;font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){.avviso{bottom:calc(82px + env(safe-area-inset-bottom))}}

/* ---------- le briciole e i titoli ---------- */
.briciole{display:flex;gap:8px;align-items:center;font-size:12px;letter-spacing:.06em;color:var(--ink3);padding:18px 0 6px}
.briciole a{color:var(--ink3);text-decoration:none}
.briciole a:hover{color:var(--ink)}
.titolo-collezione{padding:6px 0 18px}
.titolo-collezione h1{font-size:clamp(28px,4vw,44px);margin:0 0 6px}
.titolo-collezione p{color:var(--ink2);max-width:56ch}
.filtri{display:flex;gap:8px;flex-wrap:wrap;padding:4px 0 22px}
.filtri .filtro{padding:8px 13px;border:1px solid var(--filo);border-radius:999px;font-size:13px;color:var(--ink2);background:#fff;transition:border-color var(--t-svelta),color var(--t-svelta);min-height:38px}
.filtri .filtro .quanti{margin-left:6px;color:var(--ink3);font-size:11px}
.filtri .filtro.on{border-color:var(--ink);color:var(--ink)}
.filtri .filtro:disabled{opacity:.4}
@media (max-width:640px){.filtri{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -18px;padding:4px 18px 18px}.filtri::-webkit-scrollbar{display:none}.filtri .filtro{flex:0 0 auto}}
.barra-collezione{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--filo);border-bottom:1px solid var(--filo);margin-bottom:14px}
.apri-filtri{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--ink);border-radius:999px;font-size:13px;min-height:40px}
.apri-filtri .quanti-attivi{min-width:18px;height:18px;border-radius:9px;background:var(--oro);color:#fff;font:700 10px/18px var(--sans);text-align:center;padding:0 5px}
#conta{font-size:12.5px;color:var(--ink3);margin-left:10px}
.ordina{padding:9px 12px;border:1px solid var(--filo);border-radius:6px;font:inherit;font-size:13px;color:var(--ink);background:#fff;min-height:40px}
.et-ordina{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin-right:8px}
@media (max-width:640px){.et-ordina{display:none}}
.gettone{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border:1px solid var(--filo);border-radius:999px;font-size:12.5px;color:var(--ink);margin:0 8px 10px 0;background:var(--crema);min-height:34px}
.gettone i{font-style:normal;color:var(--ink3)}

/* il pannello dei filtri */
.pf-voce{display:flex;align-items:center;gap:10px;width:100%;padding:10px 4px;font-size:14px;color:var(--ink);text-align:left;min-height:44px}
.pf-voce .n{margin-left:auto;color:var(--ink3);font-size:12px}
.pf-voce .pf-pallino{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.12)}
.pf-voce:disabled{opacity:.4}
.pf-titolo{display:flex;align-items:center;gap:8px;width:100%;padding:14px 4px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;border-top:1px solid var(--filo);min-height:48px}
.pf-titolo .scelti{min-width:18px;height:18px;border-radius:9px;background:var(--oro);color:#fff;font:700 10px/18px var(--sans);text-align:center;padding:0 5px}
.pf-titolo .segno{margin-left:auto;transition:transform var(--t-media)}
.pf-gruppo:not(.aperto) .pf-voci{display:none}
.pf-gruppo.aperto .pf-titolo .segno{transform:rotate(180deg)}
.pf-fondo .mostra{background:var(--ink);color:#fff;padding:14px 20px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;flex:1;min-height:48px}
.pf-fondo .azzera-tutto{padding:14px 16px;font-size:13px;color:var(--ink2);min-height:48px}

/* ---------- la scheda prodotto ----------
   Le fotografie del pezzo sono quadrate e su bianco: la casella e' quadrata
   e l'immagine ci sta dentro intera (niente tagli). La prima e' a tutta
   larghezza, 4:3, sempre intera. */
#pdp .pdp-foto{background:#fff;gap:2px}
#pdp .pdp-foto .lastra{aspect-ratio:1;height:auto;background:#fff;overflow:hidden;cursor:zoom-in;position:relative}
#pdp .pdp-foto .lastra.fascia{grid-column:1/-1;aspect-ratio:4/3}
#pdp .pdp-foto .lastra img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:4%;box-sizing:border-box;filter:contrast(1.04);transition:transform .9s var(--curva)}
#pdp .pdp-foto .lastra:hover img{transform:scale(1.03)}
/* le scelte: il vecchio foglio usa gli stessi nomi per le scelte della cassa
   (una tabella grigia a tre colonne); qui si riportano a quello che sono */
#pdp .scelte{display:flex;flex-direction:column;gap:18px;background:none;padding:22px 0 0;margin:0 0 6px;border-top:1px solid var(--filo)}
#pdp .scelta{display:block;background:none;padding:0;margin:0;border:0}
#pdp .scelta .et{display:flex;align-items:baseline;justify-content:space-between;gap:14px;width:auto;height:auto;margin:0 0 9px}
.pdp-prezzo{display:flex;align-items:baseline;gap:10px;margin:14px 0 18px}
.pdp-prezzo .cifra{font-family:var(--serif);font-size:28px;color:var(--ink);font-variant-numeric:tabular-nums}
.pdp-prezzo .iva{font-size:11px;color:var(--ink3);letter-spacing:.08em;text-transform:uppercase}
.pdp-testa .marca a{color:var(--oro);text-decoration:none}
.scelte .scelta{margin:0 0 16px}
.scelte .et{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin-bottom:8px}
.scelte .et b{color:var(--ink);letter-spacing:0;text-transform:none;font-size:13px}
.scelte .et .link{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--oro);text-decoration:underline;text-underline-offset:3px}
.opzioni{display:flex;flex-wrap:wrap;gap:8px}
.pillola{min-width:44px;min-height:40px;padding:8px 13px;border:1px solid var(--filo);border-radius:999px;font-size:13px;color:var(--ink);background:#fff;transition:border-color var(--t-svelta)}
.pillola.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.pastello{width:34px;height:34px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--filo);background:var(--tinta,#E3C87A);transition:box-shadow var(--t-svelta)}
.pastello.on{box-shadow:0 0 0 2px var(--ink)}
.pdp-azioni{margin:22px 0 14px}
.riga-azioni{display:flex;gap:10px}
.pdp-azioni .carrello{flex:1;min-height:52px;padding:14px 20px;background:var(--ink);color:#fff;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;transition:background var(--t-svelta),transform var(--t-svelta)}
.pdp-azioni .carrello:hover{background:#000}
.pdp-azioni .carrello.fatto{background:var(--oro)}
.pdp-azioni .cuore{width:52px;height:52px;border:1px solid var(--filo);display:grid;place-items:center;color:var(--ink);transition:color var(--t-svelta),border-color var(--t-svelta)}
.pdp-azioni .cuore.on{color:var(--vino);border-color:var(--vino)}
.pdp-azioni .cuore.on svg{fill:var(--vino)}
.pdp-azioni .secondario{display:block;margin-top:10px;padding:13px 20px;border:1px solid var(--ink);text-align:center;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-decoration:none;min-height:48px}
.pdp-nota-servizio{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink2);margin:14px 0 4px}
.pdp-nota-servizio .pallino{width:8px;height:8px;border-radius:50%;background:#3E9B5E;flex:none}
.pdp-nota-servizio .pallino.attesa{background:#D9A441}
.pdp-servizi{font-size:11.5px;color:var(--ink3);letter-spacing:.03em;margin:4px 0 14px}
.pdp-prosa{font-size:15px;line-height:1.65;color:var(--ink2);margin:10px 0 18px;max-width:56ch}
.pannello-info{list-style:none;padding:0;margin:0}
.pannello-info li{padding:8px 0 8px 16px;border-left:1px solid var(--oro);margin:6px 0;font-size:13.5px;color:var(--ink2)}
.pannello-info b{color:var(--ink)}
.fisarmonica details{border-top:1px solid var(--filo)}
.fisarmonica summary{cursor:pointer;padding:14px 0;font-size:13px;letter-spacing:.1em;text-transform:uppercase;list-style:none;display:flex;justify-content:space-between}
.fisarmonica summary::after{content:"+";color:var(--ink3)}
.fisarmonica details[open] summary::after{content:"–"}
.fisarmonica .dentro{padding:0 0 14px}
@media (max-width:900px){
  .pdp-foto{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:0;width:100vw;margin:0 0 0 calc(50% - 50vw);scrollbar-width:none}
  .pdp-foto::-webkit-scrollbar{display:none}
  .pdp-foto .lastra{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:1}
  .pdp-foto .punti{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:6px;z-index:3}
  .pdp-foto .punti button{width:8px;height:8px;border-radius:50%;background:rgba(30,25,19,.25)}
  .pdp-foto .punti button.on{background:var(--ink)}
}
/* Sul telefono, quando il pulsante vero e' fuori dallo schermo, compare una
   barra fissa sopra quella dell'app con prezzo e «Aggiungi»: come fanno i
   siti migliori, e senza coprire niente. */
.pdp-fisso{display:none}
@media (max-width:900px){
  .pdp-fisso{position:fixed;left:0;right:0;bottom:calc(60px + env(safe-area-inset-bottom));z-index:64;display:flex;align-items:center;gap:12px;padding:10px 18px;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-top:1px solid var(--filo);transform:translateY(120%);transition:transform var(--t-media) var(--curva)}
  .pdp-fisso.visibile{transform:none}
  .pdp-fisso .cifra{font-family:var(--serif);font-size:20px;color:var(--ink);white-space:nowrap}
  .pdp-fisso .carrello{flex:1;min-height:46px;padding:12px 16px;background:var(--ink);color:#fff;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
}

/* ---------- la borsa ---------- */
.cr-riga .attesa{color:#B07C1F}
.cr-riga__ph{display:block;background:#fff;border:1px solid var(--filo)}
.cr-chiede{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 2px}
.cr-chiede button{font-size:11.5px;padding:6px 10px;border:1px dashed var(--oro);border-radius:999px;color:var(--ink2);min-height:32px}
.cr-conta button{min-width:34px;min-height:34px}
.cr-vuoto{text-align:center;padding:50px 20px;color:var(--ink2)}
.cr-vuoto b{display:block;font-family:var(--serif);font-size:20px;color:var(--ink);margin-bottom:8px}
.cr-vuoto .button{margin-top:18px;display:inline-block}

/* ---------- la cassa ---------- */
.cv-titolo{font-size:clamp(28px,4vw,40px);margin:0 0 12px}
.cv-consenso{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--ink2);margin:16px 0 14px;line-height:1.5}
.cv-consenso input{width:18px;height:18px;margin-top:2px;accent-color:var(--ink);flex:none}
.cv-consenso a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.cv-paypal{margin:12px 0 0;font-size:12.5px;color:var(--ink3)}
.cv-errore{margin:12px 0 0;padding:12px 14px;background:#FBEDED;color:var(--vino);border-left:2px solid var(--vino);font-size:13.5px}
.conto-pezzo{display:grid;grid-template-columns:54px 1fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--filo);font-size:13.5px}
.conto-pezzo .ph{width:54px;height:54px;background:#fff;border:1px solid var(--filo);display:block}
.conto-pezzo .ph img{width:100%;height:100%;object-fit:contain}
.conto-pezzo small{display:block;color:var(--ink3);font-size:11.5px;margin-top:2px}
.conto-pezzo .p{font-variant-numeric:tabular-nums}
.conto__fiducia{font-size:11.5px;color:var(--ink3);letter-spacing:.03em;margin-top:14px;text-align:center}
.conto .vuoto{color:var(--ink3);padding:20px 0}
.blocco.dorme{opacity:.45;pointer-events:none}
.casella.male input{border-color:var(--vino)}
.paga{width:100%;min-height:54px;margin-top:18px;font-size:13px;letter-spacing:.16em}
.paga:disabled{opacity:.45}
.modo[style*="none"],.modo[hidden]{display:none!important}

/* ---------- grazie ---------- */
.grazie{padding:50px 0 80px;max-width:640px}
.grazie h1{font-size:clamp(30px,4.5vw,48px);margin:8px 0 14px}
.grazie-scatola{margin:26px 0;padding:22px 24px;background:var(--crema);border-left:2px solid var(--oro)}

/* ---------- le pagine di testo ---------- */
.pagina-testo{max-width:720px;padding:10px 0 80px}
.pagina-testo h1{font-size:clamp(30px,4.5vw,46px);margin:6px 0 20px}
.pagina-testo h2{font-family:var(--serif);font-weight:400;font-size:22px;margin:28px 0 8px}
.pagina-testo p{font-size:15.5px;line-height:1.7;color:var(--ink2);margin:0 0 12px}
.pagina-testo a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.pagina-testo .nota{font-size:12.5px;color:var(--ink3);margin-top:30px}
.pagina-testo table.misure{width:100%;border-collapse:collapse;margin:16px 0 26px;font-size:14px}
.pagina-testo table.misure th,.pagina-testo table.misure td{padding:8px 10px;border-bottom:1px solid var(--filo);text-align:left}
.pagina-testo table.misure th{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.pagina-testo .dove-righe{margin:18px 0}

/* ---------- la home: le cose nuove ---------- */
.usp{padding:clamp(30px,5vw,60px) 0;border-top:1px solid var(--filo);border-bottom:1px solid var(--filo);background:var(--crema)}
.usp-in{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.usp-in div{display:flex;flex-direction:column;gap:6px;padding-left:14px;border-left:1px solid var(--oro)}
.usp-in b{font-family:var(--serif);font-weight:400;font-size:18px;color:var(--ink)}
.usp-in span{font-size:13px;color:var(--ink2);line-height:1.5}
@media (max-width:900px){.usp-in{grid-template-columns:1fr 1fr;gap:20px}}
.boutique-home{padding:clamp(40px,6vw,90px) 0}
.bt-in{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,70px);align-items:center}
.bt-foto{aspect-ratio:4/3;background:var(--nebbia)}
.bt-foto img{width:100%;height:100%;object-fit:cover}
.bt-testo h2{font-size:clamp(28px,3.6vw,44px);margin:8px 0 14px}
@media (max-width:900px){.bt-in{grid-template-columns:1fr}}
.boutique .orari,table.orari{width:100%;border-collapse:collapse;margin:18px 0 8px;font-size:14px}
table.orari th{text-align:left;font-weight:500;padding:8px 0;border-bottom:1px solid var(--filo);color:var(--ink)}
table.orari td{text-align:right;padding:8px 0;border-bottom:1px solid var(--filo);color:var(--ink2);font-variant-numeric:tabular-nums}
.targa{font-size:13px;color:var(--ink2);margin:6px 0 0}
.targa.aperto{color:#2E7D4A}
.hero-azioni a,.fascia-azioni a{text-decoration:none}
a.button,a.cta{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
a.collezione{text-decoration:none;color:inherit;display:block}
a.mega-tutti{text-decoration:none}

/* le comparse allo scorrimento: un velo che si alza */
.compare{opacity:0;transform:translateY(14px);transition:opacity .7s var(--curva),transform .7s var(--curva)}
.compare.entrata{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.compare{opacity:1;transform:none}}

/* ---------- il velo dorato sulle fotografie grandi ---------- */
.viva{isolation:isolate}

/* ---------- l'atelier dentro l'applicazione ---------- */
.atl[hidden]{display:none}
body.in-atelier #testa,body.in-atelier .annuncio,body.in-atelier main,body.in-atelier footer{display:none}
.atl{position:relative;z-index:10;min-height:100vh;background:var(--crema)}