/* Farejadinhos da Yang — menu "três tracinhos" */

[data-yang-nav]{
    position:relative;
    z-index:40;
}

.yang-nav-toggle{
    position:relative;
    z-index:60;
    width:42px;
    height:42px;
    border-radius:12px;
    border:1.5px solid var(--line,#F0DFC4);
    background:#fff;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    cursor:pointer;
    flex:none;
}

.yang-nav-toggle span{
    display:block;
    width:18px;
    height:2px;
    border-radius:2px;
    background:var(--red-dark,#C21A24);
}

.yang-nav-backdrop{
    position:fixed;
    inset:0;
    background:rgba(43,27,18,.35);
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease;
    z-index:45;
}

.yang-nav-drawer{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    width:78%;
    max-width:300px;
    background:var(--cream-2,#FFFAF1);
    box-shadow:-10px 0 30px rgba(0,0,0,.18);
    transform:translateX(100%);
    transition:transform .22s ease;
    z-index:50;
    padding:22px 20px;
    display:flex;
    flex-direction:column;
    gap:4px;
}

.yang-nav-drawer-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    font-family:'Baloo 2',sans-serif;
    color:var(--red-dark,#C21A24);
    margin-bottom:14px;
    padding-bottom:14px;
    border-bottom:1.5px solid var(--line,#F0DFC4);
}

.yang-nav-drawer-head-brand{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}

.yang-nav-close{
    flex:none;
    width:32px;
    height:32px;
    border-radius:10px;
    border:1.5px solid var(--line,#F0DFC4);
    background:#fff;
    color:var(--muted,#8A7563);
    font-size:16px;
    line-height:1;
    cursor:pointer;
}

.yang-nav-drawer-head img{
    width:36px;
    height:36px;
    border-radius:50%;
}

.yang-nav-drawer a{
    display:block;
    padding:13px 10px;
    border-radius:11px;
    text-decoration:none;
    color:var(--ink,#2B1B12);
    font-weight:600;
    font-size:15px;
}

.yang-nav-drawer a:hover{
    background:#fff2e0;
}

[data-yang-nav].yang-nav-open .yang-nav-backdrop{
    opacity:1;
    pointer-events:auto;
}

[data-yang-nav].yang-nav-open .yang-nav-drawer{
    transform:translateX(0);
}

[data-yang-nav].yang-nav-open .yang-nav-toggle{
    visibility:hidden;
}

/* Botões de cupons das lojas dentro do menu */
.yang-nav-cupons{
    margin-top:14px;
    padding-top:14px;
    border-top:1.5px solid var(--line,#F0DFC4);
    display:flex;
    flex-direction:column;
    gap:8px;
}

.yang-nav-cupons span{
    font-size:12px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--muted,#8A7563);
    padding:0 4px;
}

.yang-nav-drawer a.yang-nav-cupom{
    text-align:center;
    border-radius:999px;
    font-family:'Baloo 2',sans-serif;
    font-weight:800;
    font-size:16px;
    padding:11px 14px;
    box-shadow:0 3px 0 rgba(0,0,0,.14);
}

.yang-nav-drawer a.yang-nav-cupom.shopee{ background:#EE4D2D; color:#fff; }
.yang-nav-drawer a.yang-nav-cupom.ml{ background:#FFE600; color:#2D3277; }
.yang-nav-drawer a.yang-nav-cupom:hover{ filter:brightness(1.05); }

/* ----- Categorias dentro do menu ----- */
.yang-nav-cats{ border-radius:12px; }
.yang-nav-cats summary{
    list-style:none;
    cursor:pointer;
    padding:12px 10px;
    border-radius:12px;
    font-weight:700;
    color:var(--ink,#2B1B12);
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.yang-nav-cats summary::-webkit-details-marker{ display:none; }
.yang-nav-cats summary::after{ content:"▾"; color:var(--muted,#8A7563); transition:transform .15s; }
.yang-nav-cats[open] summary::after{ transform:rotate(180deg); }
.yang-nav-cats summary:hover{ background:var(--cream,#FDF3E3); }
.yang-nav-cats-lista{ padding:0 0 6px 8px; font-size:13px; color:var(--muted,#8A7563); }
.yang-nav-cats-lista a{
    display:flex !important;
    align-items:center;
    gap:10px;
    padding:8px 10px !important;
    font-size:14px;
}
.yang-nav-cats-lista small{ margin-left:auto; color:var(--muted,#8A7563); font-weight:600; }
.yang-nav-cat-ic{
    flex:none;
    width:26px;
    height:26px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
}
.yang-nav-drawer{ overflow-y:auto; }