/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

/* =================================================================
   CARMAY OUTFIT: REDISEÑO VISUAL ULTRA-PREMIUM (FUENTES, ANCHO Y ANIMACIONES)
   ================================================================= */

/* --- 1. CARGAR FUENTES DE GOOGLE --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

/* --- 2. CONFIGURACIÓN TIPOGRÁFICA GLOBAL --- */
body, p, span, li, a, input, select, textarea, .ct-breadcrumbs {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

h1, h2, h3, h4, h5, h6, 
.entry-title, 
.product_title, 
.woocommerce-loop-product__title, 
.ct-active-theme-headings {
    font-family: 'Outfit', sans-serif !important;
    text-wrap: balance !important; /* Evita viudas visuales */
}

/* --- 3. CORRECCIÓN DE CONTRASTE (AMARILLO SOBRE OSCURO) --- */
.onsale, 
.woocommerce-badge, 
.badge-sale,
.product-badge-sale {
    background-color: #ffde59 !important;
    color: #0F0E17 !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(255, 222, 89, 0.3) !important;
}

/* --- 4. KEYFRAMES DE ANIMACIÓN DE ENTRADA --- */
@keyframes carmayFadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- 5. APLICAR ANIMACIÓN DE ENTRADA A TARJETAS DE PRODUCTOS --- */
/* NOTA: No incluir selectores de Stackable (.wp-block-stackable-*, .stk-block-*, .entry-content > *)
   ya que interfieren con el sistema de animación nativo de scroll de Stackable */
.product, 
.ct-product-card,
.product-grid-item,
.carmay-header-wrapper {
    animation: carmayFadeInUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) both;
}

/* Retrasos escalonados para la carga de productos */
.product:nth-child(1) { animation-delay: 0.1s; }
.product:nth-child(2) { animation-delay: 0.18s; }
.product:nth-child(3) { animation-delay: 0.26s; }
.product:nth-child(4) { animation-delay: 0.34s; }

/* --- 6. DISEÑO DE TARJETAS DE PRODUCTOS (EFECTO ESPEJO OSCURO Y PREMIUM) --- */
.product, 
.ct-product-card,
.product-grid-item {
    border: 1px solid rgba(255, 255, 255, 0.08) !important; /* Borde cristalino ultra-suave */
    border-radius: 18px !important;
    background: rgba(43, 15, 41, 0.88) !important; /* Fondo morado oscuro translúcido */
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    padding: 18px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
                border-color 0.4s ease, 
                box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Forzar contraste claro sobre fondo espejo oscuro */
.product a,
.product a *,
.ct-product-card a,
.ct-product-card a *,
.product-grid-item a,
.product-grid-item a *,
.stk-post-grid a,
.stk-post-grid a *,
h2.woocommerce-loop-product__title a.woocommerce-LoopProduct-link {
    color: #ffffff !important;
}

/* Título de producto en hover */
.product:hover h2.woocommerce-loop-product__title a {
    color: #ffde59 !important; /* Destacar en dorado en hover */
}

/* Forzar textos secundarios y descripciones a tono lavanda claro */
.product p,
.product .entry-excerpt,
.product .entry-excerpt p,
.ct-product-card p,
.product-grid-item p {
    color: #e3d3e2 !important;
}

/* Proteger los botones para que mantengan su color de texto blanco */
.product .button,
.product .button *,
.product a.button,
.product a.button *,
.ct-product-card .button,
.ct-product-card .button *,
.product-grid-item .button,
.product-grid-item .button *,
.stk-post-grid .button,
.stk-post-grid .button * {
    color: #ffffff !important;
}

/* Excepción específica para botones Ajax/Leer más */
.product a.button.add_to_cart_button,
.product a.button.product_type_simple,
.product a.button.add_to_cart_button *,
.product a.button.product_type_simple * {
    color: #0F0E17 !important; /* Texto oscuro en botones amarillos/claros */
}

/* Insignia de Oferta en la tarjeta */
.product .onsale,
.product .onsale *,
.ct-product-card .onsale,
.ct-product-card .onsale *,
.product-grid-item .onsale,
.product-grid-item .onsale *,
.stk-post-grid .onsale,
.stk-post-grid .onsale * {
    color: #0f0e17 !important;
    background-color: #ffde59 !important;
}

/* Precio actual destacado en dorado */
.product .price,
.product .price ins,
.product .price ins *,
.ct-product-card .price,
.ct-product-card .price ins,
.ct-product-card .price ins *,
.product-grid-item .price,
.product-grid-item .price ins,
.product-grid-item .price ins * {
    color: #ffde59 !important;
    font-weight: 700 !important;
}

/* Precio tachado (antiguo) en gris claro translúcido */
.product .price del,
.product .price del *,
.ct-product-card .price del,
.ct-product-card .price del *,
.product-grid-item .price del,
.product-grid-item .price del * {
    color: rgba(255, 255, 255, 0.45) !important;
    text-decoration: line-through !important;
    text-decoration-color: rgba(255, 255, 255, 0.45) !important;
    font-size: 0.9em !important;
}

/* Mejorar insignia Agotado */
span.out-of-stock-badge {
    background-color: #e53e3e !important;
    color: #ffffff !important;
    font-weight: bold !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
}

/* Evitar que las tarjetas del grid se vean muy alargadas y estrechas */
.products,
.ct-products-grid,
.products.columns-4,
.products.columns-3 {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 24px !important;
}

/* Animación de hover completo sobre la tarjeta entera (Elevación + Sombra Morada) */
.product:hover, 
.ct-product-card:hover,
.product-grid-item:hover {
    transform: translateY(-8px) scale(1.02) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.45), 0 0 15px rgba(109, 30, 104, 0.45) !important;
}

/* Contenedor de la imagen (Sin fondos ni marcos pesados) */
.product .woocommerce-loop-product__link img,
.ct-product-card .ct-media-container img {
    border-radius: 12px !important;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Remoción del marco/borde del contenedor de imagen */
.product .woocommerce-loop-product__link,
.ct-product-card .ct-media-container {
    display: block !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    border: none !important;
    background: transparent !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
}

/* --- 7. ANIMACIÓN SHIMMER (DESTELLO) EN BOTONES DE ACCIÓN --- */
.single_add_to_cart_button, 
.woocommerce-button.button.alt, 
.checkout-button,
.ct-button-primary {
    position: relative !important;
    overflow: hidden !important;
    background-color: #6d1e68 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    transition: background-color 0.3s ease, transform 0.2s ease !important;
}

.single_add_to_cart_button::after, 
.woocommerce-button.button.alt::after, 
.checkout-button::after,
.ct-button-primary::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; 
    left: -100% !important;
    width: 50% !important; 
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent) !important;
    transform: skewX(-25deg) !important;
    transition: 0.75s !important;
}

.single_add_to_cart_button:hover::after, 
.woocommerce-button.button.alt:hover::after, 
.checkout-button:hover::after,
.ct-button-primary:hover::after {
    left: 120% !important;
}

.single_add_to_cart_button:active, 
.woocommerce-button.button.alt:active, 
.checkout-button:active {
    transform: scale(0.98) !important;
}

/* --- 8. OPTIMIZACIÓN RESPONSIVE DE CHECKOUT EN MÓVIL --- */
@media (max-width: 480px) {
    .woocommerce-checkout form.checkout {
        padding: 5px !important;
    }
    .woocommerce-checkout .col-1, 
    .woocommerce-checkout .col-2 {
        padding: 12px !important;
        background: #ffffff !important;
        border-radius: 12px !important;
        border: 1px solid rgba(109, 30, 104, 0.08) !important;
        box-shadow: 0 4px 12px rgba(15, 14, 23, 0.03) !important;
        margin-bottom: 20px !important;
    }
    .woocommerce-checkout input[type="text"], 
    .woocommerce-checkout input[type="email"], 
    .woocommerce-checkout input[type="tel"], 
    .woocommerce-checkout select {
        height: 42px !important;
        border-radius: 8px !important;
        border: 1px solid #ddd !important;
        padding: 8px 12px !important;
    }
}

/* ============================================================
   ANIMACIÓN DE ESCALA PARA COLUMNAS INTERNAS DE CATEGORÍA
   ============================================================ */

/* Transición suave por defecto */
.stk-25ab558,
.stk-79eed9b,
.stk-fdd0f93,
.stk-3fe0671,
.stk-a4cc65c {
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease, left 0.4s ease, right 0.4s ease !important;
}

/* Hover: Aumentar tamaño de forma suave y limpia con sombra */
.stk-25ab558:hover,
.stk-79eed9b:hover,
.stk-fdd0f93:hover,
.stk-3fe0671:hover,
.stk-a4cc65c:hover,
.wp-block-stackable-image-box:hover .stk-25ab558,
.wp-block-stackable-image-box:hover .stk-79eed9b,
.wp-block-stackable-image-box:hover .stk-fdd0f93,
.wp-block-stackable-image-box:hover .stk-3fe0671,
.wp-block-stackable-image-box:hover .stk-a4cc65c {
    transform: scale(1.12) !important;
    box-shadow: 0 12px 30px rgba(109, 30, 104, 0.35) !important;
    z-index: 10 !important;
}