/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
.size-guide-table {
    /* Imposta un limite di larghezza, ad esempio, per schermi più piccoli */
    max-width: 100%; 
    /* Questo è il comando chiave: aggiunge una barra di scorrimento orizzontale */
    overflow-x: auto; 
    /* (Opzionale) Rende la barra di scorrimento visibile solo quando necessario */
    -webkit-overflow-scrolling: touch; 
}
.size-guide-table tr th,
.size-guide-table tr td {
  text-align: center;
  width: 100px;
}

.size-guide-table tr:nth-child(even) {
  background-color: #fbfbfb;
}

.size-guide-table th {
  background-color: #f5f5f5;
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/

@media screen and (max-width: 600px) {
    /* 1. Trasforma la tabella in un blocco per occupare l'intera larghezza */
    table, thead, tbody, th, td, tr {
        display: block;
    }

    /* 2. Nascondi l'intestazione standard (non è più utile verticalmente) */
    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    /* 3. Aggiungi un bordo per separare le righe (ora verticali) */
    tr {
        border: 1px solid #ccc;
        margin-bottom: 5px;
        padding: 10px;
    }

    /* 4. Assegna gli header come etichette a ogni cella (td) */
    td {
        /* Rimuovi il bordo orizzontale della cella e allinea il testo */
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        padding-left: 50%; /* Spazio per l'etichetta */
        text-align: left;
    }

    /* 5. Usa l'attributo "data-label" per mostrare il nome della colonna */
    td:before {
        /* Questo prende il contenuto dall'attributo HTML data-label */
        content: attr(data-label);
        position: absolute;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        font-weight: bold;
    }
}
}