/* Farejadinhos da Yang — cabecalho de loja (usado em todas as paginas publicas) */

header.yang-topo{
    /* cores proprias: funciona mesmo em paginas antigas sem :root */
    --red:#E5232E;
    --red-dark:#C21A24;
    --orange:#F7941D;
    --ink:#2B1B12;
    display:block;
    margin:0;
    padding:0;
    font-family:'Work Sans',Arial,sans-serif;
    position:sticky;
    top:0;
    z-index:50;
    background:var(--red);
    box-shadow:0 2px 14px rgba(120,20,20,.22);
}

.topo-linha{
    max-width:1080px;
    margin:auto;
    padding:10px 18px;
    display:flex;
    align-items:center;
    gap:18px;
}

.yt-marca{
    display:flex;
    align-items:center;
    gap:10px;
    flex:none;
    text-decoration:none;
}

.yt-logo{
    width:44px;
    height:44px;
    border-radius:50%;
    flex:none;
    box-shadow:0 0 0 2.5px #fff;
}

.yt-nome{
    font-family:'Baloo 2','Work Sans',sans-serif;
    font-size:19px;
    font-weight:800;
    line-height:.95;
    color:#fff;
    letter-spacing:-.2px;
}

.yt-nome span{ display:block; color:#FFE2C2; }

.yt-busca{
    flex:1;
    display:flex;
    align-items:stretch;
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    min-width:0;
    box-shadow:inset 0 0 0 2px transparent;
    transition:box-shadow .15s;
}

.yt-busca:focus-within{ box-shadow:inset 0 0 0 2px var(--orange); }

.yt-busca input{
    flex:1;
    min-width:0;
    border:0;
    background:transparent;
    outline:none;
    font-family:'Work Sans',sans-serif;
    font-size:15px;
    color:var(--ink);
    padding:12px 14px;
}

.yt-busca input::placeholder{ color:#9C8A7B; }

.yt-busca button{
    flex:none;
    width:52px;
    border:0;
    background:var(--orange);
    color:#fff;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .15s;
}

.yt-busca button:hover{ background:#E5820A; }
.yt-busca button svg{ width:20px; height:20px; }

/* menu ☰ em cima do vermelho */
.yang-topo .yang-nav-toggle{
    background:transparent;
    border:1.5px solid rgba(255,255,255,.55);
}
.yang-topo .yang-nav-toggle span{ background:#fff; }
.yang-topo .yang-nav-toggle:hover{ background:rgba(255,255,255,.12); }

/* faixa de atalhos */
.topo-atalhos{
    background:var(--red-dark);
}

.topo-atalhos nav{
    max-width:1080px;
    margin:auto;
    padding:0 18px;
    display:flex;
    gap:4px;
    overflow-x:auto;
    scrollbar-width:none;
}
.topo-atalhos nav::-webkit-scrollbar{ display:none; }

.topo-atalhos a{
    flex:none;
    color:#FFE9DD;
    text-decoration:none;
    font-size:13.5px;
    font-weight:600;
    padding:8px 10px;
    border-radius:8px;
    white-space:nowrap;
}
.topo-atalhos a:hover{ color:#fff; background:rgba(255,255,255,.1); }
.topo-atalhos a.destaque{ color:#fff; }

@media (max-width:700px){
    .topo-linha{ flex-wrap:wrap; gap:10px; padding:10px 14px; }
    .yt-marca{ flex:1; }
    .yt-busca{ order:3; flex:1 1 100%; }
    .yt-logo{ width:40px; height:40px; }
    .yt-nome{ font-size:17px; }
    .topo-atalhos nav{ padding:0 10px; }
}


body{ margin:0; }
#tituloGrid,#podioSecao{ scroll-margin-top:130px; }

/* ===== Lateral de categorias (computador) ===== */
.yt-lateral{ display:none; }

@media (min-width:1240px){
    .yt-layout{
        display:grid;
        grid-template-columns:220px minmax(0,1fr);
        gap:24px;
        max-width:1380px;
        margin:0 auto;
        padding:0 20px;
        box-sizing:border-box;
    }
    .yt-layout.sem-lateral{ display:block; padding:0; }
    .yt-lateral{
        display:block;
        position:sticky;
        top:116px;
        align-self:start;
        margin-top:22px;
        max-height:calc(100vh - 132px);
        overflow-y:auto;
        background:#FFFAF1;
        border:1.5px solid #F0DFC4;
        border-radius:18px;
        padding:14px 10px;
        font-family:'Work Sans',Arial,sans-serif;
        scrollbar-width:thin;
    }
    .yt-main{ min-width:0; }
}

.yt-lat-titulo{
    font-family:'Baloo 2','Work Sans',sans-serif;
    font-weight:800;
    font-size:17px;
    color:#C21A24;
    padding:2px 8px 10px;
}

.yt-lat-lista a{
    display:flex;
    align-items:center;
    gap:10px;
    padding:7px 8px;
    border-radius:11px;
    color:#2B1B12;
    text-decoration:none;
    font-size:14px;
    font-weight:600;
}
.yt-lat-lista a:hover{ background:#FDF3E3; }
.yt-lat-lista a.ativo{ background:#2B1B12; color:#fff; }
.yt-lat-lista a.ativo small{ color:#E9D9C6; }

.yt-lat-ic{
    flex:none;
    width:28px;
    height:28px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
}
.yt-lat-nome{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.yt-lat-lista small{ font-size:12px; font-weight:600; color:#8A7563; }