.single-product .variations select {
    display: none !important; /* Asegúrate de que los selectores se oculten siempre */
}


/* Variables CSS para un fácil ajuste */
:root {
    --button-bg: #ffffff;  /* Fondo de los botones no seleccionados */
    --button-bg-hover: #e0e0e0;  /* Fondo de botones al pasar el mouse */
    --button-active-bg: #d4edda;  /* Fondo de botones activos */
    --button-border: #000000;  /* Color del borde de los botones no seleccionados */
    --button-active-border: #28a745;  /* Color del borde de los botones activos */
    --button-text-color: #333333;  /* Color del texto de los botones */
    --button-padding: 8px 16px;  /* Espaciado interno de los botones */
    --border-radius: 10px;  /* Redondeo de bordes */
    --font-size: 14px;  /* Tamaño de la fuente */
    --active-text-color: #155724; /* Color del texto en estado activo */
}

/* Ocultar las etiquetas originales de la primera columna en la página de producto de WooCommerce */
.woocommerce .label {
    display: none;
}

/* Estilo de los botones de variaciones */
.custom-attribute-buttons .attribute-label {
    display: block;
    margin-bottom: 5px; /* Reduce el margen inferior */
    font-size: 16px; /* Tamaño de la fuente */
    color: #000000; /* Cambia el color a negro */
    font-weight: 500; /* Grosor de la fuente */
    font-family: 'Inter', sans-serif; /* Fuente Inter */
    text-align: left; /* Justificar a la izquierda */
}

.custom-attribute-buttons button.custom-attribute-button {
    background-color: var(--button-bg) !important;
    border: 2px solid var(--button-border) !important;
    color: var(--button-text-color) !important;
    padding: 5px 10px !important; /* Reduce el padding interno */
    border-radius: var(--border-radius) !important;
    font-size: var(--font-size) !important;
    cursor: pointer !important;
    transition: background-color 0.2s, border-color 0.2s !important;
    margin-bottom: 5px !important;
    text-align: left; /* Justificar a la izquierda */
    width: auto; /* Ajustar al contenido */
    white-space: normal; /* Permitir que el texto se divida en múltiples líneas */
    display: inline-block; /* Mostrar como bloque en línea */
}

.custom-attribute-buttons button.custom-attribute-button:hover {
    background-color: var(--button-bg-hover) !important;
}

.custom-attribute-buttons button.custom-attribute-button.active {
    background-color: var(--button-active-bg) !important;
    border-color: var(--button-active-border) !important;
    color: var(--active-text-color) !important;
    font-weight: bold !important;
}

.single-product .variations .custom-attribute-buttons .attribute-label {
    display: block;
    margin-bottom: 5px; /* Reduce el margen inferior */
    font-size: 16px !important; /* Tamaño de la fuente */
    color: #000000 !important; /* Asegura que el color sea negro */
    font-weight: 500 !important; /* Grosor de la fuente */
    font-family: 'Inter', sans-serif; /* Fuente Inter */
}

/* Ocultar botón de resetear o limpiar opciones */
.reset_variations {
    display: none !important;
}


/* Cambiar el estilo del botón "Añadir al carrito" */
.single_add_to_cart_button {
    background-color: #FF0000 !important;
    color: #FFFFFF !important;
    border: none !important;
    padding: 15px 30px !important; /* Aumenta el tamaño del botón */
    font-size: 18px !important; /* Aumenta el tamaño de la fuente */
    font-weight: bold !important; /* Hace el texto más resaltado */
    text-transform: uppercase !important; /* Convierte el texto a mayúsculas */
    border-radius: 8px !important; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important; /* Sombra para resaltarlo */
    transition: all 0.3s ease !important; /* Transición suave para el hover */
}

.single_add_to_cart_button:hover {
    background-color: #CC0000 !important; /* Color más oscuro al pasar el mouse */
    color: #FFFFFF !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4) !important; /* Sombra más intensa al hover */
    transform: scale(1.05) !important; /* Efecto de agrandamiento al pasar el mouse */
}






/* Ajuste para dispositivos móviles */
@media (max-width: 767px) {
    .custom-attribute-buttons {
        display: flex;
        flex-direction: column; /* Coloca los botones en una columna */
        padding: 0; /* Elimina el padding lateral */
    }

    .custom-attribute-buttons button.custom-attribute-button {
        width: auto; /* Asegúrate de que los botones ocupen solo el ancho necesario */
        box-sizing: border-box; /* Asegura que el padding y border se incluyan en el ancho total */
        padding: 5px 10px; /* Ajusta el padding interno para que sea más compacto */
        margin-left: 5px; /* Reduce el margen izquierdo */
        white-space: normal; /* Permite el ajuste del texto en varias líneas */
        word-wrap: break-word; /* Divide el texto largo en varias líneas si es necesario */
    }

    .custom-attribute-buttons .attribute-label {
        margin-bottom: 5px; /* Reduce el margen inferior del label */
        text-align: left; /* Alinea el texto a la izquierda */
    }
}