/* Bottom-sheet filter panel on mobile — the existing right-edge slide-in
   panel (.aiz-filter-sidebar.collapse-sidebar-wrap.sidebar-xl.sidebar-right)
   is untouched above 768px; this only overrides its closed-state geometry
   below that width so it slides up from the bottom instead of in from the
   right. The open-state rule (.collapse-sidebar-wrap.active .collapse-sidebar
   { transform: translate(0%,0%); }) already works for any starting
   direction and needs no change. */
@media (max-width: 767.98px) {
    .sidebar-xl.sidebar-right .collapse-sidebar {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        max-height: 85vh;
        height: auto;
        border-radius: 16px 16px 0 0;
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }

    .aiz-filter-sidebar .collapse-sidebar {
        max-height: 85vh;
        overflow-y: auto;
    }

    .bottom-sheet-handle {
        width: 36px;
        height: 4px;
        border-radius: 2px;
        background: #ddd;
        margin: 10px auto 4px;
    }
}

/* Skeleton loaders for infinite-scroll product cards */
.skeleton-image {
    width: 100%;
    padding-top: 100%;
}

.skeleton-shimmer {
    background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer-move 1.4s ease infinite;
    border-radius: 4px;
}

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