/**
 * Product List Page CSS
 * Sửa CLS và tối ưu performance cho trang danh mục sản phẩm
 */

/* ====================================
 * Product Box Optimization
 * ==================================== */

.product-small.box {
    contain: layout style paint;
}

.product-small .box-image {
    aspect-ratio: 1/1;
    overflow: hidden;
    background: #f5f5f5;
}

.product-small .box-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.product-small .box-text {
    min-height: 120px;
}

/* ====================================
 * Filter Dropdown
 * ==================================== */

.filter-dropdown {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.2s, transform 0.2s, visibility 0s 0.2s;
    will-change: transform, opacity;
}

.filter-group.open .filter-dropdown {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.2s, transform 0.2s;
}

.filter-options .category-image {
    width: 40px;
    height: 40px;
    object-fit: cover;
    display: inline-block;
    vertical-align: middle;
}

/* ====================================
 * Product Grid
 * ==================================== */

.products.row {
    min-height: 400px;
}

/* ====================================
 * Skeleton Loader
 * ==================================== */

.skeleton-loader {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
}

.skeleton-item {
    width: calc(25% - 12px);
    aspect-ratio: 1/1.4;
    background: linear-gradient(-90deg, #e0e0e0 0%, #f5f5f5 50%, #e0e0e0 100%);
    background-size: 400% 400%;
    animation: shimmer 1.2s infinite ease-in-out;
    border-radius: 8px;
}

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

    100% {
        background-position: -100% 0;
    }
}

/* ====================================
 * Responsive
 * ==================================== */

@media (max-width: 768px) {
    .skeleton-item {
        width: calc(50% - 8px);
    }
}