/* Armadio: si appoggia a sito/style.css (caverzasio.ch) e aggiunge solo il necessario.
   Stessa regola del sito: un corpo di testo, gerarchia data da bianco e grigio. */

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

/* ---------- comandi: testo semplice, attivo bianco e il resto grigio ---------- */
#comandi { margin-top: calc(var(--line) * 2); }
#comandi p { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--gap); row-gap: 4px; }
#salva,
#comandi [aria-pressed="false"] { opacity: var(--grey); transition: opacity .22s; }
#salva:hover,
#comandi [aria-pressed="false"]:hover { opacity: 1; }

/* tendine come testo del sito, con la freccia giù del sito */
.tendina { position: relative; display: inline-flex; align-items: baseline; }
.tendina .va { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tendina select {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  letter-spacing: inherit;
  color: var(--fg);
  background: none;
  border: 0;
  padding: 0 12px 0 0;
  cursor: pointer;
}
.tendina select:focus-visible { outline: 1px solid var(--fg); outline-offset: 2px; }
.tendina select option { color: #000; }
.tendina::after {
  content: "";
  position: absolute;
  right: 0;
  width: 7px;
  height: 9px;
  top: 2px;
  background: currentColor;
  -webkit-mask: var(--icon-arrow-down) center / contain no-repeat;
  mask: var(--icon-arrow-down) center / contain no-repeat;
  pointer-events: none;
}
.tendina::before { content: "|"; margin-right: var(--gap); opacity: var(--grey); }
#genera::after { content: " ↻"; }
#conteggio { opacity: var(--grey); }

/* ---------- l'outfit: i capi galleggiano senza riquadri ---------- */
#palco {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  grid-template-areas:
    "capospalla sopra  maglia"
    "calze      sotto  scarpe";
  column-gap: var(--gap);
  margin-top: 64px;
}
#palco > figure { position: relative; animation: fluttua var(--durata, 7s) ease-in-out var(--ritardo, 0s) infinite; }
#palco > [data-slot="capospalla"] { grid-area: capospalla; align-self: center; }
#palco > [data-slot="sopra"] { grid-area: sopra; z-index: 1; }
#palco > [data-slot="maglia"] { grid-area: maglia; align-self: center; }
/* pantaloni subito sotto la camicia, appena sovrapposti come se fosse indossata */
#palco > [data-slot="sotto"] { grid-area: sotto; z-index: 2; margin-top: -22%; }
#palco > [data-slot="calze"] { grid-area: calze; align-self: end; }
#palco > [data-slot="scarpe"] { grid-area: scarpe; align-self: end; z-index: 3; }
#palco svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 24px 22px rgba(0, 0, 0, .55)); }
#palco > [data-slot="calze"] svg { width: 80%; margin-left: auto; }

#palco > .vuoto { color: rgba(255, 255, 255, .22); }
#palco > .vuoto svg { filter: none; }
#palco figcaption { margin-top: 8px; text-align: center; color: var(--fg); opacity: var(--grey); }

/* etichetta che segue il mouse: su un ritaglio del fondo del sito, così si legge anche sopra le righe */
#etichetta {
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  z-index: 95;
  pointer-events: none;
  white-space: nowrap;
  padding: 4px 6px;
  background: var(--bg);
}
#etichetta span { display: block; opacity: var(--grey-text); }
#palco > figure[data-id] { cursor: default; }

@keyframes fluttua {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-9px) rotate(calc(var(--giro, 1) * 1.2deg)); }
}
@media (prefers-reduced-motion: reduce) {
  #palco > figure { animation: none; }
}

/* ---------- elenco dei capi indossati, come l'archivio ---------- */
#pezzi { margin-top: 64px; display: flex; flex-direction: column; gap: 4px; }
#pezzi li {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  column-gap: var(--gap);
}
#pezzi span:first-child, #pezzi span:last-child { opacity: var(--grey); }

/* ---------- outfit salvati ---------- */
/* outfit salvati: elenco verticale sotto i capi, uno per riga (il più recente in alto) */
#salvati { margin-top: 40px; }
#salvati[hidden] { display: none; }
#salvati h2 { opacity: var(--grey); margin-bottom: var(--line); }
#salvati ol { display: flex; flex-direction: column; gap: 12px; }
#salvati li { display: flex; align-items: center; gap: var(--gap); }
#salvati [data-azione="indossa"] { display: flex; align-items: end; gap: 4px; transition: opacity .22s; }
#salvati [data-azione="indossa"]:hover { opacity: .7; }
#salvati [data-azione="indossa"] svg { width: auto; height: 44px; }
#salvati [data-azione="togli"] { opacity: var(--grey); transition: opacity .22s; line-height: 1; }
#salvati [data-azione="togli"]:hover { opacity: 1; }

/* ---------- catalogo: griglia come photography, nome bianco e marca grigia ---------- */
#vista-catalogo h2 { margin: 64px 0 var(--line); opacity: var(--grey); }
#vista-catalogo ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  gap: 48px var(--gap);
}
#vista-catalogo li { display: flex; flex-direction: column; }
#vista-catalogo svg { width: 100%; height: auto; aspect-ratio: 4 / 5; margin-bottom: 8px; filter: drop-shadow(0 16px 16px rgba(0, 0, 0, .5)); }
#vista-catalogo span + span { opacity: var(--grey); }

@media (max-width: 767px) {
  /* sul telefono il nome del sito è fisso in alto: l'intro parte sotto */
  main > div:first-child { margin-top: 48px; }
  #palco { margin-top: 48px; }
  #vista-catalogo ul { grid-template-columns: 1fr 1fr; }
}