/* ============================================================
   HOMEPAGE CATEGORY CARDS (Apple Style - Spectra/UAGB)
============================================================ */

/* Category Grid Container - NOW NEEDS MANUAL CONSTRAINTS */
.uagb-taxonomy__outer-wrap.uagb-layout-grid {
    gap: 30px !important;

    /* Manually constrain width since parent is now full width */
    max-width: 1240px !important;
    margin: 40px auto !important;
    padding: 0 20px !important;
    /* Gutter */
}

/* Category Card */
.uagb-taxomony-box {
    position: relative !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    aspect-ratio: 1/1 !important;
    min-height: 300px !important;
    transition: all 0.3s ease !important;
    background-size: cover !important;
    background-position: center !important;
    background-color: #f5f5f7 !important;
}

/* If Spectra adds image element, make it background */
.uagb-taxomony-box img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 0 !important;
}

/* Category Link */
.uagb-tax-link {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    width: 100% !important;
    height: 100% !important;
    text-decoration: none !important;
    position: relative !important;
    padding: 25px !important;
}

/* Category Title */
.uagb-tax-title {
    position: relative !important;
    z-index: 2 !important;
    color: #fff !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    margin: 0 0 8px 0 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
    line-height: 1.2 !important;
}

/* Product Count */
.uagb-tax-link {
    color: rgba(255, 255, 255, 0.95) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    position: relative !important;
    z-index: 2 !important;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5) !important;
}

/* Hide default count styling if needed */
.uagb-tax-link>*:not(.uagb-tax-title) {
    position: relative !important;
    z-index: 2 !important;
}

/* Responsive */
@media (max-width: 768px) {
    .uagb-taxonomy__outer-wrap.uagb-layout-grid {
        gap: 20px !important;
    }

    .uagb-tax-link {
        padding: 20px !important;
    }

    .uagb-tax-title {
        font-size: 20px !important;
    }
}

/* ============================================================
   BULLETPROOF SPECTRA SLIDER (Fixes Layout Fragility)
============================================================ */

/* 1. BREAKOUT: Force full width regardless of parent container */
.wp-block-uagb-slider.uagb-slider-container {
    width: 100vw !important;
    max-width: 100vw !important;
    /* Force full viewport width */
    margin-left: calc(-50vw + 50%) !important;
    /* Negative margin trick */
    margin-right: calc(-50vw + 50%) !important;
    left: 0 !important;
    right: 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

/* 2. FIX HEIGHT: Use consistent height for proper Swiper calculations */
.wp-block-uagb-slider .swiper-wrapper {
    height: 500px !important;
    /* Fixed height for wrapper to prevent layout shifts */
}

.wp-block-uagb-slider .swiper-slide {
    height: 500px !important;
    /* Match wrapper height */
    max-height: 70vh !important;
    /* Limit on very tall screens */
    display: flex !important;
    align-items: center !important;
    /* Center vertically */
    justify-content: center !important;
    /* Center horizontally */
    background-size: cover !important;
    /* Ensure image covers full area */
    background-position: center !important;
    /* Center the image */
    background-repeat: no-repeat !important;
}

/* 3. EXPAND CONTENT: Allow text to be wider */
.wp-block-uagb-slider .uagb-slider-content-wrap {
    max-width: 100% !important;
    /* Allow background to cover full width */
    width: 100% !important;
    margin: 0 !important;
    padding: 60px 20px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    /* Center text content */
    justify-content: center !important;
    background-size: cover !important;
    background-position: center !important;
}

/* 5. TEXT CONTAINER: Keep text readable within the full-width background */
.wp-block-uagb-slider .uagb-slider-content-wrap>*,
.wp-block-uagb-slider .swiper-content>* {
    max-width: 1200px !important;
    /* Text constraint */
    width: 100% !important;
}

/* 6. SPECIFIC FIX FOR SWIPER CONTENT (User's bg image is here) */
.wp-block-uagb-slider .swiper-content {
    width: 100% !important;
    max-width: 100% !important;
    height: 500px !important;
    /* Match slide height */
    max-height: 70vh !important;
    /* Limit on tall screens */
    margin: 0 !important;
    padding: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
}

/* 4. FIX TEXT SPACING */
.wp-block-uagb-slider h1,
.wp-block-uagb-slider h2,
.wp-block-uagb-slider h3 {
    line-height: 1.2 !important;
    /* Fix oversized line-height */
    margin-bottom: 20px !important;
    max-width: 100% !important;
    /* Let it fill the 1200px */
}

/* Mobile Adjustments */
@media (max-width: 768px) {

    /* Force full width on mobile - remove any container padding */
    .wp-block-uagb-slider.uagb-slider-container {
        padding: 0 !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
    }

    .wp-block-uagb-slider .swiper-wrapper {
        height: 400px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .wp-block-uagb-slider .swiper-slide {
        height: 400px !important;
        max-height: 60vh !important;
        /* Smaller on mobile */
        padding: 0 !important;
        margin: 0 !important;
        width: 100vw !important;
        /* Force full viewport width */
        background-size: cover !important;
        /* Ensure background covers entire area */
    }

    .wp-block-uagb-slider .swiper-content {
        height: 400px !important;
        max-height: 60vh !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        background-size: cover !important;
        /* Fill entire width with background */
    }

    .wp-block-uagb-slider .uagb-slider-content-wrap {
        padding: 40px 20px !important;
        /* Keep text padding but not container */
    }

    /* Keep navigation arrows inside the screen */
    html body .wp-block-uagb-slider .swiper-button-prev {
        left: 10px !important;
        right: auto !important;
        transform: none !important;
    }

    html body .wp-block-uagb-slider .swiper-button-next {
        right: 10px !important;
        left: auto !important;
        transform: none !important;
    }
}