/* Skeletons : applique l'effet shimmer sur les VRAIS éléments des cards.
   Le HTML du skeleton réutilise les classes .product-card / .blog-card / .search-card,
   donc les dimensions matchent automatiquement le CSS réel. */

@keyframes skeleton-sheen {
    0%   { background-position: 150% 0; }
    100% { background-position: -50% 0; }
}

/* Effet sheen diagonal qui balaie de droite à gauche.
   Couche 1 : reflet diagonal animé.
   Couche 2 : background-color de fond mat (déclaré via background-color, pas dans le shorthand). */
.is-skeleton .product-image,
.is-skeleton .product-name,
.is-skeleton .variant-select,
.is-skeleton .btn-add-to-cart,
.is-skeleton .blog-card-image,
.is-skeleton .blog-card-title,
.is-skeleton .blog-card-excerpt,
.is-skeleton .blog-card-date,
.is-skeleton .blog-card-views,
.is-skeleton .blog-card-author,
.is-skeleton .blog-card-cta,
.is-skeleton .search-card-img,
.is-skeleton .search-card-name,
.is-skeleton .search-card-price,
.is-skeleton .search-card-desc {
    background-color: rgba(255, 255, 255, 0.08) !important;
    background-image: linear-gradient(
        100deg,
        rgba(255, 255, 255, 0)    30%,
        rgba(255, 255, 255, 0.32) 50%,
        rgba(255, 255, 255, 0)    70%
    ) !important;
    background-size: 200% 100% !important;
    background-repeat: no-repeat !important;
    animation: skeleton-sheen 1.6s ease-in-out infinite;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    border-radius: 8px;
}

/* Image carrée du product-card : on rétrécit la zone shimmer pour donner de l'air
   (pas collé aux bords) et on pousse visuellement vers le haut avec un gros padding
   en bas. Padding asymétrique = haut 30px / bas 70px / horizontal 30px.
   background-origin/clip alignés sur le content-box pour que le sheen reste
   cohérent dans la zone réduite. */
.is-skeleton .product-image {
    padding: 30px 30px 70px 30px !important;
    background-origin: content-box !important;
    background-clip: content-box !important;
    border-radius: 16px;
}

/* Override pour les cards a fond clair (blog, search) : shimmer purple translucide
   au lieu de blanc translucide, sinon invisible sur fond #fff. */
.is-skeleton .blog-card-image,
.is-skeleton .blog-card-title,
.is-skeleton .blog-card-excerpt,
.is-skeleton .blog-card-date,
.is-skeleton .blog-card-views,
.is-skeleton .blog-card-author,
.is-skeleton .blog-card-cta,
.is-skeleton .search-card-img,
.is-skeleton .search-card-name,
.is-skeleton .search-card-price,
.is-skeleton .search-card-desc {
    background-color: rgba(47, 21, 108, 0.10) !important;
    background-image: linear-gradient(
        100deg,
        rgba(47, 21, 108, 0)    30%,
        rgba(47, 21, 108, 0.18) 50%,
        rgba(47, 21, 108, 0)    70%
    ) !important;
}

/* Conserver les coins arrondis spécifiques aux pills */
.is-skeleton .variant-select,
.is-skeleton .btn-add-to-cart,
.is-skeleton .blog-card-cta {
    border-radius: 9999px;
}

.is-skeleton .blog-card-image {
    border-radius: 16px;
}

/* Meta n'a plus de sens visible en skeleton (overlay sur shimmer = bruit visuel) */
.is-skeleton .blog-card-meta {
    display: none;
}

.is-skeleton .search-card-img {
    border-radius: 8px;
}

/* Cache la flèche du select */
.is-skeleton .select-wrapper::after { display: none; }

/* Cache les SVG icônes (étoile, calendrier, oeil, auteur, etc.) */
.is-skeleton svg { visibility: hidden; }

/* Pas d'interactivité ni de hover */
.is-skeleton,
.is-skeleton * {
    pointer-events: none;
    cursor: default;
    transition: none !important;
}
.is-skeleton:hover {
    transform: none !important;
}
.is-skeleton:hover .product-image {
    transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .is-skeleton .product-image,
    .is-skeleton .product-name,
    .is-skeleton .variant-select,
    .is-skeleton .btn-add-to-cart,
    .is-skeleton .blog-card-image,
    .is-skeleton .blog-card-title,
    .is-skeleton .blog-card-excerpt,
    .is-skeleton .blog-card-date,
    .is-skeleton .blog-card-views,
    .is-skeleton .blog-card-author,
    .is-skeleton .blog-card-cta,
    .is-skeleton .search-card-img,
    .is-skeleton .search-card-name,
    .is-skeleton .search-card-price,
    .is-skeleton .search-card-desc {
        animation: none;
    }
}