/**
 * attributeextra - CSS pour l'affichage des descriptions d'attributs en front-office.
 */
/* Style pour le conteneur de chaque option radio (ex: li.input-container) */
/* Vous devrez adapter ce sélecteur pour correspondre à votre thème si nécessaire */
.product-variants .input-container,
.product-variants li[class*="product-variants-item"] ul li,
.product-variants .variant-input-item {
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
    /* Si float-xs-left est utilisé, pour espacer horizontalement */
    border-radius: 4px;
    background-color: #f9f9f9;
    /* Si vos éléments flottent et que vous voulez un meilleur contrôle : */
    /* float: left; */
    /* width: auto; ou une largeur spécifique */
    /* min-width: 150px; */
}

/* Pour contrer le float-xs-left si vous voulez un affichage en bloc empilé verticalement */
/* .product-variants ul { clear: both; } */
/* .product-variants li.input-container { float: none; display: block; width: 100%; } */
/* Style pour le label (span.radio-label) ou le nom de la valeur de l'attribut */
.product-variants .input-container label,
.product-variants .input-container .radio-label,
.product-variants li[class*="product-variants-item"] ul li label,
.product-variants li[class*="product-variants-item"] ul li .radio-label,
.product-variants .variant-input-item label,
.product-variants .variant-input-item .radio-label {
    font-weight: bold;
    display: block;
    /* Assure que la description passe en dessous */
    margin-bottom: 5px;
    /* Espace entre le nom de la valeur et sa description */
    color: #333;
}

/* Style pour la description elle-même, insérée par JavaScript */
.attribute-value-static-description {
    display: block;
    font-size: 0.9em;
    color: #555;
    line-height: 1.5;
    clear: both;
    /* Important si les éléments précédents flottent */
    width: 100%;
    /* border-top: 1px dashed #eee;  Optionnel */
}

.attribute-value-static-description p {
    margin: 0;
    padding: 0;
}

.attribute-value-static-description p:not(:last-child) {
    margin-bottom: 8px;
}

/* Styles pour les descriptions des options de select */
.select-options-static-descriptions-block {
    border: 1px solid #eaeaea;
    padding: 10px;
    margin-top: 8px;
    background-color: #fcfcfc;
    font-size: 0.9em;
    border-radius: 4px;
    clear: both;
    /* Au cas où le select flotterait */
}

.select-options-static-descriptions-block .select-option-static-description-item {
    margin-bottom: 6px;
    line-height: 1.4;
}

.select-options-static-descriptions-block .select-option-static-description-item:last-child {
    margin-bottom: 0;
}

.select-options-static-descriptions-block .select-option-static-description-item strong {
    margin-right: 5px;
    color: #333;
}

.product-variants ul .input-container-color {
    position: relative;
    border: 1px solid #f2f2f2;
    width: 328px;
    height: 400px;
    background: #fafafc;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-direction: row-reverse;
}

.product-variants>.product-variants-item ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 0;
}

.product-actions .product-variants .product-variants-item .color-margin {
    margin-right: 0px !important;
}

#product .product-variants>.product-variants-item ul {
    justify-content: space-between;
}