.Popular_Product {
    width: 100%;
    margin-bottom: 24px;
}

.Popular_Product .pp_swiper {
    padding: 4px 2px 10px;
}

.Popular_Product .pp_swiper .swiper-slide {
    height: auto;
}

/* Loading skeleton (same row layout as the cards) */
.Popular_Product .pp_skeleton {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.Popular_Product .pp_skeleton_card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}

.Popular_Product .pp_sk_img,
.Popular_Product .pp_sk_line {
    display: block;
    border-radius: 6px;
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: ppRowShimmer 1.2s ease-in-out infinite;
}

.Popular_Product .pp_sk_img {
    aspect-ratio: 1 / 0.92;
    border-radius: 8px;
}

.Popular_Product .pp_sk_line {
    height: 12px;
}

.Popular_Product .pp_sk_short {
    width: 55%;
}

@media (min-width: 576px) {
    .Popular_Product .pp_skeleton {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .Popular_Product .pp_skeleton {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@keyframes ppRowShimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .Popular_Product .pp_sk_img,
    .Popular_Product .pp_sk_line {
        animation: none;
    }
}