/* ===============================
   BASE + RESET GLOBAL
================================ */

:root{
  --bg:#f1f3f6;
  --card:#ffffff;
  --text:#111;
  --muted:#6b7280;
  --border:#e5e7eb;

  --green:#16a34a;
  --green2:#22c55e;
  --red:#dc2626;

  --shadow:0 10px 30px rgba(0,0,0,.08);
  --radius:14px;

  /* 🔥 ESTRUTURA MOBILE (NOVA) */
  --h-header: 64px;
  --h-cats: 56px;

  /* 🔥 altura real da barra do carrinho mobile */
  --h-barra-carrinho: 64px;
}


*{
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
}

html,body{
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
  overflow-x:hidden;
  background:var(--bg);
  font-family:Arial, Helvetica, sans-serif;
  color:var(--text);
}

img,video{
  max-width:100%;
  height:auto;
  display:block;
}

button,input,textarea{
  font-family:inherit;
}

ul,ol{
  list-style:none;
  padding:0;
  margin:0;
}


/* segurança viewport iOS */
html {
  -webkit-text-size-adjust: 100%;
}


/* ================= GRID PRODUTOS ================= */
.grid-produtos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}


/* ================= CARD PRODUTO ================= */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow: var(--shadow);
}

.produto{
  padding:14px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  text-align:center;
  position:relative;
  overflow: hidden; /* 🔥 trava QUALQUER vazamento */
}

.produto.pack {
  border: none;
}

.info-produto h3 {
  font-size: 14px;
  font-weight: 600;
  min-height: 36px;
  margin: 8px 0 0;
}


/* ================= BADGES ================= */
.badge-promo{
  position: absolute;
  top: 10px;
  left: 10px;
  background: #dc2626;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  z-index: 4;
}

.badge-premium,
.badge-zero{
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  z-index: 3;
}

.badge-premium{ background: linear-gradient(135deg, #fbbf24, #f59e0b); color:#111; }
.badge-zero{ background: #16a34a; color:#fff; }

.badge-retornavel {
  position: absolute;
  top: 10px;
  right: 10px;

  font-size: 9.5px;
  font-weight: 700;

  padding: 2px 6px;
  border-radius: 999px;

  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;

  z-index: 3;
}

/* ================= AÇÕES ================= */
.card-actions {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.btn-plus,
.btn-minus {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  cursor: pointer;
}

.btn-plus { background: #16a34a; }
.btn-minus { background: #d32f2f; }

.qtd-card {
  font-size: 16px;
  font-weight: bold;
  min-width: 20px;
  text-align: center;
}

/* ================= CARRINHO BASE ================= */
.carrinho {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  z-index: 999;
}

/* ================= LISTA DE ITENS — ALTURA FIXA COM RODAPÉ SEMPRE NO FUNDO ================= */

.carrinho-itens {
  flex: 1 1 auto;              /* 🔥 ocupa todo espaço livre */
  overflow-y: auto;

  padding: 8px 10px;
  box-sizing: border-box;

  min-height: 120px;          /* 🔥 impede encolher quando poucos itens */

}

.carrinho-resumo,
.carrinho-obs,
.carrinho-footer {
  flex-shrink: 0;
}




.qty-btn:hover {
  background: #d1d5db;
  transform: scale(1.05);
}

.qty {
  min-width: 22px;
  text-align: center;
  font-weight: 800;
  font-size: 14px;
}

/* resumo */
.carrinho-resumo {
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
  padding: 12px 14px;
}

/* observações */
.carrinho-obs {
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
}

.carrinho-obs label {
  font-weight: 800;
  font-size: 13px;
  display: block;
  margin-bottom: 6px;
}


/* topo do modal mais compacto */
.modal-head h2 {
  margin: 0 0 6px 0 !important;
  font-size: 20px !important;     /* 🔽 levemente menor */
  font-weight: 900 !important;
  letter-spacing: -0.3px;
}


.modal-head h2::before {
  content: "📍";
  font-size: 22px;
}

#btn-usar-localizacao {
  background: linear-gradient(135deg, #22c55e, #16a34a) !important;
  box-shadow: 0 12px 26px rgba(22,163,74,.35) !important;
  font-size: 16px !important;
  letter-spacing: .2px;
}


.status-calculando {
  background: #fff7ed;
  color: #c2410c;
}




/* 🔴 BOTÃO BLOQUEADO — FORA DO RAIO */
.btn-whats:disabled {
  background: #fee2e2;          /* vermelho claro */
  color: #991b1b;               /* vermelho forte */
  border: 1px solid #fecaca;

  cursor: not-allowed;

  transform: none;
  box-shadow: 0 2px 6px rgba(153,27,27,.15);

  font-weight: 700;
}

.btn-whats:disabled:hover {
  filter: none;
  transform: none;
}


/* ===== POLIMENTO BLOCO LOCALIZAÇÃO ===== */

.campo.localizacao-box {
  background: transparent;
  border: none;
  padding: 0;
  margin-bottom: 16px;
}

/* botão principal */
.campo.localizacao-box .btn-secondary {
  width: 100%;
  justify-content: center;
  background: linear-gradient(135deg, #16a34a, #22c55e);
  color: #fff;
  font-weight: 900;
  border-radius: 16px;
  padding: 14px;
  font-size: 15px;
  box-shadow: 0 8px 20px rgba(22,163,74,0.25);
}



/* texto explicativo mais compacto */
.campo.localizacao-box .hint {
  margin-top: 8px;
  font-size: 12.8px;
  color: #6b7280;
  text-align: center;
  line-height: 1.4;
}

/* aproxima catálogo do menu */
.catalogo {
  margin-top: 0 !important;
  padding-top: 0 !important;
}



/* garante que o grid sobe até o topo */
@media (min-width: 900px) {
  .container {
    align-items: flex-start;
  }
}



/* remove qualquer padding estranho herdado */
.carrinho {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ================= FECHAMENTO TOTAL DAS LATERAIS ================= */




.item-carrinho {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;

  margin: 0 0 6px 0 !important;
  padding: 6px 8px !important;

  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px !important;
  box-shadow: none !important;
  box-sizing: border-box;
}

/* remove padding estranho do UL */
#lista-carrinho {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  list-style: none;
}

/* ================= ANIMAÇÕES + / − ================= */


.qty-btn:active {
  transform: scale(0.9);
}

/* botão + em verde */
.qty-btn.plus-anim {
  background: #dcfce7 !important;
}

/* botão − em vermelho suave */
.qty-btn.minus-anim {
  background: #fee2e2 !important;
}

/* animação do número */
.qty {
  transition: transform 0.2s ease;
}

.qty.animar {
  animation: bounceQty 0.25s ease;
}

@keyframes bounceQty {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  70%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

/* ================= BOTÕES + / − — ESTILO UNIFICADO DESKTOP + MOBILE ================= */

.qty-btn {
  width: 26px;
  height: 26px;

  border-radius: 50%;
  border: none;

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

  font-size: 15px;
  font-weight: 900;

  background: #f3f4f6;
  color: #111;

  cursor: pointer;
  will-change: transform;

  box-shadow:
    0 2px 6px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.6);

  transition:
    transform .12s ease,
    background .12s ease,
    box-shadow .12s ease;
}

/* efeito toque */
.qty-btn:active {
  transform: scale(0.9);
  box-shadow:
    0 1px 3px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.6);
}

/* animação de feedback */
.qty-btn.plus-anim {
  background: #dcfce7 !important;
}

.qty-btn.minus-anim {
  background: #fee2e2 !important;
}


/* ===============================
   BOTÃO CALCULAR TAXA (DESKTOP)
================================ */

.btn-finalizar{
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);

  background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
  color: #fff;

  font-weight: 800;
  font-size: 15px;
  letter-spacing: .2px;

  cursor: pointer;
  user-select: none;

  box-shadow:
    0 10px 22px rgba(22,163,74,.25),
    0 2px 0 rgba(0,0,0,.08);

  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}



/* Clique */
.btn-finalizar:active{
  transform: translateY(0);
  filter: brightness(.97);
  box-shadow:
    0 8px 18px rgba(22,163,74,.22),
    0 1px 0 rgba(0,0,0,.10);
}

/* Foco teclado */
.btn-finalizar:focus-visible{
  outline: 0;
  box-shadow:
    0 0 0 4px rgba(34,197,94,.25),
    0 10px 22px rgba(22,163,74,.25);
}

/* Desabilitado */
.btn-finalizar:disabled{
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
  filter: none;
}


/* ===============================
   BOTÃO CALCULAR TAXA — MOBILE
================================ */

@media (max-width: 768px){

  #btn-entrega-mobile{
    width: 100%;
    padding: 14px;
    border-radius: 14px;
    border: none;

    background: #22c55e;
    color: #000;

    font-weight: 900;
    font-size: 16px;

    cursor: pointer;
  }

}

/* ===============================
   ESCONDER BOTÃO MOBILE NO DESKTOP
================================ */

@media (min-width: 769px){
  #btn-entrega-mobile{
    display: none !important;
  }
}


/* ===============================
   BARRA CARRINHO MOBILE — FIX FINAL
================================ */

@media (max-width: 768px) {

  #barra-carrinho-mobile{
    position: fixed;
    left: 0;
    right: 0;

    /* 🔥 respeita iPhone (safe area) */
    bottom: env(safe-area-inset-bottom);

    height: var(--h-barra-carrinho);

    background: #111;
    color: #fff;

    padding: 12px 14px;

    display: none;
    align-items: center;
    justify-content: space-between;

    z-index: 99999;
    box-shadow: 0 -6px 20px rgba(0,0,0,.25);
  }

  #barra-carrinho-mobile.ativa{
    display: flex;
  }

  .barra-info{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
  }

  #barra-ver-carrinho{
    background: #22c55e;
    color: #000;
    border: none;
    border-radius: 999px;
    padding: 10px 16px;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
  }

  /* empurra conteúdo pra não ficar atrás */
  @media (max-width: 768px){

  body:not(.carrinho-aberto){
    padding-bottom: calc(var(--h-barra-carrinho) + env(safe-area-inset-bottom)) !important;
  }

}


}

  /* evita que a UL crie altura própria */
  #lista-carrinho {
    margin: 0 !important;
    padding: 0 !important;
  }


  .item-nome {
  font-size: 14px;
  font-weight: 800;
  color: #111;
}

@media (max-width: 768px){
  .item-nome {
    font-size: 12.5px !important;
  }
}

  .qty {
    font-size: 13px !important;
    min-width: 18px !important;
  }


  /* textarea mínimo */
  .carrinho-obs textarea {
    min-height: 32px !important;
    max-height: 44px !important;
    font-size: 12.5px !important;
    padding: 6px 8px !important;
  }

@media (max-width: 768px){
  .carrinho-resumo .linha {
    font-size: 12.5px !important;
    margin-bottom: 3px !important;
  }

  .carrinho-resumo .linha.total {
    font-size: 14px !important;
  }
}


.item-preco {
  font-size: 13px;
  color: #16a34a;
  font-weight: 700;
}

@media (max-width: 768px){
  .item-preco {
    font-size: 11.5px !important;
  }
}

.item-controles {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto !important;
  margin-right: 0 !important;
}

@media (max-width: 768px){
  .item-controles {
    gap: 4px !important;
  }
}

@media (max-width: 768px) {
  .categoria {
    margin-top: 8px;    /* reduz espaço entre menu e título */
  }
}
.carrinho-footer {
  padding: 12px;
  border-top: 1px solid #eee;
  background: #fff;
}

/* ================= MENU CATEGORIAS — ESTILO ORIGINAL CLEAN ================= */

.menu-categorias {
  position: sticky;
  top: 64px;                 /* 🔥 EXATAMENTE A ALTURA DO HEADER */


  background: var(--bg);
  padding: 8px 8px 10px;

  display: flex;
  gap: 10px;

  overflow-x: auto;
  white-space: nowrap;

  -webkit-overflow-scrolling: touch;
  z-index: 2000;   /* 🔥 MAIS ALTO QUE O HEADER */

}

/* esconder scrollbar */
.menu-categorias::-webkit-scrollbar {
  height: 0;
}
.menu-categorias {
  scrollbar-width: none;
}

/* ajuste mobile */
@media (max-width: 768px) {
  .menu-categorias {
    top: 64px;
  }
}

/* ================= BOTÕES PEQUENOS COM EMOJI INLINE ================= */

.menu-categorias .cat {
  display: inline-flex;              /* 🔥 emoji + texto na mesma linha */
  align-items: center;
  gap: 6px;

  padding: 8px 14px;                 /* 🔥 menor altura */
  border-radius: 999px;

  background: #ffffff;
  border: 1px solid #e5e7eb;

  font-size: 13px;
  font-weight: 800;
  color: #111;

  box-shadow: 0 4px 10px rgba(0,0,0,.08);

  cursor: pointer;
  white-space: nowrap;

  transition: all .15s ease;
}


/* ativa */
.menu-categorias .cat.active {
  background: linear-gradient(135deg, #111, #000);
  color: #fff;
  border-color: #000;

  box-shadow: 0 8px 18px rgba(0,0,0,.30);
}



.btn-plus,
.btn-minus {
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
  transition: transform .12s ease, filter .12s ease;
}


.item-carrinho {
  transition: transform .15s ease, background .15s ease;
}

.item-carrinho:hover {
  background: #f9fafb;
  transform: translateX(2px);
}


@media (min-width: 901px) {

  .menu-categorias {
    justify-content: flex-start !important;

    max-width: 1480px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
  }

}


/* ===============================
   AJUSTE FINO — ITEM DO CARRINHO (DESKTOP)
================================ */

@media (min-width: 769px) {

  .item-carrinho {
    display: grid !important;
    grid-template-columns: 48px 1fr auto;
    align-items: center;
    gap: 8px;

    padding: 8px 10px !important;
    border-radius: 12px !important;

    overflow: hidden !important;
  }

  /* trava QUALQUER imagem gigante */
  .item-thumb,
  .item-thumb img {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;

    object-fit: contain !important;
    border-radius: 10px !important;
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    overflow: hidden !important;
    display: block !important;
  }

  /* bloco nome + preço */
  .item-info {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0;
  }

  .item-nome {
    font-size: 13.5px !important;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .item-preco {
    font-size: 12.5px !important;
    font-weight: 800;
    color: #16a34a;
  }

  /* controles */
  .item-controles {
    display: flex !important;
    align-items: center;
    gap: 4px;
    margin-left: 6px !important;
  }

  .qty-btn {
    width: 26px !important;
    height: 26px !important;
    border-radius: 50%;
    font-size: 15px;
    font-weight: 900;
    padding: 0 !important;
  }

  .qty {
    min-width: 20px !important;
    font-size: 13px !important;
    font-weight: 900;
  }

}

/* ===============================
   LIMPEZA TOTAL DO SUBTOTAL (DESKTOP)
================================ */

@media (min-width: 769px) {

  .carrinho-resumo .linha,
  .carrinho-resumo .subtotal,
  .carrinho-resumo .total,
  .carrinho-resumo .linha-subtotal,
  .carrinho-resumo .linha-total {
    display: none !important;
  }

}

/* ===============================
   HOVER PREMIUM NO CARD
================================ */

.produto {
  transition: box-shadow .18s ease, transform .18s ease;
}

@media (hover: hover) {
  .produto:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(0,0,0,.12);
  }
}


/* ===============================
   DESCONTO — PREMIUM CLEAN
================================ */

.preco{
  margin-top: 8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}

/* preço principal */
.preco strong{
  font-size: 22px;
  font-weight: 900;
  color: #111;
  letter-spacing: -0.3px;
}

/* linha auxiliar: antigo + economia */
.preco .linha-desconto{
  display:flex;
  align-items:center;
  gap:6px;
  font-size: 12.5px;
}

/* preço antigo */
.preco-original{
  color:#9ca3af;
  text-decoration: line-through;
  font-weight: 600;
}

/* economia */
.economia{
  color:#16a34a;
  font-weight: 800;
  white-space: nowrap;
}


/* padrão: escondido */
.linha-desconto{
  display: none;
}

/* só mostra se existir preço original */
.produto:has(.preco-original) .linha-desconto{
  display: flex;
}


/* botão fechar exclusivo do modal */
.btn-fechar-modal{
  position: absolute;
  top: 12px;
  right: 12px;

  width: 36px;
  height: 36px;
  border-radius: 999px;

  border: 1px solid #e5e7eb;
  background: linear-gradient(180deg, #fff, #f3f4f6);

  font-size: 18px;
  font-weight: 900;
  color: #111;

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

  cursor: pointer;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}


.btn-fechar-modal:hover {
  filter: brightness(1.05);
  transform: scale(1.08);
  box-shadow: 
    0 10px 22px rgba(0,0,0,.20),
    0 3px 0 rgba(0,0,0,.08);
}

.btn-fechar-modal:active {
  transform: scale(0.95);
  box-shadow: 
    0 4px 10px rgba(0,0,0,.18),
    0 1px 0 rgba(0,0,0,.06);
}

/* ================= RESUMO DE VALORES ================= */


.linha-resumo strong {
  font-size: 14px;
  font-weight: 800;
  color: #111;
}

/* linha tracejada elegante */
.linha-resumo.total {
  margin-top: 10px;
  padding-top: 10px;

  border-top: 1px dashed #e5e7eb;

  font-size: 15px;
  font-weight: 900;
}

/* valor total em verde forte */
.linha-resumo.total strong {
  font-size: 18px;
  color: #16a34a;
  font-weight: 900;
}



/* ===============================
   CAMPOS ENDEREÇO / BAIRRO — DEFINITIVO PREMIUM
================================ */

#modal-entrega .campo-card {
  background: #ffffff;
  border: 1.5px solid #e5e7eb;
  border-radius: 14px;

  padding: 6px 10px 8px;     /* 🔥 controla altura total */

  box-shadow: 0 2px 6px rgba(0,0,0,.06);
  transition: all .18s ease;

  display: flex;
  flex-direction: column;
  gap: 3px;                 /* 🔥 distância label → input */
}

/* label compacto e elegante */
#modal-entrega .campo-card .label {
  font-size: 11.2px;
  font-weight: 800;
  color: #374151;

  margin: 0;
  line-height: 1.1;
}

/* input estilo app */
#modal-entrega .campo-card input {
  border: none;
  background: transparent;

  height: 26px;             /* 🔥 altura real do campo */
  padding: 0 2px;

  font-size: 14px;
  font-weight: 600;
  color: #111;

  outline: none;
}

/* foco premium */
#modal-entrega .campo-card:focus-within {
  border-color: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,.20);
  background: #f0fdf4;
}

/* placeholder elegante */
#modal-entrega .campo-card input::placeholder {
  color: #9ca3af;
  font-weight: 500;
}



.linha-resumo {
  margin-bottom: 4px !important;
}


/* ===============================
   RESUMO ITENS + TOTAL — ULTRA PREMIUM
================================ */

@media (min-width: 769px) {

  .resumo-itens-total {
    display: flex !important;
    align-items: center;
    justify-content: space-between;

    padding: 14px 16px;
    margin-top: 8px;

    border-top: 1px solid #e5e7eb;

    background: linear-gradient(180deg, #ffffff, #f9fafb);

    border-radius: 0 0 14px 14px;
  }

  /* quantidade de itens */
  .resumo-itens-total .qtd-itens {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #374151 !important;

    display: flex;
    align-items: center;
    gap: 6px;
  }

  /* ícone automático de carrinho */
  .resumo-itens-total .qtd-itens::before {
    content: "🧾";
    font-size: 14px;
    opacity: 0.85;
  }

  /* total principal */
  .resumo-itens-total .total-geral {
    font-size: 24px !important;
    font-weight: 900 !important;
    letter-spacing: -0.4px;

    color: #16a34a !important;

    display: flex;
    align-items: center;
    gap: 6px;
  }

  /* R$ menor que o número */
  .resumo-itens-total .total-geral::before {
    content: "R$";
    font-size: 14px;
    font-weight: 800;
    color: #16a34a;
    opacity: 0.85;
  }

}


/* 🔥 ANIMAÇÃO PREMIUM NO TOTAL VISÍVEL DO CARRINHO */

.total-geral {
  display: inline-block;   /* ESSENCIAL */
}

.total-geral.animar {
  animation: pulseTotal 0.35s ease;
}

@keyframes pulseTotal {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.2); }
  70%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}

/* ===============================
   QTD NO CARD DO PRODUTO — PREMIUM
================================ */

.card-actions .qty {
  min-width: 34px;
  height: 34px;

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

  font-size: 15px;
  font-weight: 900;

  color: #111;
  background: #f3f4f6;

  border-radius: 10px;
  border: 1px solid #e5e7eb;

  box-shadow: inset 0 1px 2px rgba(0,0,0,.06);
}

.card-actions {
  align-items: center;
}



/* LATAS — tamanho fixo elegante (FINAL) */
.produto.lata .box-imagem-produto {
  width: 100%;
  height: 70px;

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

  overflow: hidden; /* 🔥 impede qualquer vazamento */
}

.produto.lata .img-produto {
  width: 70px;
  height: 70px;

  object-fit: contain; /* 🔥 nunca distorce */
}


/* ===============================
   AJUSTE FINO — PACKS (FINAL)
================================ */

.produto.pack .box-imagem-produto {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden; /* 🔥 trava qualquer vazamento */
}

.produto.pack .img-produto {
  max-width: 120px;
  max-height: 80px;

  object-fit: contain; /* 🔥 nunca distorce */
}


/* ===============================
   FIX DEFINITIVO — IMAGEM NO CARRINHO MOBILE
================================ */

@media (max-width: 768px) {

  /* container da imagem no item */
  .item-thumb {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;

    border-radius: 10px;
    background: #fff;
    border: 1px solid #e5e7eb;

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

    overflow: hidden !important;
  }

  /* imagem dentro do carrinho */
  .item-thumb img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
    display: block !important;
  }

}




/* ===============================
   PROMOÇÕES — LINHA ÚNICA REAL
================================ */

/* transforma o bloco do topo da categoria em linha */
#cat-promocoes {
  display: block !important;
}

#cat-promocoes > .titulo-categoria {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}

/* força o subtítulo a subir para a mesma linha */
#cat-promocoes .subtitulo-promocoes {
  display: inline !important;
  margin-left: 2px !important;

  font-size: 15px;
  font-weight: 500;

  color: #40454e;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  padding: 0 !important;
  line-height: 4;
  white-space: nowrap;
}

/* ===============================
   CONTROLE DO PONTO SEPARADOR (·)
================================ */

.titulo-categoria::after {

  content: "·";

  /* COR DO PONTO */
  color: #9ca3af;     /* cinza elegante */
  /* #6b7280 → mais escuro
     #16a34a → verde
  */

  /* TAMANHO DO PONTO */
  font-size: 22px;   /* maior que o texto */
  /* 16px → discreto
     18px → equilibrado
     22px → destaque
  */

  /* POSIÇÃO FINA */
  position: relative;
  top: 2px;         /* sobe ou desce */
  /* -2px → sobe mais
      1px → desce
  */

  /* ESPAÇAMENTO */
  margin: 0 2px;     /* espaço antes e depois */
  /* 2px → colado
     6px → mais solto
  */
}

/* ===============================
   FIX DEFINITIVO — OVERSCROLL MOBILE
================================ */

/* barra sempre isolada e sólida */
#barra-carrinho-mobile {
  background: #111 !important;
  box-shadow: 0 -6px 20px rgba(0,0,0,.35);
}


  /* só empurra conteúdo quando barra aparece */
  body:not(.carrinho-aberto) {
    padding-bottom: 72px !important; /* altura real da barra */
  }


/* ===============================
   FIX ULTRA DEFINITIVO — MOBILE APP MODE
================================ */

/* ===============================
   REMOVE BOTÃO DUPLICADO — MOBILE
================================ */

@media (max-width: 768px) {

  /* esconde botão desktop dentro do carrinho mobile */
  .btn-finalizar {
    display: none !important;
  }

}

  /* ================= RODAPÉ DO CARRINHO — MOBILE COM ESTILO DESKTOP ================= */

@media (max-width: 768px) {

  .carrinho-rodape {
    flex: 0 0 auto;
    position: sticky;
    bottom: 0;

    margin-bottom: 0 !important;   /* 🔥 trava colado no fundo real */

    background: linear-gradient(180deg, #ffffff, #f9fafb);
    border-top: 1px solid #e5e7eb;

    padding: 12px 14px 8px;   /* 🔥 elimina espaço morto embaixo */


    z-index: 60;
    box-shadow: none;              /* 🔥 igual desktop */
    border-radius: 0 0 16px 16px;  /* 🔥 igual desktop */
  }

  /* resumo itens + total (igual desktop) */
  .resumo-itens-total {
    display: flex !important;
    align-items: center;
    justify-content: space-between;

    padding: 12px 14px 10px;
    margin-top: 6px;


    background: transparent;

    border-radius: 0 0 14px 14px;
  }

  /* quantidade de itens */
  .resumo-itens-total .qtd-itens {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #374151 !important;

    display: flex;
    align-items: center;
    gap: 6px;
  }

  .resumo-itens-total .qtd-itens::before {
    content: "🧾";
    font-size: 14px;
    opacity: 0.85;
  }

  /* total principal */
  .resumo-itens-total .total-geral {
    font-size: 22px !important;    /* 🔥 levemente menor no mobile */
    font-weight: 900 !important;
    letter-spacing: -0.3px;

    color: #16a34a !important;

    display: flex;
    align-items: center;
    gap: 6px;
  }

  .resumo-itens-total .total-geral::before {
    content: "R$";
    font-size: 13px;
    font-weight: 800;
    color: #16a34a;
    opacity: 0.85;
  }

}


/* ================= AJUSTE FINO — TÍTULO DAS CATEGORIAS ================= */

.titulo-categoria {
  margin-top: 6px !important;     /* 🔽 antes devia estar 20+ */
  margin-bottom: 2px !important;  /* 🔽 quase colado no subtítulo */
}

/* subtítulo mais próximo do título */
.subtitulo-promocoes {
  margin-top: 0 !important;
  margin-bottom: 8px !important;

  line-height: 1.3;
}


/* ================= PAGAMENTO EM LINHA ÚNICA ================= */

#modal-entrega .pay-grid {
  display: flex !important;
  gap: 10px !important;

  margin-top: 6px !important;

  overflow-x: auto;          /* se faltar espaço no celular */
  -webkit-overflow-scrolling: touch;
  flex-wrap: nowrap;   /* nunca quebra linha */
}



/* ================= COMPACTAÇÃO FINAL REAL — MODAL ENTREGA ================= */


/* resumo mais compacto */
#modal-entrega .resumo-pedido-modal {
  margin-top: 22px !important;   /* 🔥 empurra a caixa para baixo */
  margin-bottom: 8px !important;

  padding: 10px 12px !important;

  border-radius: 14px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
}



.pagamento-box {
  margin-top: 10px !important;
  display: flex;
  flex-direction: column;
  gap: 10px;   /* espaçamento natural entre partes */
}

/* ================= TÍTULO REAL — FORMA DE PAGAMENTO (OFICIAL) ================= */

#modal-entrega .pagamento-titulo {
  font-size: 14px;
  font-weight: 800;
  color: #111;

  margin-top: 6px;
  margin-bottom: 6px;

  display: flex;
  align-items: center;
  gap: 6px;
}

/* ícone discreto */
#modal-entrega .pagamento-titulo::before {
  content: "💳";
  font-size: 14px;
  opacity: .85;
}


/* ================= BOTÃO CONFIRMAR PEDIDO — DEFINITIVO ================= */

#modal-entrega .btn-whats {
  width: 100%;

  margin-top: 14px !important;
  padding: 14px 18px !important;

  border-radius: 20px;
  border: none;

  background: linear-gradient(180deg, #22c55e, #16a34a);
  color: #fff;

  font-size: 17px !important;
  font-weight: 900 !important;
  letter-spacing: .2px;

  cursor: pointer;

  box-shadow:
    0 10px 26px rgba(22,163,74,.35),
    0 2px 0 rgba(0,0,0,.08);

  transition: all .15s ease;
}



/* clique */
#modal-entrega .btn-whats:active {
  transform: translateY(0);
  filter: brightness(.97);
  box-shadow:
    0 6px 18px rgba(22,163,74,.30),
    0 1px 0 rgba(0,0,0,.08);
}



/* ================= STATUS TOPO MODAL — BADGE FINO PREMIUM ================= */

#modal-entrega .status-entrega,
#modal-entrega .status-calculando,
#modal-entrega .status-ok,

/* 🔴 BADGE FORA DA ÁREA — PREMIUM CLEAN */
#modal-entrega .status-erro {
  background: #fff1f2 !important;        /* rosado bem leve */
  color: #991b1b !important;             /* vermelho elegante */

  border: 1px solid #fecaca !important;

  padding: 6px 14px !important;
  border-radius: 999px !important;

  font-size: 13px !important;
  font-weight: 700 !important;

  line-height: 1.2 !important;
  white-space: nowrap;

  box-shadow: 
    0 4px 10px rgba(153,27,27,.15) !important;

  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}




#modal-entrega .status-entrega {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  
}


/* ================= COMPACTAÇÃO FINAL — GARANTE BOTÃO VISÍVEL ================= */

#modal-entrega .modal-head {
  padding-bottom: 4px !important;
}

#modal-entrega .cards {
  margin-top: 6px !important;
  margin-bottom: 6px !important;
}



#modal-entrega .modal-head h2 {
  margin: 0 !important;
  display: flex;
  align-items: center;
  gap: 6px;

  font-size: 20px !important;
  font-weight: 900 !important;
}

/* badge vira subtítulo ao lado do título */
#modal-entrega .status-entrega,
#modal-entrega .status-calculando,
#modal-entrega .status-ok,
#modal-entrega .status-erro {

  margin: 0 !important;          /* 🔥 remove espaço vertical */
  padding: 4px 10px !important; /* 🔥 bem baixinho */

  font-size: 12.5px !important;
  font-weight: 600;

  line-height: 1.1;

  border-radius: 999px;

  white-space: nowrap;
}

/* ================= TOPO DO MODAL ================= */
#modal-entrega .modal-head {
  display: flex;
  align-items: center;
  gap: 10px;

  padding-top: 0px;        /* 🔥 remove espaço em cima */
  padding-bottom: 4px;    /* 🔥 um pouco mais compacto */
}


#modal-entrega .modal-head h2::before{
  content: "📍";
  font-size: 20px;
}




#modal-entrega .hint {
  display: flex;
  align-items: center;
  gap: 6px;

  white-space: nowrap !important;     /* nunca quebra linha */
  overflow: hidden;
  text-overflow: ellipsis;

  padding: 4px 10px !important;       /* 🔽 menos altura */
  margin-top: 6px !important;

  font-size: 12px !important;       /* 🔽 menor */
  line-height: 1.2 !important;

  border-radius: 999px !important;    /* formato pill */
  background: #f0fdf4;
  border: 1px dashed #86efac;

  color: #065f46;
}




/* ===============================
   🔥 CARDS DISTÂNCIA / TAXA — DEFINITIVO
================================ */

#modal-entrega .cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 8px 0 6px;   /* 🔥 deixa como era */
}



#modal-entrega .card-mini {
  padding: 9px 12px;        /* 🔥 altura elegante */
  border-radius: 14px;
  border: 1.5px solid #e5e7eb;

  background: linear-gradient(180deg, #ffffff, #f9fafb);
  box-shadow: 0 4px 12px rgba(0,0,0,.07);
}

#modal-entrega .mini-title {
  font-size: 10.8px;
  font-weight: 700;
  letter-spacing: .4px;
  color: #6b7280;
}

#modal-entrega .mini-value {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.3px;
  color: #111;
}

/* ================= OPÇÃO DE PAGAMENTO (PILL INLINE) ================= */

.pay-option {
  flex: 1 1 0;               /* todas do mesmo tamanho */
  min-width: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  padding: 10px 14px;
  border-radius: 999px;

  border: 2px solid #e5e7eb;
  background: #fff;

  font-size: 14px;
  font-weight: 800;
  color: #111;

  cursor: pointer;
  white-space: nowrap;

  transition: all .15s ease;
}

/* hover leve */
.pay-option:hover {
  background: #f9fafb;
}

/* selecionado (igual print verde) */
.pay-option:has(input:checked) {
  border-color: #16a34a !important;
  background: linear-gradient(135deg, #ecfdf5, #d1fae5) !important;
  box-shadow: 0 6px 16px rgba(22,163,74,.28) !important;
  color: #065f46 !important;
}

/* esconde radio padrão */
.pay-option input {
  appearance: none;
  -webkit-appearance: none;
  width: 0;
  height: 0;
  margin: 0;
}

/* 🔴 BOTÃO CONFIRMAR BLOQUEADO — FORA DO RAIO (FORÇA TOTAL) */
#modal-entrega #btn-confirmar-entrega:disabled {
  background: linear-gradient(180deg, #fecaca, #fee2e2) !important;
  color: #7f1d1d !important;

  border: 1px solid #fca5a5 !important;

  cursor: not-allowed !important;

  box-shadow: 
    0 6px 14px rgba(153,27,27,.25),
    0 2px 0 rgba(0,0,0,.08) !important;

  font-weight: 800 !important;
}

/* remove hover quando bloqueado */
#modal-entrega #btn-confirmar-entrega:disabled:hover {
  filter: none !important;
  transform: none !important;
}

/* 🔥 BOTÃO FECHAR MODAL — CANTO SUPERIOR DIREITO DEFINITIVO */
#modal-entrega .btn-fechar-modal {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;

  width: 36px;
  height: 36px;
  border-radius: 999px;

  border: 1px solid #e5e7eb;
  background: linear-gradient(180deg, #ffffff, #f3f4f6);

  font-size: 18px;
  font-weight: 900;
  color: #111;

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

  cursor: pointer;

  z-index: 50 !important;

  box-shadow: 0 10px 22px rgba(0,0,0,.18);

  transition: all .15s ease;
}

/* hover premium */
#modal-entrega .btn-fechar-modal:hover {
  filter: brightness(1.05);
  transform: scale(1.08);
  box-shadow: 
    0 12px 26px rgba(0,0,0,.22),
    0 3px 0 rgba(0,0,0,.08);
}

/* clique */
#modal-entrega .btn-fechar-modal:active {
  transform: scale(0.95);
  box-shadow: 
    0 4px 10px rgba(0,0,0,.18),
    0 1px 0 rgba(0,0,0,.06);
}

@media (max-width: 768px) {
  .categoria {
    scroll-margin-top: 110px;
    margin-bottom: 2px;
    padding-top: 4px;
    padding-bottom: 0;
  }

  .grid-produtos {
    margin-bottom: 0;
  }

  .titulo-categoria {
    margin-top: 2px;
    margin-bottom: 6px;
  }
}

/* ================= FIX ULTRA DEFINITIVO — MOBILE APP MODE ================= */

@media (max-width: 768px) {

  html, body {
    background: #e7e9ee !important;
  }

}

/* 🔥 ESCONDE CARRINHO QUANDO MODAL ENTREGA ABERTO */

@media (max-width: 900px){
  body.modal-open #carrinho {
    opacity: 0 !important;
    pointer-events: none !important;
  }
}


/* ================= MODAL ENTREGA — FIXO NA TELA (MOBILE) ================= */

#modal-entrega {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#modal-entrega.show {
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}




/* ===============================
   🔥 AJUSTE POSIÇÃO — BOTÃO LOCALIZAÇÃO + HINT (MOBILE)
================================ */

@media (max-width: 768px) {

  /* desce o bloco inteiro de localização */
  #modal-entrega .campo.localizacao-box {
    margin-top: 12px !important;   /* 🔥 desce o conjunto */
  }

}

/* ===============================
   🔥 AJUSTE FINO — TEXTO INFORMATIVO LOCALIZAÇÃO (MOBILE)
================================ */

@media (max-width: 768px) {

  #modal-entrega .campo.localizacao-box .hint {
    font-size: 10.3px !important;   /* 🔥 antes ~12–13, agora mais elegante */
    line-height: 1.15 !important;   /* 🔥 mais compacto verticalmente */
    padding: 4px 8px !important;   /* 🔽 reduz altura total */
  }

}

/* ===============================
   🔥 ÍCONE DO TEXTO INFORMATIVO — VERSÃO MOBILE
================================ */

@media (max-width: 768px) {

  #modal-entrega .hint::before {
    content: "ℹ️";

    font-size: 12.5px !important;   /* 🔽 um pouco menor no mobile */
    line-height: 1;

    margin-right: 5px !important;  /* distância ideal do texto */

    transform: translateY(1px) !important;  /* 🔥 alinhamento perfeito */

    opacity: 0.8;
  }

}

/* ===============================
   🔥 AJUSTE MOBILE — FECHAR ESPAÇO ENTRE HINT E CAMPOS
================================ */

@media (max-width: 768px) {

  /* reduz espaço abaixo do bloco de localização */
  #modal-entrega .campo.localizacao-box {
    margin-bottom: 6px !important;
  }


}


/* ===============================
   🔥 FIX DEFINITIVO — BOTÃO USAR LOCALIZAÇÃO (MOBILE)
================================ */

@media (max-width: 768px) {

  /* garante que o botão receba clique */
  #modal-entrega .btn-secondary {
    position: relative;
    z-index: 5;
    pointer-events: auto !important;
  }

  /* garante que nada cubra o modal */
  #modal-entrega {
    z-index: 9999;
  }

  #modal-entrega .modal-box {
    position: relative;
    z-index: 10000;
  }

}
/* 🔥 REMOVE A BOLINHA DOS TÍTULOS DE CATEGORIA NO CATÁLOGO */

.titulo-categoria::before,
.titulo-categoria::after {
  content: none !important;
  display: none !important;
}

/* 🔥 REATIVA SEPARADOR SOMENTE EM PROMOÇÕES (SOBRESCREVE O BLOQUEIO GLOBAL) */

#cat-promocoes .titulo-categoria::after {
  content: " | Ofertas especiais em caixas e packs" !important;
  display: inline-block !important;

  margin-left: 8px;
  color: #9ca3af;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.2px;

  position: static !important;
}

/* 🔥 REMOVE TOTALMENTE O SUBTÍTULO ANTIGO DE PROMOÇÕES (EVITA DUPLICAÇÃO) */
#cat-promocoes .subtitulo-promocoes {
  display: none !important;
}


/* ===============================
   ALINHAMENTO PERFEITO — TÍTULO PROMOÇÕES (DESKTOP)
================================ */

@media (min-width: 901px) {

  #cat-promocoes .titulo-categoria {
    display: flex !important;
    align-items: center;        /* 🔥 chave do alinhamento perfeito */

    gap: 8px;

    line-height: 1;            /* 🔥 remove variação vertical */
  }

  /* subtítulo alinhado no mesmo eixo */
  #cat-promocoes .titulo-categoria::after {
    position: relative;
    top: 1px;                  /* 🔥 alinha baseline com o título */
  }

}
/* ===============================
   ESPAÇO ENTRE TÍTULO E CARDS — DESKTOP
================================ */

@media (min-width: 901px) {

  /* bloco da categoria inteira */
  .categoria {
    margin-bottom: 18px;   /* 🔥 espaço após o título antes dos cards */
  }

  /* grid começa um pouco mais abaixo */
  .categoria .grid-produtos {
    margin-top: 16px;     /* 🔥 espaço exato entre título e cards */
  }

}

/* ===============================
   ESPAÇO ENTRE TÍTULO E CARDS — GLOBAL (DESKTOP + MOBILE)
================================ */

/* bloco da categoria inteira */
.categoria {
  margin-bottom: 16px;        /* espaço após cada categoria */
}

/* espaço real entre título e grid */
.categoria .grid-produtos {
  margin-top: 12px;          /* 🔥 distância perfeita título → cards */
}

/* ===============================
   BADGE ECONOMIA — PREMIUM COM CORAÇÃO
================================ */

.economia {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  margin-top: 6px;

  padding: 4px 10px;
  border-radius: 999px;

  background: #ecfdf5;          /* verde bem claro */
  border: 1px solid #86efac;    /* borda verde suave */

  font-size: 13px;
  font-weight: 800;
  color: #16a34a;

  box-shadow: inset 0 1px 2px rgba(22,163,74,.12);
}

/* coração antes do texto */
.economia::before {
  content: "💚";
  font-size: 14px;
  line-height: 1;
}

/* ===============================
   TRAVA TOTAL DE SCROLL — MODAL ENTREGA (DESKTOP + MOBILE)
================================ */

html.modal-open,
body.modal-open {
  overflow: hidden !important;
  height: 100% !important;
  overscroll-behavior: none !important;
}

/* ===============================
   🔥 FECHAR ESPAÇO BADGE → CAMPOS — SOMENTE DESKTOP
================================ */

@media (min-width: 901px) {

  /* reduz espaço abaixo do bloco de localização */
  #modal-entrega .campo.localizacao-box {
    margin-bottom: 4px !important;   /* 🔥 fecha o buraco no desktop */
  }

  /* aproxima os campos do badge informativo */
  #modal-entrega .form-grid {
    margin-top: 4px !important;      /* 🔥 puxa Endereço para cima */
  }

}





/* ================= CONTROLE FINO — SUBIR BOTÃO FECHAR MODAL ================= */



/* ================= APENAS FUNDO DO MODAL — SEM ALTERAR MAIS NADA ================= */

#modal-entrega .modal-box {
  background: #f5f7fa !important;   /* cinza clarinho elegante */
}

/* ================= REMOVER BORDA — BOTÃO USAR LOCALIZAÇÃO ================= */

#modal-entrega .campo.localizacao-box .btn-secondary {
  border: none !important;          /* 🔥 remove a borda */
}

/* ===============================
   🔥 HEADER MOBILE — LINHA ÚNICA IGUAL DESKTOP
================================ */

@media (max-width: 900px) {

  .header {
    padding: 0;
  }

  .header-inner {
    width: 100%;
    padding: 10px 14px;

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

   min-height: 64px !important;
   height: auto !important;               /* altura padrão app */
   gap: 10px;
  }

  /* BLOCO LOGO */
  .logo-box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

}

/* ===============================
   🔥 ANIMAÇÃO PULSAR — STATUS ABERTO
================================ */

@keyframes pulseStatus {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(34,197,94,0.8);
  }
  70% {
    transform: scale(1.2);
    box-shadow: 0 0 0 10px rgba(34,197,94,0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(34,197,94,0);
  }
}

/* ===============================
   🔥 STATUS MOBILE — CONFORTÁVEL PREMIUM
================================ */

@media (max-width: 900px) {

  .status-loja-mobile {
    display: flex !important;
    align-items: center;
    gap: 10px;

    padding: 8px 12px;          /* 🔥 mais respiro interno */
    border-radius: 14px;

    max-width: 140px;          /* 🔥 bem mais largo */
    min-width: 110px;

    font-size: 12px;
    font-weight: 800;

    line-height: 1.15;
    white-space: nowrap;

    overflow: hidden;
  }

  /* bloco de texto */
  .status-loja-mobile .status-texto {
    display: flex;
    flex-direction: column;
    line-height: 1.15;

    max-width: 100px;          /* 🔥 texto respira */
    overflow: hidden;
  }

  .status-loja-mobile .linha1 {
    font-size: 12.5px;
    font-weight: 900;
  }

  .status-loja-mobile .linha2 {
    font-size: 11px;
    font-weight: 600;
    opacity: 0.9;
  }

  /* bolinha um pouco maior e alinhada */
  .status-loja-mobile .dot {
    width: 9px;
    height: 9px;
    flex-shrink: 0;
  }

}

/* ===============================
   🔥 TEMPO DE ENTREGA — BARRA MOBILE
================================ */

@media (max-width: 768px) {

  .barra-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;              /* 🔥 aproxima linhas */
  }

  /* linha de cima (itens + total) */
  .barra-info .linha-valores {
    display: flex;
    align-items: center;
    gap: 8px;

    font-size: 14px;
    font-weight: 800;
    color: #fff;
  }

  /* linha de baixo (tempo) */
  .linha-tempo {
    font-size: 11.5px;
    font-weight: 600;
    color: #a7f3d0;        /* verde suave elegante */

    display: flex;
    align-items: center;
    gap: 4px;

    opacity: 0.95;
    white-space: nowrap;
  }

}

/* itens + total */
.barra-unica-linha .linha-valores {
  display: flex;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;

  white-space: nowrap; /* aqui PODE */
}

/* BLOCO DE TEXTO DA ESQUERDA — FLUIDO */
.barra-unica-linha {
  display: flex;
  align-items: center;

  flex: 1 1 auto;
  min-width: 0;

  gap: clamp(4px, 1.5vw, 8px);

  font-size: 14px;
  font-weight: 600;
}

/* divisores | */
.barra-divisor {
  opacity: 0.4;
}

/* tempo entrega */
.tempo-inline {
  font-size: 12px;
  font-weight: 600;
  color: #86efac;
}

/* botão */
#barra-ver-carrinho {
  background: #22c55e;
  color: #000;
  border: none;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
}



/* ===============================
   🔥 TEMPO DE ENTREGA — TOPO DO CARRINHO (DESKTOP)
================================ */

@media (min-width: 769px) {

  .titulo-carrinho-bloco {
    display: flex;
    align-items: center;
    gap: 10px;
  }


}


/* ===============================
   TEMPO DE ENTREGA — MODAL (DESKTOP)
================================ */
@media (min-width: 769px) {

  .tempo-entrega-modal {
    display: flex;
    align-items: center;
    justify-content: center;

    margin: 10px 0 4px;
    padding: 8px 12px;

    font-size: 13px;
    font-weight: 500;

    color: #14532d;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 999px;

    gap: 6px;
  }

  .tempo-entrega-modal strong {
    font-weight: 700;
    color: #166534;
  }

}

/* ===============================
   DIMINUIR BOTÃO CONCLUIR — DESKTOP
================================ */
@media (min-width: 769px) {
  #modal-entrega .btn-whats {
    padding: 12px 16px !important;   /* antes ~14px 18px */
    font-size: 15.5px !important;    /* antes 17px */
    border-radius: 16px !important;  /* antes 20px */
  }
}
/*//////////////////////////////////////////////////////////////*/



/* promo */
.box-imagem-produto .badge-promo {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 5;
}

@media (max-width: 360px){
  .box-imagem-produto .badge-promo{
    font-size: 9px;
    padding: 2px 5px;
  }

  .box-imagem-produto .badge-gelado{
    font-size: 14px;
  }
}



 /*//////////////////////////////////////////////////////////////

 /* 🔥 TOPO DO CARRINHO – MOBILE */
@media (max-width: 768px) {
  .titulo-carrinho-bloco {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;   /* 🔥 impede quebrar linha */
  }
}

@media (max-width: 768px) {
  .titulo-carrinho-bloco h3 {
    font-size: 16px;
  }
}

/* 🔥 CENTRALIZAR TEXTO DO TEMPO NO MODAL */
.tempo-entrega-modal {
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center;
  width: 100%;
}
/* celulares pequenos */
@media (max-width: 360px) {
  body {
    font-size: 14px;
  }
}

/* celulares padrão */
@media (max-width: 480px) {
  .container {
    padding-left: 12px;
    padding-right: 12px;
  }
}


@media (max-width: 360px) {
  .produto {
    padding: 10px;
  }

  .preco strong {
    font-size: 19px;
  }

  .economia {
    font-size: 11.5px;
    padding: 3px 8px;
  }
}

.container {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 14px;
}

.grid-produtos {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}



.menu-categorias {
  top: 64px !important;
}


/* ==========================================
   MOBILE — HEADER + CATEGORIAS FIXOS (ÚNICO)
========================================== */

@media (max-width: 900px){

  .header{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--h-header);
    z-index: 10000;
    background: linear-gradient(135deg, #0f0f0f, #1a1a1a);
  }

  .menu-categorias{
    position: fixed;
    top: var(--h-header);
    left: 0;
    right: 0;
    height: var(--h-cats);
    z-index: 9999;
    background: var(--bg);
  }

  main.container{
    padding-top: calc(var(--h-header) + var(--h-cats));
  }

}

/* ===============================
   HEADER MOBILE — CONTROLE STATUS
================================ */

@media (max-width: 900px){

  /* mostra status mobile */
  .status-loja-mobile{
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
  }

}

/* ===============================
   MOBILE — AJUSTE ESPAÇO CAT → CATÁLOGO
================================ */

@media (max-width: 900px){

  /* altura real: header + barra categorias */
  .menu-spacer{
    height: 10px !important;   /* ajuste fino */
  }

  /* remove folga extra do catálogo */
  .catalogo{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .categoria{
    margin-top: 6px !important;
  }

}
/* ===============================
   FIX iOS — TÍTULO CATEGORIA NÃO QUEBRA
================================ */

.titulo-categoria{
  display: flex !important;
  align-items: center;
  gap: 6px;

  white-space: nowrap !important;
  flex-wrap: nowrap !important;
  overflow: hidden;
}

/* texto extra de promoções */
#cat-promocoes .titulo-categoria::after{
  white-space: nowrap !important;
  flex-shrink: 0;
}
@media (max-width: 480px){
  .titulo-categoria{
    font-size: 15px;
  }
}
/* ===============================
   BARRA CARRINHO MOBILE — FLUIDA FINAL
================================ */

@media (max-width: 768px){

  #barra-carrinho-mobile{
    display: flex;
    align-items: center;
  }

  /* bloco de texto cresce conforme a tela */
  .barra-unica-linha{
    display: flex;
    align-items: center;

    flex: 1 1 auto;
    min-width: 0;

    gap: clamp(4px, 1.5vw, 8px);

    font-size: 14px;
    font-weight: 700;
  }

  /* texto interno pode ficar rígido */
  .barra-unica-linha .linha-valores,
  .tempo-inline{
    white-space: nowrap;
  }

  /* botão SEMPRE no canto direito */
  #barra-ver-carrinho{
    margin-left: auto;
    padding: 11px 16px;
    flex-shrink: 0;
  }

}

/* ===============================
   HEADER — AJUSTE FINO PRAWTIZ DELIVERY
================================ */

@media (max-width: 900px){

  .brand-box{
    flex: 1;
    min-width: 0;

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

    text-align: center;
  }

  .brand{
    font-size: 21px !important;
    font-weight: 900;
    line-height: 1.05;

    white-space: nowrap;          /* 🔥 nunca quebra */
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .tagline{
    font-size: 10.5px;
    margin-top: 2px;
    opacity: .75;

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

}
/* ===============================
   HEADER — CENTRALIZAÇÃO DEFINITIVA BRAND
================================ */

@media (max-width: 900px){

  .header-inner{
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* BRAND CENTRAL ABSOLUTO */
  .brand-box{
    position: absolute;
    left: 50%;
    transform: translateX(-70%);
    text-align: center;
    pointer-events: none; /* não atrapalha clique logo/status */
  }

  /* logo continua esquerda */
  .logo-box{
    margin-right: auto;
    z-index: 2;
  }

  /* status vai pra direita */
  .status-loja-mobile{
    margin-left: auto;
    z-index: 2;
  }

}

/* ===============================
   BADGE TEMPO ENTREGA — RESTAURAR
================================ */

.tempo-entrega-modal{
  display: flex;
  align-items: center;
  justify-content: center;

  margin: 10px 0 6px !important;
  padding: 8px 12px;

  font-size: 13px;
  font-weight: 700;

  color: #14532d;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;

  border-radius: 999px;

  gap: 6px;
}

.tempo-entrega-modal strong{
  font-weight: 800;
  color: #166534;
}

/* =====================================================
   🔥 MODAL ENTREGA — COMPACT PREMIUM
===================================================== */

#modal-entrega .modal-box{
  background: #f3f5f7 !important;
  border-radius: 18px !important;
  padding: 14px 14px 16px !important;
  max-width: 520px;
  width: 94%;
  box-shadow: 0 24px 48px rgba(0,0,0,.22);
}

/* topo */
#modal-entrega .modal-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: 6px !important;
}

#modal-entrega .modal-head h2{
  font-size: 20px !important;
  font-weight: 900 !important;
  margin: 0 !important;
}

/* badge status */
#modal-entrega .status-entrega,
#modal-entrega .status-calculando,
#modal-entrega .status-ok,
#modal-entrega .status-erro{
  padding: 4px 10px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
}

/* botão localização */
#modal-entrega .btn-secondary{
  margin-top: 4px !important;
  padding: 13px !important;
  border-radius: 16px !important;
  font-size: 15px !important;
}

/* hint */
#modal-entrega .hint{
  margin-top: 6px !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}

/* campos */
#modal-entrega .campo-card{
  padding: 7px 10px 9px !important;
  border-radius: 14px !important;
  margin-top: 6px !important;
}

#modal-entrega .campo-card input{
  height: 26px !important;
  font-size: 14px !important;
}

/* distância + taxa */
#modal-entrega .cards{
  margin: 8px 0 6px !important;
  gap: 8px !important;
}

#modal-entrega .card-mini{
  padding: 9px 12px !important;
  border-radius: 14px !important;
}

#modal-entrega .mini-value{
  font-size: 16px !important;
}

/* resumo */
#modal-entrega .resumo-pedido-modal{
  margin-top: 10px !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
}

/* pagamento */
#modal-entrega .pagamento-titulo{
  font-size: 13.5px !important;
  margin: 6px 0 !important;
}

.pay-option{
  padding: 9px 12px !important;
  font-size: 13.5px !important;
}

/* botão confirmar */
#modal-entrega .btn-whats{
  margin-top: 12px !important;
  padding: 13px !important;
  font-size: 15.5px !important;
  border-radius: 16px !important;
}
/* =========================================
   FIX — BOTÃO FECHAR NÃO SOBREPOR BADGE
========================================= */

/* cria espaço à direita do topo do modal */
#modal-entrega .modal-head{
  padding-right: 39px !important; /* reserva área do X */
}

/* garante posição correta do botão */
#modal-entrega .btn-fechar-modal{
  top: 10px !important;
  right: 10px !important;
  z-index: 20 !important;
}


/* ===== CARRINHO BASE ===== */
#carrinho{
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;

  width: 420px;
  max-width: 100vw;

  display: flex;
  flex-direction: column;

  background: #fff;
  z-index: 10001;

  opacity: 0;
  pointer-events: none;
  transform: translateX(24px);
  transition: transform .25s ease, opacity .25s ease;
}

#carrinho.aberto{
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

/* ===== MOBILE ===== */
@media (max-width: 768px){

  #carrinho{
    left: 0;
    right: 0;

    width: 100vw;
    max-width: 100vw;

    /* 🔥 RESPEITA HEADER + CATEGORIAS */
    top: var(--h-header);
    bottom: 0;

    transform: translateY(16px);
  }

  #carrinho.aberto{
    transform: translateY(0);
  }

}



/* ===== SCROLL LOCK SIMPLES (CORRETO) ===== */
html.carrinho-aberto,
body.carrinho-aberto{
  overflow: hidden;
  height: 100%;
}




/* =========================================
   🧱 BASE ESTRUTURAL — MODAL ENTREGA
========================================= */

#modal-entrega{
  position: fixed;
  inset: 0;

  display: none;              /* escondido por padrão */
  align-items: center;
  justify-content: center;

  background: rgba(0,0,0,.45);

  z-index: 20000;             /* acima de tudo */
}

/* quando abrir */
#modal-entrega.show{
  display: flex;
}



/* ==================================
   🖼️ IMAGEM PRODUTO — RESPIRO VISUAL
================================== */

/* caixa base */
.box-imagem-produto{
  height: 96px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}

/* imagem nunca espremida */
.img-produto{
  max-width: 100% !important;
  max-height: 100% !important;

  width: auto !important;
  height: auto !important;

  object-fit: contain !important;
}

/* packs */
.produto.pack .box-imagem-produto{
  height: 110px !important;
}

/* latas */
.produto.lata .box-imagem-produto{
  height: 92px !important;
}



/* animação premium suave */
@keyframes dotPulsePremium{
  0% {
    box-shadow: 0 0 0 0 rgba(34,197,94,.7);
    transform: scale(1);
  }

  70% {
    box-shadow: 0 0 0 8px rgba(34,197,94,0);
    transform: scale(1.15);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(34,197,94,0);
    transform: scale(1);
  }
}

/* texto em coluna */
.status-texto{
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.status-texto strong { font-size: 14px; }
.status-texto small  { font-size: 12px; opacity: .9; }




/* ===== BLOCO CENTRAL ===== */

.brand-box{
  position: static !important;
  transform: none !important;
  text-align: center !important;
  pointer-events: auto !important;
}

.brand{
  font-size: 22px !important;
  font-weight: 900 !important;
  margin: 0 !important;
  line-height: 1.05 !important;
}

.tagline{
  font-size: 12.5px !important;
  margin-top: 2px !important;
  opacity: .85 !important;
}


/* 🔧 ajuste fino de alinhamento vertical do header */

.header-inner{
  align-items: center;
}

.logo-box,
.brand-box,


/* remove margens que empurram */
.brand,
.tagline{
  margin: 0;
}


/* 🔒 TRAVA DE SCROLL OFICIAL */
html.carrinho-aberto,
body.carrinho-aberto {
  overflow: hidden;
  height: 100%;
}

/* 🔥 remove espaço extra do carrinho */
body.carrinho-aberto #carrinho {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* 🔥 esconde barra inferior */
body.carrinho-aberto #barra-carrinho-mobile,
body.modal-open #barra-carrinho-mobile {
  display: none !important;
}


/* ===============================
   🔥 STATUS — CONTROLE FINAL
================================ */

/* padrão: desktop */
.status-loja-desktop {
  display: inline-flex;
}

.status-loja-mobile {
  display: none;
}

/* mobile */
@media (max-width: 900px){
  .status-loja-desktop {
    display: none !important;
  }

  .status-loja-mobile {
    display: inline-flex !important;
  }
}

/* ===============================
   🔥 FIX FINAL — PRIORIDADE DE CAMADAS
================================ */

#overlay-carrinho{
  z-index: 10000 !important;
}

.btn-fechar-carrinho {
  width: 30px;
  height: 30px;
  font-size: 16px;

  position: relative;
  z-index: 10003;
  pointer-events: auto !important;
  touch-action: manipulation;
}

.carrinho-topo {
  height: 56px;
  padding: 0 14px;

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

  position: sticky;
  top: 0;

  background: #fff;
  border-bottom: 1px solid #e5e7eb;

  z-index: 10002;
}
/* ===============================
   🧊 BADGE GELADO — CANTO INFERIOR ESQUERDO
================================ */

.box-imagem-produto{
  position: relative;
}

.box-imagem-produto .badge-gelado{
  position: absolute;

  bottom: 10px;   /* 🔥 ERA 10px → muito alto */
  left: 15px;

  font-size: 16px;
  line-height: 1;

  background: transparent;
  padding: 0;

  z-index: 5;
  pointer-events: none;
}


@media (max-width: 360px){
  .box-imagem-produto .badge-gelado{
    bottom: 4px;
    left: 4px;
    font-size: 14px;
  }
}
/* ===============================
   🔥 FIX VISUAL — TEXTO DO HEADER
================================ */

.header,
.header * {
  color: #ffffff !important;
}
/* ===============================
   🟢 STATUS — BADGE VERDE PREMIUM
================================ */

.header .status-loja-desktop,
.header .status-loja-mobile {
  background: linear-gradient(135deg, #374151, #1f2937);
color: #f9fafb;

  padding: 6px 12px;
  border-radius: 999px;

  font-weight: 800;
  font-size: 12.5px;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  box-shadow:
    0 6px 18px rgba(34,197,94,.45),
    inset 0 1px 0 rgba(255,255,255,.35);
}
@keyframes pulseDot {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(34,197,94,.8);
  }
  70% {
    transform: scale(1.25);
    box-shadow: 0 0 0 10px rgba(34,197,94,0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(34,197,94,0);
  }
}
.header .status-loja-desktop .dot,
.header .status-loja-mobile .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;

  background: #00ff2a;

  animation: pulseDot 1.6s infinite;
}
/* ===============================
   STATUS — FUNDO NEUTRO + DOT VERDE
================================ */

.header .status-loja-desktop,
.header .status-loja-mobile {
  background: rgba(255,255,255,0.12) !important; /* fundo neutro */
  color: #ffffff !important;

  padding: 6px 12px;
  border-radius: 999px;

  font-weight: 700;
  font-size: 12.5px;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  box-shadow: none !important;
}
/* ===============================
   🔥 FIX DEFINITIVO — BARRA MOBILE SEM ESPAÇO SOBRANDO
================================ */

@media (max-width: 768px){

  #barra-carrinho-mobile{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 0 !important;
  }

  /* texto ocupa TODO o espaço possível */
  .barra-info,
  .barra-unica-linha{
    flex: 1 1 0% !important;
    min-width: 0 !important;
    max-width: none !important;

    justify-content: flex-start !important;
    gap: 6px !important;
  }

  /* botão SEMPRE colado à direita */
  #barra-ver-carrinho{
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }

}
/* ===============================
   BARRA CARRINHO MOBILE — FLUIDO + CONFORTÁVEL
================================ */

@media (max-width: 768px){

  #barra-carrinho-mobile{
    display: flex;
    align-items: center;
    padding: 12px 14px; /* 🔥 respiro fixo saudável */
  }

  /* bloco de texto */
  .barra-unica-linha{
    display: flex;
    align-items: center;

    flex: 1 1 auto;
    min-width: 0;

    /* 🔥 espaçamento que se adapta, mas não aperta demais */
    gap: clamp(6px, 2vw, 10px);

    font-size: 14px;
    font-weight: 700;
  }

  /* textos não quebram */
  .barra-unica-linha .linha-valores,
  .tempo-inline{
    white-space: nowrap;
  }

  /* botão */
  #barra-ver-carrinho{
    margin-left: auto;
    padding: 11px 16px;
    flex-shrink: 0;
  }

}
/* ===============================
   BARRA CARRINHO MOBILE — ESPAÇAMENTO FINO
================================ */

#barra-carrinho-mobile {
  gap: 10px;              /* espaço geral entre blocos */
  padding: 10px 14px;     /* respiro interno sem exagero */
}

/* quantidade de itens */
#barra-carrinho-mobile .qtd-itens {
  margin-right: 6px;
  font-weight: 600;
  white-space: nowrap;
}

/* total em R$ */
#barra-carrinho-mobile .total-geral {
  margin-right: 6px;
  font-weight: 700;
  white-space: nowrap;
}

/* tempo de entrega */
#barra-carrinho-mobile #tempo-entrega {
  margin-left: 8px;     /* empurra pra direita */
  font-size: 0.85rem;    /* ligeiramente menor */
  opacity: 0.9;
  white-space: nowrap;
}
/* ===============================
   STATUS LOJA — BOLINHA (DOT)
================================ */

.status-loja-desktop .dot,
.status-loja-mobile .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transition: background-color .3s ease, opacity .3s ease;
}

/* ABERTO */
.status-loja-desktop.aberto .dot,
.status-loja-mobile.aberto .dot {
  background: #16a34a;
  animation: pulse 1.4s infinite;
}

/* FECHADO */
.status-loja-desktop.fechado .dot,
.status-loja-mobile.fechado .dot {
  background: #dc2626;
  animation: none;      /* 🔥 PARA de piscar */
  opacity: 0.8;
}

/* BREVE */
.status-loja-desktop.breve .dot,
.status-loja-mobile.breve .dot {
  background: #eab308;
  animation: none;
}

/* animação só do ABERTO */
@keyframes pulse {
  0%   { transform: scale(1);   opacity: 1; }
  50%  { transform: scale(1.4); opacity: .6; }
  100% { transform: scale(1);   opacity: 1; }
}
/* ===============================
   BOTÃO FECHAR — CARRINHO MOBILE
================================ */

.btn-fechar-carrinho {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.06);

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

  font-size: 18px;
  line-height: 1;
  cursor: pointer;

  transition: 
    background .2s ease,
    transform .15s ease,
    box-shadow .15s ease;
}

.btn-fechar-carrinho:hover {
  background: rgba(0, 0, 0, 0.12);
}

.btn-fechar-carrinho:active {
  transform: scale(0.92);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) inset;
}
/* ===============================
   DESTAQUE SUAVE — ENTREGA RÁPIDA
================================ */

.tempo-entrega-desktop {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #000000; /* amarelo elegante */
  margin-left: 16px; /* ajuste aqui */
}

.tempo-entrega-desktop {
  font-weight: 500;
}
/* ===============================
   MODAL ENTREGA — STATUS RESPONSIVO
================================ */

.status-entrega {
  display: inline-flex;
  align-items: center;

  padding: 6px 10px;
  border-radius: 10px;

  font-size: 0.75rem;
  line-height: 1.2;

  white-space: normal;        /* 🔥 permite quebrar linha */
  word-break: break-word;     /* 🔥 evita corte */
  max-width: 100%;            /* 🔥 nunca passa do modal */
}
@media (max-width: 360px) {
  .status-entrega {
    font-size: 0.72rem;
    padding: 6px 8px;
  }
}
/* ===============================
   MODAL ENTREGA — TEXTO DE AJUDA (HINT)
================================ */

.hint {
  display: block;
  max-width: 100%;
  
  font-size: 0.75rem;
  line-height: 1.25;

  color: var(--muted);

  white-space: normal;      /* 🔥 permite quebrar linha */
  word-break: break-word;   /* 🔥 evita overflow */
}
@media (max-width: 360px) {
  .hint {
    font-size: 0.72rem;
  }
}

/* ===============================
   HEADER — DESKTOP CONTIDO (FINAL)
================================ */
@media (min-width: 1024px){

  .header{
    padding: 0;
  }

  .header-inner{
    max-width: 1480px;
    margin: 0 auto;

    padding: 14px 32px;

    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    height: 64px;
    gap: 24px;
  }
}

/* ===============================
   HEADER — FUNDO PRETO GARANTIDO
   (DESKTOP + MOBILE)
================================ */

.header{
  background: linear-gradient(135deg, #0f0f0f, #1a1a1a);
}
/* ===============================
   HEADER — DESKTOP (2 LINHAS)
================================ */
@media (min-width: 1024px){

  .header-inner{
    max-width: 1480px;
    margin: 0 auto;
    padding: 12px 32px;

    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    min-height: 64px;   /* 🔥 não trava mais */
    gap: 20px;
  }


  /* BLOCO CENTRAL — 2 LINHAS */
  .brand-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-align: center;
  }

  .brand{
    font-size: 20px;
    font-weight: 900;
    line-height: 1.05;
    margin: 0;
    white-space: nowrap;
  }

  .tagline{
    font-size: 12px;
    font-weight: 500;
    opacity: .8;
    margin: 0;
    white-space: nowrap;
  }

  /* STATUS */
  .status-loja-desktop{
    font-size: 12px;
    padding: 6px 12px;
    white-space: nowrap;
  }
}
/* ===============================
   LOGO — CONTROLE ÚNICO FINAL
================================ */

/* base */
.logo-header{
  width: auto;
  object-fit: contain;
}

/* mobile */
@media (max-width: 900px){
  .logo-header{
    height: 55px;
  }
}

@media (min-width: 1024px){
  .header-inner{
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;

    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
  }
}
@media (min-width: 1024px){
  .logo-box{
    height: 64px !important;
    display: flex !important;
    align-items: center !important;
  }

  .logo-header{
    height: 80px !important;   /* 👈 ajuste aqui */
    width: auto !important;
    object-fit: contain !important;
  }
}
@media (min-width: 1024px){

  .status-loja-desktop{
    position: relative;
    top: -1px;   /* 🔥 ajuste óptico */
  }

}
@media (min-width: 1024px){

  .logo-box{
    position: relative;
    top: -1px;   /* 🔥 ajuste fino visual */
  }

}
@media (min-width: 1024px){

  .brand{
    margin: 0 !important;
    padding: 0 !important;

    line-height: 1 !important;   /* 🔥 ESSENCIAL */
    display: block;
  }

  .tagline{
    margin-top: 2px !important;  /* controla só a distância */
    line-height: 1.1 !important;
  }

}
@media (min-width: 1024px){

  .brand-wrap{
    transform: translateY(-1px); /* 🔥 controle aqui */
  }

}
/* ===============================
   DESKTOP — HEADER + CATEGORIAS FIXOS (OFICIAL)
================================ */

@media (min-width: 901px){

  /* HEADER */
  .header{
    position: sticky;
    top: 0;
    z-index: 10000;
    background: linear-gradient(135deg, #0f0f0f, #1a1a1a);
  }

  .header-inner{
    height: 64px;
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 32px;

    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
  }

  /* MENU CATEGORIAS */
  .menu-categorias{
    position: sticky;
    top: 64px;
    z-index: 9000;

    background: var(--bg);
  }

}
/* ===============================
   STATUS — VISIBILIDADE CORRETA
================================ */

/* DESKTOP */
@media (min-width: 901px){
  .status-loja-desktop{
    display: inline-flex !important;
  }

  .status-loja-mobile{
    display: none !important;
  }
}

/* MOBILE */
@media (max-width: 900px){
  .status-loja-desktop{
    display: none !important;
  }

  .status-loja-mobile{
    display: inline-flex !important;
  }
}
@media (min-width: 901px){

  .header{
    height: 64px !important;        /* 🔒 trava a altura externa */
  }

  .header-inner{
    height: 64px !important;        /* 🔒 trava a altura interna */
    min-height: 64px !important;
    max-height: 64px !important;

    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
  }

}
/* ===============================
   GRID PRODUTOS — DESKTOP FIXO 4 COLUNAS
================================ */

@media (min-width: 1024px) {
  .grid-produtos {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* ===============================
   CARRINHO FIXO SEMPRE VISÍVEL — DESKTOP
================================ */

@media (min-width: 901px){

  #carrinho{
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;

    position: fixed !important;
    right: 0 !important;
    top: 64px !important;      /* abaixo do header */
    bottom: 0 !important;

    width: 420px !important;
    max-width: 420px !important;
  }

  /* empurra o catálogo pra esquerda */
  main.container{
    margin-right: 420px;
  }
}
/* ===============================
   HEADER FIXO — DESKTOP
================================ */

@media (min-width: 901px){

  .header{
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;

    height: 64px;
    z-index: 12000;

    background: linear-gradient(135deg, #0f0f0f, #1a1a1a);
  }

  .header-inner{
    height: 64px !important;
  }

}
@media (min-width: 901px){

  main.container{
    padding-top: 64px;   /* altura exata do header */
  }

}
/* ===============================
   BARRA DE CATEGORIAS FIXA — DESKTOP
================================ */

@media (min-width: 901px){

  .menu-categorias{
    position: fixed !important;
    top: 64px;              /* abaixo do header */
    left: 0;
    right: 420px;           /* respeita carrinho fixo */

    height: 56px;
    z-index: 11000;

    background: var(--bg);
  }

}
@media (min-width: 901px){

  main.container{
    padding-top: calc(64px + 56px); /* header + categorias */
  }

}
/* ===============================
   REMOVE QUALQUER SOMBRA DA BARRA DE CATEGORIAS
================================ */

.menu-categorias,
.menu-categorias::before,
.menu-categorias::after{
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
}
@media (min-width: 901px){
  .menu-categorias .cat{
    box-shadow: none !important;
  }
}
@media (min-width: 901px){
  .grid-produtos{
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px; /* um pouco mais de respiro */
  }
}
@media (min-width: 901px){

  main.container{
    max-width: calc(100vw - 420px); /* desconta o carrinho */
    margin-right: 420px;
  }

}
@media (min-width: 901px){

  main.container{
    margin-left: auto;
    margin-right: 420px;
  }

}
/* ===============================
   TOPO DO CARRINHO — DESKTOP (SEM BOTÃO FECHAR)
================================ */

@media (min-width: 901px){

  .carrinho-topo{
    height: 56px;
    padding: 0 16px;

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

    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;

    position: sticky;
    top: 0;
    z-index: 5;
  }

  /* bloco esquerdo: título + badge */
  .titulo-carrinho-bloco{
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .titulo-carrinho-bloco h3{
    font-size: 16px;
    font-weight: 900;
    margin: 0;
    white-space: nowrap;
  }

  /* badge entrega */
  .tempo-entrega-desktop{
    font-size: 12px;
    font-weight: 600;
    color: #374151;

    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 999px;

    padding: 4px 10px;
    white-space: nowrap;
  }

  /* garante que não exista botão fechar */
  .btn-fechar-carrinho{
    display: none !important;
  }

}
/* ===============================
   BOTÃO FECHAR — MODAL ENTREGA (DESKTOP)
================================ */

@media (min-width: 901px){

  /* garante que o card seja a referência */
  #modal-entrega .modal-box{
    position: relative !important;
  }

  /* botão X preso DENTRO do modal */
  #modal-entrega .btn-fechar-modal{
    position: absolute !important;

    top: 12px !important;
    right: 12px !important;

    width: 36px;
    height: 36px;

    border-radius: 50%;
    font-size: 18px;

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

    z-index: 10 !important;
  }

}
/* ===============================
   EMOJI INFO — HINT (DESKTOP)
================================ */

@media (min-width: 901px){

  #modal-entrega .hint{
    display: flex;
    align-items: center;
    gap: 6px;
  }

  #modal-entrega .hint::before{
    content: "ℹ️";
    font-size: 13px;
    line-height: 1;
    opacity: .85;
  }

}
@media (min-width: 901px){

  /* garante alinhamento vertical do topo */
  #modal-entrega .modal-head{
    align-items: center !important;
  }

  /* ajuste fino do badge */
  #modal-entrega .status-ok,
  #modal-entrega .status-entrega,
  #modal-entrega .status-calculando,
  #modal-entrega .status-erro{
    transform: translateY(4px);
    align-self: center !important;
    line-height: 1 !important;
  }

}

/* ===============================
   ESCONDER BARRA DO CARRINHO NO DESKTOP
================================ */

@media (min-width: 768px) {
  #barra-carrinho-mobile {
    display: none !important;
  }
}




@media (max-width: 768px){

  footer,
  .footer-site,
  .rodape-site,
  #footer-site{
    position: static !important;
    height: auto !important;
  }

}


/* =========================================================
   🔥 FIX FINAL ABSOLUTO — BARRA MOBILE SEMPRE 1 LINHA
   (iPhone + Android)
========================================================= */

@media (max-width: 768px){

  #barra-carrinho-mobile{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;

    /* safe area iPhone */
    bottom: env(safe-area-inset-bottom) !important;

    height: 64px !important;

    padding: 10px 12px !important;

    display: none;
    align-items: center !important;
    justify-content: space-between !important;

    background: #111 !important;
    color: #fff !important;

    flex-wrap: nowrap !important;

    z-index: 99999 !important;
  }

  #barra-carrinho-mobile.ativa{
    display: flex !important;
  }

  /* bloco esquerdo: texto inteiro */
  .barra-info,
  .barra-unica-linha{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;

    flex: 1 1 auto !important;
    min-width: 0 !important;

    gap: 6px !important;

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

  /* trava valores e tempo */
  .linha-valores,
  .tempo-inline,
  .linha-tempo{
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;

    white-space: nowrap !important;
    flex-wrap: nowrap !important;
  }

  /* botão sempre no canto e nunca quebra */
  #barra-ver-carrinho{
    margin-left: auto !important;
    flex-shrink: 0 !important;

    padding: 10px 14px !important;
    border-radius: 999px !important;

    white-space: nowrap !important;
  }

  /* empurra o conteúdo do site (pra não ficar atrás da barra) */
  body:not(.carrinho-aberto){
    padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important;
  }

}
/* ===============================
   TEMPO DE ENTREGA — TEXTO CURTO EM TELAS PEQUENAS
================================ */

.tempo-texto-longo,
.tempo-texto-curto{
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.tempo-texto-curto{
  display: none !important;
}

@media (max-width: 380px){

  .tempo-texto-longo{
    display: none !important;
  }

  .tempo-texto-curto{
    display: inline-flex !important;
  }

}