/* ===== mude 10/09/2026 - barras do topo (Menino ou menina / Tamanho) ===== */

/* A regra de esmaecer os nao-selecionados foi escrita para a barra de Tamanho,
   onde nada fica marcado por padrao. Na barra de genero o "Todos" esta sempre
   marcado, entao Menina e Menino nasciam com 45% de opacidade - laranja lavado
   com texto branco, ilegivel. Aqui a barra de genero fica fora dessa regra: o
   selecionado ja se distingue pelo laranja mais escuro. */
.tz-subnav-block:not(#tz-size-block) .tz-subnav-row:has(.tz-pill.is-active) .tz-pill:not(.is-active) {
    opacity: 1;
}

/* --- setas de rolagem --- */
.tz-subnav-scroll {
    position: relative;
}

.tz-subnav-seta {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1.6px solid #F3C892;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 10px rgba(46, 42, 38, .14);
    color: #A96A1C;
    cursor: pointer;
    transition: border-color .2s, background .2s, color .2s;
}

.tz-subnav-scroll.tem-esq .tz-subnav-seta-esq,
.tz-subnav-scroll.tem-dir .tz-subnav-seta-dir {
    display: inline-flex;
}

.tz-subnav-seta-esq { left: -4px; }
.tz-subnav-seta-dir { right: -4px; }

.tz-subnav-seta:hover,
.tz-subnav-seta:focus {
    border-color: #F39C44;
    background: #FFF0DC;
    color: #E0851F;
}

.tz-subnav-seta:focus-visible {
    outline: 2px solid #8A5A1B;
    outline-offset: 2px;
}

.tz-subnav-seta svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* a seta cobriria a primeira/ultima pilula: deixa um respiro nas pontas */
.tz-subnav-scroll.tem-esq .tz-subnav-row { padding-left: 36px; }
.tz-subnav-scroll.tem-dir .tz-subnav-row { padding-right: 36px; }

/* no celular quem rola e o dedo; seta so atrapalha e come espaco */
@media (max-width: 767px) {
    .tz-subnav-seta { display: none !important; }
    .tz-subnav-scroll.tem-esq .tz-subnav-row,
    .tz-subnav-scroll.tem-dir .tz-subnav-row { padding-left: 2px; padding-right: 2px; }
}