@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
* {
  box-sizing: border-box;
}

:root{
  --cor-primaria: #1e88e5;
  --cor-primaria-escura: #1565c0;
  --cor-secundaria: #22c55e;
  --cor-secundaria-escura: #16a34a;
  --cor-destaque: #f59e0b;
  --cor-texto: #1f2937;
  --cor-texto-suave: #6b7280;
  --cor-card: rgba(255,255,255,0.88);
  --cor-card-forte: #ffffff;
  --cor-borda: rgba(31, 41, 55, 0.08);
  --sombra-leve: 0 10px 24px rgba(15, 23, 42, 0.10);
  --sombra-media: 0 16px 40px rgba(15, 23, 42, 0.14);
  --radius-lg: 20px;
  --radius-md: 14px;
}

body{
  margin: 0;
  padding-top: 120px;
  background:
    radial-gradient(circle at top left, rgba(46, 204, 113, 0.16), transparent 35%),
    radial-gradient(circle at top right, rgba(52, 152, 219, 0.14), transparent 30%),
    linear-gradient(180deg, #eef3f8 0%, #dde6ef 100%);
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  text-align: center;
  color: #1f2937;
}



/* ===== TOPO ===== */
.topo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
  margin-top: 24px;
  margin-bottom: 24px;
  padding: 24px 28px;
  border-radius: 26px;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(10px);
  box-shadow: var(--sombra-media);
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.logoescrita img{
  width: 300px;
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.18));
}

.logo img {
  animation: flutuar 3s ease-in-out infinite;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.18));
}

.menu {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 340px;
  margin: 28px auto;
}

.menu a,
.btn-ver,
.btn-continuar,
button {
  padding: 15px 18px;
  background: rgba(255,255,255,0.9);
  color: var(--cor-texto);
  text-decoration: none;
  border-radius: 16px;
  font-weight: 700;
  border: 1px solid var(--cor-borda);
  box-shadow: var(--sombra-leve);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  font-size: 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(247,250,252,0.96));
}

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

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

.menu a::after {
  content: "›";
  font-size: 24px;
  color: #94a3b8;
}

.menu a:hover,
.btn-ver:hover,
.btn-continuar:hover,
button:hover,
a:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 34px rgba(15,23,42,0.14);
}

.menu a[href*="carrinho"] {
  background: linear-gradient(135deg, var(--cor-secundaria), var(--cor-secundaria-escura));
  color: white;
}

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

button {
  background: linear-gradient(135deg, var(--cor-secundaria), var(--cor-secundaria-escura));
  color: white;
}

.btn-continuar {
  background: linear-gradient(135deg, var(--cor-primaria), var(--cor-primaria-escura));
  color: white;
}

.btn-limpar {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

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: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(249,251,253,0.96));
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: 24px;
  padding: 18px 20px;
  max-width: 500px;
  margin: 16px auto 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  box-shadow: 0 14px 28px rgba(15,23,42,0.10);
  flex-wrap: nowrap;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.produto:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(15,23,42,0.14);
}

.produto-img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: 16px;
  background: linear-gradient(180deg, #f8fafc, #eef2f7);
  padding: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}

.produto-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-align: left;
}

.produto-nome {
  font-size: 15px;
  line-height: 1.3;
  word-break: normal;
  font-weight: 800;
  color: #1e293b;
}

.produto-preco {
  font-size: 15px;
  font-weight: 800;
  color: var(--cor-secundaria-escura);
  margin-top: 6px;
}

.produto button {
  padding: 12px 18px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--cor-secundaria), var(--cor-secundaria-escura));
  color: white;
  box-shadow: 0 8px 18px rgba(34,197,94,0.28);
}

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

#lista li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255,255,255,0.96);
  padding: 14px 16px;
  margin-bottom: 12px;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(15,23,42,0.10);
  font-weight: 600;
  font-size: 14px;
  gap: 10px;
  border: 1px solid rgba(255,255,255,0.7);
}

h2 {
  background: rgba(255,255,255,0.96);
  display: inline-block;
  padding: 14px 24px;
  border-radius: 18px;
  font-size: 20px;
  font-weight: 800;
  color: #1f2937;
  box-shadow: 0 10px 24px rgba(15,23,42,0.10);
  margin: 18px auto 26px;
}

#total {
  color: var(--cor-secundaria-escura);
}

#modal-confirmacao {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15,23,42,0.50);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal-box {
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  padding: 24px;
  border-radius: 24px;
  width: 92%;
  max-width: 460px;
  animation: slideUp 0.3s ease;
  box-shadow: 0 24px 50px rgba(15,23,42,0.20);
  text-align: left;
}

.modal-box h2,
.modal-box p {
  text-align: left;
}

.modal-box label {
  display: block;
  text-align: left;
  margin-top: 14px;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 800;
  color: #334155;
}

.modal-box input,
.modal-box select {
  width: 100%;
  padding: 14px 14px;
  border-radius: 14px;
  border: 1px solid #dbe3ec;
  font-size: 15px;
  font-weight: 600;
  color: #1f2937;
  background: #ffffff;
  outline: none;
  transition: border 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}

.modal-box input:focus,
.modal-box select:focus {
  border-color: rgba(30,136,229,.45);
  box-shadow: 0 0 0 4px rgba(30,136,229,.12);
  transform: translateY(-1px);
}

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

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

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


/* ===== BARRA PESQUISA ===== */
.barra-pesquisa{
  max-width: 500px;
  margin: 14px auto 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,0.92);
  padding: 14px 16px;
  border-radius: 20px;
  box-shadow: 0 12px 28px rgba(15,23,42,0.10);
  border: 1px solid rgba(255,255,255,0.85);
  backdrop-filter: blur(10px);
}

#pesquisa-index {
  width: min(620px, 92%);
  height: 54px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.8);
  background: rgba(255,255,255,0.94);
  box-shadow: 0 12px 28px rgba(15,23,42,0.10);
  padding: 0 18px;
  font-size: 15px;
  font-weight: 600;
  outline: none;
}

#pesquisa-index:focus {
  border-color: rgba(30,136,229,.35);
  box-shadow: 0 0 0 4px rgba(30,136,229,.10), 0 12px 28px rgba(15,23,42,0.10);
}

.resultados-menu {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.resultado-lista {
  width: min(620px, 92%);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.resultado-item {
  display: flex;
  gap: 14px;
  align-items: center;
  background: rgba(255,255,255,0.96);
  border-radius: 18px;
  padding: 12px 14px;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(255,255,255,0.85);
  box-shadow: 0 12px 24px rgba(15,23,42,0.10);
  transition: transform .18s ease, box-shadow .18s ease;
}

.resultado-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 30px rgba(15,23,42,0.14);
}

.resultado-img {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 14px;
  background: #f8fafc;
  padding: 4px;
}

.resultado-info {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left;
}

.resultado-nome {
  font-weight: 800;
  font-size: 15px;
  line-height: 1.2;
  color: #1f2937;
}

.resultado-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  font-size: 12px;
  color: #64748b;
}

.sem-resultado {
  width: min(620px, 92%);
  background: rgba(255,255,255,0.96);
  border-radius: 18px;
  padding: 18px 14px;
  text-align: center;
  box-shadow: 0 12px 24px rgba(15,23,42,0.10);
}

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

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

.barra-pesquisa input::placeholder{
  font-weight: 500;
  color: #94a3b8;
}


/* ===== 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;
  width: 100%;
  z-index: 999;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.7);
  box-shadow: 0 8px 24px rgba(15,23,42,0.08);
}

.atalhos-inner,
.atalhos-topo{
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.atalho-btn{
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background: rgba(255,255,255,0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(15,23,42,0.10);
  border: 1px solid rgba(255,255,255,0.9);
}

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

.atalhos-titulo{
  display: flex;
  align-items: center;
  gap: 12px;
}

.atalhos-boneco{
  width: 52px;
  height: auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.12));
}

.atalhos-h1{
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  color: #1e293b;
}
/* 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;
}