/**
 * Banner de tienda/categoría (frontend + preview del editor).
 *
 * Todo el aspecto se controla con variables CSS que inyecta el renderer:
 *   --d-*  valores de ESCRITORIO (siempre presentes).
 *   --m-*  valores de MÓVIL (solo si el diseño NO se comparte).
 *
 * La regla base mapea las variables "efectivas" (--banner-h, --title-size…) a
 * las de escritorio. El bloque de remapeo a móvil (cada efectiva = --m-* con
 * fallback a --d-*) se aplica en dos sitios:
 *   1) @media (max-width:768px)        → responsive real en el sitio.
 *   2) .fnr-cat-banner.is-movil-preview → el toggle "Móvil" del editor (las
 *      media queries son por viewport, no por elemento; por eso se duplica).
 */

.fnr-cat-banner {
    position: relative;
    width: 100%;
    height: var(--banner-h, 180px);
    overflow: hidden;
    box-sizing: border-box;
    background-color: #151515;
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(120deg, #1d1d1d 0%, #131313 55%, #0c0c0c 100%);
    background-size: 20px 20px, 100% 100%;
    background-position: center;

    /* ---- Variables efectivas = ESCRITORIO ---- */
    --banner-h: var(--d-banner-h, 180px);
    --content-max: var(--d-content-max, 80rem);
    --pad-x: var(--d-pad-x, 0px);
    --align-items: var(--d-align-items, flex-start);
    --text-align: var(--d-text-align, left);
    --justify: var(--d-justify, center);

    --bg-color: var(--d-bg-color, transparent);
    --bg-image: var(--d-bg-image, none);
    --bg-size: var(--d-bg-size, cover);
    --bg-pos: var(--d-bg-pos, center);
    --ov-color: var(--d-ov-color, #000);
    --ov-op: var(--d-ov-op, 0);

    --title-font: var(--d-title-font, "Roboto Condensed", "Arial Narrow", sans-serif);
    --title-size: var(--d-title-size, 2.5rem);
    --title-weight: var(--d-title-weight, 900);
    --title-transform: var(--d-title-transform, uppercase);
    --title-spacing: var(--d-title-spacing, 3px);
    --title-lh: var(--d-title-lh, 1);
    --title-color: var(--d-title-color, #fff);

    --sub-font: var(--d-sub-font, "Roboto", -apple-system, "Segoe UI", sans-serif);
    --sub-size: var(--d-sub-size, 0.875rem);
    --sub-weight: var(--d-sub-weight, 400);
    --sub-transform: var(--d-sub-transform, none);
    --sub-spacing: var(--d-sub-spacing, 0.3px);
    --sub-lh: var(--d-sub-lh, 1.4);
    --sub-color: var(--d-sub-color, #bbb);

    --glow-vis: var(--d-glow-vis, 1);
}

/* Capa de fondo (color sólido o imagen); en modo gradiente es transparente y
   deja ver el gradiente base del propio .fnr-cat-banner. */
.fnr-cat-banner__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: var(--bg-color, transparent);
    background-image: var(--bg-image, none);
    background-size: var(--bg-size, cover);
    background-position: var(--bg-pos, center);
    background-repeat: no-repeat;
    pointer-events: none;
}

/* Capa oscura sobre la imagen para legibilidad. */
.fnr-cat-banner__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: var(--ov-color, #000);
    opacity: var(--ov-op, 0);
    pointer-events: none;
}

/* Resplandor rojo diagonal (decorativo); se apaga con --glow-vis. */
.fnr-cat-banner::after {
    content: "";
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: 34%;
    width: 160px;
    background: linear-gradient(90deg,
        rgba(204, 0, 0, 0) 0%,
        rgba(204, 0, 0, 0.12) 50%,
        rgba(204, 0, 0, 0) 100%);
    transform: skewX(-18deg);
    opacity: var(--glow-vis, 1);
    pointer-events: none;
    z-index: 1;
}

/* Iconos decorativos (posición/tamaño/color/opacidad los da el estilo inline). */
.fnr-cat-banner__deco {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.fnr-cat-banner__deco-item {
    position: absolute;
    display: block;
}
.fnr-cat-banner__deco-item svg {
    display: block;
    width: 100%;
    height: 100%;
}
/* Con diseños distintos: el set de móvil se oculta por defecto (escritorio). */
.fnr-cat-banner--deco-split .fnr-cat-banner__deco--m {
    display: none;
}

.fnr-cat-banner__inner {
    position: relative;
    z-index: 2;
    height: 100%;
    width: 100%;
    max-width: var(--content-max, 80rem);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: var(--justify, center);
    align-items: var(--align-items, flex-start);
    text-align: var(--text-align, left);
    padding-block: 0;
    padding-inline: var(--pad-x, 0px);
    box-sizing: border-box;
}

.fnr-cat-banner__title {
    margin: 0;
    font-family: var(--title-font);
    font-weight: var(--title-weight, 900);
    font-size: var(--title-size, 2.5rem);
    line-height: var(--title-lh, 1);
    letter-spacing: var(--title-spacing, 3px);
    text-transform: var(--title-transform, uppercase);
    color: var(--title-color, #fff);
}

.fnr-cat-banner__sub {
    margin: 10px 0 0;
    font-family: var(--sub-font);
    font-weight: var(--sub-weight, 400);
    font-size: var(--sub-size, 0.875rem);
    line-height: var(--sub-lh, 1.4);
    letter-spacing: var(--sub-spacing, 0.3px);
    text-transform: var(--sub-transform, none);
    color: var(--sub-color, #bbb);
}

.fnr-cat-banner__sub[hidden] {
    display: none;
}

/* ===== Texto split: variantes --d (desktop) y --m (móvil) ===== */
/* Por defecto, la variante móvil está oculta (se ve solo en ≤768px). */
.fnr-cat-banner__title--m,
.fnr-cat-banner__sub--m {
    display: none;
}

@media (max-width: 768px) {
    .fnr-cat-banner__title--d,
    .fnr-cat-banner__sub--d {
        display: none;
    }
    .fnr-cat-banner__title--m {
        display: block;
    }
    .fnr-cat-banner__sub--m {
        display: block;
    }
    .fnr-cat-banner__sub--m[hidden] {
        display: none;
    }
}

/* En el preview del editor: cuando está en modo móvil se invierte la lógica. */
.fnr-cat-banner.is-movil-preview .fnr-cat-banner__title--d,
.fnr-cat-banner.is-movil-preview .fnr-cat-banner__sub--d {
    display: none;
}
.fnr-cat-banner.is-movil-preview .fnr-cat-banner__title--m {
    display: block;
}
.fnr-cat-banner.is-movil-preview .fnr-cat-banner__sub--m:not([hidden]) {
    display: block;
}
/* Y la variante desktop sí se muestra en preview normal. */
.fnr-cat-banner:not(.is-movil-preview) .fnr-cat-banner__title--d {
    display: block;
}
.fnr-cat-banner:not(.is-movil-preview) .fnr-cat-banner__sub--d:not([hidden]) {
    display: block;
}

/* ===== Remapeo a MÓVIL (efectiva = --m-* con fallback a --d-*) ===== */
@media (max-width: 768px) {
    .fnr-cat-banner {
        --banner-h: var(--m-banner-h, var(--d-banner-h, 130px));
        --content-max: var(--m-content-max, var(--d-content-max, 80rem));
        --pad-x: var(--m-pad-x, var(--d-pad-x, 0px));
        --align-items: var(--m-align-items, var(--d-align-items, flex-start));
        --text-align: var(--m-text-align, var(--d-text-align, left));
        --justify: var(--m-justify, var(--d-justify, center));
        --bg-color: var(--m-bg-color, var(--d-bg-color, transparent));
        --bg-image: var(--m-bg-image, var(--d-bg-image, none));
        --bg-size: var(--m-bg-size, var(--d-bg-size, cover));
        --bg-pos: var(--m-bg-pos, var(--d-bg-pos, center));
        --ov-color: var(--m-ov-color, var(--d-ov-color, #000));
        --ov-op: var(--m-ov-op, var(--d-ov-op, 0));
        --title-font: var(--m-title-font, var(--d-title-font, "Roboto Condensed", "Arial Narrow", sans-serif));
        --title-size: var(--m-title-size, var(--d-title-size, 2.5rem));
        --title-weight: var(--m-title-weight, var(--d-title-weight, 900));
        --title-transform: var(--m-title-transform, var(--d-title-transform, uppercase));
        --title-spacing: var(--m-title-spacing, var(--d-title-spacing, 3px));
        --title-lh: var(--m-title-lh, var(--d-title-lh, 1));
        --title-color: var(--m-title-color, var(--d-title-color, #fff));
        --sub-font: var(--m-sub-font, var(--d-sub-font, "Roboto", -apple-system, "Segoe UI", sans-serif));
        --sub-size: var(--m-sub-size, var(--d-sub-size, 0.875rem));
        --sub-weight: var(--m-sub-weight, var(--d-sub-weight, 400));
        --sub-transform: var(--m-sub-transform, var(--d-sub-transform, none));
        --sub-spacing: var(--m-sub-spacing, var(--d-sub-spacing, 0.3px));
        --sub-lh: var(--m-sub-lh, var(--d-sub-lh, 1.4));
        --sub-color: var(--m-sub-color, var(--d-sub-color, #bbb));
        --glow-vis: var(--m-glow-vis, var(--d-glow-vis, 1));
    }
    /* Gutter mínimo en móvil para que el texto no toque el borde. */
    .fnr-cat-banner__inner {
        padding-inline: max(var(--pad-x, 0px), 16px);
    }
    /* Con diseños distintos, en móvil se muestra el set de decoración móvil. */
    .fnr-cat-banner--deco-split .fnr-cat-banner__deco--d {
        display: none;
    }
    .fnr-cat-banner--deco-split .fnr-cat-banner__deco--m {
        display: block;
    }
}

/* Mismo remapeo para el toggle "Móvil" del editor (viewport ancho). */
.fnr-cat-banner.is-movil-preview {
    --banner-h: var(--m-banner-h, var(--d-banner-h, 130px));
    --content-max: var(--m-content-max, var(--d-content-max, 80rem));
    --pad-x: var(--m-pad-x, var(--d-pad-x, 0px));
    --align-items: var(--m-align-items, var(--d-align-items, flex-start));
    --text-align: var(--m-text-align, var(--d-text-align, left));
    --justify: var(--m-justify, var(--d-justify, center));
    --bg-color: var(--m-bg-color, var(--d-bg-color, transparent));
    --bg-image: var(--m-bg-image, var(--d-bg-image, none));
    --bg-size: var(--m-bg-size, var(--d-bg-size, cover));
    --bg-pos: var(--m-bg-pos, var(--d-bg-pos, center));
    --ov-color: var(--m-ov-color, var(--d-ov-color, #000));
    --ov-op: var(--m-ov-op, var(--d-ov-op, 0));
    --title-font: var(--m-title-font, var(--d-title-font, "Roboto Condensed", "Arial Narrow", sans-serif));
    --title-size: var(--m-title-size, var(--d-title-size, 2.5rem));
    --title-weight: var(--m-title-weight, var(--d-title-weight, 900));
    --title-transform: var(--m-title-transform, var(--d-title-transform, uppercase));
    --title-spacing: var(--m-title-spacing, var(--d-title-spacing, 3px));
    --title-lh: var(--m-title-lh, var(--d-title-lh, 1));
    --title-color: var(--m-title-color, var(--d-title-color, #fff));
    --sub-font: var(--m-sub-font, var(--d-sub-font, "Roboto", -apple-system, "Segoe UI", sans-serif));
    --sub-size: var(--m-sub-size, var(--d-sub-size, 0.875rem));
    --sub-weight: var(--m-sub-weight, var(--d-sub-weight, 400));
    --sub-transform: var(--m-sub-transform, var(--d-sub-transform, none));
    --sub-spacing: var(--m-sub-spacing, var(--d-sub-spacing, 0.3px));
    --sub-lh: var(--m-sub-lh, var(--d-sub-lh, 1.4));
    --sub-color: var(--m-sub-color, var(--d-sub-color, #bbb));
    --glow-vis: var(--m-glow-vis, var(--d-glow-vis, 1));
}

.fnr-cat-banner.is-movil-preview .fnr-cat-banner__inner {
    padding-inline: max(var(--pad-x, 0px), 16px);
}
.fnr-cat-banner.is-movil-preview.fnr-cat-banner--deco-split .fnr-cat-banner__deco--d {
    display: none;
}
.fnr-cat-banner.is-movil-preview.fnr-cat-banner--deco-split .fnr-cat-banner__deco--m {
    display: block;
}