/* ============================================================
   REDISENO MENU DE CLIENTE (storefront) — inspirado en menu.fu.do
   Scope: tarjetas de item del menu (.list-item-rows) y pills de precio
   ============================================================ */

.list-item-rows {
  border: none !important;
  border-radius: 16px;
  box-shadow: 0 2px 9px rgba(161,153,153,.35);
  padding: 0 !important;
  margin-bottom: 18px;
  overflow: hidden;
  background: #fff;
}

.list-item-rows .row.m-0 {
  align-items: flex-start;
}

.list-item-rows .col-3 {
  padding: 0 !important;
  flex: 0 0 38% !important;
  max-width: 38% !important;
}

.list-item-rows .col-9 {
  padding: 18px !important;
  flex: 0 0 62% !important;
  max-width: 62% !important;
}

.list-item-rows .item-image-preview,
.list-item-rows .item-image-preview .el-image,
.list-item-rows .skeleton-placeholder {
  height: 180px !important;
  min-height: 180px !important;
  display: block;
}

.list-item-rows img,
.list-item-rows .el-image__inner {
  height: 180px !important;
  width: 100% !important;
  object-fit: cover !important;
}

.list-item-rows .fixed-height {
  min-height: 180px;
}

/* Pills de tamano/variante — de negro solido a tinte suave de marca */
.btn-group .btn {
  border-radius: 999px !important;
  padding: 7px 16px !important;
  border: 1px solid transparent !important;
  transition: background .15s, color .15s;
}
.btn-group label {
  background: #F1F5F9;
  color: #334155;
}
.btn-group .btn.active {
  background: rgba(62,207,142,.14) !important;
  color: #1F7A4D !important;
  border-color: rgba(62,207,142,.5) !important;
  font-weight: 600;
}

/* Boton "Agregar al carrito" y precio final destacado — mas redondeado */
.list-item-rows .el-button {
  border-radius: 999px !important;
  font-weight: 600;
  padding: 10px 22px !important;
}

.list-item-rows .prices {
  font-size: 16px;
  color: #1F1F1F;
}

/* Modales (detalle de item, edad, etc.) — redondeados y sombra tibia, consistente con las cards */
.el-dialog {
  border-radius: 20px !important;
  box-shadow: 0 8px 32px rgba(161,153,153,.4) !important;
  overflow: hidden;
}
.el-dialog__header {
  padding: 20px 24px 12px;
}
.el-dialog__body {
  padding: 0 24px 24px;
}

/* ============================================================
   HERO del header de restaurante — foto full-bleed con texto
   superpuesto (inspirado en menu.fu.do), solo CSS, sin tocar HTML.
   Reordena las mismas dos columnas que ya existen en el DOM.
   ============================================================ */
.merchant-top-header .row {
  position: relative;
  margin: 0;
}
.merchant-top-header .col-6.right-infox {
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
  padding: 0 !important;
  height: 380px;
  border-radius: 20px;
  overflow: hidden;
}
.merchant-top-header .col-6.right-infox .el-image {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
}
.merchant-top-header .col-6.right-infox .el-image__inner {
  object-fit: cover !important;
  width: 100%;
  height: 100%;
}
.merchant-top-header .col-6.left-info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: 100%;
  z-index: 2;
  padding: 32px 32px 22px !important;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.18) 45%, rgba(0,0,0,.78) 100%);
  border-radius: 0 0 20px 20px;
}
.merchant-top-header .left-info h4,
.merchant-top-header .left-info ul,
.merchant-top-header .left-info li,
.merchant-top-header .left-info .text-grey,
.merchant-top-header .left-info a {
  color: #fff !important;
}
.merchant-top-header .left-info h4 {
  font-size: 30px;
  font-weight: 700;
  text-shadow: 0 2px 14px rgba(0,0,0,.45);
  margin-bottom: 8px;
}
.merchant-top-header .left-info .info-items-dot-separator {
  background: rgba(255,255,255,.5);
}
.merchant-top-header .left-info .el-image.img-thumbnail {
  border-radius: 50% !important;
  border: 3px solid #fff !important;
  width: 76px !important;
  height: 76px !important;
  min-width: 76px !important;
  min-height: 76px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  background: #fff;
  overflow: hidden;
}
.merchant-top-header .left-info .el-image.img-thumbnail .el-image__inner {
  object-fit: cover !important;
}
.merchant-top-header .fav-wrap {
  z-index: 3;
}

/* ============================================================
   PALETA OFICIAL DE MARCA (Brand Book Menu Check, pag. 8)
   Deep Teal   #284450 -- texto principal, headlines, UI, B2B
   Check Green #83BA81 -- estados activos, highlights, botones secundarios
   Action Orange #DF4C25 -- Order Now / Delivery / CTAs principales
   Warm Cream  #F8EFDC -- fondos "experience first" (evita el blanco plano)
   Soft Gray   #ECEDEB -- fondos de UI, separadores
   ============================================================ */

/* Fondo de pagina: blanco puro (vuelto atras desde warm cream,
   que se leia como salmon en pantalla). */
body {
  background: #FFFFFF !important;
}
.section-menu,
.merchant-top-header + * {
  background: transparent;
}

/* Encabezados de categoria ("APPETIZER") usaban el azul default de
   Bootstrap (.text-primary) -- pasan a Deep Teal, color de marca */
.section-menu .text-primary {
  color: #284450 !important;
}
.section-menu .border-primary {
  border-color: #284450 !important;
}

/* Texto principal de items -- Deep Teal en vez de gris generico */
.list-item-rows h6,
.merchant-top-header .left-info h4 {
  color: #284450;
}

/* Precio y pills de tamano/variante: tinte de Check Green + texto Teal,
   reemplaza el verde generico (#3ecf8e) que no era el de marca */
.btn-group .btn.active {
  background: rgba(131,186,129,.20) !important;
  color: #284450 !important;
  border-color: rgba(131,186,129,.6) !important;
}
.list-item-rows .prices {
  color: #284450;
}

/* Pill activa del carrusel de categorias -- de subrayado negro a
   Check Green */
.category-carousel .nav-link.active {
  color: #284450;
}
.category-carousel .nav-link.active:after {
  border-bottom-color: #83BA81 !important;
}

/* CTA principal "Agregar al carrito" -- Action Orange. Es la accion de
   pedido/orden, y el brand book pide naranja ahi (Order Now / Delivery),
   no verde. Cubre los 3 estados posibles del boton. */
.list-item-rows .quantity-wrapper .btn-grey {
  background: #DF4C25 !important;
  color: #fff !important;
}
.el-dialog .add_to_cart.btn-green {
  background-color: #DF4C25 !important;
  border-color: #DF4C25 !important;
}
.el-dialog .add_to_cart.btn-green:hover,
.el-dialog .add_to_cart.btn-green:focus {
  background-color: #C43F1A !important;
  border-color: #C43F1A !important;
}

/* ============================================================
   Barra de categorias (carrusel horizontal) — pills mas grandes,
   redondeadas, con indicador de posicion actual (fondo solido en
   vez de un simple subrayado).
   ============================================================ */
.category-carousel {
  padding: 8px 0;
}
.category-carousel .nav-link {
  height: auto !important;
  padding: 12px 22px !important;
  border-radius: 999px;
  background: #ECEDEB;
  color: #284450;
  font-size: 15px;
  line-height: 1.2;
  transition: background .15s, color .15s;
}
.category-carousel .nav-link.active {
  background: #83BA81;
  color: #fff;
}
.category-carousel .nav-link.active:after {
  display: none;
}
.category-carousel a.btn {
  font-size: 24px;
  color: #284450;
}

/* Nombre del hero mas grande (mas cerca del mockup) y el tag de
   cocina (Mexican) como pill real en vez de texto gris plano */
.merchant-top-header .left-info h4 {
  font-size: 40px;
}
.merchant-top-header .left-info ul.text-grey {
  display: flex;
  gap: 6px;
  margin-bottom: 10px !important;
}
.merchant-top-header .left-info ul.text-grey li {
  background: rgba(255,255,255,.9);
  color: #284450 !important;
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* Barra de Enter your address — de texto centrado suelto a una
   card horizontal integrada (icono + texto + boton Check), mas
   cerca del mockup. Mismo click-to-open-modal de siempre. */
.address-bar-inline {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 9px rgba(161,153,153,.3);
  padding: 14px 18px;
  margin: 20px auto;
  max-width: 720px;
  cursor: pointer;
}
.address-bar-inline .ab-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(131,186,129,.16);
  color: #284450;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.address-bar-inline .ab-text {
  flex: 1;
  text-align: left;
  min-width: 0;
}
.address-bar-inline .ab-title {
  font-weight: 700;
  color: #284450;
  font-size: 15px;
}
.address-bar-inline .ab-sub {
  font-size: 12.5px;
  color: #6B6960;
  margin-top: 2px;
}
.address-bar-inline .ab-check-btn {
  background: #DF4C25;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 10px 24px;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}

/* Catering Menu / Banquet movidos adentro del hero, junto a los demas
   tags (Mexican) en vez de como boton suelto debajo de la foto */
.merchant-top-header .left-info .hero-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.merchant-top-header .left-info .hero-tag-pill {
  background: rgba(255,255,255,.9);
  color: #284450 !important;
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Orden del toggle: Pickup antes que Delivery (como en el mockup) */
.merchant-top-header .btn-group-rounded {
  display: flex;
}
.merchant-top-header .btn-group-rounded label:has(input[value=delivery]) {
  order: 2;
}
.merchant-top-header .btn-group-rounded label:has(input[value=pickup]) {
  order: 1;
}

/* Mas aire entre los tags, el nombre y el toggle -- se sentia muy pegado */
.merchant-top-header .left-info h4 {
  margin-top: 4px;
}
.merchant-top-header .left-info ul.mb-1 {
  margin-bottom: 14px !important;
}
.merchant-top-header .left-info .hero-tags-row {
  margin-top: 12px;
  margin-bottom: 16px;
}
.merchant-top-header .left-info .btn-group-rounded {
  margin-top: 4px;
}

/* Pills de Pickup/Delivery se estaban estirando a 50% cada una --
   forzar tamano al contenido, no al espacio disponible */
.merchant-top-header .btn-group-rounded {
  display: inline-flex !important;
}
.merchant-top-header .btn-group-rounded .btn {
  flex: 0 0 auto !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
}

/* Toggle Pickup/Delivery ya no vive en el overlay de la foto -- ahora
   esta en flujo normal, conectado visualmente con la barra de
   direccion de abajo para que se sientan como una sola card. */
.hero-toggle-bar {
  background: #fff;
  padding: 14px 18px;
  border-radius: 16px 16px 0 0;
  max-width: 720px;
  margin: 16px auto 0;
}
.address-bar-inline {
  border-radius: 0 0 16px 16px !important;
  margin: 0 auto 20px !important;
  border-top: 1px solid #F1EFE9;
}

/* Fila unica real: toggle Pickup/Delivery + direccion + Check, todos
   en una sola barra (usa window.vm_address_needed expuesto en
   front.bundle.js para abrir el modal desde la otra app de Vue) */
.hero-toggle-bar {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.hero-toggle-bar .htb-toggle {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.hero-toggle-bar .htb-address {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-left: 1px solid #F1EFE9;
  cursor: pointer;
  min-width: 0;
}
.hero-toggle-bar .htb-address-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(131,186,129,.16);
  color: #284450;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.hero-toggle-bar .htb-address-text {
  flex: 1;
  color: #6B6960;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-toggle-bar .htb-check-btn {
  background: #DF4C25;
  color: #fff;
  border-radius: 999px;
  padding: 10px 22px;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}

/* La address-bar-inline ahora solo se usa para fuera de rango --
   ya no esta pegada al toggle, vuelve a tener su propia card completa */
.address-bar-inline {
  border-radius: 16px !important;
  margin: 16px auto 20px !important;
  border-top: none;
}

/* La barra de direccion solo tiene sentido si elegiste Delivery --
   se oculta cuando el radio de Pickup esta marcado */
.hero-toggle-bar:has(input[value=pickup]:checked) .htb-address {
  display: none;
}
.hero-toggle-bar:has(input[value=pickup]:checked) .htb-toggle {
  flex: 1;
  justify-content: center;
}

/* La barra ya no se conecta con ninguna card debajo (esa era para el
   viejo flujo) -- ahora es una card independiente: esquinas
   redondeadas completas, sombra propia, y ancho adaptado al
   contenido (se achica solito cuando Pickup oculta la direccion). */
.hero-toggle-bar {
  border-radius: 16px !important;
  box-shadow: 0 2px 9px rgba(161,153,153,.3);
  width: fit-content;
  max-width: calc(100% - 32px);
}
.hero-toggle-bar:has(input[value=pickup]:checked) .htb-toggle {
  flex: initial;
  justify-content: flex-start;
}

/* ============================================================
   Panel Your order (carrito) — card propia, jerarquia mas clara,
   colores de marca en precios y boton de checkout.
   ============================================================ */
.sticky-cart {
  background: transparent;
  box-shadow: none;
  padding: 0;
}
.section-cart h5 {
  color: #284450;
  font-weight: 700;
  font-size: 18px;
}
.section-cart .cart-clear-link {
  color: #6B6960;
  font-size: 12px;
  text-decoration: underline;
}
.section-cart .items {
  border-bottom: 1px solid #F1EFE9 !important;
  padding-top: 14px;
  padding-bottom: 14px;
}
.section-cart .items:first-of-type {
  padding-top: 0;
}
.items img,
.items .skeleton-placeholder {
  border-radius: 10px;
}
.section-cart .line-items p:first-child span {
  font-weight: 600;
  color: #284450;
}
.section-cart .line-items .font11 {
  color: #DF4C25;
  font-weight: 600;
}
.section-cart .col-3.quantity p {
  font-weight: 700;
  color: #284450;
}
.quantity a.rounded-pill,
.rounded-button-icon {
  background: #ECEDEB;
  color: #284450;
}
.section-cart .item-remove {
  background: transparent !important;
  color: #6B6960;
}
.cart-summary {
  border-top: 1px solid #F1EFE9;
  padding-top: 10px;
}
.cart-summary h6 {
  color: #284450;
  font-size: 16px;
  font-weight: 700;
}
.section-cart .btn.btn-green {
  background-color: #DF4C25 !important;
  border-color: #DF4C25 !important;
  border-radius: 999px !important;
  font-weight: 700;
  padding: 12px 20px !important;
}

/* Hero a pantalla completa (full-bleed) -- se sale del .container y
   ocupa todo el ancho del viewport, el resto del contenido sigue
   centrado normal. Solo desktop (.merchant-top-header ya es d-lg-block). */
.merchant-top-header .row {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
.merchant-top-header .col-6.right-infox {
  border-radius: 0 !important;
}
.merchant-top-header .col-6.left-info {
  border-radius: 0 !important;
  padding: 40px 60px 28px !important;
}

/* El breakout a 100vw del hero desborda unos px por el ancho de la
   scrollbar -- oculta ese overflow horizontal minimo a nivel pagina
   (no afecta el scroll horizontal interno del carrusel de categorias,
   que es un contenedor propio con overflow-x:auto). */
body {
  overflow-x: hidden;
}

/* ============================================================
   TIPOGRAFIA DE MARCA -- Figtree (Brand Book Menu Check, pag. 10)
   Figtree Black (900) para headlines de alto impacto
   Figtree Bold (700) para secciones/subheadlines
   Figtree Regular (400) para texto de cuerpo
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800;900&display=swap');

body,
input,
button,
.btn {
  font-family: 'Figtree', 'Open Sans', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Figtree', 'Open Sans', sans-serif;
  font-weight: 800;
}

.merchant-top-header .left-info h4 {
  font-family: 'Figtree', sans-serif;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.section-menu .text-primary,
.section-cart h5,
.list-item-rows h6 {
  font-family: 'Figtree', sans-serif;
  font-weight: 700;
}

/* El SVG del logo nuevo no trae width/height explicitos en la raiz
   (solo viewBox), asi que el navegador no le calcula tamano
   intrinseco y el contenedor colapsa a 0 -- forzar tamano explicito */
.top-logo img.img-200 {
  width: 170px;
  height: auto;
  max-width: none;
  max-height: none;
}

/* ============================================================
   Card de producto -- mas cerca del mockup: precio de una sola
   opcion como texto plano (no pill), boton de agregar debajo del
   texto (no en columna aparte a la derecha), mas compacto.
   ============================================================ */
.list-item-rows .btn-group .btn:only-child {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  color: #DF4C25 !important;
  font-weight: 700;
  font-size: 16px;
  border-radius: 0 !important;
}

.list-item-rows .col-9 > .row.m-0.p-0 {
  flex-direction: column;
  align-items: flex-start !important;
}
.list-item-rows .col-lg-8.fixed-height {
  min-height: auto !important;
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
  padding-bottom: 4px;
}
.list-item-rows .col-lg-4 {
  width: auto;
  max-width: 100%;
  flex: 0 0 auto;
  margin-top: 8px;
  justify-content: flex-start !important;
}
.list-item-rows .quantity-wrapper .btn,
.list-item-rows .el-button {
  padding: 8px 20px !important;
  font-size: 13px !important;
}
.list-item-rows .quantity-wrapper .quantity-parent {
  width: auto;
}

/* BUG: el carrito sticky (plugin StickySidebar) se fija a top:20px,
   pero no sabe que la barra de categorias TAMBIEN es sticky/afijada
   y ocupa ~55px arriba -- quedaban superpuestos. topSpacing es config
   JS del plugin (set inline), asi que hace falta !important para
   pisarlo desde CSS. */
.sticky-cart .inner-wrapper-sticky {
  top: 75px !important;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 9px rgba(161,153,153,.3);
  padding: 20px;
  box-sizing: border-box;
}

/* ============================================================
   Banquet page redesign (banquet.php) — visual only, same data
   model (flat packages grouped by category, no courses/dishes).
   ============================================================ */
.banquet-hero { position:relative; overflow:hidden; }
.banquet-hero-photo {
  height:220px;
  background-size:cover;
  background-position:center;
  background-color:#284450;
  position:relative;
}
.banquet-hero-photo::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(40,68,80,0) 55%, #284450 100%);
}
.banquet-hero-panel { background:#284450; padding:10px 0 36px; }
.banquet-back-link { display:inline-block; margin-top:6px; font-size:13px; font-weight:700; color:#fff; opacity:.9; }
.banquet-back-link:hover { color:#fff!important; opacity:1; text-decoration:underline; }
.banquet-hero-head { display:flex; align-items:center; gap:16px; margin-top:16px; flex-wrap:wrap; }
.banquet-hero-logo { width:88px; height:88px; border-radius:20px; object-fit:cover; border:3px solid #fff; background:#fff; flex:0 0 auto; }
.banquet-hero-titles { flex:1; min-width:220px; }
.banquet-eyebrow { display:inline-block; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#DF4C25; }
.banquet-hero-name { font-family:'Figtree',sans-serif; font-weight:900; font-size:30px; color:#fff!important; margin:6px 0 0; line-height:1.25; }
.banquet-hero-address { color:#fff; opacity:.85; font-size:13.5px; margin-top:6px; }
.banquet-hero-intro { color:#fff; opacity:.92; font-size:14.5px; line-height:1.6; max-width:720px; margin-top:18px; }
.banquet-hero-intro p:last-child { margin-bottom:0; }

.banquet-feature-strip-wrap { margin-top:24px; }
.banquet-feature-strip {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
  background:#F1EFE9;
  border-radius:18px;
  padding:24px;
}
.banquet-feature { display:flex; align-items:flex-start; gap:14px; }
.banquet-feature img { width:40px; height:40px; flex:0 0 auto; margin-top:2px; }
.banquet-feature-title { font-weight:800; font-size:14.5px; color:#284450; }
.banquet-feature-sub { font-size:12.5px; color:#6B6960; line-height:1.5; margin-top:3px; }

.banquet-instruction-banner {
  background:#F8EFDC;
  border-radius:14px;
  padding:14px 18px;
  color:#5c5344;
  font-size:13.5px;
  line-height:1.5;
  margin-top:20px;
}

.banquet-cat-nav { position:sticky; top:0; z-index:20; background:#fff; border-bottom:1px solid #ECEDEB; margin-top:24px; margin-left:-15px; margin-right:-15px; }
.banquet-cat-nav-inner { display:flex; gap:10px; overflow-x:auto; padding:12px 15px; scrollbar-width:none; -ms-overflow-style:none; }
.banquet-cat-nav-inner::-webkit-scrollbar { display:none; }
.banquet-cat-pill {
  flex:0 0 auto;
  padding:10px 20px;
  border-radius:999px;
  background:#ECEDEB;
  color:#284450!important;
  font-size:14px;
  font-weight:700;
  white-space:nowrap;
}
.banquet-cat-pill:hover { background:#e2e4e0; color:#284450!important; text-decoration:none; }

.banquet-category-section { padding:36px 0 8px; scroll-margin-top:70px; }
.banquet-category-title { font-family:'Figtree',sans-serif; font-weight:800; font-size:21px; color:#284450; margin:0 0 18px; }
.banquet-item-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:16px; }
.banquet-item-card {
  background:#fff;
  border:1px solid #ECEDEB;
  border-radius:16px;
  padding:18px;
  box-shadow:0 2px 9px rgba(161,153,153,.18);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.banquet-item-top { display:flex; justify-content:space-between; gap:12px; }
.banquet-item-name { font-weight:700; font-size:14.5px; color:#284450; line-height:1.35; }
.banquet-item-price { font-weight:800; font-size:14.5px; color:#DF4C25; white-space:nowrap; }
.banquet-item-price-market { font-size:12.5px; color:#6B6960; font-weight:700; }
.banquet-item-desc { font-size:12.5px; color:#807A6E; line-height:1.5; }
.banquet-item-note { font-size:11.5px; color:#9a9488; }
.banquet-item-bottom { display:flex; align-items:center; justify-content:space-between; margin-top:6px; gap:10px; }
.banquet-item-unit { font-size:11px; color:#9a9488; }

.banquet-stepper { display:flex; align-items:center; border:1px solid #ECEDEB; border-radius:999px; overflow:hidden; flex:0 0 auto; }
.banquet-stepper-btn { border:none; background:#F1EFE9; color:#284450; width:30px; height:30px; font-size:16px; font-weight:700; line-height:1; cursor:pointer; }
.banquet-stepper-btn:hover { background:#e2e4e0; }
.banquet-stepper-input { width:34px; border:none; text-align:center; font-size:13.5px; font-weight:700; color:#284450; -moz-appearance:textfield; padding:0; }
.banquet-stepper-input::-webkit-outer-spin-button, .banquet-stepper-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }

.banquet-ask-btn { border:1px solid #DF4C25; color:#DF4C25!important; border-radius:999px; padding:6px 16px; font-size:12px; font-weight:700; white-space:nowrap; }
.banquet-ask-btn:hover { background:#DF4C25; color:#fff!important; text-decoration:none; }

#banquet-subtotal-bar {
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:#fff; border-top:1px solid #ECEDEB;
  box-shadow:0 -8px 24px rgba(40,68,80,.1);
  transform:translateY(100%);
  transition:transform .2s ease;
}
#banquet-subtotal-bar.is-visible { transform:translateY(0); }
.banquet-subtotal-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 15px; flex-wrap:wrap; }
.banquet-subtotal-label { font-size:11px; color:#9a9488; }
.banquet-subtotal-value { font-size:20px; font-weight:800; color:#284450; }
.banquet-subtotal-note { font-size:12px; color:#807A6E; max-width:320px; flex:1; min-width:180px; }
.banquet-subtotal-cta { background:#DF4C25; color:#fff!important; border-radius:999px; padding:12px 26px; font-weight:700; font-size:14px; white-space:nowrap; }
.banquet-subtotal-cta:hover { background:#c73f1b; color:#fff!important; text-decoration:none; }

.banquet-request-card { background:#fff; border:1px solid #ECEDEB; border-radius:20px; box-shadow:0 2px 9px rgba(161,153,153,.2); padding:32px; margin-top:56px; }
.banquet-request-title { font-family:'Figtree',sans-serif; font-weight:800; font-size:22px; color:#284450; margin:0; }
.banquet-request-sub { color:#807A6E; font-size:13.5px; margin-top:4px; }
.banquet-form-group { margin-top:20px; }
.banquet-form-label { font-size:12px; font-weight:700; color:#807A6E; margin-bottom:8px; display:block; }
.banquet-pill-group { display:flex; gap:8px; flex-wrap:wrap; }
.banquet-pill { border:1px solid #ECEDEB; background:#F8F8F6; color:#284450; border-radius:999px; padding:8px 16px; font-size:13px; font-weight:600; }
.banquet-pill.active { background:rgba(131,186,129,.20); border-color:rgba(131,186,129,.6); color:#284450; font-weight:700; }
.banquet-hidden-select { display:none; }
.banquet-request-card .form-control { border-radius:10px; border-color:#ECEDEB; }
.banquet-submit-btn { background:#DF4C25!important; border-color:#DF4C25!important; color:#fff!important; border-radius:999px!important; padding:12px 28px!important; font-weight:700; }
.banquet-submit-btn:hover { background:#c73f1b!important; border-color:#c73f1b!important; }

.banquet-policy-card { background:#fff; border:1px solid #ECEDEB; border-radius:20px; padding:28px 32px; margin-top:32px; color:#4a463c; font-size:13.5px; line-height:1.6; }
.banquet-policy-card h1, .banquet-policy-card h2, .banquet-policy-card h3, .banquet-policy-card h4 { font-family:'Figtree',sans-serif; color:#284450; }

@media (max-width:576px){
  .banquet-hero-name { font-size:24px; }
  .banquet-request-card { padding:22px; }
  .banquet-hero-logo { width:64px; height:64px; }
}

/* ============================================================
   Catering page redesign (catering.php) — visual only, same
   real cart/checkout flow (explicit "Add to cart" per line).
   Reuses .banquet-hero / .banquet-cat-nav / .banquet-category-*
   presentational classes defined above (shared design language).
   ============================================================ */
.catering-notes-banner { margin-top:20px; }

.catering-item-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.catering-item-card {
  background:#fff;
  border:1px solid #ECEDEB;
  border-radius:16px;
  padding:18px;
  box-shadow:0 2px 9px rgba(161,153,153,.18);
  display:flex;
  gap:12px;
}
.catering-item-thumb { width:56px; height:56px; border-radius:10px; object-fit:cover; flex:0 0 auto; }
.catering-item-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }
.catering-item-top { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.catering-item-name { font-weight:700; font-size:14.5px; color:#284450; line-height:1.35; }
.catering-item-price { font-weight:800; font-size:14.5px; color:#DF4C25; white-space:nowrap; }
.catering-badge { display:inline-block; align-self:flex-start; background:rgba(223,76,37,.12); color:#DF4C25; font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px; }
.catering-item-desc { font-size:12.5px; color:#807A6E; line-height:1.5; }

.catering-item-bottom { display:flex; align-items:center; gap:10px; margin-top:2px; }
.catering-qty { width:64px; border:1px solid #ECEDEB; border-radius:8px; padding:6px 8px; font-size:13px; color:#284450; text-align:center; }
.catering-add-btn { background:#DF4C25; color:#fff!important; border:none; border-radius:999px; padding:8px 18px; font-weight:700; font-size:13px; white-space:nowrap; }
.catering-add-btn:hover { background:#c73f1b; }
.catering-add-btn:disabled { opacity:.6; cursor:default; }

.catering-variant-list { display:flex; flex-direction:column; gap:8px; border-top:1px solid #ECEDEB; padding-top:10px; margin-top:2px; }
.catering-variant-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.catering-variant-label { font-size:12.5px; color:#284450; flex:1; min-width:70px; }
.catering-variant-price { font-weight:700; font-size:13px; color:#DF4C25; white-space:nowrap; }
.catering-qty-sm { width:52px; padding:5px 6px; }
.catering-add-btn-sm { padding:6px 14px; font-size:12px; }

#catering-summary-bar {
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:#fff; border-top:1px solid #ECEDEB;
  box-shadow:0 -8px 24px rgba(40,68,80,.1);
}
.catering-summary-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 15px; flex-wrap:wrap; }
.catering-summary-subtotal { font-size:16px; font-weight:800; color:#284450; }
#catering-summary-minimum.text-muted { color:#9a9488!important; font-size:11.5px; }
#catering-summary-minimum.text-danger { color:#DF4C25!important; font-size:11.5px; font-weight:700; }
#catering-checkout-btn.disabled { background:#c9c5ba!important; }

@media (max-width:576px){
  .catering-item-card { padding:14px; }
}

/* ============================================================
   Respaldo del navbar de categorias (.category-carousel).
   El componente Vue (el-affix) que lo pega arriba al scrollear no
   siempre se activa segun el ancho de pantalla. Probamos primero
   position:sticky nativo, pero el body tiene overflow-x:hidden (para
   el full-bleed del hero) y eso obliga al browser a convertir
   overflow-y en "auto" -- lo que rompe sticky nativo en cualquier
   parte de la pagina (queda con top negativo, nunca se clava). Por
   eso lo resolvemos a mano en JS (ver menu.php), igual que ya se
   resuelve el carrito: JS agrega/saca la clase .is-pinned segun
   scroll, y esta regla la deja fixed cuando esta presente.
   ============================================================ */
.category-carousel.is-pinned {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background: #fff;
}

/* ============================================================
   Boton flotante "Ver pedido" en mobile (.floating-cart, dentro
   de <el-affix position="bottom">). El mismo problema que el
   navbar de categorias: el body tiene overflow-x:hidden, lo que
   rompe el calculo de sticky/affix en toda la pagina, asi que
   el-affix nunca lo deja fixed de forma confiable. A diferencia
   del navbar, este boton no necesita logica de scroll (siempre
   debe quedar flotando abajo mientras haya items en el carrito,
   Vue ya controla con v-if cuando se muestra), asi que alcanza
   con forzarlo fixed por CSS, sin depender de el-affix.
   ============================================================ */
.floating-cart {
  position: fixed !important;
  bottom: 15px !important;
  left: 15px !important;
  right: 15px !important;
  z-index: 45 !important;
  margin: 0 !important;
}