/* ===== Wings Menu (Mockup UI) ===== */

.wx-wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 8px !important;
}

/* Alert suave (no grita, susurra) */
.wx-alert-soft{
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
}

/* Título “Categorías” */
.wx-cats-title{
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: .2px;
  margin: 4px 0 10px;
  color: rgba(0,0,0,.78);
}

/* Barra categorías (chips) */
.wx-cats{
  display:flex;
  gap:10px;
  overflow:auto;
  padding: 2px 2px 10px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.wx-cats::-webkit-scrollbar{ display:none; }

.wx-cat{
  flex: 0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background:#fff;
  font-weight: 900;
  font-size: 1.3rem;
  line-height: 1;
  color: rgba(0,0,0,.65);
  text-decoration:none;
  white-space: nowrap;
  cursor: pointer;
}

/* ✅ conteo OFF */
.wx-cat-count{ display:none !important; }

.wx-cat.is-active{
  border-color: rgba(37,99,235,.25);
  background: rgba(37,99,235,.10);
  color: rgba(0,0,0,.78);
}

/* ===========================
   Grid cards (compactas)
   =========================== */

.wx-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (min-width: 768px){
  .wx-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 992px){
  .wx-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ===========================
   Card compacta + imagen rectangular
   =========================== */

.wx-card{
  background:#fff;
  border-radius: 16px;
  overflow:hidden;
  box-shadow: 0 14px 30px rgba(15,23,42,.10);
  border: 1px solid rgba(15,23,42,.08);
}

/* Toda la card clickeable */
.wx-card-link{
  display:block;
  text-decoration:none;
  color: inherit;
}
.wx-card-link.is-disabled{
  pointer-events:none;
  opacity:.55;
}

.wx-card-form{ margin:0; }

.wx-card-btn{
  width:100%;
  text-align:left;
  border:none;
  padding:0;
  background: transparent;
  cursor:pointer;
}

/* Imagen: rectangular, sin alturas fijas */
.wx-thumb{
  position:relative;
  width:100%;
  aspect-ratio: 16 / 9; /* ✅ mockup: horizontal */
  background:#f1f5f9;
  overflow:hidden;
}
.wx-thumb img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

/* Cuerpo de la card: compacto */
.wx-bd{
  padding: 8px 10px;
}

.wx-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 8px;
}

.wx-price{
  font-weight: 900;
  font-size: .98rem;
  line-height: 1;
  color: rgba(0,0,0,.72);
}

/* ✅ ya no mostramos nombre ni plus */
.wx-name{ display:none !important; }
.wx-plus{ display:none !important; }

/* Touch feel (tipo app) */
.wx-card-link:active,
.wx-card-btn:active{
  transform: scale(.985);
}

/* Quitar estilos feos de botón (iOS/Chrome) */
.wx-card-btn:focus{ outline:none; }
.wx-card-btn::-moz-focus-inner{ border:0; }
.wx-card-btn,
.wx-cat{
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* Overlay sutil al hover SOLO en desktop (no molestar en móvil) */
@media (hover:hover) and (pointer:fine){
  .wx-card-link:hover,
  .wx-card-btn:hover{
    transform: translateY(-1px);
  }

  .wx-card-link .wx-thumb::after,
  .wx-card-btn .wx-thumb::after{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 45%, rgba(0,0,0,.10));
    opacity:0;
    transition: opacity .15s ease;
  }

  .wx-card-link:hover .wx-thumb::after,
  .wx-card-btn:hover .wx-thumb::after{
    opacity:1;
  }
}

/* En móvil: más apretado todavía para ver más items */
@media (max-width: 420px){
  .wx-grid{ gap: 8px; }
  .wx-bd{ padding: 7px 9px; }
  .wx-price{ font-size: .95rem; }
}

/* Extra: pantallas muy pequeñas */
@media (max-width: 360px){
  .wx-cat{ padding: 9px 12px; font-size: .88rem; }
}


/* Swipe area: que cubra el espacio vacío para poder hacer swipe */
#wxSwipeArea{
  min-height: calc(100vh - 210px);
}
@supports (height: 100svh){
  #wxSwipeArea{ min-height: calc(100svh - 210px); }
}

#wxMenuGrid{
  align-content: start;
}