@layer components {

  /* Vetrina pubblica (docente)
  /* -------------------------------------------------------------------------- */

  .vetrina {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
    max-inline-size: min(40rem, 100%);
    padding-inline: var(--inline-space);
    padding-block: var(--block-space);
  }

  .vetrina__intro {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
  }

  /* Titolo nell'header del layout public, tra due linee sfumate (.divider--fade)
     come le board pubbliche di Fizzy: va a capo invece di troncarsi */
  .vetrina__titolo {
    font-size: var(--text-x-large);
    padding-inline: var(--inline-space);
    text-wrap: balance;
  }

  .vetrina__saluto {
    font-size: var(--text-large);
    margin: 0;
  }

  .vetrina__testo {
    margin: 0;

    p:first-child { margin-block-start: 0; }
    p:last-child { margin-block-end: 0; }
  }

  .vetrina__scadenza { color: var(--color-ink-dark); }

  .vetrina__scaduta {
    color: var(--color-negative);
    font-weight: 700;
  }

  .vetrina__errori {
    background-color: color-mix(in srgb, var(--color-negative) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-negative) 30%, transparent);
    border-radius: 0.5em;
    padding: var(--inline-space);

    p { margin: 0; }
  }

  .vetrina__articoli,
  .vetrina__azioni {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
  }

  .vetrina-agente {
    align-items: center;
    background: var(--color-canvas);
    border: 1px solid var(--color-ink-lighter);
    border-radius: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: var(--inline-space);
    padding: var(--block-space-half) var(--inline-space);
  }

  .vetrina-agente__avatar {
    align-items: center;
    border-radius: 50%;
    color: var(--color-ink-inverted);
    display: inline-flex;
    font-weight: 700;
    object-fit: cover;
    block-size: 2.75rem;
    inline-size: 2.75rem;
    justify-content: center;
  }

  .vetrina-agente__nome {
    display: flex;
    flex: 1;
    flex-direction: column;
  }

  .vetrina-agente__contatti {
    display: flex;
    gap: var(--inline-space-half);
  }

  .vetrina-articolo {
    background: var(--color-canvas);
    border: 1px solid var(--color-ink-lighter);
    border-radius: 0.75rem;
    display: grid;
    gap: var(--inline-space);
    grid-template-columns: 6rem minmax(0, 1fr);
    padding: var(--block-space-half);
  }

  .vetrina-articolo__immagine {
    aspect-ratio: 3 / 4;
    border-radius: 0.5rem;
    inline-size: 100%;
    object-fit: cover;
  }

  .vetrina-articolo__immagine--vuota { background: var(--color-ink-lightest); }

  .vetrina-articolo__info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-inline-size: 0;
  }

  .vetrina-articolo__titolo {
    font-size: var(--text-medium);
    margin: 0;
  }

  .vetrina-articolo__descrizione,
  .vetrina-articolo__prezzo { margin: 0; }

  .vetrina-azione > summary {
    inline-size: 100%;
    justify-content: center;
    list-style: none;
  }

  .vetrina-azione > summary::-webkit-details-marker { display: none; }

  .vetrina-form {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
    padding-block: var(--block-space-half);
  }

  .vetrina-form__quantita {
    align-items: center;
    display: grid;
    gap: var(--inline-space);
    grid-template-columns: minmax(0, 1fr) 5rem;
  }

  .vetrina-form__contatti {
    border: 0;
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
    margin: 0;
    padding: 0;
  }

  .vetrina-form__consenso {
    align-items: flex-start;
    display: flex;
    gap: var(--inline-space-half);
  }

  /* Ridondante: la partial ha già uno style inline equivalente, tenuto qui
     per completezza del foglio e nel caso lo style inline venga rimosso. */
  .vetrina-form__hp {
    block-size: 1px;
    inline-size: 1px;
    inset-inline-start: -10000px;
    overflow: hidden;
    position: absolute;
  }

  /* Gestione offerte (agente)
  /* -------------------------------------------------------------------------- */

  .offerte-lista { max-inline-size: min(50ch, 100%); }

  .offerta-item {
    border: 1px solid var(--color-ink-lighter);
    border-radius: 0.75rem;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: var(--block-space-half) var(--inline-space);
    text-decoration: none;
  }

  .offerta-item--archiviata { opacity: 0.6; }

  .offerta-item__main {
    align-items: baseline;
    display: flex;
    gap: var(--inline-space-half);
    justify-content: space-between;
  }

  .offerta-item__title {
    font-size: var(--text-medium);
    margin: 0;
  }

  .offerta-item__badge { font-size: var(--text-small); }

  .offerta-item__sub {
    display: flex;
    gap: var(--inline-space);
  }

  .offerta-perma { max-inline-size: min(48rem, 100%); }

  .offerta-perma__intro {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);

    p { margin: 0; }
  }

  .offerta-perma__sezione {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
  }

  .offerta-perma__sezione-header {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--inline-space-half);
    justify-content: space-between;
  }

  .offerta-perma__sezione h2 { margin: 0; }

  /* Titolo di sezione (h2.divider) con le azioni sulla stessa riga */
  .offerta-perma__header {
    align-items: center;
    display: flex;
    gap: var(--inline-space-half);
  }

  .offerta-perma__lista {
    display: flex;
    flex-direction: column;
  }

  .offerta-perma__avviso {
    align-items: center;
    display: flex;
    gap: var(--inline-space);
    justify-content: space-between;
  }

  .offerta-perma__footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--inline-space-half);
    justify-content: center;
    margin-block-start: auto;
  }

  /* Righe delle liste (articoli, destinatari): info a sinistra, azioni a icona a destra */
  .offerta-riga {
    align-items: center;
    border-block-end: 1px solid var(--color-ink-lighter);
    display: flex;
    gap: var(--inline-space);
    padding-block: var(--block-space-half);

    &:last-child { border-block-end: 0; }
  }

  .offerta-articolo__immagine {
    aspect-ratio: 3 / 4;
    border-radius: 0.25rem;
    flex-shrink: 0;
    inline-size: 2.5rem;
    object-fit: cover;
  }

  .offerta-riga__info {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-inline-size: 0;
  }

  .offerta-riga__azioni {
    display: flex;
    flex-shrink: 0;
    gap: 0.1em;
  }

  .offerta-invio__stato { font-size: var(--text-small); }
  .offerta-invio__stato--risposto { color: var(--color-positive); font-weight: 700; }
  .offerta-invio__stato--aperto { color: var(--color-selected-dark); }
  .offerta-invio__stato--non_aperto { color: var(--color-ink-dark); }

  .offerta-risposta {
    align-items: baseline;
    color: inherit;
    display: flex;
    gap: var(--inline-space);
    padding-block: 0.35em;
    text-decoration: none;
  }

  .offerta-risposta__tipo {
    border-radius: 1rem;
    font-size: var(--text-x-small);
    padding: 0.1rem 0.5rem;
    text-transform: uppercase;
    background: var(--color-ink-lightest);
  }

  .offerta-risposta__tipo--ordine {
    background: color-mix(in srgb, var(--color-positive) 18%, var(--color-canvas));
    color: var(--color-positive);
  }

  .offerta-risposta__tipo--visita {
    background: color-mix(in srgb, var(--color-selected-dark) 20%, var(--color-canvas));
    color: var(--color-selected-dark);
  }

  .offerta-risposta__tipo--chiamata {
    background: color-mix(in srgb, var(--color-highlight) 60%, var(--color-canvas));
    color: var(--color-ink-dark);
  }

  .offerta-risposta__titolo { flex: 1; }
}