/* =====================================
   Banner Grid Layout – Mobile + Desktop
   ===================================== */

/* Grid container (ALL screen sizes) */
#app > div.app-inner.flex.flex-col.min-h-full.bg-storeBG 
> section.s-block.s-block--banners.container 
> div {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto auto;
    gap: 16px;
}

/* Shared banner item styles */
#app > div.app-inner.flex.flex-col.min-h-full.bg-storeBG 
> section.s-block.s-block--banners.container 
> div > * {
    width: 100%;
    height: 100%;
    min-height: 260px;
}

/* First banner (top-left) */
#app > div.app-inner.flex.flex-col.min-h-full.bg-storeBG 
> section.s-block.s-block--banners.container 
> div > *:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
}

/* Second banner (bottom-left) */
#app > div.app-inner.flex.flex-col.min-h-full.bg-storeBG 
> section.s-block.s-block--banners.container 
> div > *:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
}

/* Third banner (right – spans both rows) */
#app > div.app-inner.flex.flex-col.min-h-full.bg-storeBG 
> section.s-block.s-block--banners.container 
> div > *:nth-child(3) {
    grid-column: 2;
    grid-row: 1 / span 2;
    min-height: 540px;
}

/* =====================================
   Mobile refinement (height only)
   ===================================== */

@media (max-width: 768px) {

    #app > div.app-inner.flex.flex-col.min-h-full.bg-storeBG 
    > section.s-block.s-block--banners.container 
    > div > * {
        min-height: 0px;
    }

    #app > div.app-inner.flex.flex-col.min-h-full.bg-storeBG 
    > section.s-block.s-block--banners.container 
    > div > *:nth-child(3) {
        min-height: 215px;
    }

}


.product-card {
    background-color: #ffffff00;
}

.text-primary-reverse {
    color: #ffffff;
}