/* Contenedor principal alineado e independiente */
.gadgetize-pagination {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 20px 0;
    gap: 8px; /* Separación idéntica entre los cuadros */
}

/* Estilo base para cada botón de la lista */
.gadgetize-pagination .page-item {
    display: block;
}

/* Estilo para los botones normales (Inactivos) */
.gadgetize-pagination .page-item a, 
.gadgetize-pagination .page-item span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;       /* Tamaño del cuadro */
    height: 36px;      /* Tamaño del cuadro */
    background-color: #ffffff;
    border: 1px solid #000000; /* Borde negro delgado */
    border-radius: 6px;       /* Bordes ligeramente redondeados */
    color: #111111;           /* Color azul de los números inactivos */
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

/* Efecto Hover para los botones inactivos */
.gadgetize-pagination .page-item a:hover {
    background-color: #f2f2f2;
    border-color: #333333;
}

/* ESTILO CLAVE: Página Activa (Número 1 en tu imagen) */
.gadgetize-pagination .page-item.active span {
    background-color: #311B92; /* Verde oscuro idéntico a tu imagen */
    border-color: #311B92;
    color: #ffffff;            /* Texto blanco o crema */
    font-weight: bold;
}

/* Botón Siguiente / Flecha (Fuerza color negro para la flecha) */
.gadgetize-pagination .page-item.next a {
    color: #000000; /* Flecha negra tal cual la imagen */
    font-size: 18px;
    font-weight: bold;
}

/* Puntos suspensivos ... sin bordes marcados si lo prefieres */
.gadgetize-pagination .page-item.disabled span {
    background: transparent;
    border: none;
    color: #6c757d;
}





/* Animación de brillo/pulso */
@keyframes skeleton-loading {
    0% { background-color: #e9ecef; }
    50% { background-color: #f8f9fa; }
    100% { background-color: #e9ecef; }
}

/* Clase base para activar el efecto */
.skeleton {
    animation: skeleton-loading 1.5s infinite ease-in-out;
    border-radius: 4px;
    display: inline-block;
    width: 100%;
}

/* Modificadores para ajustar tamaños según el diseño de tu imagen */
.skeleton-img-main { height: 350px; border-radius: 10px; }
.skeleton-img-thumb { height: 70px; width: 70px; border-radius: 5px; }
.skeleton-title { height: 28px; margin-bottom: 12px; width: 90%; }
.skeleton-text { height: 16px; margin-bottom: 8px; }
.skeleton-price { height: 32px; width: 120px; margin-bottom: 20px; }
.skeleton-btn { height: 45px; border-radius: 6px; margin-bottom: 10px; }