/* Bố cục danh mục và danh sách sản phẩm */
.catalog-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

    .catalog-layout > main {
        min-width: 0;
    }

    .catalog-layout .products-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 20px;
    }

    /* Khung sản phẩm giống mẫu video */
    .catalog-layout .product-card.spice-card {
        box-sizing: border-box;
        position: relative;
        display: flex;
        flex-direction: column;
        min-width: 0;
        height: 340px;
        padding: 16px;
        overflow: hidden;
        background: #f3f1e9;
        color: #24563c;
        border: none;
        border-radius: 8px;
        box-shadow: none;
        transform: none;
        cursor: pointer;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    /* Khối lượng ở góc trên */
    .catalog-layout .spice-sizes {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        min-height: 20px;
    }

        .catalog-layout .spice-sizes span {
            display: inline-block;
            padding: 2px 6px;
            border: 1px solid currentColor;
            border-radius: 20px;
            font-size: 10px;
            line-height: 1.2;
        }

    /* Vùng ảnh có kích thước cố định */
    .catalog-layout .spice-picture {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
        min-height: 0;
        padding: 20px 8px;
    }

        .catalog-layout .spice-picture img {
            display: block;
            width: auto;
            height: auto;
            max-width: 90%;
            max-height: 210px;
            object-fit: contain;
            transform: rotate(0deg);
            transition: transform 0.4s ease;
        }

    .catalog-layout .spice-placeholder {
        font-size: 12px;
        opacity: 0.55;
    }

    /* Tên và liên kết nằm dưới cùng */
    .catalog-layout .spice-info {
        flex-shrink: 0;
        min-height: 60px;
    }

        .catalog-layout .spice-info h3 {
            margin: 0 0 7px;
            color: inherit;
            font-family: inherit;
            font-size: 13px;
            font-weight: 700;
            line-height: 1.4;
        }

    .catalog-layout .spice-detail {
        color: inherit;
        font-size: 10px;
        text-decoration: underline;
        text-underline-offset: 3px;
        opacity: 0.8;
    }

/* Rê chuột: nền cam, chữ trắng, chai nghiêng */
@media (hover: hover) {
    .catalog-layout .product-card.spice-card:hover {
        background: #eb7025;
        color: #fff;
        border: none;
        box-shadow: none;
        transform: none;
    }

    .catalog-layout .spice-card:hover .spice-picture img {
        transform: rotate(9deg) scale(1.05);
    }
}

/* Máy tính nhỏ và máy tính bảng */
@media (max-width: 1200px) {
    .catalog-layout .products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .catalog-layout {
        grid-template-columns: minmax(0, 1fr);
    }

        .catalog-layout .catalog-sidebar {
            position: static;
            width: 100%;
            box-sizing: border-box;
        }
}

/* Điện thoại */
@media (max-width: 600px) {
    .catalog-layout .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .catalog-layout .product-card.spice-card {
        height: 310px;
        padding: 12px;
    }

    .catalog-layout .spice-picture img {
        max-height: 180px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .catalog-layout .product-card.spice-card,
    .catalog-layout .spice-picture img {
        transition: none;
    }

    .catalog-layout .spice-card:hover .spice-picture img {
        transform: none;
    }
    /* Làm chai nghiêng khi rê chuột vào thẻ */
    .catalog-layout .spice-card .spice-picture img {
        transform-origin: center;
        transition: transform 0.4s ease;
    }

    .catalog-layout .spice-card:hover .spice-picture img {
        transform: rotate(12deg) scale(1.05);
    }
}