/* MAKON V202 — Detail menu without an outer card surface.
   The menu is structurally the same as Posts on every screen size:
   only individual dish cards are surfaces; the common menu container is not. */

html body.detail-page #menuContainer,
html body.detail-page #drinksContainer,
html body.detail-page #menuContainer .detail-menu-panel,
html body.detail-page #drinksContainer .detail-menu-panel,
html body.detail-page #menuContainer .detail-menu-filter-results,
html body.detail-page #drinksContainer .detail-menu-filter-results,
html body.detail-page #menuContainer .menu-grid-modern,
html body.detail-page #drinksContainer .menu-grid-modern,
html body.detail-page #menuContainer .menu-grid,
html body.detail-page #drinksContainer .drinks-grid {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  overflow: visible !important;
}

html body.detail-page #menuContainer,
html body.detail-page #drinksContainer,
html body.detail-page #menuContainer .detail-menu-panel,
html body.detail-page #drinksContainer .detail-menu-panel,
html body.detail-page #menuContainer .detail-menu-filter-results,
html body.detail-page #drinksContainer .detail-menu-filter-results {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

html body.detail-page #menuContainer .menu-header,
html body.detail-page #drinksContainer .drinks-header {
  background: transparent !important;
  box-shadow: none !important;
}

/* Only light mode dish cards use a white surface. */
html body.detail-page:not(.dark):not(.dark-theme) #menuContainer .menu-item-modern.detail-menu-card,
html body.detail-page:not(.dark):not(.dark-theme) #drinksContainer .menu-item-modern.detail-menu-card,
html body.detail-page:not(.dark):not(.dark-theme) #drinksContainer .menu-item-modern.drink-item-modern.detail-menu-card {
  background: #fff !important;
  overflow: hidden !important;
}

/* MAKON V203 — one connected light shell, exactly like the dark page shell.
   It starts at the header and continues down the whole Detail page. The menu
   itself remains transparent, so it cannot create a second layer below cards. */
html body.detail-page:not(.dark):not(.dark-theme) {
  --detail-shell-bg: #f7f9f5 !important;
  --detail-header-bg: #eef2ec !important;
  --detail-line: rgba(24, 44, 31, .09) !important;
  background: #eef2ec !important;
}

html body.detail-page:not(.dark):not(.dark-theme) .site-header {
  background: var(--detail-header-bg) !important;
}

html body.detail-page:not(.dark):not(.dark-theme) .site-header .container,
html body.detail-page:not(.dark):not(.dark-theme) .header-inner,
html body.detail-page:not(.dark):not(.dark-theme) #productRoot.container {
  background: var(--detail-shell-bg) !important;
}

html body.detail-page:not(.dark):not(.dark-theme) .header-inner {
  border-color: var(--detail-line) !important;
  border-bottom-color: transparent !important;
}

/* V204: the legacy V7 rule in detail_overrides.css uses
   body.detail-page:not(.dark):not(.dark-theme) #menuContainer and therefore
   has more specificity than a plain #menuContainer reset.  Keep one Detail
   shell from the header, but make only the common menu wrapper transparent.
   The selectors below intentionally repeat :not(...) and add html, so they
   win even with !important. Individual .detail-menu-card surfaces are not
   selected and remain visually distinct. */
html body.detail-page:not(.dark):not(.dark-theme) #menuContainer,
html body.detail-page:not(.dark):not(.dark-theme) #drinksContainer,
html body.detail-page:not(.dark):not(.dark-theme) #menuContainer .detail-menu-panel,
html body.detail-page:not(.dark):not(.dark-theme) #drinksContainer .detail-menu-panel,
html body.detail-page:not(.dark):not(.dark-theme) .detail-menu-panel,
html body.detail-page:not(.dark):not(.dark-theme) #menuContainer .detail-menu-filter-results,
html body.detail-page:not(.dark):not(.dark-theme) #drinksContainer .detail-menu-filter-results,
html body.detail-page:not(.dark):not(.dark-theme) #menuContainer .menu-grid-modern,
html body.detail-page:not(.dark):not(.dark-theme) #drinksContainer .menu-grid-modern,
html body.detail-page:not(.dark):not(.dark-theme) #menuContainer .menu-grid,
html body.detail-page:not(.dark):not(.dark-theme) #drinksContainer .drinks-grid {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html body.detail-page:not(.dark):not(.dark-theme) #menuContainer,
html body.detail-page:not(.dark):not(.dark-theme) #drinksContainer {
  padding: 0 !important;
  overflow: visible !important;
}

html body.detail-page:not(.dark):not(.dark-theme) #menuContainer .menu-header,
html body.detail-page:not(.dark):not(.dark-theme) #drinksContainer .drinks-header {
  background: transparent !important;
  box-shadow: none !important;
}

/* Night mode: the V202 light-card rule must never override dark card skin. */
html body.dark.detail-page #menuContainer .menu-item-modern.detail-menu-card,
html body.dark-theme.detail-page #menuContainer .menu-item-modern.detail-menu-card,
html body.dark.detail-page #drinksContainer .menu-item-modern.detail-menu-card,
html body.dark-theme.detail-page #drinksContainer .menu-item-modern.detail-menu-card,
html body.dark.detail-page #drinksContainer .menu-item-modern.drink-item-modern.detail-menu-card,
html body.dark-theme.detail-page #drinksContainer .menu-item-modern.drink-item-modern.detail-menu-card {
  background: linear-gradient(160deg, #202820 0%, #171d18 100%) !important;
  border-color: rgba(205, 236, 203, .11) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .28) !important;
  overflow: hidden !important;
}

html body.dark.detail-page #menuContainer .detail-menu-card-body,
html body.dark-theme.detail-page #menuContainer .detail-menu-card-body,
html body.dark.detail-page #drinksContainer .detail-menu-card-body,
html body.dark-theme.detail-page #drinksContainer .detail-menu-card-body {
  background: transparent !important;
}