.elementor-12390 .elementor-element.elementor-element-a7d6358{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-12390 .elementor-element.elementor-element-a32aac3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-12390 .elementor-element.elementor-element-a32aac3.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-12390 .elementor-element.elementor-element-0817d9c .cart button, .elementor-12390 .elementor-element.elementor-element-0817d9c .cart .button{transition:all 0.2s;}.elementor-12390 .elementor-element.elementor-element-0817d9c{--view-cart-spacing:0px;--button-spacing:33px;}.elementor-12390 .elementor-element.elementor-element-0817d9c .quantity .qty{border-style:none;transition:all 0.2s;}.woocommerce .elementor-12390 .elementor-element.elementor-element-0817d9c form.cart .variations{margin-bottom:0px;}.woocommerce .elementor-12390 .elementor-element.elementor-element-0817d9c form.cart table.variations tr th, .woocommerce .elementor-12390 .elementor-element.elementor-element-0817d9c form.cart table.variations tr td{padding-top:calc( 0px/2 );padding-bottom:calc( 0px/2 );}.woocommerce .elementor-12390 .elementor-element.elementor-element-0817d9c form.cart table.variations td.value select, .woocommerce .elementor-12390 .elementor-element.elementor-element-0817d9c form.cart table.variations td.value:before{border-radius:0px;}.elementor-12390 .elementor-element.elementor-element-b6e2376{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-12390 .elementor-element.elementor-element-c844a33{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}@media(min-width:768px){.elementor-12390 .elementor-element.elementor-element-a7d6358{--content-width:1385px;}.elementor-12390 .elementor-element.elementor-element-a32aac3{--width:30%;}.elementor-12390 .elementor-element.elementor-element-b6e2376{--width:50%;}.elementor-12390 .elementor-element.elementor-element-c844a33{--width:20%;}}/* Start custom CSS for woocommerce-product-add-to-cart, class: .elementor-element-0817d9c *//* =========================================================
   DISEÑO COMPACTO: SIN ESPACIOS EXTRA + DISEÑO LIMPIO
   ========================================================= */

/* --- 1. ESTRUCTURA VERTICAL (TODO EN COLUMNA) --- */
.woocommerce div.product table.variations tbody {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Espacio entre cada bloque de opción (REDUCIDO) */
.woocommerce div.product table.variations tr {
    display: block !important;
    width: 100% !important;
    margin-bottom: 8px !important; /* <--- Antes 15px, ahora mucho más pegado */
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
}

/* --- 2. TÍTULOS (TEXTO NEGRO) --- */
.woocommerce div.product table.variations label,
.woocommerce div.product table.variations th.label {
    display: block !important;
    color: #000000 !important;       
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;      /* Un pelín más pequeño para compactar */
    font-weight: 900 !important;
    text-transform: uppercase !important;
    text-align: left !important;
    margin-bottom: 3px !important;   /* <--- Pegado a sus botones */
    padding: 0 !important;
    line-height: 1.1 !important;
    text-shadow: none !important;    
}

/* --- 3. INPUTS Y SELECTORES --- */
.woocommerce div.product table.variations select {
    width: 100% !important;
    max-width: 300px !important;
    height: 35px !important;         /* Altura reducida */
    background-color: #fff !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    padding-left: 10px !important;
}

/* Alinear los botones de opciones (Swatches) */
.variable-items-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;             /* Menos hueco entre botones */
    justify-content: flex-start !important;
}

.reset_variations { display: none !important; }

/* --- 4. PRECIO (PEQUEÑO Y PEGADO) --- */
.single_variation_wrap {
    display: block !important;
    background: transparent !important; 
    border: none !important;            
    padding: 0 !important;              
    margin-top: 5px !important;      /* <--- Muy pegado a la última opción */
    box-shadow: none !important;
}

/* Estilo del texto del precio */
.single_variation_wrap .price,
.single_variation .price,
.woocommerce-variation-price .price {
    color: #000000 !important;      
    font-size: 24px !important;     /* Tamaño normal */
    font-weight: 800 !important;
    display: block !important;
    line-height: 1.1 !important;
}

.single_variation .price span, 
.single_variation .price bdi {
    color: #000000 !important;
}

del { display: none !important; }

/* Texto IVA */
.single_variation_wrap::after {
    content: "IVA No incluido";
    display: block;
    color: #666666 !important; 
    margin-top: 0px;                /* Pegado al precio */
    font-size: 12px;
}

/* --- 5. SELECTOR DE CANTIDAD --- */
.woocommerce .quantity,
.woocommerce .quantity input.qty {
    display: block !important;
    visibility: visible !important;
}

.woocommerce .quantity .qty {
    width: 80px !important;
    height: 40px !important;        /* Más bajito */
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    text-align: center !important;
    font-weight: bold !important;
    font-size: 16px !important;
    margin-right: 10px !important;
}

/* Botón Añadir al carrito */
.woocommerce-variation-add-to-cart {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    margin-top: 10px !important;     /* Separación mínima */
}

/* --- 6. CAMPO DE OBSERVACIONES (COMPACTO) --- */
.wapf-wrapper {
    display: block !important;
    width: 100% !important;
    background-color: transparent !important; 
    padding: 0 !important;
    margin-top: 10px !important;     /* Menos espacio arriba */
    margin-bottom: 10px !important;
    border: none !important;
}

.wapf-label {
    color: #000 !important;
    font-weight: 900 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    margin-bottom: 3px !important;
    display: block !important;
}

.wapf-field-input textarea {
    background: #fff !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    width: 100% !important;
    padding: 8px !important;
    min-height: 60px !important;    /* Altura reducida */
}
/* =========================================================
   SOLUCIÓN DEFINITIVA: FONDO TRANSPARENTE EN BOTONES
   ========================================================= */

/* 1. Atacar al contenedor del botón, al li y al div interno */
.variable-items-wrapper .variable-item,
.variable-items-wrapper li,
.variable-items-wrapper div,
.variable-items-wrapper span {
    background: transparent !important;      /* Sin color de fondo */
    background-color: transparent !important;
    box-shadow: none !important;             /* Sin sombras ni recuadros */
    border: none !important;                 /* Sin bordes */
    outline: none !important;
}

/* 2. Eliminar el espacio blanco (padding) que a veces crea el marco */
.variable-items-wrapper .variable-item {
    padding: 0 !important;
    margin: 0 5px 5px 0 !important; /* Mantener solo separación externa */
}

/* 3. Asegurar que la imagen en sí no tenga fondo */
.variable-items-wrapper img {
    background-color: transparent !important;
    border-radius: 0 !important; /* Dejar que tu PNG defina la forma */
    width: 100% !important;      /* Ajustar tamaño */
    height: auto !important;
}

/* 4. ESTADO SELECCIONADO Y HOVER (Al pasar el ratón) */
/* Evitar que se ponga blanco al seleccionarlo */
.variable-items-wrapper .variable-item.selected,
.variable-items-wrapper .variable-item:hover,
.variable-items-wrapper .variable-item.selected:hover {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    
    /* Opcional: Si quieres un borde negro fino para saber cuál elegiste */
    /* border: 2px solid #000 !important; */ 
    
    /* Opcional: Si prefieres que se oscurezca un poco al elegir */
    /* filter: brightness(0.9); */
}

/* =======================================================
   FUERZA BRUTA: QUITAR FONDO BLANCO DE LOS SWATCHES
   ======================================================= */

/* 1. Atacamos al botón y a TODOS sus elementos internos */
.variable-items-wrapper .variable-item, 
.variable-items-wrapper .variable-item span,
.variable-items-wrapper .variable-item div,
.variable-items-wrapper .variable-item img {
    background: transparent !important;       /* Fondo transparente */
    background-color: transparent !important; /* Asegurar sin color */
    box-shadow: none !important;              /* Quitar sombras blancas */
    border: none !important;                  /* Quitar bordes */
    padding: 0 !important;                    /* Quitar relleno blanco */
}

/* 2. Ajuste específico para cuando el plugin usa 'contents' */
.variable-item-contents {
    background-color: transparent !important;
}

/* 3. Eliminar espacio extra que causa el marco */
.variable-items-wrapper .variable-item {
    margin: 0 5px 5px 0 !important; 
}/* End custom CSS */