/* ══ FIX: overflow-x:hidden en body rompe position:sticky (legacy, no tocar) ══
   body tiene "overflow-x: hidden" (lucky-key.css linea 43) para evitar scroll
   horizontal accidental. Efecto colateral muy conocido: eso convierte a body
   en un contenedor con overflow "gestionado" en ambos ejes (el navegador
   calcula overflow-y:auto implicito cuando solo se fija overflow-x en un eje
   distinto de visible), lo que rompe "position: sticky" de los descendientes
   en varios navegadores — es el motivo por el que .lk-cat-filters (con
   position:sticky ya declarado en lucky-key.css:2132) no se quedaba pegado
   arriba al hacer scroll en el catalogo, sobre todo en movil. "overflow-x:
   clip" logra el mismo bloqueo de scroll horizontal sin ese efecto lateral.
*/
body {
    overflow-x: clip;
}

/* ══ FIX: orden de cascada roto en lucky-key.css (legacy, compartido, no tocar) ══
   .lk-props-grid y .lk-zonas-grid definen su regla base de 3 columnas DESPUÉS
   de las media queries responsive (mobile/tablet) en el fichero legacy. Al
   tener la misma especificidad, la regla base gana siempre por orden de
   aparición, anulando el responsive. Este fichero carga después de
   lucky-key.css en _Layout.cshtml, así que gana por el mismo motivo (orden),
   restaurando el comportamiento correcto.
*/
@media (max-width: 767px) {
    .lk-props-grid,
    .lk-zonas-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .lk-props-grid,
    .lk-zonas-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ══ FIX: selector de idioma inaccesible/desbordado en movil (legacy, no tocar) ══
   En lucky-key.css (legacy compartido) el desplegable de idioma se abre solo
   con :hover y se posiciona con position:absolute; right:-12px; min-width:148px,
   pensado para cuando .lk-nav-lang cuelga del extremo derecho de la navbar de
   escritorio. En movil .lk-nav-links pasa a flex-direction:column;
   align-items:flex-start y .lk-nav-lang queda pegado al borde IZQUIERDO del
   panel, asi que ese right:-12px lo empuja fuera de la pantalla en anchos de
   ~360-390px. Este fichero carga despues de lucky-key.css, asi que gana por
   orden a igual especificidad. El estado abierto/cerrado ahora lo controla
   la clase .lk-lang-open que escribe lk-nav-lang.js.
*/
.lk-lang-trigger {
    cursor: pointer;
}

.lk-nav-lang.lk-lang-open .lk-lang-dropdown {
    display: flex;
    flex-direction: column;
}

.lk-nav-lang.lk-lang-open .lk-lang-chevron {
    transform: rotate(180deg);
    color: var(--gold);
}

.lk-lang-trigger:focus-visible {
    outline: 1px solid var(--gold);
    outline-offset: 3px;
}

@media (max-width: 767px) {
    .lk-nav-lang {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        padding-left: 0;
        padding-top: 1.25rem;
        border-left: none;
        border-top: 0.5px solid var(--border);
    }

    .lk-nav-lang::after {
        content: none;
    }

    .lk-nav-lang:hover .lk-lang-dropdown {
        display: none;
    }

    .lk-nav-lang.lk-lang-open .lk-lang-dropdown {
        /* display se reafirma aqui (identico al de la regla base de arriba)
           porque esta declaracion viene DESPUES del neutralizador de :hover
           de la linea 68 con la misma especificidad (0,2,0) — en un tap real,
           el navegador puede simular :hover Y .lk-lang-open a la vez sobre el
           mismo elemento, y sin este display explicito aqui gana el
           neutralizador (display:none) por venir despues en el propio
           fichero, dejando el desplegable sin abrir. */
        display: flex;
        flex-direction: column;
        position: static;
        top: auto;
        right: auto;
        left: auto;
        min-width: 0;
        width: 100%;
        max-width: 100%;
        margin-top: 0.75rem;
        box-shadow: none;
    }

    .lk-lang-trigger {
        width: 100%;
        justify-content: space-between;
        padding: 6px 0;
    }
}

/* ══ Panel de filtros del catalogo: sin sticky en movil ══
   .lk-cat-filters es position:sticky (lucky-key.css:2127-2136), asi que en
   escritorio se queda pegado bajo la navbar al hacer scroll. En movil se
   pide justo lo contrario: que se comporte como una seccion normal de la
   pagina (igual que el banner de arriba), sin quedarse fijado — que se
   desplace hacia arriba con el propio scroll y desaparezca de forma natural,
   sin ningun JS detectando el scroll. Basta con anular el sticky en este
   breakpoint; el resto de propiedades (top/z-index) no tienen efecto una vez
   que position es static.
*/
@media (max-width: 767px) {
    .lk-cat-filters {
        position: static;
    }
}