<?php
$produtos = [];
$json = __DIR__ . '/produtos.json';
if (file_exists($json)) {
    $dados = json_decode(file_get_contents($json), true);
    if (is_array($dados)) $produtos = $dados;
}

$categorias = [];
$categoriasJson = __DIR__ . '/categorias.json';
if (file_exists($categoriasJson)) {
    $dadosCategorias = json_decode(file_get_contents($categoriasJson), true);
    if (is_array($dadosCategorias)) $categorias = $dadosCategorias;
}

function e($valor) {
    return htmlspecialchars((string)$valor, ENT_QUOTES, 'UTF-8');
}

function dinheiro($valor) {
    if ($valor === '' || $valor === null) return '';
    return 'R$ ' . number_format((float)$valor, 2, ',', '.');
}

function imagem_produto($produto) {
    $foto = $produto['foto'] ?? '';
    if ($foto === '' || preg_match('/^https?:\/\//', $foto)) return $foto;
    $id = $produto['original_id'] ?? $produto['id'] ?? '';
    if ($id !== '') {
        return 'image.php?id=' . rawurlencode((string)$id) . '&fallback=' . rawurlencode($foto) . '&v=4';
    }
    return $foto;
}

function slug($valor) {
    $valor = iconv('UTF-8', 'ASCII//TRANSLIT', $valor);
    $valor = strtolower(preg_replace('/[^a-z0-9]+/i', '-', $valor));
    return trim($valor, '-');
}

if (!$categorias) {
    $vistos = [];
    foreach ($produtos as $produto) {
        $slugCategoria = $produto['categoria_slug'] ?? slug($produto['categoria'] ?? '');
        if (!$slugCategoria || isset($vistos[$slugCategoria])) continue;
        $vistos[$slugCategoria] = true;
        $categorias[] = [
            'nome' => $produto['categoria'] ?? $slugCategoria,
            'slug' => $slugCategoria,
            'icone' => $produto['categoria_icone'] ?? $produto['foto'] ?? ''
        ];
    }
}

$produtoAtual = null;
if (isset($_GET['produto'])) {
    foreach ($produtos as $p) {
        if (($p['id'] ?? '') === $_GET['produto']) {
            $produtoAtual = $p;
            break;
        }
    }
}

$categoriaAtual = $_GET['categoria'] ?? '';
$categoriaAtualDados = null;
foreach ($categorias as $cat) {
    if (($cat['slug'] ?? '') === $categoriaAtual || ($cat['nome'] ?? '') === $categoriaAtual) {
        $categoriaAtualDados = $cat;
        $categoriaAtual = $cat['slug'];
        break;
    }
}
$modoProduto = $produtoAtual !== null;
$modoCategoria = $categoriaAtual !== '' && !$modoProduto;
?>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>ZE Express | Bebidas geladas</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
  <style>
    :root{
      --black:#191919;
      --yellow:#ffc21a;
      --yellow-dk:#f5a900;
      --orange:#e97800;
      --bg:#f5f6f8;
      --line:#e8ebf0;
      --text:#111827;
      --muted:#98a1b2;
      --white:#fff;
      --shadow:0 2px 12px rgba(15,23,42,.08);
    }
    *{box-sizing:border-box;margin:0;padding:0}
    body{font-family:Inter,Arial,sans-serif;background:var(--bg);color:var(--text)}
    a{color:inherit;text-decoration:none}
    button,input,textarea{font:inherit}
    .hidden{display:none!important}
    .app{max-width:643px;margin:0 auto;background:#fff;min-height:100svh;overflow-x:hidden;overflow-y:visible;padding-top:var(--topbar-height,174px)}
    .topbar{background:var(--black);color:#fff;padding:14px 16px 18px;position:fixed;top:0;left:50%;width:min(643px,100%);transform:translateX(-50%);z-index:120;box-shadow:0 8px 26px rgba(0,0,0,.18)}
    .top-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}
    .place{display:flex;align-items:center;gap:14px;min-width:0;cursor:pointer;color:inherit;text-align:left;position:relative}
    .pin{width:54px;height:54px;border-radius:50%;background:var(--yellow);display:grid;place-items:center;flex:0 0 54px}
    .pin svg{width:28px;height:28px;stroke:#111}
    .place-label{font-size:18px;color:#9ca3af;line-height:1.05}
    .place-city{display:flex;align-items:center;gap:12px;font-size:22px;font-weight:700;line-height:1.2;max-width:260px}
    .place-city span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .place.open .place-city svg{transform:rotate(180deg)}
    .address-pop{position:absolute;left:0;top:calc(100% + 12px);width:320px;background:#fff;color:#111827;border-radius:12px;box-shadow:0 14px 36px rgba(15,23,42,.22);padding:18px;z-index:80}
    .address-title{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:800;margin-bottom:14px}
    .address-title svg{width:18px;height:18px;stroke:#f59e0b}
    .address-field{margin-bottom:10px}
    .address-field label{display:block;font-size:12px;font-weight:800;color:#6b7280;margin-bottom:4px}
    .address-field input{width:100%;height:42px;border:1px solid #d8dee8;border-radius:9px;padding:0 11px;outline:0;color:#111827;background:#fff}
    .address-field input:focus{border-color:var(--yellow-dk)}
    .address-grid{display:grid;grid-template-columns:95px 1fr;gap:9px}
    .address-actions{display:flex;gap:8px;margin-top:12px}
    .address-actions button{height:42px;border-radius:9px;border:0;font-weight:900;cursor:pointer}
    .address-save{flex:1;background:var(--yellow);color:#111827}
    .address-use-gps{width:48px;background:#f3f4f6;color:#111827}
    .address-hint{font-size:12px;color:#6b7280;line-height:1.35;margin-top:8px}
    .delivery{display:flex;align-items:center;gap:5px;font-size:16px;font-weight:600;white-space:nowrap}
    .delivery svg{width:17px;height:17px;stroke:var(--yellow)}
    .delivery strong{color:var(--yellow);font-weight:800}
    .search{height:72px;background:#fff;border-radius:16px;display:flex;align-items:center;gap:16px;padding:0 24px;color:#9ca3af;border:3px solid transparent}
    .search:focus-within{border-color:var(--yellow)}
    .search svg{width:31px;height:31px;stroke:#99a1af;flex:0 0 auto}
    .search input{border:0;outline:0;width:100%;font-size:25px;color:#111827;background:transparent}
    .search input::placeholder{color:#9ca3af}
    .search-wrap{position:relative}
    .search-clear{width:32px;height:32px;border:0;background:transparent;color:#9ca3af;font-size:34px;line-height:1;cursor:pointer;display:none;align-items:center;justify-content:center}
    .search-clear.visible{display:flex}
    .search-results{position:absolute;left:-2px;right:-2px;top:calc(100% + 8px);background:#fff;border-radius:14px;box-shadow:0 14px 36px rgba(15,23,42,.18);padding:12px 0;z-index:60;max-height:320px;overflow-y:auto}
    .search-result{display:grid;grid-template-columns:50px 1fr auto;gap:12px;align-items:center;width:100%;border:0;background:#fff;text-align:left;padding:9px 18px;cursor:pointer}
    .search-result:hover{background:#f8fafc}
    .search-result img{width:48px;height:48px;border:3px solid #f0f1f4;border-radius:4px;object-fit:contain;background:#fff}
    .search-name{font-size:16px;font-weight:700;color:#111827;line-height:1.2;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .search-cat{font-size:13px;color:#6b7280;margin-top:2px}
    .search-price{font-size:15px;font-weight:900;color:#df7100;white-space:nowrap}
    .search-empty{padding:14px 18px;color:#6b7280;font-weight:600}
    .hero{height:329px;background:url('assets/ze-banner.jpg') center/cover no-repeat}
    .category-shell{background:#fff;border-radius:32px 32px 0 0;margin-top:-30px;padding:30px 10px 24px;position:relative;z-index:3}
    .category-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:22px 14px}
    .cat-link{text-align:center;font-size:16px;color:#1f2937;line-height:1.2}
    .cat-img{width:66px;height:58px;margin:0 auto 8px;border-radius:50%;object-fit:contain;background:#f7f7f7}
    .content{background:#fff;padding:18px 0 64px}
    .section{padding:0 0 34px}
    .section-head{display:flex;align-items:center;justify-content:space-between;padding:0 18px;margin-bottom:18px}
    .section-title{font-size:25px;font-weight:900;letter-spacing:0}
    .more{font-size:17px;color:#ed8a00;font-weight:700;white-space:nowrap}
    .rail{display:flex;gap:12px;overflow-x:auto;padding:0 18px 14px;scroll-snap-type:x mandatory;scrollbar-width:none}
    .rail::-webkit-scrollbar{display:none}
    .promo-banner{display:flex;justify-content:center;padding:0 0 34px;background:#fff;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
    .promo-banner img{display:block;width:min(100vw,643px);height:auto;border-radius:0}
    .product-card{width:204px;min-height:430px;flex:0 0 204px;background:#fff;border:0;border-radius:16px;padding:12px;box-shadow:none;scroll-snap-align:start;display:flex;flex-direction:column}
    .product-card a{display:flex;flex-direction:column;flex:1 1 auto}
    .product-img-wrap{position:relative;height:150px;background:#fff;border-radius:13px;display:flex;align-items:center;justify-content:center;overflow:hidden}
    .product-img{width:86%;height:86%;object-fit:contain}
    .discount{position:absolute;top:7px;left:7px;display:inline-flex;align-items:center;gap:5px;background:#e22626;color:#fff;border-radius:16px;padding:7px 10px;font-size:13px;font-weight:900;box-shadow:0 7px 16px rgba(226,38,38,.22)}
    .product-name{font-size:16px;line-height:1.15;font-weight:900;min-height:38px;margin:12px 0 4px;color:#111827}
    .product-desc{font-size:13px;line-height:1.25;color:#6b7280;margin-bottom:8px;min-height:17px}
    .old-price{display:inline-block;font-size:12px;color:#6b7280;text-decoration:line-through;background:#f0f0f0;border-radius:7px;padding:5px 8px;margin-bottom:9px}
    .price-label{font-size:14px;font-weight:800;color:var(--orange);margin-top:auto;margin-bottom:2px}
    .price{font-size:26px;line-height:1;font-weight:900;color:var(--orange);margin-bottom:12px;letter-spacing:0}
    .plus-btn{width:100%;min-height:62px;border:0;border-radius:999px;background:linear-gradient(180deg,#FFD400 0%,#F5B800 100%);color:#050505;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;margin:0;padding:0 14px;box-shadow:0 10px 18px rgba(245,184,0,.26);font-size:18px;font-weight:900;line-height:1;white-space:nowrap;transition:transform .16s ease,box-shadow .16s ease,filter .16s ease}
    .plus-btn:hover{transform:translateY(-2px);filter:brightness(1.04);box-shadow:0 14px 24px rgba(245,184,0,.34)}
    .plus-btn:active{transform:scale(.98);box-shadow:0 7px 14px rgba(245,184,0,.25)}
    .cart-icon{width:26px;height:26px;fill:none;stroke:#050505;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:0 0 26px}
    .cart-icon circle{fill:#050505;stroke:none}
    .plus-text{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis}
    .see-all-card{width:170px;flex:0 0 170px;min-height:265px;border:0;border-radius:16px;background:linear-gradient(180deg,var(--yellow),#f2a208);color:#fff;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;box-shadow:0 8px 20px rgba(244,165,0,.24);font-weight:800}
    .see-all-icon{width:49px;height:49px;border-radius:50%;background:#fff;color:#f0a000;display:grid;place-items:center;font-size:29px;font-weight:400}
    .see-all-card small{font-size:14px;font-weight:500}
    .footer{background:#191919;color:#f5f5f5;text-align:center;padding:31px 24px 43px;font-size:19px;line-height:1.35}
    .footer strong{display:block;font-weight:800;margin-bottom:5px}
    .footer p{color:#d1d5db;margin:0;font-weight:400}
    .socials{display:flex;justify-content:center;gap:18px;margin-top:22px}
    .socials span{width:60px;height:60px;border-radius:50%;background:#ffc21c;color:#151515;display:grid;place-items:center}
    .socials svg{width:31px;height:31px;display:block;fill:currentColor}
    .socials .youtube-icon{width:34px;height:34px}
    .crumbs{background:#fff;padding:20px 20px 10px;color:#6b7280;font-size:22px;display:flex;align-items:center;gap:13px;overflow:hidden}
    .crumbs span:last-child{color:#111827;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .back-link{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;margin:8px 20px 18px;padding:0;border:0;border-radius:0;background:transparent;color:#6b7280;font-size:0;box-shadow:none;cursor:pointer}
    .back-link .back-arrow{font-size:32px;line-height:1;font-weight:400;color:#6b7280}
    .product-page{background:#fff;border-top:1px solid #dfe3ea;padding:25px 20px 130px}
    .detail-img-box{position:relative;background:#fff;border-radius:20px;padding:18px;box-shadow:0 1px 4px rgba(15,23,42,.06);overflow:hidden}
    .detail-img{width:100%;aspect-ratio:1/1;object-fit:contain;display:block}
    .detail-title{font-size:30px;line-height:1.18;font-weight:900;margin:26px 0 24px}
    .detail-price{display:flex;align-items:flex-end;gap:10px;margin-bottom:26px}
    .detail-price .old-price{font-size:22px;height:auto}
    .detail-price .price{font-size:40px;color:#111827;margin:0}
    .specs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:28px}
    .spec-label{font-size:16px;color:#9ca3af;margin-bottom:5px}
    .spec-value{font-size:20px;font-weight:800;color:#374151}
    .description{font-size:22px;color:#4b5563;line-height:1.4;margin-bottom:34px}
    .qty{display:flex;align-items:center;justify-content:center;gap:38px;margin-bottom:24px}
    .qty button{width:60px;height:40px;border:1px solid #cfd6df;border-radius:9px;background:#f8fafc;font-size:28px;color:#111827;cursor:pointer}
    .qty strong{font-size:28px;min-width:38px;text-align:center}
    .quick-add{display:flex;justify-content:center;gap:8px;margin-bottom:16px}
    .quick-add button{height:38px;padding:0 19px;border-radius:8px;border:1px solid #cfd6df;background:#f8fafc;font-weight:700;color:#1f2937}
    .add-detail{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);width:min(615px,calc(100% - 28px));height:56px;border:0;border-radius:10px;background:var(--yellow);display:flex;align-items:center;justify-content:space-between;padding:0 24px;font-size:17px;font-weight:900;z-index:35;cursor:pointer}
    .category-page{padding:26px 20px 80px;background:#fff}
    .category-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
    .category-list .product-card{width:auto;min-width:0}
    .checkout{background:#f4f6f8;padding:24px 16px 110px}
    .checkout-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:14px;box-shadow:var(--shadow)}
    .checkout-step-actions{display:flex;gap:10px;margin-top:18px}
    .checkout-step-actions .confirm-btn{flex:1}
    .step-back-btn{flex:0 0 118px;height:54px;border:1px solid #d7deea;border-radius:10px;background:#fff;color:#111827;font-size:16px;font-weight:900;cursor:pointer}
    .checkout-step .step-badge{background:var(--yellow);color:#111827}
    .checkout-step .step-title{color:#111827}
    .checkout-title{font-size:22px;line-height:1.1;font-weight:900;color:#111827;text-transform:none;margin-bottom:14px}
    .checkout-progress{position:relative;display:flex;align-items:center;justify-content:space-between;width:min(330px,100%);margin:2px auto 18px;padding:0 4px}
    .checkout-progress:before{content:"";position:absolute;left:20px;right:20px;top:50%;height:4px;background:#dedede;transform:translateY(-50%);z-index:0}
    .progress-dot{position:relative;z-index:1;width:40px;height:40px;border-radius:50%;border:0;background:#dedede;color:#8b9098;display:grid;place-items:center;font-size:19px;font-weight:800}
    .progress-dot.active{background:var(--yellow);border:0;color:#111827}
    .progress-dot.done{background:#dedede;color:#8b9098}
    .checkout-suggest{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;margin:0 0 14px;box-shadow:var(--shadow);overflow:hidden}
    .checkout-suggest-head{font-size:22px;line-height:1.1;font-weight:900;color:#111827;margin-bottom:14px}
    .checkout-suggest-rail{display:flex;gap:14px;overflow-x:auto;padding:0 2px 4px;scrollbar-width:none}
    .checkout-suggest-rail::-webkit-scrollbar{display:none}
    .suggest-card{width:142px;flex:0 0 142px;position:relative}
    .suggest-img-wrap{height:104px;border-radius:14px;overflow:hidden;background:#f4f6f8;position:relative;margin-bottom:9px}
    .suggest-img-wrap img{width:100%;height:100%;object-fit:contain;background:#fff;display:block}
    .suggest-add{position:absolute;right:8px;bottom:8px;width:42px;height:42px;border:0;border-radius:50%;background:var(--yellow);color:#111827;box-shadow:0 8px 22px rgba(245,184,0,.28);font-size:30px;line-height:42px;font-weight:900;cursor:pointer}
    .suggest-price{font-size:18px;line-height:22px;font-weight:900;color:#111827;margin-bottom:3px}
    .suggest-name{font-size:14px;line-height:18px;font-weight:700;color:#6b7280;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    .suggest-empty{font-size:14px;color:#6b7280;font-weight:700;padding:4px 0}
    .step-head{display:block;text-align:center;margin-bottom:18px}
    .step-left{display:block;min-width:0}
    .step-badge{display:none}
    .step-title{font-size:18px;line-height:1.05;font-weight:900;color:#9ca3af}
    .step-sub{font-size:18px;line-height:1.25;color:#111827;margin-top:6px}
    .step-count{font-size:20px;font-weight:800;color:#111827;white-space:nowrap;margin-top:3px}
    .payment-card{position:relative;border:2px solid #1b8f10;border-radius:12px;padding:28px 22px 24px;margin-top:12px}
    .payment-discount{position:absolute;right:10px;top:-16px;background:#27a853;color:#fff;border-radius:7px;padding:5px 14px;font-size:14px;font-weight:900;letter-spacing:1.3px}
    .payment-row{display:grid;grid-template-columns:34px 58px 1fr;gap:14px;align-items:center}
    .pix-radio{width:26px;height:26px;border:2px solid #198a0f;border-radius:50%;display:grid;place-items:center}
    .pix-radio:after{content:"";width:14px;height:14px;border-radius:50%;background:#20a51a}
    .pix-logo{width:42px;height:42px;border-radius:0;background:transparent;display:grid;place-items:center;padding:0}
    .pix-logo img{width:100%;height:100%;display:block;object-fit:contain;filter:grayscale(1) brightness(.62) contrast(1.05)}
    .payment-name{font-size:25px;font-weight:900;color:#111827}
    .payment-ok{font-size:18px;font-weight:800;color:#16a34a;margin-top:4px}
    .payment-note{font-size:19px;line-height:1.25;color:#64748b;margin:22px 0 0 74px}
    .pix-total{font-size:19px;font-weight:900;color:#64748b;margin:22px 0}
    .payment-card .confirm-btn{background:#198a0f;color:#fff;height:64px;font-size:20px;border-radius:10px}
    .checkout-summary-item{display:grid;grid-template-columns:78px minmax(0,1fr) 114px;gap:14px;align-items:center;padding:12px;background:#f7f7f8;border-radius:18px;margin-bottom:10px;border:0}
    .checkout-summary-item:last-child{margin-bottom:0}
    .summary-img{width:72px;height:72px;border:0;border-radius:12px;object-fit:contain;background:#fff}
    .summary-main{min-width:0}
    .summary-name{font-size:17px;line-height:1.22;font-weight:700;color:#111827;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .summary-desc{font-size:15px;line-height:20px;color:#111827;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .summary-meta{display:flex;align-items:baseline;gap:8px;margin-top:7px;min-width:0;line-height:20px}
    .summary-price{font-size:15px;line-height:20px;font-weight:800;color:var(--orange);white-space:nowrap}
    .summary-qty{display:grid;grid-template-columns:34px 40px 34px;align-items:center;width:108px;height:38px;border:0;border-radius:0;overflow:visible;margin:0;background:transparent;gap:6px}
    .summary-qty button{width:34px;height:34px;border:0;border-radius:50%;background:#eceeef;font-size:20px;color:#6b7280;cursor:pointer;font-weight:800;line-height:1}
    .summary-qty button:last-child{background:var(--yellow);color:#111827}
    .summary-qty span{text-align:center;height:38px;border-radius:10px;background:#fff;font-size:17px;line-height:38px;font-weight:800;color:#111827;box-shadow:0 2px 10px rgba(15,23,42,.06)}
    .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
    .form-grid2{display:grid;grid-template-columns:105px 1fr;gap:10px}
    .form-lbl{display:block;font-size:13px;font-weight:800;color:#6b7280;margin:8px 0 5px}
    .form-inp{width:100%;height:44px;border:1px solid #cfd6df;border-radius:9px;padding:0 12px;outline:0;background:#fff}
    .form-inp::placeholder{color:#b8bec9}
    .form-inp:focus{border-color:var(--yellow-dk)}
    .delivery-estimate{display:flex;gap:12px;align-items:flex-start;margin-top:14px;padding:14px;border-radius:14px;background:#fff8e1;border:1px solid #ffe08a;color:#111827;box-shadow:0 8px 22px rgba(245,158,11,.12)}
    .delivery-estimate-icon{flex:0 0 42px;width:42px;height:42px;border-radius:13px;background:var(--yellow);display:grid;place-items:center;color:#111827}
    .delivery-estimate-icon svg{width:23px;height:23px;stroke:currentColor;stroke-width:2.4;fill:none}
    .delivery-estimate-body{min-width:0;flex:1}
    .delivery-estimate-kicker{font-size:12px;line-height:15px;font-weight:900;color:#9ca3af;text-transform:uppercase;letter-spacing:.03em;margin-bottom:2px}
    .delivery-estimate-time{font-size:20px;line-height:25px;font-weight:900;color:#111827;margin-bottom:3px;letter-spacing:0}
    .delivery-estimate-store{font-size:13px;line-height:18px;font-weight:700;color:#6b7280}
    .confirm-btn,.pix-copy-btn{width:100%;height:54px;border:0;border-radius:10px;background:var(--yellow);color:#111827;font-size:16px;font-weight:900;cursor:pointer}
    .cart-bar{position:fixed;left:0;right:0;bottom:0;padding:10px 14px;background:#fff;box-shadow:0 -2px 18px rgba(15,23,42,.12);z-index:32}
    .cart-bar-inner{max-width:615px;margin:0 auto}
    .cart-btn{width:100%;height:58px;border:0;border-radius:13px;background:var(--yellow);display:flex;align-items:center;justify-content:space-between;padding:0 20px;font-size:17px;font-weight:800;color:#111;cursor:pointer;letter-spacing:0}
    .cart-count-text{white-space:nowrap}
    .pix-screen{min-height:70svh;display:grid;place-items:center;text-align:center;background:#f4f6f8;padding:30px 18px}
    .pix-box{background:#fff;border-radius:18px;padding:22px;max-width:360px;width:100%;box-shadow:var(--shadow)}
    .pix-spinner{width:42px;height:42px;margin:0 auto 14px;border:4px solid #e5e7eb;border-top-color:var(--yellow-dk);border-radius:50%;animation:spin .8s linear infinite}
    @keyframes spin{to{transform:rotate(360deg)}}
    .pix-brand{width:74px;height:74px;margin:0 auto 14px;border-radius:0;background:transparent;padding:0;box-shadow:none}
    .pix-brand img{width:100%;height:100%;display:block;object-fit:contain}
    .qr-box{position:relative;margin:18px auto;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;width:220px;min-height:220px;display:grid;place-items:center}
    #img-qrcode{width:196px;height:196px}
    .qr-pix-logo{display:none!important}
    .qr-pix-logo img{width:100%;height:100%;display:block;object-fit:contain}
    .pix-code{width:100%;height:70px;border:1px solid #cfd6df;border-radius:8px;padding:8px;font-size:10px;resize:none}
    @media(max-width:520px){
      .app{max-width:none;padding-top:var(--topbar-height,136px)}
      .topbar{padding:10px 10px 12px}
      .pin{width:38px;height:38px;flex-basis:38px}
      .pin svg{width:21px;height:21px}
      .place-label{font-size:16px}
      .place-city{font-size:16px;gap:6px;max-width:150px}
      .delivery{font-size:11px}
      .search{height:48px;border-radius:11px;padding:0 15px;gap:10px}
      .search svg{width:22px;height:22px}
      .search input{font-size:17px}
      .search-results{top:calc(100% + 7px);max-height:318px}
      .search-result{grid-template-columns:50px 1fr auto;padding:8px 16px}
      .search-name{font-size:15px}
      .search-price{font-size:14px}
      .hero{height:190px}
      .category-shell{border-radius:24px 24px 0 0;padding:22px 8px 18px}
      .category-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px 6px;overflow:visible}
      .address-pop{width:min(320px,calc(100vw - 20px));left:-48px}
      .cat-link{width:auto;min-width:0;font-size:13px}
      .cat-img{width:50px;height:45px}
      .section{padding-bottom:28px}
      .section-head{padding:0 14px;margin-bottom:16px}
      .section-title{font-size:23px}
      .more{font-size:15px}
      .rail{gap:10px;padding:0 14px 12px}
      .promo-banner{padding:0 14px 28px}
      .product-card{width:166px;min-height:360px;flex-basis:166px;padding:10px;border-radius:14px}
      .product-img-wrap{height:118px;border-radius:11px}
      .product-img{width:82%;height:82%}
      .product-name{font-size:14px;min-height:34px;margin-top:10px}
      .product-desc{font-size:12px;margin-bottom:7px}
      .old-price{font-size:11px;padding:4px 7px;margin-bottom:7px}
      .price-label{font-size:12px;margin-top:auto}
      .price{font-size:22px;margin-bottom:10px}
      .plus-btn{width:100%;min-height:54px;margin:0;border-radius:999px;padding:0 9px;gap:6px;font-size:16px}
      .cart-icon{width:21px;height:21px;flex-basis:21px}
      .footer{font-size:16px;padding:28px 18px 38px}
      .socials{gap:14px}
      .socials span{width:56px;height:56px}
      .category-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;overflow:visible;margin-left:0;margin-right:0;padding:0 0 12px}
      .category-list .product-card{width:auto;min-width:0;flex:initial}
      .checkout-summary-item{grid-template-columns:66px minmax(0,1fr) 102px;gap:10px;padding:10px;border-radius:16px}
      .summary-img{width:60px;height:60px}
      .summary-name{font-size:15px}
      .summary-desc{font-size:13px;line-height:18px;margin-top:0}
      .summary-meta{align-items:baseline;gap:6px;margin-top:5px;line-height:18px}
      .summary-price{font-size:13px;line-height:18px}
      .summary-qty{grid-template-columns:30px 34px 30px;width:100px;height:34px;gap:5px}
      .summary-qty button{width:30px;height:30px;font-size:18px}
      .summary-qty span{height:34px;line-height:34px;font-size:15px}
      .checkout-progress{width:min(260px,100%);margin:2px auto 16px}
      .checkout-progress:before{left:17px;right:17px;height:3px}
      .progress-dot{width:34px;height:34px;font-size:16px}
      .progress-dot.active{border-width:0}
      .checkout-suggest{padding:14px;margin-bottom:14px}
      .checkout-title,.checkout-suggest-head{font-size:20px;margin-bottom:12px}
      .checkout-suggest-rail{gap:12px}
      .suggest-card{width:126px;flex-basis:126px}
      .suggest-img-wrap{height:94px;border-radius:13px}
      .suggest-add{width:38px;height:38px;line-height:38px;font-size:28px}
      .suggest-price{font-size:17px}
      .suggest-name{font-size:13px;line-height:17px}
      .step-head{text-align:center}
      .checkout-step-actions{gap:8px}
      .step-back-btn{flex-basis:96px;height:50px}
      .step-badge{width:22px;height:22px;flex-basis:22px;font-size:11px}
      .step-title{font-size:16px}
      .step-sub{font-size:17px}
      .step-count{font-size:18px}
      .payment-card{padding:26px 16px 18px}
      .payment-row{grid-template-columns:28px 50px 1fr;gap:12px}
      .pix-logo{width:38px;height:38px;font-size:22px}
      .payment-name{font-size:23px}
      .payment-note{margin-left:62px;font-size:18px}
      .crumbs{font-size:15px}
      .back-link{width:34px;height:34px;min-width:0;border-radius:0;font-size:0;padding:0}
      .back-link .back-arrow{font-size:30px}
      .detail-title{font-size:26px}
      .detail-price .price{font-size:36px}
      .description{font-size:19px}
      .form-grid,.form-grid2{grid-template-columns:1fr}
    }
  </style>
</head>
<body>
<div class="app">
  <header class="topbar">
    <div class="top-row">
      <div class="place" id="botao-endereco" role="button" tabindex="0" aria-expanded="false">
        <div class="pin" aria-hidden="true">
          <svg viewBox="0 0 24 24" fill="none" stroke-width="2.2"><path d="M12 21s7-5.2 7-12A7 7 0 0 0 5 9c0 6.8 7 12 7 12Z"/><circle cx="12" cy="9" r="2.4"/></svg>
        </div>
        <div>
          <div class="place-label">Receber em</div>
          <div class="place-city"><span id="cidade-topo">Fortaleza</span><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.4"><path d="m6 9 6 6 6-6"/></svg></div>
        </div>
        <div id="pop-endereco" class="address-pop hidden">
          <div class="address-title">
            <svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M12 21s7-5.2 7-12A7 7 0 0 0 5 9c0 6.8 7 12 7 12Z"/><circle cx="12" cy="9" r="2.4"/></svg>
            Alterar meu endereço
          </div>
          <div class="address-grid">
            <div class="address-field">
              <label>CEP</label>
              <input id="endereco-cep" inputmode="numeric" maxlength="9" placeholder="00000-000">
            </div>
            <div class="address-field">
              <label>Bairro</label>
              <input id="endereco-bairro" placeholder="Seu bairro">
            </div>
          </div>
          <div class="address-field">
            <label>Rua</label>
            <input id="endereco-rua" placeholder="Rua / Avenida">
          </div>
          <div class="address-grid">
            <div class="address-field">
              <label>Número</label>
              <input id="endereco-numero" placeholder="Nº">
            </div>
            <div class="address-field">
              <label>Complemento</label>
              <input id="endereco-complemento" placeholder="Apto, casa...">
            </div>
          </div>
          <div class="address-actions">
            <button type="button" class="address-save" id="salvar-endereco">Salvar endereço</button>
            <button type="button" class="address-use-gps" id="usar-gps" title="Usar localização atual">⌖</button>
          </div>
          <div class="address-hint">O topo mostra o bairro do CEP cadastrado.</div>
        </div>
      </div>
      <div class="delivery">
        <svg viewBox="0 0 24 24" fill="none" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>
        <span>Entrega em até: <strong>12 min</strong></span>
      </div>
    </div>
    <div class="search-wrap">
      <label class="search">
        <svg viewBox="0 0 24 24" fill="none" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
        <input id="busca" type="search" placeholder="Pesquise sua bebida favorita" autocomplete="off">
        <button type="button" id="limpar-busca" class="search-clear" aria-label="Limpar pesquisa">×</button>
      </label>
      <div id="resultados-busca" class="search-results hidden"></div>
    </div>
  </header>

<?php if ($modoProduto): ?>
  <nav class="crumbs product-context">
    <a href="index.php">Início</a><span>›</span>
    <a href="?categoria=<?= urlencode($produtoAtual['categoria_slug'] ?? slug($produtoAtual['categoria'])) ?>"><?= e($produtoAtual['categoria']) ?></a><span>›</span>
    <span><?= e($produtoAtual['nome']) ?></span>
  </nav>
  <a class="back-link product-context" href="javascript:history.back()"><span class="back-arrow">←</span></a>
  <main id="tela-cardapio" class="product-page">
    <div class="detail-img-box">
      <?php if (!empty($produtoAtual['desconto'])): ?><span class="discount">-<?= e(str_replace(' OFF', '', $produtoAtual['desconto'])) ?></span><?php endif; ?>
      <img class="detail-img" src="<?= e(imagem_produto($produtoAtual)) ?>" alt="<?= e($produtoAtual['nome']) ?>">
    </div>
    <h1 class="detail-title"><?= e($produtoAtual['nome']) ?></h1>
    <div class="detail-price">
      <?php if (!empty($produtoAtual['preco_antigo'])): ?><span class="old-price"><?= dinheiro($produtoAtual['preco_antigo']) ?></span><?php endif; ?>
      <span class="price"><?= dinheiro($produtoAtual['preco']) ?></span>
    </div>
    <div class="specs">
      <div><div class="spec-label">Volume</div><div class="spec-value"><?= e($produtoAtual['volume'] ?? '-') ?></div></div>
      <div><div class="spec-label">Teor</div><div class="spec-value"><?= e($produtoAtual['teor'] ?? '-') ?></div></div>
      <div><div class="spec-label">Marca</div><div class="spec-value"><?= e($produtoAtual['marca'] ?? '-') ?></div></div>
    </div>
    <p class="description"><?= e($produtoAtual['descricao']) ?></p>
    <div class="qty">
      <button type="button" onclick="mudarQtd(-1)">−</button>
      <strong id="qtd-produto">01</strong>
      <button type="button" onclick="mudarQtd(1)">+</button>
    </div>
    <div class="quick-add">
      <button type="button" onclick="somarQtd(6)">+ 6 un.</button>
      <button type="button" onclick="somarQtd(10)">+ 10 un.</button>
      <button type="button" onclick="somarQtd(15)">+ 15 un.</button>
    </div>
    <button class="add-detail" onclick='adicionarProduto(<?= e(json_encode($produtoAtual, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES)) ?>, quantidadeProduto); irParaCheckout();'>
      <span>ADICIONAR (<span id="qtd-botao">1</span>)</span>
      <span id="total-produto"><?= dinheiro($produtoAtual['preco']) ?></span>
    </button>
  </main>
<?php elseif ($modoCategoria): ?>
  <main id="tela-cardapio" class="category-page">
    <a class="back-link" href="index.php"><span class="back-arrow">←</span></a>
    <div class="section-head" style="padding:0;margin-bottom:22px">
    <h1 class="section-title"><?= e($categoriaAtualDados['nome'] ?? $categoriaAtual) ?></h1>
    </div>
    <div class="category-list">
      <?php foreach ($produtos as $produto): if (($produto['categoria_slug'] ?? slug($produto['categoria'] ?? '')) !== $categoriaAtual) continue; ?>
        <?php include __DIR__ . '/product-card.php'; ?>
      <?php endforeach; ?>
    </div>
  </main>
<?php else: ?>
  <main id="tela-cardapio">
    <div class="hero"></div>
    <nav class="category-shell">
      <div class="category-grid">
        <?php foreach ($categorias as $cat): ?>
          <a class="cat-link" href="?categoria=<?= urlencode($cat['slug']) ?>">
            <img class="cat-img" src="<?= e($cat['icone']) ?>" alt="">
            <span><?= e($cat['nome']) ?></span>
          </a>
        <?php endforeach; ?>
      </div>
    </nav>
    <div class="content">
      <?php foreach ($categorias as $cat): ?>
        <?php
          $lista = array_values(array_filter($produtos, fn($p) => ($p['categoria_slug'] ?? slug($p['categoria'] ?? '')) === $cat['slug']));
          if (!$lista) continue;
          $limitesHome = [
            'ofertas' => 18,
            'cervejas' => 30,
            'destilados' => 20,
            'vinhos' => 15,
          ];
          $limiteHome = $limitesHome[$cat['slug'] ?? ''] ?? 8;
        ?>
        <section class="section" id="<?= e($cat['slug']) ?>">
          <div class="section-head">
            <h2 class="section-title"><?= e($cat['nome']) ?></h2>
            <a class="more" href="?categoria=<?= urlencode($cat['slug']) ?>">Ver mais ›</a>
          </div>
          <div class="rail">
            <?php foreach (array_slice($lista, 0, $limiteHome) as $produto): ?>
      <?php include __DIR__ . '/product-card.php'; ?>
            <?php endforeach; ?>
            <a class="see-all-card" href="?categoria=<?= urlencode($cat['slug']) ?>">
              <span class="see-all-icon">+</span>
              <span>Ver todos</span>
              <small><?= count($lista) ?> produtos</small>
            </a>
          </div>
        </section>
        <?php if (($cat['slug'] ?? '') === 'churrasco' && is_file(__DIR__ . '/assets/banner-churrasco-mobile.jpg')): ?>
          <div class="promo-banner">
            <img src="assets/banner-churrasco-mobile.jpg?v=1" alt="Bebida rápida, gelada e no precinho">
          </div>
        <?php endif; ?>
      <?php endforeach; ?>
    </div>
    <footer class="footer">
      <strong>© Copyright 2025 - ZE EXPRESS - Todos os direitos reservados</strong>
      <p>ZE EXPRESS Agencia de Delivery Online S.A<br>CNPJ 14.380.200/0001-21 / Avenida dos Autonomistas, nº 1496, Vila Yara,<br>Osasco/SP - CEP 06.020-902</p>
      <div class="socials" aria-label="Redes sociais">
        <span aria-label="Facebook"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.351C0 23.407.593 24 1.325 24h11.495v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.464.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116c.73 0 1.323-.593 1.323-1.325V1.325C24 .593 23.407 0 22.675 0Z"/></svg></span>
        <span aria-label="Twitter"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M23.954 4.569a10 10 0 0 1-2.825.775 4.932 4.932 0 0 0 2.163-2.723 9.865 9.865 0 0 1-3.127 1.195 4.916 4.916 0 0 0-8.38 4.482A13.95 13.95 0 0 1 1.671 3.149a4.916 4.916 0 0 0 1.523 6.574 4.897 4.897 0 0 1-2.229-.616v.061a4.918 4.918 0 0 0 3.946 4.827 4.93 4.93 0 0 1-2.224.085 4.922 4.922 0 0 0 4.6 3.417A9.868 9.868 0 0 1 0 19.54a13.94 13.94 0 0 0 7.548 2.212c9.142 0 14.307-7.721 13.995-14.646a9.936 9.936 0 0 0 2.411-2.537Z"/></svg></span>
        <span aria-label="YouTube"><svg class="youtube-icon" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.016 3.016 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.016 3.016 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814ZM9.545 15.568V8.432L15.818 12l-6.273 3.568Z"/></svg></span>
        <span aria-label="Instagram"><svg viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.265-.057 1.645-.069 4.849-.069ZM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0Zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324ZM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881Z"/></svg></span>
      </div>
    </footer>
  </main>
<?php endif; ?>

  <section id="tela-checkout" class="checkout hidden">
    <button class="back-link" type="button" onclick="voltarCardapio()"><span class="back-arrow">←</span></button>
    <div class="checkout-card">
      <div class="checkout-title">Resumo do pedido</div>
      <div id="checkout-itens"></div>
    </div>
    <div class="checkout-progress" aria-label="Progresso do checkout">
      <span class="progress-dot active" data-progress-step="1">1</span>
      <span class="progress-dot" data-progress-step="2">2</span>
      <span class="progress-dot" data-progress-step="3">3</span>
    </div>
    <div class="checkout-suggest" id="checkout-suggest">
      <div class="checkout-suggest-head">Peça também</div>
      <div class="checkout-suggest-rail" id="checkout-suggest-rail"></div>
    </div>
    <form id="form-pedido">
      <div class="checkout-card checkout-step" data-checkout-step="1">
        <div class="step-head">
          <div class="step-left">
            <span class="step-badge">1</span>
            <div>
              <div class="step-title">Identificação</div>
              <div class="step-sub">Preencha seus dados para envio do pedido.</div>
            </div>
          </div>
        </div>
        <label class="form-lbl">Nome Completo</label>
        <input type="text" id="nome" class="form-inp" placeholder="Seu nome completo" required>
        <label class="form-lbl">WhatsApp</label>
        <input type="text" id="telefone" class="form-inp" placeholder="Seu WhatsApp" required>
        <label class="form-lbl">E-mail para Recibo</label>
        <input type="email" id="email" class="form-inp" placeholder="Seu e-mail" required>
        <div class="checkout-step-actions">
          <button type="button" class="confirm-btn" onclick="avancarCheckoutEtapa(2)">Continuar</button>
        </div>
      </div>
      <div class="checkout-card checkout-step hidden" data-checkout-step="2">
        <div class="step-head">
          <div class="step-left">
            <span class="step-badge">2</span>
            <div>
              <div class="step-title">Entrega</div>
              <div class="step-sub">Informe o endereço de entrega</div>
            </div>
          </div>
        </div>
        <div class="form-grid2">
          <div><label class="form-lbl">CEP</label><input type="text" id="cep" class="form-inp" maxlength="9" placeholder="00000-000" required></div>
          <div><label class="form-lbl">Rua</label><input type="text" id="rua" class="form-inp" placeholder="Seu endereço" required></div>
        </div>
        <div class="form-grid">
          <div><label class="form-lbl">Número</label><input type="text" id="numero" class="form-inp" placeholder="Número" required></div>
          <div><label class="form-lbl">Bairro</label><input type="text" id="bairro" class="form-inp" placeholder="Seu bairro" required></div>
        </div>
        <label class="form-lbl">Complemento</label>
        <input type="text" id="complemento" class="form-inp" placeholder="Casa, apto, bloco, referência...">
        <div id="tempo-entrega-cep" class="delivery-estimate hidden" aria-live="polite">
          <div class="delivery-estimate-icon" aria-hidden="true">
            <svg viewBox="0 0 24 24">
              <path d="M12 6v6l4 2"></path>
              <path d="M21 12a9 9 0 1 1-2.64-6.36"></path>
              <path d="M21 4v6h-6"></path>
            </svg>
          </div>
          <div class="delivery-estimate-body">
            <div class="delivery-estimate-kicker">Entrega estimada</div>
            <div class="delivery-estimate-time">Chega em até 12 minutos</div>
            <div class="delivery-estimate-store">Loja mais próxima a 2,3 km</div>
          </div>
        </div>
        <div class="checkout-step-actions">
          <button type="button" class="step-back-btn" onclick="mostrarCheckoutEtapa(1)">Voltar</button>
          <button type="button" class="confirm-btn" onclick="avancarCheckoutEtapa(3)">Continuar</button>
        </div>
      </div>
      <div class="checkout-card checkout-step hidden" data-checkout-step="3">
        <div class="step-head">
          <div class="step-left">
            <span class="step-badge">3</span>
            <div>
              <div class="step-title">Pagamento</div>
              <div class="step-sub">Todas as transações são seguras e criptografadas.</div>
            </div>
          </div>
        </div>
        <div class="checkout-step-actions">
          <button type="button" class="step-back-btn" onclick="mostrarCheckoutEtapa(2)">Voltar</button>
        </div>
        <div class="payment-card">
          <div class="payment-discount">5% DE DESCONTO</div>
          <div class="payment-row">
            <span class="pix-radio" aria-hidden="true"></span>
            <span class="pix-logo" aria-hidden="true"><img src="assets/pix-solid-ref.png" alt="Pix"></span>
            <div>
              <div class="payment-name">PIX</div>
              <div class="payment-ok">Aprovação imediata</div>
            </div>
          </div>
          <div class="payment-note">O código Pix expira em 30 minutos após finalizar a compra.</div>
          <div class="pix-total">Valor no Pix: <span id="valor-pix-checkout">R$ 0,00</span></div>
          <button type="submit" id="btn-finalizar" class="confirm-btn">Finalizar Compra</button>
        </div>
      </div>
    </form>
  </section>

  <section id="tela-pix" class="pix-screen hidden">
    <div class="pix-box">
      <div class="pix-brand"><img src="assets/pix-solid-ref.png" alt="Pix"></div>
      <div id="status-icone"><div class="pix-spinner"></div></div>
      <h2 id="status-titulo">Aguardando pagamento do Pix...</h2>
      <p style="color:#6b7280;margin-top:8px">Assim que pagar, o pedido é confirmado automaticamente.</p>
      <div class="qr-box">
        <img id="img-qrcode" src="" alt="QR Code" class="hidden">
        <span id="qr-pix-logo" class="qr-pix-logo hidden"><img src="assets/pix-solid-ref.png" alt=""></span>
        <div id="loading-qrcode">Gerando QR Code...</div>
      </div>
      <textarea id="texto-copia-cola" readonly class="pix-code"></textarea>
      <button onclick="copiarCodigoPix()" class="pix-copy-btn" style="margin-top:12px">Copiar Código Pix</button>
    </div>
  </section>
</div>

<div id="barra-carrinho" class="cart-bar hidden">
  <div class="cart-bar-inner">
    <button class="cart-btn" onclick="irParaCheckout()">
      <span id="texto-qtd-carrinho" class="cart-count-text">0 itens</span>
      <span id="total-barra">R$ 0,00</span>
    </button>
  </div>
</div>

<script>
const CART_KEY = 'zeCarrinhoPedirZeV1';
const LAST_ORDER_KEY = 'zeUltimoPedidoPedirZeV1';
let carrinho = JSON.parse(localStorage.getItem(CART_KEY) || '[]');
let quantidadeProduto = 1;
let checagemInterval = null;
const produtoPagina = <?= $modoProduto ? json_encode($produtoAtual, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) : 'null' ?>;
const produtosBusca = <?= json_encode(array_map(fn($p) => [
  'id' => $p['id'] ?? '',
  'nome' => $p['nome'] ?? '',
  'descricao' => $p['descricao'] ?? '',
  'categoria' => $p['categoria'] ?? '',
  'categoria_slug' => $p['categoria_slug'] ?? '',
  'foto' => imagem_produto($p),
  'original_id' => $p['original_id'] ?? ($p['id'] ?? ''),
  'preco' => $p['preco'] ?? '0',
], $produtos), JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES | JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT) ?>;

function ajustarEspacoTopbar() {
  const topbar = document.querySelector('.topbar');
  if (!topbar) return;
  document.documentElement.style.setProperty('--topbar-height', `${topbar.offsetHeight}px`);
}

window.addEventListener('resize', ajustarEspacoTopbar);
window.addEventListener('load', ajustarEspacoTopbar);

document.addEventListener('DOMContentLoaded', () => {
  ajustarEspacoTopbar();
  atualizarCarrinho();
  limparCepSalvoInvalido();
  initEnderecoTopo();
  aplicarMascaras();
  const busca = document.getElementById('busca');
  const limparBusca = document.getElementById('limpar-busca');
  busca.addEventListener('input', renderizarBusca);
  busca.addEventListener('focus', renderizarBusca);
  busca.addEventListener('keydown', e => {
    if (e.key === 'Escape') fecharBusca();
  });
  limparBusca.addEventListener('click', () => {
    busca.value = '';
    busca.focus();
    fecharBusca();
  });
  document.addEventListener('click', e => {
    if (!e.target.closest('.search-wrap')) fecharBusca();
  });
});

function somenteDigitos(valor) {
  return String(valor || '').replace(/\D/g, '');
}

function normalizarCep(valor) {
  const cep = somenteDigitos(valor).slice(0, 8);
  if (cep.length !== 8) return '';
  if (cep.endsWith('000')) return '';
  return cep;
}

function formatarCep(valor) {
  const cep = somenteDigitos(valor).slice(0, 8);
  return cep.length > 5 ? `${cep.slice(0, 5)}-${cep.slice(5)}` : cep;
}

function limparCepSalvoInvalido() {
  if (localStorage.getItem('cepUsuario') && !normalizarCep(localStorage.getItem('cepUsuario'))) {
    localStorage.removeItem('cepUsuario');
  }
  const endereco = lerEnderecoSalvo();
  if (endereco?.cep && !normalizarCep(endereco.cep)) {
    endereco.cep = '';
    localStorage.setItem('enderecoUsuario', JSON.stringify(endereco));
  }
}

function initEnderecoTopo() {
  const enderecoSalvo = lerEnderecoSalvo();
  if (enderecoSalvo && aplicarEnderecoNoTopo(enderecoSalvo)) {
    preencherFormularioEndereco(enderecoSalvo);
  } else {
    detectarCidadePorIp();
  }

  const botao = document.getElementById('botao-endereco');
  const pop = document.getElementById('pop-endereco');
  botao.addEventListener('click', e => {
    if (e.target.closest('#pop-endereco')) return;
    togglePopEndereco();
  });
  botao.addEventListener('keydown', e => {
    if (e.key !== 'Enter' && e.key !== ' ') return;
    e.preventDefault();
    togglePopEndereco();
  });
  document.addEventListener('click', e => {
    if (!e.target.closest('#botao-endereco')) fecharPopEndereco();
  });
  document.getElementById('endereco-cep').addEventListener('input', e => {
    e.target.value = formatarCep(e.target.value);
  });
  document.getElementById('endereco-cep').addEventListener('blur', preencherEnderecoPorCep);
  document.getElementById('salvar-endereco').addEventListener('click', salvarEnderecoManual);
  document.getElementById('usar-gps').addEventListener('click', async e => {
    e.stopPropagation();
    const local = await detectarPorGps();
    if (await aplicarLocalDetectado(local)) fecharPopEndereco();
  });
}

function togglePopEndereco() {
  const botao = document.getElementById('botao-endereco');
  const pop = document.getElementById('pop-endereco');
  const aberto = pop.classList.toggle('hidden') === false;
  botao.classList.toggle('open', aberto);
  botao.setAttribute('aria-expanded', aberto ? 'true' : 'false');
}

async function detectarCidadePorIp() {
  const alvo = document.getElementById('cidade-topo');
  alvo.textContent = 'Detectando...';

  const localizacaoPrecisa = await detectarPorGps();
  if (await aplicarLocalDetectado(localizacaoPrecisa)) return;

  const fontes = [
    { url: 'https://ipapi.co/json/', parse: d => ({ cidade: d.city, cep: d.postal }) },
    { url: 'https://ipwho.is/', parse: d => d.success !== false ? ({ cidade: d.city, cep: d.postal }) : ({}) },
    { url: 'https://get.geojs.io/v1/ip/geo.json', parse: d => ({ cidade: d.city, cep: d.postal || d.zip }) }
  ];

  for (const fonte of fontes) {
    try {
      const r = await fetch(fonte.url, { cache: 'no-store' });
      if (!r.ok) continue;
      const d = await r.json();
      if (await aplicarLocalDetectado(fonte.parse(d) || {})) return;
    } catch {}
  }
  alvo.textContent = localStorage.getItem('cidadeUsuario') || 'Sua cidade';
}

async function aplicarLocalDetectado(local) {
  const cep = normalizarCep(local.cep);
  const enderecoCep = cep.length === 8 ? await buscarEnderecoPorCep(cep) : null;
  const endereco = {
    cep,
    cidade: (enderecoCep?.cidade || local.cidade || '').trim(),
    bairro: bairroExibivel(enderecoCep?.bairro || local.bairro || ''),
    rua: (enderecoCep?.rua || '').trim(),
    numero: '',
    complemento: ''
  };
  const cidade = endereco.cidade;
  if (!cidade) return false;
  aplicarEnderecoNoTopo(endereco);
  preencherFormularioEndereco(endereco);
  localStorage.setItem('cidadeUsuario', cidade);
  if (endereco.bairro) localStorage.setItem('bairroUsuario', endereco.bairro);
  if (cep.length === 8) localStorage.setItem('cepUsuario', cep);
  return true;
}

function aplicarEnderecoNoTopo(endereco) {
  const texto = bairroExibivel(endereco?.bairro || '') || endereco?.cidade || '';
  if (!texto) return false;
  document.getElementById('cidade-topo').textContent = texto;
  return true;
}

function lerEnderecoSalvo() {
  try {
    const endereco = JSON.parse(localStorage.getItem('enderecoUsuario') || 'null');
    if (endereco) endereco.bairro = bairroExibivel(endereco.bairro || '');
    return endereco;
  } catch {
    return null;
  }
}

function bairroExibivel(valor) {
  const bairro = String(valor || '').trim();
  if (!bairro) return '';
  const normalizado = bairro.normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLowerCase();
  if (normalizado.includes('regiao metropolitana')) return '';
  return bairro;
}

function preencherFormularioEndereco(endereco) {
  if (!endereco) return;
  const campos = {
    'endereco-cep': formatarCep(normalizarCep(endereco.cep)),
    'endereco-bairro': endereco.bairro || '',
    'endereco-rua': endereco.rua || '',
    'endereco-numero': endereco.numero || '',
    'endereco-complemento': endereco.complemento || ''
  };
  Object.entries(campos).forEach(([id, valor]) => {
    const el = document.getElementById(id);
    if (el && !el.value) el.value = valor;
  });
}

function fecharPopEndereco() {
  document.getElementById('pop-endereco').classList.add('hidden');
  document.getElementById('botao-endereco').classList.remove('open');
  document.getElementById('botao-endereco').setAttribute('aria-expanded', 'false');
}

async function preencherEnderecoPorCep() {
  const cep = normalizarCep(document.getElementById('endereco-cep').value);
  if (cep.length !== 8) return;
  const endereco = await buscarEnderecoPorCep(cep);
  if (!endereco) return;
  document.getElementById('endereco-bairro').value = endereco.bairro || '';
  document.getElementById('endereco-rua').value = endereco.rua || '';
}

async function salvarEnderecoManual(e) {
  e.stopPropagation();
  const cep = normalizarCep(document.getElementById('endereco-cep').value);
  const enderecoCep = cep.length === 8 ? await buscarEnderecoPorCep(cep) : null;
  const endereco = {
    cep,
    bairro: bairroExibivel(document.getElementById('endereco-bairro').value.trim() || enderecoCep?.bairro || ''),
    rua: document.getElementById('endereco-rua').value.trim() || enderecoCep?.rua || '',
    numero: document.getElementById('endereco-numero').value.trim(),
    complemento: document.getElementById('endereco-complemento').value.trim(),
    cidade: enderecoCep?.cidade || localStorage.getItem('cidadeUsuario') || ''
  };
  if (!endereco.bairro && !endereco.cep) return;
  localStorage.setItem('enderecoUsuario', JSON.stringify(endereco));
  if (endereco.cep) localStorage.setItem('cepUsuario', endereco.cep);
  if (endereco.bairro) localStorage.setItem('bairroUsuario', endereco.bairro);
  aplicarEnderecoNoTopo(endereco);
  fecharPopEndereco();
}

function detectarPorGps() {
  return new Promise(resolve => {
    if (!navigator.geolocation) return resolve({});
    navigator.geolocation.getCurrentPosition(async pos => {
      try {
        const local = await buscarEnderecoPorCoordenadas(pos.coords.latitude, pos.coords.longitude);
        resolve(local);
      } catch {
        resolve({});
      }
    }, () => resolve({}), {
      enableHighAccuracy: true,
      timeout: 4500,
      maximumAge: 300000
    });
  });
}

async function buscarEnderecoPorCoordenadas(latitude, longitude) {
  const url = `https://api.bigdatacloud.net/data/reverse-geocode-client?latitude=${encodeURIComponent(latitude)}&longitude=${encodeURIComponent(longitude)}&localityLanguage=pt`;
  const r = await fetch(url, { cache: 'no-store' });
  if (!r.ok) return {};
  const d = await r.json();
  return {
    cidade: d.city || d.locality || d.principalSubdivision || '',
    bairro: d.locality || '',
    cep: d.postcode || ''
  };
}

async function buscarCidadePorCep(cep) {
  const endereco = await buscarEnderecoPorCep(cep);
  return endereco?.cidade || '';
}

async function buscarEnderecoPorCep(cep) {
  try {
    const r = await fetch(`https://viacep.com.br/ws/${cep}/json/`, { cache: 'no-store' });
    if (!r.ok) return null;
    const d = await r.json();
    return d.erro ? null : {
      cidade: d.localidade || '',
      bairro: d.bairro || '',
      rua: d.logradouro || '',
      cep: normalizarCep(d.cep || cep)
    };
  } catch {
    return null;
  }
}

function normalizarTexto(valor) {
  return String(valor || '').normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLowerCase();
}

function renderizarBusca() {
  const input = document.getElementById('busca');
  const painel = document.getElementById('resultados-busca');
  const limpar = document.getElementById('limpar-busca');
  const termoOriginal = input.value.trim();
  const termo = normalizarTexto(termoOriginal);
  limpar.classList.toggle('visible', termoOriginal.length > 0);

  if (termo.length < 2) {
    painel.classList.add('hidden');
    painel.innerHTML = '';
    return;
  }

  const resultados = produtosBusca
    .filter(p => normalizarTexto(`${p.nome} ${p.categoria}`).includes(termo))
    .sort((a, b) => a.nome.localeCompare(b.nome, 'pt-BR'))
    .slice(0, 8);

  if (!resultados.length) {
    painel.innerHTML = '<div class="search-empty">Nenhum produto encontrado</div>';
    painel.classList.remove('hidden');
    return;
  }

  painel.innerHTML = resultados.map(p => `
    <button type="button" class="search-result" onclick="abrirResultadoBusca('${String(p.id).replace(/'/g, "\\'")}')">
      <img src="${p.foto}" alt="">
      <span>
        <span class="search-name">${escaparHtml(p.nome)}</span>
        <span class="search-cat">${escaparHtml(p.categoria)}</span>
      </span>
      <span class="search-price">${formatar(parseFloat(p.preco || 0))}</span>
    </button>
  `).join('');
  painel.classList.remove('hidden');
}

function fecharBusca() {
  const painel = document.getElementById('resultados-busca');
  const limpar = document.getElementById('limpar-busca');
  painel.classList.add('hidden');
  painel.innerHTML = '';
  limpar.classList.toggle('visible', document.getElementById('busca').value.trim().length > 0);
}

function abrirResultadoBusca(id) {
  window.location.href = `?produto=${encodeURIComponent(id)}`;
}

function escaparHtml(valor) {
  return String(valor).replace(/[&<>"']/g, c => ({
    '&': '&amp;',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#039;'
  }[c]));
}

function produtoParaCarrinho(produto, qtd) {
  return {
    id: produto.id,
    nome: produto.nome,
    descricao: produto.descricao || '',
    categoria: produto.categoria || '',
    foto: produto.foto || '',
    original_id: produto.original_id || produto.id,
    preco: parseFloat(produto.preco),
    quantidadeCarrinho: qtd || 1
  };
}

function produtoBuscaParaCarrinho(produto) {
  return {
    id: produto.id,
    nome: produto.nome,
    descricao: produto.descricao || produto.categoria || '',
    categoria: produto.categoria || '',
    foto: produto.foto || '',
    original_id: produto.original_id || produto.id,
    preco: parseFloat(produto.preco),
    quantidadeCarrinho: 1
  };
}

function adicionarProduto(produto, qtd = 1) {
  const existente = carrinho.find(i => i.id === produto.id);
  if (existente) existente.quantidadeCarrinho += qtd;
  else carrinho.push(produtoParaCarrinho(produto, qtd));
  salvarCarrinho();
}

function adicionarProdutoCheckout(id) {
  const produto = produtosBusca.find(p => String(p.id) === String(id));
  if (!produto) return;
  const existente = carrinho.find(i => String(i.id) === String(produto.id));
  if (existente) existente.quantidadeCarrinho += 1;
  else carrinho.push(produtoBuscaParaCarrinho(produto));
  salvarCarrinho();
  irParaCheckout();
}

function salvarCarrinho() {
  localStorage.setItem(CART_KEY, JSON.stringify(carrinho));
  atualizarCarrinho();
}

function atualizarCarrinho() {
  const qtd = carrinho.reduce((s, i) => s + i.quantidadeCarrinho, 0);
  const total = carrinho.reduce((s, i) => s + i.preco * i.quantidadeCarrinho, 0);
  document.getElementById('texto-qtd-carrinho').textContent = `${qtd} ${qtd === 1 ? 'item' : 'itens'}`;
  document.getElementById('total-barra').textContent = formatar(total);
  document.getElementById('barra-carrinho').classList.toggle('hidden', qtd === 0 || !document.getElementById('tela-checkout').classList.contains('hidden'));
}

function formatar(valor) {
  return valor.toLocaleString('pt-BR', {style:'currency', currency:'BRL'});
}

function idOriginalCarrinho(item) {
  if (item.original_id) return item.original_id;
  const id = item.id || '';
  const match = id.match(/(c[a-z0-9]{20,})$/i);
  return match ? match[1] : id;
}

function produtoResumoCarrinho(item) {
  const id = String(item.id || '');
  const originalId = String(item.original_id || idOriginalCarrinho(item) || '');
  const nome = String(item.nome || '').toLowerCase();
  return produtosBusca.find(produto => {
    const produtoId = String(produto.id || '');
    const produtoOriginal = produtoId.split('-').pop();
    return produtoId === id || produtoOriginal === originalId || String(produto.nome || '').toLowerCase() === nome;
  }) || null;
}

function normalizarImagemResumo(foto, id) {
  if (!foto) return '';
  if (/^https?:\/\//.test(foto) || foto.startsWith('image.php')) return foto;
  return `image.php?id=${encodeURIComponent(id || '')}&fallback=${encodeURIComponent(foto)}&v=4`;
}

function imagemCarrinho(item) {
  const produtoResumo = produtoResumoCarrinho(item);
  const id = idOriginalCarrinho(item);
  const fotoResumo = produtoResumo && produtoResumo.foto ? produtoResumo.foto : '';
  return normalizarImagemResumo(fotoResumo || item.foto || '', id);
}

function mudarQtd(delta) {
  quantidadeProduto = Math.max(1, quantidadeProduto + delta);
  renderQtd();
}

function somarQtd(valor) {
  quantidadeProduto += valor;
  renderQtd();
}

function renderQtd() {
  document.getElementById('qtd-produto').textContent = String(quantidadeProduto).padStart(2, '0');
  document.getElementById('qtd-botao').textContent = quantidadeProduto;
  if (produtoPagina) {
    document.getElementById('total-produto').textContent = formatar(parseFloat(produtoPagina.preco) * quantidadeProduto);
  }
}

function mostrarCheckoutEtapa(etapa) {
  document.querySelectorAll('.checkout-step').forEach(step => {
    step.classList.toggle('hidden', step.dataset.checkoutStep !== String(etapa));
  });
  document.querySelectorAll('.progress-dot').forEach(dot => {
    const numero = Number(dot.dataset.progressStep);
    dot.classList.toggle('active', numero === Number(etapa));
    dot.classList.remove('done');
  });
  renderizarSugestoesCheckout(Number(etapa));
  const checkout = document.getElementById('tela-checkout');
  if (checkout && !checkout.classList.contains('hidden')) window.scrollTo(0, 0);
}

function validarCheckoutEtapa(etapa) {
  const step = document.querySelector(`.checkout-step[data-checkout-step="${etapa}"]`);
  if (!step) return true;
  const campos = Array.from(step.querySelectorAll('input[required], select[required], textarea[required]'));
  for (const campo of campos) {
    if (!campo.checkValidity()) {
      campo.reportValidity();
      campo.focus();
      return false;
    }
  }
  return true;
}

function avancarCheckoutEtapa(proximaEtapa) {
  if (!validarCheckoutEtapa(proximaEtapa - 1)) return;
  mostrarCheckoutEtapa(proximaEtapa);
}

function irParaCheckout() {
  document.getElementById('tela-cardapio')?.classList.add('hidden');
  document.querySelectorAll('.product-context').forEach(el => el.classList.add('hidden'));
  document.getElementById('tela-checkout').classList.remove('hidden');
  document.getElementById('barra-carrinho').classList.add('hidden');
  const ct = document.getElementById('checkout-itens');
  const valorPix = document.getElementById('valor-pix-checkout');
  const totalCheckout = carrinho.reduce((s, i) => s + i.preco * i.quantidadeCarrinho, 0);
  if (valorPix) valorPix.textContent = formatar(totalCheckout);
  ct.innerHTML = '';
  carrinho.forEach((item, idx) => {
    const row = document.createElement('div');
    const detalheResumo = item.descricao && item.descricao !== item.nome ? item.descricao : `${item.quantidadeCarrinho} und`;
    const descricao = `<div class="summary-desc">${escaparHtml(detalheResumo)}</div>`;
    row.className = 'checkout-summary-item';
    const imgResumo = imagemCarrinho(item);
    row.innerHTML = `
      <img class="summary-img" src="${escaparHtml(imgResumo)}" alt="${escaparHtml(item.nome)}" onerror="this.onerror=null;this.src='${escaparHtml(imgResumo)}'">
      <div class="summary-main">
        <div class="summary-name">${escaparHtml(item.nome)}</div>
        <div class="summary-meta">
          ${descricao}
          <span class="summary-price">${formatar(item.preco * item.quantidadeCarrinho)}</span>
        </div>
      </div>
      <div class="summary-qty">
        <button type="button" aria-label="Remover" onclick="alterarQtdCarrinho(${idx}, -1)">−</button>
        <span>${item.quantidadeCarrinho}</span>
        <button type="button" aria-label="Adicionar" onclick="alterarQtdCarrinho(${idx}, 1)">+</button>
      </div>`;
    ct.appendChild(row);
  });
  renderizarSugestoesCheckout(1);
  mostrarCheckoutEtapa(1);
  window.scrollTo(0, 0);
  preencherCheckoutEndereco();
}

function produtosSugeridosCheckout(etapa = 1) {
  const idsCarrinho = new Set(carrinho.map(item => String(item.id)));
  const candidatos = produtosBusca.filter(produto => {
    if (!produto.id || idsCarrinho.has(String(produto.id))) return false;
    const preco = parseFloat(produto.preco);
    return Number.isFinite(preco) && preco > 0 && produto.foto;
  });
  const bebidaKeywords = [
    'cerveja', 'cervejas', 'destilado', 'destilados', 'vinho', 'vinhos',
    'drink', 'drinks', 'energetico', 'energético', 'energeticos', 'energéticos',
    'refrigerante', 'refrigerantes', 'agua', 'água', 'aguas', 'águas',
    'nao-alcoolico', 'não alcoólico', 'não alcoólicos', 'chopp'
  ];
  const bebidas = candidatos.filter(produto => {
    const texto = [
      produto.categoria,
      produto.categoria_slug,
      produto.nome,
      produto.descricao
    ].map(valor => String(valor || '').toLowerCase()).join(' ');
    return bebidaKeywords.some(keyword => texto.includes(keyword));
  });
  if (Number(etapa) === 2) {
    return bebidas
      .map(produto => ({produto, ordem: Math.random()}))
      .sort((a, b) => a.ordem - b.ordem)
      .slice(0, 28)
      .map(item => item.produto);
  }
  const cigarros = candidatos.filter(produto => {
    const categoria = String(produto.categoria || '').toLowerCase();
    const slug = String(produto.categoria_slug || '').toLowerCase();
    return categoria.includes('cigar') || slug.includes('cigar');
  });
  const cigarrosIds = new Set(cigarros.map(produto => String(produto.id)));
  const outros = candidatos.filter(produto => !cigarrosIds.has(String(produto.id)));
  const aleatorios = outros
    .map(produto => ({produto, ordem: Math.random()}))
    .sort((a, b) => a.ordem - b.ordem)
    .slice(0, 20)
    .map(item => item.produto);
  return [...cigarros, ...aleatorios];
}

function renderizarSugestoesCheckout(etapa = 1) {
  const bloco = document.getElementById('checkout-suggest');
  const rail = document.getElementById('checkout-suggest-rail');
  if (!bloco || !rail) return;
  if (Number(etapa) === 3) {
    bloco.classList.add('hidden');
    rail.innerHTML = '';
    return;
  }
  const sugestoes = produtosSugeridosCheckout(etapa);
  bloco.classList.toggle('hidden', sugestoes.length === 0);
  rail.innerHTML = sugestoes.length ? '' : '<div class="suggest-empty">Nenhuma sugestão disponível.</div>';
  sugestoes.forEach(produto => {
    const card = document.createElement('article');
    card.className = 'suggest-card';
    const img = normalizarImagemResumo(produto.foto, produto.original_id || produto.id);
    card.innerHTML = `
      <div class="suggest-img-wrap">
        <img src="${escaparHtml(img)}" alt="${escaparHtml(produto.nome)}">
        <button class="suggest-add" type="button" aria-label="Adicionar ${escaparHtml(produto.nome)}">+</button>
      </div>
      <div class="suggest-price">${formatar(parseFloat(produto.preco))}</div>
      <div class="suggest-name">${escaparHtml(produto.nome)}</div>
    `;
    card.querySelector('.suggest-add')?.addEventListener('click', () => adicionarProdutoCheckout(produto.id));
    rail.appendChild(card);
  });
}

function alterarQtdCarrinho(idx, delta) {
  if (!carrinho[idx]) return;
  carrinho[idx].quantidadeCarrinho += delta;
  if (carrinho[idx].quantidadeCarrinho <= 0) carrinho.splice(idx, 1);
  salvarCarrinho();
  if (carrinho.length) irParaCheckout();
  else voltarCardapio();
}

function voltarCardapio() {
  document.getElementById('tela-checkout').classList.add('hidden');
  document.getElementById('tela-pix').classList.add('hidden');
  document.querySelectorAll('.product-context').forEach(el => el.classList.remove('hidden'));
  document.getElementById('tela-cardapio')?.classList.remove('hidden');
  atualizarCarrinho();
}

  function atualizarTempoEntregaCep() {
  const cep = document.getElementById('cep');
  const box = document.getElementById('tempo-entrega-cep');
  if (!cep || !box) return;
  const valor = normalizarCep(cep.value);
  if (valor.length !== 8) {
    box.classList.add('hidden');
    return;
  }
  box.classList.remove('hidden');
}

function aplicarMascaras() {
  const telefone = document.getElementById('telefone');
  const cep = document.getElementById('cep');
  telefone.addEventListener('input', e => {
    let x = e.target.value.replace(/\D/g,'').match(/(\d{0,2})(\d{0,5})(\d{0,4})/);
    e.target.value = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');
  });
  cep.addEventListener('input', e => {
    e.target.value = formatarCep(e.target.value);
    atualizarTempoEntregaCep();
  });
  cep.addEventListener('blur', async e => {
    const valor = normalizarCep(e.target.value);
    atualizarTempoEntregaCep();
    if (valor.length !== 8) return;
    try {
      const r = await fetch(`https://viacep.com.br/ws/${valor}/json/`);
      const d = await r.json();
      if (!d.erro) {
        document.getElementById('rua').value = d.logradouro || '';
        document.getElementById('bairro').value = d.bairro || '';
      }
    } catch {}
  });
}

function preencherCepDetectado() {
  preencherCheckoutEndereco();
}

function preencherCheckoutEndereco() {
  const endereco = lerEnderecoSalvo();
  const cepDetectado = normalizarCep(endereco?.cep) || normalizarCep(localStorage.getItem('cepUsuario')) || '';
  const cep = document.getElementById('cep');
  if (cepDetectado && !cep.value) {
    cep.value = formatarCep(cepDetectado);
    atualizarTempoEntregaCep();
    cep.dispatchEvent(new Event('blur'));
  }
  if (endereco) {
    if (endereco.rua && !document.getElementById('rua').value) document.getElementById('rua').value = endereco.rua;
    if (endereco.bairro && !document.getElementById('bairro').value) document.getElementById('bairro').value = endereco.bairro;
    if (endereco.numero && !document.getElementById('numero').value) document.getElementById('numero').value = endereco.numero;
    if (endereco.complemento && !document.getElementById('complemento').value) document.getElementById('complemento').value = endereco.complemento;
  }
}

document.getElementById('form-pedido').addEventListener('submit', async e => {
  e.preventDefault();
  if (!validarCheckoutEtapa(3)) return;
  const btn = document.getElementById('btn-finalizar');
  btn.disabled = true;
  btn.textContent = 'Gerando PIX...';
  const valorTotal = carrinho.reduce((s, i) => s + i.preco * i.quantidadeCarrinho, 0);
  const dados = {
    nome: document.getElementById('nome').value,
    valor: valorTotal.toFixed(2),
    whatsapp: document.getElementById('telefone').value,
    email: document.getElementById('email').value,
    utm: window.location.search.replace(/^\?/, ''),
    endereco: {
      cep: normalizarCep(document.getElementById('cep').value),
      rua: document.getElementById('rua').value,
      numero: document.getElementById('numero').value,
      bairro: document.getElementById('bairro').value,
      complemento: document.getElementById('complemento').value
    },
    itens: carrinho
  };
  localStorage.setItem(LAST_ORDER_KEY, JSON.stringify({
    total: valorTotal,
    nome: dados.nome,
    whatsapp: dados.whatsapp,
    email: dados.email,
    endereco: dados.endereco,
    itens: carrinho,
    criadoEm: new Date().toISOString()
  }));
  try {
    const res = await fetch('checkout.php', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify(dados)});
    const resultado = await res.json();
    if (resultado.success && resultado.data) {
      const pixCode = resultado.data.pixCode || resultado.data.qr_code_text || resultado.data.qr_code || '';
      const transactionId = resultado.data.transactionId || resultado.data.id || '';
      if (!pixCode) throw new Error('Pix sem codigo');
      document.getElementById('tela-checkout').classList.add('hidden');
      document.getElementById('tela-pix').classList.remove('hidden');
      window.scrollTo(0, 0);
      document.getElementById('texto-copia-cola').value = pixCode;
      document.getElementById('img-qrcode').classList.add('hidden');
      document.getElementById('qr-pix-logo').classList.add('hidden');
      document.getElementById('loading-qrcode').classList.remove('hidden');
      document.getElementById('img-qrcode').src = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&ecc=H&data=${encodeURIComponent(pixCode)}`;
      document.getElementById('img-qrcode').onload = function() {
        this.classList.remove('hidden');
        document.getElementById('loading-qrcode').classList.add('hidden');
      };
      if (transactionId) iniciarVerificacaoPagamento(transactionId);
    } else {
      alert(resultado.message || 'Ocorreu um erro ao processar o pedido na API gateway.');
      btn.disabled = false;
      btn.textContent = 'Finalizar Compra';
    }
  } catch {
    alert('Falha na comunicação com o servidor.');
    btn.disabled = false;
    btn.textContent = 'Finalizar Compra';
  }
});

function iniciarVerificacaoPagamento(idTransacao) {
  if (checagemInterval) clearInterval(checagemInterval);
  checagemInterval = setInterval(async () => {
    try {
      const r = await fetch(`verificar.php?id=${idTransacao}`);
      const d = await r.json();
      if (d.success && d.status === 'PAID') {
        clearInterval(checagemInterval);
        document.getElementById('status-icone').innerHTML = '<div style="font-size:44px">OK</div>';
        document.getElementById('status-titulo').textContent = 'Pagamento Confirmado com Sucesso!';
        localStorage.removeItem(CART_KEY);
        setTimeout(() => {
          window.location.href = 'up1.html';
        }, 900);
      }
    } catch {}
  }, 4000);
}

async function copiarCodigoPix() {
  const txt = document.getElementById('texto-copia-cola').value;
  try { await navigator.clipboard.writeText(txt); }
  catch { document.getElementById('texto-copia-cola').select(); document.execCommand('copy'); }
  alert('Código Pix copiado.');
}
</script>

</body>
</html>
