:root {
  color-scheme: light;

  --sf-bg: #fbf6ef;
  --sf-surface: #ffffff;
  --sf-surface-soft: #fcf6ee;
  --sf-surface-rgb: 255, 255, 255;
  --sf-surface-soft-rgb: 252, 246, 238;
  --sf-white: var(--sf-surface);

  --sf-ink: #1e1915;
  --sf-ink-rgb: 30, 25, 21;
  --sf-muted: #665b51;
  --sf-muted-rgb: 102, 91, 81;

  --sf-accent: #c6604b;
  --sf-accent-strong: #af4f3b;
  --sf-accent-soft: #f4dfd8;
  --sf-accent-rgb: 198, 96, 75;
  --sf-accent-strong-rgb: 175, 79, 59;

  --sf-highlight: #b6c849;
  --sf-highlight-strong: #a4b63d;
  --sf-highlight-rgb: 182, 200, 73;
  --sf-highlight-strong-rgb: 164, 182, 61;

  --sf-primary: var(--sf-accent);
  --sf-primary-hover: var(--sf-accent-strong);
  --sf-primary-ink: var(--sf-accent-strong);
  --sf-primary-soft: var(--sf-accent-soft);

  --sf-secondary: var(--sf-highlight);
  --sf-secondary-hover: var(--sf-highlight-strong);

  --sf-text: var(--sf-ink);
  --sf-text-soft: var(--sf-muted);
  --sf-text-muted: rgba(var(--sf-accent-rgb), 0.7);

  --sf-border: rgba(var(--sf-accent-rgb), 0.22);
  --sf-border-strong: rgba(var(--sf-accent-rgb), 0.38);
  --sf-border-soft: rgba(var(--sf-accent-rgb), 0.16);

  --sf-control-bg: var(--sf-surface-soft);
  --sf-control-border: rgba(var(--sf-accent-rgb), 0.18);
  --sf-control-border-strong: rgba(var(--sf-accent-rgb), 0.26);
  --sf-control-radius: 6px;

  --sf-feedback-success-bg: rgba(var(--sf-highlight-rgb), 0.12);
  --sf-feedback-success-text: var(--sf-highlight-strong);
  --sf-feedback-danger-bg: rgba(var(--sf-accent-rgb), 0.12);
  --sf-feedback-danger-text: var(--sf-accent-strong);

  --sf-danger-bg: var(--sf-feedback-danger-bg);
  --sf-danger-text: var(--sf-feedback-danger-text);
  --sf-success-bg: var(--sf-feedback-success-bg);
  --sf-success-text: var(--sf-feedback-success-text);

  --sf-placeholder: rgba(var(--sf-muted-rgb), 0.62);

  --font-ui: "Noto Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Noto Serif", Georgia, "Times New Roman", serif;

  --sf-text-xs: 0.75rem;
  --sf-text-sm: 0.875rem;
  --sf-text-md: 1rem;
  --sf-text-base: 1rem;
  --sf-text-lg: 1.125rem;

  --sf-fw-medium: 500;
  --sf-fw-semibold: 600;
  --sf-fw-bold: 700;

  --sf-transition-fast: 180ms ease;

  --sf-shadow-sm: 0 4px 4px rgba(25, 25, 25, 0.03);
  --sf-shadow-md: 0 18px 32px rgba(30, 25, 21, 0.08);

  --sf-radius-card: 8px;
  --sf-radius-button: 6px;
  --sf-radius-pill: 999px;
  --sf-radius-xl: var(--sf-radius-card);
  --sf-radius-lg: 24px;
  --sf-radius-md: 18px;
  --sf-radius-sm: 14px;

  --sf-space-1: 0.5rem;
  --sf-space-2: 0.75rem;
  --sf-space-3: 1rem;
  --sf-space-4: 1.25rem;
  --sf-space-5: 1.5rem;
  --sf-space-6: 2rem;
  --sf-space-7: 2.75rem;

  --sf-home-flow-gap: 60px;

  /* shared card tokens */
  --sf-card-padding: var(--sf-space-4);
  --sf-card-padding-lg: var(--sf-space-5);
  --sf-card-radius: var(--sf-radius-card);
  --sf-card-shadow: var(--sf-shadow-sm);
  --sf-card-image-radius: 4px;
  --sf-card-grid-gap: var(--sf-space-4);
  --sf-card-grid-gap-lg: 30px;

  /* menu page card tokens */
  --sf-product-card-padding: 20px;
  --sf-product-card-min-height: 198px;
  --sf-product-card-media-width: 160px;
  --sf-product-card-media-width-mobile: 132px;
  --sf-product-card-title-size: 18px;
  --sf-product-card-title-line-height: 1.26;
  --sf-product-card-body-gap: 0.24rem;
  --sf-product-card-detail-size: 0.84rem;
  --sf-product-card-detail-line-height: 1.45;
  --sf-product-card-price-size: 1.14rem;
  --sf-product-card-price-weight: 700;
  --sf-product-card-compare-size: 0.85rem;
  --sf-product-card-portion-size: 0.8rem;
  --sf-product-card-availability-size: 0.82rem;

  --sf-product-card-button-min-width: 84px;
  --sf-product-card-button-min-height: 28px;
  --sf-product-card-button-padding-y: 4px;
  --sf-product-card-button-padding-x: 12px;

  --sf-product-card-cart-min-width: 108px;
  --sf-product-card-stepper-height: 32px;
  --sf-product-card-stepper-btn-width: 36px;
  --sf-product-card-stepper-qty-min-width: 34px;
  --sf-product-card-stepper-qty-padding-x: 8px;

  --sf-product-card-view-link-size: 0.88rem;
  --sf-product-card-view-link-min-height: 34px;

  /* dietary mark tokens */
  --sf-dish-dot-size: 20px;
  --sf-dish-dot-inset: 4px;
  --sf-dish-dot-border: 1px solid rgba(30, 25, 21, 0.18);
  --sf-dish-dot-bg: rgba(var(--sf-surface-rgb), 0.96);
  --sf-dish-dot-top: -10px;
  --sf-dish-dot-left: -10px;
  --sf-dish-dot-image-top: 12px;
  --sf-dish-dot-image-left: 12px;
  --sf-dish-dot-home-top: 8px;
  --sf-dish-dot-home-left: 8px;
  --sf-dish-dot-veg: #2f8f52;
  --sf-dish-dot-nonveg: #9b2f2f;
  --sf-dish-dot-egg: #c7921b;
}

/* shared menu-card primitives */
.sf-menu-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--sf-card-grid-gap);
  align-items: start;
  min-width: 0;
  padding: var(--sf-card-padding);
  border-radius: var(--sf-card-radius);
  background: var(--sf-surface);
}

.sf-menu-card__body {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.sf-menu-card__topline,
.sf-dish-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sf-menu-card__detail-line,
.sf-menu-card__portion-line {
  margin: 0;
  color: var(--sf-muted);
  line-height: 1.5;
}

.sf-menu-card__detail-line {
  font-size: var(--sf-product-card-detail-size);
  line-height: var(--sf-product-card-detail-line-height);
  min-height: calc(var(--sf-product-card-detail-line-height) * 2em);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sf-menu-card__price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.sf-menu-card__compare-price {
  color: var(--sf-muted);
  font-size: var(--sf-product-card-compare-size);
  text-decoration: line-through;
}

.sf-menu-card__availability {
  margin: 0;
  color: var(--sf-accent-strong);
  font-size: var(--sf-product-card-availability-size);
  font-weight: 600;
}

.sf-menu-card__portion-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--sf-muted);
  font-size: var(--sf-product-card-portion-size);
  line-height: 1.3;
}

.sf-menu-card__portion-text::before {
  content: "\2022";
  color: var(--sf-muted);
}

.sf-menu-card__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sf-space-3);
}

.sf-menu-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.sf-menu-card__detail-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  min-width: 42px;
  height: 42px;
  border: 1px solid var(--sf-border-strong);
  border-radius: var(--sf-radius-button);
  background: transparent;
  color: var(--sf-ink);
  font-size: 1rem;
  line-height: 1;
}

.sf-menu-card__view-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--sf-muted);
  font-size: var(--sf-product-card-view-link-size);
  font-weight: 600;
  position: relative;
  z-index: 2;
  white-space: nowrap;
  min-height: var(--sf-product-card-view-link-min-height);
  padding: 6px 2px;
}

.sf-menu-card__view-link:hover,
.sf-menu-card__view-link:focus-visible {
  color: var(--sf-accent-strong);
}

/* menu-page card shell */
.sf-menu-card--restaurant {
  position: relative;
  grid-template-columns: var(--sf-product-card-media-width) minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  gap: 0.95rem;
  height: 100%;
  min-height: var(--sf-product-card-min-height);
  padding: var(--sf-product-card-padding);
  align-items: stretch;
  border: 0;
  box-shadow: var(--sf-card-shadow);
}

.sf-menu-card__overlay-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--sf-card-radius);
}

.sf-menu-card__media {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: visible;
  border-radius: var(--sf-card-image-radius);
  border: 0;
  background: transparent;
}

.sf-menu-card__media img,
.sf-menu-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: var(--sf-card-image-radius);
}

.sf-menu-card__image {
  display: block;
}

.sf-menu-card--restaurant .sf-menu-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: var(--sf-product-card-media-width);
  max-width: var(--sf-product-card-media-width);
  grid-row: 1 / span 2;
  align-self: start;
  z-index: 2;
}

.sf-menu-card--restaurant .sf-menu-card__body {
  display: grid;
  grid-auto-rows: min-content;
  gap: var(--sf-product-card-body-gap);
  align-content: start;
  position: relative;
  z-index: 2;
  min-height: 0;
}

.sf-menu-card--restaurant .sf-menu-card__body h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--sf-product-card-title-size);
  font-weight: 600;
  line-height: var(--sf-product-card-title-line-height);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sf-menu-card--restaurant .sf-price {
  font-size: var(--sf-product-card-price-size);
  font-weight: var(--sf-product-card-price-weight);
}

.sf-menu-card__footer--restaurant {
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 2;
  gap: 8px;
  margin-top: auto;
  flex-wrap: wrap;
}

/* shared internals used by both menu and home cards */
.sf-menu-card--restaurant .sf-product-actions,
.sf-featured-card--menu .sf-product-actions {
  position: relative;
  z-index: 2;
  margin: 0;
}

.sf-menu-card--restaurant .sf-product-actions .sf-button,
.sf-featured-card--menu .sf-product-actions .sf-button {
  min-width: var(--sf-product-card-button-min-width);
  min-height: var(--sf-product-card-button-min-height);
  padding: var(--sf-product-card-button-padding-y) var(--sf-product-card-button-padding-x);
}

.sf-menu-card--restaurant .sf-food-cart,
.sf-featured-card--menu .sf-food-cart {
  min-width: var(--sf-product-card-cart-min-width);
  align-items: stretch;
}

.sf-menu-card--restaurant .sf-food-cart--with-picker .sf-food-cart__serving-summary,
.sf-featured-card--menu .sf-food-cart--with-picker .sf-food-cart__serving-summary {
  left: 0;
  right: 0;
  width: 100%;
  max-width: none;
}

.sf-menu-card--restaurant .sf-food-cart__serving-change,
.sf-featured-card--menu .sf-food-cart__serving-change {
  justify-content: center;
  width: 100%;
  min-height: var(--sf-product-card-stepper-height);
  padding: 4px 8px;
  border-color: var(--sf-border-strong);
  border-radius: 4px;
  background: #ffffff;
  box-shadow: none;
}

.sf-menu-card--restaurant .sf-food-cart__stepper,
.sf-featured-card--menu .sf-food-cart__stepper {
  min-height: var(--sf-product-card-stepper-height);
}

.sf-menu-card--restaurant .sf-food-cart__qty-btn,
.sf-featured-card--menu .sf-food-cart__qty-btn {
  width: var(--sf-product-card-stepper-btn-width);
  height: var(--sf-product-card-stepper-height);
}

.sf-menu-card--restaurant .sf-food-cart__qty,
.sf-featured-card--menu .sf-food-cart__qty {
  min-width: var(--sf-product-card-stepper-qty-min-width);
  padding: 0 var(--sf-product-card-stepper-qty-padding-x);
}

.sf-menu-card--restaurant .sf-button--soldout,
.sf-featured-card--menu .sf-button--soldout,
.sf-related-dish__actions .sf-button--soldout,
.sf-dish-order-actions .sf-button--soldout {
  min-width: 0;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  font-size: 0.9rem;
  font-weight: 600;
}

.sf-featured-card--menu .sf-menu-card__body {
  display: grid;
  grid-auto-rows: min-content;
  gap: var(--sf-product-card-body-gap);
  align-content: start;
  min-height: 0;
}

.sf-featured-card--menu .sf-menu-card__body h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--sf-product-card-title-size);
  font-weight: 600;
  line-height: var(--sf-product-card-title-line-height);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sf-featured-card--menu .sf-menu-card__footer {
  margin-top: auto;
}

/* shared image wrappers needed for dietary marks */
.sf-featured-image {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--sf-card-image-radius);
  overflow: hidden;
  background: var(--sf-surface-soft);
  border: 1px solid var(--sf-border);
}

.sf-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* dietary mark system */
.sf-dish-dot {
  position: absolute;
  top: var(--sf-dish-dot-top);
  left: var(--sf-dish-dot-left);
  width: var(--sf-dish-dot-size);
  height: var(--sf-dish-dot-size);
  border: var(--sf-dish-dot-border);
  border-radius: 0;
  background: var(--sf-dish-dot-bg);
  z-index: 3;
}

.sf-dish-dot--inline {
  position: relative;
  top: 0;
  left: 0;
  flex: 0 0 auto;
}

.sf-dish-image .sf-dish-dot {
  top: var(--sf-dish-dot-image-top);
  left: var(--sf-dish-dot-image-left);
}

.sf-featured-card--menu .sf-dish-dot {
  top: var(--sf-dish-dot-home-top);
  left: var(--sf-dish-dot-home-left);
}

.sf-dish-dot::after {
  content: "";
  position: absolute;
  inset: var(--sf-dish-dot-inset);
  border-radius: 999px;
  background: var(--sf-dish-dot-veg);
}

.sf-dish-dot--nonveg::after {
  background: var(--sf-dish-dot-nonveg);
}

.sf-dish-dot--egg::after {
  background: var(--sf-dish-dot-egg);
}

@media (max-width: 760px) {
  .sf-menu-card--restaurant {
    --sf-menu-card-mobile-media-size: calc(var(--sf-product-card-media-width-mobile) - 10px);

    grid-template-columns: var(--sf-menu-card-mobile-media-size) minmax(0, 1fr);
    grid-template-areas:
      "title title"
      "desc desc"
      "media body"
      "media footer";
    grid-template-rows: auto auto auto auto;
    column-gap: 20px;
    row-gap: 0;
    min-height: auto;
    height: auto;
    align-items: start;
  }

  .sf-menu-card--restaurant .sf-menu-card__media {
    grid-area: media;
    min-height: var(--sf-menu-card-mobile-media-size);
    max-width: var(--sf-menu-card-mobile-media-size);
    align-self: start;
  }

  .sf-menu-card--restaurant .sf-menu-card__body {
    display: contents;
  }

  .sf-menu-card--restaurant .sf-menu-card__body h3 {
    grid-area: title;
    margin: 0 0 2px;
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    overflow: visible;
  }

  .sf-menu-card--restaurant .sf-menu-card__detail-line {
    grid-area: desc;
    min-height: 0;
    margin: 0 0 20px;
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    overflow: visible;
  }

  .sf-menu-card--restaurant .sf-menu-card__price-row,
  .sf-menu-card--restaurant .sf-menu-card__availability {
    grid-column: 2;
    min-width: 0;
  }

  .sf-menu-card--restaurant .sf-menu-card__price-row {
    grid-area: body;
    display: grid;
    grid-template-columns: auto;
    align-items: start;
    justify-content: start;
    gap: 6px;
    margin: 0;
    align-self: start;
  }

  .sf-menu-card--restaurant .sf-price {
    display: block;
  }

  .sf-menu-card--restaurant .sf-menu-card__compare-price {
    display: block;
    margin-top: -1px;
    line-height: 1.2;
  }

  .sf-menu-card--restaurant .sf-menu-card__portion-text {
    display: block;
    margin-top: 1px;
    font-size: var(--sf-product-card-portion-size);
    line-height: 1.25;
  }

  .sf-menu-card--restaurant .sf-menu-card__portion-text::before {
    content: none;
  }

  .sf-menu-card--restaurant .sf-menu-card__availability {
    margin: 0;
  }

  .sf-menu-card--restaurant .sf-menu-card__footer--restaurant {
    grid-area: footer;
    width: 100%;
    justify-content: space-between;
    align-items: flex-end;
    gap: 6px;
    margin-top: 8px;
    padding-top: 0;
    flex-wrap: nowrap;
    align-self: end;
  }

  .sf-menu-card--restaurant .sf-menu-card__view-link {
    min-height: auto;
    padding: 0;
    align-self: end;
  }

  .sf-menu-card--restaurant .sf-product-actions,
  .sf-menu-card--restaurant .sf-food-cart {
    width: auto;
    min-width: 0;
    margin: 0;
    align-self: end;
  }

  .sf-menu-card--restaurant .sf-food-cart {
    align-items: flex-end;
  }

  .sf-menu-card--restaurant .sf-food-cart__serving-summary {
    position: static;
    max-width: none;
  }
}