/* Grid Banner Injector v4 — Frontend */

/* =====================================================
   BANNER LIST ITEM — base (desktop first)
===================================================== */
li.gbi-item, div.gbi-item {
    list-style:  none !important;
    padding:     0 !important;
    margin:      0 !important;
    border:      none !important;
    background:  transparent !important;
    box-shadow:  none !important;
    min-height:  0 !important;
    overflow:    visible !important;
}

/* Kill any WooCommerce / XStore chrome injected into our banner slot */
li.gbi-item .onsale, div.gbi-item .onsale,
li.gbi-item .product-label,
li.gbi-item .badge,
li.gbi-item .wishlist-button,
li.gbi-item .compare-button,
li.gbi-item .yith-wcwl-add-to-wishlist,
li.gbi-item .add_to_cart_button,
li.gbi-item .product-footer,
li.gbi-item .woocommerce-loop-product__title,
li.gbi-item .price,
li.gbi-item .star-rating { display: none !important; }

.products li.gbi-item:hover, .products div.gbi-item:hover { box-shadow: none !important; transform: none !important; }
li.gbi-item .product-inner, div.gbi-item .product-inner { background: transparent !important; border: none !important; box-shadow: none !important; }

/* =====================================================
   BANNER WRAPPER
===================================================== */
.gbi-wrap {
    display:        block;
    width:          100%;
    position:       relative;
    overflow:       hidden;
    border-radius:  4px;
    text-decoration: none;
    /* Desktop: fill the product card height */
    height:         100%;
}
a.gbi-wrap:hover { text-decoration: none; }

/* =====================================================
   IMAGE — fills wrapper
===================================================== */
.gbi-wrap img {
    display:    block !important;
    width:      100% !important;
    height:     100% !important;
    object-fit: cover !important;
    /* Reset any XStore lazy-load styles */
    opacity:    1 !important;
    filter:     none !important;
    transform:  none !important;
    transition: none !important;
    border-radius: 4px;
}

/* =====================================================
   ZOOM EFFECT — Banner 2 only, desktop only
===================================================== */
@media (min-width: 769px) {
    .gbi-wrap.gbi-zoom img {
        transition: transform 0.5s ease !important;
    }
    .gbi-wrap.gbi-zoom:hover img {
        transform: scale(1.07) !important;
    }
}

/* =====================================================
   TEXT OVERLAY — Banner 2, bottom center
===================================================== */
.gbi-overlay {
    position:   absolute;
    bottom:     0;
    left:       0;
    right:      0;
    padding:    12px 16px;
    text-align: center;
    z-index:    3;
    pointer-events: none;
    /* background set inline by JS */
}
.gbi-overlay span {
    display:        inline-block;
    color:          #fff; /* overridden inline */
    font-weight:    600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height:    1.3;
    /* font-size set inline */
}

/* =====================================================
   DESKTOP — match product card height
   Uses padding-bottom on li to match product card
===================================================== */
@media (min-width: 769px) {
    li.gbi-item, div.gbi-item {
        /* padding-bottom set by JS to match sibling */
    }
    .gbi-wrap {
        /* height:100% works because li has padding-bottom trick or flex height */
        min-height: 280px;
    }
}

/* =====================================================
   MOBILE — full-width row, 1:1 square
===================================================== */
@media (max-width: 768px) {

    li.gbi-item, div.gbi-item {
        /* Force full row */
        width:      100% !important;
        max-width:  100% !important;
        flex:       0 0 100% !important;
        flex-basis: 100% !important;
        float:      none !important;
        clear:      both !important;
        padding:    0 !important;
        margin:     0 0 0px 0 !important;

        /* CSS Grid: span all columns */
        grid-column: 1 / -1 !important;

        /* 1:1 square ratio — modern and clean */
        aspect-ratio: 1 / 1;
        position: relative;
        overflow: hidden !important;
    }

    .gbi-wrap {
        /* Fill the square li completely */
        position: absolute !important;
        top:    0 !important;
        left:   0 !important;
        width:  100% !important;
        height: 100% !important;
    }

    .gbi-wrap img {
        position: absolute !important;
        top:    0 !important;
        left:   0 !important;
        width:  100% !important;
        height: 100% !important;
        object-fit: cover !important;
        /* No zoom on mobile */
        transition: none !important;
        transform:  none !important;
    }

    .gbi-wrap.gbi-zoom img {
        transition: none !important;
        transform:  none !important;
    }
    .gbi-wrap.gbi-zoom:hover img {
        transform: none !important;
    }

    /* Text overlay on mobile */
    .gbi-overlay {
        position: absolute;
        padding:  8px 12px;
    }
    .gbi-overlay span {
        font-size: 12px !important;
    }
}

/* Fade-in */
@keyframes gbiFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
li.gbi-item, div.gbi-item { animation: gbiFade 0.3s ease forwards; }