/**
 * Layout público tienda (sin AdminLTE): flujo documental header → hero → main → footer.
 * Cargado solo desde layouts/storefront.html.
 */

body.storefront-layout {
    margin: 0;
    min-height: 100vh;
}

.storefront-root {
    min-height: 100vh;
}

.storefront-header {
    position: relative;
    z-index: 1030;
}

.storefront-header .storefront-navbar {
    position: relative;
}

/* Hero editorial: altura fija → sin CLS, object-fit: cover → imagen íntegra */
.storefront-hero {
    width: 100%;
    margin: 0;
    padding: 0;
    height: clamp(320px, 40vw, 600px);
    overflow: hidden;
    position: relative;
}

.storefront-hero-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center top; /* fallback; sobreescrito por .hero-focus-* */
}

/* Puntos focales del hero — activados via HeroSlide.hero_focal_class */
.hero-focus-top    { object-position: center top; }
.hero-focus-center { object-position: center center; }
.hero-focus-bottom { object-position: center bottom; }

.storefront-main {
    flex: 1 1 auto;
}

/* Cabecera de categoría (SSR): reemplazo visual del hero en vista por categoría */
.category-header {
    margin-bottom: 1rem;
}

.category-header__meta {
    margin-bottom: 0;
}

/* Mejora progresiva: ocultar hero si la URL indica categoría sin recarga completa */
body.category-active .storefront-hero {
    display: none;
}

.storefront-footer {
    margin-top: auto;
}

/* Sidebar filtros: sin navbar fija, sticky respecto al viewport */
body.storefront-layout #filtersSidebar {
    top: 1rem;
}