:root{
  --bg:#0b0b0b; --card:#141414; --text:#f6f6f6; --muted:#cfcfcf;
  --accent:#ff7a00; --accent-2:#ffb266; --danger:#ff5d5d;
  --border:#222; --shadow:0 16px 40px rgba(0,0,0,.45);
}

/* =============== RESET BÁSICO / BODY =============== */
*{ box-sizing:border-box }
html, body{ height:100% }
body.theme-zap{
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.5 system-ui, Segoe UI, Roboto, Arial;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{ color:var(--accent); text-decoration:none }
a:hover{ text-decoration:underline }
.container{ max-width:940px; margin:0 auto; padding:16px }

/* acessibilidade: foco visível */
:where(button, .btn, .btn-ghost, .chip, a, input, select, textarea):focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-radius:10px;
}

/* movimento reduzido */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important }
}

/* =============== HERO =============== */
.hero, .hero-owned{ background:#000; border-bottom:1px solid #141414 }
.hero-owned .hero-bar{
  max-width:1000px; margin:0 auto; display:flex; align-items:center;
  justify-content:space-between; gap:16px; padding:18px 16px;
}
.brand-left{ display:flex; align-items:center; gap:14px }
.brand-logo-xl{
  width:64px; height:64px; object-fit:cover; border-radius:16px;
  background:#0f0f0f; border:1px solid var(--border); box-shadow:0 6px 20px rgba(0,0,0,.35);
}
.brand-info{ display:flex; flex-direction:column }
.brand-title{
  margin:0; font-size:28px; line-height:1.1; letter-spacing:.2px;
  color:var(--accent); text-shadow:0 1px 0 rgba(0,0,0,.4);
}
.brand-sub{ margin:4px 0 0; color:var(--muted); font-size:14px }
.hero-band{ height:6px; background:linear-gradient(90deg,transparent,var(--accent),transparent); opacity:.9 }

/* =============== FORM / CHIPS =============== */
.cliente h2{ margin:0 0 6px; font:600 16px/1.2 system-ui; color:var(--muted) }
.cliente input{
  width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:10px;
  background:#0f0f0f; color:var(--text); outline:none;
}
.filtros{ display:flex; gap:10px; flex-wrap:wrap; margin:16px 0 }
.chip{
  border:none; background:#141414; color:var(--text); padding:10px 14px;
  border-radius:999px; cursor:pointer; outline:1px solid var(--border);
  transition:transform .08s, background .15s;
  min-height:44px; /* alvo de toque */
}
.chip:hover{ transform:translateY(-1px) }
.chip.active, .chip:focus{ background:var(--accent); color:#000; outline:none }

/* =============== GRID / CARDS =============== */
.cards{ display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)) }

.card.product{
  display:flex; flex-direction:column; overflow:hidden; border-radius:16px;
  background:linear-gradient(180deg,#151515,#0f0f0f);
  border:1px solid var(--border); box-shadow:0 10px 22px rgba(0,0,0,.35);
  transition:transform .12s ease, box-shadow .12s ease;
}
.card.product:hover{ transform:translateY(-2px); box-shadow:0 14px 26px rgba(0,0,0,.45) }

.card.product .img-wrap{ position:relative }
.card.product img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block }

/* gradiente e título sobre a imagem */
.card.product .img-grad{
  position:absolute; left:0; right:0; bottom:0; height:52%;
  background:linear-gradient(0deg, rgba(0,0,0,.68), rgba(0,0,0,0));
  pointer-events:none;
}
.card.product .title{
  position:absolute; left:10px; right:10px; bottom:10px; margin:0;
  font-weight:800; font-size:clamp(14px,2.6vw,18px); color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}

/* badge de preço + botão "i" */
.price-badge{
  position:absolute; top:10px; right:10px;
  background:#000a; color:#fff; border:1px solid #2a2a2a;
  padding:6px 10px; border-radius:12px; font-weight:800;
  backdrop-filter:saturate(1.1) blur(2px);
}
.btnInfo{
  position:absolute; top:10px; left:10px; display:grid; place-items:center;
  width:32px; height:32px; border-radius:50%;
  border:1px solid #2a2a2a; background:#171717; color:#fff; font-weight:800; cursor:pointer;
}
.btnInfo:hover{ background:#1f1f1f }

/* base inferior do card */
.card-actions{ display:flex; align-items:center; gap:10px; padding:10px }
.card-actions .cat{ color:var(--muted); font-size:12px; flex:1 }
.card.product .btnAdd{
  margin-left:auto; background:var(--accent); color:#000; border:none;
  padding:10px 12px; border-radius:12px; font-weight:800; cursor:pointer;
  box-shadow:0 6px 16px rgba(255,122,0,.25); transition:.15s; min-height:44px;
}
.card.product .btnAdd:hover{ background:var(--accent-2); box-shadow:0 8px 18px rgba(255,122,0,.35) }

/* =============== BOTÕES / UTILITÁRIOS =============== */
.pedido{ display:flex; justify-content:center; gap:10px; margin:22px 0 }
.pedido button{
  background:var(--accent); color:#000; border:none; padding:12px 16px;
  border-radius:12px; cursor:pointer; font-weight:700; min-height:44px;
}
.pedido button:hover{ background:var(--accent-2) }

.btn{ background:var(--accent); color:#000; border:none; border-radius:12px; padding:10px 14px; font-weight:800; cursor:pointer; min-height:44px }
.btn:hover{ background:var(--accent-2) }
.btn-ghost{
  background:#171717; color:#fff; border:1px solid var(--border);
  padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:700; min-height:44px;
}
.btn-ghost:hover{ background:#202020 }

.input{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--border);
  background:#0f0f0f; color:#fff; outline:none;
}

/* utilitários do JS */
.row{ display:flex; gap:10px; align-items:center }
.row.between{ justify-content:space-between }
.row.end{ justify-content:flex-end }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.grid3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px }
.list{ list-style:none; margin:0; padding:0 }
.list.flat > li{
  display:flex; justify-content:space-between; gap:12px; padding:8px 0;
  border-bottom:1px solid #151515; font-size:14px;
}
.list.flat > li:last-child{ border-bottom:none }
.muted{ color:var(--muted) }
.err{ color:#ff8a8a }

/* itens de “Meus pedidos” */
.item{ padding:10px; border-bottom:1px solid #1b1b1b; cursor:pointer; transition:background .2s ease }
.item:hover{ background:#121212 }
.status-badge{
  padding:6px 10px; border-radius:999px; background:#222;
  color:#fff; font-weight:700; display:inline-block;
}

/* =============== MODAIS =============== */
.no-scroll{ overflow:hidden !important; height:100% !important }

.modal{
  position:fixed; inset:0; background:#0008; display:none;
  align-items:center; justify-content:center; padding:16px; z-index:60;
}
.modal-content{
  width:min(560px,100%);
  max-height:88vh; /* desktop */
  background:linear-gradient(180deg,#141414,#101010);
  border:1px solid var(--border); border-radius:16px; padding:16px; box-shadow:var(--shadow);
  overflow:auto; -webkit-overflow-scrolling:touch;
}
.modal-content::-webkit-scrollbar{ width:8px }
.modal-content::-webkit-scrollbar-thumb{ background:#2a2a2a; border-radius:8px }
.modal-content h3{ margin:0 0 10px }
.modal-buttons{ display:flex; gap:10px; justify-content:flex-end }
.modal-buttons .btn, .modal-buttons button{
  background:var(--accent); color:#000; border:none; padding:10px 12px;
  border-radius:10px; cursor:pointer; font-weight:700;
}
.modal-buttons .btn:hover, .modal-buttons button:hover{ background:var(--accent-2) }

/* Sacola */
#itensSacola{ list-style:none; margin:0; padding:0 }
#itensSacola li{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 0; border-bottom:1px solid #1b1b1b;
}
#itensSacola li b{ color:var(--accent) }
#itensSacola button{
  background:#1b1b1b; color:#f66; border:1px solid var(--border);
  padding:6px 10px; border-radius:8px; cursor:pointer;
}
#itensSacola button:hover{ background:#2a2a2a }

/* =============== WHATSAPP FLOAT =============== */
.whats-float{
  position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:70;
  display:inline-flex; flex-direction:column; align-items:center; gap:6px;
  background:#1a1a1a; border:1px solid var(--border); color:#fff;
  padding:10px 14px; border-radius:16px; text-decoration:none; font-weight:800;
  box-shadow:0 10px 24px rgba(0,0,0,.35); transition:.12s;
}
.whats-float:hover{ background:#212121; transform:translateY(-1px) }
.whats-float .wa-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#2ff085,#25D366);
  box-shadow:0 4px 10px rgba(37,211,102,.35);
}
.whats-float .wa-ico svg{ width:22px; height:22px; filter:drop-shadow(0 1px 0 rgba(0,0,0,.25)) }
.whats-float .wa-text{ font-size:14px; line-height:1.1; text-align:center }
.whats-float .wa-text b{ color:var(--accent) }

/* =============== ANIMAÇÕES / FEEDBACK =============== */
@keyframes blink {
  0% { box-shadow:0 0 0 0 rgba(255,159,46,0); background:transparent; }
  20%{ box-shadow:0 0 0 6px rgba(255,159,46,.18); background:rgba(255,159,46,.08) }
  60%{ box-shadow:0 0 0 0 rgba(255,159,46,0); background:transparent }
  100%{ background:transparent }
}
.blink-once{ animation:blink 1.2s ease-out 1; border-radius:10px }

#btnMeusPedidos{ position:relative }
#btnMeusPedidos.has-news::after{
  content:""; position:absolute; top:-4px; right:-4px; width:10px; height:10px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 0 rgba(255,159,46,.7); animation:ping 1.2s infinite;
}
@keyframes ping{
  0%{ box-shadow:0 0 0 0 rgba(255,159,46,.7); transform:scale(1) }
  70%{ box-shadow:0 0 0 12px rgba(255,159,46,0); transform:scale(1.06) }
  100%{ box-shadow:0 0 0 0 rgba(255,159,46,0); transform:scale(1) }
}
.cta-blink{ animation:btnblink .9s ease-in-out infinite }
@keyframes btnblink{ 0%,100%{ filter:none } 50%{ filter:brightness(1.28) saturate(1.1) } }

/* =============== CHECKOUT (compatível com JS injetado) =============== */
.checkout-modal{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.55); z-index:65; padding:16px;
}
.checkout-card{
  width:min(720px,100%); max-height:88vh; overflow:auto;
  background:#101010; border:1px solid #1d1d1d; border-radius:16px;
  box-shadow:0 18px 48px rgba(0,0,0,.45);
  -webkit-overflow-scrolling:touch;
}
.checkout-header{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 16px; border-bottom:1px solid #1b1b1b;
}
.checkout-header h3{ margin:0; font-size:18px }
.ck-section{ padding:14px 16px }
.ck-title{ margin:0 0 8px; font-size:14px; color:var(--muted) }
.ck-resumo{ list-style:none; margin:0; padding:0 }
.ck-resumo li{
  display:flex; justify-content:space-between; gap:12px; padding:8px 0;
  border-bottom:1px solid #151515; font-size:14px;
}
.ck-resumo li:last-child{ border-bottom:none }
.segmented{ display:flex; gap:8px }
.seg{ position:relative }
.seg input{ position:absolute; inset:0; opacity:0; cursor:pointer }
.seg span{
  display:inline-block; padding:8px 12px; border-radius:999px; border:1px solid var(--border);
  background:#151515; user-select:none; min-height:44px;
}
.seg input:checked + span{ background:var(--accent); color:#000; border-color:transparent }
.ck-grid{ display:grid; gap:10px; grid-template-columns:1fr }
.field{ display:flex; flex-direction:column; gap:6px }
.field--small input{ max-width:110px }
.field label{ font-size:12px; color:var(--muted) }
.field input, .field select, textarea#obsHome{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--border);
  background:#0f0f0f; color:#fff; outline:none;
}
textarea#obsHome{ resize:vertical; min-height:72px }
.checkout-footer{
  position:sticky; bottom:0; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 16px; border-top:1px solid #1b1b1b; background:linear-gradient(180deg,#111,#0d0d0d);
}
.ck-total span{ color:var(--muted); font-size:12px }
.ck-total strong{ display:block; font-size:18px }

/* =============== RESPONSIVO =============== */
@media (max-width:480px){
  html{ font-size:15px }
  .container{ padding:10px }
  .hero-owned .hero-bar{ padding:14px 12px }
  .brand-logo-xl{ width:52px; height:52px; border-radius:14px }
  .brand-title{ font-size:22px }
  .brand-sub{ font-size:12.5px }

  .cards{ gap:12px; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) }
  .card.product{ border-radius:14px }
  .card.product img{ aspect-ratio:1/1 }
  .card-actions{ padding:8px }
  .card.product .btnAdd{ padding:9px 10px; font-size:14px }

  .pedido{ margin:16px 0; gap:8px }
  .pedido button{ padding:10px 12px; border-radius:10px; font-size:14px }

  .modal-content{ width:92%; padding:12px; border-radius:12px; max-height:92dvh } /* 100dvh iOS-friendly */
  .checkout-card{ max-height:92dvh }
}

@media (min-width:560px){
  .ck-grid{ grid-template-columns: 1fr 1fr }
  .field--small{ align-self:end }
}
/* ===== Endereço (Entrega): proporções melhores + responsivo ===== */
#ckEnderecoBox .grid3{
  /* Desktop/tablet: Rua (2fr) | Nº (1fr) | Bairro (2fr) */
  grid-template-columns: minmax(220px, 2fr) minmax(120px, 1fr) minmax(220px, 2fr);
  gap: 12px;
}

/* conforto de toque e leitura */
#ckEnderecoBox .input{
  min-height: 46px;
  font-size: 16px; /* evita zoom no iOS ao focar */
}

/* Mobile: empilha os três campos (100% largura) */
@media (max-width: 680px){
  #ckEnderecoBox .grid3{
    grid-template-columns: 1fr;
  }
}
/* Evitar sobreposição do botão flutuante com o modal de checkout */
body.checkout-open .whats-float{
  /* Coloca o flutuante atrás do modal (modal usa z-index ~60) */
  z-index: 40;
  pointer-events: none; /* segurança extra: não clica por cima */
}

/* Em telas pequenas, simplesmente some com o flutuante durante o checkout */
@media (max-width: 680px){
  body.checkout-open .whats-float{
    display: none;
  }
}