/* ======================================================================
  CSS ORGANIZADO (SEM APAGAR NADA)
  ----------------------------------------------------------------------
  Como identificar o que NÃO está sendo usado:
  1) Procure o seletor no projeto (Ctrl+Shift+F no VSCode):
     Ex: ".sabor-control"  ou  "#form-confirmação"
     - Se NÃO existir em nenhum HTML/JS, provavelmente está sem uso.
  2) No Chrome: DevTools > More tools > Coverage (cobre CSS não usado).

  Padrão que usei:
  - Seções com títulos grandes
  - Marcação: /* [NÃO USADO?] verificar no HTML/JS *\/  quando eu suspeitei.
  ====================================================================== */


/* ===== BASE ===== */
* {
  box-sizing: border-box;
}

body{
  margin: 0;                 /* importantíssimo */
  padding-top: 120px;        /* espaço pra barra fixa no DESKTOP */
  background-color: rgb(207, 207, 207);
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}



/* ===== TOPO ===== */
.topo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-top: 30px;
    margin-bottom: 25px;
    padding: 20px 25px;
    border-radius: 18px;
}

.logoescrita img{
    width: 280px;
    height: auto;
    filter: drop-shadow(0 8px 15px rgba(0,0,0,0.25));
}


/* ===== MENU ===== */
.menu {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 300px;
    margin: 25px auto;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.menu a,
.btn-ver,
.btn-continuar,
button {
    padding: 15px;
    background: rgb(255, 255, 255);
    color: #3b3b3b;
    text-decoration: none;
    border-radius: 10px;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    font-size: 16px;
    border-radius: 14px;
}

.menu a::before {
    content: attr(data-icon);
    font-size: 22px;
}

.menu a span {
    flex: 1;
    text-align: left;
    margin-left: 12px;
}

.menu a::after {
    content: "›";
    font-size: 22px;
    color: #999;
}

.menu a:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 22px rgba(0,0,0,0.15);
}

.menu a[href*="carrinho"] {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: white;
}

.menu a[href*="carrinho"]::after {
    color: white;
}


/* ===== BOTÕES ===== */
button {
    background: rgb(59, 139, 59);
}

.btn-continuar {
    background: #2980b9;
}

.btn-limpar {
    background: #c0392b;
}

button:hover,
a:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

button:active,
a:active {
    transform: scale(0.97);
}


/* ===== TÍTULO ===== */
/* [NÃO USADO?] verificar no HTML/JS */
.subnome{
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}


/* ===== LOGO ===== */
.logo img {
    animation: flutuar 3s ease-in-out infinite;
    filter: drop-shadow(0 8px 15px rgba(0,0,0,0.25));
}

@keyframes flutuar {
    0% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
    100% { transform: translateY(0); }
}


/* ===== PRODUTOS ===== */
.produto {
    background: #ffffff;
    border-radius: 18px;
    padding: 18px 20px;
    max-width: 460px;
    margin: 15px auto 25px;
    display: flex;
    align-items: center;
    gap: 18px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    flex-wrap: nowrap; /* (mesma regra que você colocou no final) */
}

.produto-img {
    width: 55px;
    height: 55px;
    object-fit: contain;
    border-radius: 8px;
    background: #f2f2f2;
    padding: 5px;
}

.produto-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0; /* (mesma regra que você colocou no final) */
}

.produto-nome {
    font-size: 14px;      /* mantive o valor do final (já sobrescrevia o 15px) */
    line-height: 1.2;     /* (mesma regra do final) */
    word-break: normal; /* (mesma regra do final) */
    font-weight: 700;
    color: #2c3e50;
}

.produto-preco {
    font-size: 14px;
    font-weight: 600;
    color: #27ae60;
    margin-top: 2px;
}

.produto input[type="number"] {
    width: 60px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-weight: 600;
    text-align: center;
}

.produto button {
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}


/* ===== LISTA CARRINHO ===== */
#lista {
    list-style: none;
    padding: 0;
    margin: 20px auto;
    max-width: 420px;
}

#lista li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    padding: 12px 15px;
    margin-bottom: 10px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    font-weight: 500;
    font-size: 14px;
}

#lista li span.nome {
    flex: 1;
    text-align: left;
}

#lista li span.qtd {
    margin: 0 10px;
    font-weight: 600;
}

#lista li span.preco {
    color: #2e7d32;
    font-weight: 600;
}

#lista li {
  gap: 10px;
}

.btn-remover-item{
  width: 36px;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: none;
  border-radius: 10px;

  font-size: 18px;
  font-weight: 900;
  line-height: 1;

  cursor: pointer;
  background: #ec4f4f;
  color: #c0392b;

  box-shadow: 0 4px 10px rgba(0,0,0,0.10);
  padding: 0;
}

.btn-remover-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

.btn-remover-item:active{
  transform: scale(0.97);
}


/* ==== TOTAL ===== */
h2 {
    background: #ffffff;
    display: inline-block;
    padding: 12px 22px;
    border-radius: 14px;
    font-size: 18px;
    font-weight: 700;
    color: #2c3e50;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    margin: 15px auto 25px;
}

#total {
    color: #27ae60;
}


/* ===== TOAST ===== */
#toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: #2ecc71;
    color: white;
    padding: 15px 25px;
    border-radius: 8px;
    font-size: 15px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease;
    z-index: 1000;
}

#toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(-10px);
}


/* ===== MODAL ===== */
#modal-confirmacao {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.modal-box {
    background: #fff;
    padding: 20px;
    border-radius: 15px;
    width: 90%;
    max-width: 400px;
    animation: slideUp 0.3s ease;
}


/* ===== CAMPOS DADOS DO CLIENTE (NOME / CNPJ) ===== */
.modal-box label {
    display: block;
    text-align: left;
    margin-top: 14px;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 700;
    color: #2c3e50;
}

.modal-box input {
    width: 100%;
    padding: 14px 0px;
    border-radius: 12px;
    border: 1px solid #d0d0d0;
    font-size: 15px;
    font-weight: 600;
    color: #2c3e50;
    background: #fdfdfd;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
    outline: none;
    transition: border 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}

.modal-box input::placeholder {
    color: #9a9a9a;
    font-weight: 500;
}

.modal-box input:focus {
    border-color: #2ecc71;
    box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.25);
    transform: translateY(-1px);
}

/* separação visual do resumo */
#resumo-pedido {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px dashed #e0e0e0;
}

.modal-acoes {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
}

.modal-acoes button {
    flex: 1;
    margin: 0 5px;
    padding: 10px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
}

@keyframes slideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}


/* ===== BARRA PESQUISA ===== */
.barra-pesquisa{
    max-width: 460px;
    margin: 10px auto 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    padding: 12px 14px;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.10);
}

.icone-pesquisa{
    font-size: 18px;
    opacity: 0.7;
}

.barra-pesquisa input{
    flex: 1;
    border: none;
    outline: none;
    font-size: 15px;
    font-weight: 600;
    color: #2c3e50;
    background: transparent;
}

.barra-pesquisa input::placeholder{
    font-weight: 500;
    color: #8b8b8b;
}


/* ===== SEM RESULTADO ===== */
.sem-resultado{
    max-width: 460px;
    margin: 30px auto;
    padding: 30px 20px;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    font-size: 18px;
    font-weight: 700;
    color: #7a7a7a;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.sem-resultado span{
    font-size: 14px;
    font-weight: 500;
    color: #9a9a9a;
}


/* ===== MOBILE (geral) ===== */
@media (max-width: 600px) {
    body { padding-left: 10px; padding-right: 10px; }

    button {
        width: 100%;
        font-size: 16px;
    }

    #total {
        font-size: 20px;
        margin-top: 20px;
    }
}


/* ===== MOBILE: produto (FIX DEFINITIVO) ===== */
@media (max-width: 600px){

  .produto{
    display: flex;
    flex-wrap: wrap !important;
    align-items: center;
    gap: 14px;
  }

  .produto-img{
    width: 84px;
    height: 84px;
    flex: 0 0 84px;
  }

  .produto-info{
    flex: 1 1 calc(100% - 98px);
    min-width: 0;
    text-align: left;
  }

  .produto-nome{
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  .produto input[type="number"]{
    flex: 0 0 90px;
    width: 90px;
    margin-left: auto;
  }

  .produto button{
    flex: 1 1 100%;
    width: 100%;
  }
}


/* ===== TOPO MOBILE: LOGO + MASCOTE LADO A LADO ===== */
@media (max-width: 600px){

  .topo{
    display: flex;
    flex-direction: row;      /* LADO A LADO */
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 15px 10px;
    margin-top: 10px;
    overflow: visible;
  }

  .logoescrita{
    flex: 1;
    display: flex;
    justify-content: flex-end;
  }

  .logoescrita img{
    width: 100%;
    max-width: 220px;
    height: auto;
  }

  .logo{
    flex: 1;
    display: flex;
    justify-content: flex-start;
  }

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


/* ===== iPhone: impedir zoom ao focar em inputs (fonte >= 16px) ===== */
@media (max-width: 600px){

  /* quantidade */
  .produto input[type="number"]{
    font-size: 16px !important;
  }

  /* barra de pesquisa */
  .barra-pesquisa input{
    font-size: 16px !important;
  }

  /* inputs do modal (nome/cnpj) */
  .modal-box input{
    font-size: 16px !important;
  }
}


/* ===== FIX MODAL BONITO: rolagem sem estragar layout ===== */

/* overlay (fundo) */
#modal-confirmacao{
  padding: 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* caixa do modal */
.modal-box{
  max-height: 85vh;
  overflow: hidden;          /* não estoura */
  display: flex;
  flex-direction: column;

  /* mantém o visual bonito */
  border-radius: 15px;
  box-shadow: 0 18px 45px rgba(0,0,0,.25);
}

/* inputs: mantém espaçamento interno bonito */
.modal-box label{
  margin-top: 12px;
}

.modal-box input{
  padding: 12px 12px;        /* estava 14px 0px (fica estranho) */
}

/* resumo com rolagem e aparência */
#resumo-pedido{
  margin-top: 16px;
  padding-top: 12px;

  max-height: 32vh;          /* aqui é o pulo do gato */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 12px;
}

/* botões normais (sem sticky), mas sempre alcançáveis porque o resumo rola */
.modal-acoes{
  margin-top: 14px;
  display: flex;
  gap: 10px;
}

.modal-acoes button{
  flex: 1;
  margin: 0;                 /* remove aquele margin que pode “tortar” */
}


/* ===== PRODUTO: referência + input ===== */
.produto {
  position: relative;
}

/* input de quantidade */
.produto input[type="number"] {
  width: 48px;
  height: 36px;
  text-align: center;
  font-weight: 700;
  border-radius: 10px;
  border: 1px solid #ccc;
  background: #fff;
}

/* remove setinhas nativas */
.produto input[type="number"]::-webkit-outer-spin-button,
.produto input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


/* ===== Controle de Quantidade (+ / -) ===== */
/* ===== CONTROLE DE QUANTIDADE ULTRA COMPACTO (HORIZONTAL) ===== */
.qtd-control{
  width: auto;                 /* NÃO ocupa largura toda */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;                    /* <<< AQUI diminui o espaço horizontal */
  margin: 6px auto 10px;
}

/* botões + e - bem estreitos */
.qtd-btn{
  width: 26px;                 /* <<< menor na horizontal */
  height: 26px;
  border-radius: 7px;
  border: 1px solid #d0d0d0;
  background: #f2f2f2;
  color: #333;
  font-size: 16px;
  font-weight: 800;
  padding: 0;
  line-height: 1;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* número mais fino */
.qtd-input{
  width: 34px;                 /* <<< ISSO é o principal */
  height: 26px;
  border-radius: 7px;
  border: 1px solid #d0d0d0;
  background: #fff;
  text-align: center;

  font-size: 16px;             /* evita zoom iPhone */
  font-weight: 700;
  color: #2c3e50;

  padding: 0;                  /* <<< remove gordura */
}

/* remove setinhas */
.qtd-input::-webkit-outer-spin-button,
.qtd-input::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
.qtd-input{
  appearance: textfield;
}

/* MOBILE: ainda mais fino */
@media (max-width: 600px){
  .qtd-control{ gap: 3px; }

  .qtd-btn{
    width: 24px;
    height: 24px;
    font-size: 15px;
  }

  .qtd-input{
    width: 30px;
    height: 24px;
  }
}

/* evita zoom por duplo toque em botões */
button, .qtd-btn, .qtd-input {
  touch-action: manipulation;
}


/* ===== PAGAMENTO (SELECT) + TROCO ===== */
.modal-box select {
  width: 100%;
  padding: 14px 12px;
  border-radius: 12px;
  border: 1px solid #d0d0d0;
  font-size: 15px;
  font-weight: 600;
  color: #2c3e50;
  background: #fdfdfd;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
  outline: none;
  transition: border 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* foco igual ao input */
.modal-box select:focus {
  border-color: #2ecc71;
  box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.25);
  transform: translateY(-1px);
}

/* seta do select (sem precisar mexer no HTML) */
.modal-box select {
  background-image:
    linear-gradient(45deg, transparent 50%, #2c3e50 50%),
    linear-gradient(135deg, #2c3e50 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 36px;
}

/* bloco do troco com separação leve */
#campoTroco {
  margin-top: 6px;
  padding: 10px;
  border-radius: 12px;
  border: 1px dashed #e0e0e0;
  background: #fafafa;
}

/* ===== MOBILE: evita zoom do iPhone e melhora toque ===== */
@media (max-width: 480px) {
  .modal-box input,
  .modal-box select {
    font-size: 16px; /* evita zoom no iOS */
  }
}


/* ===== MODAL: impedir estourar no celular ===== */
.modal-box{
  max-height: 90vh;           /* cabe na tela */
  overflow: hidden;           /* evita vazar pra fora */
  display: flex;
  flex-direction: column;     /* organiza em coluna */
}

/* deixa o resumo ser a área rolável */
#resumo-pedido{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed #e0e0e0;

  overflow-y: auto;           /* rola só os produtos */
  -webkit-overflow-scrolling: touch;
  max-height: 32vh;           /* ajuste fino: quanto espaço o resumo pode usar */
}

/* botões sempre visíveis no final */
.modal-acoes{
  margin-top: 12px;
  padding-top: 10px;
  background: #fff;
  position: sticky;
  bottom: 0;
}

/* mobile: dá mais espaço pro resumo e melhora toque */
@media (max-width: 480px){
  .modal-box{
    max-height: 92vh;
  }
  #resumo-pedido{
    max-height: 36vh;         /* um pouco mais no celular */
  }
}


/* [NÃO USADO?] verificar no HTML/JS */
.sabor-control {
  margin: 8px 0;
}

/* [NÃO USADO?] verificar no HTML/JS */
.sabor-select {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

@media (max-width: 600px) { 
 /* ===== FIX: troco não ficar atrás dos botões no celular ===== */

  /* o modal vira layout em coluna */
  #modal-confirmacao .modal-box{
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow: hidden; /* quem rola é o form */
  }

  /* [NÃO USADO?] verificar se existe #form-confirmação no HTML (atenção ao acento!) */
  #modal-confirmacao #form-confirmação{
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 95px; /* espaço para os botões não cobrirem o último campo */
  }

  /* mantém botões sempre visíveis e não transparentes */
  #modal-confirmacao .modal-acoes{
    position: sticky;
    bottom: 0;
    background: #fff;
    padding: 12px 0;
    margin-top: 12px;
    z-index: 5;
  }
}


 /* [NÃO USADO?] verificar no HTML/JS */
.titulo-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 40px;
}

/* [NÃO USADO?] verificar no HTML/JS */
.titulos {
  position: relative;
  display: inline-block;
}

/* [NÃO USADO?] verificar no HTML/JS */
.titulos h1 {
  margin: 0;
  text-align: center;
}

/* [NÃO USADO?] verificar no HTML/JS */
.boneco-titulo {
  position: absolute;
  left: -105px; /* controla a distância do boneco do texto */
  top: 50%;
  transform: translateY(-50%);
  width: 80px;
}

@media (max-width: 480px) {
  .boneco-titulo {
    width: 45px;
    left: -55px;
  }
}


/* ===== CARRINHO: controle qtd ===== */
.qtd-control-carrinho{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.qtd-btn-carrinho{
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: 1px solid #d0d0d0;
  background: #f2f2f2;
  color: #333;
  font-size: 18px;
  font-weight: 500;
  padding: 0;
  line-height: 1;
  cursor: pointer;
}

.qtd-input-carrinho{
  width: 46px;
  height: 30px;
  border-radius: 9px;
  border: 1px solid #d0d0d0;
  background: #fff;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  padding: 0;
}

/* remove setinhas do input number */
.qtd-input-carrinho::-webkit-outer-spin-button,
.qtd-input-carrinho::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.qtd-input-carrinho{
  appearance: textfield;
}


/* ===== ATALHOS FIXOS (CASA + CARRINHO) ===== */
/* ===== BARRA FIXA BRANCA (CASA + CARRINHO) ===== */
.atalhos-bar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  z-index: 99999;

  padding: calc(10px + env(safe-area-inset-top)) 12px 10px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  box-shadow: 0 8px 22px rgba(0,0,0,0.10);
}

/* container dos botões dentro da barra */
.atalhos-topo{
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;

  padding: 8px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

/* botões */
.atalho-btn{
  width: 46px;
  height: 46px;

  display: grid;
  place-items: center;

  background: #8f8f8f;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.18);

  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;

  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.atalho-btn:active{ transform: scale(0.97); }

.atalho-btn img{
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}

/* espaço no body pra não ficar embaixo da barra */


@media (max-width: 600px){
  body{ padding-top: 88px; }
}

.atalho-btn{
  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  background: #8f8f8f;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.18);

  text-decoration: none;

  /* melhora toque no celular */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;

  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.atalho-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.22);
}

.atalho-btn:active{
  transform: scale(0.97);
}

.atalho-btn img{
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: block;
}

/* ===== MOBILE ===== */
@media (max-width: 600px){
  .atalhos-topo{
    top: 10px;
    left: 10px;
    gap: 8px;
  }

  .atalho-btn{
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  .atalho-btn img{
    width: 24px;
    height: 24px;
  }
}


/* ===== BODY: espaço pro topo fixo ===== */

@media (max-width: 600px){
  body{ padding-top: 64px; }
}

/* ===== TOPO FIXO: 3 COLUNAS (CASA | TITULO | CARRINHO) ===== */
.atalhos-bar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999;

  padding: calc(10px + env(safe-area-inset-top)) 12px 10px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.10);
}

/* container com 3 áreas */
.atalhos-inner{
  max-width: 520px;
  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 8px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

/* centro: boneco + texto */
.atalhos-titulo{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  flex: 1;               /* pega o meio */
  min-width: 0;          /* permite ellipsis no texto */
}

.atalhos-boneco{
  width: 38px;
  height: auto;
  flex: 0 0 auto;
}

.atalhos-h1{
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: #111;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* garante espaço pro topo fixo */

@media (max-width: 600px){
  .atalhos-h1{ font-size: 16px; }
  .atalhos-boneco{ width: 32px; }
  body{ padding-top: 102px; }
}


.produto-indisp{
  color: #d11;
  font-weight: 900;
  letter-spacing: .3px;
}

.produto.is-indisponivel{
  opacity: .95;
}

.produto.is-indisponivel .btn-adicionar{
  background: #ddd;
  color: #555;
  cursor: not-allowed;
}



.footer {
  background-color: #1f1f1f;
  color: #ffffff;
  padding: 30px 20px;
  margin-top: 40px;
}

.footer-container {
  max-width: 1100px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.footer-col {
  flex: 1;
  min-width: 220px;
  margin-bottom: 20px;
}

.footer h4 {
  margin-bottom: 10px;
  font-size: 16px;
  color: #00c853;
}

.footer p {
  font-size: 14px;
  margin: 4px 0;
}