/**
 * Guest menu design skins — layout + header chrome variants (not color theme).
 * Active skin: html[data-menu-skin="classic"|"union"]
 * Union also toggles .menu-header-v3 on html/body (fabric header via menu-header-v3.css).
 */

html[data-menu-skin="classic"] {
  --menu-skin-alt-text-color: var(--muted);
}

html[data-menu-skin="union"] {
  --font-display: "Montserrat", var(--font-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  --menu-skin-alt-text-color: var(--muted);
  --union-display-scale: 1;
  --union-fs-chip: calc(0.72rem * var(--union-display-scale));
  --union-fs-dropdown: calc(0.78rem * var(--union-display-scale));
  --union-fs-section: calc(1rem * var(--union-display-scale));
  --union-fs-sub: calc(0.68rem * var(--union-display-scale));
  --union-fs-card: calc(0.9rem * var(--union-display-scale));
  --union-fs-card-wide: calc(0.92rem * var(--union-display-scale));
  --union-fs-desc: calc(0.75rem * var(--union-display-scale));
  --union-fs-hint: calc(0.68rem * var(--union-display-scale));
  --union-fs-modal-head: calc(1.05rem * var(--union-display-scale));
  --union-fs-modal-title: calc(1.2rem * var(--union-display-scale));
  --union-fs-modal-desc: calc(0.8rem * var(--union-display-scale));
  --union-fs-option-label: calc(0.7rem * var(--union-display-scale));
  --union-fs-option: calc(0.85rem * var(--union-display-scale));
  --union-fs-code: calc(0.7rem * var(--union-display-scale));
  --union-fs-venue: calc(0.76rem * var(--union-display-scale));
  --union-fs-detail-short: calc(0.85rem * var(--union-display-scale));
  --union-fs-detail-long: calc(0.88rem * var(--union-display-scale));
  --union-fs-sheet-sub: calc(0.65rem * var(--union-display-scale));
}

/* ── union: text category tabs, compact sections, search in category row ── */
html[data-menu-skin="union"] body .header-top {
  margin-bottom: 2px;
}

html[data-menu-skin="union"] body .categories {
  align-items: center;
  gap: 6px;
}

html[data-menu-skin="union"].menu-header-v3 body.guest-menu .categories,
html[data-menu-skin="union"] body.guest-menu.menu-header-v3 .categories {
  align-items: center;
  min-height: var(--header-chrome-toolbar-row-h, 34px);
}

html[data-menu-skin="union"] body .category-chips {
  gap: 12px;
}

html[data-menu-skin="union"] body .category-chips-scroll-wrap.chips-fit .cat-chip:not(.delivery-chip) {
  margin: 0;
}

html[data-menu-skin="union"] body .cat-menu-dropdown-item {
  font-family: var(--font-display);
  font-size: var(--union-fs-dropdown);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

html[data-menu-skin="union"] body .category-chips-scroll-wrap {
  height: var(--header-chrome-toolbar-row-h, 34px);
  min-height: var(--header-chrome-toolbar-row-h, 34px);
  display: flex;
  align-items: center;
}

html[data-menu-skin="union"] body .category-chips-scroll {
  display: flex;
  align-items: center;
  height: var(--header-chrome-toolbar-row-h, 34px);
  min-height: var(--header-chrome-toolbar-row-h, 34px);
}

html[data-menu-skin="union"] body .category-chips {
  align-items: center;
  height: var(--header-chrome-toolbar-row-h, 34px);
  min-height: var(--header-chrome-toolbar-row-h, 34px);
}

html[data-menu-skin="union"] .cat-chip[data-cat] {
  position: relative;
  display: inline-flex;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: var(--font-display);
  font-size: var(--union-fs-chip);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1;
  height: var(--header-chrome-toolbar-row-h, 34px);
  min-height: var(--header-chrome-toolbar-row-h, 34px);
  align-items: center;
  transition: color 0.2s, opacity 0.2s;
}

html[data-menu-skin="union"] .cat-chip[data-cat] .cat-chip-label {
  display: inline-block;
  position: relative;
  line-height: 1;
}

html[data-menu-skin="union"] .cat-chip[data-cat].active .cat-chip-label::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 3px);
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
  pointer-events: none;
}

html[data-menu-skin="union"] .cat-chip[data-cat] + .cat-chip[data-cat]::before {
  content: none;
  display: none;
}

html[data-menu-skin="union"] .cat-chip[data-cat]:hover {
  color: rgba(255, 255, 255, 0.88);
}

html[data-menu-skin="union"] .cat-chip[data-cat].active {
  background: transparent;
  color: #fff;
  border-color: transparent;
}

html[data-menu-skin="union"] .cat-menu-dropdown-item.cat-has-new::before {
  content: '·\00a0';
  color: #3dff87;
  font-weight: 800;
  text-shadow: 0 0 8px rgba(61, 255, 135, 0.45);
}

html[data-menu-skin="union"] .menu {
  padding: 4px 16px 8px;
}

html[data-menu-skin="union"] .section-title {
  font-family: var(--font-display);
  font-size: var(--union-fs-section);
  font-weight: 700;
  line-height: 1.3;
  margin: 10px 0 6px;
  scroll-margin-top: calc(var(--menu-sticky-h) + 8px);
  color: var(--accent);
}

html[data-menu-skin="union"] .section-title:first-child {
  margin-top: 4px;
}

html[data-menu-skin="union"] .section-title .menu-label-stack {
  display: block;
  line-height: 1.3;
}

html[data-menu-skin="union"] .section-title .menu-label-stack .menu-item-name {
  display: block;
}

html[data-menu-skin="union"] .menu-sub-en,
html[data-menu-skin="classic"] .menu-sub-en {
  color: var(--menu-skin-alt-text-color);
}

html[data-menu-skin="union"] .section-title .menu-sub-en,
html[data-menu-skin="union"] .section-title .menu-label-stack .menu-sub-en {
  font-family: var(--font-display);
  font-size: var(--union-fs-sub);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-top: 3px;
  line-height: 1.25;
}

html[data-menu-skin="union"] .product-name .menu-sub-en,
html[data-menu-skin="union"] .product-name .menu-label-stack .menu-sub-en {
  font-family: var(--font-display);
  font-size: var(--union-fs-sub);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-top: 3px;
  line-height: 1.25;
}

html[data-menu-skin="union"] .product-name,
html[data-menu-skin="union"] .product-name .menu-label-stack,
html[data-menu-skin="union"] .product-name .menu-item-name,
html[data-menu-skin="union"] .product-name .menu-item-code {
  font-family: var(--font-display);
  font-size: var(--union-fs-card);
  font-weight: 700;
  line-height: 1.28;
}

html[data-menu-skin="union"] body:not(.menu-layout-compact) .product-name,
html[data-menu-skin="union"] body:not(.menu-layout-compact) .product-name .menu-label-stack,
html[data-menu-skin="union"] body:not(.menu-layout-compact) .product-name .menu-item-name,
html[data-menu-skin="union"] body:not(.menu-layout-compact) .product-name .menu-item-code {
  font-size: var(--union-fs-card-wide);
}

html[data-menu-skin="union"] .product-desc,
html[data-menu-skin="union"] .variant-hint {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.35;
}

html[data-menu-skin="union"] .product-desc {
  font-size: var(--union-fs-desc);
}

html[data-menu-skin="union"] .variant-hint {
  font-size: var(--union-fs-hint);
}

/* ── union: dish modal / variant picker ── */
html[data-menu-skin="union"] .sheet-header-title,
html[data-menu-skin="union"] .sheet-header-title .menu-item-name,
html[data-menu-skin="union"] .dish-modal-title,
html[data-menu-skin="union"] .dish-modal-title .menu-item-name {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.25;
}

html[data-menu-skin="union"] .sheet-header-title,
html[data-menu-skin="union"] .sheet-header-title .menu-item-name {
  font-size: var(--union-fs-modal-head);
}

html[data-menu-skin="union"] .dish-modal-title,
html[data-menu-skin="union"] .dish-modal-title .menu-item-name,
html[data-menu-skin="union"] body .dish-detail-content .dish-modal-title {
  font-size: var(--union-fs-modal-title);
}

html[data-menu-skin="union"] .sheet-header-title .menu-sub-en {
  font-family: var(--font-display);
  font-size: var(--union-fs-sheet-sub);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.25;
}

html[data-menu-skin="union"] .dish-modal-title .menu-sub-en,
html[data-menu-skin="union"] .option-item-name .menu-sub-en {
  font-family: var(--font-display);
  font-size: var(--union-fs-sub);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.25;
}

html[data-menu-skin="union"] .dish-modal-desc,
html[data-menu-skin="union"] .dish-detail-short,
html[data-menu-skin="union"] .dish-detail-long {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.4;
}

html[data-menu-skin="union"] .dish-modal-desc {
  font-size: var(--union-fs-modal-desc);
}

html[data-menu-skin="union"] .dish-detail-short {
  font-size: var(--union-fs-detail-short);
}

html[data-menu-skin="union"] .dish-detail-long {
  font-size: var(--union-fs-detail-long);
}

html[data-menu-skin="union"] .option-label,
html[data-menu-skin="union"] .dish-info-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--union-fs-option-label);
  letter-spacing: 0.06em;
}

html[data-menu-skin="union"] .option-item-name,
html[data-menu-skin="union"] .option-item-code {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.28;
}

html[data-menu-skin="union"] .option-item-name {
  font-size: var(--union-fs-option);
}

html[data-menu-skin="union"] .option-item-code {
  font-size: var(--union-fs-code);
}

html[data-menu-skin="union"].menu-header-v3 body.guest-menu .menu-sticky .header-venue-bridge .venue-tag,
html[data-menu-skin="union"] body.guest-menu.menu-header-v3 .menu-sticky .header-venue-bridge .venue-tag,
html[data-menu-skin="union"] body.guest-menu .torbeens-tagline-stack .venue-tag {
  font-size: var(--union-fs-venue);
}

html[data-theme="light"][data-menu-skin="union"] .cat-chip[data-cat] {
  color: var(--text);
}

html[data-theme="light"][data-menu-skin="union"] .cat-chip[data-cat].active {
  color: var(--text);
}