/* TID Product Tag - frontend */

.tid-producttags {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    z-index: 5;
}

/* Disposizione: in linea (default) oppure incolonnati uno per riga */
.tid-producttags.tid-layout-stacked {
    flex-direction: column;
    align-items: flex-start;
}

.tid-producttag {
    display: inline-block;
    padding: 2px 8px;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 600;
    border-radius: 3px;
    background-color: #000;
    color: #fff;
    white-space: nowrap;
    box-sizing: border-box;
}

/* Gestione testo lungo (per contesto). La larghezza massima arriva dalla
   variabile --tid-maxw: in overlay sulla foto e calcolata da front.js sulla
   larghezza reale dell'immagine (responsive); se l'utente imposta un valore px
   fisso quello ha la precedenza. min-width: 0 permette al badge (flex item) di
   restringersi sotto la larghezza del contenuto, condizione per wrap/ellissi. */

/* Taglia con ellissi: una riga, troncata oltre la larghezza massima */
.tid-overflow-ellipsis .tid-producttag {
    max-width: var(--tid-maxw, 160px);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Vai a capo: il testo si spezza su piu righe entro la larghezza disponibile.
   In overlay la larghezza arriva da front.js (larghezza immagine); negli aganci
   in linea (prezzo) senza limite va a capo sul contenitore (max-width: none). */
.tid-overflow-wrap .tid-producttag {
    max-width: var(--tid-maxw, none);
    min-width: 0;
    white-space: nowrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Stato overlay: il wrapper viene spostato dentro il contenitore foto da front.js */
.tid-producttags.tid-overlay {
    position: absolute;
    flex-direction: column;
    align-items: flex-start;
    pointer-events: none;
}

.tid-producttags.tid-overlay .tid-producttag {
    pointer-events: auto;
}

/* Il contenitore foto deve poter ospitare l'overlay assoluto */
.tid-overlay-host {
    position: relative;
}

/* Pianificazione: i tag con fascia oraria/giorni partono nascosti (default
   prudente: meglio non mostrare una promo a tempo che mostrarla nell'orario
   sbagliato) e front.js li rivela quando sono "in finestra", ora del negozio.
   Senza JS restano nascosti. L'intervallo data e invece gia filtrato lato
   server, quindi non dipende da questa classe. */
.tid-producttag.tid-sched-pending {
    display: none;
}

/* Visibilita per variante (solo pagina prodotto): front.js nasconde i tag il cui
   elenco combinazioni non include la variante selezionata. Nelle liste (nessuna
   combinazione selezionata) il filtro non si applica e i tag restano visibili. */
.tid-producttag.tid-combo-hidden {
    display: none;
}