/* ==========================================================
   AUNUCA CATEGORY CAROUSEL
   4 COLUMNS × 2 ROWS
   ========================================================== */

/*
 * Each carousel page contains 8 categories:
 *
 *  1   2   3   4
 *  5   6   7   8
 *
 * IMPORTANT:
 * This CSS does NOT change the Aunuca card design.
 */
.elementor-element-627ac5f .aunuca-category-page {
    display: grid !important;

    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

    column-gap: 30px !important;
    row-gap: 30px !important;

    width: 100% !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box;

    align-content: start;
}


/*
 * Remove Aunuca's original calculated width.
 *
 * This prevents the cards from becoming narrow
 * and showing text vertically.
 */
.elementor-element-627ac5f
.aunuca-category-page
.elementor-item {
    width: auto !important;
    max-width: 100% !important;
}


/*
 * Make each category occupy its grid column.
 *
 * Do NOT add background, border, radius, etc.
 * Aunuca's original card styling remains untouched.
 */
.elementor-element-627ac5f
.aunuca-category-page
.elementor-categories-item {
    width: 100% !important;
    max-width: 100% !important;
}


/* ==========================================================
   ARROWS
   ========================================================== */

/*
 * Both arrows are ALWAYS visible.
 */
.h1-slider-pre01,
.h1-slider-next01 {
    display: flex !important;
    visibility: visible !important;

    transition:
        opacity 0.2s ease,
        background-color 0.2s ease;
}


/*
 * DISABLED ARROW
 *
 * It remains visible but faded.
 */
.h1-slider-pre01.aunuca-nav-disabled,
.h1-slider-next01.aunuca-nav-disabled {
    opacity: 0.35 !important;

    cursor: default !important;

    pointer-events: none !important;
}


/*
 * ACTIVE ARROW
 */
.h1-slider-pre01:not(.aunuca-nav-disabled),
.h1-slider-next01:not(.aunuca-nav-disabled) {
    opacity: 1 !important;

    cursor: pointer !important;

    pointer-events: auto !important;
}


/* ==========================================================
   TABLET
   3 COLUMNS × 2 ROWS
   ========================================================== */

@media (max-width: 1024px) {

    .elementor-element-627ac5f .aunuca-category-page {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        column-gap: 20px !important;
        row-gap: 20px !important;
    }

}


/* ==========================================================
   MOBILE
   2 COLUMNS × 2 ROWS
   ========================================================== */

@media (max-width: 767px) {

    .elementor-element-627ac5f .aunuca-category-page {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        column-gap: 15px !important;
        row-gap: 20px !important;
    }

}