/* Proposta C · il provino. Il tavolo luminoso (avorio), la pellicola (nero), la matita grassa del
   fotografo (bordeaux) per cerchiare i look scelti. Jost: il geometrico dei cataloghi anni Settanta. */
.pc {
  --fondo: var(--avorio); --testo: var(--nero); --tenue: rgba(16, 16, 16, .74); --filo: rgba(16, 16, 16, .16);
  --titoli: 'Jost', var(--sans); --sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --sipario: var(--nero); --sipario-segno: var(--avorio);
  --fondo-piede: var(--nero); --testo-piede: var(--avorio);
  --matita: var(--bordeaux);
}
.pc h1, .pc h2 { font-weight: 600; letter-spacing: -.02em; }
.pc .testata { border-bottom: 1px solid var(--filo); }

/* ---------- copertina ---------- */
.c-cop { min-height: 100svh; padding: calc(var(--testata) + 2rem) var(--margine) 2.5rem; display: grid; grid-template-columns: 1fr auto; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.c-cop__testo { display: grid; gap: 1.4rem; justify-items: start; }
.c-cop__testo h1 { font-size: var(--t-4); line-height: .98; max-width: 11ch; }
.c-cop__testo p { font-size: var(--t-1); color: var(--tenue); max-width: 40ch; }
.c-cop__foto { position: relative; height: calc(100svh - var(--testata) - 5rem); max-height: 1000px; aspect-ratio: 4160 / 5750; cursor: zoom-in; }
.c-cop__foto img { width: 100%; height: 100%; object-fit: cover; box-shadow: 0 30px 60px -32px rgba(16, 16, 16, .55); }

/* ---------- il lentino ---------- */
.c-lente { position: absolute; left: 0; top: 0; width: 180px; height: 180px; border-radius: 50%; pointer-events: none; z-index: 5;
  border: 3px solid var(--nero); box-shadow: 0 0 0 2px var(--avorio), 0 18px 40px -12px rgba(16, 16, 16, .6); background: var(--avorio-2) no-repeat;
  opacity: 0; transform: translate(-50%, -50%) scale(.85); transition: opacity .25s, transform .35s var(--curva-uscita); }
.c-lente.su { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.c-lente--fissa { position: fixed; }

/* ---------- il provino ---------- */
.c-provino { padding: clamp(2rem, 5vw, 4rem) 0; }
.c-provino__guida { padding: 0 var(--margine) 1rem; font-size: var(--t--1); letter-spacing: .06em; text-transform: uppercase; color: var(--tenue); }
.c-provino__strisce { display: grid; gap: 12px; --fh: clamp(150px, 22vw, 230px); }
.striscia { position: relative; display: flex; gap: 10px; width: max-content; padding: 30px 10px; }
/* i fori della pellicola sopra e sotto: sfondo «local», così scorrono con la striscia */
.striscia { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='12'%3E%3Crect x='6' y='1' width='10' height='10' rx='2' fill='%23F3EFE8' fill-opacity='.9'/%3E%3C/svg%3E") 0 6px / 22px 12px repeat-x local, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='12'%3E%3Crect x='6' y='1' width='10' height='10' rx='2' fill='%23F3EFE8' fill-opacity='.9'/%3E%3C/svg%3E") 0 calc(100% - 6px) / 22px 12px repeat-x local, var(--nero); }
.fot { position: relative; flex: none; }
.fot__bottone { display: block; position: relative; padding: 0; border: 0; background: none; cursor: zoom-in; height: var(--fh); }
.fot__bottone img { height: 100%; width: auto; }
.fot__bordo { position: absolute; left: 4px; bottom: -22px; font-size: 11px; line-height: 1; letter-spacing: .14em; color: #E8C9A0; white-space: nowrap; font-weight: 500; }
.fot__bordo b { color: var(--avorio); font-weight: 600; margin-left: .4em; }
.fot__segno { position: absolute; inset: -10% -14%; width: 128%; height: 120%; pointer-events: none; overflow: visible; }
.fot__segno path { fill: none; stroke: var(--matita); stroke-width: 3.2; stroke-linecap: round; opacity: 0;
  stroke-dasharray: 1 2; stroke-dashoffset: 1; transition: stroke-dashoffset .9s cubic-bezier(.65, 0, .35, 1), opacity .1s; filter: drop-shadow(0 0 1px rgba(95, 11, 24, .4)); }
.scelto .fot__segno path, .c-vista.scelto .fot__segno path { stroke-dashoffset: 0; opacity: 1; }
.fot__bottone:focus-visible { outline: 3px solid var(--avorio); outline-offset: 3px; }
.scelto .fot__bordo b { color: var(--blush); }

/* senza movimento o sul telefono: tre strisce che scorrono col dito */
.c-provino__strisce { overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
.c-provino__strisce > .striscia { scroll-snap-align: start; }
@media (max-width: 900px) {
  .c-provino__strisce { overflow: visible; --fh: 150px; }
  .striscia { width: auto; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  .striscia::-webkit-scrollbar { display: none; }
  .fot { scroll-snap-align: start; }
}
/* con il movimento, da 901 px: la sezione si ferma e le strisce scorrono in versi opposti */
@media (min-width: 901px) {
  .moto-attivo .c-provino { height: 100svh; padding: calc(var(--testata) + 1rem) 0 0; overflow: hidden; }
  .moto-attivo .c-provino__strisce { overflow: visible; --fh: calc((100svh - var(--testata) - 4.5rem - 3 * 60px - 24px) / 3); }
}

/* ---------- la selezione ---------- */
.c-sel { padding: clamp(4rem, 9vw, 7rem) var(--margine); display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.c-sel h2 { font-size: var(--t-4); margin-bottom: 1.5rem; }
.c-sel__vuota { color: var(--tenue); font-size: var(--t-1); }
.c-sel__lista { display: flex; flex-wrap: wrap; gap: .75rem; }
.c-sel__lista li { display: grid; grid-template-columns: 56px auto; gap: .2rem .75rem; align-items: center; padding: .4rem .6rem .4rem .4rem; background: #fff; box-shadow: 0 10px 24px -18px rgba(16, 16, 16, .5); }
.c-sel__lista img { width: 56px; height: 78px; object-fit: cover; grid-row: span 2; }
.c-sel__lista b { font-weight: 600; letter-spacing: .06em; }
.c-sel__lista button { min-height: 44px; padding: 0; background: none; border: 0; text-align: left; text-decoration: underline; text-underline-offset: .25em; cursor: pointer; color: var(--tenue); font-size: var(--t--1); }
.c-sel__azione { display: grid; gap: 1.2rem; justify-items: start; padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--nero); color: var(--avorio); }
.c-sel__azione p { font-size: var(--t-1); }
@media (max-width: 900px) { .c-sel { grid-template-columns: 1fr; } }

/* il vassoio: compare quando hai cerchiato qualcosa */
.c-vassoio { position: fixed; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 1000; translate: -50% 0; display: flex; align-items: center; gap: 1rem;
  padding: .5rem .5rem .5rem 1.25rem; background: var(--nero); color: var(--avorio); box-shadow: 0 18px 40px -14px rgba(16, 16, 16, .6); white-space: nowrap;
  transition: opacity .3s, translate .4s var(--curva-uscita); }
.c-vassoio[hidden] { display: none; }
.c-vassoio.via { opacity: 0; translate: -50% 140%; pointer-events: none; }
.c-vassoio b { color: var(--blush); font-size: 1.15em; }
.c-vassoio .btn { min-height: 44px; }

/* ---------- il look aperto ---------- */
.c-vista { padding: 0; border: 0; width: 100vw; height: 100svh; max-width: none; max-height: none; background: var(--avorio); color: var(--nero); }
.c-vista::backdrop { background: rgba(16, 16, 16, .7); }
.c-vista__in { height: 100%; display: grid; grid-template-columns: auto minmax(260px, 360px); gap: clamp(1.5rem, 4vw, 4rem); justify-content: center; align-items: center; padding: 2rem var(--margine); }
.c-vista__foto { position: relative; height: calc(100svh - 4rem); aspect-ratio: 4160 / 5750; cursor: zoom-in; touch-action: none; }
.c-vista__foto img { width: 100%; height: 100%; object-fit: cover; }
.c-vista__foto .fot__segno { inset: -4% -6%; width: 112%; height: 108%; }
.c-vista__lato { display: grid; gap: 1rem; justify-items: start; }
.c-vista__codice { font-family: var(--titoli); font-size: var(--t-3); font-weight: 600; line-height: 1; }
.c-vista__alt { color: var(--tenue); }
.c-vista__giro { display: flex; gap: 1.5rem; }
.c-vista__guida { font-size: var(--t--1); color: var(--tenue); }
.c-vista [data-cerchia][aria-pressed="true"] { background: var(--bordeaux); }
@media (max-width: 900px) {
  .c-vista__in { grid-template-columns: 1fr; align-content: start; overflow-y: auto; padding: 1rem var(--margine) 2rem; gap: 1rem; justify-items: center; }
  .c-vista__foto { height: auto; width: min(100%, calc(62svh * .7235)); }
  .c-vista__lato { justify-self: stretch; }
  .c-vista__codice { font-size: var(--t-2); }
}
@media (max-width: 900px) {
  .c-cop { grid-template-columns: 1fr; padding-top: calc(var(--testata) + 1.25rem); }
  .c-cop__foto { height: auto; width: 100%; order: -1; max-height: 70svh; justify-self: center; width: min(100%, calc(70svh * .7235)); }
  .c-cop__testo h1 { font-size: clamp(2.1rem, 9.5vw, 3.2rem); }
}
/* «Chiudi» sempre a portata, anche quando la scheda del look scorre (telefoni piccoli, orizzontale) */
.c-vista__x { position: fixed; top: max(.5rem, env(safe-area-inset-top)); right: max(.5rem, env(safe-area-inset-right)); z-index: 3; }
.c-vista__x button { min-width: 44px; min-height: 44px; padding: .4rem .9rem; border: 0; background: var(--nero); color: var(--avorio); font-weight: 600; cursor: pointer; }
@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {
  .c-vista__in { grid-template-columns: auto 1fr; align-items: center; padding: 1rem var(--margine); }
  .c-vista__foto { height: calc(100svh - 2rem); width: auto; }
  .c-vista__lato { gap: .6rem; }
}