/* =========================================================
   ROBLOX — BACKGROUND PARA TIENDAS
   No modifica el hero de index.php.
   ========================================================= */

body.catalog-page {
    min-height: 100vh;
    background-color: #05060d;
    background-image:
        linear-gradient(
            180deg,
            rgba(3, 5, 12, .72) 0%,
            rgba(3, 5, 12, .58) 35%,
            rgba(3, 5, 12, .78) 100%
        ),
        url("../images/roblox/tienda-bg.svg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    background-attachment: fixed;
}

/* El contenido mantiene su estructura, tarjetas y botones originales. */
body.catalog-page main {
    position: relative;
    z-index: 1;
}

body.catalog-page .site-footer {
    position: relative;
    z-index: 2;
}

/* En pantallas chicas se evita fixed para mejorar rendimiento/compatibilidad. */
@media (max-width: 768px) {
    body.catalog-page {
        background-attachment: scroll;
        background-position: center top;
    }
}


/* =========================================================
   ROBLOX STORE — FIX REAL DEL BACKGROUND
   SOLO páginas catalog-page / tienda.php.
   NO toca index.php ni el hero del inicio.
   ========================================================= */

body.catalog-page {
    position: relative !important;
    min-height: 100vh !important;
    background-color: #05070d !important;
    background-image:
        linear-gradient(
            180deg,
            rgba(3,5,12,.58) 0%,
            rgba(3,5,12,.46) 38%,
            rgba(3,5,12,.72) 100%
        ),
        url("../images/roblox/hero.svg") !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center center !important;
    background-attachment: fixed !important;
}

/* El contenedor general de la tienda no puede pintar una placa negra
   encima del background. Las tarjetas/productos conservan su propio fondo. */
body.catalog-page main,
body.catalog-page main > .container,
body.catalog-page .container {
    background: transparent !important;
}

/* Conservamos legibilidad sin ocultar el artwork. */
body.catalog-page .store-product-card {
    background: rgba(7,10,18,.90) !important;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

body.catalog-page .store-filter {
    background: rgba(8,11,18,.78) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Header por encima del fondo de la página. */
body.catalog-page .site-header {
    position: relative !important;
    z-index: 20 !important;
}

/* Evita que una regla heredada vuelva a poner el fondo negro. */
body.catalog-page main {
    position: relative !important;
    z-index: 1 !important;
}

/* El artwork sigue ocupando toda la ventana al hacer scroll. */
@media (max-width: 768px) {
    body.catalog-page {
        background-attachment: scroll !important;
        background-position: center center !important;
    }
}