/* ============================================================
   VELUM — components.css
   Header, footer, buttons, cards, placeholders, forms, cart.
   ============================================================ */

/* ---- Header --------------------------------------------- */
/* Trasparente e senza backdrop-filter: l'header galleggia sopra i
   campi di colore e si inverte da solo in mix-blend-mode (vedi
   motion.css). Un fondo o una sfocatura romperebbero il blend. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
}

/* Tre elementi, non cinque: Menu a sinistra, wordmark al centro,
   carrello a destra. Le colonne laterali hanno la stessa larghezza, o il
   wordmark non starebbe davvero in mezzo. */
.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  min-height: 5rem;
}
.site-header__inner .wordmark { justify-self: center; }
.site-header__cart {
  justify-self: end;
  font-size: var(--fs-small);
  position: relative;
  padding-block: 0.5rem;
}
/* Una linea che si tira da sinistra. Stessa idea del menu, dove i due
   trattini si avvicinano: un cenno, non un effetto. */
.site-header__cart::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.15rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.site-header__cart:hover::after,
.site-header__cart:focus-visible::after { transform: scaleX(1); }
.site-header__cart .count { font-variant-numeric: tabular-nums; }
.site-header__cart[data-empty="true"] .count { display: none; }

/* Il numero segna il colpo quando cambia: mezzo secondo di scatto, e
   basta a far capire dove è finito quello che si è appena scelto. */
@keyframes cart-bump {
  0%   { transform: none; }
  35%  { transform: translateY(-0.2rem) scale(1.18); }
  100% { transform: none; }
}
.site-header__cart[data-bump="true"] .count {
  display: inline-block;
  animation: cart-bump 0.5s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .site-header__cart::after { transition: none; }
  .site-header__cart[data-bump="true"] .count { animation: none; }
}

/* Il bottone del menu: due trattini e la parola. I trattini si
   avvicinano all'hover — un cenno, non un'animazione. */
.menu-toggle {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: var(--fs-small);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  padding-block: 0.5rem;
}
.menu-toggle__bars {
  display: grid;
  gap: 0.3rem;
  width: 1.25rem;
  transition: gap 0.4s var(--ease);
}
.menu-toggle__bars i {
  display: block;
  height: 1px;
  background: currentColor;
}
.menu-toggle:hover .menu-toggle__bars { gap: 0.15rem; }
@media (max-width: 35em) {
  .menu-toggle__word { display: none; }
}

/* Wordmark: lowercase, extended tracking, Fraunces, no icon beside it */
.wordmark {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: var(--track-wide);
  text-transform: lowercase;
  padding-block: 0.25rem;
}

/* ---- Buttons -------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.25rem;
  padding: 0 1.75rem;
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  transition: background 0.4s var(--ease), color 0.4s var(--ease),
              border-color 0.4s var(--ease), opacity 0.3s var(--ease);
}
.btn:hover { background: var(--ink); color: var(--bone); }

/* The single Clay element of a view. One per screen. */
.btn--accent {
  background: var(--clay);
  border-color: var(--clay);
  color: var(--bone);
}
.btn--accent:hover {
  background: color-mix(in srgb, var(--clay) 84%, var(--ink));
  border-color: color-mix(in srgb, var(--clay) 84%, var(--ink));
  color: var(--bone);
}

.btn--quiet {
  border-color: var(--stone);
  min-height: 2.75rem;
  padding-inline: 1.25rem;
}
.btn--full { width: 100%; }
.btn[disabled] { opacity: 0.4; pointer-events: none; }

/* Text link with a rule under it */
.link {
  display: inline-block;
  font-size: var(--fs-small);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: 500;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--stone);
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease);
}
.link:hover { border-color: var(--ink); }

/* ---- Solid-tint placeholder ------------------------------
   No photography exists for this brand. Rather than fake it,
   every image slot is a flat panel in a palette tint, labelled
   with the shot it stands in for. Swap .ph for <img> later.
   Clay never appears here: it is reserved for one CTA. */
.ph {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--bone-deep);
  color: var(--ink);
  text-align: center;
  padding: 1.5rem;
  isolation: isolate;
}
.ph::after {
  /* the single soft directional shadow the brief asks of the still life */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
              rgba(255, 255, 255, 0.22) 0%,
              rgba(255, 255, 255, 0) 42%,
              rgba(27, 26, 23, 0.07) 100%);
  pointer-events: none;
}
.ph__name {
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  max-width: 22ch;
}
.ph__view {
  font-size: var(--fs-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  opacity: 0.55;
}

.ph[data-tint="bone"]  { background: var(--bone-deep); }
.ph[data-tint="stone"] { background: var(--stone-soft); }
.ph[data-tint="depth"] { background: var(--depth); color: var(--bone); }
.ph[data-tint="ink"]   { background: var(--ink-soft); color: var(--bone); }

.ph--square { aspect-ratio: 1 / 1; }
.ph--tall   { aspect-ratio: 2 / 3; }
.ph--wide   { aspect-ratio: 16 / 9; }
.ph--macro  { aspect-ratio: 4 / 5; }

@media (max-width: 35em) {
  .ph--wide { aspect-ratio: 4 / 3; }
}

/* ---- Product card --------------------------------------- */
.card { display: block; }

/* Il pannello dell'immagine è .flip (più in basso): riquadro, sfondo
   e margine vivono lì. Qui resta lo zoom del segnaposto in tinta
   unita, che è la via di riserva quando un capo non ha fotografie. */
.card:hover .ph { transform: scale(1.06); }

.card__row {
  display: flex;   /* è uno <span>: il display glielo diamo qui */
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

/* Il nome non si sottolinea: ruota su se stesso dentro una
   feritoia, come tutto il resto del sito. La seconda copia è
   nascosta agli screen reader — è tipografia, non contenuto. */
.card__name {
  font-size: var(--fs-body);
  font-weight: 400;
  letter-spacing: -0.005em;
  display: block;
  overflow: hidden;
  /* alta esattamente una riga: la seconda copia resta fuori dalla
     feritoia finché l'hover non la fa salire */
  line-height: 1.45em;
  height: 1.45em;
}
.card__name-in {
  display: block;
  transition: transform 0.7s var(--ease);
}
.card__name-in i {
  display: block;
  font-style: normal;
}
.card:hover .card__name-in { transform: translateY(-50%); }
.card__price { font-size: var(--fs-body); font-variant-numeric: tabular-nums; }
.card__meta {
  display: block;
  margin-top: 0.35rem;
  font-size: var(--fs-small);
  color: var(--stone);
}

.grid-products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--grid-gap) * 1.4) var(--grid-gap);
}
@media (max-width: 56.25em) { .grid-products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 28.75em) { .grid-products { grid-template-columns: minmax(0, 1fr); } }

/* ---- Colour swatches ------------------------------------
   Filled circles, name in an overlay on hover. Never a dropdown. */
.swatches { display: flex; gap: 0.75rem; align-items: center; }
.swatch {
  position: relative;
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--stone) 80%, transparent);
  box-shadow: inset 0 0 0 3px var(--bone);
  background: var(--swatch, var(--stone));
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
.swatch:hover { transform: translateY(-1px); }
.swatch[aria-pressed="true"] {
  box-shadow: inset 0 0 0 3px var(--bone), 0 0 0 1px var(--ink);
  border-color: var(--ink);
}
.swatch__name {
  position: absolute;
  bottom: calc(100% + 0.6rem);
  left: 50%;
  transform: translate(-50%, 0.25rem);
  white-space: nowrap;
  background: var(--ink);
  color: var(--bone);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  padding: 0.35rem 0.6rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.swatch:hover .swatch__name,
.swatch:focus-visible .swatch__name { opacity: 1; transform: translate(-50%, 0); }

/* ---- Size pills ----------------------------------------- */
.sizes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.size {
  min-width: 3.5rem;
  min-height: 2.75rem;
  padding-inline: 0.9rem;
  border: 1px solid var(--stone);
  border-radius: 999px;
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease), color 0.35s var(--ease);
}
.size:hover { border-color: var(--ink); }
.size[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bone); }
.size[data-stock="0"] {
  color: var(--stone);
  border-style: dashed;
  pointer-events: none;
  text-decoration: line-through;
}

/* ---- Accordion ------------------------------------------ */
.accordion { border-top: var(--hair); }
.acc__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0;
  text-align: left;
  font-size: var(--fs-small);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: 500;
}
.acc__sign {
  position: relative;
  width: 0.75rem; height: 0.75rem;
  flex: none;
}
.acc__sign::before, .acc__sign::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
}
.acc__sign::before { left: 0; right: 0; top: 50%; height: 1px; }
.acc__sign::after  { top: 0; bottom: 0; left: 50%; width: 1px; }
.acc__head[aria-expanded="true"] .acc__sign::after { opacity: 0; transform: rotate(90deg); }

.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  border-bottom: var(--hair);
  transition: grid-template-rows 0.5s var(--ease);
}
.acc__panel[data-open="true"] { grid-template-rows: 1fr; }
.acc__inner { overflow: hidden; }
.acc__body {
  padding: 0 0 1.5rem;
  max-width: var(--maxw-text);
  font-size: var(--fs-small);
  line-height: 1.65em;
}

/* ---- Price breakdown (pillar 3: radical honesty) --------- */
.breakdown { width: 100%; border-collapse: collapse; }
.breakdown th,
.breakdown td {
  padding: 0.7rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--stone) 45%, transparent);
  font-size: var(--fs-small);
  text-align: left;
  font-weight: 400;
  vertical-align: top;
}
.breakdown td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.breakdown tfoot td {
  border-bottom: 0;
  border-top: 1px solid var(--ink);
  font-weight: 500;
  padding-top: 0.9rem;
}
.bar {
  display: block;
  height: 2px;
  margin-top: 0.55rem;
  background: var(--stone);
}
.bar[data-part="margin"] { background: var(--depth); }

/* ---- Forms ---------------------------------------------- */
.field { display: block; margin-bottom: 1.5rem; }
.field__label {
  display: block;
  font-size: var(--fs-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 0.4rem;
}
.input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.4rem 0;
  background: transparent;
  border: 0;
  border-bottom: var(--hair);
  border-radius: 0;
  transition: border-color 0.35s var(--ease);
}
.input:focus { outline: none; border-bottom-color: var(--ink); }
.input::placeholder { color: color-mix(in srgb, var(--stone) 80%, transparent); }
/* Errors are stated in Ink and a doubled rule, never in Clay: the accent
   belongs to the one action on the screen, and six red fields would be six
   accents. The message carries the meaning, not the colour. */
.field__error {
  display: none;
  margin-top: 0.4rem;
  font-size: var(--fs-micro);
  color: var(--ink);
  font-weight: 500;
}
.field[data-invalid="true"] .input {
  border-bottom-color: var(--ink);
  border-bottom-width: 2px;
  padding-bottom: calc(0.4rem - 1px);
}
.field[data-invalid="true"] .field__error { display: block; }

.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 1.5rem; }
@media (max-width: 35em) { .field-row { grid-template-columns: minmax(0, 1fr); } }

/* Newsletter — one line, one field, never a modal */
.newsletter__form {
  display: flex;
  align-items: flex-end;
  gap: 1.5rem;
  max-width: 34rem;
}
.newsletter__form .field { flex: 1; margin-bottom: 0; }
.newsletter__note {
  margin-top: 1rem;
  font-size: var(--fs-micro);
  color: var(--stone);
}
@media (max-width: 35em) {
  .newsletter__form { flex-direction: column; align-items: stretch; }
}

/* ---- Quantity stepper ----------------------------------- */
.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--stone);
}
.qty button {
  width: 2.5rem; height: 2.5rem;
  font-size: var(--fs-small);
  color: var(--ink);
  transition: background 0.3s var(--ease);
}
.qty button:hover { background: color-mix(in srgb, var(--stone) 25%, transparent); }
.qty output {
  min-width: 2.25rem;
  text-align: center;
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
}

/* Il bottone tiene il segno per un momento: la conferma sta dove si
   è appena cliccato, non solo in un angolo dello schermo.
   L'attributo lo mette il JS su qualunque bottone di aggiunta, quindi
   una regola sola basta per tutte le pagine. */
[data-added="true"],
.garment__acts .is-solid[data-added="true"] {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
}

/* ---- Toast (add-to-cart feedback, not a modal) ----------- */
.toast {
  position: fixed;
  right: var(--gutter);
  bottom: var(--gutter);
  /* Sopra ogni cosa, menu compreso: è la risposta a un gesto appena
     fatto, e una risposta che non si vede non è una risposta. */
  z-index: 800;
  max-width: 24rem;
  background: var(--ink);
  color: var(--bone);
  padding: 1rem 1.25rem;
  font-size: var(--fs-small);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  transform: translateY(1.5rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.toast[data-show="true"] { opacity: 1; transform: none; pointer-events: auto; }
.toast a {
  border-bottom: 1px solid color-mix(in srgb, var(--bone) 50%, transparent);
  white-space: nowrap;
  font-size: var(--fs-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

/* ---- Footer --------------------------------------------- */
/* Il footer e' una riga sola. Le quattro colonne di link erano il
   menu scritto una seconda volta, e il menu su questo sito e' gia' il
   catalogo: ripeterlo in fondo a ogni pagina non aggiungeva una via,
   aggiungeva rumore. Quello che resta e' quello che deve restare per
   legge, e la dichiarazione che il marchio non esiste. */
.site-footer {
  margin-top: var(--section);
  padding: 2.5rem 0;
  border-top: 1px solid color-mix(in srgb, var(--stone) 45%, transparent);
  font-size: var(--fs-micro);
  color: color-mix(in srgb, var(--ink) 62%, transparent);
}
.site-footer a { color: inherit; transition: color 0.35s var(--ease); }
.site-footer a:hover { color: var(--ink); }

.footer__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 2.5rem;
}
.footer__vat,
.footer__links,
.footer__note {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin: 0;
}
.footer__vat b { font-weight: 500; color: var(--ink); }
.footer__vat a { border-bottom: 1px solid color-mix(in srgb, var(--stone) 55%, transparent); }
.footer__links a { letter-spacing: var(--track-label); text-transform: uppercase; }

@media (max-width: 56.25em) {
  .footer__line { flex-direction: column; align-items: flex-start; }
}

.disclosure {
  max-width: 40em;
  font-size: var(--fs-micro);
  line-height: 1.75em;
  color: color-mix(in srgb, var(--bone) 60%, transparent);
}

/* A .link that is a statement rather than a destination */
.link--static { border-color: transparent; cursor: default; }


/* Placeholders shrunk to thumbnail size: the label has to shrink with
   the panel or it fills it edge to edge. */
.line__media .ph,
.mini__item .ph { padding: 0.5rem; gap: 0.25rem; }
.line__media .ph__name,
.mini__item .ph__name { font-size: 0.5625rem; letter-spacing: 0.1em; line-height: 1.45em; }

/* ---- .shot — la fotografia, trattata -----------------------
   Le immagini vengono da fonti Creative Commons diverse: autori
   diversi, giorni diversi, luci diverse. Da sole non leggono come
   una serie. Il duotone le riporta tutte sull'asse Depth→Bone,
   che è la palette del marchio: perdono il colore proprio e
   acquistano quello di Velum.

   Ricetta: il fondo del contenitore fa le ombre, l'immagine in
   `screen` ci si appoggia sopra, e un velo Bone in `multiply`
   tinge le luci. `isolation` tiene il blend dentro il riquadro.

   Il ritaglio in basso non è estetico: la fonte incide il nome
   dell'autore nei pixel. L'attribuzione sta nei crediti, dove
   deve stare, non stampata sulla foto. */
.shot {
  position: relative;
  overflow: hidden;
  /* Solo il colore che si vede mentre la fotografia arriva: il
     duotone è già cotto dentro i file, e rifarlo qui lo
     applicherebbe due volte. */
  background: var(--bone-deep);
}
.shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Rapporti, gli stessi dei pannelli in tinta unita che sostituiscono */
.shot--square { aspect-ratio: 1 / 1; }
.shot--tall   { aspect-ratio: 2 / 3; }
.shot--wide   { aspect-ratio: 16 / 9; }
.shot--macro  { aspect-ratio: 4 / 5; }
.shot--port   { aspect-ratio: 3 / 4; }
@media (max-width: 35em) { .shot--wide { aspect-ratio: 4 / 3; } }

/* Galleria prodotto e griglia Instagram. Le card hanno il loro zoom
   sul riquadro della fotografia, più sotto. */
.pdp__frame .shot img,
.insta .shot img { transition: transform 1.2s var(--ease); }
.pdp__frame:hover .shot img,
.insta a:hover .shot img { transform: scale(1.06); }

/* ---- Banner di consenso ------------------------------------
   Compare solo se c'è davvero qualcosa da bloccare. In basso, non
   al centro: non deve sequestrare la pagina. Nessun Clay, che
   resta della sola azione principale della schermata. */
.consent {
  position: fixed;
  left: var(--gutter);
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: 300;
  max-width: 34rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--bone);
  border: 1px solid var(--ink);
  transform: translateY(1.5rem);
  opacity: 0;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.consent[data-open="true"] { opacity: 1; transform: none; }
.consent__text {
  flex: 1 1 16rem;
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.55em;
}
.consent__text a { border-bottom: 1px solid var(--stone); }
.consent__actions { display: flex; gap: 0.75rem; }

/* ---- Il pannello che gira ----------------------------------
   Due sole facce, non una per immagine: quella nascosta viene
   ricaricata con lo scatto successivo un istante prima di
   ruotare. Così si scorrono quattro immagini (o quaranta) con
   due nodi soli, e la rotazione resta sempre di mezzo giro.

   Non è un oggetto tridimensionale: è un piano che ruota sul
   proprio asse verticale, che il brief consente. */
.flip {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  padding: 0;
  border: 0;
  background: var(--bone-deep);
  margin-bottom: 1.1rem;
  overflow: hidden;
  touch-action: pan-y;          /* lo scorrimento verticale resta al browser */
}
/* Una faccia sola. Le altre fotografie del capo si guardano nella
   vista che si apre col clic, grandi: dentro un riquadro di trecento
   pixel non le guardava nessuno. */
.flip__inner,
.flip__face {
  position: absolute;
  inset: 0;
}
.flip__face .shot { height: 100%; aspect-ratio: auto; }

/* Lo zoom all'hover vive sul pannello */
.flip .shot img { transition: transform 1.2s var(--ease); }
.card:hover .flip .shot img { transform: scale(1.06); }

/* Senza JS il pannello non gira: la seconda faccia sarebbe solo
   un doppione girato di spalle, quindi si toglie di mezzo. */

/* Il testo sotto la card è il link vero verso la scheda */
.card__link { display: block; }

/* ---- L'area che apre il capo -------------------------------
   Il riquadro non e' un bottone: e' un link steso sopra la
   fotografia, e copre tutta la card. Le frecce che giravano le due
   facce non ci sono piu': le altre fotografie si guardano nella
   vista che si apre col clic. */
.flip { cursor: default; }

.flip__open {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
}



/* ============================================================
   IL MENU — il catalogo, non un elenco di reparti
   Sei capi, sei righe. Un velo Bone che sale a coprire: lo stesso
   linguaggio delle transizioni fra pagine, cosi il menu non
   sembra un pezzo prestato da un altro sito.

   Aprire e chiudere e' una transizione CSS, non una timeline: se
   il JavaScript del movimento non parte, la navigazione resta.
   ============================================================ */
.menu {
  position: fixed;
  inset: 0;
  /* Sopra tutto, vista del capo compresa: `.garment` sta a 500 e viene
     aggiunta al documento dopo, quindi a parita' di z-index vince
     lei. Il menu e' la navigazione, non ha niente sopra di se'. */
  z-index: 700;
  visibility: hidden;
  pointer-events: none;
}
.menu[data-open="true"] { visibility: visible; pointer-events: auto; }

.menu__veil {
  position: absolute;
  inset: 0;
  background: var(--bone);
  transform: translateY(-101%);
  transition: transform 0.8s var(--ease);
}
.menu[data-open="true"] .menu__veil { transform: none; }

.menu__inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
  padding-block: 6rem 2.5rem;
  opacity: 0;
  transition: opacity 0.4s var(--ease) 0.15s;
  overflow-y: auto;
}
.menu[data-open="true"] .menu__inner { opacity: 1; }

.menu__close {
  position: absolute;
  top: 1.75rem;
  left: var(--gutter);
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--stone);
  color: var(--ink);
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease);
}
.menu__close svg { width: 1.125rem; height: 1.125rem; }
.menu__close:hover { border-color: var(--ink); background: var(--bone-deep); }

.menu__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--grid-gap);
  align-items: center;
}

.menu__list { display: block; }

/* Ogni riga: numero, nome in Fraunces, prezzo, materia. Il nome e'
   l'unica cosa che cresce; il resto accompagna. */
.menu__item {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  grid-template-areas: "index name price" ". material material";
  align-items: baseline;
  gap: 0 1.25rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--stone) 40%, transparent);
  transition: opacity 0.4s var(--ease);
}
.menu__item:first-child { border-top: 1px solid color-mix(in srgb, var(--stone) 40%, transparent); }

.menu__index {
  grid-area: index;
  font-size: var(--fs-micro);
  letter-spacing: var(--track-label);
  color: var(--stone);
}
.menu__name {
  grid-area: name;
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(1.75rem, 4vw, 3.25rem);
  line-height: 1.05em;
  letter-spacing: -0.02em;
  transition: transform 0.5s var(--ease);
}
.menu__price {
  grid-area: price;
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
}
.menu__material {
  grid-area: material;
  font-size: var(--fs-small);
  color: var(--stone);
  margin-top: 0.2rem;
}
.menu__item:hover .menu__name { transform: translateX(0.75rem); }

/* Le altre righe si ritirano su quella sotto il cursore: e' il modo
   piu' silenzioso di dire "questa". */
.menu__list:hover .menu__item { opacity: 0.4; }
.menu__list:hover .menu__item:hover { opacity: 1; }

.menu__media { align-self: center; }
.menu__media .shot { transition: opacity 0.45s var(--ease); }

.menu__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid color-mix(in srgb, var(--stone) 40%, transparent);
}
.menu__links,
.menu__legal { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; }
.menu__links a { font-size: var(--fs-small); }
.menu__legal a {
  font-size: var(--fs-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--stone);
}
.menu__links a:hover,
.menu__legal a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.35em; }

/* Mentre il menu e' aperto la pagina sotto non si scrolla */
html.menu-open { overflow: hidden; }

@media (max-width: 60em) {
  .menu__grid { grid-template-columns: minmax(0, 1fr); }
  .menu__media { display: none; }
}
@media (max-width: 35em) {
  .menu__item { grid-template-columns: 2rem minmax(0, 1fr) auto; padding: 0.85rem 0; }
  .menu__inner { justify-content: flex-start; padding-top: 5.5rem; }
}

/* ============================================================
   LA VISTA DEL CAPO — si apre dalla griglia, non da un'altra pagina

   Il fotogramma che si clicca cresce fino al centro dello schermo
   mentre la griglia dietro svanisce. Niente caricamento, niente
   sbianco: l'immagine e' la stessa, si sposta soltanto.

   Il pannello lo costruisce `garment-view.js`, ma tutto quello che
   decide come appare sta qui: la logica muove numeri, il CSS decide
   la forma. Se il JavaScript non parte, le card restano link normali
   verso `product.html` e questo foglio non serve a nessuno — la
   stessa rete di sicurezza del menu.
   Si chiama `.garment` e non `.pdp` perche' `.pdp` e' gia' la
   sezione della scheda in `pages.css`: la regola qui sotto, presa
   da quel nome, rendeva invisibile tutto `product.html`.
   ============================================================ */
.garment {
  position: fixed;
  inset: 0;
  z-index: 500;
  visibility: hidden;
  pointer-events: none;
}
.garment[data-state="opening"],
.garment[data-state="open"],
.garment[data-state="closing"] { visibility: visible; pointer-events: auto; }

/* La velatura sotto l'header: il wordmark e' in `mix-blend-mode:
   difference` e sopra una fotografia di mezzo tono non stacca ne' in
   chiaro ne' in scuro. Sta dentro la vista e non nell'header, perche'
   un figlio dell'header finirebbe dentro lo stesso blend e si
   invertirebbe con lui. */
.garment__scrim {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8rem;
  z-index: 2;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--bone) 88%, transparent),
    color-mix(in srgb, var(--bone) 55%, transparent) 45%,
    transparent);
  pointer-events: none;
  opacity: 0;
}

/* Il fondo entra in dissolvenza mentre la griglia se ne va: sono due
   meta' dello stesso movimento, non due effetti. */
.garment__ground {
  position: absolute;
  inset: 0;
  background: var(--bone);
  opacity: 0;
}

/* Mentre e' aperta la pagina sotto non scorre. Lo scroll vive qui
   dentro, in un contenitore suo, cosi' la posizione della griglia
   resta intatta per il ritorno. */
html.garment-open { overflow: hidden; }

/* L'header resta in scena sopra la vista: e' la via al menu e al
   carrello, e senza, la vista era una stanza senza porta.

   `fixed` e non `sticky`: aprendo la vista si mette `overflow: hidden`
   sull'html per bloccare la pagina, e da quel momento lo sticky non ha
   piu' uno scorrimento a cui attaccarsi — l'header restava dov'era nel
   documento, cioe' fuori schermo se la pagina era gia' stata scorsa.
   Sotto `overflow: hidden` la posizione appiccicata non ha piu' un
   contenitore di riferimento e l'header sparisce verso l'alto.

   E il blend si spegne. `difference` e' nato per i campi Bone e Depth
   del sito, che sono due e si conoscono; sopra una fotografia qualsiasi
   e' una scommessa, e su un grigio medio il bianco in differenza
   diventa grigio medio e sparisce. Sotto c'e' gia' la velatura a fare
   da fondo stabile: ci si scrive in Ink. */
html.garment-head .site-header {
  /* `relative`, non `fixed`: serve solo a poter alzare lo z-index.
     Con `fixed` l'header usciva dal flusso, il documento si
     accorciava della sua altezza e tutto quello che stava sotto
     saliva — e sulla home i pin di ScrollTrigger ricalcolavano su una
     pagina diversa, che alla chiusura non tornava identica. A
     portarlo in cima ci pensa una `transform` scritta dal JS, che il
     layout non lo tocca. */
  position: relative;
  z-index: 600;
  mix-blend-mode: normal;
}
html.garment-head .site-header__inner { color: var(--ink); }

.garment__scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  opacity: 0;
}
.garment__scroll::-webkit-scrollbar { display: none; }

/* ---- La schermata delle fotografie ------------------------- */
.garment__stage {
  /* L'altezza vera la scrive il JS all'apertura: è la corsa
     orizzontale della fascia più uno schermo. Questa è solo la
     misura di riposo, per quando il JS non gira. */
  height: 100vh;
  height: 100dvh;
  position: relative;
}

/* Il pezzo che si incolla. Resta fermo in cima per tutta l'altezza
   della schermata: da fuori si vede una schermata sola che non si
   muove, mentre lo scorrimento vero sotto continua e trascina la
   fascia di lato. Finita l'altezza si stacca da sé e la pagina
   prosegue verso la descrizione. */
.garment__pin {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.garment__strip {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  height: 100%;
  /* Niente `overflow-x`: la fascia non è più un contenitore che
     scorre. I fotogrammi escono dai suoi bordi, li taglia `.garment__pin`,
     e a spostarla è una `transform` guidata da `scrollTop`. Un
     contenitore che scorre dentro un altro contenitore che scorre era
     proprio il posto dove i due meccanismi si contendevano il gesto. */
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.garment__strip[data-dragging="true"] { cursor: grabbing; }

/* Tre fotogrammi in schermo, senza distanze fra loro: il quarto si
   raggiunge scorrendo, e il bordo che si intravede dice da solo che
   la fascia continua. */
.garment__frame {
  flex: 0 0 auto;
  width: calc(100% / 3);
  height: 100%;
  margin: 0;
}
.garment__frame .shot { height: 100%; }
.garment__frame .shot img { height: 100%; }

/* ---- Il fotogramma che vola --------------------------------
   Vive fuori dal flusso e sopra tutto: e' l'unico elemento che si
   muove davvero fra i due stati. */
.garment__flier {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
}
.garment__flier img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ---- Il ritorno -------------------------------------------- */
/* Sotto l'header, non sopra: l'header resta in scena e il tasto Menu
   sta esattamente dove starebbe questo. */
.garment__back {
  position: absolute;
  top: 5.5rem;
  left: var(--gutter);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.15rem;
  border-radius: 999px;
  font-size: var(--fs-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink);
  background: color-mix(in srgb, var(--bone) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--stone) 45%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  opacity: 0;
}
.garment__back:hover { background: var(--bone); border-color: var(--ink); }
.garment__back svg { width: 0.85rem; height: 0.85rem; }

/* ---- I due tastini sopra la barra --------------------------- */
.garment__jump {
  position: absolute;
  left: 50%;
  bottom: 7.75rem;
  z-index: 3;
  display: flex;
  gap: 0.5rem;
  transform: translateX(-50%);
  opacity: 0;
}
.garment__jump button {
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink);
  background: color-mix(in srgb, var(--bone) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--stone) 45%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  white-space: nowrap;
}
.garment__jump button:hover { background: var(--bone); border-color: var(--ink); }

/* ---- La barra fluttuante ------------------------------------
   Vetro: il fondo passa attraverso, sfocato. Dove `backdrop-filter`
   non esiste resta un Bone quasi pieno — leggibile comunque, che e'
   l'unica cosa che conta davvero. */
.garment__bar {
  position: absolute;
  left: 50%;
  bottom: 1.75rem;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  max-width: calc(100% - var(--gutter) * 2);
  padding: 0.7rem 0.7rem 0.7rem 0.85rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bone) 62%, transparent);
  border: 1px solid color-mix(in srgb, var(--stone) 40%, transparent);
  box-shadow: 0 1.5rem 3rem -1.5rem color-mix(in srgb, var(--depth) 45%, transparent);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  transform: translateX(-50%);
  opacity: 0;
}
@supports not (backdrop-filter: blur(1px)) {
  .garment__bar,
  .garment__jump button,
  .garment__back { background: color-mix(in srgb, var(--bone) 94%, transparent); }
}

.garment__thumb {
  flex: 0 0 auto;
  width: 2.75rem;
  height: 3.5rem;
  border-radius: 1.4rem;
  overflow: hidden;
}
.garment__thumb img { width: 100%; height: 100%; object-fit: cover; }

.garment__ident { min-width: 0; }
.garment__ident b {
  display: block;
  font-family: var(--ff-display);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.2em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.garment__ident span {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--fs-micro);
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  white-space: nowrap;
}

.garment__acts { display: flex; gap: 0.5rem; margin-left: auto; }
.garment__acts button {
  padding: 0.75rem 1.35rem;
  border-radius: 999px;
  font-size: var(--fs-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
/* Bianco pieno: e' l'azione, e in mezzo al vetro il pieno e' l'unico
   modo di distinguersi senza chiamare in causa il Clay, che su questo
   sito compare una volta sola per schermata. */
.garment__acts .is-solid { background: #FFF; color: var(--ink); }
.garment__acts .is-solid:hover { background: var(--ink); color: var(--bone); }
.garment__acts .is-ghost {
  background: transparent;
  color: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 45%, transparent);
}
.garment__acts .is-ghost:hover { border-color: var(--ink); background: color-mix(in srgb, var(--bone) 60%, transparent); }
.garment__acts .is-ghost[aria-expanded="true"] { background: var(--ink); color: var(--bone); border-color: var(--ink); }

/* ---- Il cassetto delle varianti ----------------------------- */
.garment__drawer {
  position: absolute;
  left: 50%;
  /* Appena sopra la cima della barra, non appena sopra il fondo
     dello schermo: sotto i 560px la barra è su due righe e il
     cassetto ci finiva dentro. */
  bottom: 7.5rem;
  z-index: 4;
  width: min(28rem, calc(100% - var(--gutter) * 2));
  padding: 1.35rem 1.5rem 1.5rem;
  border-radius: 1.5rem;
  background: color-mix(in srgb, var(--bone) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--stone) 45%, transparent);
  box-shadow: 0 1.5rem 3rem -1.5rem color-mix(in srgb, var(--depth) 45%, transparent);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  transform: translate(-50%, 0.75rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s;
}
.garment__drawer[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.garment__drawer .label { display: block; margin-bottom: 0.6rem; }
.garment__drawer .swatches { margin-bottom: 1.25rem; }

/* ---- La sezione bianca -------------------------------------- */
.garment__read {
  position: relative;
  background: #FFF;
  padding: 6rem 0 8rem;
  border-radius: 2rem 2rem 0 0;
}
.garment__read .wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.garment__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--grid-gap);
  align-items: start;
  margin-bottom: 5rem;
}
.garment__head h2 {
  font-family: var(--ff-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-tight);
}
.garment__head .lede { margin-top: 1.25rem; }

.garment__block { margin-top: 4.5rem; }
.garment__block > .label { display: block; margin-bottom: 1.5rem; }

.garment__pairs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 var(--grid-gap);
}
.garment__pair {
  padding: 1.5rem 0;
  border-top: 1px solid color-mix(in srgb, var(--stone) 40%, transparent);
}
.garment__pair h3 {
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  font-weight: 400;
  margin-bottom: 0.6rem;
}

/* Due colonne, così termine e valore restano vicini: su una
   colonna sola il valore finiva a milletrecento pixel dal suo
   termine e la coppia non si leggeva più. */
.garment__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--grid-gap);
}
.garment__facts div {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--stone) 35%, transparent);
  font-size: var(--fs-small);
}
.garment__facts dt { color: color-mix(in srgb, var(--ink) 60%, transparent); }
.garment__facts dd { font-family: var(--ff-mono); }

/* La scomposizione del prezzo dentro la vista e' quella vera, animata,
   e si porta dietro il foglio di stile di `.priceview` in pages.css.
   Qui c'era una versione ferma, con barre proprie: due modi di
   disegnare la stessa idea, uno dei quali sarebbe rimasto indietro al
   primo cambiamento. E' stata tolta. */

.garment__more { margin-top: 5.5rem; }
.garment__more .grid-products { margin-top: 2rem; }

@media (max-width: 56.25em) {
  /* Un fotogramma per schermo: la corsa diventa tre schermate di
     larghezza, e l'altezza della schermata la segue da se' perche' e'
     il JS a misurarla. */
  .garment__frame { width: 100%; }
  .garment__head,
  .garment__pairs,
  .garment__facts { grid-template-columns: minmax(0, 1fr); }
  .garment__head { gap: 1.5rem; }
  .garment__read { padding: 4rem 0 6rem; }
  .garment__ident b { max-width: 9rem; }
}

/* Sotto i 560px la barra diventa due righe: identita' sopra, azioni
   sotto a tutta larghezza. Comprimere un nome e due pillole su una
   riga sola le renderebbe illeggibili tutte e tre. */
@media (max-width: 35em) {
  .garment__bar {
    left: var(--gutter);
    right: var(--gutter);
    max-width: none;
    flex-wrap: wrap;
    border-radius: 1.5rem;
    transform: none;
  }
  .garment__acts { width: 100%; margin-left: 0; }
  .garment__acts button { flex: 1; padding-inline: 0.75rem; }
  /* La barra qui è su due righe e cresce a 152px: i tastini vanno
     spinti sopra la sua cima, non sopra quella che aveva prima. */
  .garment__jump { bottom: 12.75rem; }
  .garment__drawer {
    left: var(--gutter);
    right: var(--gutter);
    width: auto;
    bottom: 12rem;
    transform: translateY(0.75rem);
  }
  .garment__drawer[data-open="true"] { transform: translateY(0); }
}

/* ============================================================
   TATTILE — quello che un dito deve poter prendere

   Un dito chiede 44px per lato. La differenza non si recupera
   ingrandendo il testo, si recupera allargando l'area: una cosa che
   non si vede e cambia tutto.

   La regola guarda il puntatore, non la larghezza: un tablet con la
   penna e un portatile con lo schermo touch non sono un telefono, ma
   hanno lo stesso problema.
   ============================================================ */
@media (pointer: coarse), (max-width: 56.25em) {
  .menu-toggle,
  .site-header__cart,
  .menu__links a,
  .menu__legal a,
  .footer__links a,
  .footer__vat a,
  .link {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }
  /* Il menu a tutto schermo e' fatto di righe: li' il bersaglio e'
     tutta la riga, e basta darle aria. */
  .menu__item { padding-block: 1rem; }
  .menu__links,
  .menu__legal { gap: 0 1.5rem; }
  /* Le taglie e i colori sono la scelta che si fa col dito: sono i
     bersagli che contano piu' di tutti. */
  .size,
  .swatch { min-height: 2.75rem; min-width: 2.75rem; }
  .filter { padding-block: 0.75rem; }
}