/**
 * Omnia_ProductTabs — Riskin visivo della barra tab nativa (Dettagli / Ulteriori
 * Informazioni / Recensioni / tab custom). Non tocca markup né JS di Magento
 * (product/view/details.phtml + il widget "tabs"): solo CSS, attivo quando il
 * body ha la classe corrispondente allo stile scelto in admin.
 *
 * Il blocco mobile condiviso (minimale / accordion / sidebar) è in fondo al
 * file di proposito: a parità di specificità le regole vincono in base
 * all'ordine nel foglio di stile, quindi deve venire DOPO tutte le regole
 * "sempre attive" di accordion/sidebar per poterle sovrascrivere sotto i
 * 768px.
 */

/*
 * Nasconde subito, via puro CSS (nessuna dipendenza da timing JS), tutti i
 * pannelli non attivi — evita che compaiano tutti insieme per un istante
 * durante il caricamento della pagina. Il contenuto segue sempre il proprio
 * titolo come fratello immediato nel markup nativo (verificato sul core:
 * product/view/details.phtml), quindi il selettore "titolo non attivo +
 * contenuto" è affidabile indipendentemente da quale stile tab è attivo.
 */
.product.info.detailed .data.item.title:not(.active) + .data.item.content {
    display: none;
}

/* ── Stile "minimale": testo con separatori verticali, nessun box ── */

/*
 * Nel markup nativo titoli e contenuti si alternano nel DOM (titolo,
 * contenuto, titolo, contenuto...): non sono tutti consecutivi. Con
 * display:block/inline-block non è possibile raggruppare tutti i titoli in
 * riga quando in mezzo c'è un contenuto visibile. Il flexbox con "order"
 * risolve: order:1 porta tutti i titoli in cima indipendentemente dalla
 * loro posizione nel DOM, order:2 + flex-basis:100% forza il contenuto
 * (l'unico visibile, gli altri sono display:none) su una riga propria sotto.
 */
body.omnia-tabs-style-minimal .product.info.detailed .data.items {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
}

body.omnia-tabs-style-minimal .product.info.detailed .data.item.title,
body.omnia-tabs-style-minimal .product.info.detailed .data.item.title::before,
body.omnia-tabs-style-minimal .product.info.detailed .data.item.title::after {
    background: none;
    border: none;
    box-shadow: none;
}

body.omnia-tabs-style-minimal .product.info.detailed .data.item.title {
    order: 1;
    float: none;
    margin: 0 0 8px;
    padding: 0 14px;
    border-right: 1px solid #d1d1d1;
}

body.omnia-tabs-style-minimal .product.info.detailed .data.item.title:first-of-type {
    padding-left: 0;
}

body.omnia-tabs-style-minimal .product.info.detailed .data.switch {
    height: auto;
    padding: 0;
    border: none;
    background: none;
    font-size: 14px;
    color: #757575;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

body.omnia-tabs-style-minimal .product.info.detailed .data.item.title.active .data.switch {
    color: #1a1a1a;
    font-weight: 600;
}

/*
 * Luma posiziona .data.item.content con float:right + margin-left:-100% +
 * width:100% (vedi styles-l.css compilato): un trucco pensato per il layout
 * a float originale. Va azzerato esplicitamente, altrimenti resta attivo
 * insieme al nostro flex e produce sovrapposizioni.
 */
body.omnia-tabs-style-minimal .product.info.detailed .data.item.content {
    order: 2;
    flex: 0 0 100%;
    display: block;
    float: none;
    width: auto;
    margin-left: 0;
    box-sizing: border-box;
    border: none;
    border-top: 1px solid #e0e0e0;
    margin-top: 8px;
    padding: 16px 0 0;
}

/* ══════════════════════════════════════════════════════════════════════
   Stile "accordion": sempre a fisarmonica, desktop e mobile (la variante
   desktop viene comunque sovrascritta sotto i 768px, vedi in fondo al file).
   Stile "sidebar": da 769px in su ha un layout dedicato a due colonne (vedi
   più sotto); sotto i 769px condivide queste stesse regole con accordion.
   ══════════════════════════════════════════════════════════════════════ */

body.omnia-tabs-style-accordion .product.info.detailed .data.items,
body.omnia-tabs-style-sidebar .product.info.detailed .data.items {
    display: block;
}

body.omnia-tabs-style-accordion .product.info.detailed .data.item.title,
body.omnia-tabs-style-accordion .product.info.detailed .data.item.title::before,
body.omnia-tabs-style-accordion .product.info.detailed .data.item.title::after,
body.omnia-tabs-style-sidebar .product.info.detailed .data.item.title,
body.omnia-tabs-style-sidebar .product.info.detailed .data.item.title::before,
body.omnia-tabs-style-sidebar .product.info.detailed .data.item.title::after {
    background: none;
    box-shadow: none;
}

body.omnia-tabs-style-accordion .product.info.detailed .data.item.title,
body.omnia-tabs-style-sidebar .product.info.detailed .data.item.title {
    display: block;
    float: none;
    border: none;
    border-bottom: 1px solid #e0e0e0;
    padding: 0;
    margin: 0;
}

body.omnia-tabs-style-accordion .product.info.detailed .data.switch,
body.omnia-tabs-style-sidebar .product.info.detailed .data.switch {
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 4px;
    border: none;
    background: none;
    font-size: 15px;
    color: #4a4a4a;
    text-decoration: none;
}

body.omnia-tabs-style-accordion .product.info.detailed .data.item.title.active .data.switch,
body.omnia-tabs-style-sidebar .product.info.detailed .data.item.title.active .data.switch {
    color: #1a1a1a;
    font-weight: 600;
}

/* Chevron disegnato in CSS puro (nessun font/icona esterna): un angolo
   ruotato a 45° punta in giù, a 225° punta in su quando il tab è attivo. */
body.omnia-tabs-style-accordion .product.info.detailed .data.switch::after,
body.omnia-tabs-style-sidebar .product.info.detailed .data.switch::after {
    content: '';
    flex: none;
    width: 8px;
    height: 8px;
    margin-left: 12px;
    border-right: 2px solid #999;
    border-bottom: 2px solid #999;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

body.omnia-tabs-style-accordion .product.info.detailed .data.item.title.active .data.switch::after,
body.omnia-tabs-style-sidebar .product.info.detailed .data.item.title.active .data.switch::after {
    transform: rotate(225deg);
}

body.omnia-tabs-style-accordion .product.info.detailed .data.item.content,
body.omnia-tabs-style-sidebar .product.info.detailed .data.item.content {
    display: block;
    float: none;
    width: auto;
    margin-left: 0;
    box-sizing: border-box;
    border: none;
    padding: 0 4px 20px;
}

/*
 * ── Sidebar: da 769px in su, colonna titoli a sinistra + contenuto a destra ──
 * Il contenuto è posizionato in modo assoluto, ancorato al top del
 * contenitore (position:relative): con titoli e contenuti alternati nel DOM
 * e un solo contenuto visibile alla volta, sia flex "order" che CSS grid
 * con auto-placement non garantiscono un allineamento verticale affidabile
 * tra la colonna titoli e il contenuto. L'assoluto elimina l'ambiguità.
 *
 * Limite noto: essendo il contenuto fuori dal flusso, non contribuisce
 * all'altezza del contenitore — min-height dà spazio di sicurezza. Se i
 * testi dei tab sono molto lunghi, aumenta il valore qui sotto.
 */
@media (min-width: 769px) {
    body.omnia-tabs-style-sidebar .product.info.detailed .data.items {
        position: relative;
        min-height: 220px;
    }

    body.omnia-tabs-style-sidebar .product.info.detailed .data.item.title {
        display: block;
        float: none;
        width: 200px;
        box-sizing: border-box;
        border-bottom: none;
        border-left: 2px solid transparent;
        padding-left: 14px;
        margin: 0;
    }

    body.omnia-tabs-style-sidebar .product.info.detailed .data.item.title.active {
        border-left-color: #1a1a1a;
    }

    body.omnia-tabs-style-sidebar .product.info.detailed .data.switch {
        padding: 10px 0;
    }

    body.omnia-tabs-style-sidebar .product.info.detailed .data.switch::after {
        display: none;
    }

    body.omnia-tabs-style-sidebar .product.info.detailed .data.item.content {
        position: absolute;
        top: 0;
        left: 240px;
        right: 0;
        margin: 0;
        padding: 0;
        border: none;
    }
}

/*
 * ── Mobile: accordion "a chip", condiviso da minimale / accordion / sidebar ──
 * Su schermi stretti una riga di tab orizzontale (o una sidebar) non
 * funziona: tutti e tre gli stili convergono su questo stesso accordion.
 * Invece dell'"order" usato sopra per il desktop (che raggruppa tutti i
 * titoli in cima) torniamo al flusso naturale del DOM: titolo, poi (se
 * attivo) il suo contenuto, poi il titolo successivo — cioè un vero
 * accordion, ogni contenuto resta subito sotto al proprio titolo invece
 * che tutti in fondo alla pagina.
 *
 * Nessuna riga divisoria tra le voci: lo spazio tra una sezione e la
 * successiva viene dal margin-top di ogni titolo (16px), non da un bordo —
 * così la spaziatura resta uguale sia che la sezione sopra sia aperta
 * (contenuto visibile) sia che sia chiusa (nessun contenuto nel mezzo).
 *
 * Questo blocco è volutamente l'ultimo del file: deve sovrascrivere sia le
 * regole desktop di accordion/sidebar sopra (stessa specificità → vince chi
 * viene dopo) sia il layout a due colonne di sidebar (che comunque non si
 * applica sotto i 769px, ma i reset qui sono espliciti per sicurezza).
 */
@media (max-width: 768px) {
    body.omnia-tabs-style-minimal .product.info.detailed .data.items,
    body.omnia-tabs-style-accordion .product.info.detailed .data.items,
    body.omnia-tabs-style-sidebar .product.info.detailed .data.items {
        display: block;
        position: static;
        min-height: 0;
    }

    body.omnia-tabs-style-minimal .product.info.detailed .data.item.title,
    body.omnia-tabs-style-accordion .product.info.detailed .data.item.title,
    body.omnia-tabs-style-sidebar .product.info.detailed .data.item.title {
        order: initial;
        display: block;
        float: none;
        width: auto;
        border: none;
        padding: 0;
        margin: 16px 0 0;
    }

    body.omnia-tabs-style-minimal .product.info.detailed .data.item.title:first-of-type,
    body.omnia-tabs-style-accordion .product.info.detailed .data.item.title:first-of-type,
    body.omnia-tabs-style-sidebar .product.info.detailed .data.item.title:first-of-type {
        margin-top: 0;
    }

    body.omnia-tabs-style-minimal .product.info.detailed .data.switch,
    body.omnia-tabs-style-accordion .product.info.detailed .data.switch,
    body.omnia-tabs-style-sidebar .product.info.detailed .data.switch {
        position: static;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fafafa;
        border: 1px solid #e5e5e5;
        border-radius: 10px;
        padding: 5px 14px;
        font-size: 14px;
        color: #757575;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

    body.omnia-tabs-style-minimal .product.info.detailed .data.item.title.active .data.switch,
    body.omnia-tabs-style-accordion .product.info.detailed .data.item.title.active .data.switch,
    body.omnia-tabs-style-sidebar .product.info.detailed .data.item.title.active .data.switch {
        color: #1a1a1a;
        font-weight: 600;
    }

    body.omnia-tabs-style-minimal .product.info.detailed .data.switch::after,
    body.omnia-tabs-style-accordion .product.info.detailed .data.switch::after,
    body.omnia-tabs-style-sidebar .product.info.detailed .data.switch::after {
        content: '+';
        width: auto;
        height: auto;
        margin-left: 12px;
        border: none;
        transform: none;
        color: #999;
        font-size: 18px;
        font-weight: 400;
        line-height: 1;
    }

    body.omnia-tabs-style-minimal .product.info.detailed .data.item.title.active .data.switch::after,
    body.omnia-tabs-style-accordion .product.info.detailed .data.item.title.active .data.switch::after,
    body.omnia-tabs-style-sidebar .product.info.detailed .data.item.title.active .data.switch::after {
        content: '\2212';
        transform: none;
    }

    body.omnia-tabs-style-minimal .product.info.detailed .data.item.content,
    body.omnia-tabs-style-accordion .product.info.detailed .data.item.content,
    body.omnia-tabs-style-sidebar .product.info.detailed .data.item.content {
        order: initial;
        flex: none;
        position: static;
        border: none;
        margin: 0;
        padding: 12px 14px 0;
    }
}

/*
 * ── Tab "Compatibilità Veicoli" (PartFinder): albero Marca > Modello >
 * Motorizzazione ── Indipendente dallo stile tab scelto (default / minimale /
 * accordion / sidebar): riguarda il contenuto dentro il tab, non la barra.
 */
.omnia-partfinder-compatibility details {
    margin: 2px 0;
}

.omnia-partfinder-compatibility summary {
    cursor: pointer;
    padding: 6px 0 6px 22px;
    font-size: 14px;
    color: #333;
    position: relative;
    list-style: none;
}

.omnia-partfinder-compatibility summary::-webkit-details-marker {
    display: none;
}

.omnia-partfinder-compatibility summary::before {
    content: '+';
    position: absolute;
    left: 0;
    top: 6px;
    width: 16px;
    height: 16px;
    line-height: 14px;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: #757575;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.omnia-partfinder-compatibility details[open] > summary::before {
    content: '\2212';
}

.omnia-partfinder-compatibility .omnia-pf-level-0 > summary {
    font-weight: 600;
}

.omnia-partfinder-compatibility .omnia-pf-children,
.omnia-partfinder-compatibility .omnia-pf-leaf-list {
    margin: 0 0 6px 20px;
    padding: 0;
}

.omnia-partfinder-compatibility .omnia-pf-leaf-list {
    list-style: none;
}

.omnia-partfinder-compatibility .omnia-pf-leaf-list li {
    position: relative;
    margin: 3px 0;
    padding-left: 22px;
    font-size: 13px;
    color: #4a4a4a;
}

.omnia-partfinder-compatibility .omnia-pf-leaf-list li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f5f5f5;
    border: 1px solid #ddd;
}