/* Sélecteurs de variation en boutons. */

.xt-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 4px 0 10px;
}

/* Le select reste dans le DOM pour WooCommerce, mais hors de vue.
   clip plutôt que display:none : il doit rester focusable au clavier. */
.xt-swatches + select {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Volontairement sobre : la pastille de couleur porte déjà l'information,
   le bouton doit se faire oublier autour d'elle. */
.xt-swatch {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid #dcdce4;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.2;
    color: #3a3a48;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.xt-swatch:hover:not(:disabled) {
    border-color: #a9a9b8;
}

.xt-swatch:focus-visible {
    outline: 2px solid var(--xt-navy, #1A1A2E);
    outline-offset: 2px;
}

/* Sélection marquée par le contraste, pas par la couleur : l'orange sur une
   pastille déjà colorée créait deux accents qui se contredisaient. */
.xt-swatch.is-active {
    border-color: var(--xt-navy, #1A1A2E);
    background: #fff;
    box-shadow: 0 0 0 1px var(--xt-navy, #1A1A2E) inset;
}

.xt-swatch.is-unavailable,
.xt-swatch:disabled {
    opacity: .35;
    cursor: not-allowed;
    text-decoration: line-through;
}

.xt-swatch__dot {
    display: block;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    /* Cerne discret pour que le blanc et le beige restent visibles. */
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}

.xt-swatch__label {
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .xt-swatch {
        transition: none;
    }
}


/* --- Mise en page du bloc de variations ---
   WooCommerce rend un tableau avec le libellé en colonne de gauche, ce qui
   comprime les pastilles. On repasse en pile : libellé au-dessus, choix en
   dessous, sur toute la largeur. */
.woocommerce div.product form.cart table.variations,
.woocommerce div.product form.cart table.variations tbody,
.woocommerce div.product form.cart table.variations tr,
.woocommerce div.product form.cart table.variations th,
.woocommerce div.product form.cart table.variations td {
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    text-align: left;
}

.woocommerce div.product form.cart table.variations {
    margin-bottom: 6px;
}

.woocommerce div.product form.cart table.variations tr + tr {
    margin-top: 16px;
}

.woocommerce div.product form.cart table.variations th.label label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--xt-navy, #1A1A2E);
}

/* Le lien « Effacer » collait aux pastilles et ressemblait à un bouton mort.
   WooCommerce l'affiche seulement une fois une variation choisie. */
.woocommerce div.product form.cart .reset_variations {
    display: inline-block;
    margin-top: 12px;
    padding: 4px 0;
    font-size: 13px;
    color: #6c6c78;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.woocommerce div.product form.cart .reset_variations:hover {
    color: var(--xt-orange, #FF6B00);
}

/* Prix et disponibilité de la variation choisie, aérés. */
.woocommerce div.product form.cart .single_variation_wrap {
    margin-top: 14px;
}
.woocommerce div.product .woocommerce-variation-price {
    margin-bottom: 10px;
}


/* --- Fond du bloc de variations ---
   WooCommerce et le thème posent un fond gris sur les cellules du tableau :
   il découpe un bloc gris au milieu de la fiche sans rien apporter. */
.woocommerce div.product form.cart table.variations,
.woocommerce div.product form.cart table.variations tbody,
.woocommerce div.product form.cart table.variations tr,
.woocommerce div.product form.cart table.variations th,
.woocommerce div.product form.cart table.variations td,
.woocommerce div.product form.cart .single_variation_wrap,
.woocommerce div.product form.cart .woocommerce-variation {
    background: transparent !important;
}