.skeleton {
        background-color: #e2e8f0;
        /* Color base del esqueleto */
        border-radius: 4px;
        animation: skeleton-loading 1s linear infinite alternate;
    }

    /* --- Animación de Carga (Efecto Shimmer/Pulsante) --- */

    @keyframes skeleton-loading {
        0% {
            background-color: #e2e8f0;
        }

        100% {
            background-color: #f8fafc;
            /* Color más claro para el efecto de pulso */
        }
    }


    /* --- Estructura de la Página del Producto Esqueleto --- */

    .skeleton-product-page {
        display: flex;
        flex-wrap: wrap;
        /* Para que sea responsive en móviles */
        gap: 30px;
        width: 100%;
        max-width: 1100px;
        /* Ajusta al ancho de tu contenido */
        margin: 20px auto;
        padding: 20px;
    }

    /* Columna Izquierda: Galería */
    .skeleton-gallery {
        flex: 1 1 45%;
        /* Ocupa ~45% del ancho */
        min-width: 300px;
    }

    .skeleton-image-main {
        width: 100%;
        height: 0;
        padding-bottom: 100%;
        /* Mantiene un aspect-ratio de 1:1 */
        margin-bottom: 15px;
    }

    .skeleton-thumbnails {
        display: flex;
        gap: 10px;
    }

    .skeleton-thumbnail {
        width: 100px;
        height: 100px;
    }

    /* Columna Derecha: Detalles */
    .skeleton-summary {
        flex: 1 1 50%;
        /* Ocupa ~50% del ancho */
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    /* --- Tamaños de los Elementos del Esqueleto --- */

    .skeleton-title {
        width: 80%;
        height: 35px;
    }

    .skeleton-price {
        width: 30%;
        height: 25px;
    }

    .skeleton-text {
        width: 100%;
        height: 16px;
    }

    .skeleton-text.short {
        width: 70%;
    }

    .skeleton-add-to-cart {
        display: flex;
        gap: 10px;
        align-items: center;
        margin-top: 15px;
    }

    .skeleton-quantity {
        width: 80px;
        height: 45px;
    }

    .skeleton-button {
        flex-grow: 1;
        /* Ocupa el espacio restante */
        height: 45px;
        max-width: 200px;
    }

    .skeleton-meta {
        width: 50%;
        height: 14px;
        margin-top: 10px;
    }

    .skeleton-meta.short {
        width: 40%;
    }
    .product-grid-placeholder {
    display: grid;
    /* 4 columnas en pantallas grandes */
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- Tarjeta Placeholder --- */
.product-card-placeholder {
    background-color: #ffffff;
    border-radius: 12px;
    overflow: hidden; /* Muy importante para que el contenido no se salga */
}

/* --- Contenido de la Tarjeta --- */
.placeholder-image {
    height: 200px;
    /* No necesita color de fondo aquí, se lo da .shimmer-bg */
}

.placeholder-content {
    padding: 16px;
}

/* Formas del placeholder (título, precio, etc.) */
.placeholder-rating {
    height: 18px;
    width: 60%;
    margin-bottom: 12px;
    border-radius: 4px;
}

.placeholder-title {
    height: 20px;
    width: 90%;
    margin-bottom: 8px;
    border-radius: 4px;
}

.placeholder-title.short {
    width: 70%;
    margin-bottom: 16px;
}

.placeholder-price {
    height: 28px;
    width: 40%;
    border-radius: 4px;
    margin-left: auto;
}

/*
 * --- EL EFECTO SHIMMER ---
 * Esta es la parte clave.
 */

.shimmer-bg {
    animation-duration: 1.8s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: shimmer-animation;
    animation-timing-function: linear;
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
    background-size: 1200px 100%; /* Tamaño del gradiente, debe ser grande */
    position: relative;
}

@keyframes shimmer-animation {
    0% {
        background-position: -1200px 0;
    }
    100% {
        background-position: 1200px 0;
    }
}


/* --- Media Queries para Responsividad --- */

/* Para Tablets (2 columnas) */
@media (max-width: 992px) {
    .product-grid-placeholder {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Para Móviles (1 columna) */
@media (max-width: 576px) {
    .product-grid-placeholder {
        grid-template-columns: 1fr;
    }
    body {
        padding: 20px;
    }
}