/* === Ajustes generales de variaciones === */

/* Forzar que el encabezado del atributo (Pantallas) no tenga fondo azul */
.woocommerce div.product form.cart table.variations th.label,
.woocommerce div.product form.cart table.variations th.label label {
    background: #fff !important;   /* fondo blanco */
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #333 !important;        /* texto oscuro */
    font-weight: bold;
    display: block;
    line-height: 1.2;              /* menos alto */
    text-align: left;
}

/* Convertir cada fila en bloque vertical */
.woocommerce div.product form.cart table.variations tr {
    display: flex;
    flex-direction: column; /* apilar t¨ªtulo y botones */
    margin-bottom: 12px;
}

/* Contenedor de botones debajo del t¨ªtulo */
.jj-variation-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

/* === Botones de variaciones estilo AliExpress === */
.jj-variation-option {
    border: 1px solid #ddd;
    padding: 6px 10px;
    cursor: pointer;
    border-radius: 6px;
    background: #f9f9f9;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 70px;
    text-align: center;
}

.jj-variation-option:hover {
    border-color: #0073aa;
    background: #eef6fb;
}

.jj-variation-option.active {
    border-color: #0073aa;
    background: #fff; /* fondo blanco */
    color: #0073aa;
    font-weight: bold;
}

/* Miniaturas */
.jj-variation-thumb {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 4px;
    border: 1px solid #ccc;
}

/* Precio */
.jj-variation-price {
    font-size: 13px;
    font-weight: bold;
    margin-top: 2px;
    color: #333;
}

/* Stock */
.jj-variation-stock {
    font-size: 12px;
    margin-top: 2px;
    color: #666;
}

/* === Responsivo: m¨®vil y tablet === */
@media (max-width: 768px) {
    .woocommerce div.product form.cart table.variations tr {
        margin-bottom: 10px;
    }
    .woocommerce div.product form.cart table.variations td.label,
    .woocommerce div.product form.cart table.variations td.label label {
        line-height: 1.1 !important; /* a¨²n m¨¢s compacto en m¨®vil */
        font-size: 14px !important;
    }
    .jj-variation-option {
        min-width: 60px;
        padding: 5px 8px;
    }
    .jj-variation-thumb {
        width: 32px;
        height: 32px;
    }
}