/* -----------------------------------------------------------------------
   Limpeza de peso (3G/4G lento): 137 regras cujas classes nao
   aparecem em NENHUMA fonte do app (29 JSPs, JS, .java) foram removidas --
   eram sobras de markup antigo (ex.: a tela do Pix hoje usa .pix-*, nao mais
   .btn-copia-cola/.imgQRCode). Classe nova usada em tela nova continua
   funcionando normalmente: a poda nao mexe no que esta vivo.
   ----------------------------------------------------------------------- */
body {
    position: relative;

}

.titulo-label{
    font-weight: 600;
}

.font-select{
    font-size: 22px !important;
    padding-bottom: 5px !important;
    padding-top: 5px !important;
}

.access_link{
    color: #0062CC; /* era #007BFF: 3,98:1 -- "Esqueci a senha" e "Voltar" */
    cursor: pointer;
    text-decoration: none;
}

.titulo-label-cad-clifor1{
    font-size: 24px;
    font-style: bold;
    line-height: 24px;
}

.header{
    border-bottom: 1px #DDD solid;
    height: 50px;
    cursor: pointer;
}

.header .categoria-select
{
    display: none;

}

.pointer{
    cursor: pointer;
}

.form-group .form-control {
    padding-left: 2.375rem;
}

.logo{
    background-color: #fff;
}

.logo img{
    height: 85px;
    max-width: 100%;
}

.categoria-produto{
    width: 100%;
    font-size: 24px;
    line-height: 20px;

}

.categoria-produto-adicional{
    width: 100%;
    font-size: 20px;
    line-height: 20px;
    padding: 20px 10px 20px 10px;

}

.categoria-produto-adicional>small{
    font-size: 14px;
    font-weight: 300;
}

hr{
    margin: 0px 0px 5px 0px;
}

.produto
{
    padding: 10px 12px 10px 12px;
    border: 1px #DDD solid;
    border-radius: 5px;
    cursor: pointer;
}

.produto:hover{
    border: 1px #bb2d3b solid;
}

.restaurante{
    padding: 10px 12px 10px 12px;
    border: 1px #DDD solid;
    border-radius: 5px;
    height: 150px;
}

.restaurante-logo{
    max-height: 130px;
}

.restaurante-titulo{
    height: 60px;
    font-size: 18px;
    line-height: 18px;
    padding-top: 5px;
    overflow: hidden;
    font-weight: 600;
    color: #3e3e3e;
}

.restaurante:hover{
    border: 1px #c0c0c0 solid;
}

.restaurante-fechado{
    color: #D3D3D4;
}
.restaurante-aberto{
    color: #00FF00;
}

.adicionais {
    padding: 10px 12px 10px 12px;
    border: 1px #DDD solid;
    cursor: pointer;
    border-radius: 5px;
    min-height: 50px;
    margin-bottom: 10px;
}

.adicionais:hover{
    border: 1px #c0c0c0 solid;
}

.adicionais-selecionado{
    border: 1px #1E7E34 solid;
}

.adicionais-selecionado:hover{
    border: 1px #1E7E34 solid;
}

.categoria-adicionais{
    width: 100%;
    font-size: 20px;
    line-height: 20px;
    padding: 20px 12px 20px 12px;
    border-top: 1px #BBB solid;
    color: #333;
    background-color: #DDD;
}

.titulo-barra{
    font-size: 15px;
    padding: 5px;
    padding-left: 20px;
    border-radius: 5px 5px 0px 0px;
    background-color: #D3D3D4;
    color: #rff;
}

.footer-adicionais{
    height: 100px;
    background-color: #FFF;
    padding: 16px;
}

.footer-pedido{
    height: 65px;
    position: fixed;
    bottom: 58px;
    right: 0;
    left: 40%;
    color: #FFF;
    background-color: #E60000;
    cursor: pointer;
    font-size: 25px;
    width: 400px;
    border-radius:  15px 15px 0px 0px;
}

.btn-finaliza-adicionais{
    font-size: 18px;
    line-height: 18px;
    color: #FFF;
    background-color: #1E7E34;
    border: 0px;
    border-radius: 8px;
    padding: 15px 10px 15px 10px;
}

.btn-success{
    background-color: #1E7E34 !important;
    border-color: #1E7E34 !important;
    color: #FFF !important;
}

.opcao-login-novo{
    padding: 36px 50px;
    border-radius: 5px;
    box-shadow: 0px 1px 4px rgb(0 0 0 / 10%), 0px 4px 16px rgb(0 0 0 / 12%);
}

.btn-remove-item{
    font-size: 20px;
    line-height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #E60000;
    background-color: #FFF;
    border: 0px;
    cursor:  pointer;
}

.comAdicional{
    line-height: 16px !important;
}

.tr-carrinho-align {
    vertical-align: middle !important;
}

.adicional{
    font-size: 14px !important;
}

.dropdown-menu{
    padding-top: 0;
    padding-bottom: 0;
}

.dropdown-item{
    padding: 0.50rem 1rem;
}

.dropdown-item:hover{
    background-color: #FFF;
    font-size: 1.1rem;
    color: #E60000;
}

.corpo-pergunta{
    height: 80vh;
}

.div-escolhe-cidade{
    height: 100vh;
}

.btn-font-size-alt{
    font-size: 17px;
}
.custom-alert {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    padding: 30px;
    background: #cccccc;
    color: #333333;
    font-size: 1.2rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transition: opacity 0.1s, top 0.1s, visibility 0.1s;
    z-index: -10;
    font-weight: 700;
    border-radius: 0px;
}

.custom-alert.show {
    opacity: 1;
    z-index: 9001;
}

.custom-alert-success {
    background: #1E7E34;
    color: #ffffff;
    width:100%;
}
.custom-alert-info {
    background: #007bff;
    color: #ffffff;
    width:100%;
}

#encerrar-nomal{
    padding: 0px 1px 0px 0px;
}
.custom-alert-error {
    background: #d50000;
    color: #ffffff;
}

.abertura-paginas{
    padding: 15px 14px 10px 14px;
    font-size: 16px;
    margin-bottom: 6px;
}

#detalhe_pedido{
    padding: 0px 27px 0px 2px;
}

.pagina-principal{
    font-size: 22px;
    line-height: 22px;
    color: #E60000;
    cursor: pointer;
}

.pagina-secundaria{
    font-size: 18px;
    line-height: 22px;
    cursor: pointer;
}

.pagina-atual{
    line-height: 22px;
}
#qtd-produto-adc{
    font-size: 25px;
}

.icone-separa-pagina{
    margin: 0 5px 0 5px;
    line-height: 22px;
}

.pagamento-selected{
    background-color: #0d6efd !important;
    color: #fff !important;
}

.pedido_pendente_info{
    position: relative;
    top: 0px;
    right: 12px;
    padding: 0px 6px;
    border-radius: 50%;
    background: #198754;
    font-size: 12px;
    color: white;
}

@keyframes blinker {
    50% { opacity: 0.3; }
}

.logo-header img.img-logo-loja {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #D4D4D4;
}
/* Antes do JS preencher o logo (src="") o navegador desenhava o icone de imagem quebrada; loja sem
   logo ficava com ele para sempre. O espaco continua reservado (nada pula), sem o icone. */
img.img-logo-loja[src=""], img.img-logo-loja:not([src]) { visibility: hidden; }

.nome-header {
    cursor: pointer;
    gap: 15px;
    align-items: center;
}

.nome-header p {
    font-weight: bold;
    color:black;
}

.nome-header small {
    font-size: 12px;
}

.info-loja-barra {
    background-color: #ffffff;
    font-size: 14px;
    color: #444;
}

.status-loja-fechada {
    background-color: #ffeaea;
    color: #C0392B; /* era #e74c3c sobre este rosa: 3,31:1 -- o aviso mais importante da tela */
    font-size: 13px;
    padding: 6px;
    width: 100%;
}
.border10px{
    border-radius: 10px
}

.link-btn {
    font-size: 12px;
    font-weight: 600;
    line-height: 8px;
    color: #f57c00;
    cursor: pointer;
    text-align: right;
}
.container-perfil-loja {
    background: #fff;
    padding: 20px;
    font-family: 'Segoe UI', sans-serif;
}

.titulo-perfil {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 5px;
}

.secao-perfil {
    background-color: #f2f2f2;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 5px;
}

.titulo-secao {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 8px;
}

.lista-horarios,
.lista-pagamento {
    list-style: none;
    padding-left: 0;
    font-size: 14px;
    color: #444;
}

.lista-pagamento li i {
    margin-right: 8px;
}

.endereco-perfil {
    font-size: 14px;
    color: #333;
    margin: 0;
}

.voltar-header {
    margin-bottom: 20px;
}

.voltar-link {
    font-size: 14px;
    color: #444;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-weight: 500;
    gap: 6px;
}

.voltar-link i {
    font-size: 14px;
}

.container-perfil-loja {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

.voltar-link {
    display: inline-block;
    font-size: 14px;
    color: #333;
    text-decoration: none;
    font-weight: 500;
    margin-bottom: 20px;
}

.voltar-link i {
    margin-right: 5px;
}

.titulo-perfil {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 5px;
}

.secao-perfil {
    background-color: #f2f2f2;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 6px;
}

.titulo-secao {
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 10px;
}

.lista-horarios, .lista-pagamento {
    list-style: none;
    padding-left: 0;
    font-size: 14px;
    color: #333;
}

.lista-pagamento li i {
    margin-right: 8px;
}

.endereco-perfil {
    font-size: 14px;
    color: #333;
}

.linha-info-loja {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    font-size: 14px;
    color: #333;
    background-color: #fff;
}

.info-horario {
    font-weight: 500;
}

/* topo da vitrine: horario do restaurante x delivery e redes sociais (App.renderTopoLoja) */
.topo-loja-extra {
    /* mesma margem negativa do .row que envolve a .linha-info-loja: sem ela o texto fica
       deslocado em relacao ao "Aberto ate"/"Loja fechada" logo acima */
    margin: 0 calc(-.5 * var(--bs-gutter-x, 1.5rem));
    padding: 0 15px 10px;
    font-size: 13px;
    color: #333;
    background-color: #fff;
}

.topo-horario-linha {
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.6;
}

.topo-horario-linha .fa {
    width: 16px;
    text-align: center;
    color: #666;
}

.topo-redes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin-top: 6px;
}

.topo-redes:empty {
    display: none;
}

.topo-redes-titulo {
    color: #666;
}

.topo-rede {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #333;
    font-weight: 500;
    text-decoration: none;
}

.topo-rede:hover {
    text-decoration: underline;
}

.topo-rede .fa {
    font-size: 18px;
}

.topo-rede .icone-tiktok {
    width: 16px;
    height: 16px;
}

.link-perfil a {
    color: #e87722;
    font-size: 14px;
    text-decoration: none;
    font-weight: 500;
}

.link-perfil a:hover {
    text-decoration: underline;
}

.gap{
    gap:6px
}

.categoria-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.categoria-card:hover {
    transform: scale(1.02);
}

.categoria-titulo {
    display: block;
    padding: 5px;
    font-weight: bold;
    font-size: 11px;
    background-color: #000000dd;
    color: white;
    white-space: normal;          /* permite quebrar linha */
    overflow-wrap: break-word;   /* quebra palavras grandes */
    overflow: visible;           /* garante que mostre tudo */
    text-overflow: unset;        /* desativa os "..." */
    display: block;
}

.icon-busca{
    right: 21px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
}

.nome-header p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 15px;
    padding-top: 15px;
}
.share-btn {
    width: 35px;
    height: 35px;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    color:#FB9B02;
}

.card {
    border-radius: 12px;
}
input.form-control {
    border-radius: 8px;
}
select.form-select {
    border-radius: 8px;
}

.titulo-label-cad-clifor {
    font-size: 1rem;
    font-weight: 500;
    color: #555;
}

.router-view{
    max-width: 1280px !important;
    margin: 0 auto;
}

.item-card {
    padding: 8px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
}

.produto1{
    border: 1px solid rgb(235, 235, 235);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 10px;
    background-color: #fff;
    padding: 12px;
    cursor: pointer;
    min-height: 110px;
    gap: 12px;
    transition: all .2s;
    box-shadow: 0 2px 4px #0003;
    position: relative;
    overflow: hidden;
}

.produto1.disable {
    cursor: default;
}

.produto1.disable::after {
    content: "INDISPON\00EDVEL";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);

    /* Estilo da faixa */
    background-color: rgba(0, 0, 0, 0.65);
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;

    /* Largura maior que o botão para cobrir de ponta a ponta */
    width: 150%;
    text-align: center;
    padding: 4px 0;

    pointer-events: none; /* Não interfere em cliques */
    z-index: 1;
}

.title2{
    color: #5a5a5a;
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.description2{
    color: #595959;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0.2px !important;
}

.text-info h3{
    margin-bottom: 0.2rem !important;
}

.nav-container {
    position: fixed;
    bottom: 0px;
    left: 0px;
    height: max-content;
    width: 100%;
    background-color: rgb(255, 255, 255);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: rgba(10, 10, 10, 0.1) 0px -15px 45px;
}

.nav-container > .navigation{
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: center;
    padding: 0px 16px;
    border-top: 2px solid rgb(235, 235, 235);
}

.nav-container > .navigation > .content {
    width: 100%;
    max-width: 1080px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.nav-container > .navigation > .content > .item.-active {
    border-top: 2px solid #D30C02;
}

.nav-container > .navigation > .content > .item {
    position: relative;
    width: 64px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-top: -4px;
    padding-top: 4px;
    gap: 7px;
    border-top: 2px solid rgb(235, 235, 235);
}

.nav-container > .navigation > .content > .item > .title {
    color: #6B6B6B; /* era gray (#808080): 3,95:1 */
    font-size: 12px;
    font-weight: 500;
}

.nav-container > .navigation > .content > .item.-active > .title {
    color: #D30C02;
}

.cover-img {
    object-fit: cover;
    margin: 0 auto;
    width: 83.3333333333%;
    max-width: 1620px;
    height: auto;
    display: block;
    aspect-ratio: 1240 / 420;
    max-height: 420px;
    border-radius: 0px 0px 16px 16px;
}
.pesqui{
    padding: 0px;
}

.info{
    padding-left: 0px;
}

.compar{
    display: none !important;
}

titulo-barra2{
    font-size: 15px;
    padding: 5px;
    padding-left: 20px;
    border-radius: 5px 5px 0px 0px;
    color: #rff;
}

.icon-container i{
    font-size: 20px;
    color: #9C9C9C;
}

.items--desktop2{
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 10px 0px;width: 100%;
}

.flex-c{
    flex-direction: column
}

.price1{
    text-decoration: line-through; font-size: 12px; color: #757575; /* era #999: 2,85:1 */
}

.price2{
    font-weight: bold; font-size: 16px; margin-left: 6px;
}

.price3{
    font-weight: bold; font-size: 16px;
}

.image-info1{
    width: 90px; height: 90px; border-radius: 6px; overflow: hidden; flex-shrink: 0;
}

.img4{
    width: 100%; height: 100%; object-fit: cover;
}

.p-15{
    padding-top: 15%;
}

.header-fixo-compacto {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    display: none;
    height: 48px;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    border-bottom: 1px solid #e0e0e0;
    justify-content: space-between; /* <-- adicione ou ajuste essa linha */
}

.mb0{
    margin-bottom: 4.5rem;
}

.container-fixo {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 16px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between; /* <-- adicione ou ajuste essa linha */
}

.gap-1{
    gap: 8px;
}
.gap-2{
    gap: 50px !important;
}

.header1 {
    position: fixed;
    top: 0;
    z-index: 5;
    width: 100%;
    height: 50px;
    display: flex
        ;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    border-bottom: 2px solid #EBEBEB;
    max-width: 768px;
}

.header1>.content {
    display: flex
        ;
    align-items: center;
    gap: 16px;
    height: 100%;
}

.header1>.content>.icon {
    height: 100%;
    display: flex
        ;
    align-items: center;
    cursor: pointer;
}

.header1>.content>.text{
    color: #333;
    font-size: 15px;
    font-weight: 500;
    line-height: 18px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.icon-container.-align {
    align-items: center;
}

.icon-container {
    display: flex
        ;
    justify-content: center;
}

.header1>.content {
    display: flex
        ;
    align-items: center;
    gap: 16px;
    height: 100%;
}

.spacer {
    padding-bottom: 50px;
}

.profile>.image-container>.image{
    border-radius: 24px;
    object-fit: cover;
}

.profile>.text {
    overflow: hidden;
}

.profile>.text>.name{
    font-size: 22px;
    word-break: break-word;
}

.profile>.text>.price.discount-tag{
    display: flex;
    flex-direction: column;
    align-items: start;
}

.profile>.text>.price {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    color: #5a5a5a;
}

.profile>.text>.price>.price-value {
    font-size: 18px;
    font-weight: 600;
}

.profile>.text>.price>.price-value.-promotion {
    color: #D30C02;
}

.profile>.text>.description{
    font-size: 16px;
    color: #606060;
    margin-top: 10px;
    word-break: break-word;
    overflow: hidden;
}

.router-view1 {
    max-width: 768px;
    margin: 0 auto;
}

.collapserr>.header.-expandable {
    cursor: pointer;
}

.collapserr>.header{
    display: flex
        ;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 60px;
    padding: 16px;
    background-color: #ebebeb;
    color: #333;
}

.collapserr>.header>.info {
    width: 100%;
}

.collapserr>.header>.info>.title {
    font-weight: 700;
    font-size: 15px;
}

.collapserr>.header>.info>.description-and-badge {
    display: flex
        ;
    justify-content: space-between;
    align-items: center;
}

.collapserr>.header>.info>.description-and-badge>.description {
    font-size: 12px;
    line-height: 18px;
}

.icon-container.-align
{
    align-items: center;
}

.icon-container {
    display: flex
        ;
    justify-content: center;
}

.collapserr>.header>.info>.title{
    font-weight: 700;
    font-size: 15px;
}
p, h2 {
    margin: 0;
}

.collapserr>.content-wrapper {
    overflow: hidden;
}
.category-chooser {
    list-style: none;
    padding: 0;
    margin: 0;
}

.category-chooser>.item:not(:last-child) {
    border-bottom: 1px solid #D9D9D9;
}

.item-chooser.-checkable{
    cursor: pointer;
}

.item-chooser {
    display: flex
        ;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0px;
    cursor: default;
}

.item-chooser>.identity {
    display: flex
        ;
    align-items: center;
    gap: 8px;
}

.item-chooser>.identity>.image {
    height: 60px;
    min-width: 60px;
    width: 60px;
    border-radius: 8px;
    overflow: hidden;
    background-color: #eaeaea;
    cursor: pointer;
}

.item-chooser>.identity>.image>.img{
    height: 60px;
    min-width: 60px;
    width: 60px;
    border-radius: 8px;
    overflow: hidden;
    background-color: #eaeaea;
    cursor: pointer;
}

.item-chooser>.identity>.info {
    display: flex
        ;
    flex-direction: column;
    font-weight: 700;
    font-size: 13px;

}
.item-chooser>.identity>.info>.name {
    font-size: 15px;
    color: #333;
}
.item-chooser>.identity>.info>.description {
    font-weight: 400;
    color: #5a5a5a;
    font-size: 12px;
    word-break: break-word;
}

.item-chooser>.identity>.info>.max {
    font-weight: 400;
    font-size: 12px;
    color: #a7a7a7;
}

.item-chooser>.action {
    display: flex
        ;
    align-items: center;
    margin-right: 16px;
}

.checkable {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.checkable>.circle {
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 1px solid #9D9D9D;
}

.checkable>.checkbox {
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid #9D9D9D;
}

.item-chooser>.identity>.info>.max {
    font-weight: 400;
    font-size: 12px;
    color: #a7a7a7;
}

.max {
    font-weight: 400;
    font-size: 12px;
    color: #a7a7a7;
}

.observation-container>.label {
    background-color: #ebebeb;
    color: #333;
    font-size: 14px;
    font-weight: 700;
    height: 60px;
    display: flex
        ;
    align-items: center;
    padding: 16px;
}

.observation-container>.input {
    margin: 16px 0px;
}

.label {
    font-weight: 700;
    font-size: 13px;
    line-height: 18px;
    -webkit-user-select: none;
    user-select: none;
    color: #333;
    padding-bottom: 4px;
    display: inline-block;
}

.textarea {
    border-radius: 4px;
    border: 1px solid #ffffff;
    background-color: #fff;
    width: 100%;
    padding: 7px 5px;
    border-color: #e1e1e1;
}

/* Conteúdo dos adicionais começa ABERTO */
.content-wrapper {
    display: block; /* não começa mais fechado */
}

/* Quando ativo (mantém aberto) */
.content-wrapper.active {
    display: block;
}

/* Cabeçalho clicável */
.collapserr {
    cursor: pointer;
}

/* Animação da seta */
.collapserr .icon svg {
    transition: transform 0.3s ease;
}

/* Quando aberto, gira a seta */
.collapserr.open .icon svg {
    transform: rotate(180deg);
}

.item.selecionado {
    background-color: #ffe9e7;
}

.circle {
    width: 18px;
    height: 18px;
    border: 2px solid #999;
    border-radius: 50%;
    display: inline-block;
    position: relative;
}

.circle.checked {
    border: 6px solid #D30C02;
}

.circle.checked::after {
    color: white;
    font-size: 12px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
}

.checkbox {
    width: 18px;
    height: 18px;
    border: 2px solid #999;
    border-radius: 5px;
    display: inline-block;
    position: relative;
}

/* Mantém a borda vermelha só para indicar seleção */
.checkbox.checked {
    border-color: #D30C02;
}

/* Coloca o X no meio */
.checkbox.checked::after {
    content: "\2715"; /* ou pode usar "X" se preferir */
    color: #D30C02;
    font-size: 20px;
    font-weight: bold;
    position: absolute;
    top: 45%;
    left: 52%;
    transform: translate(-50%, -50%);
}

.quantity-control {
    display: flex;
    align-items: center;
    gap: 5px;
}

.qty-value {
    min-width: 20px;
    text-align: center;
    font-weight: bold;
}
.quantity-control {
    display: flex;
    align-items: center;
    gap: 5px;
}

.quantity-control button {
    background-color: #1E7E34;
    color: white;
    border: none;
    font-size: 16px;
    font-weight: bold;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.2s;
}

.quantity-control button:hover {
    background-color: #218838;
}

.quantity-control .qty-value {
    min-width: 20px;
    text-align: center;
    font-weight: bold;
}

flex-c{
    flex : 0 0 auto;
}

row1{
    flex-shrink: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
}

.roow {

    display: flex;
    flex-wrap: wrap;
}

.navigation {
    box-sizing: border-box; /* Inclui padding no cálculo dos 100% */
}

html, body {
    overflow-x: hidden;
}

.navigation {
    max-width: 100vw;
    overflow-x: hidden;
}

.nav-container {
    padding-bottom: constant(safe-area-inset-bottom); /* iOS < 11.2 */
    padding-bottom: env(safe-area-inset-bottom);      /* iOS >= 11.2 */
}
.nav-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

/* Impede quebra de linha no título. Eram 10px porque a barra chegava a 6 itens e a 320px nao cabia
   11px; desde 28/10/2026 ela tem no maximo 4 (Inicio, Pedidos, Carrinho, Conta) e cabe 12px. */
.nav-container > .navigation > .content > .item > .title {
    white-space: nowrap;
    font-size: 12px;
}

.bloco-cupom label {
  font-weight: bold;
  display: block;
  margin-bottom: 8px;
}

.cupom-input {
  display: flex;
  gap: 8px;
}

.cupom-input input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.cupom-input button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background: #1E7E34;
  color: #fff;
  cursor: pointer;
}

.cupom-input button:hover {
  background: #218838;
}

#msg-cupom {
  margin-top: 10px;
  font-size: 14px;
}
#msg-cupom.ok {
    margin-right: 10px;
    color: green; }
#msg-cupom.erro {
    margin-right: 10px;
    color: red; }

.bloco-cupom {
    display: flex;
    justify-content: flex-end; /* empurra para a direita */
    margin-bottom: 50px;
}

.qtd-stepper{
    display: flex;
    align-items: center;
    justify-content: center;
    gap:.5rem
}

.qtd-stepper .qbtn{
    width:32px;
    height:32px;
    border:1px solid #ccc;
    background:#fff;
    border-radius:6px;
    line-height:1
}

.qtd-stepper .qbtn:active{
    transform:scale(.98)
}

.qtd-value{min-width:24px;text-align:center;display:inline-block}

.pay-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.pay-grid .btn {
  width: 100%;
}

.hide-when-empty:empty { display: none; }

.help-cupom {
    padding-right: 5px;
    color: red;
}

@media (min-width: 1152px) and (max-width: 1293px) {
    #campoBuscaProduto{
        margin: 3px;
        font-size: 14px;
    }

    .logo img {
        height: 80px;
    }

}

@media screen and (max-width: 992px)
{

    .footer-pedido{
        height: 65px;
        position: fixed;
        bottom: 58px;
        right: 0;
        left: 0;
        color: #FFF;
        background-color: #1E7E34;
        cursor: pointer;
        width: 100%;
        border-radius:  0px 0px 0px 0px;
    }

    .titulo-barra{
        font-size: 18px;
        font-weight: 700;
        line-height: 16px;
    }
    .header{
        border-bottom: 1px #DDD solid;

        height: 50px;
        color: #fff;
        border-radius: 0px 0px 0px 0px;
    }

    .espaco-header-celular{
        margin-top: 0px;
    }

    .btn-categoria-mobile{
        font-size: 80%;
        line-height: 150%;
        height: 150px;
        color: #E90000;
        border-color: #E90000;
        background-color: #FFF;
        overflow-wrap: break-word;
    }

    .opcao-login-novo{
        padding: 20px 20px;
    }

    .comAdicional{
        line-height: 14px !important;
    }

    .footer-adicionais{
        bottom: 0;
        right: 0;
        left: 0;
        border-top: 1px #DDD solid;
    }

    .titulo-header-mobile{
        color: #FFF;
        position: relative;
    }
    .btn-finaliza-adicionais{
        font-size: 13px;
    }

}

@media screen and (max-width: 600px) {

    .categoria-produto-adicional
    {
        width: 100%;
        font-size: 17px;
    }

    .corpo-pergunta{
        height: 70vh;
    }

    .font-pedido{
        font-size: 12px;
    }
    .titulo-label-cad-clifor{
        font-size: 20px;
    }
    #qtd-produto-adc{
        font-size: 25px;
    }

    .btn-font-size-alt{
        font-size: 15px;
    }
    .titulo-resposivo{
        font-size: 1rem;
    }
    .btn-finaliza-adicionais{
        font-size: 15px;
        font-weight: 600;
    }

    .pedido_pendente_info{
        position: absolute;
        top: 2px;
        padding: 0px 10px;
        border-radius: 50%;
        background: #198754;
        font-size: 12px;
        color: white;
    }
}

@media (max-width: 550px){
    .info-horario{
        font-size: 12px; /* era 11px: o horario e informacao, nao enfeite (27/10/2026) */
    }
}

@media (max-width:770px){

}

@media (max-width:768px){
    .cover-img{
        width: 100%;
    }
    .categoria-produto , .pesqui, .items--desktop2 {
        padding: 10px !important;

    }
    .padd{
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    .header1>.content ,.padd2 ,.textarea-container ,.info>.profile, .item-chooser{
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .item-chooser>.action{
        margin-right: 0px !important;
    }
    .profile>.text>.description{
        margin-bottom: 10px;
    }
    .spacer {
        padding-bottom: 60px;
    }
    .header1 {
        height: 60px;
    }
    .header1>.content>.text {
        font-size: 1rem;
    }
    .header-fixo-compacto {
        height: 60px;
    }
    .share-btn {
        width: 40px;
        height: 40px;
        font-size: 22px;
    }
    .vh-md-70 {
        height: 70vh;
    }
}

@media (min-width:767){
    .compar{
        display: flex !important;
    }

}

@media (max-width : 1080px){
    .items--desktop2 {
        grid-template-columns: 1fr !important;

    }

}

@media screen and (min-width: 500px) {
    .profile {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 16px 0px;
    }
}

@media screen and (min-width: 500px) {
    .profile>.image-container>.image {
        width: 200px;
        height: 200px;
        border-radius: 24px;
    }
}

@media screen and (max-width: 500px) {
    .profile>.image-container>.image {
        max-height: 200px;
        object-position: center;
        cursor: pointer;
        transition: max-height .3s ease-in-out;
    }
}

@media screen and (min-width: 500px) {
    .profile>.text {
        padding: 0;
    }
}

@media (max-width:992px){
    .info-loja-barra{
        padding: 10px 10px;
    }
    .logo-header img.img-logo-loja{
        margin-left: 10px;

    }
}

@media (min-width: 768px) {
  .pay-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

/* =====================================================================
   Sugestoes de venda e selo "mais pedido" (17/10/2026)
   ===================================================================== */
.selo-mais-pedido {
    display: inline-block;
    align-self: flex-start;
    background: #fff4d6;
    color: #8a5a00;
    border: 1px solid #f0c45a;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 4px 8px;
    margin-bottom: 4px;
    letter-spacing: .2px;
    white-space: nowrap;
}
.selo-mais-pedido.selo-pequeno {
    font-size: 10px;
    padding: 3px 6px;
    margin: 2px 0 0 0;
}

/* Faltou alguma coisa? -- carrossel horizontal no passo 1 do carrinho */
#faltou-container { margin-top: 12px; }
.faltou-titulo { font-weight: 700; font-size: 15px; margin: 0 0 8px 0; color: #333; }
.faltou-lista {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 2px 2px 8px 2px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.faltou-card {
    flex: 0 0 136px;
    scroll-snap-align: start;
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 12px;
    padding: 8px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.faltou-foto { width: 100%; height: 84px; object-fit: cover; border-radius: 8px; background: #f3f3f3; }
.faltou-nome {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 32px;
}
.faltou-preco { font-size: 13px; color: #555; }
.faltou-btn {
    margin-top: auto;
    border: 1.5px solid #1E7E34;
    color: #1E7E34;
    background: #fff;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    min-height: 36px;
    cursor: pointer;
}
.faltou-btn:active { background: #f3fff6; }

/* =========================================================================
   Bloco de combos (26/10/2026)
   -------------------------------------------------------------------------
   Nasce so com o que a loja configurou (resp.categoriaCombo). A tarja de
   entrega que morava aqui (tempo e pedido minimo no topo da vitrine) saiu em
   28/10/2026, por decisao do dono: ocupava a primeira tela sem ajudar a pedir.
   O pedido minimo continua conferido no carrinho (appFaltaParaMinimo).
   ========================================================================= */
/* Bloco de combos: o titulo ganha uma chamada e o card um selo de economia.
   Nada aqui vaza para as outras categorias -- tudo esta sob .bloco-combo. */
.bloco-combo .div-categoria-produto { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }

.bloco-combo-chamada { font-size: 12px; color: #6B6B6B; } /* era #777: 4,48:1, por um fio */
.bloco-combo .selo-economia {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #0a7d32;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    vertical-align: middle;
}

/* Cupom em destaque (26/10/2026) -- nasce escondido; so' aparece com cupom valido para o visitante. */
.cupom-destaque {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 2px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #f1f8f2;
    border: 1px solid #cfe8d4;
    font-size: 13px;
    color: #1d4d2b;
}
.cupom-destaque .fa-ticket { opacity: .8; }
.cupom-texto { flex: 1 1 auto; }
.cupom-condicao { color: #5b7a63; }
.cupom-codigo {
    font-weight: 700;
    letter-spacing: .5px;
    border: 1px dashed;
    border-radius: 8px;
    padding: 3px 10px;
    background: #fff;
}

/* Carrossel "Mais pedidos" (26/10/2026): os cards sao clones dos da vitrine. */
.bloco-mais-pedidos { margin-bottom: 8px; }
.mais-pedidos-faixa {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0 8px;
    scroll-snap-type: x proximity;
}
.mais-pedidos-faixa .card-mais-pedido {
    flex: 0 0 78%;
    max-width: 320px;
    scroll-snap-align: start;
    margin: 0;
}
@media (min-width: 768px) {
    .mais-pedidos-faixa .card-mais-pedido { flex-basis: 42%; }
}

/* O ITEM VOANDO PARA O CARRINHO (26/10/2026)
   Adicionar um combo deixou de abrir o carrinho, entao a unica confirmacao seria o contador do
   rodape mudando -- e ninguem olha para la sozinho. A bolinha leva o olho ate o contador.
   `pointer-events: none` e' essencial: ela passa por cima da vitrine e nao pode roubar o toque
   de quem ja esta mirando o proximo produto. Quem pediu menos movimento ao sistema nao ve nada
   disto (ver App.voaParaOCarrinho) e continua tendo o toast. */
.voa-carrinho {
    position: fixed;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #0a7d32;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
    opacity: .95;
    z-index: 2147483000;
    pointer-events: none;
    transition: transform .55s cubic-bezier(.3,.9,.4,1), opacity .55s ease-out;
    will-change: transform, opacity;
}
.carrinho-pulsa { animation: carrinho-pulsa .4s ease-out; }
@keyframes carrinho-pulsa {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.45); }
    100% { transform: scale(1); }
}

/* TOQUE DUPLO NAO DA MAIS ZOOM (26/10/2026)

   No celular, dois toques rapidos no cardapio aproximavam a pagina. Nao e' gesto que alguem faz
   de proposito aqui: acontece ao tocar duas vezes num card, num botao de quantidade ou no
   "adicionar" -- e o cliente perde a posicao no meio do pedido.

   `touch-action: manipulation` desliga SO o duplo-toque-para-ampliar. O arrasto continua, e a
   PINCA CONTINUA AMPLIANDO -- isso e' de proposito: quem precisa aproximar para ler o preco ou a
   descricao continua podendo. A saida barata seria `user-scalable=no` na meta viewport, e ela
   esta errada por dois motivos: tira o zoom de quem precisa dele para enxergar, e o iOS a ignora
   desde o Safari 10, entao nem resolveria. */
html { touch-action: manipulation; }

/* ALINHAMENTO DOS BLOCOS DO TOPO COM O TITULO DA CATEGORIA (26/10/2026)

   No CELULAR o titulo de categoria recebe `padding: 10px !important` de
   `@media (max-width:768px) { .categoria-produto, ... }`, la' em cima neste mesmo arquivo. A
   chamada ("O que mais sai aqui") e as faixas de card nasceram sem recuo nenhum, entao o bloco
   aparecia com DOIS recuos dentro da mesma caixa: o titulo a 10px e o resto colado na borda.

   A correcao repete o 10px, e vem DENTRO DA MESMA media query de proposito: acima de 768px o
   titulo perde o padding, e um recuo incondicional aqui inverteria o defeito -- o titulo ficaria
   10px a esquerda do proprio bloco. Isso foi medido, nao deduzido: com a regra solta, a 1024px o
   titulo caia em 85.3 e os cards em 95.3.

   Se um dia o recuo da vitrine mudar, muda aqui tambem -- os dois andam juntos por construcao,
   nao por coincidencia. Nao mover o padding para o container: o h6 e' compartilhado com TODAS as
   categorias do cardapio, e mexer nele mudaria a vitrine inteira para consertar dois blocos. */
@media (max-width: 768px) {
    .bloco-combo-chamada { padding-left: 10px; }
    .combos-faixa { padding-left: 10px; padding-right: 10px; }
    .mais-pedidos-faixa {
        padding-left: 10px;
        padding-right: 10px;
        /* O snap para no mesmo 10px; sem isto o card encaixado cobre o recuo e a coluna "pula". */
        scroll-padding-left: 10px;
    }
}

/* Combos automaticos (26/10/2026): card de produto VIRTUAL, montado pelo cardapio.
   Fica sob #bloco-combos-auto -- loja sem receita nao carrega nada disto. */
.combos-faixa { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 10px; }
/* No CELULAR o card empilha: nome em cima, com a largura toda, e o botao embaixo ocupando
   a linha inteira. Lado a lado (como nasceu) o botao roubava metade da largura e quebrava o
   nome do combo em tres linhas -- conferido no navegador, a 375 px. Da tablet para cima,
   onde sobra largura, volta a ser lado a lado. */
.combo-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #e6e6ea;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
}
.combo-info { flex: 1 1 auto; min-width: 0; }
.combo-nome { font-size: 15px; font-weight: 700; margin: 0 0 2px; line-height: 1.25; }
.combo-itens { font-size: 12px; color: #777; margin: 0 0 6px; }
.combo-preco { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.combo-botao {
    width: 100%;
    border: 0;
    border-radius: 10px;
    padding: 12px 14px;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}
@media (min-width: 560px) {
    .combo-card { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
    .combo-botao { width: auto; flex: 0 0 auto; padding: 10px 16px; }
}

/* Carrinho: taxa do bairro na hora, e a escolha de quando receber (26/10/2026).
   Os dois sairam da vitrine por decisao do dono -- a vitrine informa, o carrinho decide. */
.taxa-do-bairro { margin: 6px 0 2px; font-size: 13px; }
.taxa-do-bairro .taxa-ok { color: #1d4d2b; }
.taxa-do-bairro .taxa-ok i { opacity: .8; }
.taxa-do-bairro .taxa-sem-entrega { color: #b00020; font-weight: 600; }

.quando-opcao {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 6px;
    border: 1px solid #e3e3e8;
    border-radius: 10px;
    font-size: 14px;
    cursor: pointer;
}
.quando-opcao input { margin: 0; }
#quando-horarios select { width: 100%; }

/* =============================================================================================
   POLIMENTO DE LAYOUT (27/10/2026)

   Cada regra abaixo corrige um defeito MEDIDO na bancada local (HTML real de producao + este CSS +
   o JSON real da loja 23086), por uma auditoria que transforma "esta bonito?" em numero:
   contraste WCAG, tamanho de alvo de toque, texto cortado, rolagem lateral, conteudo escondido
   atras da barra fixa. Nada aqui e gosto pessoal sem medida -- e nada adiciona byte de fonte ou
   biblioteca: o cliente abre isto em 3G.

   O verde dos botoes principais (#28a745 -> #1E7E34) foi trocado no proprio lugar de cada regra,
   e nao aqui: com o branco por cima ele dava 3,13:1, abaixo do minimo legivel de 4,5:1, em NOVE
   telas (Adicionar, Continuar, Entrar, Cadastrar, Recuperar...). O novo da 5,12:1.
   ============================================================================================= */

/* ---- Tipografia: mais suave, com hierarquia --------------------------------------------------
   A fonte continua a do sistema (SF Pro no iPhone, Roboto no Android) -- a mais refinada de cada
   aparelho, e custa zero byte. A aspereza vinha de outro lugar, e e isso que se corrige: */
body {
    /* Traco mais fino e uniforme no Mac/desktop (no celular o sistema ja suaviza). */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
/* O titulo de categoria tinha entrelinha de 20px numa letra de 24px: nome que quebra em duas
   linhas ficava espremido, uma linha encostando na outra. */
.categoria-produto { line-height: 1.2; }
/* O nome do produto era cinza #5A5A5A -- a MESMA cor da descricao (#595959). Sem hierarquia, o
   olho nao acha o nome. Agora o nome e o texto principal e a descricao fica em segundo plano. */
.title2 { color: #1F2328; line-height: 1.3; }
.description2 { line-height: 1.4; }

/* ---- A barra fixa de baixo nao pode esconder o fim do cardapio -------------------------------
   Medido: barra de 60px, folga no fim da pagina 0 -- o ultimo produto ficava atras dela e nao dava
   para tocar. `:has` evita acrescentar folga em tela que nao tem a barra. */
body:has(.nav-container) { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

/* ---- Alvos de toque --------------------------------------------------------------------------
   Apple pede 44px, Google 48px. Medidos: + e - com 28 e 32px, lixeira com 16x20px, o link
   "Perfil da loja" com 8px de altura, o breadcrumb com 26px.
   O truque padding + margem negativa aumenta a AREA DE TOQUE sem mover o desenho: o link continua
   onde estava, o dedo e que passa a acertar. */
.quantity-control button,
.qtd-stepper .qbtn { min-width: 40px; min-height: 40px; }
.btn-remove-item { min-width: 40px; min-height: 40px; }
.link-btn,
.pagina-principal,
.access_link { display: inline-block; padding: 12px 8px; margin: -12px -8px; } /* "Voltar" e curto: so' a altura nao bastava, tinha 38px de largura */
.link-btn { line-height: 16px; }
/* Quem recebe o toque e o <a> DENTRO do .link-btn -- aumentar so' a div deixava o link com 15px. */
.link-btn a { display: inline-block; padding: 12px 0; margin: -12px 0; }
.voltar-link,
.pagina-secundaria { display: inline-block; padding-top: 12px; padding-bottom: 12px; margin-top: -12px; margin-bottom: -12px; }
/* As opcoes de adicional ("500ml", "COM AÇUCAR") tinham a altura dada pela miniatura de 60px.
   Quando a miniatura vazia sumiu (regra mais abaixo), a linha encolheu para 36px -- a correcao de
   uma coisa encolheu a area de toque de outra. 48px devolve o conforto sem a miniatura. */
.category-chooser > .item { min-height: 48px; }
/* Campos e botoes com 38px de altura: o minimo confortavel e 44. */
.form-control,
.btn { min-height: 44px; }

/* ---- Carrinho: o preco nao quebra no meio --------------------------------------------------
   A 375px nome, quantidade, preco e lixeira nao cabiam lado a lado e o preco virava "R$" numa
   linha e "14,00" na outra. O preco e o que o cliente confere -- ele fica inteiro; quem cede
   espaco e o nome, que pode quebrar. */
.tr-carrinho-align td.col-3 { white-space: nowrap; }
/* Com os botoes de quantidade em 40px (alvo de toque) e o preco sem quebrar, o nome ficou com 88px
   e um nome curto como "ABACAXI AO LEITE 106" ia para TRES linhas. O espaco sai do respiro -- o
   vao entre os botoes e o recuo das celulas --, nunca dos botoes. So' no celular. */
@media (max-width: 480px) {
    .tr-carrinho-align .qtd-stepper { gap: 4px; }
    .tr-carrinho-align > td { padding-left: 4px; padding-right: 4px; }
}
/* As escolhas do item ("500ml · COM AÇUCAR"), em segundo plano sob o nome -- antes vinham como
   "Obs: TAM SUCOS = 500ml (1), ..." no mesmo peso do resto. */
.escolhas-item { display: block; font-size: 13px; line-height: 1.35; color: #595959; }

}

/* ---- Tela do produto: o mesmo icone de "sem foto" repetido em cada opcao --------------------
   Medido: TAM SUCOS e ADOCAR com seis opcoes, todas com o mesmo `semfotoad.png` de 60px. Seis
   copias do mesmo icone dao a tela cara de inacabada e empurram o texto para a direita a toa.
   Some so' quando NENHUMA opcao da tela tem foto de verdade -- se alguma tiver, todas as
   miniaturas ficam, para a lista nao desalinhar (umas com foto, outras sem). Navegador sem `:has`
   continua como hoje. */
body:not(:has(.identity .image img:not([src$="semfotoad.png"]))) .identity .image { display: none; }

/* ---- Faixa de categorias presa no topo (28/10/2026) ------------------------------------------
   Montada pelo App.montaFaixaCategorias. O LUGAR fica no fluxo com a altura da faixa; a faixa vira
   fixed (.presa) logo abaixo do cabecalho compacto quando o lugar passa por baixo dele -- sticky nao
   prende aqui porque html e body tem overflow-x:hidden. z-index abaixo do cabecalho (999) e da
   barra de baixo (1000). */
/* O lugar e item de flex (o .roow da vitrine): sem a largura cheia ele cresce ate o tamanho do
   trilho (3.000px na 23086) e a rolagem lateral vai para a pagina. */
.faixa-categorias-lugar {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    height: 52px;
    margin-top: 4px;
    box-sizing: border-box;
}
/* No celular os cards e a busca ficam a 10px da borda; acima disso a coluna ja centra e eles
   encostam na borda dela. O recuo segue o mesmo corte para os chips alinharem com os cards. */
@media (max-width: 768px) {
    .faixa-categorias-lugar { padding: 0 10px; }
}
.faixa-categorias { background: #FFFFFF; left: 0; right: 0; z-index: 998; }
.faixa-categorias.presa {
    position: fixed;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
    border-bottom: 1px solid #E0E0E0;
}
.faixa-categorias-conteudo {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 52px;
    max-width: 100%;
    box-sizing: border-box;
}
.faixa-categorias-todas {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #C4C4C4;
    border-radius: 50%;
    background: #FFFFFF;
    color: #1F2328;
    font-size: 16px;
}
.faixa-categorias-trilho {
    position: relative; /* o offsetLeft dos chips e medido contra o trilho */
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    gap: 8px;
    padding: 4px 2px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.faixa-categorias-trilho::-webkit-scrollbar { display: none; }
.faixa-chip {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid #C4C4C4;
    border-radius: 20px;
    background: #FFFFFF;
    color: #1F2328;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}
/* O chip aceso leva a cor da loja de fundo, pelo App.estiloDoBotaoDaLoja: mesma regra de contraste
   do botao do combo. */
.faixa-chip.ativa { border-color: transparent; }

/* ---- Painel que sobe de baixo (28/10/2026): todas as categorias e o menu da conta ------------ */
html.painel-aberto, html.painel-aberto body { overflow: hidden; }
.painel-app {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 1100;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.painel-app-fundo { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.45); }
.painel-app-caixa {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: 75vh;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border-radius: 16px 16px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.painel-app-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 8px 8px 20px;
    border-bottom: 1px solid #EBEBEB;
}
.painel-app-titulo { margin: 0; font-size: 18px; font-weight: 700; color: #1F2328; }
.painel-app-fechar {
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    color: #4A4A4A;
}
.painel-app-lista { list-style: none; margin: 0; padding: 4px 0 12px; overflow-y: auto; }
.painel-app-item {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 20px;
    border: 0;
    background: transparent;
    text-align: left;
    font-size: 16px;
    color: #1F2328;
}
.painel-app-item.atual { font-weight: 700; background: #F2F2F2; }
.painel-app-detalhe { flex: 0 0 auto; font-size: 13px; color: #595959; }
@media (min-width: 768px) {
    .painel-app { align-items: center; }
    .painel-app-caixa { border-radius: 16px; }
}