.combo-group-tabs{display:flex;gap:7px;overflow-x:auto;padding:5px 1px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}.combo-group-tabs::-webkit-scrollbar{display:none}.combo-group-tabs button{flex:0 0 auto;border:1px solid #dbe3ea;background:#fff;border-radius:999px;padding:8px 12px;font-weight:800;white-space:nowrap}.combo-group-tabs button.active{background:#172033;color:#fff;border-color:#172033}.combo-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px!important;align-items:stretch}.combo-tile{position:relative;border:1px solid #dbe3ea;border-radius:13px;background:#fff;overflow:hidden;display:flex;flex-direction:column;min-width:0}.combo-tile.selected{border:2px solid #172033}.combo-tile.unavailable{opacity:.48}.combo-tile-picture{height:112px;background:#eef2f5;display:grid;place-items:center;overflow:hidden;font-size:30px;color:#64748b}.combo-tile-picture img{width:100%;height:100%;object-fit:cover;object-position:center center;display:block;margin:auto}.combo-tile-body{padding:9px;display:flex;flex-direction:column;gap:5px;flex:1}.combo-tile-code{font-size:11px;color:#64748b;font-weight:900}.combo-tile-name{font-size:13px;line-height:1.25;font-weight:900;min-height:32px}.combo-tile-extra{font-size:12px;font-weight:800}.combo-tile-sold{font-size:11px;color:#b91c1c;font-weight:900}.combo-tile-qty{display:grid;grid-template-columns:34px 1fr 34px;gap:5px;align-items:center;margin-top:auto}.combo-tile-qty button{width:34px;height:34px;border:1px solid #dbe3ea;background:#f8fafc;border-radius:9px;font-size:20px}.combo-tile-qty b{text-align:center;font-size:15px}.combo-selected-badge{position:absolute;top:7px;right:7px;background:#172033;color:#fff;font-size:11px;font-weight:900;border-radius:999px;padding:4px 7px}@media(min-width:620px){.combo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.combo-tile-picture{height:125px}}@media(min-width:900px){.combo-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.combo-tile-picture{height:135px}}
/* V33 old Android/WebView fallback when CSS Grid is unsupported */
@supports not (display:grid){.combo-grid{display:flex!important;flex-wrap:wrap!important;gap:0!important;margin:-5px}.combo-grid>.combo-tile{width:calc(50% - 10px);margin:5px}}

/* 2026-09-06: unified composed-menu popup for Kiosk and table customer pages.
   Both interfaces use the same centred popup behaviour. On mobile, choices always stay
   in a two-column grid; only the choices area scrolls while title, categories and actions remain visible. */
#comboPanel{
  align-items:center;
  justify-content:center;
  padding:12px;
}
#comboOverlay{
  place-items:center;
  padding:12px;
}
#comboPanel .drawer-card.combo-card,
#comboOverlay .sheet.combo-sheet{
  width:min(920px,calc(100vw - 24px));
  height:min(760px,calc(100vh - 24px));
  height:min(760px,calc(100dvh - 24px));
  max-height:calc(100vh - 24px);
  max-height:calc(100dvh - 24px);
  margin:auto;
  padding:14px;
  border-radius:20px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  min-height:0;
  background:#fff;
  box-shadow:0 18px 55px rgba(15,23,42,.24);
}
#comboPanel .drawer-head,
#comboOverlay .combo-head{
  position:relative;
  top:auto;
  z-index:4;
  flex:0 0 auto;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:2px 2px 8px;
  margin:0;
  background:inherit;
  border-bottom:0;
}
#comboPanel .drawer-head strong,
#comboOverlay .combo-head h2{
  margin:0;
  padding:0;
  min-width:0;
  font-size:20px;
  line-height:1.15;
  font-weight:950;
}
#comboPanel .drawer-head button,
#comboOverlay .combo-close{
  flex:0 0 auto;
  width:40px;
  height:40px;
  min-width:40px;
  min-height:40px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:999px;
  background:transparent;
  color:#172033;
  font-size:28px;
  line-height:1;
  box-shadow:none;
}
#comboPanel .combo-progress,
#comboOverlay #comboProgress{
  flex:0 0 auto;
  padding:5px 2px 6px;
  margin:0;
  font-weight:850;
  line-height:1.2;
}
#comboPanel .combo-group-tabs,
#comboOverlay .combo-group-tabs{
  flex:0 0 auto;
  min-height:48px;
  display:flex;
  align-items:center;
  gap:8px;
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;
  padding:4px 2px 8px;
  margin:0 0 6px;
  position:relative;
  z-index:3;
  background:inherit;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
#comboPanel .combo-group-tabs::-webkit-scrollbar,
#comboOverlay .combo-group-tabs::-webkit-scrollbar{display:none}
#comboPanel .combo-group-tabs button,
#comboOverlay .combo-group-tabs button{
  flex:0 0 auto;
  min-height:38px;
  padding:8px 13px;
  line-height:1.1;
  font-size:14px;
  white-space:nowrap;
}
#comboPanel .combo-options.combo-grid,
#comboOverlay .comboList.combo-grid{
  flex:1 1 auto;
  min-height:0;
  max-height:none;
  overflow-y:auto;
  overflow-x:hidden;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-auto-rows:auto!important;
  align-content:start;
  gap:8px!important;
  padding:2px 1px 8px;
  scroll-padding-top:4px;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
#comboPanel .drawer-actions,
#comboOverlay .actions{
  flex:0 0 auto;
  margin-top:0;
  padding-top:8px;
  min-height:52px;
  position:relative;
  z-index:4;
  background:inherit;
}
#comboPanel .drawer-actions .primary,
#comboPanel .drawer-actions .secondary,
#comboOverlay .actions .btn{
  min-height:46px;
}

/* Tablet/laptop: keep the same popup, with more columns only when there is enough width. */
@media(min-width:620px) and (max-width:899px){
  #comboPanel .combo-options.combo-grid,
  #comboOverlay .comboList.combo-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}
@media(min-width:900px){
  #comboPanel .combo-options.combo-grid,
  #comboOverlay .comboList.combo-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
  #comboPanel .combo-group-tabs,
  #comboOverlay .combo-group-tabs{
    min-height:54px;
    padding-bottom:10px;
    margin-bottom:8px;
  }
  #comboPanel .combo-group-tabs button,
  #comboOverlay .combo-group-tabs button{
    min-height:40px;
    padding:9px 15px;
  }
  #comboPanel .combo-tile,
  #comboOverlay .combo-tile{min-height:218px}
  #comboPanel .combo-tile-picture,
  #comboOverlay .combo-tile-picture{height:122px!important}
}

/* Mobile composed menus: exactly two real cards per row, never squeeze the cards to fit the viewport.
   The popup is shared by Kiosk and "commande sur place": header/categories/actions stay visible;
   only the choices grid scrolls. */
@media(max-width:619px){
  #comboPanel,
  #comboOverlay{
    padding:10px;
    align-items:center;
    justify-content:center;
    place-items:center;
  }
  #comboPanel .drawer-card.combo-card,
  #comboOverlay .sheet.combo-sheet{
    width:calc(100vw - 20px);
    height:calc(100dvh - 20px);
    max-height:calc(100dvh - 20px);
    min-height:0;
    margin:auto;
    padding:12px;
    border-radius:18px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
  #comboPanel .drawer-head,
  #comboOverlay .combo-head{
    flex:0 0 auto;
    min-height:46px;
    padding:2px 2px 8px;
  }
  #comboPanel .drawer-head strong,
  #comboOverlay .combo-head h2{
    font-size:20px;
    line-height:1.15;
  }
  #comboPanel .drawer-head button,
  #comboOverlay .combo-close{
    width:40px;
    height:40px;
    min-width:40px;
    min-height:40px;
    font-size:27px;
  }
  #comboPanel .combo-progress,
  #comboOverlay #comboProgress{
    flex:0 0 auto;
    padding:5px 2px 7px;
    font-size:16px;
    line-height:1.2;
  }
  #comboPanel .combo-group-tabs,
  #comboOverlay .combo-group-tabs{
    flex:0 0 auto;
    min-height:50px;
    height:auto;
    gap:7px;
    padding:4px 1px 8px;
    margin:0 0 6px;
    overflow-x:auto;
    overflow-y:hidden;
  }
  #comboPanel .combo-group-tabs button,
  #comboOverlay .combo-group-tabs button{
    min-height:40px;
    height:40px;
    padding:8px 13px;
    font-size:14px;
    line-height:1;
  }
  #comboPanel .combo-options.combo-grid,
  #comboOverlay .comboList.combo-grid{
    flex:1 1 0;
    min-height:0;
    height:auto;
    overflow-y:auto;
    overflow-x:hidden;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-auto-rows:minmax(208px,max-content)!important;
    grid-auto-flow:row!important;
    align-content:start!important;
    align-items:stretch!important;
    gap:10px!important;
    padding:2px 1px 10px;
  }
  #comboPanel .combo-tile,
  #comboOverlay .combo-tile{
    min-width:0;
    width:auto;
    min-height:208px!important;
    height:auto!important;
    max-height:none!important;
    align-self:start;
    overflow:hidden;
    border-radius:13px;
    display:flex;
    flex-direction:column;
  }
  #comboPanel .combo-tile-picture,
  #comboOverlay .combo-tile-picture{
    width:100%;
    height:104px!important;
    min-height:104px!important;
    max-height:104px!important;
    flex:0 0 104px!important;
  }
  #comboPanel .combo-tile-body,
  #comboOverlay .combo-tile-body{
    flex:1 0 auto;
    min-width:0;
    min-height:102px;
    padding:8px;
    gap:4px;
  }
  #comboPanel .combo-tile-code,
  #comboOverlay .combo-tile-code{
    font-size:10px;
    line-height:1.1;
  }
  #comboPanel .combo-tile-name,
  #comboOverlay .combo-tile-name{
    min-height:34px;
    max-height:none;
    font-size:12px;
    line-height:1.22;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    overflow-wrap:anywhere;
  }
  #comboPanel .combo-tile-extra,
  #comboPanel .combo-tile-sold,
  #comboOverlay .combo-tile-extra,
  #comboOverlay .combo-tile-sold{
    font-size:11px;
    line-height:1.1;
  }
  #comboPanel .combo-tile-qty,
  #comboOverlay .combo-tile-qty{
    grid-template-columns:36px minmax(24px,1fr) 36px;
    gap:5px;
    min-height:36px;
    margin-top:auto;
  }
  #comboPanel .combo-tile-qty button,
  #comboOverlay .combo-tile-qty button{
    width:36px;
    height:36px;
    min-width:36px;
    min-height:36px;
    padding:0;
    font-size:20px;
  }
  #comboPanel .combo-tile-qty b,
  #comboOverlay .combo-tile-qty b{
    font-size:15px;
  }
  #comboPanel .combo-selected-badge,
  #comboOverlay .combo-selected-badge{
    top:6px;
    right:6px;
    padding:4px 7px;
    font-size:10px;
  }
  #comboPanel .drawer-actions,
  #comboOverlay .actions{
    flex:0 0 auto;
    gap:8px;
    margin-top:0;
    padding-top:9px;
    min-height:58px;
  }
  #comboPanel .drawer-actions .primary,
  #comboPanel .drawer-actions .secondary,
  #comboOverlay .actions .btn{
    min-height:48px;
    padding:10px 8px;
    font-size:15px;
  }
}

/* Tablet portrait: three compact cards fit common 8-10 inch Kiosk screens. The title,
   filters and actions stay fixed while only the choices grid scrolls. */
@media (min-width:620px) and (max-width:1100px) and (orientation:portrait){
  #comboPanel,
  #comboOverlay{
    align-items:center;
    justify-content:center;
    place-items:center;
    padding:12px;
  }
  #comboPanel .drawer-card.combo-card,
  #comboOverlay .sheet.combo-sheet{
    width:min(880px,calc(100vw - 24px));
    height:calc(100dvh - 24px);
    max-height:calc(100dvh - 24px);
    min-height:0;
    margin:auto;
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
  #comboPanel .combo-group-tabs,
  #comboOverlay .combo-group-tabs{
    flex:0 0 auto;
    min-height:52px;
    height:auto;
    padding:5px 2px 9px;
    margin:0 0 7px;
    overflow-x:auto;
    overflow-y:hidden;
  }
  #comboPanel .combo-options.combo-grid,
  #comboOverlay .comboList.combo-grid{
    flex:1 1 0;
    min-height:0;
    height:auto;
    overflow-y:auto;
    overflow-x:hidden;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-auto-rows:minmax(184px,max-content)!important;
    grid-auto-flow:row!important;
    align-content:start!important;
    align-items:start!important;
    gap:12px!important;
    padding:2px 2px 12px;
  }
  #comboPanel .combo-tile,
  #comboOverlay .combo-tile{
    min-width:0;
    min-height:184px!important;
    height:auto!important;
    max-height:none!important;
    align-self:start!important;
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
  #comboPanel .combo-tile-picture,
  #comboOverlay .combo-tile-picture{
    width:100%;
    height:92px!important;
    min-height:92px!important;
    max-height:92px!important;
    flex:0 0 92px!important;
  }
  #comboPanel .combo-tile-body,
  #comboOverlay .combo-tile-body{
    flex:1 0 auto;
    min-height:90px;
    padding:7px;
  }
  #comboPanel .combo-tile-name,
  #comboOverlay .combo-tile-name{
    min-height:31px;
    max-height:none;
    font-size:12px;
    line-height:1.2;
  }
  #comboPanel .combo-tile-qty,
  #comboOverlay .combo-tile-qty{
    grid-template-columns:34px minmax(24px,1fr) 34px;
    gap:5px;
    min-height:34px;
    margin-top:auto;
  }
  #comboPanel .combo-tile-qty button,
  #comboOverlay .combo-tile-qty button{
    width:34px;
    height:34px;
    min-width:34px;
    min-height:34px;
    padding:0;
  }
  #comboPanel .drawer-actions,
  #comboOverlay .actions{
    flex:0 0 auto;
    min-height:58px;
    margin-top:0;
    padding-top:9px;
  }
}

@media(max-width:370px){
  #comboPanel,
  #comboOverlay{padding:7px}
  #comboPanel .drawer-card.combo-card,
  #comboOverlay .sheet.combo-sheet{
    width:calc(100vw - 14px);
    height:calc(100dvh - 14px);
    max-height:calc(100dvh - 14px);
    padding:9px;
  }
  #comboPanel .combo-options.combo-grid,
  #comboOverlay .comboList.combo-grid{
    grid-auto-rows:minmax(192px,max-content)!important;
    gap:7px!important;
  }
  #comboPanel .combo-tile,
  #comboOverlay .combo-tile{min-height:192px!important}
  #comboPanel .combo-tile-picture,
  #comboOverlay .combo-tile-picture{
    height:90px!important;
    min-height:90px!important;
    max-height:90px!important;
    flex-basis:90px!important;
  }
  #comboPanel .combo-tile-body,
  #comboOverlay .combo-tile-body{
    min-height:100px;
    padding:7px;
  }
  #comboPanel .combo-tile-name,
  #comboOverlay .combo-tile-name{font-size:11px;min-height:31px}
  #comboPanel .combo-tile-qty,
  #comboOverlay .combo-tile-qty{grid-template-columns:34px minmax(20px,1fr) 34px;gap:4px}
  #comboPanel .combo-tile-qty button,
  #comboOverlay .combo-tile-qty button{width:34px;height:34px;min-width:34px;min-height:34px}
}

/* Dark theme support on both composed-menu popups. */
html[data-theme="dark"] #comboPanel .drawer-card.combo-card,
html[data-theme="dark"] #comboOverlay .sheet.combo-sheet,
html[data-theme="dark"] #comboPanel .drawer-head,
html[data-theme="dark"] #comboOverlay .combo-head,
html[data-theme="dark"] #comboPanel .combo-group-tabs,
html[data-theme="dark"] #comboOverlay .combo-group-tabs,
html[data-theme="dark"] #comboPanel .drawer-actions,
html[data-theme="dark"] #comboOverlay .actions{
  background:#172033;
  color:#e5e7eb;
}
html[data-theme="dark"] #comboPanel .combo-group-tabs button,
html[data-theme="dark"] #comboOverlay .combo-group-tabs button,
html[data-theme="dark"] #comboPanel .combo-tile,
html[data-theme="dark"] #comboOverlay .combo-tile,
html[data-theme="dark"] #comboPanel .combo-tile-qty button,
html[data-theme="dark"] #comboOverlay .combo-tile-qty button{
  background:#1e293b;
  color:#e5e7eb;
  border-color:#475569;
}
html[data-theme="dark"] #comboPanel .combo-group-tabs button.active,
html[data-theme="dark"] #comboOverlay .combo-group-tabs button.active{
  background:#e5e7eb;
  color:#0f172a;
  border-color:#e5e7eb;
}
html[data-theme="dark"] #comboPanel .combo-tile-picture,
html[data-theme="dark"] #comboOverlay .combo-tile-picture{background:#334155}