/* =============================================================================
   PUROTATTO — scheda prodotto (prodotto.html): foto a sinistra che scorrono e pannello fermo a destra
   (impianto in system.css, sezione 12). Dal 3/11 (Andrea, call 2/11: «non devi stravolgerla, devi cambiare qualche cosina»)
   il pannello è nostro: cuore accanto al nome, colore e taglie in fila sempre in vista, «Il filato», mail e boutique in una frase.
   Cassetto da destra per i dettagli, «Avvisami», spedizione per paese, lightbox, Completa il look, Ti potrebbe piacere.
   Stesso sistema: a filo, hairline, niente ombre.
   ============================================================================= */

/* Attesa del catalogo (solo con ?sku=): niente lampo del capo di default */
.pdp-galleria, .pdp-punti, .pdp-info-in { transition: opacity .5s var(--ease); }
.pdp-attesa .pdp-galleria, .pdp-attesa .pdp-punti, .pdp-attesa .pdp-info-in { opacity: 0; }

/* Foto indossate su bianco → fondo sabbia in multiply, come le still life */
.pdp-foto--ind { background: var(--sabbia); isolation: isolate; }
.pdp-foto--ind > img { mix-blend-mode: multiply; object-position: 50% 0; }
.pdp-foto--dettaglio > img { transform: scale(var(--zoom, 1.9)); }
.pdp-foto--video { background: #c9b9a6; }

/* Apri la foto: tutta la tessera è cliccabile */
.pdp-foto-apri { position: absolute; inset: 0; z-index: 2; width: 100%; cursor: zoom-in; }
.pdp-foto-apri:focus-visible { outline: 1px solid var(--inchiostro); outline-offset: -8px; }

/* Percorso sopra il nome, come Cucinelli: Home / Collezione / Categoria, l'ultima in inchiostro (26/10) */
.pdp-briciole { font-size: 12px; }
.pdp-briciole li:last-child a { color: var(--inchiostro); }

/* Il nome col cuore sulla stessa riga, a destra (3/11, Andrea, call 2/11: «il cuore… lo metti vicino al nome, togli il condividi»).
   Il cuore non aggiunge altezza alla riga: il suo riquadro da 34 px rientra nei margini, l'icona finisce sul filo destro del pannello */
.pdp-testa { margin-top: 34px; }
.pdp-nome-riga { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.pdp-nome-riga .pdp-nome { min-width: 0; }
.pdp-cuore { flex: none; margin: -7px -8px -7px 0; }

/* Il prezzo al posto di «Made in Italy», sotto il nome (29/10): Neue Montreal, cifre tabellari, la stessa misura del nome */
.pdp-prezzo, .pdp-barra-prezzo { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.pdp-prezzo { margin-top: 4px; font-size: 16px; line-height: 1.3; letter-spacing: .04em; color: var(--bruno); }

/* Colore e taglia fatti allo stesso modo (3/11): l'etichetta sopra, la fila dei tondi sotto, allineata a sinistra col testo */
.pdp-colori { display: block; margin-top: 28px; padding-bottom: 0; }
.pdp-colori .swatches { margin: 9px 0 -5px -1px; }   /* il filo del tondo scelto parte dal filo del testo, come quello delle taglie */

/* Taglie sempre in vista (3/11, Andrea, call 2/11: «facciamola come i colori»): una fila sotto il colore, al posto del cassetto.
   Ogni taglia è un tondo come quello del colore: la scelta prende lo stesso filo sottile (1 px, inchiostro), il passaggio lo accenna,
   l'esaurita è in pietra e barrata ma si clicca (porta ad «Avvisami»). «Guida alle taglie» resta sulla riga dell'etichetta, a destra */
.pdp-taglie { margin-top: 22px; }
.pdp-taglie-testa { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.pdp-taglie-stato { min-width: 0; font-size: 14px; line-height: 1.2; letter-spacing: .03em; transition: color .3s var(--ease); }
.pdp-taglie.is-esaurita .pdp-taglie-stato { color: var(--bruno); }
.pdp-taglie-fila { display: flex; flex-wrap: wrap; gap: 0 2px; margin: 6px 0 0 -5px; }   /* -5 px: il tondo della prima taglia parte dal filo del testo */
.pdp-taglia {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px;
  font-size: 13px; line-height: 1; letter-spacing: .02em; color: var(--inchiostro);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}
.pdp-taglia::before, .pdp-taglia::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 1px solid var(--linea); }   /* il tondo appena accennato: si legge come i tondi del colore */
.pdp-taglia::after { border-color: var(--inchiostro); opacity: 0; transition: opacity .3s var(--ease); }
.pdp-taglia:hover::after { opacity: .35; }
.pdp-taglia[aria-checked="true"]::after { opacity: 1; }
.pdp-taglia:focus-visible { outline: 0; }
.pdp-taglia:focus-visible::after { opacity: 1; border-style: dashed; }
.pdp-taglia.is-esaurita { color: var(--pietra); }
.pdp-taglia.is-esaurita .pdp-taglia-n { text-decoration: line-through; text-decoration-thickness: 1px; }
.pdp-taglia.is-esaurita[aria-checked="true"]::after { border-color: var(--pietra); }
/* «Aggiungi» senza taglia: la fila si fa notare per un attimo, i tondi si accennano e tornano (js: chiediTaglia) */
.pdp-taglie.is-richiesta .pdp-taglie-stato { color: var(--inchiostro); }
.pdp-taglie.is-richiesta .pdp-taglia:not([aria-checked="true"])::after { animation: pdp-richiesta 1.6s var(--ease); }
@keyframes pdp-richiesta { 0%, 100% { opacity: 0; } 30%, 65% { opacity: .5; } }
.pdp-guida {
  flex: none; padding: 6px 0; font-size: 12px; line-height: 1.2; letter-spacing: .03em; color: var(--bruno);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color .3s var(--ease);
}
.pdp-guida:hover { color: var(--inchiostro); }
.pdp-info .pdp-add { margin-top: 28px; }

/* Il filato (3/11, Andrea, call 2/11): un modulo nostro, dal 3/11 sera in fondo al pannello (Gianluca: «portalo in fondo»; impaginazione
   da rifare). Il dettaglio del capo in un quadrato piccolo, avvicinato sulla
   maglia (fondo bianco dello still life → sabbia in multiply, come le foto indossate), poi l'etichetta e una riga da leggere, non da consultare */
.pdp-filato { display: flex; align-items: center; gap: 18px; margin-top: 22px; }
.pdp-filato-foto { position: relative; flex: none; width: 64px; height: 64px; overflow: hidden; background: var(--sabbia); isolation: isolate; }
.pdp-filato-foto > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; transform: scale(1.35); mix-blend-mode: multiply; }
.pdp-filato-testo { min-width: 0; }
.pdp-filato-etichetta { font-size: 11px; line-height: 1.3; letter-spacing: .2em; text-transform: uppercase; color: var(--pietra); }
.pdp-filato-racconto { margin-top: 5px; font-size: 13px; line-height: 1.55; letter-spacing: .02em; color: var(--bruno); max-width: 52ch; }

/* Mail e boutique in una frase (3/11, al posto della coppia «Trova in boutique» / «Possiamo aiutarti?» di Cucinelli) */
.pdp-consiglio { margin-top: 26px; font-size: 13px; line-height: 1.6; letter-spacing: .02em; color: var(--bruno); max-width: 52ch; }
.pdp-consiglio a {
  color: var(--inchiostro); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: var(--linea); transition: text-decoration-color .3s var(--ease);
}
.pdp-consiglio a:hover { text-decoration-color: currentColor; }

/* Taglie del capo in «Completa il look»: esaurite barrate */
.taglia.is-esaurita { color: var(--pietra); text-decoration: line-through; text-decoration-thickness: 1px; }
.taglia.is-esaurita:hover { color: var(--bruno); }
.taglia[disabled] { cursor: default; }
.taglia[disabled]:hover { color: var(--pietra); }

/* Avvisami: piccolo campo email sotto il bottone */
.pdp-avvisa { margin-top: 20px; }
.pdp-avvisa-testo, .pdp-avvisa-grazie { font-size: 13px; line-height: 1.6; color: var(--bruno); }
.pdp-avvisa-form { display: flex; align-items: center; gap: 16px; margin-top: 12px; border-bottom: 1px solid var(--inchiostro); }
.pdp-avvisa-form input { flex: 1; min-width: 0; padding: 11px 0; background: transparent; border: 0; border-radius: 0; outline: 0; font-size: 14px; }
.pdp-avvisa-form input::placeholder { color: var(--pietra); }
.pdp-avvisa-form button { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; padding: 11px 0; }

/* La modella: altezza, misure e taglia che indossa, sotto la fila delle taglie (27/10; dal 3/11 non c'è più il cassetto) */
.pdp-modella { margin-top: 10px; font-size: 13px; line-height: 1.6; letter-spacing: .02em; color: var(--bruno); }
@media (min-width: 760px) {
  .pdp-info .pdp-modella:not([hidden]) + .pdp-add { margin-top: 26px; }
  /* il pannello con i blocchi nuovi sta in una schermata anche a 1536 × 864 (3/11): un po' meno aria sopra e sotto */
  .pdp-info { padding-top: 34px; padding-bottom: 36px; }
  .pdp-righe { margin-top: 22px; }
  /* Schermi larghi (3/11, «da mobile è 1000x da desktop», Andrea): il pannello resta largo al massimo 560 px, come a 1440, e da circa
     1520 px si mette al centro della sua colonna invece di stirarsi fino a 680 px vicino alle foto; fino a 1440 non cambia niente (9vw) */
  .pdp-info-in { max-width: 560px; }
  .pdp-info { padding-left: max(9vw, calc((100% - 560px) / 2)); }
}

/* Cassetto da destra (dettagli), come Cucinelli: largo quanto la colonna delle foto, velo sul resto */
.pdp-cassetto { position: fixed; inset: 0; z-index: 82; }
.pdp-cassetto-velo {
  position: absolute; inset: 0; background: rgba(24, 19, 17, .42);
  opacity: 0; transition: opacity .5s var(--ease); cursor: pointer;
}
.pdp-cassetto-in {
  position: absolute; top: 0; right: 0; bottom: 0; width: max(45%, 420px); max-width: 100%;
  display: flex; flex-direction: column; background: var(--avorio); color: var(--inchiostro); border-left: 1px solid var(--linea);
  transform: translateX(100%); transition: transform .5s var(--ease);
}
.pdp-cassetto.is-aperto .pdp-cassetto-velo { opacity: 1; }
.pdp-cassetto.is-aperto .pdp-cassetto-in { transform: none; }
.pdp-cassetto-testa {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 28px clamp(20px, 3vw, 44px) 24px;
}
.pdp-cassetto-testa h2 { font-size: 16px; line-height: 1.3; letter-spacing: .04em; }
.pdp-cassetto-x { display: grid; place-items: center; flex: none; width: 34px; height: 34px; margin-right: -9px; }
.pdp-cassetto-x .ico { width: 18px; height: 18px; }
.pdp-cassetto-corpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px clamp(20px, 3vw, 44px) 40px; }

/* Dettagli: schede in alto (Dettagli, Composizione e cura, Spedizioni e resi), una alla volta */
.pdp-schede { display: flex; flex-wrap: wrap; gap: 8px clamp(18px, 2.2vw, 34px); }
.pdp-scheda { position: relative; padding: 6px 0; font-size: 14px; letter-spacing: .03em; color: var(--pietra); transition: color .3s var(--ease); }
.pdp-scheda::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--inchiostro);
  transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
}
.pdp-scheda:hover, .pdp-scheda[aria-selected="true"] { color: var(--inchiostro); }
.pdp-scheda[aria-selected="true"]::after { transform: scaleX(1); }
.pdp-pannello h3 { font-size: 18px; line-height: 1.3; letter-spacing: .03em; margin: 22px 0 16px; }
.pdp-pannello .pdp-pannello-made { color: var(--pietra); letter-spacing: .03em; }   /* «Made in Italy», la prima riga dei Dettagli (29/10) */
.pdp-pannello .pdp-pannello-made + p { margin-top: 6px; }
.pdp-pannello p { font-size: 14px; line-height: 1.65; color: var(--bruno); max-width: 54ch; }
.pdp-pannello p + p, .pdp-pannello .pdp-sped + p { margin-top: 14px; }
.pdp-pannello .pdp-pannello-sotto { color: var(--inchiostro); }
.pdp-pannello .pdp-pannello-dato { color: var(--inchiostro); font-size: 13px; }
.pdp-pannello .pdp-pannello-dato + .pdp-pannello-dato { margin-top: 4px; }
.pdp-pannello [data-pdp-dettagli] + .pdp-pannello-dato { margin-top: 22px; }

/* Spedizione: il paese scelto in evidenza, i tempi sotto */
.pdp-sped { font-size: 14px; line-height: 1.6; color: var(--bruno); }
.pdp-sped-riga button { color: var(--pietra); padding: 2px 0; border-bottom: 1px solid transparent; transition: color .3s var(--ease), border-color .3s var(--ease); }
.pdp-sped-riga button:hover { color: var(--inchiostro); }
.pdp-sped-riga button[aria-pressed="true"] { color: var(--inchiostro); border-bottom-color: var(--inchiostro); }
.pdp-sped-tempi { margin-top: 4px; color: var(--pietra); }

/* Sezioni sotto la scheda --------------------------------------------------- */
.pdp-sez { padding-top: clamp(64px, 7vw, 110px); }
.pdp-sez-testa { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-bottom: clamp(26px, 2.6vw, 40px); padding: 0 var(--gutter); }
.pdp-sez-testa .titolo { --tr: var(--t-track); font-size: var(--t-sezione); line-height: 1.2; text-align: center; padding-left: var(--tr); }   /* titoli di sezione sussurrati (29/10) */

/* Completa il look: tre tessere staccate come quelle di categoria (26/10 notte), sotto ognuna taglie e «Aggiungi» */
.pdp-completa-griglia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 0 var(--gutter); background: var(--avorio); }
.pdp-capo { display: flex; flex-direction: column; min-width: 0; }
.pdp-capo-azioni {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 20px;
  padding: 16px clamp(16px, 1.6vw, 26px) 18px; border-bottom: 1px solid var(--linea);
}
.taglie--capo { margin: 0; justify-content: flex-start; gap: 2px 8px; flex-wrap: wrap; }
.taglie--capo .taglia { min-width: 26px; font-size: 13px; padding: 7px 2px; }
.pdp-capo-add {
  position: relative; flex: none; padding: 8px 0; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; line-height: 1;
}
.pdp-capo-add::after {
  content: ""; position: absolute; left: 0; right: .2em; bottom: 2px; height: 1px; background: currentColor;
  transform-origin: left; transition: transform .4s var(--ease);
}
.pdp-capo-add:hover::after { transform: scaleX(.4); }

/* Ti potrebbe piacere: tessere staccate come quelle di categoria (4 desktop, 2 mobile); tre capi (profumi) → riga da tre */
.pdp-piacere-griglia { gap: 16px; padding: 0 var(--gutter) clamp(48px, 5vw, 80px); }
.pdp-piacere-griglia--tre { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Lightbox ------------------------------------------------------------------- */
.pdp-lb {
  position: fixed; inset: 0; z-index: 85; background: var(--avorio); color: var(--inchiostro);
  opacity: 0; transition: opacity .4s var(--ease);
}
.pdp-lb.is-aperto { opacity: 1; }
.pdp-lb-scena { position: absolute; inset: 0; display: grid; place-items: center; }
.pdp-lb-scena .pdp-foto {
  width: min(100vw, calc(100vh * 2 / 3)); width: min(100vw, calc(100dvh * 2 / 3));
  height: auto; aspect-ratio: 2 / 3; animation: lb-entra .45s var(--ease);
}
@keyframes lb-entra { from { opacity: 0; } }
.pdp-lb-chiudi { position: absolute; z-index: 3; top: 26px; right: var(--gutter); }
.pdp-lb-conta { position: absolute; z-index: 3; left: var(--gutter); bottom: 26px; color: var(--pietra); }
.pdp-lb-freccia {
  position: absolute; z-index: 3; top: 50%; width: 64px; height: 64px; margin-top: -32px;
  display: grid; place-items: center; color: var(--inchiostro);
}
.pdp-lb-freccia::after {
  content: ""; width: 30px; height: 12px; background: currentColor;
  -webkit-mask: var(--freccia) center / contain no-repeat; mask: var(--freccia) center / contain no-repeat;
  transition: transform .3s var(--ease);
}
.pdp-lb-prec { left: calc(var(--gutter) - 17px); }
.pdp-lb-prec::after { transform: scaleX(-1); }
.pdp-lb-succ { right: calc(var(--gutter) - 17px); }
.pdp-lb-prec:hover::after { transform: scaleX(-1) translateX(4px); }
.pdp-lb-succ:hover::after { transform: translateX(4px); }

/* Schermi bassi (1280 × 720): il pannello fermo sta in una schermata, stessi blocchi con meno aria (29/10; rifatto il 3/11 coi blocchi nuovi) */
@media (min-width: 760px) and (max-height: 820px) {
  .pdp-info { padding-top: 20px; padding-bottom: 20px; }
  .pdp-testa { margin-top: 22px; }
  .pdp-colori { margin-top: 20px; }
  .pdp-colori .swatches { margin-top: 6px; }
  .pdp-taglie { margin-top: 14px; }
  .pdp-taglie-fila { margin-top: 0; }
  .pdp-modella { margin-top: 4px; font-size: 12.5px; line-height: 1.5; }
  .pdp-info .pdp-add, .pdp-info .pdp-modella:not([hidden]) + .pdp-add { margin-top: 18px; }
  .pdp-righe { margin-top: 12px; }
  .pdp-righe .pdp-riga { padding: 5px 0; }
  .pdp-consiglio { margin-top: 14px; }
  .pdp-filato { margin-top: 16px; }
  .pdp-filato-foto { width: 56px; height: 56px; }
}

/* Tablet e mobile ------------------------------------------------------------ */
@media (max-width: 999px) {
  .pdp-lb-chiudi { top: 20px; }
  .pdp-lb-conta { bottom: 22px; }
  .pdp-lb-freccia { top: auto; bottom: 6px; margin-top: 0; width: 56px; height: 56px; }
  .pdp-lb-prec { left: auto; right: calc(var(--gutter) + 44px); }
  .pdp-lb-succ { right: calc(var(--gutter) - 14px); }
}
@media (max-width: 759px) {
  .pagina-prodotto .footer { padding-bottom: calc(28px + 76px + env(safe-area-inset-bottom)); }   /* spazio per la barra fissa */
  /* Telefono come prima (nome, bottone, colore, taglia, dettagli): la fila delle taglie con la guida al posto della riga col cassetto,
     poi i dettagli, la frase con mail e boutique e in fondo «Il filato» (3/11; in fondo dal 3/11 sera, Gianluca: «portalo in fondo») */
  .pdp-testa { margin-top: 18px; }
  .pdp-info .pdp-add { margin-top: 20px; }
  .pdp-colori { margin-top: 28px; }
  .pdp-taglie { order: 5; margin-top: 24px; }
  .pdp-righe { order: 7; }
  .pdp-consiglio { order: 8; margin-top: 28px; }
  .pdp-filato { order: 9; margin-top: 28px; gap: 16px; }
  .pdp-filato-foto { width: 56px; height: 56px; }
  .pdp-filato-racconto { letter-spacing: .01em; }
  /* La barra fissa: nome e prezzo a sinistra, il bottone a destra (29/10) */
  .pdp-barra { display: flex; align-items: center; gap: 16px; }
  .pdp-barra-capo { flex: 1; min-width: 0; }
  .pdp-barra-nome, .pdp-barra-prezzo { font-size: 13px; line-height: 1.35; letter-spacing: .03em; }
  .pdp-barra-nome { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .pdp-barra-prezzo { color: var(--bruno); }
  .pdp-barra .btn-pieno { flex: none; width: auto; min-width: 46%; min-height: 46px; padding: 0 24px; }
  .pdp-cassetto-in { width: 100%; border-left: 0; }
  .pdp-cassetto-testa { padding-top: 22px; padding-bottom: 18px; }
  .pdp-info .pdp-modella { order: 5; margin-top: 8px; }    /* subito sotto la fila delle taglie */
  /* Completa il look: una riga che scorre, tessere a filo */
  .pdp-completa-griglia {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74%;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .pdp-completa-griglia::-webkit-scrollbar { display: none; }
  .pdp-capo { scroll-snap-align: start; }
  .pdp-completa-griglia { gap: 8px; padding: 0 8px; }
  .pdp-piacere-griglia { gap: 8px; padding: 0 8px 40px; }
  .pdp-completa-griglia { scroll-padding: 0 8px; }
  /* nella riga che scorre il dito sposta la riga, non le foto della tessera (come «In evidenza» in home, 29/10) */
  .pdp-completa-griglia .tile-scorri { overflow-x: hidden; overscroll-behavior-x: auto; }
  .pdp-completa-griglia .tile-riga { display: none; }
  .pdp-piacere-griglia--tre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pdp-piacere-griglia--tre > :first-child { grid-column: 1 / -1; }
  .pdp-piacere-griglia--tre > :first-child .tile-foto { aspect-ratio: 4 / 3; }   /* dal 3/11 la proporzione sta sulla foto, la didascalia è sotto */
  .pdp-capo-azioni { flex-direction: column; align-items: flex-start; padding: 14px 16px 16px; }
  .taglie--capo { gap: 2px 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .pdp-lb, .pdp-lb-scena .pdp-foto, .pdp-cassetto-velo, .pdp-cassetto-in { transition: none; animation: none; }
  .pdp-taglie.is-richiesta .pdp-taglia:not([aria-checked="true"])::after { animation: none; opacity: .35; }
}