/*
Theme Name: Kadence Child
Template: kadence
Version: 3.1.0 (MASTER SAFE - ALINEACIÓN PRECIO)
*/

/* =======================================================
   1. LIMPIEZA Y ESTILOS GLOBALES
   ======================================================= */
/* Ocultar elementos nativos que estorban */
.woocommerce-product-gallery__trigger { display: none !important; }
.quantity { display: none !important; }
.pswp__button--zoom { display: none !important; }

/* Ocultar notificación fantasma de "añadido al carrito" */
.single-product .woocommerce-notices-wrapper,
.single-product .woocommerce-message {
    display: none !important;
}

/* =======================================================
   2. TEXTOS Y PRECIOS (COMPACTOS)
   ======================================================= */
.product_title.entry-title {
    margin-top: 0 !important;
    margin-bottom: 0px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    padding-top: 0 !important;
}

.price {
    font-size: 18px !important;
    color: #000000 !important;
    font-weight: 500 !important;
    /* Pegamos el precio a las variables */
    margin-bottom: 5px !important; 
    margin-top: 0 !important;
}

/* =======================================================
   3. VARIABLES EN LÍNEA (ESTILO "CADENA: [BOTONES]")
   ======================================================= */
/* Forzamos a la tabla a comportarse como bloques flexibles */
table.variations {
    display: block !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

table.variations tbody {
    display: block !important;
    width: 100% !important;
}

/* LA CLAVE: Poner el título y los botones en el mismo renglón */
table.variations tr {
    display: flex !important;
    align-items: center !important; /* Centrados verticalmente */
    flex-wrap: wrap !important;
    gap: 10px !important; /* Espacio entre la palabra "Cadena" y los botones */
    margin-bottom: 0px !important;
}

/* Título "CADENA:" */
table.variations td.label {
    display: block !important;
    width: auto !important; /* Que ocupe solo lo que mide el texto */
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    background: transparent !important; /* Evitar fondos raros */
}

/* Celda de los botones */
table.variations td.value {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Contenedor interno de los botones */
.swatch-buttons {
    display: flex !important;
    gap: 5px !important;
    flex-wrap: wrap !important;
}

/* =======================================================
   4. STOCK (PIEZAS DISPONIBLES) - ALINEADO AL PRECIO
   ======================================================= */
/* Usamos el contenedor principal como referencia */
.entry-summary {
    position: relative !important; 
}

.woocommerce-variation-availability {
    position: absolute !important;
    
    /* COORDENADAS AJUSTADAS PARA ALINEAR CON EL PRECIO */
    /* top: 28px baja el texto para que quede al nivel del precio, saltándose el título */
    top: 28px !important; 
    right: 0px !important;
    
    margin: 0 !important;
    padding: 0 !important;
    
    /* Diseño del texto */
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #46b450 !important; /* Verde Stock */
    z-index: 20 !important; /* Por encima de todo */
    background: transparent !important;
}

.woocommerce-variation-availability .stock {
    margin: 0 !important;
}

/* =======================================================
   5. BOTONES DE ACCIÓN (AÑADIR Y COMPRAR)
   ======================================================= */
.single_variation_wrap {
    display: flex !important;
    flex-direction: column !important;
    
    /* SEPARACIÓN OBLIGATORIA ENTRE LOS DOS BOTONES */
    gap: 20px !important; 
    
    /* Separación de las variables de arriba */
    margin-top: 15px !important; 
    
    width: 100% !important;
}

/* Limpieza extra de WooCommerce */
.woocommerce-variation-add-to-cart {
    margin-top: 0 !important;
    padding-top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important; /* Refuerzo del gap por si acaso */
}

/* --- BOTÓN 1: AÑADIR AL CARRITO (BLANCO) --- */
button.single_add_to_cart_button {
    width: 100% !important;
    height: 45px !important;
    border-radius: 0px !important; /* Cuadrado */
    
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #000000 !important;
    
    margin: 0 !important; /* Sin márgenes extraños */
    
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    
    /* Flex para centrar texto */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* --- BOTÓN 2: COMPRAR AHORA (AZUL FUERTE) --- */
button.btn-direct-checkout {
    width: 100% !important;
    height: 55px !important;
    border-radius: 50px !important; /* Redondo */
    
    /* COLOR AZUL NUEVO */
    background-color: #0056b3 !important; 
    color: #ffffff !important;
    
    border: none !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    
    /* Sombra azulada elegante */
    box-shadow: 0 4px 15px rgba(0, 86, 179, 0.4) !important;
    
    margin-top: 0 !important; 
    
    /* Flex para centrar texto */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

button.btn-direct-checkout:hover {
    background-color: #004494 !important; /* Más oscuro al pasar el mouse */
    transform: translateY(-2px);
}

button.btn-direct-checkout:disabled {
    background-color: #e0e0e0 !important;
    color: #999 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}

/* =======================================================
   6. ESTILOS DE VARIABLES (SWATCHES)
   ======================================================= */
.swatch-btn {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #ccc !important;
    
    /* Resetear estilos del tema */
    background-image: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    
    padding: 8px 12px;
    margin-right: 5px;
    margin-bottom: 5px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    min-width: 35px;
    text-align: center;
    transition: all 0.2s;
}

/* ESTADO SELECCIONADO (NEGRO) */
.swatch-btn.selected {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-color: #000000 !important;
}

/* =======================================================
   7. ZONA DE PELIGRO: MÓVIL (CÓDIGO COMPLETO)
   ======================================================= */
@media (max-width: 768px) {

    /* Matar espacios fantasma en móvil */
    .single-product .entry-summary {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding-top: 0 !important;
    }

    /* IMAGEN DE BORDE A BORDE (FULL WIDTH) */
    .woocommerce-product-gallery {
        width: 100vw !important;
        position: relative !important;
        left: 50% !important;
        right: 50% !important;
        margin-left: -50vw !important;
        margin-right: -50vw !important;
        
        /* Ajustes de posición vertical */
        margin-top: -20px !important;
        margin-bottom: -5px !important; /* Pegar imagen al título */
        border: none !important;
        z-index: 1 !important;
    }

    .woocommerce-product-gallery img {
        width: 100% !important;
        border-radius: 0 !important;
        display: block !important;
    }
    
    /* CONTENEDOR DE BOTONES EN MÓVIL */
    .single_variation_wrap {
        /* Aseguramos la separación también en celular */
        gap: 20px !important; 
        margin-top: 10px !important; 
        padding: 0 5px !important;
    }
    
    /* GRID DE PRODUCTOS RELACIONADOS */
    .related.products ul.products,
    .up-sells.products ul.products {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
        margin: 0 !important;
    }
    
    /* AJUSTE FINO DEL STOCK EN MÓVIL (ALINEADO AL PRECIO) */
    .woocommerce-variation-availability {
        /* 28px baja el texto para alinearse con el precio (saltando el título) */
        top: 40px !important; 
        right: 0px !important;
    }
    
    /* Seguridad extra para evitar scroll horizontal */
    body, html { overflow-x: hidden !important; }
    .single-product .site-content { padding-top: 0 !important; }
}