/*
Theme Name:   Hello Elementor Child — Serior
Theme URI:    https://serior.com
Description:  Child theme de Hello Elementor para personalizaciones de Serior. Permite extender shortcodes y otros sin tocar el theme parent.
Author:       Serior
Template:     hello-elementor
Version:      1.4.51
Text Domain:  hello-elementor-child
*/

/* ============================================================
   Breadcrumb del header — diseño "callout" para destacar el item actual.
   - Barra roja Serior a la izquierda + leve fondo degradado.
   - Último item (text node tras los links): grande, bold, oscuro.
   - Links previos: gris medio, tamaño pequeño, peso normal.
   - Separadores "/" heredan el color/tamaño del nav (también pequeños).
   - El "/" inmediatamente antes del último item se oculta vía ::before
     para que el último item respire y se lea más como un título.
   ============================================================ */
nav.woocommerce-breadcrumb {
    font-size: 19px !important;
    font-weight: 800 !important;     /* aplica al último item (text node) */
    line-height: 1.4;
    padding: 10px 14px !important;
    color: #1a1a1a !important;       /* color del último item */
    letter-spacing: 0.005em;
    border-left: 4px solid #d92418;
    background: linear-gradient(90deg, rgba(217, 36, 24, 0.07) 0%, rgba(217, 36, 24, 0) 65%);
    border-radius: 0 6px 6px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
}

/* Links del trail: pequeños, gris, peso normal */
nav.woocommerce-breadcrumb a {
    color: #777 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    border-bottom: 1px dashed transparent;
    transition: color .15s ease, border-color .15s ease;
    padding-bottom: 1px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
nav.woocommerce-breadcrumb a:hover,
nav.woocommerce-breadcrumb a:focus {
    color: #d92418 !important;
    border-bottom-color: #d92418;
}

/* Mobile: tamaños algo más contenidos */
@media (max-width: 600px) {
    nav.woocommerce-breadcrumb {
        font-size: 17px !important;
        padding: 8px 12px !important;
    }
    nav.woocommerce-breadcrumb a {
        font-size: 12px !important;
    }
}

.elementor-widget-woocommerce-breadcrumb {
    margin-bottom: 10px !important;
}

/* ============================================================
   Ocultar secciones REDUNDANTES (top-level "Categorías", parent-children
   "hermanas") del sidebar en categorías hijas, PERO sólo cuando el
   sidebar tiene otras secciones útiles (attr-*) que valgan más al usuario.
   Si las únicas secciones son top-level/parent-children, las dejamos
   visibles como fallback (mejor mostrar nav de cats que sidebar vacío).
   ============================================================ */
/* Ocultar parent-children "Protección contra incendios" (cat raíz superior)
   en TODAS las cats que no sean la raíz. Siempre redundante: ya está en el header. */
body.serior-cat-child aside.tim-sidebar
    .tim-filter-section:has(.tim-filter-header[data-filter="parent-children"]) {
    display: none !important;
}
/* Ocultar top-level "Categorias" solo cuando hay attr-* (filtros custom)
   para no perder navegación a subcats en cats sin filtros. */
body.serior-cat-child aside.tim-sidebar:has(.tim-filter-header[data-filter^="attr-"])
    .tim-filter-section:has(.tim-filter-header[data-filter="top-level"]) {
    display: none !important;
}

/* Sidebar SIN ninguna sección útil tras los oculta-CSS: colapsar la
   columna entera y expandir el grid. Detectado vía :has() — el
   selector busca la columna primera (.e-child) que contenga un
   <aside> que NO tenga ningún tim-filter-section visible.
   En navegadores que soportan :has() (Chrome 105+, Safari 15.4+,
   Firefox 121+) esto es 100% reactivo. */
.elementor-location-archive .e-con.e-parent:has(> .e-child + .e-child)
    > .e-child:has(> .elementor-element:only-child > .elementor-shortcode:empty),
.elementor-location-archive .e-con.e-parent:has(> .e-child + .e-child)
    > .e-child:has(> .elementor-element > aside.tim-sidebar:not(:has(.tim-filter-section))) {
    display: none !important;
}
.elementor-location-archive .e-con.e-parent:has(> .e-child + .e-child)
    > .e-child:has(> .elementor-element:only-child > .elementor-shortcode:empty) ~ .e-child,
.elementor-location-archive .e-con.e-parent:has(> .e-child + .e-child)
    > .e-child:has(> .elementor-element > aside.tim-sidebar:not(:has(.tim-filter-section))) ~ .e-child {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* ============================================================
   Sidebar de filtros [tim_catalogo_sidebar] — modo mobile
   Convierte el modal actual en un drawer que desliza desde la
   izquierda, ocupa toda la altura y bloquea scroll del body.
   ============================================================ */
@media (max-width: 1024px) {

    /* Backdrop a pantalla completa */
    .tim-filters-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s ease, visibility 0s linear .25s;
        z-index: 9998;
        pointer-events: none;
    }
    .tim-filters-backdrop.tim-filters-backdrop--open {
        opacity: 1;
        visibility: visible;
        transition: opacity .25s ease, visibility 0s linear 0s;
        pointer-events: auto;
    }

    /* Drawer cerrado fuera de pantalla a la izquierda */
    aside.tim-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        bottom: auto !important;
        width: min(88vw, 380px) !important;
        max-width: none !important;
        height: 100vh !important;
        max-height: 100dvh !important;
        background: #fff !important;
        z-index: 9999 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        transform: translateX(-100%) !important;
        transition: transform .3s ease !important;
        box-shadow: 2px 0 18px rgba(0, 0, 0, 0.18);
        padding: 16px !important;
        margin: 0 !important;
    }

    aside.tim-sidebar.tim-sidebar--open {
        transform: translateX(0) !important;
    }

    /* Cabecera mobile (título + cerrar) sticky arriba */
    .tim-sidebar__mobile-header {
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: -16px -16px 12px;
        padding: 16px;
        border-bottom: 1px solid #eee;
    }

    .tim-sidebar__mobile-header span {
        font-weight: 600;
        font-size: 1.05rem;
    }

    .tim-sidebar__mobile-close {
        background: transparent;
        border: 0;
        font-size: 1.6rem;
        line-height: 1;
        cursor: pointer;
        padding: 4px 10px;
        color: #333;
    }
    .tim-sidebar__mobile-close:hover {
        color: #000;
    }

    /* Bloquear scroll del body cuando drawer abierto (sin JS, vía :has()) */
    body:has(.tim-filters-backdrop.tim-filters-backdrop--open) {
        overflow: hidden;
    }

    /* Forzar todas las secciones de filtro abiertas en mobile.
       El parent añade clase 'active' solo en desktop; aquí la replicamos en CSS. */
    aside.tim-sidebar .tim-filter-content {
        display: block !important;
    }
    aside.tim-sidebar .tim-filter-toggle {
        transform: rotate(180deg) !important;
    }
}

/* En desktop, ocultar header mobile, backdrop y botón flotante */
@media (min-width: 1025px) {
    .tim-sidebar__mobile-header,
    .tim-filters-backdrop,
    .tim-mobile-filters-btn {
        display: none !important;
    }
}

/* ============================================================
   Botón "FILTROS" mejorado en mobile — sticky en parte inferior
   con icono y full-width.
   ============================================================ */
@media (max-width: 1024px) {
    .tim-mobile-filters-btn {
        position: fixed !important;
        bottom: 16px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        z-index: 998 !important;
        display: inline-flex !important;
        align-items: center;
        gap: 10px;
        padding: 14px 28px !important;
        min-height: 48px;
        background: #d92418 !important;
        color: #fff !important;
        border: 0 !important;
        border-radius: 999px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        line-height: 1;
        box-shadow: 0 6px 18px rgba(217, 36, 24, 0.45), 0 2px 6px rgba(0,0,0,0.15);
        cursor: pointer;
        transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    }
    .tim-mobile-filters-btn::before {
        content: "";
        display: inline-block;
        width: 18px;
        height: 18px;
        background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><line x1='4' y1='6' x2='20' y2='6'/><circle cx='10' cy='6' r='2.5' fill='%23d92418'/><line x1='4' y1='12' x2='20' y2='12'/><circle cx='16' cy='12' r='2.5' fill='%23d92418'/><line x1='4' y1='18' x2='20' y2='18'/><circle cx='8' cy='18' r='2.5' fill='%23d92418'/></svg>") no-repeat center / contain;
        flex-shrink: 0;
    }
    .tim-mobile-filters-btn:hover,
    .tim-mobile-filters-btn:focus {
        background: #b91d12 !important;
        transform: translateX(-50%) translateY(-2px) !important;
        box-shadow: 0 10px 24px rgba(217, 36, 24, 0.55), 0 4px 8px rgba(0,0,0,0.2);
    }
    .tim-mobile-filters-btn:active {
        transform: translateX(-50%) translateY(0) !important;
    }

    main, .site-main, ul.products, .woocommerce ul.products {
        padding-bottom: 90px !important;
    }

    body:has(.tim-filters-backdrop.tim-filters-backdrop--open) .tim-mobile-filters-btn {
        opacity: 0;
        pointer-events: none;
    }
}

/* ============================================================
   Doble faceta de marca en /intrusion/accesorios-intrusion (term 410) y
   /intrusion/kits-intrusion (term 2435).
   El theme PADRE auto-inyecta una sección "Fabricante" (pa_fabricante,
   data-filter="attr-pa_fabricante") vía su whitelist $special_cat_attributes.
   El child YA inyecta la faceta canónica "Marca" (pa_marca) en estas cats,
   así que la de pa_fabricante es redundante. La ocultamos por CSS SOLO en
   estos 2 slugs (body.term-<slug>, clase nativa de WooCommerce) para dejar
   una única sección de marca. NO se toca la whitelist del padre.
   Scope por slug => no afecta a cats donde pa_fabricante SÍ es la faceta real
   (soportes-videovigilancia, cajas-carcasas-conexion, etc.).
   ============================================================ */
body.term-accesorios-intrusion aside.tim-sidebar
    .tim-filter-section:has(.tim-filter-header[data-filter="attr-pa_fabricante"]),
body.term-kits-intrusion aside.tim-sidebar
    .tim-filter-section:has(.tim-filter-header[data-filter="attr-pa_fabricante"]) {
    display: none !important;
}

/* ============================================================
   Detección de incendios (árbol /deteccion-de-incendios/, v1.4.41).
   En 2 de las 15 subcats el legacy sigue poblado y el PADRE auto-muestra
   una faceta redundante vía whitelist $special_cat_attributes:
     - sistemas-deteccion-via-radio: pa_fabricante (AJAX) duplica pa_marca.
     - equipos-de-mantenimiento: pa_fabricante (EACI/KILSEN) duplica pa_marca
       y pa_tipo-equipo (1 valor) duplica pa_ops-eqmant-tipo ("Tipo").
   El child ya inyecta la faceta canónica (pa_marca / pa_ops-eqmant-tipo), así
   que ocultamos la del padre SOLO en estos 2 slugs (body.term-<slug>). NO se
   toca la whitelist del padre. Las otras 13 cats no necesitan supresión
   (el legacy ya no está poblado → el padre rinde 0 facetas en ellas).
   ============================================================ */
body.term-sistemas-deteccion-via-radio aside.tim-sidebar
    .tim-filter-section:has(.tim-filter-header[data-filter="attr-pa_fabricante"]),
body.term-equipos-de-mantenimiento aside.tim-sidebar
    .tim-filter-section:has(.tim-filter-header[data-filter="attr-pa_fabricante"]),
body.term-equipos-de-mantenimiento aside.tim-sidebar
    .tim-filter-section:has(.tim-filter-header[data-filter="attr-pa_tipo-equipo"]) {
    display: none !important;
}