@font-face {
    font-family: "Cinzel";
    src: url("/fonts/cinzel-400.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}



@media (min-width: 901px) {
    .header-main {
        height: 190px;
        grid-template-columns: 375px minmax(0, 1fr) 190px;
        gap: 20px;
        padding: 28px 30px 18px;
        align-items: start;
    }

    .legacy-logo img {
        width: 365px;
        height: 133px;
    }

    .header-title {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 133px;
        padding-top: 0;
    }

    .header-title h1 {
        margin: 0;
        font-family: "Cinzel", Georgia, serif;
        font-size: 27px;
        font-variant: normal;
        font-weight: 400;
        line-height: 1.05;
        white-space: nowrap;
    }

    .header-title p {
        gap: 14px;
        margin: 0;
        font-size: 14px;
    }

    .header-title.without-search {
        justify-content: flex-start;
        gap: 12px;
    }

    .header-search {
        width: 100%;
        max-width: 430px;
        margin: 0 auto;
    }

    .header-search label {
        height: 32px;
    }

    .header-search img {
        width: 21px;
        height: 21px;
    }

    .header-user-tools {
        width: 190px;
        gap: 10px;
    }

    .header-user-tools .account-menu {
        width: 100%;
    }

    .header-user-tools .account {
        width: 100%;
        min-height: 43px;
        justify-content: flex-start;
        margin-top: 0;
        padding: 7px 9px;
        font-size: 15px;
        line-height: 1.12;
    }

    .header-user-tools .header-cart {
        align-self: flex-end;
        margin-right: 8px;
        font-size: 27px;
    }

    .legacy-nav > a,
    .legacy-nav .nav-menu summary {
        height: 52px;
        justify-content: center;
        gap: 14px;
        padding: 0 10px;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 19px;
        font-weight: 400;
        line-height: 1;
        transition: background-color .18s ease, color .18s ease;
    }

    .legacy-nav .nav-menu {
        height: 52px;
        width: 100%;
    }

    .legacy-nav .nav-menu summary {
        width: 100%;
        gap: 0;
        padding: 0;
    }

    .legacy-nav .nav-menu summary .nav-primary-link {
        flex: 1;
        height: 52px;
        gap: 14px;
        padding: 0 4px 0 12px;
        color: inherit;
        font: inherit;
    }

    .legacy-nav .nav-menu summary .nav-menu-arrow {
        display: grid;
        place-items: center;
        align-self: stretch;
        width: 30px;
        flex: 0 0 30px;
        cursor: pointer;
    }

    .legacy-nav > a:hover,
    .legacy-nav > a:focus-visible,
    .legacy-nav .nav-menu:hover > summary,
    .legacy-nav .nav-menu:focus-within > summary {
        background: var(--teal);
        color: #fff;
    }

    .legacy-nav > a.is-active,
    .legacy-nav .nav-menu.is-active > summary {
        background: #f3f3f3;
        box-shadow: inset 0 0 0 4px var(--teal);
        color: #111;
    }

    .legacy-nav > a.is-active:hover,
    .legacy-nav > a.is-active:focus-visible,
    .legacy-nav .nav-menu.is-active:hover > summary,
    .legacy-nav .nav-menu.is-active:focus-within > summary {
        background: var(--teal);
        color: #fff;
    }

    .legacy-nav > a:hover img,
    .legacy-nav > a:focus-visible img,
    .legacy-nav .nav-menu:hover > summary img,
    .legacy-nav .nav-menu:focus-within > summary img {
        filter: brightness(0) invert(1);
    }

    .legacy-nav .nav-menu:hover > div,
    .legacy-nav .nav-menu:focus-within > div {
        display: block;
    }

    .legacy-nav .nav-menu > div {
        top: 52px;
    }

    .legacy-nav .nav-menu > div a {
        justify-content: flex-start;
        height: auto;
        padding: 10px 18px;
        font-size: 17px;
    }

    .legacy-nav .nav-menu > div a:hover,
    .legacy-nav .nav-menu > div a:focus-visible {
        background: var(--teal);
        color: #fff;
    }
}
.moderator-badge{display:inline-block;margin-left:6px;padding:3px 7px;border-radius:10px;background:#f39222;color:#fff;font:700 10px Arial,sans-serif;letter-spacing:.5px;vertical-align:middle}


/* Correcao mobile - 27/08/2026: reexibe o acesso a conta e os itens
   de menu (Artigos, Forum, Lojas) que ficavam completamente
   inacessiveis em telas de ate 900px. */
@media (max-width: 900px) {
    .header-main {
        row-gap: 10px;
    }

    .header-user-tools {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        justify-self: center;
        width: 100%;
        gap: 14px;
    }

    .account-menu {
        display: block !important;
        width: auto;
    }

    .account {
        display: flex !important;
        padding: 7px 12px;
        gap: 6px;
        font-size: 13px;
        white-space: nowrap;
    }

    .header-cart {
        font-size: 24px;
    }
}

@media (max-width: 600px) {
    .legacy-nav a:nth-child(n+4) {
        display: flex !important;
    }
}


/* Correcao mobile - 27/08/2026 (parte 2): harmoniza os botoes
   Home/Mercado do menu principal com os demais itens (Catalogo,
   Artigos, Forum, Lojas) - so em telas <= 900px, sem alterar o
   layout de desktop. Tambem corrige o texto que vazava do bloco
   em Lojas Parceiras nessas telas. */
@media (max-width: 900px) {
    .legacy-nav .nav-menu summary {
        height: 52px;
        padding: 0;
        gap: 18px;
        justify-content: center;
        font-size: 16px;
    }

    .legacy-nav .nav-menu summary img {
        width: 23px;
        height: 23px;
    }

    .directory-entry > div {
        min-width: 0;
    }

    .directory-entry a {
        overflow-wrap: break-word;
        word-break: break-word;
    }
}

/* Correcao mobile - 27/08/2026 (parte 3): reforca 3 correcoes mobile que
   ja existiam no CSS do site mas eram silenciosamente revertidas por uma
   regra sem media query mais abaixo no mesmo arquivo (mesmo padrao do bug
   relatado no formulario de login). Aplicado so em telas estreitas, sem
   alterar o layout de desktop. */
@media (max-width: 700px) {
    .legacy-login label:not(.remember) {
        grid-template-columns: 1fr !important;
    }

    .collection-item > a img {
        width: 95px !important;
    }
}

@media (max-width: 800px) {
    .storefront-intro-compact .storefront-description {
        grid-template-columns: 1fr !important;
    }
}

/* Correcao mobile - 27/08/2026 (parte 4): alinha os icones dos 6 botoes
   do menu principal numa coluna fixa (em vez de ficarem centralizados
   como grupo, o que os deixava desalinhados entre si por causa do
   tamanho diferente de cada rotulo) e adiciona linhas divisorias entre
   os botoes, para deixar de parecer uma barra homogenea. So em telas
   <= 900px, sem alterar o layout de desktop. */
@media (max-width: 900px) {
    .legacy-nav .nav-menu summary,
    .legacy-nav > a {
        justify-content: flex-start !important;
        padding-left: 16px !important;
        padding-right: 8px !important;
        gap: 12px !important;
    }

    .legacy-nav > * {
        box-sizing: border-box;
        border-right: 1px solid #e2e2e2;
        border-bottom: 1px solid #e2e2e2;
    }

    .legacy-nav > *:nth-child(3n) {
        border-right: none;
    }

    .legacy-nav > *:nth-child(n+4) {
        border-bottom: none;
    }

    .legacy-nav {
        border-top: 1px solid #e2e2e2;
        border-bottom: 1px solid #e2e2e2;
    }
}

@media (max-width: 900px) {
    .legacy-nav .nav-menu summary .nav-primary-link {
        justify-content: flex-start !important;
    }
}

/* Correcao mobile - 27/08/2026 (parte 5): "Home" e "Mercado" tinham um
   espaco maior entre o icone e o texto do que os outros 4 botoes (18px
   em vez de 12px), porque esse espacamento vinha de um elemento interno
   que a correcao da parte 4 nao alcancava - isso tambem fazia o texto
   de "Mercado" nao caber e ficar sobrepondo a setinha. A setinha de abrir
   sub-abas tambem estava pequena demais para ver/tocar; agora o toque
   funciona no botao inteiro (ver nav-hover.js), entao a setinha deixou
   de ser necessaria visualmente e foi removida no celular. */
@media (max-width: 900px) {
    .legacy-nav .nav-menu summary .nav-primary-link {
        gap: 12px !important;
    }

    .legacy-nav .nav-menu summary .nav-menu-arrow {
        display: none !important;
    }

    .legacy-nav .nav-menu summary {
        cursor: pointer;
    }
}


/* ===== Correcao mobile 2026-08-31: overflow de texto em varias areas =====
   1) /mercado/bazar/{id}: .storefront-facts usa CSS Grid com 2 colunas de
      largura fixa (~180px cada) que nao cabem juntas em telas estreitas,
      cortando texto como "Vendas 2 concluidas". Forcamos 1 coluna no mobile.
   2) /cadastro: os campos do formulario de cadastro (.legacy-register) tem
      largura fixa em pixels (333.2px) nos labels/inputs/selects, o que
      ultrapassa a largura da tela e gera scroll horizontal. Forcamos 100%. */
@media (max-width: 900px) {
    .storefront-facts {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 700px) {
    .legacy-register label {
        width: 100% !important;
    }

    .legacy-register input,
    .legacy-register select,
    .legacy-register textarea {
        width: 100% !important;
        max-width: 100% !important;
    }
}