/* ==========================================================================
   Styles AMÉLIORÉS pour le Bouton d'ouverture du Guide des Tailles sur la Fiche Produit
   Inspiré par le style de la notice "Dimensions du produit" et du toggle de la modale.
   ========================================================================== */

.guide-des-tailles-wrapper-avant-options {
    margin-bottom: 15px; /* Augmenter un peu l'espace en dessous si besoin */
    /* S'assurer que le wrapper permet au bouton d'être stylé correctement,
       par exemple, s'il doit être centré ou prendre une certaine largeur. */
}

/**
.commercekit-size-guide .commercekit-sg-label svg {
    width: 28px !important;
    height: 28px !important;
    
   left: 11px;
    margin-top: -9px;
}*/

.guide-des-tailles-wrapper-avant-options .commercekit-sg-icon svg.size_guide_default_icon {
    width: 28px !important;
    height: 28px !important;
    display: inline-block !important;
    vertical-align: middle;
    /* fill: none;  <-- Si votre SVG est rempli (comme celui-ci), vous ne voulez probablement pas 'fill: none;' ici.
                        La couleur sera gérée par l'attribut 'fill' de la balise SVG elle-même.
                        Si l'SVG était basé sur des 'stroke', alors 'fill: none; stroke: currentColor;' serait pertinent.
                        Pour cet SVG spécifique qui utilise 'fill-rule', 'fill' est la propriété clé pour la couleur. */
    /* stroke: currentColor; <-- Inutile si l'icône est remplie et non basée sur des traits. */
}
.commercekit-size-guide .commercekit-sg-label svg {
    margin-top: -10px !important;
    left: 11px !important;
}

/* Cibler le bouton principal du Guide des Tailles sur la fiche produit */
.commercekit-size-guide .commercekit-sg-label {
    display: inline-flex;         /* Aligne l'icône et le texte sur une ligne et permet d'utiliser gap */
    align-items: center;              /* Centre verticalement l'icône et le texte */
    background-color: #ccd4dd;        /* Fond gris clair, comme la notice */
    color: #495057;                   /* Couleur de texte discrète mais lisible */
    padding: 8px 15px;                /* Espacement interne confortable (similaire notice) */
    padding-left: 38px !important;
    border-radius: 20px;              /* Bords arrondis pour un look "pilule" */
    font-size: 0.9em;                 /* Ajustez selon la taille souhaitée, un peu plus petit que le texte normal */
    font-weight: 600;                 /* Texte en semi-gras pour plus de présence */
    text-decoration: none;            /* Au cas où le thème ajouterait un soulignement aux boutons */
    border: 1px solid transparent;    /* Supprime la bordure par défaut du bouton ou la définit */
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; /* Transitions douces */
    box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* Ombre subtile */
}

/* Effet au survol */
.commercekit-size-guide .commercekit-sg-label:hover {
    background-color: #aeb8c1;        /* Fond légèrement plus foncé au survol */
    color: #333;                       /* Texte un peu plus foncé au survol */
    box-shadow: 0 2px 4px rgba(0,0,0,0.07);
}

/* Ajustements pour l'icône SVG à l'intérieur du nouveau bouton */
.commercekit-size-guide .commercekit-sg-label .commercekit-sg-icon {
    display: inline-flex; /* S'assurer que l'icône est bien alignée */
    align-items: center;
    margin-right: 8px;    /* Espace entre l'icône et le texte */
}
.commercekit-size-guide svg path {
    fill: #000000 !important;
}



/* Le span contenant le texte "GUIDE DES TAILLES" */
.commercekit-size-guide .commercekit-sg-label > span:not(.commercekit-sg-icon) {
    /* Si vous avez besoin de styles spécifiques pour ce texte, ajoutez-les ici.
       Par exemple, pour ajuster sa position verticale s'il n'est pas parfaitement centré
       avec l'icône à cause des hauteurs de ligne. Mais align-items: center sur le parent
       devrait bien gérer cela. */
    text-decoration: none;
}
.theme-shoptimizer .commercekit-size-guide button:hover span {
    text-decoration: none !important;
}


/* Optionnel : Styles pour l'état focus (accessibilité) */
.commercekit-size-guide .commercekit-sg-label:focus-visible {
    outline: 2px solid #007bff; /* Ou une couleur d'accentuation de votre thème */
    outline-offset: 2px;
}


/* ==========================================================================
   Styles Généraux pour le Conteneur Principal du Guide des Tailles
   ========================================================================== */
.size-guide-container {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    color: #333;
    line-height: 1.6;
}

.size-guide-container > .sg-unit-toggle-checkbox { /* Checkbox maintenant enfant direct */
    display: none;
}

/* ==========================================================================
   Ligne d'En-tête : Notice et Toggle CM/POUCES
   ========================================================================== */
.size-guide-container .sg-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.size-guide-container .sg-product-dimensions-notice {
    background-color: #e9ecef;
    color: #495057;
    padding: 6px 15px;
    border-radius: 25px;
    font-size: 1em;
    font-weight: 500;
    line-height: 1.6;
}

.size-guide-container .sg-unit-toggle-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    background-color: #e9ecef;
    padding: 5px 6px;
    border-radius: 20px;
    user-select: none;
    transition: background-color 0.3s ease;
}
.size-guide-container .sg-unit-toggle-label:hover {
    background-color: #dee2e6;
}
.size-guide-container .sg-unit-toggle-label .sg-label-text {
    padding: 4px 10px;
    font-size: 13px;
    font-weight: 500;
    color: #6c757d;
    transition: color 0.3s ease, font-weight 0.3s ease;
}
.size-guide-container .sg-unit-toggle-label .sg-toggle-visual-switch {
    width: 42px;
    height: 22px;
    border-radius: 11px;
    position: relative;
    transition: background-color 0.3s ease;
    margin: 0 4px;
}
.size-guide-container .sg-unit-toggle-label .sg-toggle-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), background-color 0.3s ease;
}

/* Styles Conditionnels pour l'apparence du Toggle CM/POUCES */
/* CM actif */
.size-guide-container > .sg-unit-toggle-checkbox:not(:checked) ~ .sg-header-row .sg-unit-toggle-label .sg-cm-text { font-weight: 700; }
.size-guide-container > .sg-unit-toggle-checkbox:not(:checked) ~ .sg-header-row .sg-unit-toggle-label .sg-toggle-visual-switch { background-color: #343a40; }
.size-guide-container > .sg-unit-toggle-checkbox:not(:checked) ~ .sg-header-row .sg-unit-toggle-label .sg-toggle-dot { background-color: #f8f9fa; transform: translateX(0px); }
/* POUCES actif */
.size-guide-container > .sg-unit-toggle-checkbox:checked ~ .sg-header-row .sg-unit-toggle-label .sg-inch-text { font-weight: 700; color: #212529; }
.size-guide-container > .sg-unit-toggle-checkbox:checked ~ .sg-header-row .sg-unit-toggle-label .sg-toggle-visual-switch { background-color: #adb5bd; }
.size-guide-container > .sg-unit-toggle-checkbox:checked ~ .sg-header-row .sg-unit-toggle-label .sg-toggle-dot { background-color: #343a40; transform: translateX(20px); }

/* ==========================================================================
   Styles pour les Onglets de Sélection de Taille (XS, S, M...)
   ========================================================================== */
.sg-size-tabs-mobile-wrapper { /* Nom conservé, mais fonction globale */
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* Ou 'center' selon la préférence */
    padding: 5px 0;
    margin-bottom: 20px;
    background-color: #f0f2f5;
    border-radius: 4px;
}
.sg-size-tab-input { display: none; } /* Cache les vrais radios */
.sg-size-tab-label {
    padding: 7px 12px;
    margin: 5px;
    border: 1px solid #d0d0d0;
    border-radius: 16px;
    background-color: #fff;
    color: #444;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
    font-size: 0.85em;
    line-height: 1.3;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.sg-size-tab-label:hover { border-color: #aaa; background-color: #f9f9f9; }
.sg-size-tab-input:checked + .sg-size-tab-label { background-color: #4a5568; color: #fff; border-color: #4a5568; }

/* ==========================================================================
   Styles pour le Tableau de Mesures (Affichage d'une seule ligne sélectionnée)
   ========================================================================== */

/* Affichage/masquage des vues CM et POUCES des tableaux */
.size-guide-container .sg-cm-view { display: block; } /* CM visible par défaut */
.size-guide-container .sg-inch-view { display: none; } /* POUCES caché par défaut */

.size-guide-container > .sg-unit-toggle-checkbox:checked ~ .sg-cm-view { display: none; }
.size-guide-container > .sg-unit-toggle-checkbox:checked ~ .sg-inch-view { display: block; }
/* Les règles pour :not(:checked) pour les vues de tableau sont implicites par les défauts ci-dessus */

/* Wrapper du tableau */
.size-guide-container .sg-table-wrapper {
    overflow-x: auto; /* Pour le défilement si le tableau est trop large */
    width: 100%;
}

.size-guide-container .sg-size-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin: 0 !important;
}

/* Cellules et en-têtes du tableau */
.size-guide-container .sg-size-table th,
.size-guide-container .sg-size-table td {
    border: 1px solid #dee2e6;
    padding: 10px 12px;
    text-align: center;
    vertical-align: middle;
}

/* En-tête du tableau (thead) */
.size-guide-container .sg-size-table thead {
    display: table-header-group !important; /* Assure que l'en-tête est visible */
}

.size-guide-container .sg-size-table thead th {
    font-weight: 600;
    padding: 12px 15px;
    transition: background-color 0.3s ease, color 0.3s ease; /* Pour le changement de thème CM/POUCES */
}

/* Cacher le premier en-tête ("Taille") comme demandé */
.size-guide-container .sg-size-table thead th:first-child {
    display: none;
}
/* Cacher la première cellule de données (celle qui affiche la taille comme "L") 
   dans le corps du tableau, car la taille est déjà indiquée par l'onglet actif. */
.size-guide-container .sg-size-table tbody td:first-child {
    display: none;
}

/* Styles pour les thèmes d'en-tête CM/POUCES (déjà définis plus haut, s'appliqueront ici) */
/* CM Actif */
.size-guide-container > .sg-unit-toggle-checkbox:not(:checked) ~ .sg-cm-view .sg-size-table thead th { background-color: #343a40; color: #f8f9fa; }
.size-guide-container > .sg-unit-toggle-checkbox:not(:checked) ~ .sg-inch-view .sg-size-table thead th { background-color: #f8f9fa; color: #212529; }
/* POUCES Actif */
.size-guide-container > .sg-unit-toggle-checkbox:checked ~ .sg-inch-view .sg-size-table thead th { background-color: #343a40; color: #f8f9fa; }
.size-guide-container > .sg-unit-toggle-checkbox:checked ~ .sg-cm-view .sg-size-table thead th { background-color: #f8f9fa; color: #212529; }


/* Lignes du corps du tableau (tbody) */
/* La visibilité de la ligne active (display: table-row) est gérée par le CSS dynamique PHP.
   Les autres lignes sont cachées par le CSS dynamique PHP (display: none). */

.size-guide-container .sg-size-table tbody tr[data-size-id] {
    /* Retrait des styles spécifiques aux "cartes" comme margin-bottom, box-shadow, etc. */
    /* border: 1px solid #e0e0e0; */ /* Les bordures des cellules suffisent */
}

.size-guide-container .sg-size-table td:first-child { /* La cellule contenant "XS", "S", etc. */
    font-weight: bold;
    color: #333;
    background-color: #f9f9f9; /* Fond distinct pour cette cellule */
    text-align: left; /* Peut-être aligner à gauche pour le label de taille */
    padding-left: 15px;
}

/* Suppression des styles ::before qui étaient pour la vue carte */
/* .sg-size-table td.sg-size-cell::before { content: none; } */ /* Plus besoin de sg-size-cell si on ne fait plus de carte */
/* .sg-size-table td[data-label]::before { content: none; } */

/* Si vous souhaitez toujours un léger zébrage sur la ligne visible (peu probable avec une seule ligne) */
/* .size-guide-container .sg-size-table tbody tr:nth-child(even)[data-size-id] { background-color: #fdfdfe; } */
/* .size-guide-container .sg-size-table tbody tr[data-size-id]:hover { background-color: #f1f3f5; } */


/* ==========================================================================
   Styles pour la Vue Responsive de l'En-tête (max-width: 424px)
   ========================================================================== */
@media (max-width: 424px) {
    .size-guide-container .sg-header-row {
        flex-direction: column;
        align-items: stretch;
    }
    .size-guide-container .sg-product-dimensions-notice {
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 10px;
        text-align: center;
    }
    .size-guide-container .sg-unit-toggle-container {
        width: 100%;
        box-sizing: border-box;
    }
    .size-guide-container .sg-unit-toggle-label {
        width: 100%;
        box-sizing: border-box;
        justify-content: center;
    }
}

/* ==========================================================================
   Styles pour le Guide des Tailles Visuel (Image avec points de mesure)
   ========================================================================== */
.vsg-visual-guide-wrapper {
    margin-top: 20px; /* Réduit un peu l'espace si le tableau est moins haut */
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background-color: #fdfdfd;
}

.vsg-garment-display {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    line-height: 0;
}

.vsg-garment-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
    opacity: 0.4;
}

.vsg-measurements-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.vsg-measurement-lines-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.vsg-measurement-lines-svg .measure-indicator-line,
.vsg-measurement-lines-svg .measure-indicator-arc,
.vsg-measurement-lines-svg .nouvelle-classe-arc-poitrine {
    stroke-width: 1;
    stroke-dasharray: 2,2;
    fill: none;
}
.vsg-measurement-lines-svg .measure-indicator-line,
.vsg-measurement-lines-svg .measure-indicator-arc {
    stroke: #4a5568;
}
.vsg-measurement-lines-svg .nouvelle-classe-arc-poitrine {
    stroke: #96a1b5;
}

.vsg-measurement-lines-svg .measure-indicator-tick {
    stroke: #4a5568;
    stroke-width: 1.5;
}

.vsg-measurement-point {
    position: absolute;
    transform: translate(-50%, -50%);
    background-color: white;
    color: #333;
    border: 3px solid #4a5568;
    border-radius: 8px;
    font-size: 0.85em;
    padding: 12px 10px;
    font-weight: 600;
    display: flex; /* Géré par le CSS dynamique pour le groupe actif */
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    text-align: center;
    z-index: 10;
    pointer-events: auto;
    white-space: nowrap;
}

.vsg-measurement-point .vsg-value-group { /* Ce groupe est rendu visible par PHP CSS */
    align-items: baseline;
    /* Les enfants .vsg-unit-cm et .vsg-unit-in gèrent leur propre display (none/inline-flex) */
}

.vsg-measurement-point .vsg-value-group .vsg-unit { /* Span pour "cm" ou "in" */
    font-size: 0.8em;
    margin-left: 3px;
    font-weight: normal;
    color: #555;
}

/* Gestion de l'affichage CM/POUCES pour les points du GUIDE VISUEL */
.vsg-visual-guide-wrapper .vsg-measurement-point .vsg-value-group .vsg-unit-cm {
    display: inline-flex !important;
    align-items: baseline;
}
.vsg-visual-guide-wrapper .vsg-measurement-point .vsg-value-group .vsg-unit-in {
    display: none !important;
    align-items: baseline;
}

.size-guide-container > .sg-unit-toggle-checkbox:checked ~ .vsg-visual-guide-wrapper .vsg-measurement-point .vsg-value-group .vsg-unit-cm {
    display: none !important;
}
.size-guide-container > .sg-unit-toggle-checkbox:checked ~ .vsg-visual-guide-wrapper .vsg-measurement-point .vsg-value-group .vsg-unit-in {
    display: inline-flex !important;
}

/* ==========================================================================
   Fin des Styles
   ========================================================================== */