/* ═══════════════════════════════════════════════════════════════
   DOLOMEA — I PEZZI · «Maison», versione finale (3 nov 2026)

   La vetrina dei pezzi (home e Collezioni), le collezioni storiche e la
   scheda del pezzo (dialog#scheda). Si carica DOPO style.css, che non si
   tocca: qui ci sono solo regole nuove, o regole sovrascritte.

   L'idea è una gioielleria di sera. Ogni pezzo sta in un riquadro dei reel,
   lo stesso materiale delle Recensioni (raggio 30, prugna velato, bordo
   bianco all'8%): dentro c'è la foto vera, con un filo d'oro sottilissimo.
   Intorno tanto buio. Movimento lento e minimo.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --reel-bg:    rgba(24,10,14,.58);     /* il fondo dei riquadri dei reel (.recensione) */
  --reel-bordo: rgba(255,255,255,.08);
  --reel-r:     30px;
  --reel-pad:   10px;                   /* lo spazio fra il riquadro e la foto */
  --filo:       rgba(217,183,126,.34);  /* il filo d'oro sulla foto */
}

/* ───────────────── la sala ─────────────────
   Nasce dal buio e ci torna, come le altre sezioni colorate: in alto una
   luce prugna appena accennata, sotto i riquadri un riflesso caldo. */
/* lo stacco fra le sezioni dei pezzi segue la larghezza, non l'altezza:
   su una finestra molto alta 13vh diventava un vuoto di 320px */
.sec--vetrina, .sec#collezioni{ --sec-y:clamp(5.5rem, 8vw + 1.5rem, 8.5rem); }

.sec--vetrina{
  background:
    linear-gradient(to bottom, var(--ink) 0, rgba(var(--ink-rgb),0) 220px),
    linear-gradient(to top, var(--ink) 0, rgba(var(--ink-rgb),0) 200px),
    radial-gradient(62% 40% at 50% 18%, rgba(76,16,48,.34), transparent 72%),
    radial-gradient(58% 34% at 50% 66%, rgba(247,223,187,.035), transparent 72%),
    var(--ink);
}
.sec--vetrina .sechead{ margin-bottom:clamp(2.8rem, 7vh, 4.6rem); }
.vetrina__guida{ margin:-.9rem auto 0; font-size:.9rem; color:var(--tx-dim); }

/* ───────────────── Collezioni: l'apertura ─────────────────
   Dietro il titolo, la stessa sera alle Tre Cime delle Recensioni (la foto
   è già in cache per chi arriva dalla home), velata e poi sciolta nel buio
   prima dei pezzi. L'inquadratura tiene le cime e il cielo: la catenina
   dorata della foto resta fuori a destra, i ciondoli della foto restano
   sotto, dove il velo è già pieno. La fascia è alta quanto serve per le
   cime (in vw, come la foto), non quanto il testo. */
.sec--apertura{ isolation:isolate; }
.sec--apertura::before{
  content:''; position:absolute; z-index:-1; left:0; right:0; top:0;
  height:min(40vw, 620px);
  pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(23,18,15,.7) 0%, rgba(23,18,15,.58) 30%, rgba(30,14,20,.72) 62%, var(--ink) 100%),
    url(../img/hero-wide.webp) 0 0 / 138% auto no-repeat;
}
@media (max-width:699px){
  /* da telefono le tre cime riempiono la larghezza, il resto della foto resta fuori */
  .sec--apertura::before{
    height:86vw;
    background-size:auto, 294% auto;
    background-position:0 0, 58% 0;
  }
}

/* ───────────────── la vetrina ───────────────── */
.vetrina{
  list-style:none; margin:0 auto; padding:0;
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  column-gap:clamp(.95rem, 3.6vw, 2rem); row-gap:0;
  max-width:1080px;
}
.pz{ margin:0 0 clamp(.95rem, 3.6vw, 2rem); display:flex; flex-direction:column; }

/* il riquadro dei reel: lo stesso materiale delle Recensioni */
.pz__link{
  flex:1; display:flex; flex-direction:column; align-items:center;
  padding:var(--reel-pad) var(--reel-pad) 1.4rem;
  text-align:center; text-decoration:none; color:inherit;
  background:var(--reel-bg);
  border:1px solid var(--reel-bordo);
  border-radius:var(--reel-r);
  box-shadow:0 10px 40px rgba(0,0,0,.18);
  transition:border-color .8s ease;
  -webkit-tap-highlight-color:transparent;
}
/* nome, tipo e prezzo stanno sulla stessa riga in tutta la fila, anche
   quando un nome va a capo: la vetrina resta in ordine */
@supports (grid-template-rows: subgrid){
  .pz{ display:grid; grid-row:span 4; grid-template-rows:subgrid; }
  .pz__link{ grid-row:1 / -1; display:grid; grid-template-rows:subgrid; justify-items:center; }
  /* il nome scende sul tipo, il tipo sale sul nome: restano una cosa sola
     anche quando il vicino ha il nome o il tipo su due righe, e nomi, tipi
     e prezzi restano sulla stessa linea in tutta la fila */
  .pz__nome{ align-self:end; }
  .pz__tipo{ align-self:start; }
}

/* la foto: proporzioni uguali per tutti, angoli concentrici al riquadro */
.pz__cornice{
  position:relative; display:block; width:100%;
  aspect-ratio:3 / 4;
  border-radius:calc(var(--reel-r) - var(--reel-pad));
  overflow:hidden; isolation:isolate;
  background:#2A211C;                       /* mentre la foto arriva */
}
/* le foto sono chiare: ai bordi si spengono appena verso il riquadro,
   così la foto non finisce con uno stacco netto (la foto non si tocca) */
.pz__cornice::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(125% 95% at 50% 44%, rgba(24,10,14,0) 58%, rgba(24,10,14,.28) 100%);
}
/* il filo d'oro */
.pz__cornice::after{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px var(--filo);
  transition:box-shadow .9s var(--e);
}
.pz__foto{
  width:100%; height:100%;
  object-fit:cover; object-position:50% 50%;
  transition:transform 1.8s var(--e);
}
.pz__foto--sx{ object-position:20% 50%; }   /* orecchini: il primo è vicino al bordo */

.pz__nome{
  margin-top:1.2rem;
  font-family:'Bodoni Moda', 'Times New Roman', serif; font-weight:400;
  font-size:clamp(1.04rem, .45vw + .94rem, 1.22rem); line-height:1.24;
  color:#FFFFFF;
  text-wrap:balance;
  transition:color .6s ease;
}
.pz__tipo{
  margin-top:.5rem; padding-inline:.3rem;
  font-size:.66rem; font-weight:400; line-height:1.5;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--tx-dim);
  text-wrap:balance;
}
.pz__prezzo{
  margin-top:.45rem;
  font-family:'Bodoni Moda', 'Times New Roman', serif; font-weight:400;
  font-size:1.02rem; letter-spacing:.03em; line-height:1.4;
  color:var(--gold);
}

/* al passaggio: la foto si avvicina appena, il filo si accende */
.pz__link:hover{ border-color:rgba(255,255,255,.15); }
.pz__link:hover .pz__foto{ transform:scale(1.045); }
.pz__link:hover .pz__cornice::after{ box-shadow:inset 0 0 0 1px rgba(247,223,187,.75); }
.pz__link:hover .pz__nome{ color:var(--rose); }
.pz__link:focus-visible{ outline:2px solid var(--rose); outline-offset:4px; border-radius:var(--reel-r); }

/* comparsa lenta: la fila entra da sinistra a destra */
.pz[data-reveal]{
  transform:translate3d(0,16px,0);
  transition:opacity 1.5s var(--e), transform 1.5s var(--e);
}
.pz[data-reveal].is-in{ transform:none; }
.pz[data-reveal]:not(.is-in) .pz__foto{ transform:scale(1.06); }
.vetrina > .pz:nth-child(2n){ transition-delay:.16s; }
@media (scripting: none){
  .pz[data-reveal] .pz__foto{ transform:none; }
}
/* con il movimento ridotto niente attese: in style.css il corsivo dei titoli,
   il trattino dell'occhiello e le spunte arrivano con un ritardo che qui
   non serve (e che negli screenshot lasciava i titoli a metà) */
@media (prefers-reduced-motion: reduce){
  #pezzi [data-reveal], #collezioni [data-reveal],
  #pezzi .display[data-reveal] em, #collezioni .display[data-reveal] em,
  #pezzi .eyebrow[data-reveal]::before, #collezioni .eyebrow[data-reveal]::before{ transition-delay:0s !important; }
}
/* telefono: riquadri più piccoli, il raggio scende con loro */
@media (max-width:599px){
  .vetrina{ --reel-r:24px; --reel-pad:7px; }
  .pz__link{ padding-bottom:1.1rem; }
  .pz__nome{ margin-top:.95rem; padding-inline:.2rem; font-size:1.02rem; }
  .pz__tipo{ font-size:.64rem; letter-spacing:.12em; padding-inline:.15rem; }
  .pz__prezzo{ font-size:1rem; }
}

/* l'invito ad andare avanti: chiude la vetrina fra due filetti d'oro */
.more.vetrina__oltre{
  display:flex; align-items:center; justify-content:center; gap:clamp(1.2rem, 3vw, 2.2rem);
  max-width:1080px; margin:clamp(1.8rem, 4.5vh, 2.8rem) auto 0;
}
.vetrina__oltre::before, .vetrina__oltre::after{ content:''; flex:1; height:1px; }
.vetrina__oltre::before{ background:linear-gradient(90deg, rgba(217,183,126,0), rgba(217,183,126,.42)); }
.vetrina__oltre::after{ background:linear-gradient(90deg, rgba(217,183,126,.42), rgba(217,183,126,0)); }
.vetrina__oltre .btn{ flex:none; }
/* da telefono i filetti sarebbero due trattini: il bottone sta da solo */
@media (max-width:699px){
  .vetrina__oltre::before, .vetrina__oltre::after{ display:none; }
}

/* le note sotto la vetrina di Collezioni */
.vetrina__dopo{
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  text-align:center; margin-top:clamp(.8rem, 2.4vh, 1.6rem);
}
.vetrina__dopo .note{ margin:0 auto; }
.vetrina__dopo .link{ align-self:center; }
.sec--vetrina .apart{ margin-top:clamp(3.2rem, 8vh, 5rem); }

/* tablet: due colonne, ma strette, perché resti il buio intorno */
@media (min-width:600px) and (max-width:899px){
  .vetrina{ max-width:560px; }
}
@media (min-width:900px){
  .vetrina{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
  .vetrina > .pz:nth-child(4n+1){ transition-delay:0s; }
  .vetrina > .pz:nth-child(4n+2){ transition-delay:.14s; }
  .vetrina > .pz:nth-child(4n+3){ transition-delay:.28s; }
  .vetrina > .pz:nth-child(4n){ transition-delay:.42s; }
}

/* ───────────────── le collezioni storiche ─────────────────
   Cinque tessere quadrate; ognuna apre la scheda con il testo intero di
   Lucia, che sta nella pagina (.storica__intera, con le sue chiavi di
   traduzione): la scheda lo legge da lì. Senza JavaScript il testo si vede
   sotto la tessera, con l'invito su WhatsApp.
   Da telefono diventano un indice: foto piccola a sinistra, testo a destra. */
.storiche{
  --g:clamp(1rem, 2.2vw, 1.6rem);
  list-style:none; margin:0 auto; padding:0; max-width:1120px;
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(2rem, 5vh, 2.8rem) var(--g);
}
.storica{ width:calc((100% - 2 * var(--g)) / 3); display:flex; flex-direction:column; }
.storica__link{
  flex:1;
  display:flex; flex-direction:column; align-items:center;
  text-align:center; text-decoration:none; color:inherit;
  -webkit-tap-highlight-color:transparent;
}
.storica__cornice{
  position:relative; display:block; width:100%;
  aspect-ratio:1 / 1;
  border-radius:20px; overflow:hidden; isolation:isolate;
  background:#2A211C;
  box-shadow:0 32px 58px -38px rgba(0,0,0,.95);
}
.storica__cornice::after{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(217,183,126,.3);
  transition:box-shadow .9s var(--e);
}
.storica__cornice img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.8s var(--e);
}
.storica__testo{ flex:1; display:flex; flex-direction:column; align-items:center; }
.storica__nome{
  margin-top:1.1rem;
  font-family:'Bodoni Moda', 'Times New Roman', serif; font-weight:400;
  font-size:1.3rem; line-height:1.2; color:#FFFFFF;
  transition:color .6s ease;
}
.storica__breve{
  margin:.45rem 0 .75rem; max-width:30ch;
  font-size:.88rem; line-height:1.55; color:var(--tx-mid);
}
/* «Leggi la storia» sulla stessa linea in tutte e cinque le tessere */
.storica__cta{
  margin-top:auto; padding-bottom:.2rem;
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--rose); border-bottom:1px solid rgba(217,113,143,.36);
}
.storica__link:hover .storica__cornice img{ transform:scale(1.045); }
.storica__link:hover .storica__cornice::after{ box-shadow:inset 0 0 0 1px rgba(247,223,187,.7); }
.storica__link:hover .storica__nome{ color:var(--rose); }
.storica__link:focus-visible{ outline:none; }
.storica__link:focus-visible .storica__cornice{ outline:2px solid var(--rose); outline-offset:4px; }

/* il testo intero: con JavaScript lo legge la scheda */
.storica__intera{ display:none; }
@media (scripting: none){
  .storica__cta{ display:none; }
  .storica__intera{ display:block; padding:.4rem .2rem 0; text-align:center; }
  .storica__intera .chip{ margin-bottom:.6rem; }
  .storica__parole{ margin:0 0 .4rem; font-size:.92rem; line-height:1.6; color:var(--tx-mid); }
  .storica__intera .link{ align-self:center; }
}

@media (min-width:1000px){
  .storica{ width:calc((100% - 4 * var(--g)) / 5); }
}
@media (max-width:699px){
  .storiche{ display:block; max-width:520px; }
  .storica{ width:auto; }
  .storica + .storica{ border-top:1px solid rgba(217,183,126,.14); }
  .storica__link{
    display:grid; grid-template-columns:92px minmax(0, 1fr); gap:0 1.15rem;
    align-items:center; text-align:left; padding:1.15rem 0;
  }
  .storica__cornice{ border-radius:16px; }
  .storica__testo{ align-items:flex-start; }
  .storica__nome{ margin-top:0; font-size:1.24rem; }
  .storica__breve{ margin:.25rem 0 .55rem; font-size:.86rem; line-height:1.5; }
  .storica__cta{ margin-top:0; }
}
@media (max-width:699px) and (scripting: none){
  .storica__intera{ text-align:left; padding:0 0 1.15rem; }
}

/* ═══════════════════════ LA SCHEDA ═══════════════════════
   Pannello diviso: a sinistra la foto vera su fondo inchiostro, a destra
   il testo su prugna profondo, la frase in Bodoni come le citazioni dei
   reel, il prezzo in oro e il bottone rosa per Etsy.
   Da telefono è un foglio alto quasi quanto lo schermo, con prezzo,
   «Pezzo unico» e bottone fissi in fondo; sopra resta una striscia di
   fondo scuro che chiude la scheda al tocco. */

.scheda{
  padding:0; border:0; margin:auto;
  width:min(1010px, calc(100vw - 3rem)); max-width:none;
  height:min(680px, calc(100vh - 3rem)); max-height:none;
  background:transparent; color:var(--tx);
  overflow:visible;
}
.scheda::backdrop{
  background:rgba(12,8,6,.76);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
/* qui dentro [hidden] vince sempre, anche su .btn e .link */
.scheda [hidden]{ display:none !important; }

.scheda__box{
  position:relative; height:100%;
  display:grid;
  grid-template-columns:minmax(0, 1.08fr) minmax(0, .92fr);
  grid-template-rows:minmax(1.5rem, 1fr) minmax(0, auto) auto minmax(1.5rem, 1fr);
  border-radius:var(--r-lg); overflow:hidden;
  background:
    radial-gradient(110% 70% at 100% 0%, rgba(217,113,143,.15), transparent 62%),
    linear-gradient(162deg, var(--plum) 0%, var(--plum-deep) 70%);
  border:1px solid rgba(255,201,219,.14);
  box-shadow:0 70px 140px -50px rgba(0,0,0,.95);
}
.scheda__scorri{ display:contents; }

/* — la foto — */
.scheda__media{
  grid-column:1; grid-row:1 / -1; min-height:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:2.6rem 2.6rem 1.4rem;
  background:radial-gradient(75% 60% at 50% 44%, #2A201A 0%, var(--ink) 80%);
  box-shadow:inset -1px 0 0 rgba(217,183,126,.16);
}
.scheda__quadro{
  flex:1 1 auto; min-height:0; width:100%;
  display:flex; align-items:center; justify-content:center;
}
.scheda__foto{
  display:block; width:auto; height:auto; max-width:100%; max-height:100%;
  border-radius:20px;
  box-shadow:0 0 0 1px rgba(217,183,126,.4), 0 44px 80px -44px rgba(0,0,0,1);
  transition:opacity .5s ease;
}
.scheda__foto.is-attesa{ opacity:0; }
.scheda__dida{
  margin:.85rem 0 0; max-width:36ch;
  font-size:.78rem; line-height:1.5; text-align:center; color:var(--tx-dim);
}
/* il tasto dell'indossato: una miniatura dell'altra foto e due righe, si vede subito */
.scheda__vista{
  margin-top:1rem; padding:.35rem 1.6rem .35rem .35rem;
  display:inline-flex; align-items:center; gap:.85rem;
  background:rgba(217,183,126,.1); border:1px solid rgba(217,183,126,.6); border-radius:999px; cursor:pointer;
  color:var(--gold-lt); text-align:left;
  transition:background .3s ease, border-color .3s ease;
}
.scheda__vista-tondo{ flex:none; display:block; width:3.25rem; height:3.25rem; border-radius:50%; overflow:hidden; box-shadow:0 0 0 1px rgba(217,183,126,.45); }
/* la miniatura indossata è ingrandita sul gioiello: al collo, al lobo, al dito */
.scheda__vista-foto{ display:block; width:100%; height:100%; object-fit:cover; transform:scale(2.2); transform-origin:50% 68%; }
.scheda__vista[data-tipo="orecchini"] .scheda__vista-foto{ transform-origin:46% 34%; }
.scheda__vista[data-tipo="anello"] .scheda__vista-foto{ transform-origin:53% 33%; }
.scheda__vista.is-sim .scheda__vista-foto{ transform:none; }
.scheda__vista-si, .scheda__vista-no{ display:flex; flex-direction:column; gap:.1rem; }
.scheda__vista-t{ font-size:.98rem; font-weight:400; letter-spacing:.01em; }
.scheda__vista small{ font-size:.74rem; letter-spacing:.02em; color:var(--tx-dim); }
.scheda__vista:hover{ background:rgba(217,183,126,.2); border-color:var(--gold-lt); }

/* — il testo — */
.scheda__testo{
  grid-column:2; grid-row:2; min-height:0; overflow-y:auto;
  padding:0 3rem 0 2.8rem;
}
.scheda__unico{
  margin:0 0 1rem;
  display:flex; align-items:center; gap:.7rem;
  font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-lt);
}
.scheda__unico::before{ content:''; width:22px; height:1px; background:currentColor; opacity:.6; flex:none; }
.scheda__nome{
  margin:0;
  font-family:'Bodoni Moda', 'Times New Roman', serif; font-weight:500;
  font-size:clamp(2rem, 3.1vw, 2.65rem); line-height:1.06; letter-spacing:-.015em;
  color:#FFFFFF; text-wrap:balance;
}
.scheda__nome:focus, .scheda__nome:focus-visible{ outline:none; }
.scheda__tipo{
  margin:.75rem 0 0;
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(247,223,187,.72);
}
/* la frase: in Bodoni, bianca, come le citazioni dei riquadri dei reel */
.scheda__frase{
  margin:1.45rem 0 0; padding-top:1.35rem; max-width:40ch;
  border-top:1px solid rgba(217,183,126,.2);
  font-family:'Bodoni Moda', 'Times New Roman', serif; font-weight:400;
  font-size:1.14rem; line-height:1.56; color:#FFFFFF;
}
.scheda__nota{ margin:1rem 0 0; font-size:.86rem; line-height:1.55; color:rgba(245,237,230,.6); }
.scheda__wa{ margin-top:.7rem; }

/* — prezzo e bottone — */
.scheda__azioni{
  grid-column:2; grid-row:3;
  display:flex; align-items:center; flex-wrap:wrap; gap:1rem 1.6rem;
  padding:1.9rem 3rem 0 2.8rem;
}
.scheda__cifra{ display:flex; flex-direction:column; align-items:flex-start; gap:.35rem; }
.scheda__prezzo{
  margin:0; white-space:nowrap;
  font-family:'Bodoni Moda', 'Times New Roman', serif; font-weight:400;
  font-size:1.9rem; line-height:1; color:var(--gold);
}
/* «Pezzo unico» sotto il prezzo: solo nella barra del telefono */
.scheda__unico-prezzo{
  display:none; margin:0;
  font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; white-space:nowrap;
  color:rgba(247,223,187,.66);
}

.scheda__chiudi{
  position:absolute; top:1rem; right:1rem; z-index:5;
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:rgba(23,18,15,.36); border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:background-color .3s ease, border-color .3s ease;
}
.scheda__chiudi svg{ width:18px; height:18px; color:var(--tx); }
.scheda__chiudi:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.34); }

/* — tablet: le due metà uguali, margini più stretti — */
@media (min-width:761px) and (max-width:1000px){
  .scheda__box{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
  .scheda__media{ padding:2.2rem 2rem 1.2rem; }
  .scheda__testo{ padding:0 2.2rem 0 2rem; }
  .scheda__azioni{ padding:1.6rem 2.2rem 0 2rem; }
  .scheda__frase{ font-size:1.08rem; }
}

/* — da telefono: un foglio quasi a tutto schermo — */
@media (max-width:760px){
  .scheda{
    width:100%;
    /* sopra il foglio restano 44px di fondo scuro: un tocco lì chiude la scheda */
    height:calc(100vh - 2.75rem); height:calc(100dvh - 2.75rem);
    margin:auto 0 0;
  }
  .scheda__box{
    display:flex; flex-direction:column;
    border-radius:24px 24px 0 0; border-bottom:0;
  }
  .scheda__scorri{
    display:block; flex:1 1 auto; min-height:0;
    overflow-y:auto; overscroll-behavior:contain;
  }
  .scheda__media{ padding:3.9rem 1.5rem 1rem; box-shadow:inset 0 -1px 0 rgba(217,183,126,.16); }
  .scheda__quadro{ flex:none; }
  .scheda__foto{ max-height:min(46svh, 400px); }
  .scheda__testo{ overflow:visible; padding:1.7rem 1.5rem 2.2rem; }
  .scheda__nome{ font-size:2.1rem; }
  .scheda__frase{ font-size:1.1rem; line-height:1.55; }
  /* il «Pezzo unico» dei pezzi scende nella barra, sotto il prezzo */
  .scheda[data-tipo="pezzo"] .scheda__unico{ display:none; }
  .scheda__unico-prezzo{ display:block; }
  .scheda__azioni{
    flex:none; flex-wrap:nowrap; gap:1.1rem;
    padding:.8rem 1rem calc(.8rem + env(safe-area-inset-bottom)) 1.5rem;
    background:rgba(34,8,21,.94);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    border-top:1px solid rgba(217,183,126,.2);
  }
  .scheda__prezzo{ font-size:1.5rem; }
  .scheda__azioni .btn{ flex:1; min-height:52px; padding-inline:1.1rem; }
  .scheda__chiudi{ top:.7rem; right:.7rem; }
}

/* — entrata e uscita: brevi, senza rimbalzi — */
@media (prefers-reduced-motion: no-preference){
  .scheda[open]{ animation:schedaIn .7s var(--e) both; }
  .scheda[open]::backdrop{ animation:schedaVelo .55s ease both; }
  .scheda.is-uscita{ animation:schedaOut .26s ease both; }
  .scheda.is-uscita::backdrop{ animation:schedaVeloOut .26s ease both; }
}
@media (max-width:760px) and (prefers-reduced-motion: no-preference){
  .scheda[open]{ animation-name:schedaSu; }
  .scheda.is-uscita{ animation-name:schedaGiu; }
}
@keyframes schedaIn{ from{ opacity:0; transform:translate3d(0,18px,0) scale(.985); } }
@keyframes schedaOut{ to{ opacity:0; transform:translate3d(0,10px,0) scale(.99); } }
@keyframes schedaSu{ from{ opacity:.3; transform:translate3d(0,7%,0); } }
@keyframes schedaGiu{ to{ opacity:0; transform:translate3d(0,7%,0); } }
@keyframes schedaVelo{ from{ opacity:0; } }
@keyframes schedaVeloOut{ to{ opacity:0; } }