/* ================================================================
   prodotto.css — Leonardo Edition
   Stili della pagina prodotto singolo: /prodotti/prodotto.html
   Layout: breadcrumb → grid 2-colonne (media | info) → correlati.
   Dipende da: tokens.css (già linkato), prodotti.css (card correlati).

   Step 1 — scheletro:  layout, carosello, info base, row, accordion (chiuso)
   Step 2 — carosello:  logica JS + CSS aggiuntivo
   Step 3 — accordion:  apri/chiudi JS + transizione CSS
   Step 4 — form:       composizioni miniature, tessuti swatch, note, CTA
================================================================ */


/* ── LAYOUT PAGINA ──────────────────────────────────────────────
   .prodotto-page  : <main>
   .prodotto-inner : contenitore centrato — identico a .prodotti-inner
─────────────────────────────────────────────────────────────── */
.prodotto-page {
  background-color: var(--color-bg);
  padding-block-end: var(--space-64);
}

.prodotto-inner {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--space-24);
}

@media (min-width: 1000px) {
  .prodotto-inner {
    padding-inline: var(--space-40);
  }
}


/* ── BREADCRUMB ─────────────────────────────────────────────────
   nav > ol > li separati da "/" via ::before pseudo-element.
─────────────────────────────────────────────────────────────── */
.prodotto-breadcrumb {
  padding-block: var(--space-24) var(--space-32);
}

.prodotto-breadcrumb__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}

.prodotto-breadcrumb__item {
  display: flex;
  align-items: center;
  font-family: var(--font-utility);
  font-size: var(--text-11);
  font-weight: 400;
  letter-spacing: var(--tracking-wide);
  color: var(--color-mid);
  white-space: nowrap;
}

.prodotto-breadcrumb__item + .prodotto-breadcrumb__item::before {
  content: '/';
  margin-inline: var(--space-8);
  color: var(--color-mid);
  opacity: 0.5;
}

.prodotto-breadcrumb__link {
  color: inherit;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

@media (hover: hover) {
  .prodotto-breadcrumb__link:hover {
    color: var(--color-ink);
  }
}

.prodotto-breadcrumb__link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 1px;
}

/* Ultima voce: nome prodotto corrente */
.prodotto-breadcrumb__item--current {
  color: var(--color-ink);
}


/* ── GRIGLIA PRODOTTO ───────────────────────────────────────────
   Mobile (<1000px) : colonna singola.
   Desktop (≥1000px): 2 colonne 55/45 (media | info), allineate in alto.
─────────────────────────────────────────────────────────────── */
.prodotto-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-40);
}

@media (min-width: 1000px) {
  .prodotto-layout {
    grid-template-columns: 11fr 9fr;
    gap: var(--space-64);
    align-items: start;
  }
}


/* ══════════════════════════════════════════════════════════════
   COLONNA SINISTRA — MEDIA
   Su desktop la colonna è sticky: rimane visibile mentre si
   scorre l'info a destra.

   Top COSTANTE (valore header espanso): NON deve dipendere da
   .is-compact. Se il top sticky cambiasse quando l'header si
   compatta, salterebbe di 28px esattamente sulla soglia dove
   l'header commuta — e sommato all'aggiustamento di scrollY dello
   Scroll Anchoring produce una vibrazione visibile dell'immagine.
   Con un top fisso l'immagine resta ancorata stabile; in stato
   compatto resta solo 28px di respiro in più sopra — impercettibile.
══════════════════════════════════════════════════════════════ */
@media (min-width: 1000px) {
  .prodotto-media {
    position: sticky;
    top: calc(var(--header-height-expanded) + var(--space-24));
  }
}


/* ── CAROSELLO ───────────────────────────────────────────────── */
.prodotto-carousel {
  position: relative;
}

/* Stage: proporzione 4:5, tutti gli slide in absolute.
   Sfondo limestone (var(--color-bg)) anziché grigio:
   se la foto non riempie perfettamente il 4:5 (object-fit:contain)
   il padding visibile è dello stesso colore della pagina. */
.prodotto-carousel__stage {
  position: relative;
  aspect-ratio: 4 / 5;
  background-color: var(--color-bg);
  overflow: hidden;
}

.prodotto-carousel__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  transition: opacity 400ms ease-out;
}

.prodotto-carousel__slide.is-active {
  opacity: 1;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .prodotto-carousel__slide {
    transition: none;
  }
}

/* object-fit: contain → la foto viene sempre mostrata intera,
   senza ritaglio. Se l'aspect-ratio della foto ≠ 4:5 il padding
   limestone del contenitore riempie lo spazio residuo. */
.prodotto-carousel__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* Frecce prev/next.
   Su dispositivi hover-capable (desktop): opacity 0 di default,
   appaiono su :hover del carosello o su :focus-visible.
   Su touch (no hover): sempre visibili quando presenti nel DOM
   (JS rimuove [hidden] quando ci sono 2+ foto). */
.prodotto-carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  appearance: none;
  background-color: rgba(246, 245, 243, 0.90);
  border: none;
  cursor: pointer;
  padding: var(--space-12) var(--space-16);
  font-family: var(--font-utility);
  font-size: var(--text-16);
  line-height: 1;
  color: var(--color-ink);
  transition:
    background-color var(--duration-fast) var(--ease-out),
    opacity          var(--duration-fast) var(--ease-out);
}

.prodotto-carousel__btn--prev { left:  var(--space-8); }
.prodotto-carousel__btn--next { right: var(--space-8); }

/* Desktop: frecce discrete, appaiono su hover carosello */
@media (hover: hover) {
  .prodotto-carousel__btn {
    opacity: 0;
    pointer-events: none;   /* non intercetta click finché invisibili */
  }

  .prodotto-carousel:hover .prodotto-carousel__btn {
    opacity: 1;
    pointer-events: auto;
    background-color: rgba(246, 245, 243, 0.90);
  }

  .prodotto-carousel:hover .prodotto-carousel__btn:hover {
    background-color: var(--color-bg);
  }
}

.prodotto-carousel__btn:focus-visible {
  opacity: 1;
  pointer-events: auto;
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}


/* ── STRIP THUMBNAILS ────────────────────────────────────────── */
.prodotto-thumbnails {
  display: flex;
  gap: var(--space-8);
  margin-block-start: var(--space-12);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.prodotto-thumbnails::-webkit-scrollbar {
  display: none;
}

.prodotto-thumbnails__item {
  flex-shrink: 0;
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 64px;
  height: 80px;
  overflow: hidden;
  background-color: #ECECEA;
  outline: 1.5px solid transparent;
  outline-offset: 2px;
  transition: outline-color var(--duration-fast) var(--ease-out);
}

.prodotto-thumbnails__item.is-active {
  outline-color: var(--color-ink);
}

@media (hover: hover) {
  .prodotto-thumbnails__item:not(.is-active):hover {
    outline-color: var(--color-mid);
  }
}

.prodotto-thumbnails__item:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.prodotto-thumbnails__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}


/* ══════════════════════════════════════════════════════════════
   COLONNA DESTRA — INFO PRODOTTO
   Struttura default (accordion chiuso):
     etichetta categoria → H1 → descrizione →
     divider → riga Scheda Tecnica →
     divider → accordion Richiesta preventivo (chiuso)
══════════════════════════════════════════════════════════════ */

/* ── Etichetta categoria ──────────────────────────────────────── */
.prodotto-info__cat {
  margin: 0 0 var(--space-8) 0;
}

.prodotto-info__cat-link {
  font-family: var(--font-utility);
  font-size: var(--text-11);
  font-weight: 400;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-mid);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

@media (hover: hover) {
  .prodotto-info__cat-link:hover {
    color: var(--color-accent);
  }
}

.prodotto-info__cat-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 1px;
}


/* ── H1 nome prodotto ────────────────────────────────────────── */
.prodotto-info__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
  line-height: 1.05;
  color: var(--color-ink);
  margin: 0 0 var(--space-20) 0;
  font-size: clamp(2.5rem, 2.5vw + 1.75rem, 4rem);
}


/* ── Descrizione ─────────────────────────────────────────────── */
.prodotto-info__desc {
  font-family: var(--font-utility);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.65;
  color: var(--color-ink);
  opacity: 0.75;
  margin: 0;
}


/* ── Hairline divider ────────────────────────────────────────── */
.prodotto-divider {
  border: none;
  border-block-start: 1px solid var(--color-hairline);
  margin: 0;
  margin-block: var(--space-28);
}


/* ══════════════════════════════════════════════════════════════
   RIGHE AZIONE
   Pattern a tutta larghezza: label a sinistra, icona a destra.
   Usato per "Scheda Tecnica". Futuro: altre righe secondarie.
══════════════════════════════════════════════════════════════ */
.prodotto-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding-block: var(--space-4);
  text-decoration: none;
  color: var(--color-ink);
  transition: color var(--duration-fast) var(--ease-out);
}

@media (hover: hover) {
  .prodotto-row:hover {
    color: var(--color-accent);
  }
}

.prodotto-row:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 1px;
}

.prodotto-row__label {
  font-family: var(--font-utility);
  font-size: var(--text-13);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
}

.prodotto-row__icon {
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity var(--duration-fast) var(--ease-out);
}

@media (hover: hover) {
  .prodotto-row:hover .prodotto-row__icon {
    opacity: 1;
  }
}


/* ══════════════════════════════════════════════════════════════
   ACCORDION — RICHIESTA PREVENTIVO
   Trigger: riga full-width con label + chevron.
   Body: nascosto di default (hidden).
   Step 3: JS commuta aria-expanded e rimuove hidden.
   Step 3: CSS aggiunge transizione altezza (max-height trick).
══════════════════════════════════════════════════════════════ */
.prodotto-accordion {
  /* Nessun gap visivo: i divider sopra/sotto gestiscono la spaziatura */
}

.prodotto-accordion__trigger {
  /* Reset button */
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;

  /* Layout riga */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  width: 100%;
  padding-block: var(--space-4);

  color: var(--color-ink);
  transition: color var(--duration-fast) var(--ease-out);
}

@media (hover: hover) {
  .prodotto-accordion__trigger:hover {
    color: var(--color-accent);
  }
}

.prodotto-accordion__trigger:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 1px;
}

.prodotto-accordion__label {
  font-family: var(--font-utility);
  font-size: var(--text-13);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-align: left;
}

/* Chevron: ruota 180° quando l'accordion è aperto.
   Transizione 280ms (--duration-base) per essere in sync con il body. */
.prodotto-accordion__icon {
  flex-shrink: 0;
  opacity: 0.6;
  transition:
    transform var(--duration-base) var(--ease-out),
    opacity   var(--duration-fast) var(--ease-out);
}

.prodotto-accordion__trigger[aria-expanded="true"] .prodotto-accordion__icon {
  transform: rotate(180deg);
  opacity: 1;
}

/* Color shift label + icona quando aperto */
.prodotto-accordion__trigger[aria-expanded="true"] {
  color: var(--color-accent);
}

/* ── ACCORDION BODY ─────────────────────────────────────────────
   Tecnica grid-template-rows: 0fr → 1fr
   Vantaggi rispetto a max-height:
     · Nessun magic number  (max-height troppo alto → easing tagliato)
     · Timing reale 1:1 con il valore dichiarato
     · Nessun flicker su altezze variabili

   Struttura richiesta:
     .prodotto-accordion__body   → grid container, clip overflow
       .prodotto-accordion__inner → min-height:0 + overflow:hidden
                                    (forza il grid a poterlo collassare a 0)
─────────────────────────────────────────────────────────────── */
.prodotto-accordion__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-base) var(--ease-out);
  /* Prevent content flash during transition */
  overflow: hidden;
}

.prodotto-accordion__body.is-open {
  grid-template-rows: 1fr;
}

/* Inner wrapper — obbligatorio per il trick 0fr.
   NON deve avere padding: il padding parteciperebbe al min-content
   dell'elemento e impedirebbe a 0fr di collassare a 0.
   Il padding va sul figlio .prodotto-accordion__content. */
.prodotto-accordion__inner {
  overflow: hidden;
  min-height: 0;
}

/* Content: porta il padding visibile quando l'accordion è aperto.
   Poiché è figlio dell'inner (overflow:hidden, min-height:0),
   viene clippato a 0 quando grid-template-rows è 0fr. */
.prodotto-accordion__content {
  padding-block: var(--space-24) var(--space-32);
}


/* ══════════════════════════════════════════════════════════════
   SEZIONE CORRELATI
   Full-width sotto il layout principale.
   Hairline superiore per separare visivamente.
   Griglia riusa .prodotti-grid di prodotti.css.
══════════════════════════════════════════════════════════════ */
.prodotto-correlati {
  margin-block-start: var(--space-64);
  padding-block: var(--space-64);
  border-top: 1px solid var(--color-hairline);
}

.prodotto-correlati__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-16);
  margin-block-end: var(--space-40);
  flex-wrap: wrap;
}

.prodotto-correlati__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-36);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  color: var(--color-ink);
  margin: 0;
}

@media (min-width: 1000px) {
  .prodotto-correlati__title {
    font-size: var(--text-40);
  }
}

.prodotto-correlati__all {
  font-family: var(--font-utility);
  font-size: var(--text-11);
  font-weight: 400;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-mid);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out);
}

@media (hover: hover) {
  .prodotto-correlati__all:hover {
    color: var(--color-ink);
  }
}

.prodotto-correlati__all:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}


/* ══════════════════════════════════════════════════════════════
   SELETTORE COMPOSIZIONE  (Step 4A)
   Struttura iniettata da JS in .prodotto-accordion__content:

     .comp-selector
       .comp-selector__label        — "COMPOSIZIONE"
       .comp-selector__single       — 1 comp: solo testo
       .comp-selector__thumbs       — strip miniature (max 3 + "···")
         .comp-thumb                — bottone thumbnail (solo testo)
           .comp-thumb__name
           .comp-thumb__dims
         .comp-thumb--more          — "···" apre popup
       .comp-selector__select-wrap
         select.comp-selector__select

   Popup (appeso a body, position:fixed):
     .comp-popup
       .comp-popup__backdrop
       .comp-popup__panel
         .comp-popup__header
           .comp-popup__title
           .comp-popup__close
         .comp-popup__grid
           .comp-popup__separator   — "MODULI" label tra base e modulari
           .comp-popup__item        — solo testo
             .comp-popup__item-name
             .comp-popup__item-dims
══════════════════════════════════════════════════════════════ */

/* ── Label "COMPOSIZIONE" ─────────────────────────────────── */
.comp-selector__label {
  font-family: var(--font-utility);
  font-size: var(--text-11);
  font-weight: 400;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-mid);
  margin: 0 0 var(--space-12) 0;
}

/* ── Solo testo (1 composizione, auto-selezionato) ───────── */
.comp-selector__single {
  font-family: var(--font-utility);
  font-size: var(--text-13);
  line-height: 1.5;
  color: var(--color-mid);
  margin: 0;
}

.comp-selector__single strong {
  font-weight: 500;
  color: var(--color-ink);
}


/* ── Strip thumbnails ─────────────────────────────────────── */
.comp-selector__thumbs {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-8);
  margin-block-end: var(--space-16);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.comp-selector__thumbs::-webkit-scrollbar { display: none; }


/* ── Thumbnail bottone ────────────────────────────────────── */
.comp-thumb {
  appearance: none;
  background: none;
  border: 1.5px solid var(--color-hairline);
  border-radius: 2px;
  cursor: pointer;
  flex-shrink: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;   /* solo testo: centrato anche in verticale */
  gap: 4px;

  padding: var(--space-8);
  min-width: 76px;
  /* Senza lo schema a rettangolo il bottone scendeva a 43px:
     si tiene la soglia di tocco di 44px usata nel resto della sezione. */
  min-height: 44px;
  text-align: center;
  color: var(--color-mid);

  transition:
    border-color var(--duration-fast) var(--ease-out),
    color        var(--duration-fast) var(--ease-out);
}

/* Stato attivo — bordeaux */
.comp-thumb.is-active {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

@media (hover: hover) {
  .comp-thumb:not(.is-active):hover {
    border-color: var(--color-ink);
    color: var(--color-ink);
  }
}

.comp-thumb:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.comp-thumb__name {
  font-family: var(--font-utility);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.2;
  color: inherit;
}

.comp-thumb__dims {
  font-family: var(--font-utility);
  font-size: 9px;
  font-weight: 400;
  line-height: 1;
  opacity: 0.7;
  color: inherit;
}

/* ── Pulsante "···" ────────────────────────────────────────── */
.comp-thumb--more {
  justify-content: center;
  font-family: var(--font-utility);
  font-size: var(--text-16);
  letter-spacing: 0.14em;
  font-weight: 400;
  min-width: 48px;
  padding-inline: var(--space-8);
}


/* ── Select sincronizzato ─────────────────────────────────── */
.comp-selector__select-wrap {
  position: relative;
}

/* Chevron geometrico tramite CSS (no SVG, no Unicode) */
.comp-selector__select-wrap::after {
  content: '';
  position: absolute;
  right: var(--space-16);
  top: 50%;
  width: 7px;
  height: 7px;
  transform: translateY(-65%) rotate(45deg);
  border-right: 1.5px solid var(--color-mid);
  border-bottom: 1.5px solid var(--color-mid);
  pointer-events: none;
}

.comp-selector__select {
  appearance: none;
  width: 100%;
  background-color: var(--color-bg);
  border: 1.5px solid var(--color-hairline);
  border-radius: 2px;
  padding: var(--space-12) var(--space-40) var(--space-12) var(--space-16);
  font-family: var(--font-utility);
  font-size: var(--text-13);
  font-weight: 400;
  color: var(--color-ink);
  cursor: pointer;
  line-height: 1.4;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.comp-selector__select:focus,
.comp-selector__select:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
  border-color: var(--color-accent);
}

@media (hover: hover) {
  .comp-selector__select:hover {
    border-color: var(--color-ink);
  }
}


/* ══════════════════════════════════════════════════════════════
   POPUP COMPOSIZIONI
   position:fixed — sempre sopra tutto (z-index:500).
   Mobile: sheet dal basso (border-radius in cima).
   Desktop (≥700px): dialog centrato.
══════════════════════════════════════════════════════════════ */
.comp-popup {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;              /* nascosto di default */
  align-items: flex-end;
  justify-content: center;
}

/* display:flex aggiunto solo via .is-open — evita conflitto con [hidden] */
.comp-popup.is-open {
  display: flex;
}

@media (min-width: 700px) {
  .comp-popup.is-open {
    align-items: center;
  }
}

/* Backdrop: clic chiude */
.comp-popup__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(14, 14, 13, 0.45);
  cursor: pointer;
}

/* Pannello */
.comp-popup__panel {
  position: relative;
  z-index: 1;
  background-color: var(--color-bg);
  width: 100%;
  max-width: 580px;
  max-height: 82vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;

  border-radius: 6px 6px 0 0;
  padding: var(--space-20) var(--space-20) var(--space-40);
}

@media (min-width: 700px) {
  .comp-popup__panel {
    border-radius: 4px;
    padding: var(--space-24) var(--space-24) var(--space-40);
    max-height: 76vh;
  }
}

/* Header: titolo + × */
.comp-popup__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  margin-block-end: var(--space-20);
}

.comp-popup__title {
  font-family: var(--font-utility);
  font-size: var(--text-11);
  font-weight: 400;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-mid);
  margin: 0;
}

.comp-popup__close {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-4);
  color: var(--color-mid);
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  transition: color var(--duration-fast) var(--ease-out);
}

@media (hover: hover) {
  .comp-popup__close:hover {
    color: var(--color-ink);
  }
}

.comp-popup__close:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Griglia: 3 col mobile → 4 col ≥480px */
.comp-popup__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

@media (min-width: 480px) {
  .comp-popup__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Item nel popup */
.comp-popup__item {
  appearance: none;
  background: none;
  border: 1.5px solid var(--color-hairline);
  border-radius: 2px;
  cursor: pointer;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;   /* righe a pari altezza: testo centrato */
  gap: 4px;

  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--color-mid);

  transition:
    border-color var(--duration-fast) var(--ease-out),
    color        var(--duration-fast) var(--ease-out);
}

.comp-popup__item.is-active {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

@media (hover: hover) {
  .comp-popup__item:not(.is-active):hover {
    border-color: var(--color-ink);
    color: var(--color-ink);
  }
}

.comp-popup__item:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.comp-popup__item-name {
  font-family: var(--font-utility);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.25;
  color: inherit;
}

.comp-popup__item-dims {
  font-family: var(--font-utility);
  font-size: 8px;
  font-weight: 400;
  line-height: 1;
  opacity: 0.7;
  color: inherit;
}

/* Separatore "MODULI" (span all'interno di .comp-popup__grid) */
.comp-popup__separator {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding-block: var(--space-8) var(--space-4);
}

.comp-popup__separator-line {
  flex: 1;
  height: 1px;
  background-color: var(--color-hairline);
}

.comp-popup__separator-label {
  font-family: var(--font-utility);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-mid);
  white-space: nowrap;
  flex-shrink: 0;
}


/* ══════════════════════════════════════════════════════════════
   SELETTORE TESSUTO  (Step 4B)
   Il label "TESSUTO" e i controlli select riusano le classi
   .comp-selector__label, .comp-selector__select-wrap,
   .comp-selector__select e .comp-thumb--more per coerenza.
   Classi nuove: .fabric-selector, .fabric-thumb,
   .fabric-selector__com-note, .fabric-popup.
══════════════════════════════════════════════════════════════ */

/* Separatore dal selettore composizione */
.fabric-selector {
  margin-block-start: var(--space-32);
  padding-block-start: var(--space-24);
  border-block-start: 1px solid var(--color-hairline);
}

/* ── Strip swatch ─────────────────────────────────────────── */
.fabric-selector__thumbs {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-8);
  margin-block-end: var(--space-16);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.fabric-selector__thumbs::-webkit-scrollbar { display: none; }

/* Disabilita l'intera strip in modalità COM */
.fabric-selector__thumbs.is-disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* ── Swatch bottone ───────────────────────────────────────── */
.fabric-thumb {
  appearance: none;
  background: none;
  border: 1.5px solid var(--color-hairline);
  border-radius: 2px;
  cursor: pointer;
  flex-shrink: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;

  padding: var(--space-8);
  min-width: 76px;
  text-align: center;
  color: var(--color-mid);

  transition:
    border-color var(--duration-fast) var(--ease-out),
    color        var(--duration-fast) var(--ease-out);
}

.fabric-thumb.is-active {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

@media (hover: hover) {
  .fabric-thumb:not(.is-active):hover {
    border-color: var(--color-ink);
    color: var(--color-ink);
  }
}

.fabric-thumb:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Quadratino colorato (placeholder legacy — non più usato) */
.fabric-thumb__swatch {
  display: block;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 1px;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.08);
}

/* Foto reale del tessuto nella miniatura */
.fabric-thumb__media {
  display: block;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 1px;
  overflow: hidden;
  background: #F0EDE8;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.08);
}

.fabric-thumb__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fabric-thumb__name {
  font-family: var(--font-utility);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.2;
  color: inherit;
}

/* Badge categoria ("LUSSO", "TOP" …) */
.fabric-thumb__badge {
  font-family: var(--font-utility);
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1;
  opacity: 0.7;
  color: inherit;
}

/* ── Nota COM ─────────────────────────────────────────────── */
.fabric-selector__com-note {
  display: none;
  font-family: var(--font-utility);
  font-size: var(--text-11);
  font-weight: 400;
  font-style: italic;
  color: var(--color-mid);
  margin: var(--space-8) 0 0 0;
}

.fabric-selector__com-note.is-visible {
  display: block;
}


/* ══════════════════════════════════════════════════════════════
   POPUP TESSUTI
   Stessa struttura visiva di .comp-popup.
   Organizzato per gruppi-categoria con titolo.
══════════════════════════════════════════════════════════════ */
.fabric-popup {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;
  align-items: flex-end;
  justify-content: center;
}

.fabric-popup.is-open {
  display: flex;
}

@media (min-width: 700px) {
  .fabric-popup.is-open {
    align-items: center;
  }
}

.fabric-popup__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(14, 14, 13, 0.45);
  cursor: pointer;
}

.fabric-popup__panel {
  position: relative;
  z-index: 1;
  background-color: var(--color-bg);
  width: 100%;
  max-width: 580px;
  max-height: 82vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  border-radius: 6px 6px 0 0;
  padding: var(--space-20) var(--space-20) var(--space-40);

  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

@media (min-width: 700px) {
  .fabric-popup__panel {
    border-radius: 4px;
    padding: var(--space-24) var(--space-24) var(--space-40);
    max-height: 76vh;
  }
}

.fabric-popup__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  flex-shrink: 0;
}

.fabric-popup__title {
  font-family: var(--font-utility);
  font-size: var(--text-11);
  font-weight: 400;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-mid);
  margin: 0;
}

.fabric-popup__close {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-4);
  color: var(--color-mid);
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  transition: color var(--duration-fast) var(--ease-out);
}

@media (hover: hover) {
  .fabric-popup__close:hover {
    color: var(--color-ink);
  }
}

.fabric-popup__close:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Nota TODO (segnaposto per Gian) */
.fabric-popup__todo {
  font-family: var(--font-utility);
  font-size: var(--text-11);
  font-style: italic;
  color: var(--color-mid);
  background-color: rgba(90, 31, 43, 0.05);
  border-left: 2px solid var(--color-accent);
  padding: var(--space-8) var(--space-12);
  margin: 0;
  flex-shrink: 0;
}

/* ── Gruppo categoria ─────────────────────────────────────── */
.fabric-popup__group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

.fabric-popup__group-title {
  font-family: var(--font-utility);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-mid);
  margin: 0;
}

.fabric-popup__group-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

@media (min-width: 480px) {
  .fabric-popup__group-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── Item swatch nel popup ────────────────────────────────── */
.fabric-popup__item {
  appearance: none;
  background: none;
  border: 1.5px solid var(--color-hairline);
  border-radius: 2px;
  cursor: pointer;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;

  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--color-mid);

  transition:
    border-color var(--duration-fast) var(--ease-out),
    color        var(--duration-fast) var(--ease-out);
}

.fabric-popup__item.is-active {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

@media (hover: hover) {
  .fabric-popup__item:not(.is-active):hover {
    border-color: var(--color-ink);
    color: var(--color-ink);
  }
}

.fabric-popup__item:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.fabric-popup__item-swatch {
  display: block;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 1px;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.08);
}

.fabric-popup__item-name {
  font-family: var(--font-utility);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.25;
  color: inherit;
}

/* ── Item con foto reale ──────────────────────────────────── */
.fabric-popup__item-media {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 1px;
  background: #F0EDE8;
}

.fabric-popup__item-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fabric-popup__item-col {
  font-family: var(--font-utility);
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1;
  opacity: 0.7;
  color: inherit;
}

/* ── Barra di ricerca (lente) ─────────────────────────────── */
.fabric-popup__search {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-bg);
  padding-bottom: var(--space-12);
  margin-bottom: var(--space-16);
}

.fabric-popup__search-icon {
  position: absolute;
  left: 12px;
  top: calc(50% - var(--space-6, 6px));
  transform: translateY(-50%);
  color: var(--color-mid);
  pointer-events: none;
}

.fabric-popup__search-input {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-utility);
  font-size: var(--text-13);
  color: var(--color-ink);
  padding: 10px 12px 10px 38px;
  border: 1px solid var(--color-hairline);
  border-radius: 4px;
  background: var(--color-bg);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.fabric-popup__search-input:focus {
  border-color: var(--color-accent);
}

.fabric-popup__search-input::placeholder {
  color: var(--color-mid);
}

/* ── Griglia risultati A-Z ────────────────────────────────── */
.fabric-popup__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

@media (min-width: 480px) {
  .fabric-popup__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.fabric-popup__empty {
  font-family: var(--font-utility);
  font-size: var(--text-13);
  color: var(--color-mid);
  text-align: center;
  padding: var(--space-32) 0;
  margin: 0;
}

.fabric-popup__empty[hidden] {
  display: none;
}

/* ── Bottone Tessuto Cliente (COM) ────────────────────────── */
.fabric-com-btn {
  appearance: none;
  background: none;
  border: 1px solid var(--color-hairline);
  border-radius: 2px;
  cursor: pointer;
  font-family: var(--font-utility);
  font-size: var(--text-11);
  letter-spacing: 0.04em;
  color: var(--color-mid);
  padding: 6px 14px;
  margin-top: var(--space-12);
  transition:
    border-color var(--duration-fast) var(--ease-out),
    color        var(--duration-fast) var(--ease-out);
}

@media (hover: hover) {
  .fabric-com-btn:hover {
    border-color: var(--color-ink);
    color: var(--color-ink);
  }
}

.fabric-com-btn.is-active {
  border-color: var(--color-accent);
  color: var(--color-accent);
}


/* ══════════════════════════════════════════════════════════════
   NOTE + BOTTONE CTA  (Step 4C)
   .notes-section   — sezione note con hairline separator
   .preventivo-btn  — CTA full-width, bordeaux / grigio (disabled)
══════════════════════════════════════════════════════════════ */

/* ── Sezione Note ─────────────────────────────────────────── */
.notes-section {
  margin-block-start: var(--space-32);
  padding-block-start: var(--space-24);
  border-block-start: 1px solid var(--color-hairline);
}

.notes-section__wrap {
  position: relative;
}

.notes-section__textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 100px;
  resize: vertical;
  box-sizing: border-box;

  background-color: var(--color-bg);
  border: 1.5px solid var(--color-hairline);
  border-radius: 2px;
  padding: var(--space-12) var(--space-16);

  font-family: var(--font-utility);
  font-size: 0.875rem;     /* 14px — richiesto spec */
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-ink);

  transition: border-color var(--duration-fast) var(--ease-out);
}

.notes-section__textarea::placeholder {
  color: var(--color-mid);
  opacity: 0.75;
}

.notes-section__textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* Counter caratteri */
.notes-section__counter {
  font-family: var(--font-utility);
  font-size: var(--text-11);
  font-weight: 400;
  color: var(--color-mid);
  text-align: right;
  margin: var(--space-4) 0 0 0;
  opacity: 0.7;
  transition: color var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}

/* Avviso quando vicini al limite (> 450 / 500) */
.notes-section__counter.is-warning {
  color: var(--color-accent);
  opacity: 1;
}


/* ── Riga CTA: quantità + bottone ────────────────────────── */
/*
  Mobile (<700px):  colonna — qty sopra (full-width), bottone sotto.
  Desktop (≥700px): riga    — qty a sinistra, bottone cresce a destra.
*/
.cta-row {
  margin-block-start: var(--space-32);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

@media (min-width: 700px) {
  .cta-row {
    flex-direction: row;
    align-items: stretch;
    gap: var(--space-16);
  }
}

/* ── Selettore quantità ───────────────────────────────────── */
.qty-selector {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 48px;
  border: 1.5px solid var(--color-hairline);
  border-radius: 2px;
  overflow: hidden;      /* clip del hover sugli angoli */
  transition: opacity 200ms var(--ease-out);
}

@media (min-width: 700px) {
  .qty-selector { height: 52px; }
}

/* Mobile: centra il contenuto nel contenitore full-width */
@media (max-width: 699px) {
  .qty-selector { justify-content: center; }
}

/* Dimming visivo quando CTA è disabilitato — il widget resta funzionante */
.cta-row:has(.preventivo-btn:disabled) .qty-selector {
  opacity: 0.5;
}

.qty-selector__label {
  font-family: var(--font-utility);
  font-size: var(--text-11);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-mid);
  padding-inline: var(--space-12);
  white-space: nowrap;
  user-select: none;
  border-right: 1.5px solid var(--color-hairline);
  height: 100%;
  display: flex;
  align-items: center;
}

.qty-selector__btn {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-ink);
  width: 36px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color            var(--duration-fast) var(--ease-out);
}

/* Separatori interni: − a destra, + a sinistra */
.qty-selector__btn--minus { border-right: 1.5px solid var(--color-hairline); }
.qty-selector__btn--plus  { border-left:  1.5px solid var(--color-hairline); }

@media (hover: hover) {
  .qty-selector__btn:hover {
    background-color: rgba(14, 14, 13, 0.05);
    color: var(--color-accent);
  }
}

.qty-selector__btn:active {
  background-color: rgba(14, 14, 13, 0.10);
}

.qty-selector__btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
  z-index: 1;
}

/* Input numerico — nasconde i controlli nativi del browser */
.qty-selector__input {
  -webkit-appearance: none;
  -moz-appearance: textfield;
  appearance: textfield;
  background: none;
  border: none;
  outline: none;
  width: 44px;
  text-align: center;
  font-family: var(--font-utility);
  font-size: var(--text-13);
  font-weight: 500;
  color: var(--color-ink);
  padding: 0;
}

.qty-selector__input::-webkit-inner-spin-button,
.qty-selector__input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ── Bottone CTA ──────────────────────────────────────────── */
.preventivo-btn {
  appearance: none;
  /*
    MOBILE: .cta-row è in colonna, quindi l'asse principale del flex
    è VERTICALE. Con `flex: 1 1 0` il flex-basis:0 si applica
    all'altezza e schiaccia il bottone (height:48px viene ignorato).
    Qui resta quindi `flex: none` + width:100%; il `flex: 1 1 0`
    serve solo da 700px in su, dove la riga diventa orizzontale.
  */
  flex: none;
  width: 100%;
  min-width: 0;

  /* Stato default: disabilitato */
  background-color: var(--color-mid);
  color: var(--color-bg);
  border: none;
  border-radius: 2px;
  cursor: not-allowed;

  height: 48px;
  padding-inline: var(--space-24);

  font-family: var(--font-utility);
  font-size: var(--text-11);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;

  opacity: 0.6;

  transition:
    background-color 200ms var(--ease-out),
    opacity          200ms var(--ease-out),
    transform        var(--duration-fast) var(--ease-out);
}

/* Stato abilitato (JS rimuove [disabled]) */
.preventivo-btn:not(:disabled) {
  background-color: var(--color-accent);
  cursor: pointer;
  opacity: 1;
}

@media (min-width: 700px) {
  .preventivo-btn {
    height: 52px;
    /* riga orizzontale: ora il flex agisce sulla larghezza, non sull'altezza */
    flex: 1 1 0;
    width: auto;
  }
}


/* ══════════════════════════════════════════════════════════════
   MOBILE — AREE DI TOCCO (blocco "Richiesta preventivo")
   Riferimento 44×44 px. Cambia solo la zona sensibile al tocco:
   font, bordi e aspetto restano quelli desktop.
══════════════════════════════════════════════════════════════ */
@media (max-width: 699px) {

  /* Tasti − / + quantità: erano larghi 36px */
  .qty-selector__btn {
    width: 46px;
  }

  /* Campo quantità: era alto 16px, ora riempie il selettore */
  .qty-selector__input {
    height: 100%;
    align-self: stretch;
  }

  /* "Tessuto Cliente": era 117×28 */
  .fabric-com-btn {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: var(--space-16);
  }
}

@media (hover: hover) {
  .preventivo-btn:not(:disabled):hover {
    background-color: var(--color-accent-hover, #481A22);
  }
}

.preventivo-btn:not(:disabled):active {
  transform: scale(0.98);
}

.preventivo-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* Stato "aggiunto" — feedback verde al click (Step 5) */
.preventivo-btn.is-added:not(:disabled) {
  background-color: #3a5a3f;  /* verde sobrio, poi transiziona via CSS */
  cursor: default;
}


/* ══════════════════════════════════════════════════════════════
   SEZIONE PROGETTI
   Galleria delle realizzazioni: foto grande + caratteristiche
   tecniche accanto (desktop) / sotto (mobile).
   Click sulla foto → lightbox a tutto schermo.
   Dati: /data/progetti.json — la sezione è [hidden] se vuota.
══════════════════════════════════════════════════════════════ */

.prodotto-progetti[hidden] {
  display: none !important;   /* previene override da display:block */
}

.prodotto-progetti {
  display: block;
  padding-block: var(--space-64);
  border-top: 1px solid var(--color-hairline);
  margin-top: var(--space-64);
}

/* ── Header: titolo + navigazione ── */
.progetti-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-24);
  margin-bottom: var(--space-32);
}

.progetti-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  margin: 0;
  line-height: 1.1;
}

.progetti-nav {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex-shrink: 0;
}

.progetti-counter {
  font-family: var(--font-utility);
  font-size: var(--text-11);
  letter-spacing: 0.08em;
  color: var(--color-mid);
  font-variant-numeric: tabular-nums;   /* niente sfarfallio cambiando numero */
}

.progetti-counter__sep {
  margin: 0 2px;
}

.progetti-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: 1px solid var(--color-hairline);
  border-radius: 2px;
  cursor: pointer;
  color: var(--color-ink);
  transition:
    border-color var(--duration-fast) var(--ease-out),
    color        var(--duration-fast) var(--ease-out),
    opacity      var(--duration-fast) var(--ease-out);
}

@media (hover: hover) {
  .progetti-arrow:hover:not(:disabled) {
    border-color: var(--color-ink);
    color: var(--color-accent);
  }
}

.progetti-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

.progetti-arrow:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ── Corpo: foto + specifiche ──────────────────────────────────
   Mobile: colonna singola. Desktop (≥900px): foto 3fr / specs 2fr.
──────────────────────────────────────────────────────────────── */
.progetti-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
  align-items: start;
}

@media (min-width: 900px) {
  .progetti-body {
    grid-template-columns: 3fr 2fr;
    gap: var(--space-48);
  }
}

/* Voce senza descrizione: niente pannello a fianco, la foto occupa
   da sola la riga e si allinea ai bordi dell'intestazione.
   Classe messa da prodotto.js (render) sulla singola voce. */
.progetti-body.is-solo {
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  /* a tutta larghezza il 3:2 sarebbe piu' alto dello schermo: 16:9 */
  .progetti-body.is-solo .progetti-photo {
    aspect-ratio: 16 / 9;
  }
}

/* Foto verticale o quadrata: intera, centrata, su fondo pagina.
   Niente bande colorate ai lati: il riquadro sparisce nel bianco. */
.progetti-photo.is-intera {
  background: var(--color-bg);
}

.progetti-photo.is-intera img {
  object-fit: contain;
}

@media (max-width: 899px) {
  /* Su telefono una verticale intera dentro il riquadro 3:2 restava
     larga mezza schermata: le si da' un riquadro quadrato. */
  .progetti-photo.is-intera {
    aspect-ratio: 1;
  }

  /* frecce: area di tocco a 44px, come nel resto del sito */
  .progetti-arrow {
    width: 44px;
    height: 44px;
  }
}

/* ── Foto ── */
.progetti-stage {
  position: relative;
}

.progetti-photo {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: #F0EDE8;
  cursor: zoom-in;
  overflow: hidden;
  position: relative;
  aspect-ratio: 3 / 2;          /* uniforma foto di formati diversi */
}

.progetti-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 600ms var(--ease-out),
    opacity   300ms var(--ease-out);
}

@media (hover: hover) {
  .progetti-photo:hover img {
    transform: scale(1.03);
  }
}

.progetti-photo:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* Fade durante il cambio progetto (JS toggla .is-swapping) */
.progetti-photo.is-swapping img {
  opacity: 0;
}

/* Suggerimento "ingrandisci" — appare su hover desktop */
.progetti-photo__zoom {
  position: absolute;
  right: var(--space-12);
  bottom: var(--space-12);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  background-color: rgba(255, 255, 255, 0.92);
  color: var(--color-ink);
  font-family: var(--font-utility);
  font-size: var(--text-10);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
  pointer-events: none;
}

@media (hover: hover) {
  .progetti-photo:hover .progetti-photo__zoom {
    opacity: 1;
  }
}

/* Su touch il suggerimento è sempre visibile (non c'è hover) */
@media (hover: none) {
  .progetti-photo__zoom {
    opacity: 1;
  }
}

/* ── Specifiche tecniche ── */
.progetti-specs {
  min-width: 0;
}

.progetti-specs__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-24);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  margin: 0 0 var(--space-20);
  line-height: 1.2;
}

.progetti-specs__list {
  margin: 0;
  padding: 0;
}

.progetti-specs__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-20);
  padding-block: var(--space-12);
  border-top: 1px solid rgba(14, 14, 13, 0.08);
}

.progetti-specs__row:last-child {
  border-bottom: 1px solid rgba(14, 14, 13, 0.08);
}

.progetti-specs__label {
  font-family: var(--font-utility);
  font-size: var(--text-10);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-mid);
  flex-shrink: 0;
}

.progetti-specs__value {
  font-family: var(--font-utility);
  font-size: var(--text-13);
  line-height: 1.5;
  color: var(--color-ink);
  text-align: right;
  margin: 0;
}


/* ══════════════════════════════════════════════════════════════
   LIGHTBOX — foto progetto a tutto schermo
══════════════════════════════════════════════════════════════ */
.progetti-lightbox {
  position: fixed;
  inset: 0;
  z-index: 600;                 /* sopra i popup (500) */
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-24);
}

.progetti-lightbox.is-open {
  display: flex;
}

.progetti-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(14, 14, 13, 0.92);
  cursor: zoom-out;
}

.progetti-lightbox__figure {
  position: relative;
  z-index: 1;
  max-width: min(1400px, 100%);
  max-height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.progetti-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;          /* foto intera, mai tagliata */
  margin: 0 auto;
}

.progetti-lightbox__caption {
  font-family: var(--font-utility);
  font-size: var(--text-11);
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
  margin: 0;
}

.progetti-lightbox__close {
  position: absolute;
  top: var(--space-20);
  right: var(--space-24);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.75);
  transition: color var(--duration-fast) var(--ease-out);
}

.progetti-lightbox__close:hover {
  color: #FFFFFF;
}

.progetti-lightbox__close:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
}

/* Frecce dentro il lightbox */
.progetti-lightbox__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.7);
  transition: color var(--duration-fast) var(--ease-out);
}

.progetti-lightbox__arrow:hover {
  color: #FFFFFF;
}

.progetti-lightbox__arrow--prev { left:  var(--space-12); }
.progetti-lightbox__arrow--next { right: var(--space-12); }

@media (max-width: 700px) {
  .prodotto-progetti {
    padding-block: var(--space-40);
    margin-top: var(--space-40);
  }

  .progetti-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-16);
  }
}