/* Minimal Sburger design-system bundle — landing page only. */
(() => {
  const GLYPHS = {
    "flame": '<path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z" />',
    "leaf": '<path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z" /><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12" />',
    "baby": '<path d="M9 12h.01" /><path d="M15 12h.01" /><path d="M10 16c.5.3 1.2.5 2 .5s1.5-.2 2-.5" /><path d="M19 6.3a9 9 0 0 1 1.8 3.9 2 2 0 0 1 0 3.6 9 9 0 0 1-17.6 0 2 2 0 0 1 0-3.6A9 9 0 0 1 12 3c2 0 3.5 1.1 3.5 2.5s-.9 2.5-2 2.5c-.8 0-1.5-.4-1.5-1" />',
    "sparkles": '<path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" /><path d="M20 3v4" /><path d="M22 5h-4" /><path d="M4 17v2" /><path d="M5 18H3" />',
    "shopping-bag": '<path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z" /><path d="M3 6h18" /><path d="M16 10a4 4 0 0 1-8 0" />',
    "phone": '<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />',
    "map-pin": '<path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" /><circle cx="12" cy="10" r="3" />',
    "navigation": '<polygon points="3 11 22 2 13 21 11 13 3 11" />',
    "clock": '<circle cx="12" cy="12" r="10" /><polyline points="12 6 12 12 16 14" />',
    "map": '<path d="M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0z" /><path d="M15 5.764v15" /><path d="M9 3.236v15" />',
    "instagram": '<rect width="20" height="20" x="2" y="2" rx="5" ry="5" /><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" /><line x1="17.5" x2="17.51" y1="6.5" y2="6.5" />',
    "message-circle": '<path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" />',
    "bike": '<circle cx="18.5" cy="17.5" r="3.5" /><circle cx="5.5" cy="17.5" r="3.5" /><circle cx="15" cy="5" r="1" /><path d="M12 17.5V14l-3-3 4-3 2 3h2" />',
    "star": '<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />',
    "image": '<rect width="18" height="18" x="3" y="3" rx="2" ry="2" /><circle cx="9" cy="9" r="2" /><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />',
    "circle-slash": '<circle cx="12" cy="12" r="10" /><line x1="9" x2="15" y1="15" y2="9" />',
    "check-circle-2": '<path d="M21.801 10A10 10 0 1 1 17 3.335" /><path d="m9 11 3 3L22 4" />',
    "alert-triangle": '<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" /><path d="M12 9v4" /><path d="M12 17h.01" />',
    "info": '<circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" />',
  };

  function Icon({ name, size = 20, color = "currentColor", strokeWidth = 2, fill = "none", style, ...rest }) {
    const body = GLYPHS[name];
    if (!body) return <span aria-hidden="true" style={{ display: "inline-block", width: size, height: size, flex: "0 0 auto", ...style }} />;
    return (
      <svg role="img" aria-label={name} xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24"
        fill={fill === true ? color : fill} stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round"
        style={{ display: "block", flex: "0 0 auto", ...style }}
        dangerouslySetInnerHTML={{ __html: body }} {...rest} />
    );
  }

  const SIZES = {
    sm: { height: "var(--control-h-sm)", padding: "0 14px", fontSize: "var(--text-xs)" },
    md: { height: "var(--control-h)", padding: "0 22px", fontSize: "var(--text-sm)" },
    lg: { height: "var(--control-h-lg)", padding: "0 30px", fontSize: "var(--text-md)" },
  };
  const VARIANTS = {
    primary: { background: "var(--red-600)", color: "var(--text-on-accent)", border: "var(--border-w-thick) solid var(--ink-900)", boxShadow: "var(--shadow-sticker)" },
    secondary: { background: "var(--yellow-500)", color: "var(--text-on-highlight)", border: "var(--border-w-thick) solid var(--ink-900)", boxShadow: "var(--shadow-sticker)" },
    outline: { background: "transparent", color: "var(--ink-900)", border: "var(--border-w-thick) solid var(--ink-900)", boxShadow: "none" },
    ghost: { background: "transparent", color: "var(--text-link)", border: "var(--border-w-thick) solid transparent", boxShadow: "none" },
  };
  function Button({ variant = "primary", size = "md", full = false, disabled = false, onDark = false, href, target, rel, children, style, ...rest }) {
    const [pressed, setPressed] = React.useState(false);
    const [hover, setHover] = React.useState(false);
    const v = VARIANTS[variant] || VARIANTS.primary;
    const hasShadow = v.boxShadow !== "none";
    const hoverBg = variant === "primary" ? "var(--red-700)" : variant === "secondary" ? "var(--yellow-600)" : variant === "outline" ? "var(--ink-100)" : "var(--red-100)";
    const Tag = href ? "a" : "button";
    const tagProps = href ? { href, target, rel } : { type: "button", disabled };
    return (
      <Tag {...tagProps}
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => { setHover(false); setPressed(false); }}
        onMouseDown={() => setPressed(true)}
        onMouseUp={() => setPressed(false)}
        style={{
          display: "inline-flex", alignItems: "center", justifyContent: "center", gap: "var(--space-2)",
          width: full ? "100%" : "auto", minWidth: 0, textDecoration: "none", boxSizing: "border-box",
          font: "var(--type-label)", fontWeight: "var(--weight-bold)", letterSpacing: "var(--ls-badge)",
          textTransform: "uppercase", borderRadius: "var(--radius-md)", cursor: disabled ? "not-allowed" : "pointer",
          transition: "var(--transition-control)",
          ...SIZES[size], ...v,
          ...(onDark && variant === "outline" ? { color: "var(--text-on-dark)", borderColor: "var(--ink-050)" } : null),
          ...(onDark && variant === "ghost" ? { color: "var(--yellow-500)" } : null),
          ...(hover && !disabled ? { background: hoverBg } : null),
          ...(pressed && !disabled ? { transform: "translate(var(--press-shift),var(--press-shift))", boxShadow: hasShadow ? "0 0 0 var(--ink-900)" : "none" } : null),
          ...(disabled && !href ? { background: "var(--ink-200)", color: "var(--text-faint)", borderColor: "var(--ink-300)", boxShadow: "none" } : null),
          ...style,
        }} {...rest}>
        {children}
      </Tag>
    );
  }

  function Card({ tone = "light", border = "hairline", pad = "var(--card-pad)", radius = "var(--radius-lg)", sticker = false, children, style, ...rest }) {
    const tones = {
      light: { background: "var(--surface-card)", color: "var(--text-body)" },
      cream: { background: "var(--ink-050)", color: "var(--text-body)" },
      dark: { background: "var(--surface-card-dark)", color: "var(--text-on-dark)" },
      plate: { background: "var(--ink-800)", backgroundImage: "var(--plate-dark)", color: "var(--text-on-dark)" },
      gingham: { background: "var(--gingham-base)", backgroundImage: "var(--gingham)", color: "var(--text-body)" },
    };
    const borders = {
      none: { border: "none" },
      hairline: { border: "var(--border-w) solid var(--border-hairline)" },
      sign: { border: "var(--border-w-thick) solid var(--ink-900)" },
      dark: { border: "var(--border-w) solid var(--border-on-dark)" },
    };
    return (
      <div style={{ padding: pad, borderRadius: radius, overflow: "hidden", boxShadow: sticker ? "var(--shadow-sticker)" : "var(--shadow-card)", ...tones[tone], ...borders[border], ...style }} {...rest}>
        {children}
      </div>
    );
  }

  function Badge({ tone = "neutral", children, icon, showIcon = true, style, ...rest }) {
    const TONES = {
      spicy: { bg: "var(--spicy-bg)", fg: "var(--spicy)", icon: "flame" },
      veggie: { bg: "var(--veggie-bg)", fg: "var(--veggie)", icon: "leaf" },
      kids: { bg: "var(--kids-bg)", fg: "var(--kids)", icon: "baby" },
      new: { bg: "var(--yellow-500)", fg: "var(--ink-900)", icon: "sparkles" },
      soldout: { bg: "var(--sold-out-bg)", fg: "var(--sold-out)", icon: "circle-slash" },
      neutral: { bg: "var(--ink-100)", fg: "var(--ink-600)", icon: null },
    };
    const t = TONES[tone] || TONES.neutral;
    const glyph = icon ?? t.icon;
    return (
      <span style={{ display: "inline-flex", alignItems: "center", gap: "var(--space-1)", background: t.bg, color: t.fg, padding: "4px 9px", borderRadius: "var(--radius-pill)", font: "var(--type-eyebrow)", letterSpacing: "var(--ls-badge)", textTransform: "uppercase", whiteSpace: "nowrap", ...style }} {...rest}>
        {showIcon && glyph ? <Icon name={glyph} size={12} strokeWidth={1.75} /> : null}
        {children}
      </span>
    );
  }

  function IconButton({ icon, label, size = "md", variant = "outline", onDark = false, disabled = false, href, target, rel, style, ...rest }) {
    const [hover, setHover] = React.useState(false);
    const SZ = { sm: 36, md: 44, lg: 52 };
    const px = SZ[size] || SZ.md;
    const base =
      variant === "primary" ? { background: "var(--red-600)", color: "var(--text-on-accent)", borderColor: "var(--ink-900)" } :
      variant === "secondary" ? { background: "var(--yellow-500)", color: "var(--ink-900)", borderColor: "var(--ink-900)" } :
      variant === "ghost" ? { background: "transparent", color: onDark ? "var(--text-on-dark)" : "var(--ink-700)", borderColor: "transparent" } :
      { background: "transparent", color: onDark ? "var(--text-on-dark)" : "var(--ink-900)", borderColor: onDark ? "var(--border-on-dark)" : "var(--ink-900)" };
    const hoverBg = variant === "primary" ? "var(--red-700)" : variant === "secondary" ? "var(--yellow-600)" : onDark ? "rgba(251,243,228,.12)" : "var(--ink-100)";
    const Tag = href ? "a" : "button";
    const tagProps = href ? { href, target, rel } : { type: "button", disabled };
    return (
      <Tag {...tagProps} aria-label={label}
        onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
        style={{ width: px, height: px, boxSizing: "border-box", display: "inline-flex", alignItems: "center", justifyContent: "center", borderRadius: "var(--radius-md)", borderStyle: "solid", borderWidth: "var(--border-w-thick)", cursor: disabled ? "not-allowed" : "pointer", transition: "var(--transition-control)", textDecoration: "none", ...base, ...(hover && !disabled ? { background: hoverBg } : null), ...(disabled && !href ? { opacity: 0.45, cursor: "not-allowed" } : null), ...style }} {...rest}>
        {typeof icon === "string" ? <Icon name={icon} size={Math.round(px * 0.45)} /> : icon}
      </Tag>
    );
  }

  function Logo({ variant = "wordmark", height = 48, assetBase = "assets", style, ...rest }) {
    const icon = `${assetBase}/logo-icon.png`;
    const word = `${assetBase}/logo-wordmark.png`;
    if (variant === "lockup") {
      return (
        <span style={{ display: "inline-flex", alignItems: "center", gap: "var(--space-3)", ...style }} {...rest}>
          <img src={icon} alt="" style={{ height, width: "auto" }} />
          <img src={word} alt="Sburger — The Original Smash Burger" style={{ height: height * 0.82, width: "auto" }} />
        </span>
      );
    }
    const src = variant === "icon" ? icon : word;
    return <img src={src} alt="Sburger" style={{ height, width: "auto", ...style }} {...rest} />;
  }

  function SectionHeading({ eyebrow, title, sub, align = "left", onDark = false, level = 2, style, ...rest }) {
    const Tg = `h${level}`;
    const sizes = { 1: "var(--text-display-1)", 2: "var(--text-display-2)", 3: "var(--text-display-3)", 4: "var(--text-display-4)" };
    return (
      <div style={{ textAlign: align, display: "grid", gap: "var(--space-3)", justifyItems: align === "center" ? "center" : "start", ...style }} {...rest}>
        {eyebrow ? <span style={{ font: "var(--type-eyebrow)", letterSpacing: "var(--ls-eyebrow)", textTransform: "uppercase", color: onDark ? "var(--yellow-500)" : "var(--red-600)" }}>{eyebrow}</span> : null}
        <Tg style={{ fontFamily: "var(--font-display)", fontSize: sizes[level], lineHeight: "var(--lh-display)", textTransform: "uppercase", color: onDark ? "var(--text-on-dark)" : "var(--text-strong)", margin: 0 }}>{title}</Tg>
        {sub ? <p style={{ margin: 0, font: "var(--type-body)", maxWidth: "52ch", color: onDark ? "var(--text-on-dark-muted)" : "var(--text-muted)" }}>{sub}</p> : null}
      </div>
    );
  }

  function Tag({ children, tone = "red", size = "md", skew = true, style, ...rest }) {
    const tones = {
      red: { background: "var(--red-600)", color: "var(--text-on-accent)" },
      yellow: { background: "var(--yellow-500)", color: "var(--ink-900)" },
      dark: { background: "var(--ink-800)", color: "var(--text-on-dark)" },
      cream: { background: "var(--ink-050)", color: "var(--ink-900)" },
    };
    const sizes = { sm: { fontSize: "14px", padding: "2px 8px" }, md: { fontSize: "20px", padding: "4px 12px" }, lg: { fontSize: "32px", padding: "6px 16px" } };
    return (
      <span style={{ display: "inline-block", fontFamily: "var(--font-display)", textTransform: "uppercase", letterSpacing: "var(--ls-display)", lineHeight: 1.1, borderRadius: "var(--radius-sm)", transform: skew ? "skewX(var(--display-skew))" : "none", ...tones[tone], ...sizes[size], ...style }} {...rest}>
        {children}
      </span>
    );
  }

  function StarRating({ value = 4.5, max = 5, size = 18, count, onDark = false, style }) {
    return (
      <span style={{ display: "inline-flex", alignItems: "center", gap: "var(--space-2)", ...style }}>
        <span style={{ display: "inline-flex", gap: 2 }}>
          {Array.from({ length: max }).map((_, i) => {
            const fill = Math.max(0, Math.min(1, value - i));
            return (
              <span key={i} style={{ position: "relative", width: size, height: size, display: "inline-block" }}>
                <Icon name="star" size={size} color={onDark ? "var(--ink-500)" : "var(--ink-200)"} fill={onDark ? "var(--ink-500)" : "var(--ink-200)"} strokeWidth={1.5} style={{ position: "absolute", inset: 0 }} />
                <span style={{ position: "absolute", inset: 0, width: `${fill * 100}%`, overflow: "hidden" }}>
                  <Icon name="star" size={size} color="var(--yellow-500)" fill="var(--yellow-500)" strokeWidth={1.5} />
                </span>
              </span>
            );
          })}
        </span>
        <span style={{ fontFamily: "var(--font-condensed)", fontWeight: "var(--weight-bold)", fontSize: "var(--text-md)", color: onDark ? "var(--text-on-dark)" : "var(--text-strong)" }}>{value.toFixed(1).replace(".", ",")}</span>
        {count ? <span style={{ font: "var(--type-body-sm)", fontSize: "var(--text-sm)", color: onDark ? "var(--text-on-dark-muted)" : "var(--text-muted)" }}>({count})</span> : null}
      </span>
    );
  }

  function Toast({ tone = "success", message, action, onAction, inline = false, style }) {
    const TONES = {
      success: { bg: "var(--ink-800)", accent: "var(--yellow-500)", icon: "check-circle-2" },
      error: { bg: "var(--red-700)", accent: "var(--yellow-500)", icon: "alert-triangle" },
      info: { bg: "var(--ink-800)", accent: "var(--ink-050)", icon: "info" },
    };
    const t = TONES[tone] || TONES.success;
    return (
      <div role="status" style={{
        display: "flex", alignItems: "center", gap: "var(--space-3)",
        padding: "var(--space-3) var(--space-4)", background: t.bg, color: "var(--text-on-dark)",
        borderRadius: "var(--radius-md)", boxShadow: "var(--shadow-card)",
        borderLeft: `var(--border-w-sign) solid ${t.accent}`,
        ...(inline ? null : { position: "fixed", left: "50%", bottom: "var(--space-6)", transform: "translateX(-50%)", zIndex: 70 }),
        ...style,
      }}>
        <Icon name={t.icon} size={18} color={t.accent} />
        <span style={{ font: "var(--type-body-sm)", fontWeight: "var(--weight-medium)" }}>{message}</span>
        {action ? (
          <button type="button" onClick={onAction} style={{ marginLeft: "var(--space-2)", border: "none", background: "transparent", color: "var(--yellow-500)", font: "var(--type-label)", textTransform: "uppercase", letterSpacing: "var(--ls-badge)", cursor: "pointer" }}>
            {action}
          </button>
        ) : null}
      </div>
    );
  }

  function PriceTag({ value, size = "md", tone = "dark", strike, style }) {
    const fmt = (n) => typeof n === "number" ? `€ ${n.toFixed(2).replace(".", ",")}` : n;
    const sizes = { sm: "var(--text-md)", md: "var(--text-lg)", lg: "28px" };
    const colors = { dark: "var(--text-strong)", red: "var(--red-600)", cream: "var(--text-on-dark)" };
    return (
      <span style={{ display: "inline-flex", alignItems: "baseline", gap: "var(--space-2)", ...style }}>
        {strike !== undefined ? <s style={{ fontFamily: "var(--font-condensed)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-base)", color: "var(--text-faint)" }}>{fmt(strike)}</s> : null}
        <span style={{ fontFamily: "var(--font-condensed)", fontWeight: "var(--weight-bold)", fontSize: sizes[size], lineHeight: 1, color: colors[tone], fontVariantNumeric: "tabular-nums" }}>{fmt(value)}</span>
      </span>
    );
  }

  function MenuItemCard({ name, description, price, image, badges = [], layout = "row", soldOut = false, onAdd, style }) {
    const [hover, setHover] = React.useState(false);
    const column = layout === "column";
    return (
      <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
        style={{
          display: column ? "flex" : "grid", flexDirection: column ? "column" : undefined,
          height: column ? "100%" : undefined,
          gridTemplateColumns: column ? undefined : "104px 1fr auto",
          gap: "var(--space-4)", alignItems: column ? "stretch" : "center",
          background: "var(--surface-card)", border: "var(--border-w) solid var(--border-hairline)",
          borderRadius: "var(--radius-lg)", padding: column ? 0 : "var(--space-3)",
          overflow: "hidden", opacity: soldOut ? 0.6 : 1,
          boxShadow: hover && !soldOut ? "var(--shadow-card-hover)" : "var(--shadow-card)",
          transform: hover && !soldOut ? "translateY(-2px)" : "none",
          transition: "box-shadow var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard)",
          ...style,
        }}>
        <div style={{ width: column ? "100%" : 104, height: column ? "auto" : 104, aspectRatio: column ? "1 / 1" : undefined, flex: "0 0 auto", borderRadius: column ? 0 : "var(--radius-md)", background: "var(--ink-800)", backgroundImage: "var(--heat-glow)", overflow: "hidden", display: "grid", placeItems: "center" }}>
          {image ? <img src={image} alt="" style={{ width: "100%", height: "100%", objectFit: "contain" }} /> : <Icon name="image" size={24} color="var(--ink-500)" />}
        </div>
        <div style={{ padding: column ? "var(--space-4)" : 0, display: "flex", flexDirection: "column", gap: "var(--space-2)", flex: column ? "1 1 auto" : undefined }}>
          <div style={{ display: "flex", alignItems: "baseline", gap: "var(--space-3)", justifyContent: "space-between" }}>
            <h4 style={{ margin: 0, fontFamily: "var(--font-display)", fontSize: "var(--text-display-4)", textTransform: "uppercase", color: "var(--text-strong)" }}>{name}</h4>
            {column ? <PriceTag value={price} /> : null}
          </div>
          {description ? <p style={{ margin: 0, font: "var(--type-body-sm)", color: "var(--text-muted)" }}>{description}</p> : null}
          {badges.length || soldOut ? (
            <div style={{ display: "flex", gap: "var(--space-2)", flexWrap: "wrap" }}>
              {soldOut ? <Badge tone="soldout">Esaurito</Badge> : null}
              {badges.map((b) => <Badge key={b.label ?? b} tone={b.tone ?? "neutral"}>{b.label ?? b}</Badge>)}
            </div>
          ) : null}
          {column && onAdd ? (
            <button type="button" onClick={onAdd} disabled={soldOut}
              style={{ marginTop: "auto", height: "var(--control-h)", flex: "0 0 auto", border: "var(--border-w-thick) solid var(--ink-900)", borderRadius: "var(--radius-md)", background: soldOut ? "var(--ink-200)" : "var(--red-600)", color: "var(--ink-050)", font: "var(--type-label)", fontWeight: "var(--weight-bold)", textTransform: "uppercase", letterSpacing: "var(--ls-badge)", cursor: soldOut ? "not-allowed" : "pointer" }}>
              Aggiungi
            </button>
          ) : null}
        </div>
        {!column ? (
          <div style={{ display: "grid", gap: "var(--space-2)", justifyItems: "end", paddingRight: "var(--space-2)" }}>
            <PriceTag value={price} />
            {onAdd ? (
              <button type="button" onClick={onAdd} aria-label={`Aggiungi ${name}`} disabled={soldOut}
                style={{ width: 40, height: 40, display: "grid", placeItems: "center", borderRadius: "var(--radius-md)", border: "var(--border-w-thick) solid var(--ink-900)", background: soldOut ? "var(--ink-200)" : "var(--yellow-500)", cursor: soldOut ? "not-allowed" : "pointer" }}>
                <Icon name="plus" size={18} color="var(--ink-900)" />
              </button>
            ) : null}
          </div>
        ) : null}
      </div>
    );
  }

  window.SburgerDesignSystem_d72664 = Object.assign(window.SburgerDesignSystem_d72664 || {}, {
    Icon, Button, Card, Badge, IconButton, Logo, SectionHeading, Tag, StarRating, Toast, PriceTag, MenuItemCard,
  });
})();