/**
 * TESSin_Brands v1.2.1 - pelle delle superfici di marca in vetrina.
 *
 * REGOLE DELLA CASA APPLICATE QUI:
 *  - mai stilizzare primitive core Magento: ogni selettore parte da una
 *    classe `tsn-brand-*`, che e' roba nostra;
 *  - `hidden` non compare senza la sua gemella: qui non si dichiara
 *    alcun `display` su elementi che il markup nasconde con `hidden`;
 *  - niente `min()` o `max()` CSS in un file LESS (questo e' CSS puro e
 *    non passa dal compilatore, ma la regola resta per chi lo copiera');
 *  - il logo di card e' un riquadro a misura fissa: e' il modo di non
 *    far ballare l altezza della card mentre le immagini arrivano.
 *
 * ⚠️ IL `min-height: 124px` DI `.product-item-details` NON SI TOCCA. E'
 * del tema, ed e' stato calibrato INCLUDENDO il logo di marca: il logo
 * torna al suo posto e la calibratura torna corretta da sola. Questo
 * file non lo ridichiara e non lo compensa.
 */

/* ------------------------------------------------------------------
   LOGO DI MARCA - card di listino e scheda prodotto
   ------------------------------------------------------------------ */
.tsn-brand-badge {
    display: block;
    margin: 6px 0 0;
    line-height: 0;
}

.tsn-brand-badge picture,
.tsn-brand-badge img {
    display: block;
}

.tsn-brand-badge--listing img {
    width: auto;
    max-width: 100px;
    height: auto;
    max-height: 50px;
    object-fit: contain;
    object-position: left center;
}

.tsn-brand-badge--product_page img {
    width: auto;
    max-width: 200px;
    height: auto;
    max-height: 70px;
    object-fit: contain;
    object-position: left center;
}

/* UNA sola ricetta sr-only per tutto il modulo (v1.2.0).
   Il tema espone `.tsn-sr-only()` come MIXIN LESS, non come classe
   pubblica: un CSS di modulo non puo' chiamarlo. Si dichiara qui, una
   volta, con namespace proprio, e la si CONDIVIDE coi nodi che gia' la
   usavano invece di riscriverla ad ogni superficie.
   Chi la usa oggi:
     - `.tsn-brand-badge__name`: il nome resta nel markup per chi legge
       con uno screen reader, perche' il logo e' una immagine di marca e
       non un testo alternativo sufficiente da solo quando l alternativa
       e' vuota;
     - `.tsn-brand-sr-only`: il nome accessibile del glifo <<vedi tutto>>
       della testata di <<Altro da>>. */
.tsn-brand-sr-only,
.tsn-brand-badge__name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Il logo di scheda vive fra il prezzo e il resto della colonna
   informazioni: e' lo SLOT che il tema aveva riservato alle icone di
   attributo del fornitore precedente (order 4 nella sua mappa). Il
   valore e' dichiarato qui e non nel tema perche' il nodo e' nostro. */
.product-info-main > .tsn-brand-badge--product_page {
    order: 4;
    margin: 10px 0 0;
}

/* ------------------------------------------------------------------
   ALTRO DA {MARCA} - scheda prodotto: RAIL DI CARD IMMAGINE (v1.1.0)

   IMPOSTAZIONE di riferimento (collaudo 06-09): immagine, sotto una riga
   piccola col nome, nient altro. Nessun prezzo, nessun bottone.

   PERCHE' LE REGOLE STANNO QUI E NON NEL TEMA. La grammatica della card
   Studio vive in `_studio-card-grammar.less` come MIXIN LESS scopati dal
   chiamante, non come classi pubbliche: un modulo non puo' chiamare un
   mixin di un tema, e il perimetro di questo giro non tocca il tema. Si
   RIDICHIARANO quindi i soli VALORI del canone, ognuno con la sua fonte
   misurata, e mai una regola su una primitiva del core o del tema:
     - rapporto della cornice 800/1044 = quello della card di listino
       (`_studio-card-grammar.less:165`, `:310`);
     - fondo della cornice #fbfbfb = @studio-catalog-photo-stage
       (`_studio-catalog.less:6`). E' una variabile LESS PRIVATA del
       tema, non un token CSS: si copia il valore e si lascia vincere
       una eventuale variabile CSS futura, se il tema la esporra'.
   ⚠️ Le larghezze rese qui (43vw / 220px / flex-fill >=1024px) sono in
   LOCKSTEP con la costante CARD_SIZES di ViewModel/MoreFromBrand.php.
   Cambiare una senza l altra fa scaricare al browser il gradino
   sbagliato su ogni card, che e' esattamente il difetto misurato su x234.
   ------------------------------------------------------------------ */

/* v1.2.1 (xBRANDS3) - IL GRUPPO COPRE LA LARGHEZZA DISPONIBILE.
   Rilievo di Riccardo: <<tutto il gruppo di correlati deve coprire
   l intera larghezza disponibile con un margine laterale vuoto>>. Il
   v1.2.0 centrava il blocco a `max-width: 1280px` dentro una PDP
   full-bleed larga ~2077px: un vuoto asimmetrico enorme a destra
   (misurato 398px per lato), non un margine di pagina.

   Il gutter NON e' inventato: e' quello gia' in uso dalla PDP per un
   blocco full-bleed GEMELLO sulla stessa pagina, <<Completa il look>>
   (tema, `_studio-product.less:184-196`, `.tessin-studio-complete-look`
   + `__inner`): `width: 100%` + un contenitore interno
   `max-width: 1920px; margin: 0 auto; padding: 0 24px`, che scende a
   `16px` sotto 767px (`_studio-product.less:765`). Si RIUSA lo stesso
   valore invece di dichiararne uno nuovo, con un ponte a variabile CSS
   per chi lo legge da questo file senza compilare il LESS del tema. */
:root {
    --tsn-brand-morefrom-gutter: 24px;
}

.tsn-brand-morefrom {
    box-sizing: border-box;
    width: 100%;
    max-width: 1920px;
    /* v1.2.1: margine INFERIORE nuovo, oltre al superiore - vedi nota
       piu' sotto, dopo `__rail`: e' l aria richiesta sopra i breadcrumb
       del tema. */
    margin: 48px auto 48px;
    padding: 0 var(--tsn-brand-morefrom-gutter, 24px);
}

@media (max-width: 767px) {
    :root {
        --tsn-brand-morefrom-gutter: 16px;
    }
}

/* LA TESTATA (v1.2.1, xBRANDS3 - RETTIFICA della v1.2.0/xTEMA0609).

   Riccardo, due passaggi sullo stesso rilievo: prima <<lo chevron ...
   e' scollegato da tutto il testo>>, poi la precisazione che chiude
   ogni ambiguita' - <<dovrebbe essere affiancato al nome del brand>>.
   La v1.2.0 centrava il TITOLO con una griglia a tre colonne e
   mandava il glifo in colonna 3, giustificato al bordo destro del
   riquadro: risultato, titolo e glifo vivevano a distanza fissa
   l uno dall altro invece che vicini. Qui titolo e glifo sono un
   SOLO gruppo flex, centrato come insieme, con un gap piccolo: il
   glifo segue il nome della marca sulla stessa riga, come un
   suffisso del titolo. Quando il glifo non c e' (marca senza URL) il
   solo titolo resta centrato lo stesso, perche' `justify-content`
   centra qualunque numero di figli. */
.tsn-brand-morefrom__head {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.tsn-brand-morefrom__title {
    /* Un elemento flex ha `min-width: auto`: senza questo, un titolo
       lungo senza spazi (o senza spazio per andare a capo) potrebbe
       sfondare il contenitore invece di restringersi/andare a capo. */
    min-width: 0;
    margin: 0;
    font-size: 20px;
    letter-spacing: .02em;
    text-align: center;
}

/* Il collegamento e' un GLIFO: senza testo non ha una superficie
   tattile propria. La superficie VISIVA resta stretta sul disegno
   (nessuna larghezza fissa 44px sul box in flusso): e' quella che
   fissa la distanza dal titolo tramite il `gap` del gruppo, cosi' il
   glifo resta ATTACCATO al nome invece di essere spinto via da un
   riquadro invisibile piu' largo. L area tattile 44x44 (WCAG 2.5.8
   chiede 24, il canone della casa preferisce 44) vive su uno
   pseudo-elemento assoluto: si espande OLTRE il disegno senza
   occupare spazio nel flusso e senza spostare il gap dal titolo. */
.tsn-brand-morefrom__all {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

.tsn-brand-morefrom__all::before {
    content: '';
    position: absolute;
    /* svg 8x14: (44-14)/2=15 verticale, (44-8)/2=18 orizzontale. */
    top: -15px;
    bottom: -15px;
    left: -18px;
    right: -18px;
}

/* Nessun colore inventato: il tratto e' `currentColor` nel markup, e
   qui si muove solo l opacita'. Lo scarto di 2px verso destra dice
   <<avanti>> col movimento invece che con una parola. */
.tsn-brand-morefrom__all-chevron {
    display: block;
    transition: transform 200ms ease;
}

.tsn-brand-morefrom__all:hover {
    opacity: .62;
}

.tsn-brand-morefrom__all:hover .tsn-brand-morefrom__all-chevron {
    transform: translateX(2px);
}

.tsn-brand-morefrom__all:focus-visible,
.tsn-brand-morefrom__link:focus-visible,
.tsn-brand-index__link:focus-visible,
.tsn-brand-strip__link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* v1.2.1 (xBRANDS3) - punto 3 del rilievo: <<ci deve creare un margine in
   alto nei breadcrumb ora troppo appiccicati alle schede dei prodotti
   correlati>>. Il breadcrumb del tema (`.tsn-pdp005-footer-breadcrumb`,
   fuori dal perimetro di questo modulo) non tocca il proprio
   `margin-top`: l aria si crea qui, sul margine INFERIORE di
   `.tsn-brand-morefrom` dichiarato piu' sopra (`margin: 48px auto 48px`).
   Il valore e' lo STESSO 48px gia' in uso per il margine superiore: e' il
   passo verticale gia' stabilito da questo blocco, non un numero nuovo -
   e resta invariato da mobile a desktop, come lo era gia' il superiore. */
.tsn-brand-morefrom__rail {
    display: flex;
    gap: 12px;
    margin: 0;
    padding: 0 0 8px;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
}

/* Base = telefono: card piu' strette, cosi' la successiva si affaccia
   sul bordo e dichiara che la fila scorre. */
.tsn-brand-morefrom__item {
    flex: 0 0 auto;
    width: 43vw;
    scroll-snap-align: start;
}

.tsn-brand-morefrom__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* La cornice: stessa meccanica di .tsn-media-frame() del tema
   (position/overflow/width/aspect-ratio), ridichiarata perche' un mixin
   LESS di tema non e' consumabile da un CSS di modulo. */
.tsn-brand-morefrom__frame {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 800 / 1044;
    background-color: var(--tsn-catalog-photo-stage, #fbfbfb);
}

/* Riempimento: stessa meccanica di .tsn-media-fill(). */
.tsn-brand-morefrom__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* La riga del nome: piccola, e con una altezza minima di due righe cosi'
   i fondi delle card restano allineati anche quando un nome va a capo e
   un altro no. */
.tsn-brand-morefrom__name {
    display: block;
    margin-top: 8px;
    min-height: 2.7em;
    font-size: 12.5px;
    line-height: 1.35;
    letter-spacing: .02em;
    overflow-wrap: anywhere;
}

/* Il target tattile e' la card intera, non la sola riga di testo: la
   somma cornice + nome supera abbondantemente i 24px del WCAG 2.5.8. */
@media (min-width: 768px) {
    .tsn-brand-morefrom__rail {
        gap: 18px;
    }

    .tsn-brand-morefrom__item {
        width: 220px;
    }

    .tsn-brand-morefrom__name {
        font-size: 13px;
    }
}

/* v1.2.1 (xBRANDS3) - dai 1024px in su le CINQUE card RIEMPIONO la riga,
   invece di restare a `220px` fisso col vuoto a destra: e' il punto 2 del
   rilievo di Riccardo (<<coprire l intera larghezza disponibile>>). Sotto
   1024px il rail resta INVARIATO (scorrevole, 43vw/220px): un rail che
   scorre ha senso solo quando le card non riempiono la riga, e sotto
   1024px lo spazio per 5 card intere non c e'.
   ⚠️ Il `gap: 18px` qui e' lo stesso della fascia 768-1023: la card
   ridiventa fluida ma il PASSO fra le card resta lo stesso, non
   proporzionale - scelta dichiarata, non misurata come necessaria. */
@media (min-width: 1024px) {
    .tsn-brand-morefrom__rail {
        gap: 18px;
    }

    .tsn-brand-morefrom__item {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }
}

/* ------------------------------------------------------------------
   INDICE MARCHE
   ------------------------------------------------------------------ */
.tsn-brand-index__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tsn-brand-index__item {
    margin: 0;
}

.tsn-brand-index__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 18px 12px;
    text-align: center;
}

.tsn-brand-index__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 64px;
}

.tsn-brand-index__logo img {
    max-width: 160px;
    max-height: 64px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.tsn-brand-index__name {
    font-size: 14px;
    letter-spacing: .04em;
}

.tsn-brand-index__note {
    font-size: 12.5px;
    line-height: 1.5;
    opacity: .78;
}

/* Una marca senza URL non finge di essere cliccabile. */
.tsn-brand-index__link.is-plain,
.tsn-brand-strip__link.is-plain {
    cursor: default;
}

/* ------------------------------------------------------------------
   STRISCIA EDITORIALE
   ------------------------------------------------------------------ */
.tsn-brand-strip {
    margin: 40px 0;
}

.tsn-brand-strip__title {
    margin: 0 0 18px;
    font-size: 18px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.tsn-brand-strip__rail {
    display: flex;
    gap: 28px;
    margin: 0;
    padding: 0 0 10px;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
}

.tsn-brand-strip__item {
    flex: 0 0 auto;
    width: 180px;
    scroll-snap-align: start;
}

.tsn-brand-strip__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-height: 44px;
}

.tsn-brand-strip__img {
    max-width: 180px;
    max-height: 70px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.tsn-brand-strip__name {
    font-size: 12.5px;
    letter-spacing: .04em;
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .tsn-brand-morefrom__rail,
    .tsn-brand-strip__rail {
        scroll-behavior: auto;
    }

    /* Il glifo resta dov e': lo stato <<sto puntando>> si legge
       dall opacita', che non e' movimento. */
    .tsn-brand-morefrom__all-chevron {
        transition: none;
    }

    .tsn-brand-morefrom__all:hover .tsn-brand-morefrom__all-chevron {
        transform: none;
    }
}