/* Layout */
.avl-grid{
    --avl-sidebar:30%;
    --avl-cols-d:3;
    --avl-cols-t:2;
    --avl-cols-m:1;
    display:grid;
    grid-template-columns: var(--avl-sidebar) 1fr;
    gap:1rem;
}
.avl-grid[data-sidebar-pos="right"]{
    grid-template-columns: 1fr var(--avl-sidebar);
}
@media (max-width:1024px){
    .avl-grid{ grid-template-columns: 1fr; }
}

.avl-loop{
    display:block;
    min-width:0;
}

.avl-toolbar-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    margin-bottom:.75rem;
}

.avl-views{
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
}
.avl-btn{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    padding:.45rem .6rem;
    border:1px solid rgba(0,0,0,.15);
    background:#fff;
    border-radius:.6rem;
    cursor:pointer;
    background-image:none !important;
}
.avl-btn.is-active{
    border-color: rgba(0,0,0,.35);
    box-shadow: 0 0 0 2px rgba(0,0,0,.04) inset
}
.avl-btn i,
.avl-btn svg{
    font-size:14px;
    width:1em;
    height:1em;
}
.avl-views .avl-btn svg,
.avl-views .avl-btn svg *{
    fill: currentColor;
}

.avl-sort-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    border:1px solid rgba(0,0,0,.15);
    border-radius:.6rem;
    background:#fff;
    cursor:pointer;
    background-image:none !important;
}
.avl-sort-btn svg{
    width:18px;
    height:18px;
    display:block;
    fill: currentColor;
}

/* Sidebar filters */
.avl-sidebar{ min-width:0; }
.avl-filters{
    display:grid;
    grid-template-columns:1fr;
    gap:1rem;
}
.avl-filter{
    border:1px solid rgba(0,0,0,.08);
    border-radius:.6rem;
    background:#fff
}
.avl-filter-toggle{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:.6rem .75rem;
    background:none;
    border:0;
    border-bottom:1px solid rgba(0,0,0,.06);
    cursor:pointer;
}
.avl-filter-body{
    padding:.75rem;
    display:block;
}
.avl-filter.is-collapsed .avl-filter-body{
    display:none;
}
.avl-filter-label{
    font-weight:600;
}
.avl-options{
    display:flex;
    flex-direction:column;
    gap:.35rem;
}

/* Loop columns */
.avl-loop-holder{
    display:grid;
    gap:1rem;
    grid-template-columns: repeat(var(--avl-cols-d), minmax(0,1fr));
}
@media (max-width:1024px){
    .avl-loop-holder{
        grid-template-columns: repeat(var(--avl-cols-t), minmax(0,1fr));
    }
}
@media (max-width:767px){
    .avl-loop-holder{
        grid-template-columns: repeat(var(--avl-cols-m), minmax(0,1fr));
    }
}

/* Load more */
.avl-load-more-wrap{
    margin-top:1rem;
    text-align:center;
}
.avl-load-more{
    padding:.6rem 1rem;
    border-radius:.6rem;
    border:1px solid rgba(0,0,0,.15);
    background:#fff;
    cursor:pointer;
    background-image:none !important;
}

/* fallback post card */
.avl-fallback{
    padding:.75rem;
    border:1px solid rgba(0,0,0,.08);
    border-radius:.6rem;
    background:#fff
}

/* ================= Loader Overlay for view switch / refetch ================= */

.avl-loop-shell{
    position:relative;
    min-height:120px; /* evita salto visual cuando vaciamos el loop */
}

.avl-loop-shell.is-loading::after{
    content:"";
    position:absolute;
    inset:0;
    background:#fff;
    opacity:.8;
    pointer-events:all;
    z-index:10;
}

/* Spinner */
.avl-loop-loader{
    position:absolute;
    z-index:11;
    top:50%;
    left:50%;
    width:48px;
    height:48px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    border:4px solid rgba(0,0,0,.1);
    border-top-color:rgba(0,0,0,.6);
    animation:avl-spin .6s linear infinite;
    display:none; /* hidden by default */
}

.avl-loop-shell.is-loading .avl-loop-loader{
    display:block;
}

@keyframes avl-spin{
    to{
        transform:translate(-50%,-50%) rotate(360deg);
    }
}

.avl-loop-shell{ position: relative; }
.avl-loop-shell.is-loading .avl-overlay{
  position: absolute; /* no fixed */
  inset: 0;
  z-index: 1;         /* debajo del header */
}
/* Header siempre encima del overlay del loop */
.elementor-location-header{ position: relative; z-index: 1000; }