/* Style Savvys — Skeleton placeholders + Load More button for infinite scroll */

.ss-skeleton-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, 1fr);
    margin: 12px 0;
}
@media (min-width: 576px) { .ss-skeleton-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .ss-skeleton-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .ss-skeleton-grid { grid-template-columns: repeat(5, 1fr); } }

.ss-skeleton-card {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 8px;
    overflow: hidden;
    padding: 10px;
}
.ss-skeleton-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    background: linear-gradient(90deg, #f1f1f1 25%, #e7e7e7 50%, #f1f1f1 75%);
    background-size: 200% 100%;
    animation: ss-skeleton-shimmer 1.2s ease-in-out infinite;
    margin-bottom: 8px;
}
.ss-skeleton-line {
    height: 12px;
    border-radius: 4px;
    margin: 6px 0;
    background: linear-gradient(90deg, #f1f1f1 25%, #e7e7e7 50%, #f1f1f1 75%);
    background-size: 200% 100%;
    animation: ss-skeleton-shimmer 1.2s ease-in-out infinite;
}
.ss-skeleton-line.short { width: 60%; }

@keyframes ss-skeleton-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* Hide the visual pagination UL — infinite scroll replaces it.
   The #paginator-ajax div itself is kept (IO sentinel) but its contents
   are visually suppressed so users never see page numbers. */
#paginator-ajax .pagination { display: none !important; }
#paginator-ajax { min-height: 8px; }

/* Load More fallback button — auto-scroll still works; this guarantees loading
   even if the IntersectionObserver never fires. Centered on its own row. */
.ss-load-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 4px auto 28px;
    padding: 11px 30px;
    background: #4D1963;
    color: #fff;
    border: 0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .2s, opacity .2s;
}
.ss-load-more-btn:hover { background: #6b25b1; }
.ss-load-more-btn:disabled { opacity: .65; cursor: default; }

/* ------------------------------------------------------------------
   STICKY filter sidebar on listing pages (/products, /category/{slug},
   /shop/{slug}, flash-deals). On desktop (≥992px) the sidebar stays
   pinned while the product grid scrolls; on tablet/phone it remains
   a slide-in drawer (.filter-toggle-aside handled by existing JS).
   ------------------------------------------------------------------ */
@media (min-width: 992px) {
    /* Parent grid must not stretch children — otherwise sticky has nothing
       to stick within because children fill the full row height. */
    .flexible-grid.lg-down-1 {
        align-items: start;
    }
    /* The sidebar card itself */
    .flexible-grid.lg-down-1 > .filter-toggle-aside {
        position: sticky;
        top: 80px;                                  /* clears the fixed header */
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        scrollbar-width: thin;
    }
    /* Subtle scrollbar in WebKit so it doesn't clutter the sidebar */
    .flexible-grid.lg-down-1 > .filter-toggle-aside::-webkit-scrollbar {
        width: 6px;
    }
    .flexible-grid.lg-down-1 > .filter-toggle-aside::-webkit-scrollbar-thumb {
        background: #d4d4d4;
        border-radius: 3px;
    }
    .flexible-grid.lg-down-1 > .filter-toggle-aside::-webkit-scrollbar-track {
        background: transparent;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ss-skeleton-img, .ss-skeleton-line { animation: none; }
}