/* ============================
   MENU ENGEL BURGERS - MOBILE FIRST (CSS LIMPIO)
   - Mobile UX primero
   - Cards compactas + targets grandes
   - Expand: la card crece SOLO lo necesario
   - Carrito: Mobile bottom-sheet / Desktop dropdown
   - Checkout modal
============================ */

/* ============================
   BASE / RESET
============================ */
*,
*::before,
*::after{ box-sizing:border-box; }

html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

body.bodymenu{
  margin:0;
  font-family:"Outfit", sans-serif;
  background:#efefef;
  padding-top:90px; /* tu layout actual */
  -webkit-tap-highlight-color: transparent;
}

img, svg, video, canvas{
  max-width:100%;
  display:block;
}

/* ============================
   HOME (botón circular)
   Mobile: abajo izq (thumb-friendly)
============================ */
#logo-container{
  position:fixed;
  bottom:12px;
  left:12px;
  width:48px;
  height:48px;
  border-radius:999px;
  background:#fff;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
  display:grid;
  place-items:center;
  z-index:100000;
}

#logo-container a{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
}

#logo{ width:22px; height:22px; }

/* ============================
   GRID PRODUCTOS (MOBILE FIRST)
   - 2 columnas por defecto
============================ */
.productos{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:14px;
  padding:14px;
  max-width:100%;
  margin:0 auto;
  padding-bottom:110px; /* aire para flotantes */
}

/* móvil muy chico: 1 columna */
@media (max-width:380px){
  .productos{ grid-template-columns:1fr; }
}

/* ============================
   CARD PRODUCTO (Mobile UX)
   Objetivo:
   - Compacta, readable
   - CTA grande
   - Expand no rompe nada
============================ */
.producto{
  background:#fff;
  border-radius:18px;
  padding:12px;
  text-align:center;
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  position:relative;
  overflow:hidden; /* mantiene bordes redondeados */
  display:flex;
  flex-direction:column;
  gap:8px;

  /* “slot” base para que la grilla se vea consistente cerrada,
     pero SIN fijar height (eso rompe cuando expandís) */
  min-height: 370px; /* ajustable */
}

/* la abierta sube por encima, pero sigue en su lugar */
.producto.desc-open{ z-index:80; }

/* Imagen */
.producto img{
  width:100%;
  height:120px;
  object-fit:contain;
  margin:2px 0 0;
}

/* Nombre */
.producto span{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;

  line-height:1.15;
  font-weight:900;
  font-size:18px;
  color:#e31b23;
  min-height: 2.3em;
  margin:2px 0 0;
}

/* ============================
   INGREDIENTES / DESCRIPCIÓN
   - Debajo del nombre
   - Colapsa sin “pastilla rara”
   - Al abrir, empuja contenido DENTRO de la card
============================ */
.producto .product-desc{
  background:#f6f6f8;
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;

  padding:0 12px;
  max-height:0;
  overflow:hidden;

  opacity:0;
  transform: translateY(-4px);
  transition: max-height .22s ease, opacity .18s ease, transform .18s ease, padding .18s ease;
}

.producto .product-desc.open{
  padding:10px 12px;
  max-height:220px;  /* móvil: suficiente; subí si tenés textos largos */
  opacity:1;
  transform: translateY(0);
}

.producto .product-desc-title{
  font-weight:900;
  color:#111;
  font-size:13px;
  margin:0 0 6px;
}

.producto .product-desc-text{
  font-weight:700;
  color:#333;
  line-height:1.35;
  font-size:13px;
}

/* ============================
   PRECIO
============================ */
.producto .precio{
  background:#ffc400;
  color:#d40000;
  font-weight:900;
  font-size:18px;
  padding:10px 14px;
  border-radius:16px;
  width:max-content;
  margin:0 auto;
  box-shadow:0 8px 18px rgba(0,0,0,.14);
}

/* ============================
   CONTROLES CANTIDAD (targets grandes)
============================ */
.producto .number-input-container{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top: 12px;
  margin-bottom: 12px;
}

.producto .number-input-container button{
  width:44px;     /* touch target friendly */
  height:44px;
  border:none;
  background:#f0f0f2;
  font-size:18px;
  font-weight:900;
  border-radius:12px;
  cursor:pointer;
}

.producto .number-input-container input{
  width:56px;
  height:44px;
  text-align:center;
  font-weight:900;
  font-size:16px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.16);
  padding:0 8px;
  background:#fff;
}

/* ============================
   CTA AGREGAR (siempre abajo, grande)
============================ */
.producto .agregar{
  margin-top:auto;
  height:48px;            /* target grande */
  background:#e31b23;
  border:none;
  color:#fff;
  border-radius:14px;
  font-weight:900;
  width:100%;
  font-size:16px;
  box-shadow:0 10px 22px rgba(227,27,35,.22);
  cursor:pointer;
}

.producto .agregar:active{
  transform: scale(.99);
}

/* ============================
   CARRITO FLOTANTE (Mobile: abajo der)
============================ */
.cart-float{
  position:fixed;
  bottom:14px;
  right:14px;
  background:#fff;
  border-radius:999px;
  padding:12px 14px;
  box-shadow:0 18px 44px rgba(0,0,0,.26);
  z-index:99999;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  border:none;
  max-width:calc(100% - 28px);
}

/* ocultar texto “Carrito” en móvil */
.cart-float .cart-label{ display:none; }

.cart-count{
  background:#e31b23;
  color:#fff;
  font-weight:900;
  padding:6px 10px;
  border-radius:12px;
  font-size:13px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* ============================
   PANEL CARRITO - BASE
============================ */
.cart-panel{
  position:fixed;
  z-index:99998;
  background:#fff;
  box-shadow:0 26px 70px rgba(0,0,0,.35);
  overflow:auto;
  will-change:transform, opacity;
  opacity:0;
  pointer-events:none;
}

/* items */
.cart-panel #lista-carrito{
  list-style:none;
  padding:0;
  margin:0 0 12px;
  display:grid;
  gap:8px;
}

.cart-panel #lista-carrito li{
  background:#f6f6f8;
  border-radius:12px;
  padding:10px 12px;
  font-weight:800;
}

.cart-panel #lista-carrito li#total{
  background:#111;
  color:#fff;
  font-weight:900;
}

/* botones carrito */
.cart-panel button{
  width:100%;
  border:none;
  border-radius:12px;
  padding:12px;
  font-weight:900;
  cursor:pointer;
}

/* ============================
   MOBILE: bottom-sheet
============================ */
.cart-panel{
  inset:auto 0 0 0;
  width:100%;
  max-width:100%;
  border-radius:18px 18px 0 0;
  max-height:74dvh;
  padding:14px 14px calc(5rem + env(safe-area-inset-bottom));
  transform:translateY(110%);
  transition:transform .28s cubic-bezier(.2,.9,.2,1), opacity .22s ease;
}

.cart-panel.open{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

/* Botones carrito */
#finalizar-pedido{ background:#e31b23; color:#fff; }
#limpiar-carrito{ background:#e9e9ec; }

/* ============================
   POPUP CHECKOUT
============================ */
.checkout-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
  z-index:999999;
}
.checkout-overlay.show{
  opacity:1;
  pointer-events:auto;
}

.checkout-modal{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) scale(.98);
  width:min(92vw, 420px);
  background:#fff;
  border-radius:18px;
  box-shadow:0 30px 80px rgba(0,0,0,.35);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  z-index:1000000;
  border:1px solid rgba(0,0,0,.06);
}
.checkout-modal.show{
  opacity:1;
  pointer-events:auto;
  transform:translate(-50%,-50%) scale(1);
}

.checkout-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.checkout-title{
  font-weight:900;
  color:#128C7E;
  font-size:18px;
}
.checkout-x{
  width:44px;
  height:44px;
  border:none;
  background:#f3f4f6;
  border-radius:12px;
  font-size:22px;
  cursor:pointer;
}

.checkout-body{ padding:16px; display:grid; gap:12px; }

.checkout-btn{
  width:100%;
  border:none;
  border-radius:14px;
  padding:14px 14px;
  font-weight:900;
  cursor:pointer;
  font-size:15px;
}
.checkout-btn.whatsapp{
  background:#fff;
  color:#128C7E;
  border:2px solid rgba(18,140,126,.28);
  box-shadow:0 14px 34px rgba(37,211,102,.20);
}
.checkout-btn.primary{ background:#e31b23; color:#fff; }
.checkout-btn.ghost{
  background:#fff;
  color:#128C7E;
  border:1px solid rgba(18,140,126,.22);
}

.checkout-sub{
  border:1px dashed rgba(18,140,126,.35);
  border-radius:14px;
  padding:12px;
  display:grid;
  gap:10px;
}
.checkout-mini-title{ font-weight:900; color:#128C7E; font-size:14px; }
.checkout-row{ display:flex; gap:10px; }
.checkout-input{
  flex:1;
  height:46px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.15);
  padding:0 12px;
  font-weight:800;
}

/* ============================
   DESKTOP OVERRIDES (>=701px)
============================ */
@media (min-width:701px){

  /* Grid más aireada */
  .productos{
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:34px;
    padding:35px;
    max-width:1500px;
    padding-bottom:90px;
  }

  /* Card más grande */
  .producto{
    border-radius:24px;
    padding:22px;
    min-height: 460px;
    transition:transform .18s ease;
  }

  .producto:not(.desc-open):hover{
    transform:translateY(-6px) scale(1.02);
  }

  .producto img{ height:170px; }
  .producto span{ font-size:24px; min-height:2.4em; }
  .producto .precio{font-size:24px;padding:12px 16px;border-radius:18px;}
  .producto .agregar{ height:auto; padding:14px; font-size:17px; border-radius:14px; }

  /* Home arriba a la derecha del user-info (como tenías) */
  #logo-container{
    top: auto;
    bottom: 2px;
    left: auto;
    right: 2px;
    width:48px;
    height:48px;
    z-index:99990;
  }

  /* Carrito arriba derecha + mostrar texto */
  .cart-float{
    top:18px;
    bottom:auto;
    right:20px;
    border-radius:16px;
    padding:12px 18px;
  }
  .cart-float .cart-label{ display:inline; }

  /* Panel carrito dropdown */
  .cart-panel{
    top:80px;
    right:20px;
    left:auto;
    bottom:auto;
    width:340px;
    max-height:460px;
    padding:18px;
    border-radius:20px;
    transform:translateY(-16px);
    transition:transform .22s ease, opacity .18s ease;
  }
  .cart-panel.open{ transform:translateY(0); }
}

/* ============================
   Reduce motion
============================ */
@media (prefers-reduced-motion: reduce){
  .cart-panel,
  .checkout-overlay,
  .checkout-modal,
  .producto .product-desc{
    transition:none !important;
  }
}