/* MyFoods production UI fix: final cascade, contrast and role states */

:root {
  --mf-ui-deep: #123D34;
  --mf-ui-deep-2: #0F342D;
  --mf-ui-green: #2F7D46;
  --mf-ui-sage: #7FA691;
  --mf-ui-bg: #F7F2EA;
  --mf-ui-surface: #FFFFFF;
  --mf-ui-surface-soft: #FBF8F2;
  --mf-ui-text: #1F2328;
  --mf-ui-muted: #5F6864;
  --mf-ui-border: #E7DDD2;
  --mf-ui-border-strong: #D8CCBF;
  --mf-ui-slate: #27415A;
  --mf-ui-danger: #B42318;
  --mf-ui-warning: #9A5B12;
  --mf-ui-ring: rgba(47, 125, 70, .18);
}

body {
  color: var(--mf-ui-text);
  background: var(--mf-ui-bg);
}

/* Logos: one wordmark system, no visible logo box. */
.logo,
.footer-brand-logo,
.auth-logo,
.sidebar-logo,
.modal-title-block,
.modal-header {
  min-width: 0;
}

.logo img,
.footer-brand-logo img,
.auth-logo img,
.sidebar-logo img,
.modal-title-block img,
.modal-header img,
.brand-logo-img,
.modal-brand-mark,
.mf-mobile-business-brand img,
footer .logo,
.footer .logo,
.site-footer .logo {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: left center !important;
}

.logo .brand-logo-img,
.footer-brand-logo .brand-logo-img,
.auth-logo .brand-logo-img {
  width: auto !important;
  height: 42px !important;
  max-width: 190px !important;
  min-width: 140px !important;
}

.sidebar-logo .brand-logo-img {
  width: 168px !important;
  max-width: 168px !important;
  height: auto !important;
  max-height: 44px !important;
}

.modal-brand-mark,
.modal-title-block .modal-brand-mark,
.modal-header .modal-brand-mark {
  content: url("/assets/brand/myfoods-logo-tricolor.svg") !important;
  width: 158px !important;
  max-width: min(158px, 42vw) !important;
  height: auto !important;
  max-height: 42px !important;
}

.logo-icon,
.cart-btn,
.theme-toggle,
.topbar-actions .btn,
.topbar-actions button {
  box-shadow: none !important;
}

.cart-btn,
.theme-toggle {
  border-color: transparent !important;
  background: rgba(255, 255, 255, .72) !important;
}

/* Header and hero search: one border, clean focus ring. */
.topbar-search,
.hero-search,
.search-bar,
.admin-filter-row .search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--mf-ui-surface) !important;
  border: 1px solid var(--mf-ui-border-strong) !important;
  box-shadow: 0 8px 22px rgba(31, 35, 40, .05) !important;
  outline: 0 !important;
  overflow: hidden;
}

.topbar-search:focus-within,
.hero-search:focus-within,
.search-bar:focus-within,
.admin-filter-row .search-bar:focus-within {
  border-color: var(--mf-ui-green) !important;
  box-shadow: 0 0 0 4px var(--mf-ui-ring), 0 8px 22px rgba(31, 35, 40, .05) !important;
}

.topbar-search input,
.hero-search input,
.search-bar input {
  color: var(--mf-ui-text) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  min-height: 48px !important;
  padding: 0 4px !important;
}

.hero-search input {
  padding-left: 18px !important;
}

.topbar-search svg,
.search-bar svg {
  color: var(--mf-ui-muted) !important;
  flex: 0 0 auto;
  margin-left: 2px;
}

.topbar-search input::placeholder,
.hero-search input::placeholder,
.search-bar input::placeholder,
.form-input::placeholder,
input::placeholder,
textarea::placeholder {
  color: #69736F !important;
  opacity: 1 !important;
}

.hero-search .btn,
.topbar-search .btn,
.btn.btn-primary,
button.btn-primary {
  background: var(--mf-ui-deep) !important;
  border-color: var(--mf-ui-deep) !important;
  color: #FFFFFF !important;
}

.btn.btn-primary:hover,
button.btn-primary:hover {
  background: var(--mf-ui-green) !important;
  border-color: var(--mf-ui-green) !important;
  color: #FFFFFF !important;
}

.btn.btn-outline,
button.btn-outline {
  color: var(--mf-ui-deep) !important;
  border-color: var(--mf-ui-border-strong) !important;
  background: var(--mf-ui-surface) !important;
}

.btn.btn-ghost,
button.btn-ghost {
  color: var(--mf-ui-deep) !important;
  background: transparent !important;
}

.btn,
button,
.map-link {
  min-height: 42px;
}

/* Footer: light, readable, compact and consistent. */
footer,
.site-footer {
  background: var(--mf-ui-surface-soft) !important;
  color: var(--mf-ui-text) !important;
  border-top: 1px solid var(--mf-ui-border) !important;
  box-shadow: none !important;
}

.site-footer {
  padding: clamp(34px, 5vw, 54px) clamp(18px, 4vw, 56px) 22px !important;
}

.site-footer-inner {
  gap: clamp(22px, 4vw, 44px) !important;
}

footer h1,
footer h2,
footer h3,
footer h4,
footer .footer-title,
footer .footer-col-title,
footer .footer-brand-title,
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer .footer-title,
.site-footer .footer-col-title,
.site-footer .footer-brand-title {
  color: var(--mf-ui-slate) !important;
  opacity: 1 !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
}

.footer-copy,
.footer-links,
.footer-links a,
footer p,
footer small,
.site-footer p,
.site-footer small {
  color: var(--mf-ui-text) !important;
  opacity: 1 !important;
}

.footer-links a,
footer a,
.site-footer a {
  color: var(--mf-ui-deep) !important;
  text-decoration: none !important;
}

.footer-links a:hover,
footer a:hover,
.site-footer a:hover {
  color: var(--mf-ui-green) !important;
}

.footer-note,
.footer-bottom,
.site-footer-bottom {
  color: var(--mf-ui-muted) !important;
  border-top: 1px solid var(--mf-ui-border) !important;
  font-size: 0 !important;
}

.footer-note::before,
.footer-bottom::before,
.site-footer-bottom::before {
  content: "\00A9 MyFoods.ch" !important;
  color: var(--mf-ui-muted) !important;
  font-size: 14px !important;
}

/* Forms, labels and alerts. */
.form-label,
label,
.admin-mobile-section-label,
.kpi-label,
.card-title,
.modal-title,
.topbar-title,
.restaurant-name {
  color: var(--mf-ui-text) !important;
}

.form-hint,
.modal-subtitle,
.kpi-trend,
.admin-layout-note,
.admin-mobile-meta,
.admin-table-meta,
.muted,
.text-muted {
  color: var(--mf-ui-muted) !important;
  opacity: 1 !important;
}

.form-input,
input,
select,
textarea {
  color: var(--mf-ui-text) !important;
  background: var(--mf-ui-surface) !important;
  border: 1px solid var(--mf-ui-border-strong) !important;
  box-shadow: none !important;
}

.form-input:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--mf-ui-green) !important;
  box-shadow: 0 0 0 4px var(--mf-ui-ring) !important;
  outline: 0 !important;
}

input:invalid:not(.mf-touched),
textarea:invalid:not(.mf-touched),
select:invalid:not(.mf-touched) {
  border-color: var(--mf-ui-border-strong) !important;
  box-shadow: none !important;
}

.security-alert,
.notice,
.email-status,
.mf-status-alert {
  background: #F4FAF6 !important;
  border: 1px solid #CDE7D7 !important;
  border-left: 4px solid var(--mf-ui-green) !important;
  color: var(--mf-ui-text) !important;
  border-radius: 16px !important;
}

/* Cards and surfaces. */
.card,
.admin-card,
.business-card,
.dashboard-card,
.panel,
.section-card,
.kpi-card,
.stat-card,
.empty-state,
.admin-mobile-card,
.menu-mobile-card,
.restaurant-card {
  background: var(--mf-ui-surface) !important;
  color: var(--mf-ui-text) !important;
  border: 1px solid var(--mf-ui-border) !important;
  box-shadow: 0 12px 32px rgba(31, 35, 40, .06) !important;
}

.card::before,
.admin-card::before,
.business-card::before,
.dashboard-card::before,
.restaurant-card::before {
  opacity: .32;
}

/* Modals and drawers. */
.modal-overlay,
.auth-overlay,
#authOverlay,
#addressOverlay,
.cart-overlay.open {
  background: rgba(15, 23, 42, .44) !important;
  backdrop-filter: blur(5px) !important;
}

.modal,
.auth-modal,
.address-modal,
.customer-panel {
  color: var(--mf-ui-text) !important;
  background: var(--mf-ui-surface) !important;
  border: 1px solid var(--mf-ui-border) !important;
  box-shadow: 0 24px 72px rgba(31, 35, 40, .24) !important;
  max-height: min(92vh, 860px) !important;
  overflow-y: auto !important;
}

.modal * {
  color: inherit;
}

.modal .form-label,
.modal label,
.modal .modal-title,
.modal .btn-primary {
  color: var(--mf-ui-text) !important;
}

.modal .btn-primary {
  color: #FFFFFF !important;
}

.cart-overlay:not(.open) {
  visibility: hidden !important;
  pointer-events: none !important;
}

.cart-overlay:not(.open) .cart-panel {
  visibility: hidden !important;
  pointer-events: none !important;
}

.cart-overlay.open .cart-panel {
  width: min(420px, 100vw) !important;
  max-width: 100vw !important;
}

.cart-backdrop {
  background: rgba(15, 23, 42, .38) !important;
}

.cart-empty {
  min-height: 180px !important;
}

/* Portal shells: guest pages must not expose internal work areas. */
body.mf-business-guest,
body.mf-admin-guest {
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 8%, rgba(127, 166, 145, .22), transparent 34%),
    linear-gradient(135deg, #FBF8F2 0%, #F7F2EA 100%) !important;
}

body.mf-business-guest > .sidebar,
body.mf-business-guest > .main-content,
body.mf-business-guest > .mobile-nav,
body.mf-admin-guest > .sidebar,
body.mf-admin-guest > .main-content {
  display: none !important;
}

body.mf-business-guest #authModal,
body.mf-admin-guest #adminLoginModal {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

body.mf-business-guest #authModal .modal,
body.mf-admin-guest #adminLoginModal .modal {
  margin: auto !important;
}

.sidebar,
.admin-sidebar,
.business-sidebar,
.portal-sidebar {
  background-color: var(--mf-ui-deep) !important;
  background-image: linear-gradient(180deg, var(--mf-ui-deep) 0%, var(--mf-ui-deep-2) 100%) !important;
  color: rgba(255, 255, 255, .88) !important;
}

.sidebar-logo {
  background: var(--mf-ui-surface-soft) !important;
  border-bottom: 1px solid rgba(231, 221, 210, .88) !important;
}

.sidebar-logo small,
.sidebar-logo .brand-subtitle,
.sidebar-logo .logo-sub {
  color: var(--mf-ui-slate) !important;
  opacity: 1 !important;
}

.sidebar a,
.sidebar button,
.sidebar .nav-item,
.sidebar .nav-label,
.sidebar small,
.sidebar .betrieb-name,
.sidebar .betrieb-status,
.sidebar .logo-sub,
.sidebar .admin-pill {
  color: rgba(255, 255, 255, .88) !important;
}

.sidebar .nav-label {
  color: rgba(255, 255, 255, .62) !important;
}

.sidebar .sidebar-logo small,
.sidebar .sidebar-logo .brand-subtitle,
.sidebar .sidebar-logo .logo-sub {
  color: var(--mf-ui-slate) !important;
}

.sidebar .nav-item.active,
.sidebar .nav-item:hover {
  background: rgba(255, 255, 255, .14) !important;
  color: #FFFFFF !important;
}

#adminPillLabel,
.admin-pill {
  background: #F4FAF6 !important;
  color: var(--mf-ui-deep) !important;
  border: 1px solid #CDE7D7 !important;
}

#adminAvatar,
.user-avatar,
.account-avatar {
  background-color: var(--mf-ui-deep) !important;
  background-image: none !important;
  color: #FFFFFF !important;
}

.main-content,
.admin-main,
.business-main,
.portal-main,
.page-body {
  background: var(--mf-ui-bg) !important;
  color: var(--mf-ui-text) !important;
}

.topbar {
  background: rgba(255, 255, 255, .9) !important;
  border-bottom: 1px solid var(--mf-ui-border) !important;
  color: var(--mf-ui-text) !important;
}

/* Admin header: no duplicate content logo, title left, identity right. */
.mf-admin-portal .topbar > div:first-child > img.brand-logo-img,
.mf-admin-portal .topbar > div:first-child > .brand-logo-fallback {
  display: none !important;
}

.mf-admin-portal .topbar {
  display: grid !important;
  grid-template-columns: minmax(220px, 1fr) auto !important;
  gap: 16px !important;
}

.mf-admin-portal .topbar-title {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Tables and mobile action groups. */
.table-wrap,
.admin-business-table-wrap {
  overflow-x: auto !important;
  overflow-y: visible !important;
}

table th {
  color: var(--mf-ui-slate) !important;
  background: rgba(247, 242, 234, .86) !important;
}

table td,
table th {
  color: var(--mf-ui-text) !important;
}

.admin-business-actions,
.admin-actions,
.row-actions,
.table-actions,
.actions-cell {
  max-width: 100%;
  overflow: visible !important;
}

/* Mobile navigation: reachable without clipping labels. */
@media (max-width: 768px) {
  body {
    overflow-x: hidden;
  }

  .logo .brand-logo-img,
  .footer-brand-logo .brand-logo-img,
  .auth-logo .brand-logo-img {
    height: 34px !important;
    min-width: 132px !important;
    max-width: 160px !important;
  }

  .site-footer {
    padding: 30px 18px 18px !important;
  }

  .topbar {
    min-height: 62px !important;
  }

  .hero-search,
  .topbar-search {
    border-radius: 18px !important;
  }

  .hero-search .btn {
    min-height: 46px !important;
  }

  .modal-overlay,
  .auth-overlay,
  #authOverlay,
  #addressOverlay {
    align-items: flex-start !important;
    padding: max(14px, env(safe-area-inset-top)) 12px max(22px, env(safe-area-inset-bottom)) !important;
  }

  .modal,
  .auth-modal,
  .address-modal,
  .customer-panel {
    width: min(100%, 520px) !important;
    max-height: calc(100dvh - 28px) !important;
    margin: 0 auto !important;
    padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
  }

  .mobile-nav {
    display: flex !important;
    align-items: stretch !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
    background: rgba(255, 255, 255, .96) !important;
    border-top: 1px solid var(--mf-ui-border) !important;
    scrollbar-width: thin;
  }

  .mobile-nav-item {
    flex: 0 0 auto !important;
    min-width: 88px !important;
    max-width: none !important;
    min-height: 46px !important;
    padding: 6px 10px !important;
    color: var(--mf-ui-slate) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 14px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .mobile-nav-item span {
    color: inherit !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
  }

  .mobile-nav-item.active {
    color: var(--mf-ui-deep) !important;
    background: #FFFFFF !important;
    border-color: var(--mf-ui-deep) !important;
  }

  .mobile-nav-item.active span,
  .mobile-nav-item.active svg {
    color: var(--mf-ui-deep) !important;
  }

  .admin-business-actions,
  .admin-actions,
  .row-actions,
  .table-actions,
  .actions-cell {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    justify-items: stretch !important;
  }

  .kpi-grid {
    grid-template-columns: 1fr !important;
  }

  .admin-business-actions .btn,
  .admin-actions .btn,
  .row-actions .btn,
  .table-actions .btn,
  .actions-cell .btn,
  .admin-mobile-card button {
    width: 100% !important;
    min-height: 44px !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  .toast,
  #toast,
  .toast.show,
  .notification,
  .portal-toast,
  .business-toast,
  .admin-toast {
    left: 16px !important;
    right: 16px !important;
    bottom: calc(86px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
  }
}

@media (min-width: 769px) {
  .mobile-nav {
    display: none !important;
  }
}

/* Round 2: production visual acceptance gates */
.hero-search,
.topbar-search,
.search-bar,
.contact-search {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #FFFFFF !important;
  border: 1px solid #D6C8BA !important;
  box-shadow: 0 14px 34px rgba(31, 35, 40, .055) !important;
  outline: 0 !important;
  overflow: hidden !important;
}

.hero-search {
  width: min(620px, 100%) !important;
  min-height: 68px !important;
  padding: 7px !important;
  border-radius: 999px !important;
}

.topbar-search {
  min-height: 48px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
}

.hero-search::before,
.topbar-search::before,
.search-bar::before {
  content: none !important;
}

.hero-search:focus-within,
.topbar-search:focus-within,
.search-bar:focus-within,
.contact-search:focus-within {
  border-color: #7FA691 !important;
  box-shadow:
    0 0 0 3px rgba(127, 166, 145, .18),
    0 16px 38px rgba(31, 35, 40, .065) !important;
}

.hero-search input,
.hero-search input:focus,
.hero-search input:focus-visible,
.topbar-search input,
.topbar-search input:focus,
.topbar-search input:focus-visible,
.search-bar input,
.search-bar input:focus,
.search-bar input:focus-visible,
.contact-search input,
.contact-search input:focus,
.contact-search input:focus-visible {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 48px !important;
  height: auto !important;
  color: #1F2328 !important;
  -webkit-text-fill-color: #1F2328 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  border-radius: 0 !important;
  padding: 0 14px 0 18px !important;
}

.topbar-search input,
.topbar-search input:focus,
.topbar-search input:focus-visible {
  padding-left: 8px !important;
}

.hero-search .btn,
.hero-search button,
.topbar-search .btn,
.topbar-search button {
  flex: 0 0 auto !important;
  min-height: 52px !important;
  padding: 0 26px !important;
  border-radius: 999px !important;
  background: #123D34 !important;
  border: 1px solid #123D34 !important;
  color: #FFFFFF !important;
  box-shadow: 0 10px 22px rgba(18, 61, 52, .16) !important;
}

footer,
.footer,
.site-footer {
  position: relative !important;
  background:
    linear-gradient(180deg, #FCFAF6 0%, #F1E9DE 100%) !important;
  color: #1F2328 !important;
  border-top: 1px solid #D8CCBF !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72) !important;
}

footer::before,
.footer::before,
.site-footer::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, #123D34, #2F7D46, #7FA691) !important;
}

.site-footer {
  padding: 44px clamp(18px, 5vw, 72px) 22px !important;
}

.footer-inner,
.site-footer-inner {
  width: min(1120px, 100%) !important;
  max-width: 1120px !important;
  margin-inline: auto !important;
  display: grid !important;
  grid-template-columns: minmax(270px, 1.15fr) minmax(140px, .65fr) minmax(150px, .7fr) minmax(260px, 1fr) !important;
  gap: clamp(22px, 4vw, 46px) !important;
  align-items: start !important;
}

.site-footer-inner + .site-footer-inner,
.footer-bottom,
.footer-note,
.site-footer-bottom {
  width: min(1120px, 100%) !important;
  max-width: 1120px !important;
  margin: 26px auto 0 !important;
  padding: 18px 0 0 !important;
  border-top: 1px solid rgba(39, 65, 90, .16) !important;
}

footer h1,
footer h2,
footer h3,
footer h4,
footer .footer-title,
footer .footer-col-title,
footer .footer-brand-title,
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer .footer-title,
.site-footer .footer-col-title,
.site-footer .footer-brand-title {
  color: #123D34 !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  letter-spacing: .105em !important;
  text-transform: uppercase !important;
  margin: 0 0 14px !important;
}

.footer-copy,
.footer-copy *,
footer p,
footer small,
.site-footer p,
.site-footer small {
  color: #33413C !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
}

.footer-links {
  display: grid !important;
  gap: 10px !important;
}

.footer-links a,
footer a,
.site-footer a {
  color: #123D34 !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  font-weight: 650 !important;
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
}

.footer-links a:hover,
footer a:hover,
.site-footer a:hover {
  color: #2F7D46 !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
}

.footer-brand,
.site-footer .footer-brand {
  display: grid !important;
  gap: 14px !important;
}

.footer-brand-logo,
.footer-brand-logo img,
.site-footer .footer-brand-logo,
.site-footer .footer-brand-logo img,
footer .logo,
footer .logo img,
.footer .logo,
.footer .logo img,
.site-footer .logo,
.site-footer .logo img,
.auth-logo,
.auth-logo img,
.modal-brand-mark,
.modal-title-block img,
.sidebar-logo img,
.mf-mobile-business-brand img,
.mf-portal-mobile-brand img {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  outline: 0 !important;
  padding: 0 !important;
}

img.brand-logo-img,
.footer-brand-logo img.brand-logo-img,
.auth-logo img.brand-logo-img {
  object-fit: contain !important;
  object-position: left center !important;
}

.modal-overlay,
.auth-overlay,
#authOverlay,
#addressOverlay {
  background: rgba(15, 23, 42, .42) !important;
  backdrop-filter: blur(4px) !important;
}

.auth-card,
.modal {
  border-radius: 28px !important;
}

.auth-card {
  padding: clamp(24px, 4vw, 34px) !important;
}

.auth-logo {
  margin-bottom: 14px !important;
}

.auth-title {
  color: #1F2328 !important;
  font-size: clamp(24px, 4.8vw, 32px) !important;
  line-height: 1.1 !important;
  letter-spacing: -.025em !important;
}

.auth-sub,
.auth-switch,
.auth-switch button {
  color: #33413C !important;
}

.auth-switch button,
.modal .btn-ghost {
  min-height: 44px !important;
}

body.mf-business-guest,
body.mf-admin-guest {
  background:
    radial-gradient(circle at 10% 0%, rgba(127, 166, 145, .28), transparent 30%),
    radial-gradient(circle at 90% 18%, rgba(47, 125, 70, .14), transparent 28%),
    linear-gradient(135deg, #FBF8F2 0%, #F5EEE3 100%) !important;
}

body.mf-business-guest #authModal,
body.mf-admin-guest #adminLoginModal {
  display: grid !important;
  grid-template-columns: minmax(280px, 1fr) minmax(360px, 480px) !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(28px, 6vw, 76px) !important;
  min-height: 100dvh !important;
  padding: clamp(24px, 5vw, 72px) !important;
  background: transparent !important;
  backdrop-filter: none !important;
}

body.mf-business-guest #authModal .modal,
body.mf-admin-guest #adminLoginModal .modal {
  width: 100% !important;
  max-width: 480px !important;
  margin: 0 !important;
  border-radius: 30px !important;
  border: 1px solid #D8CCBF !important;
  box-shadow: 0 28px 80px rgba(31, 35, 40, .16) !important;
}

.mf-guest-intro {
  max-width: 580px !important;
  color: #1F2328 !important;
}

.mf-guest-intro img {
  display: block !important;
  width: min(212px, 58vw) !important;
  height: auto !important;
  margin-bottom: 28px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.mf-guest-kicker {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 34px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  background: #EAF4EE !important;
  border: 1px solid #CDE7D7 !important;
  color: #123D34 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.mf-guest-intro h1 {
  margin: 16px 0 12px !important;
  color: #1F2328 !important;
  font-size: clamp(30px, 3.1vw, 38px) !important;
  line-height: 1.15 !important;
  letter-spacing: -.03em !important;
  font-weight: 680 !important;
}

.mf-guest-intro p {
  margin: 0 !important;
  max-width: 50ch !important;
  color: #33413C !important;
  font-size: clamp(16px, 1.6vw, 19px) !important;
  line-height: 1.65 !important;
}

.mf-guest-points {
  display: grid !important;
  gap: 10px !important;
  margin-top: 24px !important;
  padding: 0 !important;
  list-style: none !important;
}

.mf-guest-points li {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  color: #27415A !important;
  font-weight: 700 !important;
}

.mf-guest-points li::before {
  content: "" !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 999px !important;
  background: #2F7D46 !important;
  box-shadow: 0 0 0 4px rgba(47, 125, 70, .12) !important;
}

body.mf-business-guest #authModal .modal-close,
body.mf-business-guest #authModal .form-actions .btn-ghost,
body.mf-business-guest #authModal .form-actions button:first-child,
body.mf-admin-guest #toast.show,
body.mf-admin-guest .toast.show {
  display: none !important;
}

body.mf-business-guest #authModal .modal-header,
body.mf-admin-guest #adminLoginModal .modal-header {
  border-bottom-color: #E7DDD2 !important;
}

body.mf-admin-guest #adminLoginEmail:not(:focus-visible) {
  border-color: #D8CCBF !important;
  box-shadow: none !important;
}

.eyebrow,
.hero-card .eyebrow,
.contact-grid .eyebrow {
  color: #123D34 !important;
}

.button,
button.button,
.contact-grid button.button,
.contact-grid .button {
  background: #123D34 !important;
  border-color: #123D34 !important;
  color: #FFFFFF !important;
  font-weight: 650 !important;
}

.button:hover,
button.button:hover,
.contact-grid button.button:hover {
  background: #2F7D46 !important;
  border-color: #2F7D46 !important;
  color: #FFFFFF !important;
}

#customerAreaNav .customer-area-tab,
#customerAreaNav .customer-area-tab span,
.customer-area-tab,
.customer-area-tab span {
  color: #123D34 !important;
  opacity: 1 !important;
}

#customerAreaNav .customer-area-tab.active,
.customer-area-tab.active {
  background: #FFFFFF !important;
  color: #123D34 !important;
  border-color: #123D34 !important;
}

.status-pill.status-pill-pending,
.order-status.pending,
.badge.pending {
  color: #563100 !important;
  background: #FFF1CF !important;
  border-color: #D7A44C !important;
}

#menuSectionList .mf-menu-section-card,
#menuSectionList .mf-menu-section-card *,
.business-card .muted,
.menu-card .muted,
.menu-mobile-card .muted {
  color: #33413C !important;
}

@media (max-width: 768px) {
  .hero-search {
    min-height: auto !important;
    padding: 6px !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    border-radius: 24px !important;
  }

  .hero-search input,
  .hero-search input:focus,
  .hero-search input:focus-visible {
    min-height: 46px !important;
    padding: 0 12px !important;
  }

  .hero-search .btn,
  .hero-search button {
    width: auto !important;
    min-width: 108px !important;
    max-width: 132px !important;
    min-height: 46px !important;
    padding: 0 14px !important;
  }

  .footer-inner,
  .site-footer-inner {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .site-footer {
    padding: 34px 18px 18px !important;
  }

  .footer-links {
    gap: 6px !important;
  }

  .footer-links a,
  footer a,
  .site-footer a {
    min-height: 40px !important;
  }

  .site-footer-inner + .site-footer-inner,
  .footer-bottom,
  .footer-note,
  .site-footer-bottom {
    margin-top: 18px !important;
  }

  body.mf-business-guest #authModal,
  body.mf-admin-guest #adminLoginModal {
    grid-template-columns: 1fr !important;
    align-items: start !important;
    min-height: 100dvh !important;
    padding: 18px 14px max(24px, env(safe-area-inset-bottom)) !important;
    gap: 18px !important;
    overflow-y: auto !important;
  }

  .mf-guest-intro {
    max-width: none !important;
  }

  .mf-guest-intro img {
    width: 158px !important;
    margin-bottom: 16px !important;
  }

  .mf-guest-intro h1 {
    font-size: clamp(30px, 10vw, 42px) !important;
    margin: 14px 0 10px !important;
  }

  .mf-guest-intro p {
    font-size: 15px !important;
    line-height: 1.52 !important;
  }

  .mf-guest-points {
    margin-top: 16px !important;
  }

  body.mf-business-guest #authModal .modal,
  body.mf-admin-guest #adminLoginModal .modal {
    max-width: none !important;
    border-radius: 24px !important;
  }

  .auth-card {
    width: min(100%, 520px) !important;
    border-radius: 24px !important;
    padding: 24px 20px !important;
  }

  .auth-switch {
    display: grid !important;
    gap: 8px !important;
  }

  .auth-switch button {
    width: 100% !important;
    justify-content: center !important;
  }

  .mf-mobile-business-brand img,
  .mf-portal-mobile-brand img {
    width: 156px !important;
    min-width: 0 !important;
    max-width: 52vw !important;
    height: auto !important;
    max-height: 38px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }
}

@media (max-width: 1100px) and (min-width: 769px) {
  .footer-inner,
  .site-footer-inner {
    grid-template-columns: minmax(260px, 1.25fr) minmax(220px, 1fr) !important;
    gap: 26px 34px !important;
  }
}

@media (max-width: 640px) {
  .topbar-search {
    display: none !important;
  }

  .topbar-inner {
    grid-template-columns: auto 1fr !important;
  }

  .topbar-actions {
    justify-self: end !important;
    min-width: 0 !important;
  }
}