/* ================================   VARIATION SWATCHES  ================================ */

.variations .ct-variation-swatches {
    gap: 1px;
}

/* ========================= TALLE → cuadrado ========================= */
.ct-variation-swatches[data-swatches-type="button"] .ct-swatch {
    width: 100px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    border: 1px solid #000;
    font-size: 12px;
    font-family: "Barlow", "San Serif";
    font-weight: 500;
    padding: 0;
    transition: all 0.2s ease;
}

/* ========================= ESTADO ACTIVO (talle) ========================= */
.ct-variation-swatches[data-swatches-type="button"] .ct-swatch-container.active .ct-swatch {
    background: #000;
    color: #fff;
    border-color: #000;
}

/* ========================= HOVER (talle) ========================= */
.ct-variation-swatches[data-swatches-type="button"] .ct-swatch-container:hover .ct-swatch {
    background: #000;
    color: #fff;
    border-color: #000;
}