/* Categorias do catálogo - navegação com submenu sem sobreposição */
.ll-nav-scroll{
    overflow:visible;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px;
    padding:10px 0;
}

.ll-nav-category{
    position:relative;
    display:flex;
    align-items:center;
    flex:0 0 auto;
    min-width:0;
}

/*
 * Categorias com filhos usam o próprio chip como botão do menu.
 * Antes, o <details> era limitado a 32px e o texto do <summary>
 * acabava visualmente por cima dos outros botões.
 */
.ll-category-menu{
    position:relative;
    width:auto;
    height:auto;
    display:block;
}

.ll-category-menu > summary{
    list-style:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    width:auto;
    height:auto;
    cursor:pointer;
    user-select:none;
}

.ll-category-menu > summary::-webkit-details-marker{
    display:none;
}

.ll-category-menu > summary::marker{
    display:none;
    content:"";
}

.ll-category-menu > summary svg{
    width:15px;
    height:15px;
    flex:0 0 15px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition:transform .2s ease;
}

.ll-category-menu[open] > summary svg{
    transform:rotate(180deg);
}

.ll-category-menu[open] > summary{
    color:var(--ll-orange-dark);
    background:#fff1e7;
}

.ll-category-menu > summary:hover,
.ll-category-menu > summary.active{
    color:#fff;
    background:var(--ll-orange);
}

.ll-subcategory-menu{
    position:absolute;
    z-index:120;
    top:calc(100% + 8px);
    left:50%;
    transform:translateX(-50%);
    width:max-content;
    min-width:245px;
    max-width:min(340px,calc(100vw - 32px));
    padding:10px;
    background:#fff;
    border:1px solid var(--ll-line);
    border-radius:14px;
    box-shadow:0 18px 45px rgba(23,32,51,.18);
    text-align:left;
}

.ll-subcategory-title{
    display:block;
    padding:5px 10px 9px;
    margin-bottom:5px;
    border-bottom:1px solid var(--ll-line);
    color:var(--ll-muted);
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.07em;
}

.ll-subcategory-link{
    display:block;
    padding:9px 10px 9px calc(10px + (var(--ll-category-depth,0) * 14px));
    border-radius:9px;
    color:#4e586c;
    font-size:13px;
    font-weight:700;
    line-height:1.3;
    white-space:normal;
}

.ll-subcategory-link:hover,
.ll-subcategory-link.active{
    background:#fff1e7;
    color:var(--ll-orange-dark);
}

.ll-subcategory-link.active{
    position:relative;
    padding-right:34px;
    box-shadow:inset 3px 0 0 var(--ll-orange);
}

.ll-subcategory-link.active::after{
    content:"✓";
    position:absolute;
    right:11px;
    top:50%;
    transform:translateY(-50%);
    width:17px;
    height:17px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--ll-orange);
    color:#fff;
    font-size:11px;
    font-weight:900;
}

/* Quando uma subcategoria está filtrando os produtos, o botão principal
   correspondente permanece destacado mesmo com o submenu fechado. */
.ll-nav-category.contains-active > .ll-category-menu > summary.ll-chip{
    color:#fff;
    background:var(--ll-orange);
}

.ll-subcategory-all{
    margin-bottom:4px;
    font-weight:900;
    color:var(--ll-orange-dark);
}

/* Desktop estreito/tablet: mantém quebra limpa, sem chips por cima uns dos outros. */
@media (max-width:980px){
    .ll-nav-scroll{
        justify-content:flex-start;
    }
}

/* Mobile: menu ocupa a largura útil e permanece legível. */
@media (max-width:720px){
    .ll-nav-scroll{
        overflow-x:auto;
        overflow-y:visible;
        flex-wrap:nowrap;
        justify-content:flex-start;
        gap:6px;
        padding:10px 0 12px;
        scrollbar-width:none;
    }

    .ll-nav-scroll::-webkit-scrollbar{
        display:none;
    }

    .ll-subcategory-menu{
        position:fixed;
        z-index:200;
        top:auto;
        left:16px;
        right:16px;
        transform:none;
        width:auto;
        min-width:0;
        max-width:none;
        margin-top:8px;
        max-height:min(60vh,430px);
        overflow:auto;
    }
}

/* FIX 2026-08-25: neutraliza definitivamente o layout antigo de 32px do <details>.
   O CSS anterior tratava o summary apenas como a seta lateral. Na versão atual,
   o summary É o botão inteiro da categoria; por isso ele precisa ter largura natural. */
.ll-nav .ll-nav-scroll > .ll-nav-category.has-children > details.ll-category-menu{
    position:relative !important;
    inset:auto !important;
    width:auto !important;
    min-width:max-content;
    height:auto !important;
    flex:0 0 auto;
}

.ll-nav .ll-nav-scroll > .ll-nav-category.has-children > details.ll-category-menu > summary.ll-chip{
    position:relative !important;
    width:auto !important;
    min-width:max-content !important;
    max-width:none !important;
    height:auto !important;
    padding:9px 14px !important;
    border-radius:20px !important;
    display:inline-flex !important;
    grid-template-columns:none !important;
    place-items:initial !important;
    align-items:center !important;
    justify-content:center !important;
    gap:6px !important;
    white-space:nowrap !important;
    overflow:visible !important;
}

.ll-nav .ll-nav-scroll > .ll-nav-category.has-children > details.ll-category-menu > summary.ll-chip svg{
    position:static !important;
    width:14px !important;
    height:14px !important;
    flex:0 0 14px !important;
}

/* A regra antiga adicionava espaço para uma seta absoluta de 32px. Isso não é mais necessário. */
.ll-nav-category.has-children > .ll-chip{
    padding-right:14px;
}