/*
 * Menue · scroll estable v6
 * Corrección directa de las reglas que provocan repintado/jitter.
 */

/* =========================================================
   BASE DEL DOCUMENTO
   ========================================================= */
html {
  scroll-behavior: auto !important;
  overscroll-behavior-y: none !important;
}

body {
  background-attachment: scroll !important;
  overscroll-behavior-y: none !important;
}

/* =========================================================
   PORTADA / HEADER · escritorio y móvil
   ========================================================= */

/* Evita repintados pesados mientras la rueda está sobre la portada. */
.hero,
.hero-cover,
.hero-integrated-top,
.hero-integrated-main,
.hero-copy,
.hero-info-stack,
.hero-art,
.hero-art svg,
.hero-art * {
  transform: none !important;
  -webkit-transform: none !important;
  will-change: auto !important;
}

.hero-art,
.hero-art * {
  pointer-events: none !important;
}

/* Elimina filtros SVG/drop-shadow que fuerzan repaint por frame. */
.hero-art *,
.hero-icon,
.hero-symbols,
.hero-neon .hero-symbols,
.hero-art .orb,
.hero-art .hero-detail {
  filter: none !important;
  -webkit-filter: none !important;
}

/* Elimina blur en tiempo real dentro de la portada. */
.hero .info-card,
.hero .info-card.showing-order,
.hero-copy .eyebrow,
.hero .table-order-hint,
.hero .header-order-tracker,
.hero .order-tracker {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Evita crear una enorme superficie separada durante el scroll. */
.hero-cover {
  contain: none !important;
  isolation: auto !important;
}

/* =========================================================
   TOOLTIP DE INFORMACIÓN · TEMA CLARO
   ========================================================= */

/* Azul grisáceo suave: se distingue del buscador blanco sin competir con el hero. */
body[data-theme="light"] .table-order-hint {
  background: #e9f0f7 !important;
  border: 1px solid #cbd8e6 !important;
  color: #506174 !important;
  box-shadow: 0 7px 20px rgba(45, 67, 89, .08) !important;
}

body[data-theme="light"] .table-order-hint b {
  color: #2f4358 !important;
}

body[data-theme="light"] .table-order-hint button {
  color: #687b8f !important;
}

/* =========================================================
   BUSCADOR + CATEGORÍAS · UN SOLO STICKY
   ========================================================= */

.menu-sticky-card {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: -1px !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 120 !important;

  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;

  transform: none !important;
  -webkit-transform: none !important;
  will-change: auto !important;
  contain: none !important;
  isolation: auto !important;

  background: var(--page-bg2, #fbfaf7) !important;
  box-shadow: 0 1px 0 var(--line) !important;
}

.menu-sticky-card::before,
.menu-sticky-card::after {
  display: none !important;
  content: none !important;
}

/* Hijos normales: ningún sticky anidado. */
.menu-sticky-card .search-strip,
.menu-sticky-card .category-wrap {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;

  transform: none !important;
  -webkit-transform: none !important;
  will-change: auto !important;
  isolation: auto !important;

  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;

  background: var(--page-bg2, #fbfaf7) !important;
  box-shadow: none !important;
}

.menu-sticky-card .category-wrap {
  min-height: 0 !important;
  z-index: auto !important;
}

/* El scroller horizontal no debe crear otra capa de composición en Safari. */
#categoryScroller,
.category-nav .categories,
.categories {
  position: relative !important;
  z-index: auto !important;

  overflow-x: auto !important;
  overflow-y: hidden !important;

  transform: none !important;
  -webkit-transform: none !important;
  will-change: auto !important;

  -webkit-overflow-scrolling: auto !important;
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
  overscroll-behavior-x: contain !important;
}

.category-nav .cat {
  scroll-snap-align: none !important;
}

/* Neutraliza restos de las pruebas fixed anteriores. */
.menu-sticky-spacer {
  display: none !important;
}

.menu-sticky-card.is-mobile-fixed {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: -1px !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
}

/* =========================================================
   SAFARI MÓVIL
   ========================================================= */
@media (max-width: 720px) {
  html,
  body {
    overscroll-behavior: none !important;
  }

  .menu-sticky-card {
    /* Fondo opaco para evitar flashes de la capa inferior. */
    background: var(--page-bg2, #fbfaf7) !important;
    border-top: 1px solid transparent;
  }

  .menu-sticky-card,
  .menu-sticky-card *,
  .hero,
  .hero * {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .hero-art *,
  .hero-icon,
  .hero-symbols {
    filter: none !important;
    -webkit-filter: none !important;
  }
}

@supports (-webkit-touch-callout: none) {
  .menu-sticky-card {
    top: -1px !important;
  }
}


/* =========================================================
   v8 · PORTADA FLUIDA EN ESCRITORIO
   ========================================================= */
@media (min-width: 721px) and (hover: hover) and (pointer: fine) {
  /*
   * La portada completa deja de participar del hit-testing del mouse.
   * Sólo los controles realmente interactivos vuelven a recibir eventos.
   * Esto evita recálculos de :hover mientras distintos elementos pasan
   * bajo el cursor durante el scroll.
   */
  .hero {
    pointer-events: none !important;
  }

  .hero a,
  .hero button,
  .hero input,
  .hero textarea,
  .hero select,
  .hero label,
  .hero [role="button"] {
    pointer-events: auto !important;
  }

  /* No necesitamos transiciones hover en la portada mientras se desplaza. */
  .hero *,
  .hero *::before,
  .hero *::after {
    transition: none !important;
  }

  /*
   * La portada se pinta como una única superficie independiente.
   * No afecta al sticky porque está fuera del header.
   */
  .hero-cover {
    contain: paint !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    will-change: transform !important;
  }

  .hero-art,
  .hero-art svg {
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
  }
}

/* =========================================================
   v8 · TARJETAS DE PRODUCTO MÁS COMPACTAS
   ========================================================= */
.product {
  min-height: 156px !important;
  grid-template-columns: 132px minmax(0, 1fr) !important;
  gap: 13px !important;
  padding: 10px !important;
}

.product-img {
  height: 132px !important;
  min-height: 132px !important;
}

.product-body {
  min-width: 0;
  padding: 3px 4px 3px 0 !important;
}

.product p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.product .badge {
  margin-bottom: 6px !important;
}

.product-bottom {
  gap: 7px !important;
}

/* Menue de consulta: carta sin envío de pedidos. */
body[data-plan="basic"] .product-add,
body[data-plan="basic"] .product-modal-actions,
body[data-plan="basic"] #cartButton,
body[data-plan="basic"] .cart-fab,
body[data-plan="basic"] .drawer-backdrop,
body[data-plan="basic"] .cart-drawer {
  display: none !important;
}

body[data-plan="basic"] .product-bottom {
  display: block !important;
}

body[data-plan="basic"] .product-bottom .price {
  margin-top: auto !important;
}

@media (max-width: 800px) {
  /* En móvil anulamos cualquier promoción de capa del hero:
     conserva exactamente la estabilidad conseguida en Safari. */
  .hero-cover,
  .hero-art,
  .hero-art svg {
    transform: none !important;
    -webkit-transform: none !important;
    will-change: auto !important;
    contain: none !important;
  }

  .product {
    min-height: 128px !important;
    grid-template-columns: 108px minmax(0, 1fr) !important;
    gap: 11px !important;
    padding: 9px !important;
  }

  .product-img {
    height: 108px !important;
    min-height: 108px !important;
    border-radius: 15px !important;
  }

  .product h4 {
    margin-bottom: 5px !important;
  }
}

@media (max-width: 430px) {
  .product {
    min-height: 116px !important;
    grid-template-columns: 98px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 8px !important;
  }

  .product-img {
    height: 100px !important;
    min-height: 100px !important;
  }

  .product p {
    -webkit-line-clamp: 2;
  }
}


/* =========================================================
   v9 · TARJETAS: precio a la derecha + imagen +20px
   ========================================================= */

/* La tarjeta mantiene el layout compacto, pero con imagen más alta. */
.product {
  position: relative !important;
  min-height: 176px !important;
}

.product-img {
  height: 152px !important;
  min-height: 152px !important;
}

/* El cuerpo ocupa toda la altura útil de la tarjeta. */
.product-body {
  display: flex !important;
  flex-direction: column !important;
  min-height: 152px !important;
}

/* Evita el espacio muerto entre descripción y precio. */
.product-body > p {
  margin-bottom: 0 !important;
}

/* El precio queda visualmente separado y flotando a la derecha. */
.product-bottom {
  margin-top: 6px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

/* Precio siempre alineado a la derecha de la tarjeta. */
.product-bottom .price,
.product .price {
  margin-left: auto !important;
  margin-top: 0 !important;
  text-align: right !important;
  white-space: nowrap !important;
  align-self: flex-end !important;
}

/* En Pro, los controles quedan a la izquierda y el precio a la derecha. */
body[data-plan="pro"] .product-bottom {
  justify-content: space-between !important;
}

body[data-plan="pro"] .product-add {
  order: 1;
}

body[data-plan="pro"] .product-bottom .price {
  order: 2;
}

/* En Básico sólo queda el precio flotando a la derecha. */
body[data-plan="basic"] .product-bottom {
  display: flex !important;
  justify-content: flex-end !important;
}

body[data-plan="basic"] .product-bottom .price {
  margin-left: auto !important;
}

/* Móvil: también +20px respecto a v8. */
@media (max-width: 800px) {
  .product {
    min-height: 148px !important;
  }

  .product-img {
    height: 128px !important;
    min-height: 128px !important;
  }

  .product-body {
    min-height: 128px !important;
  }
}

@media (max-width: 430px) {
  .product {
    min-height: 136px !important;
  }

  .product-img {
    height: 120px !important;
    min-height: 120px !important;
  }

  .product-body {
    min-height: 120px !important;
  }
}


/* =========================================================
   v10 · PRECIO PEGADO ABAJO A LA DERECHA
   ========================================================= */

.product {
  position: relative !important;
}

/* Reservamos sólo el espacio mínimo necesario para el precio. */
.product-body {
  padding-bottom: 28px !important;
}

/* El precio queda fuera del flujo y pegado al borde inferior útil. */
.product-bottom .price,
.product .price {
  position: absolute !important;
  right: 12px !important;
  bottom: 7px !important;
  margin: 0 !important;
  text-align: right !important;
  white-space: nowrap !important;
}

/* En Básico no necesitamos reservar espacio para controles. */
body[data-plan="basic"] .product-body {
  padding-bottom: 24px !important;
}

/* En Pro dejamos los controles en su lugar, sólo el precio flota. */
body[data-plan="pro"] .product-bottom {
  padding-right: 78px !important;
}

@media (max-width: 800px) {
  .product-bottom .price,
  .product .price {
    right: 10px !important;
    bottom: 6px !important;
  }

  .product-body {
    padding-bottom: 25px !important;
  }
}

@media (max-width: 430px) {
  .product-bottom .price,
  .product .price {
    right: 9px !important;
    bottom: 5px !important;
  }
}


/* =========================================================
   v11 · ELIMINAR ALTURA VACÍA DE LAS TARJETAS
   El CSS base tenía height:220px; aquí se reemplaza de verdad.
   ========================================================= */

.product {
  height: 176px !important;
  min-height: 176px !important;
  max-height: 176px !important;
}

.product-img {
  height: 152px !important;
  min-height: 152px !important;
  max-height: 152px !important;
}

.product-body {
  height: 152px !important;
  min-height: 152px !important;
  max-height: 152px !important;
}

/* Precio casi al ras del borde inferior útil. */
.product-bottom .price,
.product .price {
  bottom: 6px !important;
}

/* Móvil: misma lógica compacta, sin heredar los 230/220px del CSS base. */
@media (max-width: 800px) {
  .product {
    height: 148px !important;
    min-height: 148px !important;
    max-height: 148px !important;
  }

  .product-img {
    height: 128px !important;
    min-height: 128px !important;
    max-height: 128px !important;
  }

  .product-body {
    height: 128px !important;
    min-height: 128px !important;
    max-height: 128px !important;
  }

  .product-bottom .price,
  .product .price {
    bottom: 5px !important;
  }
}

@media (max-width: 430px) {
  .product {
    height: 136px !important;
    min-height: 136px !important;
    max-height: 136px !important;
  }

  .product-img {
    height: 120px !important;
    min-height: 120px !important;
    max-height: 120px !important;
  }

  .product-body {
    height: 120px !important;
    min-height: 120px !important;
    max-height: 120px !important;
  }

  .product-bottom .price,
  .product .price {
    bottom: 4px !important;
  }
}


/* =========================================================
   v12 · LOCALES CON PEDIDOS: controles y precio en la misma fila
   ========================================================= */

body[data-plan="pro"] .product-bottom {
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  bottom: 6px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;

  margin: 0 !important;
  padding: 0 !important;
}

/* En Pro, el precio vuelve al flujo de esa fila inferior. */
body[data-plan="pro"] .product-bottom .price,
body[data-plan="pro"] .product .price {
  position: static !important;
  inset: auto !important;
  margin: 0 0 0 auto !important;
  align-self: center !important;
  text-align: right !important;
  white-space: nowrap !important;
  order: 2 !important;
}

/* Los controles quedan alineados a la izquierda de la misma fila. */
body[data-plan="pro"] .product-add {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin: 0 !important;
  order: 1 !important;
}

/* Deja espacio real para la fila inferior sin aumentar la tarjeta. */
body[data-plan="pro"] .product-body {
  padding-bottom: 42px !important;
}

@media (max-width: 800px) {
  body[data-plan="pro"] .product-bottom {
    left: 10px !important;
    right: 10px !important;
    bottom: 5px !important;
    gap: 8px !important;
  }

  body[data-plan="pro"] .product-body {
    padding-bottom: 40px !important;
  }
}

@media (max-width: 430px) {
  body[data-plan="pro"] .product-bottom {
    left: 9px !important;
    right: 9px !important;
    bottom: 4px !important;
    gap: 6px !important;
  }

  body[data-plan="pro"] .product-add {
    gap: 5px !important;
  }
}


/* =========================================================
   v13 · LOCALES CON PEDIDOS: fila inferior dentro de la columna de texto
   ========================================================= */

body[data-plan="pro"] .product-body {
  position: relative !important;
}

/* La fila ya no toma como referencia toda la tarjeta:
   queda limitada al ancho del contenido, después de la imagen. */
body[data-plan="pro"] .product-bottom {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 3px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;

  margin: 0 !important;
  padding: 0 !important;
}

/* Controles inmediatamente a la izquierda del precio. */
body[data-plan="pro"] .product-add {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin: 0 !important;
  order: 1 !important;
}

body[data-plan="pro"] .product-bottom .price,
body[data-plan="pro"] .product .price {
  position: static !important;
  inset: auto !important;
  margin: 0 !important;
  text-align: right !important;
  white-space: nowrap !important;
  align-self: center !important;
  order: 2 !important;
}

/* El contenido superior deja espacio justo para la fila inferior. */
body[data-plan="pro"] .product-body {
  padding-bottom: 42px !important;
}

@media (max-width: 800px) {
  body[data-plan="pro"] .product-bottom {
    bottom: 2px !important;
    gap: 8px !important;
  }

  body[data-plan="pro"] .product-body {
    padding-bottom: 40px !important;
  }
}

@media (max-width: 430px) {
  body[data-plan="pro"] .product-bottom {
    bottom: 1px !important;
    gap: 6px !important;
  }

  body[data-plan="pro"] .product-add {
    gap: 5px !important;
  }
}


/* =========================================================
   v15 · LOCALES CON PEDIDOS: liberar el borde derecho para el scroll
   ========================================================= */

/* El drawer cerrado no debe participar del hit-testing.
   Antes seguía siendo position:fixed y sólo se movía fuera de pantalla. */
.cart-drawer:not(.open) {
  pointer-events: none !important;
  visibility: hidden !important;
}

/* Al abrirlo recupera interacción normal. */
.cart-drawer.open {
  pointer-events: auto !important;
  visibility: visible !important;
}

/* El backdrop cerrado tampoco captura rueda/clics. */
.drawer-backdrop:not(.open) {
  pointer-events: none !important;
  visibility: hidden !important;
}

.drawer-backdrop.open {
  pointer-events: auto !important;
  visibility: visible !important;
}

/* Blindaje para overlays de pedidos mientras están cerrados. */
body[data-plan="pro"] .waiter-confirm-modal:not(.open),
body[data-plan="pro"] .table-modal:not(.open),
body[data-plan="pro"] .orders-history-modal:not(.open),
body[data-plan="pro"] .app-modal:not(.open),
body[data-plan="pro"] .product-modal:not(.open) {
  pointer-events: none !important;
}

/* Contenedores flotantes vacíos no deben bloquear la rueda. */
body[data-plan="pro"] #orderNotifications:empty {
  pointer-events: none !important;
}


/* =========================================================
   MODAL DE PRODUCTO · PRECIO A LA DERECHA Y EN NEGRITA
   ========================================================= */

.product-modal-bottom {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.product-modal-actions {
  order: 1 !important;
}

#productModalPrice {
  order: 2 !important;
  margin-left: auto !important;
  text-align: right !important;
  white-space: nowrap !important;
  font-weight: 900 !important;
}


/* =========================================================
   CATEGORÍAS MÁS COMPACTAS
   ========================================================= */

/* Menos espacio externo entre categorías. */
#categoryScroller,
.category-nav .categories,
.categories {
  gap: 4px !important;
}

/* Menos espacio interno de cada botón. */
.category-nav .cat,
.categories .cat,
.cat {
  padding: 5px 8px !important;
  min-height: 30px !important;
}

/* Compacta también el espacio alrededor de la fila. */
.category-nav {
  gap: 4px !important;
}

.category-wrap {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

@media (max-width: 720px) {
  #categoryScroller,
  .category-nav .categories,
  .categories {
    gap: 3px !important;
  }

  .category-nav .cat,
  .categories .cat,
  .cat {
    padding: 4px 7px !important;
    min-height: 28px !important;
  }

  .category-wrap {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
  }
}


/* =========================================================
   CATEGORÍAS · MÁS ALTAS Y TEXTO MÁS GRANDE
   Mantiene el ancho horizontal actual.
   ========================================================= */

.category-nav .cat,
.categories .cat,
.cat {
  /* Conserva el ancho: padding horizontal sigue en 8px */
  padding: 7px 8px !important;
  min-height: 34px !important;
  font-size: calc(1em + 1px) !important;
}

@media (max-width: 720px) {
  .category-nav .cat,
  .categories .cat,
  .cat {
    /* Conserva el ancho móvil: padding horizontal sigue en 7px */
    padding: 6px 7px !important;
    min-height: 32px !important;
    font-size: calc(1em + 1px) !important;
  }
}


/* =========================================================
   SCROLLBAR MENUE · ESCRITORIO
   ========================================================= */

@media (min-width: 721px) and (hover: hover) and (pointer: fine) {

  /* Firefox */
  html {
    scrollbar-width: thin;
    scrollbar-color: var(--ink, #171714) var(--page-bg2, #fbfaf7);
  }

  /* Chrome / Edge / Safari escritorio */
  html::-webkit-scrollbar {
    width: 11px;
  }

  html::-webkit-scrollbar-track {
    background: var(--page-bg2, #fbfaf7);
  }

  html::-webkit-scrollbar-thumb {
    background: var(--ink, #171714);
    border: 3px solid var(--page-bg2, #fbfaf7);
    border-radius: 999px;
  }

  html::-webkit-scrollbar-thumb:hover {
    background: var(--accent, #d7ff3f);
  }

  html::-webkit-scrollbar-corner {
    background: var(--page-bg2, #fbfaf7);
  }

  /* Tema oscuro */
  body[data-theme="dark"] {
    scrollbar-color: var(--accent, #d7ff3f) var(--page-bg2, #0f100e);
  }

  body[data-theme="dark"]::-webkit-scrollbar-track,
  body[data-theme="dark"] html::-webkit-scrollbar-track {
    background: var(--page-bg2, #0f100e);
  }

  body[data-theme="dark"]::-webkit-scrollbar-thumb,
  body[data-theme="dark"] html::-webkit-scrollbar-thumb {
    background: var(--accent, #d7ff3f);
    border-color: var(--page-bg2, #0f100e);
  }

  body[data-theme="dark"]::-webkit-scrollbar-thumb:hover,
  body[data-theme="dark"] html::-webkit-scrollbar-thumb:hover {
    background: #ffffff;
  }
}


/* =========================================================
   PREMIUM MÓVIL · evitar solape descripción / Agregar + precio
   ========================================================= */
@media (max-width: 800px) {
  body[data-plan="pro"] .product-body {
    position: relative !important;
    padding-bottom: 46px !important;
  }

  body[data-plan="pro"] .product-body > p {
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
  }

  body[data-plan="pro"] .product-bottom {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    min-height: 36px !important;
    align-items: center !important;
  }

  body[data-plan="pro"] .product-add,
  body[data-plan="pro"] .product-bottom .price {
    flex: 0 0 auto !important;
  }

  body[data-plan="pro"] .product-bottom .price {
    margin-left: auto !important;
    text-align: right !important;
  }
}

@media (max-width: 430px) {
  body[data-plan="pro"] .product-body {
    padding-bottom: 44px !important;
  }

  body[data-plan="pro"] .product-bottom {
    bottom: 0 !important;
    min-height: 34px !important;
  }
}


/* =========================================================
   PREMIUM MÓVIL · controles realmente en la fila del precio
   ========================================================= */
@media (max-width: 800px) {
  body[data-plan="pro"] .product-bottom {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;

    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* El CSS base posicionaba este bloque por separado.
     Lo devolvemos al flujo de .product-bottom. */
  body[data-plan="pro"] .product-add {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    -webkit-transform: none !important;

    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    gap: 6px !important;
    margin: 0 !important;
    order: 1 !important;
  }

  body[data-plan="pro"] .product-bottom .price,
  body[data-plan="pro"] .product .price {
    position: static !important;
    inset: auto !important;
    transform: none !important;

    flex: 0 0 auto !important;
    margin: 0 !important;
    text-align: right !important;
    white-space: nowrap !important;
    order: 2 !important;
  }

  /* Reserva física para esa fila inferior. */
  body[data-plan="pro"] .product-body {
    padding-bottom: 44px !important;
  }

  body[data-plan="pro"] .product-body > p {
    margin: 0 !important;
    padding: 0 !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    overflow: hidden !important;
  }
}

@media (max-width: 430px) {
  body[data-plan="pro"] .product-bottom {
    gap: 6px !important;
    min-height: 36px !important;
  }

  body[data-plan="pro"] .product-add {
    gap: 5px !important;
  }

  body[data-plan="pro"] .product-body {
    padding-bottom: 42px !important;
  }
}


/* =========================================================
   MODAL PRODUCTO · controles y precio en una misma fila
   ========================================================= */
.product-modal-bottom {
  position: relative !important;
  width: 100% !important;

  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;

  margin: 0 !important;
  padding: 0 !important;
}

.product-modal-actions {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  -webkit-transform: none !important;

  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 7px !important;

  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  order: 1 !important;
}

#productModalPrice {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;

  display: block !important;
  flex: 0 0 auto !important;
  align-self: center !important;
  margin: 0 0 0 auto !important;

  line-height: 1 !important;
  text-align: right !important;
  white-space: nowrap !important;
  font-weight: 900 !important;
  order: 2 !important;
}

@media (max-width: 800px) {
  .product-modal-bottom {
    gap: 8px !important;
  }

  .product-modal-actions {
    gap: 6px !important;
  }
}


/* =========================================================
   PREMIUM · altura suficiente para contenido + controles
   Sólo corrige las tarjetas Pro; Básico conserva su tamaño.
   ========================================================= */
@media (max-width: 800px) {
  body[data-plan="pro"] .product {
    height: 164px !important;
    min-height: 164px !important;
    max-height: 164px !important;
  }

  body[data-plan="pro"] .product-img {
    height: 144px !important;
    min-height: 144px !important;
    max-height: 144px !important;
  }

  body[data-plan="pro"] .product-body {
    height: 144px !important;
    min-height: 144px !important;
    max-height: 144px !important;
    padding-bottom: 44px !important;
  }

  body[data-plan="pro"] .product-body > p {
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    overflow: hidden !important;
  }
}

@media (max-width: 430px) {
  body[data-plan="pro"] .product {
    height: 154px !important;
    min-height: 154px !important;
    max-height: 154px !important;
  }

  body[data-plan="pro"] .product-img {
    height: 136px !important;
    min-height: 136px !important;
    max-height: 136px !important;
  }

  body[data-plan="pro"] .product-body {
    height: 136px !important;
    min-height: 136px !important;
    max-height: 136px !important;
    padding-bottom: 42px !important;
  }
}


/* =========================================================
   MODAL PRODUCTO · controles alineados con el precio
   ========================================================= */
.product-modal-bottom {
  width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.product-modal-actions {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  -webkit-transform: none !important;

  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 7px !important;

  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  order: 1 !important;
}

#productModalPrice {
  position: static !important;
  inset: auto !important;
  transform: none !important;

  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;

  margin: 0 0 0 auto !important;
  padding: 0 !important;

  line-height: 1 !important;
  text-align: right !important;
  white-space: nowrap !important;
  font-weight: 900 !important;
  order: 2 !important;
}

@media (max-width: 800px) {
  .product-modal-bottom {
    gap: 8px !important;
  }

  .product-modal-actions {
    gap: 6px !important;
  }
}

@media (max-width: 430px) {
  .product-modal-bottom {
    gap: 6px !important;
  }

  .product-modal-actions {
    gap: 5px !important;
  }
}


/* =========================================================
   MODAL PRODUCTO · grupo completo alineado a la derecha
   cantidad + Agregar + precio, igual que en la carta
   ========================================================= */
.product-modal-bottom {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  width: 100% !important;
}

.product-modal-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 7px !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  order: 1 !important;
}

#productModalPrice {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: right !important;
  white-space: nowrap !important;
  font-weight: 900 !important;
  order: 2 !important;
}

@media (max-width: 800px) {
  .product-modal-bottom {
    justify-content: flex-end !important;
    gap: 8px !important;
  }

  .product-modal-actions {
    gap: 6px !important;
  }
}

@media (max-width: 430px) {
  .product-modal-bottom {
    gap: 6px !important;
  }

  .product-modal-actions {
    gap: 5px !important;
  }
}


/* =========================================================
   WEB · ESTABILIDAD DE PINTADO DE TARJETAS
   Evita desapariciones/reapariciones durante el scroll.
   ========================================================= */
@media (min-width: 801px) {
  .product,
  .product-img,
  .product-body,
  .product-bottom,
  .product-add {
    transform: none !important;
    -webkit-transform: none !important;
    will-change: auto !important;
    contain: none !important;
  }

  .product {
    transition: box-shadow .18s ease !important;
  }

  .product:hover {
    transform: none !important;
    -webkit-transform: none !important;
  }
}


/* =========================================================
   MODAL PRODUCTO · WEB
   Abajo a la derecha SIN alterar la grilla ni el contenido.
   ========================================================= */
@media (min-width: 801px) {
  .product-modal-card {
    position: relative !important;
  }

  /* Reserva espacio para la barra fija inferior sin cambiar
     display/grid/flex del contenido del modal. */
  .product-modal-content {
    padding-bottom: 86px !important;
  }

  .product-modal-bottom {
    position: absolute !important;
    right: 25px !important;
    bottom: 25px !important;
    left: auto !important;
    top: auto !important;

    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;

    transform: none !important;
    -webkit-transform: none !important;
  }

  .product-modal-actions {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    -webkit-transform: none !important;
    margin: 0 !important;
  }

  #productModalPrice {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    margin: 0 !important;
  }
}
+
/* =========================================================
   v16 · MENÚ EN GRILLA · 4 ESCRITORIO / 2 MÓVIL
   Tarjetas verticales inspiradas en la referencia de La Piccola Italia.
   ========================================================= */

/* El ancho de la tarjeta permite ver más productos sin perder legibilidad. */
.product-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 20px !important;
  align-items: stretch !important;
}

/* Imagen arriba, contenido abajo. Se eliminan las alturas heredadas de
   las correcciones anteriores para que la grilla pueda igualar cada fila. */
.product {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 13px !important;
  gap: 0 !important;
  overflow: hidden !important;
  border-radius: 21px !important;
}

.product-img {
  display: block !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  min-height: 0 !important;
  max-height: none !important;
  border-radius: 15px !important;
  object-fit: cover !important;
}

.product-body {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-width: 0 !important;
  min-height: 132px !important;
  height: auto !important;
  max-height: none !important;
  padding: 12px 2px 0 !important;
}

.product .badge {
  margin: 0 0 7px !important;
  padding: 5px 8px !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

.product h4 {
  margin: 0 0 6px !important;
  font-size: 17px !important;
  line-height: 1.15 !important;
}

.product p {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  line-clamp: 3 !important;
  margin: 0 !important;
  overflow: hidden !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

/* Precio y acciones vuelven al flujo normal de la tarjeta. */
.product-bottom,
body[data-plan="basic"] .product-bottom,
body[data-plan="pro"] .product-bottom {
  position: static !important;
  inset: auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: auto 0 0 !important;
  padding: 13px 0 0 !important;
  gap: 8px !important;
}

.product-bottom .price,
.product .price,
body[data-plan="pro"] .product-bottom .price,
body[data-plan="pro"] .product .price {
  position: static !important;
  inset: auto !important;
  flex: 0 0 auto !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  white-space: nowrap !important;
  font-size: 17px !important;
}

body[data-plan="pro"] .product-add {
  display: flex !important;
  width: auto !important;
  min-width: 0 !important;
  flex: 0 1 auto !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 5px !important;
  margin: 0 !important;
}

body[data-plan="pro"] .product-qty,
body[data-plan="pro"] .product-add .add-btn {
  height: 34px !important;
}

body[data-plan="pro"] .product-qty {
  flex: 0 0 auto !important;
}

body[data-plan="pro"] .product-add .add-btn {
  flex: 0 0 auto !important;
  padding: 8px 9px !important;
  white-space: nowrap !important;
}

/* En anchos intermedios, las acciones pueden pasar a una segunda línea
   para no comprimir ni desbordar la tarjeta. */
@media (max-width: 1050px) {
  body[data-plan="pro"] .product-bottom {
    flex-wrap: wrap !important;
    row-gap: 6px !important;
  }

  body[data-plan="pro"] .product-add {
    margin-left: auto !important;
  }
}

@media (max-width: 800px) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .product {
    padding: 8px !important;
    border-radius: 17px !important;
  }

  .product-img {
    border-radius: 11px !important;
  }

  .product-body {
    min-height: 116px !important;
    padding: 9px 1px 0 !important;
  }

  .product .badge {
    margin-bottom: 5px !important;
    padding: 4px 6px !important;
    font-size: 8px !important;
  }

  .product h4 {
    margin-bottom: 5px !important;
    font-size: 15px !important;
  }

  .product p {
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

  .product-bottom,
  body[data-plan="basic"] .product-bottom,
  body[data-plan="pro"] .product-bottom {
    padding-top: 10px !important;
    gap: 4px !important;
  }

  .product-bottom .price,
  .product .price {
    font-size: 14px !important;
  }

  body[data-plan="pro"] .product-add {
    gap: 3px !important;
  }

  body[data-plan="pro"] .product-qty,
  body[data-plan="pro"] .product-add .add-btn {
    height: 29px !important;
  }

  body[data-plan="pro"] .product-qty button {
    width: 24px !important;
    font-size: 16px !important;
  }

  body[data-plan="pro"] .product-qty strong {
    min-width: 20px !important;
    font-size: 12px !important;
  }

  body[data-plan="pro"] .product-add .add-btn {
    padding: 6px 7px !important;
    font-size: 10px !important;
  }
}

@media (max-width: 360px) {
  .product-grid {
    gap: 9px !important;
  }

  .product {
    padding: 7px !important;
  }

  .product-body {
    min-height: 108px !important;
    padding-top: 8px !important;
  }

  .product h4 {
    font-size: 14px !important;
  }

  .product p {
    font-size: 10px !important;
  }

  .product-bottom .price,
  .product .price {
    font-size: 13px !important;
  }
}

/* Escritorio: reduce únicamente la altura de la imagen del producto.
   La versión móvil conserva la proporción cuadrada definida arriba. */
@media (min-width: 801px) {
  .product-img {
    aspect-ratio: 5 / 3 !important;
  }
}

/* Escritorio: tarjetas horizontales compactas.
   La imagen queda a la izquierda y el contenido a la derecha. */
@media (min-width: 801px) {
  .product {
    display: grid !important;
    grid-template-columns: minmax(0, 40%) minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    align-items: stretch !important;
    height: 170px !important;
    min-height: 170px !important;
    max-height: 170px !important;
    padding: 10px !important;
    gap: 11px !important;
  }

  .product-img {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    border-radius: 13px !important;
    object-fit: cover !important;
  }

  .product-body {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: none !important;
    padding: 2px 0 0 !important;
    overflow: hidden !important;
  }

  .product .badge {
    margin: 0 0 5px !important;
    padding: 4px 6px !important;
    font-size: 8px !important;
  }

  .product h4 {
    margin: 0 0 5px !important;
    font-size: 15px !important;
    line-height: 1.12 !important;
  }

  .product p {
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    font-size: 11px !important;
    line-height: 1.28 !important;
  }

  .product-bottom,
  body[data-plan="basic"] .product-bottom,
  body[data-plan="pro"] .product-bottom {
    flex-wrap: wrap !important;
    row-gap: 5px !important;
    padding-top: 6px !important;
    gap: 5px !important;
  }

  .product-bottom .price,
  .product .price {
    font-size: 14px !important;
  }

  body[data-plan="pro"] .product-add {
    margin-left: auto !important;
    gap: 3px !important;
  }

  body[data-plan="pro"] .product-qty,
  body[data-plan="pro"] .product-add .add-btn {
    height: 29px !important;
  }

  body[data-plan="pro"] .product-qty button {
    width: 24px !important;
    font-size: 16px !important;
  }

  body[data-plan="pro"] .product-qty strong {
    min-width: 20px !important;
    font-size: 12px !important;
  }

  body[data-plan="pro"] .product-add .add-btn {
    padding: 6px 7px !important;
    font-size: 10px !important;
  }
}