﻿/* Category cards title override */
.main-category .cart-small-desc .category-card-title {
    height: auto;
    margin-top: 0.75rem;
    margin-bottom: 0;
    color: var(--bs-heading-color);
}

/* Hover background using your custom token */
.cart-small:hover {
}

/* Large screens (≥ 992px): 7 equal columns per row */
@media (min-width: 992px) {
    .main-category .category-cards-wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .main-category .category-card-col {
        flex: 1 1 150px; /* can grow, can shrink, base width */
        max-width: 180px; /* optional: prevent over-wide cards */
        min-width: 140px; /* keep card readable */
    }
}


/* Small/medium screens: keep cards tall enough so "see more" matches others */
@media (max-width: 991.98px) {
    .main-category .cart-small {
    }
}

/* ---------- Smooth expand animation ---------- */

/* Animate ONLY the cards wrapper, not the title */
.main-category-expanded .category-cards-wrapper {
    animation: category-expand-container 0.35s ease-out;
    animation-fill-mode: both;
}

    /* Animate ONLY the "second row and beyond" cards.
   Inside .category-cards-wrapper:
   - child 1–7 = first row cards (7 items)
   - child 8+  = second row and beyond
*/
    .main-category-expanded .category-cards-wrapper .category-card-col:nth-child(n + 8) {
        opacity: 0;
        transform: translateY(20px);
        animation: category-expand-cards 0.4s ease-out forwards;
        animation-delay: 0.05s;
    }

/* Container subtle motion */
@keyframes category-expand-container {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Cards slide/fade up */
@keyframes category-expand-cards {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
