/* ========================================================
   MIS PERSONALIZACIONES DE DISEÑO (V6 - FINAL)
   ======================================================== */

/* --- 1. DEFINICIÓN DE TODAS LAS ANIMACIONES --- */

/* Animación A-1: Onda Expansiva VERDE (Para productos NUEVOS) */
@keyframes ondaExpansivaVerde {
    0%   { box-shadow: 0 0 0 0 rgba(76, 187, 108, 0.7); }
    70%  { box-shadow: 0 0 0 8px rgba(76, 187, 108, 0); }
    100% { box-shadow: 0 0 0 0 rgba(76, 187, 108, 0); }
}

/* Animación A-2: Onda Expansiva NARANJA (Para OFERTAS) */
@keyframes ondaExpansivaNaranja {
    /* Usamos el RGB del color naranja #f39c12 que es (243, 156, 18) */
    0%   { box-shadow: 0 0 0 0 rgba(243, 156, 18, 0.7); }
    70%  { box-shadow: 0 0 0 8px rgba(243, 156, 18, 0); }
    100% { box-shadow: 0 0 0 0 rgba(243, 156, 18, 0); }
}

/* Animación B: Cambio de Color (Para productos AGOTADOS - Rojo a Gris) */
@keyframes rojoAGris {
    0% { background-color: #e74c3c; border-color: #c0392b; }
    50% { background-color: #555555; border-color: #333333; }
    100% { background-color: #e74c3c; border-color: #c0392b; }
}


/* --- 2. APLICACIÓN DE ESTILOS A LAS ETIQUETAS --- */

/* Estilos para "AGOTADO" (Rojo que cambia a gris - 3s) */
.product-flag.out_of_stock {
    color: #ffffff !important;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    border: 1px solid #c0392b !important;
    animation: rojoAGris 3s infinite ease-in-out; 
}

/* Estilos para "NUEVO" (Verde con onda verde - 2s) */
.product-flag.new {
    background-color: #4cbb6c !important;
    font-weight: bold;
    /* Aplicamos la onda VERDE */
    animation: ondaExpansivaVerde 2s infinite; 
}

/* Estilos para "¡EN OFERTA!" y "DESCUENTO" (Naranja con onda naranja - 2s) */
.product-flag.on-sale, .product-flag.discount {
    background-color: #f39c12 !important; 
    color: #ffffff !important;
    font-weight: bold;
    /* Quitamos la sombra fija para que no estorbe a la onda */
    
    /* Aplicamos la nueva onda NARANJA */
    animation: ondaExpansivaNaranja 2s infinite;
}

/* ========================================================
   MEJORAS VISUALES ADICIONALES (Complemento)
   ======================================================== */

/* --- 1. TARJETAS DE PRODUCTO MÁS MODERNAS --- */
.product-miniature {
    transition: all 0.3s ease; /* Suaviza cualquier movimiento */
    border-radius: 10px !important; /* Redondea las esquinas */
    overflow: hidden; /* Asegura que nada se salga de las esquinas redondas */
    border: 1px solid #f0f0f0; /* Un borde gris muy sutil */
}

/* --- 2. EFECTO DE ELEVACIÓN AL PASAR EL MOUSE (HOVER) --- */
.product-miniature:hover {
    transform: translateY(-5px); /* Se mueve 5 pixeles hacia arriba */
    box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important; /* Sombra elegante debajo */
    border-color: transparent; /* Ocultamos el borde al flotar */
}

/* --- 3. BOTÓN DE COMPRA "JUGOSO" --- */

/* Estado normal del botón */
.product-actions .add-to-cart {
    transition: all 0.2s ease-in-out; /* La magia para que el cambio sea suave */
    border-radius: 50px !important;   /* Lo hace estilo "pastilla" (muy moderno) */
    font-weight: 700;                 /* Texto más grueso y legible */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Una sombra suavecita abajo */
    padding: 10px 25px;               /* Un poco más de espacio interno */
}

/* Estado al pasar el mouse (HOVER) */
.product-actions .add-to-cart:hover {
    transform: scale(1.05);           /* Crece un 5% de tamaño */
    box-shadow: 0 8px 15px rgba(0,0,0,0.2); /* La sombra crece (da efecto de elevación) */
    filter: brightness(1.1);          /* Se ilumina un 10% más sin cambiar tu color base */
    cursor: pointer;
}

/* Ajuste extra: Icono del carrito dentro del botón */
.product-actions .add-to-cart i {
    margin-right: 8px; /* Separa un poco el icono del texto */
}

/* ========================================================
   REDES SOCIALES: COLORES PLANOS Y ELEVACIÓN
   ======================================================== */

/* 1. FORMA Y ESTRUCTURA (Para que se vean como botones modernos) */
.block-social li {
    border-radius: 10px !important; /* Bordes redondeados (igual que tus productos) */
    margin-right: 12px !important;  /* Espacio entre cada botón */
    width: 40px !important;         /* Ancho fijo */
    height: 40px !important;        /* Alto fijo */
    padding: 0 !important;          /* Quitamos rellenos extraños */
    
    /* Centrado perfecto del icono */
    display: flex !important;
    align-items: center;
    justify-content: center;
    
    /* Preparamos la animación suave */
    transition: all 0.3s ease; 
    border: none !important;
}

/* Asegurar que el icono (dibujo) esté blanco y centrado */
.block-social li a {
    color: white !important;
    font-size: 20px !important;
    width: 100% !important;
    height: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 2. COLORES REALES (Versión Plana) */

/* Facebook */
.block-social li.facebook {
    background-color: #3b5998 !important;
}

/* Twitter/X */
.block-social li.twitter {
    background-color: #1da1f2 !important;
}

/* 3. ANIMACIÓN DE ELEVACIÓN (Igual que tus productos) */
.block-social li:hover {
    transform: translateY(-5px); /* El botón "vuela" hacia arriba */
    box-shadow: 0 10px 20px rgba(0,0,0,0.2) !important; /* Proyecta sombra abajo */
    opacity: 1; /* Mantenemos el color vivo */
}

/* ========================================================
   BOTÓN "VER TODOS LOS PRODUCTOS" (Ubicación Superior)
   ======================================================== */

.all-product-link {
    display: block !important;   /* Para que podamos centrarlo */
    width: fit-content;          /* Que el ancho sea el del texto */
    margin: 20px auto 40px auto; /* 20px arriba, AUTO lados (centrado), 40px abajo */
    
    background-color: #4cbb6c;
    color: white !important;
    font-size: 20px; 
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 18px 50px;          
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

/* Ocultar flecha */
.all-product-link i { display: none; }

/* Efecto Hover */
.all-product-link:hover {
    transform: translateY(-4px); 
    box-shadow: 0 10px 25px rgba(76, 187, 108, 0.6);
    background-color: #3ea85d;
    color: white !important;
}

/* ========================================================
   TIKTOK: SOLUCIÓN FINAL (IMAGEN)
   ======================================================== */

/* 1. La caja del botón (El fondo negro es necesario) */
.block-social li.tiktok {
    background-color: #000000 !important;
    border-radius: 10px !important;
    margin-right: 12px !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: none !important;
}

/* 2. CÓDIGO MATA-FANTASMAS (Muy importante) */
/* Esto elimina cualquier rastro de la "forma extraña" del tema */
.block-social li.tiktok::before, .block-social li.tiktok::after,
.block-social li.tiktok a::before, .block-social li.tiktok a::after {
    content: none !important;
    display: none !important;
}

/* 3. Ajuste para que la imagen quede centrada */
.block-social li.tiktok a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    height: 100% !important;
    text-indent: 0 !important; /* Evita desplazamientos raros */
}

/* ========================================================
   INSTAGRAM: SOLUCIÓN FINAL (IMAGEN + DEGRADADO)
   ======================================================== */

/* 1. Fondo Degradado Oficial (El que queríamos desde el principio) */
.block-social li.instagram {
    /* La receta secreta del degradado de Instagram */
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important;
    
    /* Forma y tamaño idénticos a los demás */
    border-radius: 10px !important;
    margin-right: 12px !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border: none !important;
    
    /* Centrado Flex para la nueva imagen */
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* 2. MATA-FANTASMAS para Instagram (Adiós icono viejo) */
.block-social li.instagram::before, .block-social li.instagram::after,
.block-social li.instagram a::before, .block-social li.instagram a::after {
    content: none !important;
    display: none !important;
}

/* 3. Ajuste para centrar la imagen <img> perfectamente */
.block-social li.instagram a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    height: 100% !important;
    text-indent: 0 !important;
}

/* 4. Efecto Hover (Elevación) */
.block-social li.instagram:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(214, 36, 159, 0.4) !important; /* Sombra rosa */
}

/* ========================================================
   FORZAR BANNER EN MÓVIL (Solución Nuclear V2)
   ======================================================== */

/* 1. Atacamos todas las posibles formas en que se llame el slider */
#carousel, 
.carousel, 
#carousel.hidden-sm-down, 
.carousel.hidden-sm-down,
.ps_imageslider,
.container-fluid.hidden-sm-down {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 2. Ajuste crítico de imagen para que no salga gigante o rota */
#carousel .carousel-item img, 
.carousel .carousel-item img {
    width: 100% !important;
    height: auto !important;
    min-height: 1px !important;
    display: block !important;
}

/* 3. Asegurar que el contenedor padre no tenga margen negativo raro */
#carousel .carousel-inner,
.carousel .carousel-inner {
    height: auto !important;
}