@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Figtree:wght@300;400;500;600;700&display=swap');

/* =========================
   Hearth — Platform Theme
   Unified styling for Service Board, Drop Studio, Menu Library and Order
   ========================= */

:root{
  --h-fire:    #c4511a;
  --h-glow:    #fff3ec;
  --h-coal:    #0f0b08;
  --h-ember:   #2a1f17;
  --h-slate:   #4a3f37;
  --h-stone:   #8c7b6e;
  --h-chalk:   #faf8f5;
  --h-ash:     #f5f0eb;
  --h-cinder:  #e8ddd5;

  --h-text-primary:    var(--h-slate);
  --h-text-secondary:  var(--h-stone);
  --h-text-accent:     var(--h-fire);
  --h-bg-page:         var(--h-chalk);
  --h-bg-alt:          var(--h-ash);
  --h-bg-dark:         var(--h-coal);
  --h-bg-dark-card:    var(--h-ember);
  --h-border-default:  1px solid var(--h-cinder);

  --h-radius-sm:  0.375rem;
  --h-radius-md:  0.75rem;
  --h-radius-lg:  1rem;
  --h-radius-xl:  1.5rem;

  --h-shadow-sm: 0 1px 3px rgba(15,11,8,0.08);
  --h-shadow-md: 0 4px 12px rgba(15,11,8,0.10);
  --h-shadow-lg: 0 8px 24px rgba(15,11,8,0.12);

  --h-font-display: 'Cormorant Garamond', Georgia, serif;
  --h-font-ui:      'Figtree', system-ui, sans-serif;

  /* Legacy aliases — remove as each page is rebuilt */
  --h-accent:    var(--h-fire);
  --h-accent-2:  var(--h-fire);
  --h-text:      var(--h-slate);
  --h-muted:     var(--h-stone);
  --h-surface-2: var(--h-ash);

  --h-accent:#f97316;
  --h-accent-2:#fb923c;
  --h-accent-ink:#7c2d12;

  --h-bg:#f7f7fb;
  --h-surface:#ffffff;
  --h-surface-2:rgba(15,23,42,0.02);
  --h-border:rgba(15,23,42,0.12);
  --h-border-2:rgba(15,23,42,0.08);

  --h-text:#0f172a;
  --h-muted:rgba(15,23,42,0.65);
  --h-muted-2:rgba(15,23,42,0.45);

  --h-good:#16a34a;
  --h-bad:#dc2626;

  --status-placed-bg:#f1f5f9;
  --status-placed-ink:#475569;

  --status-confirmed-bg:#dbeafe;
  --status-confirmed-ink:#1d4ed8;

  --status-preparing-bg:#ffedd5;
  --status-preparing-ink:#c2410c;

  --status-ready-bg:#dcfce7;
  --status-ready-ink:#166534;

  --status-delivered-bg:#e7e5e4;
  --status-delivered-ink:#44403c;

  --r-sm:10px;
  --r-md:14px;
  --r-lg:18px;

  --shadow:0 10px 26px rgba(15,23,42,0.06);

  --mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

*{ box-sizing:border-box; }
html, body{ height:100%; }

body{
  margin:0;
  font-family:var(--sans);
  color:var(--h-text);
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(249,115,22,0.14), rgba(249,115,22,0) 60%),
    radial-gradient(900px 450px at 90% 0%, rgba(251,146,60,0.12), rgba(251,146,60,0) 55%),
    var(--h-bg);
}

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{
  max-width:1480px;
  margin:22px auto 60px;
  padding:0 18px;
}

.card{
  background:var(--h-surface);
  border:1px solid var(--h-border-2);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
}

.pad{ padding:16px 18px; }

.row{
  display:flex;
  align-items:center;
  gap:12px;
}

.space{ justify-content:space-between; }

.headerBar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  gap:14px;
  margin-bottom:14px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:280px;
}

.brandMark{
  width:42px;
  height:42px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(139,107,63,.16), rgba(203,184,157,.18));
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--h-accent);
  font-weight:900;
  text-decoration:none;
}
a.brandMark:hover,
a.brandMark:focus{
  color:var(--h-accent);
  text-decoration:none;
}

.brandTitle{
  font-weight:800;
  font-size:15px;
  line-height:1.2;
}

.brandSubtitle{
  font-size:12px;
  color:var(--h-muted);
  line-height:1.2;
  margin-top:2px;
}

.nav{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.nav a{
  font-size:13px;
  padding:7px 10px;
  border-radius:12px;
  border:1px solid transparent;
  color:var(--h-muted);
}

.nav a.utility { opacity: 0.55; font-size: 12px; }

.nav a.active{
  color:var(--h-text);
  border-color:var(--h-border);
  background:var(--h-surface-2);
}

.nav a:hover{
  border-color:var(--h-border);
  text-decoration:none;
}

.btnSmall, .btnAccent, .btnGhost{
  border-radius:10px;
  border:1px solid var(--h-border);
  background:var(--h-surface);
  color:var(--h-text);
  cursor:pointer;
  font-family:var(--sans);
  font-size:10px;
  font-weight:800;
  line-height:1;
  min-height:24px;
  padding:0 8px;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.btnAccent{
  border-color:rgba(249,115,22,0.28);
  background:linear-gradient(135deg, rgba(249,115,22,0.15), rgba(251,146,60,0.08));
  color:var(--h-accent-ink);
}

.btnAccent:disabled{
  opacity:0.5;
  cursor:not-allowed;
  pointer-events:none;
}

.btnSmall:hover, .btnGhost:hover{
  box-shadow:0 8px 18px rgba(15,23,42,0.05);
}

.btnAccent:hover{
  box-shadow:0 10px 22px rgba(249,115,22,0.12);
}

.sectionTitle{
  font-weight:850;
  letter-spacing:-0.2px;
  margin:0 0 4px;
}

.sectionSub{
  color:var(--h-muted);
  font-size:12px;
  margin:0;
}

.mono{ font-family:var(--mono); }
.muted{ color:var(--h-muted); }

select, input, textarea{
  font-family:var(--sans);
  border:1px solid var(--h-border);
  border-radius:12px;
  padding:9px 10px;
  background:var(--h-surface);
  color:var(--h-text);
  font-size:13px;
}

select{ min-width:320px; }

/* ======================================
   SERVICE BOARD
   ====================================== */

.boardShell{
  position:relative;
  z-index:1;
}

.dropHero{
  padding:18px;
  margin-bottom:14px;
  position:relative;
  overflow:visible;
  z-index:20;
}

.dropHeroTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:14px;
}

.dropName{
  margin:0;
  font-size:26px;
  line-height:1.05;
  letter-spacing:-0.4px;
}

.dropMeta{
  margin:8px 0 0;
  color:var(--h-muted);
  font-size:13px;
}

.execBar{
  display:grid;
  grid-template-columns:minmax(280px,1.45fr) minmax(240px,1fr) minmax(180px,0.9fr) auto;
  gap:12px;
  align-items:start;
  margin-top:12px;
  padding:12px;
  border:1px solid var(--h-border-2);
  border-radius:var(--r-lg);
  background:rgba(15,23,42,0.01);
  overflow:visible;
}

.execLeft{
  display:contents;
}

.execField{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

.execField label{
  display:block;
  min-height:14px;
  font-size:11px;
  line-height:14px;
  color:var(--h-muted);
  margin:0;
}

.execField select,
.execField input,
.execField .filterSummaryBtn{
  width:100%;
  min-width:0;
  height:40px;
  min-height:40px;
  box-sizing:border-box;
  margin:0;
}

.execRight{
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:nowrap;
  min-height:58px;
}

.execRight .utilityLink,
.execRight .btnGhost,
.execRight .btnAccent{
  height:40px;
  min-height:40px;
  padding:0 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  margin:0;
  border-radius:12px;
}

.execRight .utilityLink{
  border:1px solid transparent;
  font-family:var(--sans);
  font-size:12px;
  font-weight:700;
  line-height:1;
}

.utilityLink{
  font-size:12px;
  color:var(--h-muted);
  padding:7px 10px;
  border-radius:12px;
  border:1px solid transparent;
  text-decoration:none;
}

.utilityLink:hover{
  border-color:var(--h-border);
  background:var(--h-surface-2);
  text-decoration:none;
  color:var(--h-text);
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--h-border);
  background:rgba(255,255,255,0.7);
  font-size:12px;
  color:var(--h-muted);
  font-weight:700;
}

.dot{
  width:8px;
  height:8px;
  border-radius:99px;
  background:var(--h-muted-2);
}
.dot.live{ background:var(--h-good); }
.dot.draft{ background:#f59e0b; }
.dot.closed{ background:var(--h-bad); }

.serviceBoardFilters{
  display:contents;
}

.serviceBoardFilters > div{
  min-width:0;
}

.serviceBoardFilters select{
  width:100%;
  min-width:0;
}

.boardFilterPopoverWrap{
  position:relative;
  width:100%;
  z-index:60;
}

.boardFilterPopoverWrap .filterSummaryBtn{
  width:100%;
}

.boardFilterPopoverWrap .filterPopover{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  width:100%;
  min-width:240px;
  max-height:280px;
  overflow:auto;
  z-index:120;
}

.boardFilterHint{
  margin-top:6px;
  font-size:10px;
  line-height:1.35;
  color:var(--h-muted);
}

.boardRefreshMeta{
  font-size:11px;
  color:var(--h-muted);
  font-weight:700;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  height:40px;
}

.heroGrid{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:10px;
  margin-bottom:12px;
}

.heroTile{
  border:1px solid var(--h-border-2);
  border-radius:14px;
  padding:10px 10px 8px;
  background:rgba(255,255,255,0.84);
  min-height:78px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.heroLabel{
  color:var(--h-muted);
  font-size:11px;
  font-weight:700;
}

.heroValue{
  font-size:20px;
  font-weight:900;
  line-height:1;
  font-variant-numeric:tabular-nums;
}

.capacityRow{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
}

.capacityCopy{
  color:var(--h-muted);
  font-size:12px;
  font-weight:700;
}

.capacityBar{
  grid-column:1 / -1;
  height:16px;
  border-radius:999px;
  overflow:hidden;
  border:1px solid var(--h-border-2);
  background:rgba(15,23,42,0.08);
}

.capacityFill{
  height:100%;
  width:0%;
  background:linear-gradient(135deg, var(--h-accent), var(--h-accent-2));
  transition:width 0.25s ease;
}

.midGrid{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:14px;
  margin-bottom:14px;
}

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

.queueItem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px;
  border-radius:14px;
  border:1px solid var(--h-border-2);
  background:rgba(255,255,255,0.9);
  font-weight:850;
}

.queueQty{
  padding:4px 9px;
  border-radius:999px;
  background:rgba(249,115,22,0.12);
  color:var(--h-accent-ink);
  border:1px solid rgba(249,115,22,0.2);
  font-size:12px;
  min-width:42px;
  text-align:center;
}

.statusGrid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:10px;
}

.statusTile{
  border-radius:14px;
  padding:12px;
  text-align:center;
  border:1px solid transparent;
}

.statusTile .label{
  display:block;
  font-size:11px;
  text-transform:uppercase;
  margin-bottom:8px;
  font-weight:800;
}

.statusTile .value{
  display:block;
  font-size:20px;
  line-height:1;
  font-weight:900;
}

.statusTile.placed{ background:var(--status-placed-bg); color:var(--status-placed-ink); }
.statusTile.confirmed{ background:var(--status-confirmed-bg); color:var(--status-confirmed-ink); }
.statusTile.preparing{ background:var(--status-preparing-bg); color:var(--status-preparing-ink); }
.statusTile.ready{ background:var(--status-ready-bg); color:var(--status-ready-ink); }
.statusTile.delivered{ background:var(--status-delivered-bg); color:var(--status-delivered-ink); }

.summaryPanel{ margin-bottom:14px; }

.summaryGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.summaryBox{
  border:1px solid var(--h-border-2);
  border-radius:14px;
  padding:12px;
  background:rgba(255,255,255,0.92);
  min-height:150px;
}

.summaryBoxTitle{
  margin:0 0 10px;
  font-size:12px;
  text-transform:uppercase;
  color:var(--h-muted);
  font-weight:800;
}

.summaryList{
  display:grid;
  gap:6px;
  max-height:220px;
  overflow:auto;
  padding-right:4px;
}

.summaryLine{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:13px;
  font-weight:700;
}

.summaryLine .qty{
  color:var(--h-muted);
  font-weight:800;
  white-space:nowrap;
}

.ordersSection{
  margin-bottom:24px;
}

.sectionToggle{
  border:1px solid var(--h-border);
  background:var(--h-surface);
  color:var(--h-text);
  border-radius:12px;
  padding:8px 12px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}

.ordersPanelBody{ display:block; }
.ordersPanelBody.hidden{ display:none; }

.ordersToolbar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin:10px 0 12px;
}

.ordersFilters{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

.filterChip{
  border:1px solid var(--h-border);
  background:var(--h-surface);
  color:var(--h-text);
  border-radius:999px;
  padding:7px 10px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}

.filterChip.active{
  background:linear-gradient(135deg, rgba(249,115,22,0.18), rgba(251,146,60,0.10));
  border-color:rgba(249,115,22,0.35);
  color:var(--h-accent-ink);
}

.filterSearch{ min-width:240px; }

.tableWrap{
  margin-top:12px;
  border:1px solid var(--h-border-2);
  border-radius:var(--r-lg);
  overflow:auto;
  background:var(--h-surface);
}

table{
  width:100%;
  border-collapse:collapse;
  background:var(--h-surface);
}

thead th{
  text-align:left;
  font-size:11px;
  color:var(--h-muted);
  padding:10px 12px;
  background:rgba(15,23,42,0.02);
  border-bottom:1px solid var(--h-border-2);
  text-transform:uppercase;
}

tbody td{
  padding:10px 12px;
  border-bottom:1px solid rgba(15,23,42,0.06);
  font-size:13px;
  vertical-align:top;
}

.badgeStatus{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  border:1px solid transparent;
}

.badgeStatus.placed{ background:var(--status-placed-bg); color:var(--status-placed-ink); }
.badgeStatus.confirmed{ background:var(--status-confirmed-bg); color:var(--status-confirmed-ink); }
.badgeStatus.preparing{ background:var(--status-preparing-bg); color:var(--status-preparing-ink); }
.badgeStatus.ready{ background:var(--status-ready-bg); color:var(--status-ready-ink); }
.badgeStatus.delivered{ background:var(--status-delivered-bg); color:var(--status-delivered-ink); }

.tableTight th:nth-child(3),
.tableTight td:nth-child(3){ width:70px; white-space:nowrap; }

.tableTight th:nth-child(4),
.tableTight td:nth-child(4){ width:92px; white-space:nowrap; }

.tableTight th:nth-child(5),
.tableTight td:nth-child(5){ width:88px; white-space:nowrap; }

.tableItems{
  min-width:190px;
  max-width:320px;
}

.itemsBlock{
  display:grid;
  gap:4px;
}

.itemsLine{
  font-size:12px;
  line-height:1.3;
}

.boardGrid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:14px;
  margin-top:14px;
  margin-bottom:10px;
  align-items:start;
  padding-bottom:0;
}

.boardCol{
  border:1px solid var(--h-border-2);
  border-radius:var(--r-lg);
  background:var(--h-surface);
  box-shadow:var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:0;
}

.boardColHead{
  padding:13px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-bottom:1px solid var(--h-border-2);
  font-weight:900;
  position:sticky;
  top:0;
  z-index:2;
}

.boardCol.placed .boardColHead{ background:var(--status-placed-bg); color:var(--status-placed-ink); }
.boardCol.confirmed .boardColHead{ background:var(--status-confirmed-bg); color:var(--status-confirmed-ink); }
.boardCol.preparing .boardColHead{ background:var(--status-preparing-bg); color:var(--status-preparing-ink); }
.boardCol.ready .boardColHead{ background:var(--status-ready-bg); color:var(--status-ready-ink); }
.boardCol.delivered .boardColHead{ background:var(--status-delivered-bg); color:var(--status-delivered-ink); }

.colCount{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:28px;
  height:28px;
  border-radius:999px;
  background:rgba(255,255,255,0.74);
  border:1px solid rgba(15,23,42,0.08);
  font-size:12px;
  font-weight:900;
}

.boardColBody{
  height:56vh;
  min-height:420px;
  max-height:56vh;
  overflow:auto;
  padding:12px 12px 10px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.boardColFooter{
  height:12px;
  flex:0 0 12px;
  border-top:1px solid var(--h-border-2);
  background:rgba(15,23,42,0.015);
}

.orderCard{
  border:1px solid var(--h-border-2);
  border-radius:14px;
  background:rgba(255,255,255,0.98);
  box-shadow:0 1px 2px rgba(0,0,0,0.04);
  transition:box-shadow 0.15s ease, transform 0.15s ease;
  overflow:hidden;
}

.orderCard:hover{
  box-shadow:0 4px 10px rgba(0,0,0,0.08);
}

.orderCardInner{
  padding:12px 10px;
}

.orderCardTop{
  margin-bottom:8px;
  display:flex;
  justify-content:space-between;
  gap:8px;
  align-items:flex-start;
}

.orderHeaderLeft{
  min-width:0;
}

.orderId{
  font-size:10px;
  line-height:1.1;
  color:var(--h-muted);
  text-transform:uppercase;
  font-weight:800;
}

.orderCustomer{
  font-size:15px;
  line-height:1.2;
  font-weight:850;
  margin-top:4px;
  color:var(--h-text);
  word-break:break-word;
}

.timeChip{
  white-space:nowrap;
  font-size:11px;
  color:var(--h-muted);
  padding:5px 8px;
  border-radius:999px;
  border:1px solid var(--h-border-2);
  background:rgba(15,23,42,0.02);
  font-weight:700;
}

.cardActions{
  margin:8px 0 8px;
}

.cardActionsInline{
  display:grid;
  grid-template-columns:48px minmax(42px,1fr) 52px 48px;
  gap:4px;
  align-items:center;
}

.cardActions .btnGhost,
.cardActions .btnAccent,
.cardActions .btnSmall,
.cardActions .btnPlaceholder{
  height:20px;
  min-height:20px;
  padding:0 3px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:8px;
  font-weight:800;
  letter-spacing:0;
  line-height:1;
  text-align:center;
  white-space:nowrap;
  border-radius:10px;
}

.cardActions .btnGhost{
  border:1px solid var(--h-border);
  background:var(--h-surface);
}

.cardActions .btnAccent{
  border:1px solid rgba(249,115,22,0.35);
  background:linear-gradient(135deg, rgba(249,115,22,0.18), rgba(251,146,60,0.10));
  color:var(--h-accent-ink);
}

.cardActions .btnSmall{
  border:1px solid var(--h-border);
  background:var(--h-surface-2);
}

.actionBtnEdge{
  width:48px;
  min-width:48px;
}

.actionBtnDetail{
  width:52px;
  min-width:52px;
}

.actionQty{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  max-width:100%;
  padding:2px 4px;
  font-size:8px;
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.btnPlaceholder{
  visibility:hidden;
  pointer-events:none;
}

.summaryRow{ display:none; }
.summaryStats{ display:none; }

.metaChip{
  color:var(--h-muted);
  border:1px solid var(--h-border-2);
  background:rgba(15,23,42,0.02);
  font-weight:800;
  white-space:nowrap;
}

.summaryText{
  font-size:11px;
  font-weight:800;
  color:var(--h-muted);
}

.detailsWrap{
  margin-top:8px;
  border-top:1px solid var(--h-border-2);
  padding-top:10px;
  display:none;
}

.detailsWrap.open{
  display:block;
}

.detailsScroller{
  max-height:160px;
  overflow:auto;
  padding-right:4px;
}

.lineBlock{
  padding:8px 10px;
  margin-bottom:8px;
  border:1px solid var(--h-border-2);
  border-radius:12px;
  background:rgba(15,23,42,0.02);
}

.lineBlock:last-child{ margin-bottom:0; }

.lineBlockTitle{
  margin-bottom:6px;
  font-size:10px;
  color:var(--h-muted);
  text-transform:uppercase;
  font-weight:800;
}

.compactList{
  display:grid;
  gap:4px;
}

.compactLine{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  font-weight:700;
  color:var(--h-text);
}

.compactMuted{
  color:var(--h-muted);
  font-size:12px;
  font-weight:600;
}

.errorBox{
  display:none;
  margin-top:12px;
  padding:12px 14px;
  border-radius:14px;
  background:#fef2f2;
  color:#991b1b;
  border:1px solid #fecaca;
  font-size:13px;
  font-weight:700;
}

.emptyState{
  border:1px dashed var(--h-border);
  border-radius:14px;
  padding:18px;
  text-align:center;
  color:var(--h-muted);
  background:rgba(15,23,42,0.02);
  font-weight:700;
}

/* ======================================
   SHARED FILTER POPOVERS
   ====================================== */

.filterPopoverWrap{
  position:relative;
  width:100%;
  z-index:50;
}

.filterSummaryBtn{
  width:100%;
  min-height:40px;
  height:40px;
  border-radius:12px;
  border:1px solid var(--h-border);
  background:#fff;
  padding:0 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-size:13px;
  font-weight:400;
  line-height:1;
  color:var(--h-text);
  cursor:pointer;
  box-sizing:border-box;
}

.filterPopover{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  width:100%;
  min-width:220px;
  max-height:280px;
  overflow:auto;
  background:#fff;
  border:1px solid var(--h-border);
  border-radius:14px;
  box-shadow:0 14px 30px rgba(15,23,42,0.10);
  padding:10px;
  z-index:80;
  display:none;
}

.filterPopover.open{
  display:block;
}

.filterQuickActions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-bottom:8px;
}

.filterQuickActions .btnGhost{
  min-height:30px;
  height:30px;
  font-size:11px;
  padding:0 10px;
  width:auto;
}

.filterChecklist{
  display:grid;
  gap:6px;
}

.filterChecklist label{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:700;
  color:var(--h-text);
  cursor:pointer;
}

.filterChecklist input[type="checkbox"]{
  width:15px;
  height:15px;
  accent-color:var(--h-accent);
  margin:0;
}

/* ======================================
   DROP STUDIO
   ====================================== */

.container > .headerBar,
.container > .studioPage{
  width:100%;
  max-width:100%;
}

.studioPage{
  width:100%;
  max-width:100%;
  display:grid;
  gap:14px;
  box-sizing:border-box;
}

.studioCard,
.stageBar,
.contextBar,
.workspaceCard{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}

.studioCard{
  padding:14px 16px;
  overflow:visible;
  position:relative;
  z-index:30;
}

.browserToolbar{
  display:grid;
  grid-template-columns:minmax(150px,180px) minmax(220px,1fr) minmax(180px,220px) minmax(180px,220px) minmax(100px,110px);
  gap:10px;
  align-items:center;
  margin-bottom:10px;
  width:100%;
  min-width:0;
}

.browserToolbar > *{
  min-width:0;
}

.browserToolbar .btnAccent,
.browserToolbar .btnGhost{
  min-height:38px;
  height:38px;
  padding:0 14px;
  width:100%;
  min-width:0;
}

.browserToolbar input,
.browserToolbar select{
  width:100%;
  min-width:0;
  min-height:38px;
  height:38px;
}

.dropBandWrap{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
}

.dropBand{
  display:flex;
  gap:12px;
  width:max-content;
  min-width:0;
  overflow-x:visible;
  overflow-y:hidden;
  padding:4px 4px 8px;
  scroll-behavior:smooth;
  align-items:stretch;
  scrollbar-width:thin;
}

.dropCard{
  width:220px;
  min-width:220px;
  max-width:220px;
  min-height:152px;
  border:1px solid var(--h-border-2);
  border-radius:14px;
  background:rgba(255,255,255,0.95);
  padding:12px;
  cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  flex:0 0 auto;
}

.dropCard:hover{
  border-color:var(--h-border);
  box-shadow:0 8px 18px rgba(15,23,42,0.06);
  transform:translateY(-1px);
}

.dropCard.active{
  border-color:rgba(249,115,22,0.35);
  box-shadow:0 10px 22px rgba(249,115,22,0.10);
  background:linear-gradient(135deg, rgba(249,115,22,0.07), rgba(251,146,60,0.04));
}

.dropCardTop{
  display:flex;
  justify-content:space-between;
  gap:8px;
  align-items:flex-start;
  margin-bottom:6px;
}

.dropCardTitle{
  font-size:13px;
  font-weight:850;
  line-height:1.25;
  margin:0;
}

.dropCardSub{
  margin:4px 0 0;
  font-size:11px;
  color:var(--h-muted);
  line-height:1.35;
}

.dropCardMeta{
  margin-top:7px;
  font-size:11px;
  color:var(--h-text);
  font-weight:700;
  line-height:1.35;
}

.dropCardStats{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:10px;
}

.dropCardActions{
  display:flex;
  gap:6px;
  margin-top:10px;
}

.dropCardActions .btnSmall{
  width:100%;
  min-height:30px;
  font-size:11px;
  padding:0 10px;
}

.miniChip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 7px;
  border-radius:999px;
  border:1px solid var(--h-border-2);
  background:rgba(15,23,42,0.02);
  font-size:10px;
  color:var(--h-muted);
  font-weight:800;
  white-space:nowrap;
  max-width:max-content;
}

.miniChip.live{
  background:rgba(22,163,74,0.10);
  border-color:rgba(22,163,74,0.18);
  color:var(--h-good);
}

.miniChip.scheduled{
  background:rgba(59,130,246,0.10);
  border-color:rgba(59,130,246,0.18);
  color:#1d4ed8;
}

.miniChip.draft{
  background:rgba(245,158,11,0.10);
  border-color:rgba(245,158,11,0.18);
  color:#b45309;
}

.miniChip.closed,
.miniChip.completed,
.miniChip.archived,
.miniChip.cancelled{
  background:rgba(15,23,42,0.05);
  border-color:rgba(15,23,42,0.10);
  color:var(--h-muted);
}

.stageShell{
  position:sticky;
  top:16px;
  z-index:20;
  display:grid;
  gap:10px;
  width:100%;
}

.stageBar{
  border:1px solid var(--h-border);
  border-radius:16px;
  padding:12px 14px;
  background:var(--h-surface);
  box-shadow:0 10px 22px rgba(15,23,42,0.08);
}

.stageBarTop{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.stageBarMeta{
  font-size:12px;
  color:var(--h-muted);
  font-weight:700;
  margin-top:4px;
}

.saveStateInline{
  font-size:12px;
  font-weight:800;
  color:var(--h-muted);
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--h-border-2);
  background:rgba(15,23,42,0.02);
  max-width:max-content;
}

.saveStateInline.saved{
  color:var(--h-good);
  background:#f0fdf4;
  border-color:rgba(22,163,74,0.20);
}

.saveStateInline.saving{
  color:#b45309;
  background:#fff7ed;
  border-color:rgba(245,158,11,0.20);
}

.saveStateInline.error{
  color:#991b1b;
  background:#fef2f2;
  border-color:#fecaca;
}

.stagePills{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:10px;
  width:100%;
}

.stagePill{
  min-width:0;
  min-height:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 12px;
  border-radius:14px;
  border:1px solid var(--h-border-2);
  background:rgba(15,23,42,0.02);
  color:var(--h-muted);
  font-size:12px;
  font-weight:850;
  cursor:pointer;
  white-space:nowrap;
  text-align:center;
  transition:all .15s ease;
}

.stagePill:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(15,23,42,0.05);
}

.stagePill.active{
  border-color:rgba(249,115,22,0.34);
  background:linear-gradient(135deg, rgba(249,115,22,0.18), rgba(251,146,60,0.10));
  color:var(--h-accent-ink);
  box-shadow:0 8px 18px rgba(249,115,22,0.10);
}

.stagePill.complete{
  border-color:rgba(22,163,74,0.20);
  background:rgba(22,163,74,0.10);
  color:var(--h-good);
}

.stagePill.attention{
  border-color:rgba(245,158,11,0.22);
  background:rgba(245,158,11,0.12);
  color:#b45309;
}

.stageIcon{
  width:18px;
  min-width:18px;
  height:18px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  font-weight:900;
  border:1px solid currentColor;
}

.contextBar{
  border:1px solid var(--h-border-2);
  border-radius:14px;
  padding:10px 12px;
  background:rgba(255,255,255,0.96);
  box-shadow:0 6px 14px rgba(15,23,42,0.05);
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}

.contextMeta{
  font-size:12px;
  color:var(--h-text);
  font-weight:700;
  line-height:1.35;
}

.contextChips{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.workspaceOuter,
.workspaceInner{
  width:100%;
  max-width:100%;
}

.workspaceInner{
  display:grid;
  gap:12px;
}

.workspaceCard{
  width:100%;
  padding:14px 16px;
}

.workspaceHeader{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.workspaceHeaderActions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

.workspaceHeaderActions .btnGhost,
.workspaceHeaderActions .btnAccent{
  min-height:32px;
  font-size:11px;
  padding:0 10px;
}

.inlineSuccess{
  margin-bottom:10px;
  border:1px solid rgba(22,163,74,0.18);
  border-radius:12px;
  padding:10px 12px;
  background:rgba(22,163,74,0.07);
  color:var(--h-good);
  font-size:12px;
  font-weight:800;
  display:none;
}

.stagePane{
  display:none;
}

.stagePane.active{
  display:block;
}

.stagePaneInner{
  width:100%;
  max-width:100%;
  margin:0;
}

.stageSection{
  width:100%;
  box-sizing:border-box;
  border:1px solid var(--h-border-2);
  border-radius:14px;
  background:rgba(255,255,255,0.94);
  padding:12px;
  margin-bottom:10px;
}

.stageSectionTitle{
  margin:0 0 4px;
  font-size:14px;
  font-weight:850;
}

.stageSectionSub{
  margin:0 0 10px;
  font-size:11px;
  color:var(--h-muted);
}

.studioGrid2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.studioGrid3{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
}

.field{
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
}

.field label{
  font-size:10px;
  color:var(--h-muted);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
}

.field input,
.field select,
.field textarea{
  width:100%;
  min-width:0;
  padding:8px 10px;
  font-size:12px;
  border-radius:10px;
}

.field textarea{
  resize:vertical;
  min-height:74px;
}

.helperText{
  font-size:10px;
  color:var(--h-muted);
  line-height:1.35;
}

.hostPreview{
  border:1px dashed var(--h-border);
  border-radius:10px;
  padding:9px 10px;
  background:rgba(15,23,42,0.02);
  font-size:12px;
  line-height:1.4;
}

.hostPreview strong{
  display:block;
  color:var(--h-text);
  margin-bottom:2px;
}

.toggleRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 10px;
  border:1px solid var(--h-border-2);
  border-radius:10px;
  background:rgba(15,23,42,0.02);
  margin-bottom:10px;
}

.toggleRow input[type="checkbox"]{
  width:16px;
  height:16px;
  margin:0;
  accent-color:var(--h-accent);
}

.repeatBlock{
  border:1px solid var(--h-border-2);
  border-radius:12px;
  padding:10px;
  background:rgba(15,23,42,0.02);
  margin-top:10px;
}

.repeatChoice,
.openChoice{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:10px;
}

.repeatChoice label,
.openChoice label{
  display:flex;
  gap:7px;
  align-items:center;
  font-size:12px;
  font-weight:700;
  color:var(--h-text);
}

.scheduleTableWrap{
  overflow:auto;
  border:1px solid var(--h-border-2);
  border-radius:12px;
  background:#fff;
  margin-top:8px;
}

.scheduleTable{
  width:100%;
  border-collapse:collapse;
}

.scheduleTable th,
.scheduleTable td{
  padding:8px;
  border-bottom:1px solid rgba(15,23,42,0.06);
  font-size:12px;
  vertical-align:middle;
}

.scheduleTable th{
  text-align:left;
  font-size:10px;
  text-transform:uppercase;
  color:var(--h-muted);
  background:rgba(15,23,42,0.02);
}

.scheduleTable select,
.scheduleTable input{
  width:100%;
  min-width:0;
  padding:7px 8px;
  font-size:12px;
}

.previewList{
  display:grid;
  gap:6px;
  margin-top:8px;
}

.previewLine{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid var(--h-border-2);
  background:rgba(255,255,255,0.94);
  font-size:11px;
  font-weight:700;
}

.productGroup{
  width:100%;
  border:1px solid var(--h-border-2);
  border-radius:12px;
  overflow:hidden;
  margin-bottom:10px;
  background:#fff;
}

.productGroupHead{
  padding:10px 12px;
  background:rgba(15,23,42,0.03);
  border-bottom:1px solid var(--h-border-2);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.02em;
  font-weight:900;
  color:var(--h-muted);
}

.assignmentTable{
  width:100%;
  table-layout:fixed;
  border-collapse:collapse;
}

.assignmentTable th,
.assignmentTable td{
  padding:8px 8px;
  border-bottom:1px solid rgba(15,23,42,0.06);
  vertical-align:middle;
  font-size:12px;
  box-sizing:border-box;
}

.assignmentTable th{
  text-align:left;
  font-size:10px;
  text-transform:uppercase;
  color:var(--h-muted);
  background:rgba(15,23,42,0.02);
}

.assignmentTable td input[type="checkbox"]{
  width:15px;
  height:15px;
  accent-color:var(--h-accent);
}

.assignmentTable td input[type="number"]{
  min-width:70px;
  width:100%;
  padding:7px 8px;
  font-size:12px;
}

.productName{
  font-weight:800;
}

.subMeta{
  display:block;
  margin-top:4px;
  font-size:10px;
  color:var(--h-muted);
}

.capacityTag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 7px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  white-space:nowrap;
}

.capacityTag.yes{
  border:1px solid rgba(249,115,22,0.2);
  color:var(--h-accent-ink);
  background:rgba(249,115,22,0.10);
}

.capacityTag.no{
  border:1px solid var(--h-border-2);
  color:var(--h-muted);
  background:rgba(15,23,42,0.02);
}

.reviewGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.summaryBlock{
  display:grid;
  gap:7px;
  margin-top:8px;
}

.summaryItem{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
  font-size:12px;
  line-height:1.35;
}

.summaryItem .label{
  color:var(--h-muted);
  font-weight:700;
}

.summaryItem .value{
  color:var(--h-text);
  font-weight:800;
  text-align:right;
}

.readinessList{
  display:grid;
  gap:7px;
  margin-top:8px;
}

.readinessItem{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:12px;
  line-height:1.35;
}

.readinessMark{
  width:17px;
  min-width:17px;
  height:17px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  font-weight:900;
  margin-top:1px;
}

.readinessItem.pass .readinessMark{
  background:rgba(22,163,74,0.12);
  color:var(--h-good);
  border:1px solid rgba(22,163,74,0.2);
}

.readinessItem.fail .readinessMark{
  background:rgba(245,158,11,0.12);
  color:#b45309;
  border:1px solid rgba(245,158,11,0.2);
}

.shareLink{
  border:1px solid var(--h-border-2);
  border-radius:10px;
  padding:9px 10px;
  background:rgba(15,23,42,0.02);
  font-size:12px;
  line-height:1.35;
  word-break:break-all;
}

.qrWrap{
  display:grid;
  place-items:center;
  border:1px solid var(--h-border-2);
  border-radius:12px;
  padding:10px;
  background:#fff;
  min-height:176px;
  margin-top:8px;
  overflow:hidden;
}

.qrWrap img{
  width:160px;
  height:160px;
  object-fit:contain;
  display:block;
}

.stageFooter{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
  flex-wrap:wrap;
  position:sticky;
  bottom:12px;
  padding-top:8px;
  background:linear-gradient(to top, var(--h-bg) 60%, rgba(247,247,251,0));
}

.stageFooterLeft,
.stageFooterRight{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

.stageFooter .btnGhost,
.stageFooter .btnAccent{
  min-height:36px;
  height:36px;
  font-size:12px;
  padding:0 12px;
  border-radius:10px;
}

.modalBackdrop{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,0.45);
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  z-index:50;
}

.modalBackdrop.open{
  display:flex;
}

.modalCard{
  width:min(680px, 100%);
  max-height:90vh;
  overflow:auto;
  background:var(--h-surface);
  border-radius:18px;
  border:1px solid var(--h-border-2);
  box-shadow:0 20px 44px rgba(15,23,42,0.18);
  padding:18px;
}

.modalHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.modalActions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:14px;
  flex-wrap:wrap;
}

.modalMessage{
  margin-top:10px;
  border:1px solid var(--h-border-2);
  border-radius:12px;
  padding:10px 12px;
  background:rgba(15,23,42,0.02);
  font-size:12px;
  color:var(--h-muted);
  display:none;
}

/* ======================================
   MENU LIBRARY
   ====================================== */

.menuPage{
  width:100%;
  display:grid;
  gap:14px;
}

.menuToolbar{
  display:grid;
  grid-template-columns:minmax(220px,1.4fr) minmax(150px,0.9fr) minmax(170px,1fr) minmax(160px,0.9fr) minmax(170px,0.9fr) 100px;
  gap:10px;
  align-items:center;
}

.menuToolbar > *{
  min-width:0;
}

.menuToolbar input,
.menuToolbar select,
.menuToolbar .filterSummaryBtn,
.menuToolbar .btnGhost{
  width:100%;
  min-width:0;
  height:38px;
  min-height:38px;
  box-sizing:border-box;
}

.menuStats{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
  margin-top:10px;
}

.menuStats .heroTile{
  min-width:0;
}

.workspaceTabs{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
  width:100%;
}

.workspaceTabs .stagePill{
  width:100%;
  min-width:0;
  justify-content:center;
}

.menuHeaderActions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

.menuHeaderActions .btnAccent,
.menuHeaderActions .btnGhost{
  min-height:34px;
  height:34px;
  padding:0 12px;
  font-size:12px;
}

.menuHeaderActions .isPrimaryAction{
  box-shadow:0 8px 18px rgba(249,115,22,0.10);
}

.menuWorkspaceGrid{
  display:grid;
  grid-template-columns:minmax(0, 1.02fr) minmax(340px, 0.98fr);
  gap:14px;
  align-items:start;
}

.menuPaneLeft,
.menuPaneRight{
  min-width:0;
}

.menuTableWrap{
  overflow:auto;
}

.menuTableWrap table{
  table-layout:fixed;
  width:100%;
}

.menuTableWrap thead th,
.menuTableWrap tbody td{
  padding:8px 9px;
}

.menuTableWrap thead th{
  font-size:10px;
}

.menuTableWrap tbody td{
  font-size:12px;
}

.menuLibraryRow{
  cursor:pointer;
  transition:background .15s ease, box-shadow .15s ease;
}

.menuLibraryRow:hover{
  background:rgba(15,23,42,0.025);
}

.menuLibraryRow.active{
  background:linear-gradient(135deg, rgba(249,115,22,0.08), rgba(251,146,60,0.04));
  box-shadow:inset 3px 0 0 rgba(249,115,22,0.6);
}

.menuLibraryRow .productName{
  font-size:13px;
  line-height:1.2;
}

.menuLibraryRow .subMeta{
  margin-top:3px;
  font-size:10px;
  line-height:1.25;
}

.selectionSummaryBar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
  padding:8px 0 2px;
}

.selectionSummaryBar > div:first-child{
  font-size:13px;
  font-weight:850;
  color:var(--h-text);
}

.selectionSummaryMetrics{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.menuEditorActions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}

.menuEditorActions .btnAccent,
.menuEditorActions .btnGhost{
  min-height:34px;
  height:34px;
  padding:0 12px;
  font-size:12px;
}

.menuSectionHint{
  font-size:11px;
  color:var(--h-muted);
  line-height:1.4;
}

.bundleEditorNotice{
  display:none;
  margin-top:10px;
  border:1px solid rgba(249,115,22,0.2);
  border-radius:12px;
  padding:9px 10px;
  background:rgba(249,115,22,0.08);
  color:var(--h-accent-ink);
  font-size:11px;
  font-weight:800;
}

.bundleEditorNotice.show{
  display:block;
}

.choiceSetPanel{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
  border:1px solid var(--h-border-2);
  border-radius:12px;
  padding:10px;
  background:rgba(15,23,42,0.02);
}

.choiceSetOption{
  display:grid;
  grid-template-columns:16px 1fr;
  gap:8px;
  align-items:start;
  padding:7px 8px;
  border:1px solid var(--h-border-2);
  border-radius:10px;
  background:#fff;
  cursor:pointer;
}

.choiceSetOption input{
  margin:2px 0 0;
  width:14px;
  height:14px;
  accent-color:var(--h-accent);
}

.choiceSetOption .subMeta{
  grid-column:2;
  margin-top:2px;
}

.menuMiniEmpty{
  padding:14px;
  font-size:12px;
}

#pane-categories .tableTight th:nth-child(1){ width:44%; }
#pane-categories .tableTight th:nth-child(2){ width:18%; }
#pane-categories .tableTight th:nth-child(3){ width:19%; }
#pane-categories .tableTight th:nth-child(4){ width:19%; }

#pane-products .tableTight th:nth-child(1),
#pane-bundles .tableTight th:nth-child(1){ width:25%; }

#pane-products .tableTight th:nth-child(2),
#pane-bundles .tableTight th:nth-child(2){ width:9%; }

#pane-products .tableTight th:nth-child(3),
#pane-bundles .tableTight th:nth-child(3){ width:13%; }

#pane-products .tableTight th:nth-child(4),
#pane-bundles .tableTight th:nth-child(4){ width:9%; }

#pane-products .tableTight th:nth-child(5),
#pane-bundles .tableTight th:nth-child(5){ width:9%; }

#pane-products .tableTight th:nth-child(6),
#pane-bundles .tableTight th:nth-child(6){ width:10%; }

#pane-products .tableTight th:nth-child(7),
#pane-bundles .tableTight th:nth-child(7){ width:9%; }

#pane-products .tableTight th:nth-child(8),
#pane-bundles .tableTight th:nth-child(8){ width:12%; }

#pane-products .badgeStatus,
#pane-bundles .badgeStatus,
#pane-categories .badgeStatus{
  padding:5px 9px;
  font-size:11px;
}

#pane-products .miniChip,
#pane-bundles .miniChip{
  padding:3px 7px;
  font-size:10px;
}

.hidden{
  display:none !important;
}

/* ======================================
   RESPONSIVE
   ====================================== */

@media (max-width:1180px){
  .browserToolbar{
    grid-template-columns:1fr 1fr;
  }

  .studioGrid2,
  .reviewGrid{
    grid-template-columns:1fr;
  }

  .studioGrid3{
    grid-template-columns:1fr;
  }
}

@media (max-width:1260px){
  .menuToolbar{
    grid-template-columns:minmax(220px,1fr) repeat(4, minmax(150px,0.7fr));
  }

  .menuToolbar > button{
    grid-column:1 / -1;
    width:max-content;
  }

  .menuWorkspaceGrid{
    grid-template-columns:1fr;
  }
}

@media (max-width:1120px){
  .midGrid{ grid-template-columns:1fr; }
}

@media (max-width:1100px){
  .heroGrid{ grid-template-columns:repeat(3, 1fr); }

  .execBar{
    grid-template-columns:1fr 1fr;
    align-items:start;
  }

  .serviceBoardFilters > div:first-child{
    grid-column:1 / -1;
  }

  .execRight{
    grid-column:1 / -1;
    justify-content:flex-end;
    min-height:auto;
  }
}

@media (max-width:980px){
  .summaryGrid{ grid-template-columns:1fr; }
  select{ min-width:220px; }
  .brand{ min-width:unset; }
}

@media (max-width:900px){
  .browserToolbar{
    grid-template-columns:1fr;
  }

  .stagePills{
    grid-template-columns:repeat(5, 180px);
    overflow-x:auto;
    padding-bottom:2px;
  }

  .contextBar{
    align-items:flex-start;
  }

  .stageFooter{
    flex-direction:column;
    align-items:stretch;
  }

  .stageFooterLeft,
  .stageFooterRight{
    width:100%;
  }

  .menuStats{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .choiceSetPanel{
    grid-template-columns:1fr;
  }
}

@media (max-width:800px){
  .statusGrid{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width:760px){
  .boardGrid{ grid-template-columns:1fr; }
  .boardColBody{ height:auto; max-height:none; }
  .ordersToolbar{ align-items:stretch; }
  .filterSearch{ min-width:unset; width:100%; }

  .cardActionsInline{
    grid-template-columns:1fr 1fr;
  }

  .actionQty{
    grid-column:1 / -1;
    justify-self:start;
    max-width:none;
    overflow:visible;
    text-overflow:clip;
  }

  .actionBtnEdge,
  .actionBtnDetail{
    width:100%;
    min-width:0;
  }

  .execBar{
    grid-template-columns:1fr;
    align-items:start;
  }

  .execRight{
    grid-column:auto;
    justify-content:flex-start;
    flex-wrap:wrap;
    min-height:auto;
  }

  .execRight .utilityLink,
  .execRight .btnGhost,
  .execRight .btnAccent{
    width:auto;
  }

  .menuToolbar{
    grid-template-columns:1fr;
  }

  .workspaceTabs{
    grid-template-columns:1fr;
  }

  .selectionSummaryBar{
    align-items:flex-start;
  }

  .menuHeaderActions{
    width:100%;
  }
}

@media (max-width:640px){
  .heroGrid{ grid-template-columns:repeat(2, 1fr); }
  .queueGrid{ grid-template-columns:1fr; }
}

html, body{
  overflow-x:hidden;
}

.container{
  width:min(1480px, calc(100vw - 36px));
  max-width:min(1480px, calc(100vw - 36px));
}

@media (max-width:768px){
  .container{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }
}