/* =============================================================================
   PUROTATTO — scheda prodotto (prodotto.html): percorso, taglie ed esaurite,
   «Avvisami», spedizione per paese, foto indossate su sabbia, 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-media, .pdp-galleria, .pdp-info-in { transition: opacity .5s var(--ease); }
.pdp-attesa .pdp-media > *, .pdp-attesa .pdp-galleria, .pdp-attesa .pdp-info-in { opacity: 0; }

/* Colonna fissa con una foto al posto del video */
.pdp-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.pdp-media--ind { background: var(--sabbia); isolation: isolate; }
.pdp-media--ind > img { mix-blend-mode: multiply; object-position: 50% 0; }
.pdp-media--frag > img { object-position: 50% 50%; }

/* 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-galleria--chiara .pdp-foto:first-child::before { display: none; }

/* Pagina chiara (foto su sabbia): header e titolo in inchiostro, niente velature scure */
.pdp-chiaro .hdr:not(.is-scrolled) { color: var(--inchiostro); }
.pdp-chiaro .pdp-media::before, .pdp-chiaro .pdp-media::after { display: none; }
.pdp-chiaro .pdp-media { color: var(--inchiostro); }

@media (min-width: 1000px) {
  .pdp-centro-chiaro .hdr:not(.is-scrolled) .hdr-logo { color: var(--inchiostro); }
}
.pdp-hero-titolo.is-lungo { font-size: clamp(28px, 8.2vw, 52px); }

/* 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 titolo */
.pdp-briciole { font-size: 11px; letter-spacing: .16em; }
.pdp-briciole ol { display: flex; flex-wrap: wrap; gap: 6px 0; color: var(--pietra); }
.pdp-briciole li { display: flex; align-items: center; }
.pdp-briciole li:not(:last-child)::after { content: "/"; margin: 0 .8em; color: var(--pietra); }
.pdp-briciole a { transition: color .3s var(--ease); }
.pdp-briciole a:hover { color: var(--inchiostro); }
.pdp-briciole [aria-current] { color: var(--bruno); }

/* Taglie: testa con la taglia scelta e la guida, 46 esaurita */
.pdp-taglie { margin-top: 30px; }
.pdp-taglie-testa { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.pdp-taglia-stato { color: var(--pietra); }
.pdp-taglia-stato.is-esaurita { color: var(--bruno); }
.pdp-guida {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; line-height: 1.2;
  padding-bottom: 3px; border-bottom: 1px solid currentColor; color: var(--inchiostro); white-space: nowrap;
  transition: color .3s var(--ease);
}
.pdp-guida:hover { color: var(--bruno); }
.pdp-taglie .taglie { margin-top: 14px; }
.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; }

/* Spedizione: il paese scelto in evidenza, i tempi sotto */
.pdp-sped { margin-top: 22px; font-size: 13px; 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 { font-size: clamp(24px, 2.2vw, 32px); text-align: center; padding-left: .17em; }

/* Completa il look: tre capi a filo, sotto ognuno taglie e «Aggiungi» */
.pdp-completa-griglia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; 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: griglia a filo (4 desktop, 2 mobile); tre capi (profumi) → riga da tre */
.pdp-piacere-griglia--tre { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pdp-piacere .tile--cerca .tile-cap { gap: 5px; }

/* 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);
}
.pdp-lb-scena .pdp-foto::before { display: none; }
@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); }

/* Tablet e mobile ------------------------------------------------------------ */
@media (max-width: 999px) {
  .pdp-briciole { margin-bottom: 18px; }
  .pdp-chiaro .pdp-hero-titolo { color: var(--inchiostro); }
  .pagina-prodotto .footer { padding-bottom: calc(28px + 76px + env(safe-area-inset-bottom)); }   /* spazio per la barra fissa */
  .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) {
  /* 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-piacere-griglia--tre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pdp-piacere-griglia--tre > :first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
  .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 { transition: none; animation: none; }
}