/* Molla demo styles are loaded from the selected StoreWebsite.LayoutKey.
   These scoped rules adapt the shared, data-driven storefront markup to a
   handful of the original demo compositions while keeping mobile sizing safe. */

:root[data-store-layout="demo-2"] #bannerContainer .banner-copy,
:root[data-store-layout="demo-7"] #bannerContainer .banner-copy {
    right: clamp(2rem, 7vw, 7rem);
    left: auto;
}

:root[data-store-layout="demo-2"] #homeProductsContainer .home-featured-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

:root[data-store-layout="demo-2"] .category-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

:root[data-store-layout="demo-3"] #bannerContainer .banner-copy {
    left: 50%;
    right: auto;
    top: auto;
    bottom: clamp(1.5rem, 5vw, 4rem);
    max-width: min(70%, 720px);
    transform: translateX(-50%);
    text-align: center;
}

:root[data-store-layout="demo-3"] #homeProductsContainer .home-featured-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
}

:root[data-store-layout="demo-7"] #bannerContainer .banner-copy {
    top: auto;
    bottom: clamp(1.5rem, 5vw, 4rem);
    transform: none;
}

:root[data-store-layout="demo-7"] #homeProductsContainer .home-featured-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

:root[data-store-layout="demo-8"] #homeProductsContainer .home-featured-grid,
:root[data-store-layout="demo-10"] #homeProductsContainer .home-featured-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

:root[data-store-layout="demo-8"] .category-product-grid,
:root[data-store-layout="demo-10"] .category-product-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

:root[data-store-layout="demo-24"] #bannerContainer .banner-copy {
    left: auto;
    right: clamp(2rem, 7vw, 7rem);
    max-width: min(45%, 560px);
}

:root[data-store-layout="demo-24"] #homeProductsContainer .home-featured-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

:root[data-store-layout="demo-24"] .category-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

:root[data-store-layout="demo-24"] .category-product-grid .product-media {
    height: 270px;
}

@media (max-width: 991px) {
    :root[data-store-layout="demo-2"] #homeProductsContainer .home-featured-grid,
    :root[data-store-layout="demo-7"] #homeProductsContainer .home-featured-grid,
    :root[data-store-layout="demo-8"] #homeProductsContainer .home-featured-grid,
    :root[data-store-layout="demo-10"] #homeProductsContainer .home-featured-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    :root[data-store-layout="demo-8"] .category-product-grid,
    :root[data-store-layout="demo-10"] .category-product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    :root[data-store-layout="demo-2"] #bannerContainer .banner-copy,
    :root[data-store-layout="demo-7"] #bannerContainer .banner-copy,
    :root[data-store-layout="demo-24"] #bannerContainer .banner-copy {
        right: 1.2rem;
        left: 1.2rem;
        max-width: none;
    }

    :root[data-store-layout="demo-3"] #bannerContainer .banner-copy {
        right: 1.2rem;
        left: 1.2rem;
        max-width: none;
        transform: none;
    }

    :root[data-store-layout="demo-2"] #homeProductsContainer .home-featured-grid,
    :root[data-store-layout="demo-3"] #homeProductsContainer .home-featured-grid,
    :root[data-store-layout="demo-7"] #homeProductsContainer .home-featured-grid,
    :root[data-store-layout="demo-8"] #homeProductsContainer .home-featured-grid,
    :root[data-store-layout="demo-10"] #homeProductsContainer .home-featured-grid,
    :root[data-store-layout="demo-24"] #homeProductsContainer .home-featured-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    :root[data-store-layout="demo-2"] .category-product-grid,
    :root[data-store-layout="demo-3"] .category-product-grid,
    :root[data-store-layout="demo-7"] .category-product-grid,
    :root[data-store-layout="demo-8"] .category-product-grid,
    :root[data-store-layout="demo-10"] .category-product-grid,
    :root[data-store-layout="demo-24"] .category-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    :root[data-store-layout="demo-24"] .category-product-grid .product-media {
        height: 175px;
    }
}