/* Copyright (c) 2026 Link Mahal. All rights reserved. */
/**
 * Food-menu storefront mocks — frame containment + scale inside phone / Safari shells.
 * Production UI from storefront.css + sf-food-menu.css; sizing here is mock-only.
 */

.lm-mock-fidelity--food-menu.storefront-body {
  min-height: 0 !important;
  height: 100%;
  padding: 0 !important;
  overflow: hidden;
  background: var(--store-card, #fff);
}

.lm-mock-fidelity--food-menu.sf-menu-shell {
  width: 100%;
  max-width: 100%;
  min-height: 0 !important;
  height: 100%;
  margin: 0 !important;
  box-shadow: none;
  border-radius: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

.lm-mock-fidelity--food-menu .sf-main {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

.lm-mock-fidelity--food-menu .sf-menu {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0 !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.lm-mock-fidelity--food-menu .sf-menu__scroll,
.lm-mock-fidelity--food-menu .sf-menu__content {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.lm-mock-fidelity--food-menu .sf-menu__scroll::-webkit-scrollbar,
.lm-mock-fidelity--food-menu .sf-menu__content::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Production food-menu uses vw tokens — override inside miniature frames */
.lm-mock-fidelity--food-menu.sf-template--food-menu {
  --sf-menu-shell-w: 100%;
  --sf-menu-header-h: 9.5rem;
  --sf-menu-radius: 0.85rem;
}

.lm-phone__screen .lm-mock-fidelity--food-menu,
.landing-flow-screens .lm-mock-fidelity--food-menu,
.lm-safari__content .lm-mock-fidelity--food-menu {
  overflow: hidden;
}

/*
 * Slightly smaller UI inside the phone so chips/titles stay readable.
 * Hero uses a larger shell + a tad more scale for clarity.
 */
.lm-phone__screen .lm-mock-fidelity--food-menu > .sf-main,
.landing-flow-screens .lm-mock-fidelity--food-menu > .sf-main,
.lm-safari__content .lm-mock-fidelity--food-menu > .sf-main {
  --lm-fm-ui-scale: 0.8;
  transform-origin: top left;
  zoom: var(--lm-fm-ui-scale);
}

@supports not (zoom: 1) {
  .lm-phone__screen .lm-mock-fidelity--food-menu > .sf-main,
  .landing-flow-screens .lm-mock-fidelity--food-menu > .sf-main,
  .lm-safari__content .lm-mock-fidelity--food-menu > .sf-main {
    transform: scale(var(--lm-fm-ui-scale));
    width: calc(100% / var(--lm-fm-ui-scale));
    height: calc(100% / var(--lm-fm-ui-scale));
  }
}

/* Hero + flow share compact framing */
.lm-mock-fidelity--food-menu.sf-template--food-menu {
  --sf-menu-header-h: 9.5rem;
}

/* Dedicated mock info strip — isolated from production chip layout */
.lm-mock-info {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.5rem 0.6rem 0.55rem;
  background: var(--store-card, #fff);
  border-bottom: 1px solid color-mix(in srgb, var(--store-border, #d6d6d6) 55%, transparent);
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.lm-mock-info__row {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  gap: 0.35rem;
}

.lm-mock-info__row--actions {
  justify-content: stretch;
}

.lm-mock-info__row--meta {
  justify-content: space-between;
}

.lm-mock-info__pill {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  padding: 0.38rem 0.4rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--store-border, #d6d6d6) 75%, transparent);
  background: var(--store-card, #fff);
  color: var(--store-text, #1a1a1a);
  font-size: 0.62rem;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
}

.lm-mock-info__pill > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.lm-mock-info__pill .lm-icon {
  flex-shrink: 0;
  width: 0.75rem;
  height: 0.75rem;
}

.lm-mock-info__pill--hours {
  color: #15803d;
  border-color: color-mix(in srgb, #22c55e 35%, transparent);
}

.lm-mock-info__dot {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.lm-mock-info__pill--wa {
  color: var(--store-accent, #b26205);
}

.lm-mock-info__loc {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  min-width: 0;
  flex: 1 1 auto;
  color: var(--store-primary, #d97706);
  font-size: 0.65rem;
  font-weight: 650;
  line-height: 1.25;
}

.lm-mock-info__loc .lm-icon {
  flex-shrink: 0;
  width: 0.75rem;
  height: 0.75rem;
}

.lm-mock-info__loc > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.lm-mock-info__ig {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--store-primary, #d97706) 12%, #fff);
  color: var(--store-primary, #d97706);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.lm-mock-fidelity--food-menu .sf-menu__logo,
.lm-mock-fidelity--food-menu .sf-menu__logo-fallback {
  width: 3.35rem;
  height: 3.35rem;
  border-width: 2px;
  font-size: 1rem;
}

.lm-mock-fidelity--food-menu .sf-menu__cover-brand {
  bottom: 0.75rem;
  gap: 0.35rem;
}

.lm-mock-fidelity--food-menu .sf-menu__title {
  font-size: 1.15rem;
}

.lm-mock-fidelity--food-menu .sf-menu__tagline {
  margin-top: 0.2rem;
  font-size: 0.62rem;
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

.lm-mock-fidelity--food-menu .sf-menu__header,
.lm-mock-fidelity--food-menu .sf-menu__cover,
.lm-mock-fidelity--food-menu .sf-menu__scroll {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Cover text — beat .landing-page h1 color bleed */
.lm-mock-fidelity--food-menu .sf-menu__cover-text,
.lm-mock-fidelity--food-menu .sf-menu__cover-text .sf-menu__title,
.lm-mock-fidelity--food-menu .sf-menu__cover-text .sf-menu__tagline {
  color: #fff;
}

.lm-mock-fidelity--food-menu .sf-menu__title {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.55),
    0 2px 14px rgba(0, 0, 0, 0.42);
}

.lm-mock-fidelity--food-menu .sf-menu__tagline {
  opacity: 1;
  color: rgba(255, 255, 255, 0.94);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 1px 10px rgba(0, 0, 0, 0.38);
}

.lm-mock-fidelity--food-menu .sf-menu__cover-scrim {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.28) 0%,
    rgba(0, 0, 0, 0.55) 52%,
    rgba(0, 0, 0, 0.78) 100%
  );
}

.lm-mock-fidelity--food-menu .sf-menu__item-name {
  color: var(--store-text, #1a1a1a) !important;
}

.lm-mock-fidelity--food-menu .sf-menu__item-desc {
  color: var(--store-muted, #64748b);
}

.lm-mock-fidelity--food-menu .sf-menu__item-price,
.lm-mock-fidelity--food-menu .sf-menu__item-price .sf-price-primary {
  color: var(--store-primary, #d97706);
}

.lm-mock-fidelity--food-menu .sf-menu__cat.is-active {
  color: #fff;
}

.lm-mock-fidelity--food-menu .sf-menu__cat-divider-title {
  color: #fff !important;
  text-align: center;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.72),
    0 2px 18px rgba(0, 0, 0, 0.55);
}

.lm-mock-fidelity--food-menu .sf-menu__cat-divider-scrim {
  background: rgba(0, 0, 0, 0.46);
}

.lm-mock-fidelity--food-menu .sf-menu__cats-wrap {
  flex-shrink: 0;
}

.lm-mock-fidelity--food-menu .sf-menu__cats {
  justify-content: flex-start;
}

.lm-mock-fidelity--food-menu .sf-menu__cat {
  color: #fff;
  background: color-mix(in srgb, var(--store-primary, #d97706) 82%, #1a1208);
}

.lm-mock-fidelity--food-menu .sf-menu__cat.is-active {
  background: var(--store-primary, #d97706);
  color: #fff;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--store-primary, #d97706) 40%, transparent);
}

/* Product rows — compact in mocks so titles/prices stay readable in the phone */
.lm-mock-fidelity--food-menu .sf-menu__items {
  gap: 0.55rem;
}

.lm-mock-fidelity--food-menu .sf-menu__item {
  min-height: 5.85rem;
  border-radius: var(--sf-menu-radius);
  border: 1px solid color-mix(in srgb, var(--store-text) 12%, transparent);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.07);
  overflow: hidden;
}

.lm-mock-fidelity--food-menu .sf-menu__item-inner {
  min-height: 5.85rem;
  align-items: stretch;
}

.lm-mock-fidelity--food-menu .sf-menu__item-media {
  flex: 0 0 5.85rem;
  width: 5.85rem;
  height: 5.85rem;
  min-width: 5.85rem;
  min-height: 5.85rem;
  max-width: 5.85rem;
  max-height: 5.85rem;
  aspect-ratio: 1 / 1;
  align-self: flex-start;
}

.lm-mock-fidelity--food-menu .sf-menu__item-body {
  min-width: 0;
  padding-inline-end: 0.15rem;
}

.lm-mock-fidelity--food-menu .sf-menu__item-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.25;
}

.lm-mock-fidelity--food-menu .sf-menu__item-desc {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1 !important;
  line-clamp: 1 !important;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 1.35em;
  margin-top: 0.2rem;
  font-size: 0.68rem;
  line-height: 1.35;
}

.lm-mock-fidelity--food-menu .sf-menu__item-price,
.lm-mock-fidelity--food-menu .sf-menu__item-price .sf-price-primary {
  font-size: 0.8rem;
  font-weight: 750;
}

.lm-mock-fidelity--food-menu .sf-menu__item-badge {
  font-size: 0.58rem;
  z-index: 2;
}

.lm-mock-fidelity--food-menu .sf-menu__item-plus {
  z-index: 2;
}

.lm-mock-fidelity--food-menu.lm-mock-fidelity--hero .sf-menu__content {
  mask-image: none;
}

.lm-phone__screen > .lm-mock-fidelity--food-menu,
.landing-flow-screen > .lm-mock-fidelity--food-menu {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  align-self: stretch;
}

.lm-phone__screen,
.lm-phone__shell,
.landing-flow-screens,
.landing-flow-screen {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.lm-phone__screen::-webkit-scrollbar,
.lm-phone__shell::-webkit-scrollbar,
.landing-flow-screens::-webkit-scrollbar,
.landing-flow-screen::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

@media (max-width: 480px) {
  .lm-phone__screen .lm-mock-fidelity--food-menu > .sf-main,
  .landing-flow-screens .lm-mock-fidelity--food-menu > .sf-main {
    --lm-fm-ui-scale: 0.8;
  }
}

@media (min-width: 1024px) {
  .hero-mock .lm-phone__screen .lm-mock-fidelity--food-menu > .sf-main,
  .landing-flow-screens .lm-mock-fidelity--food-menu > .sf-main {
    --lm-fm-ui-scale: 0.8;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lm-phone__screen .lm-mock-fidelity--food-menu > .sf-main,
  .landing-flow-screens .lm-mock-fidelity--food-menu > .sf-main,
  .lm-safari__content .lm-mock-fidelity--food-menu > .sf-main {
    zoom: var(--lm-fm-ui-scale);
    transform: none !important;
    width: auto !important;
    height: auto !important;
  }
}