:root{
  --bg:#fff; --card:#fff8f0; --text:#5b3a1a; --muted:#7c5e2f;
  --brand:#f59e0b; --accent:#b91c1c; --green:#22c55e; --red:#ef4444;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--text)}
.container{max-width:1060px;margin:0 auto;padding:16px}
h1,h2,h3{margin:0 0 8px 0}
.button{display:inline-flex;gap:8px;align-items:center;border:0;border-radius:12px;padding:12px 16px;font-weight:700;cursor:pointer}
.button-primary{background:var(--green);color:#fff}
.button-danger{background:var(--red);color:#fff}
.button-gold{background:#fcd34d;color:#000}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;background:#eee;color:#333}
.hidden{display:none !important}
.grid{display:grid;gap:12px}
/* Cards grid */
.grid-cards{grid-template-columns:repeat(2,1fr)}
@media(min-width:840px){.grid-cards{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--card);border:1px solid rgba(0,0,0,.06);border-radius:16px;overflow:hidden}
.card .img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.card .body{padding:10px}
.card .price{font-weight:800;margin:4px 0}
.footer-fixed{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid #ddd;display:flex;justify-content:space-between;align-items:center;padding:12px 16px;z-index:50}
.footer-fixed .total{font-weight:800}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;padding:16px;z-index:60}
.modal{background:#fff;border-radius:14px;max-width:520px;width:100%;overflow:hidden}
.modal header{padding:14px 16px;background:var(--brand);color:#fff;font-weight:800}
.modal .content{padding:16px}
.modal .actions{display:flex;gap:10px;justify-content:flex-end;padding:12px 16px;border-top:1px solid #eee}
.section-title{display:flex;align-items:center;justify-content:space-between;margin:10px 0}
.category{margin:16px 0}
.lead{color:var(--muted);font-size:14px}
/* Simple toast */
.toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:#333;color:#fff;padding:10px 14px;border-radius:10px;font-size:14px;display:none;z-index:90}




/* === MODAL DE FOTO DE PLATILLO === */
#fotoModal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999 !important; /* 🔥 Siempre por encima */
}

#fotoModal img {
  max-width: 90%;
  max-height: 85vh;
  border-radius: 12px;
  box-shadow: 0 4px 25px rgba(0,0,0,0.6);
  animation: zoomIn 0.25s ease;
}

#fotoModal .cerrar {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 40px;
  color: #fff;
  cursor: pointer;
  font-weight: bold;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}

@keyframes zoomIn {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ✨ Animación fly-to-cart */
.fly-clone {
  position: fixed;
  width: 60px;
  height: 60px;
  border-radius: 12px;
  pointer-events: none;
  z-index: 99999;
  transition: transform 0.7s cubic-bezier(.25,.55,.45,1), opacity 0.7s ease;
}