/* Ajouté par Amine le 2026-10-15. */
.variations_form .cdx-curved-colors .thwvsf-wrapper-ul {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, var(--cdx-slot-width, 80px));
    align-items: start;
    justify-content: start;
    gap: 0 2px;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

.variations_form .cdx-curved-colors .thwvsf-wrapper-item-li.cdx-curved-swatch {
    position: relative !important;
    display: block !important;
    width: var(--cdx-slot-width, 80px) !important;
    height: var(--cdx-slot-height, 88px) !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    box-sizing: border-box;
}

.variations_form .cdx-curved-colors .cdx-curved-swatch img.swatch-preview {
    position: absolute !important;
    left: var(--cdx-image-left, 24px) !important;
    top: var(--cdx-image-top, 22px) !important;
    display: block;
    width: 44px !important;
    height: 44px !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover;
    border: 2px solid #fff !important;
    border-radius: 50% !important;
    box-sizing: border-box;
    box-shadow: 0 0 0 1px #c9ced2;
}

.variations_form .cdx-curved-colors .cdx-curved-name {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: var(--cdx-slot-width, 80px);
    height: var(--cdx-slot-height, 88px);
    overflow: visible;
    pointer-events: none;
}

.variations_form .cdx-curved-colors .cdx-curved-name text {
    font-family: Arial, sans-serif;
    font-size: var(--cdx-color-font-size, 11px);
    font-weight: 400;
    fill: #333;
}

.variations_form .cdx-curved-colors.cdx-has-color .cdx-curved-name text {
    fill: #777;
}

.variations_form .cdx-curved-colors .cdx-current-color .cdx-curved-name text {
    fill: var(--cdx-name-color, #333);
    font-weight: 700;
    stroke: var(--cdx-name-outline, transparent);
    stroke-width: 1.3px;
    stroke-linejoin: round;
    paint-order: stroke;
}

.variations_form .cdx-curved-colors .cdx-current-color img.swatch-preview {
    box-shadow: 0 0 0 2px #444;
}

.variations_form .cdx-curved-colors .cdx-curved-swatch:focus-visible {
    outline: 2px solid #555 !important;
    outline-offset: 0;
}

.variations_form .cdx-color-caption {
    clear: both;
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: #444;
    overflow-wrap: anywhere;
}

.variations_form .cdx-color-caption[hidden] { display: none !important; }

/* Utiliser les deux colonnes du tableau pour les couleurs uniquement. */
.variations_form .cdx-curved-label-cell { display: none !important; }
.variations_form td.cdx-curved-colors { width: auto !important; }
.variations_form .cdx-curved-colors .thwvsf_fields { width: 100% !important; }
.variations_form .cdx-color-heading {
    display: block;
    margin: 2px 0 8px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
}

/* Style droit : garder le texte horizontal, quel que soit le côté choisi. */
.variations_form .cdx-curved-colors[data-cdx-text-style="straight"] .thwvsf-wrapper-ul {
    display: grid !important;
    grid-template-columns: repeat(var(--cdx-straight-columns, 6), minmax(0, var(--cdx-straight-block-width, 100px)));
    align-items: start;
    justify-content: start;
    max-width: 100%;
    gap: var(--cdx-row-gap, 12px) var(--cdx-column-gap, 8px);
}
.variations_form .cdx-curved-colors[data-cdx-text-style="straight"] .thwvsf-wrapper-item-li.cdx-curved-swatch {
    display: grid !important;
    align-items: center;
    justify-content: stretch;
    gap: var(--cdx-text-gap, 10px);
    width: 100% !important;
    margin-right: 0 !important;
    max-width: 100%;
    height: auto !important;
    min-height: 44px;
}
.variations_form .cdx-curved-colors[data-cdx-text-style="straight"] .cdx-curved-swatch img.swatch-preview {
    position: static !important;
    justify-self: center;
}
.variations_form .cdx-curved-colors[data-cdx-text-style="straight"][data-cdx-text-position="left"] .cdx-curved-swatch { grid-template-columns: minmax(0, 1fr) 44px; min-height: var(--cdx-straight-row-height, 44px); }
.variations_form .cdx-curved-colors[data-cdx-text-style="straight"][data-cdx-text-position="right"] .cdx-curved-swatch { grid-template-columns: 44px minmax(0, 1fr); min-height: var(--cdx-straight-row-height, 44px); }
.variations_form .cdx-curved-colors[data-cdx-text-style="straight"][data-cdx-text-position="left"] .cdx-straight-name { grid-column: 1; grid-row: 1; text-align: right; }
.variations_form .cdx-curved-colors[data-cdx-text-style="straight"][data-cdx-text-position="left"] img.swatch-preview { grid-column: 2; grid-row: 1; }
.variations_form .cdx-curved-colors[data-cdx-text-style="straight"][data-cdx-text-position="right"] .cdx-straight-name { grid-column: 2; grid-row: 1; text-align: left; }
.variations_form .cdx-curved-colors[data-cdx-text-style="straight"][data-cdx-text-position="right"] img.swatch-preview { grid-column: 1; grid-row: 1; }
.variations_form .cdx-curved-colors[data-cdx-text-style="straight"][data-cdx-text-position="top"] .cdx-curved-swatch { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--cdx-straight-label-height, auto) 44px; }
.variations_form .cdx-curved-colors[data-cdx-text-style="straight"][data-cdx-text-position="bottom"] .cdx-curved-swatch { grid-template-columns: minmax(0, 1fr); grid-template-rows: 44px var(--cdx-straight-label-height, auto); }
.variations_form .cdx-curved-colors[data-cdx-text-style="straight"][data-cdx-text-position="top"] .cdx-straight-name { grid-row: 1; align-self: end; }
.variations_form .cdx-curved-colors[data-cdx-text-style="straight"][data-cdx-text-position="top"] img.swatch-preview { grid-row: 2; }
.variations_form .cdx-curved-colors[data-cdx-text-style="straight"][data-cdx-text-position="bottom"] .cdx-straight-name { grid-row: 2; align-self: start; }
.variations_form .cdx-curved-colors[data-cdx-text-style="straight"][data-cdx-text-position="bottom"] img.swatch-preview { grid-row: 1; }
.variations_form .cdx-straight-name {
    display: block;
    max-width: 100%;
    min-width: 0;
    font-family: Arial, sans-serif;
    font-size: var(--cdx-color-font-size, 11px);
    line-height: 1.4;
    color: #333;
    white-space: nowrap;
    overflow-wrap: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    pointer-events: none;
}
.variations_form .cdx-curved-colors.cdx-has-color .cdx-straight-name { color: #777; }
.variations_form .cdx-curved-colors .cdx-current-color .cdx-straight-name {
    color: var(--cdx-name-color, #333);
    font-weight: 700;
    -webkit-text-stroke: 0.4px var(--cdx-name-outline, transparent);
    paint-order: stroke;
}